매일 조금씩

11/02 - Javascript(2) : 제어문 / 라이브러리 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

11/02 - Javascript(2) : 제어문 / 라이브러리

mezo 2020. 11. 2. 17:33
728x90
반응형

< 복습 >

 

Website(Webpage - homepage(이건 개인적인 거다. 가급적이면 쓰지마라)

HTML - 내용을 구조적

CSS - 내용을 디자인

JS - 기능적 표현

=> front end(Presentation)

=> Publisher

 

Website하면서 알아야될 시스템적 흐름

1. client

      Browser

           ie/chrome 

2. server

      Apache-Tomcat( -> jsp까지연결됨)

           (JDK설치해야함)

***더블클릭으로 열어버리면 서버에 요청하는 형식이 아니므로 항상 브라우저에 주소쳐서 들어가라!

 

js -  프로그램 언어

자료

       자료형 - typeof

       저장공간

                변수/상수

                           X / var / let, const

                           이름규칙

       연산자

                 단항 : 항이 하나

                           +a / -a

                           ++a / --a

                 이항

                           나머지

                 삼항

                           ? :

                 

제어

라이브러리

 

js 소스 실행

1. browser 통해서 실행 (일단 우린 이방법을 쓴다)

      html파일안에 js코드를 넣어서 실행시킨다.

2. node.js 프로그램을 통해서 실행

 

 

 

Apache-Tomcat, JDK 설치후에 cmd에서 startup.bat해줘야 브라우저에서 주소쳤을 때 돌아간다.

 

 

 

 

 

 

 

 

P435

strict 모드 설정

"use strict"

 

 

 

 

 Javascript 제어문 

for 문

for(초기값; 조건식; 증가값){

    문장

}

  • document로 변수값(변하는 값) 들어가는 표 그리기
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script type="text/javascript">
        "use strict";
        
        // 표1
        document.write('<table border="1" width = "400">');
        for(let i = 1; i <= 3; i++){
            document.write( '<tr>');
            document.write('    <td>1</td>');
            document.write('    <td>2</td>');
            document.write('    <td>3</td>');
            document.write('</tr>');
        }
        document.write('</table>');

        document.write('</br>')

        // 표2
        document.write('<table border="1" width = "400">');
        document.write( '<tr>');
        for(let i = 1; i <= 9; i++){ 
            document.write( '    <td>');
            //document.write( '    2*', i, '=', 2*i);
            document.write( '    2*'+ i + '=' + (2*i));
            document.write( '   </td>');
        }
        document.write('</tr>');
        document.write('</table>');



    </script>
</body>
</html>

 

 

 

 

 

  • 중첩 for문 써서 콘솔창에 출력하기
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script type="text/javascript">
        "use strict";
        
        console.log('시작');
      
        for(let i = 1; i <= 10; i++){ 
            let result = '';
            for(let j = 1; j <= 10; j++){
                result += '*';
            }
            console.log(result);
        }

        console.log('끝');

    </script>
</body>
</html>

 

console.log는 다른 라인으로 계속 출력되기 때문에

한 줄의 *를 저장할 result를 쓰지 않으면 아래로 * 100개가 계속 출력이 된다.

 

첫번째 for문 안에서 result를 정의하는 것이 중요! 

 

 

      //응용1

 

      //응용2

 

 

 

while 문

초기값

while(조건식){

    문장;

    증가값;

}

 

 

  1. 유한루프 - for
  2. 무한루프 - while / do~while  => while(true){    }

 

 

 

break, continue, loop;

  1. break : 현재 반복문을 빠져나감 (가장 가까운 반복문만 빠져나감)
  2. continue : 현재 반복문의 끝으로 이동 (가장 가까운 반복문의 끝으로)
  3. loop : break loop; 하면 loop: 다음에 오는 반복문을 빠져나간다. (빠져나가는 영역을 지정하는 것)

       // break

 

 

       // continue

 

 

       // loop

 

 

 

 

 

 

 

 

 

 

 Javascript 라이브러리 

▷p256

ㅇ 함수(function)

        변수/상수

        제어문

    => 모듈(재활용 블럭)

   - 사용자 정의 함수 -> 개발자

   - 내장함수 -> 라이브러리고 제공

 

 

- 선언 : 사용준비

- 호출 : 사용 -> 인자(argument/parameter)

 

  • 선언적 함수

      함수이름이 있다.

 

 

 

  • 익명 함수

      함수이름 없다.

      함수정의에 대한 할당이 가능하다.

      선언적 함수보다 많이 쓴다.

 

     

 

 

 

  •  콜백 함수

        callback 구조

        현대 - 일급함수(함수) => 함수를 변수취급

        객체지향언어(java, c++...) , 함수지향언어(javascript)

 

 

 

 

  • 중첩 함수(내부 함수)

      함수 안의 내용이 복잡해질 때

      함수 안에서 재선언해서 쓴다.

 

 

 

      // 응용문제

      테이블에 구구단을 출력하라!

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript">
        "use strict";

        let gugu = function(b){
            for(let j = 1; j <= 9; j++){
                document.write(b + 'X' + j + '=' + (b*j) + '\n');
                document.write('</br>');
            }
        }
    </script>

</head>

<body>
    <script type="text/javascript">
        document.write('<table border="1" width = "600">');
        for(let i = 1; i <= 10; i++){
            document.write('<tr>');
            if(i == 1){
                document.write('    <td></td>');
            }
            else{
                document.write('    <td>'+ (i-1) + '단' + '</td>');
            }
            for(let j = 1; j <= 9; j++){
                if(i == 1){
                    document.write('    <td> X ' + j + '</td>');
                }
                else{
                    document.write('    <td>' + (i-1) + 'X' + j + '=' + ((i-1)*j) + '</td>');
                }
            }
            document.write('</tr>');
        }
        document.write('</table>');



        document.write('</br>');



        document.write('<table border="1" width = "200">');
        
        let a = 1;
        for(let i = 1; i <= 3; i++){
            document.write('<tr>');
            
            for(let j = 1; j <= 3; j++){
                document.write('    <td>');
                gugu(a);
                document.write('    </td>');
                a++;
            }
            document.write('</tr>');
            
        }
        document.write('</table>');


        
  
    </script>
</body>
</html>

 

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

11/04 - Javascript(4) : 배열확장(spread연산자) / 사용자정의 객체 / 내장 객체  (0) 2020.11.04
11/03 - Javascript (3) : 변수/ 함수/ 배열  (0) 2020.11.03
10/30 - CSS 마무리, Javascript (1) : 자료형 / 연산자 / 조건문  (0) 2020.10.30
10/29 - CSS  (0) 2020.10.29
10/28 - HTML(2) : 개발 환경 ( filezilla, ApachTomcat, JDK ) 설치, html  (0) 2020.10.28
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more