ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JS] 자바스크립트 1일차 요점정리
    Frontend 2019. 2. 9. 22:46

    [1] Javascript 작성 방법: HTML 소스 코드에 포함되는 형태로 작성된다.



    [2] HTML 소스코드에 포함시키기:

    다음의 코드를 HTML 소스코드 안에 명시. 
    일반적으로 <head>~</head>에 위치한다.

    <script [type="text/javascript"]>
    ... javascript 구문...
    </script>
    ...


    [3] 외부 파일에 대한 참조를 포함시키기:

    <script> 태그를 제외한 javascript 구문만 ".js"로 저장된 별도의 파일로 분리하고
    <script> 태그의 src 속성으로 분리된 파일의 경로를 참조시킨다.

    ```javascript 
    <script [type="text/javascript"] src="*.js파일의 경로"></script>
    ```


    [4] 콘솔: 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 내용을 출력하기 위한 공간.



    [5] 변수

    데이터를 저장하기 위한 키워드. 변수를 사용하기 위해서는 선언과 할당의 과정이 필요하다.

    ```javascript
    var 변수이름;    // 변수의 선언
    변수이름 = 값;   // 선언된 변수에 값 할당
    ```


    [6] 선언과 할당을 결합한 형태

    ...javascript
    var 변수이름 = 값;
    ...


      1. 변수의 이름은 영어+숫자+언더바의 조합으로 구성한다.
      2. 띄어쓰기가 필요한 경우 언더바를 사용하거나 첫 글자를 대문자로 표현.
      3. 값의 할당은 오른쪽에서 왼쪽으로만 가능.

    * 저장 가능한 값의 종류

        • Boolean : 논리값, 참(true) | 거짓(false)
        • Number : 정수(integer, int), 실수(double, float)값 
        • String : 문자열(문장), 쌍따옴표나 홑따옴표로 감싸서 표현.
        • Null : 값이 확정되기 이전에 임의로 비워둔 형태. - ""로 표현하기도 함.
        • undefined : 값이 할당되기 이전에 임의로 비워둔 형태. (undefined만 앞글자가 소문자로 시작) - 처음부터 변수가 선언만 되고 아무런 값도 할당되지 않음!
        • Object : 객체(이후 살펴봄)




    [연산자]

    1. 대입 연산: 변수에 숫자나 문자열 등의 자료를 입력하거나 연산 결과를 다른 변수에 할당한다. (=)


    2. 사칙연산

        • 기본적인 +, -, *, /(몫) , %(나머지)     ----> 10/3=3.33333... | 10%3=1
        • 곱하기, 나누기가 더하기, 빼기보다 우선함.
        • 괄호 ()로 묶은 부분이 최우선 처리됨.
        • 더해지는 값에 문자열이 포함되어 있는 경우 모두 하나의 문장으로 결합된다.

    ```javascript
    var a = "가나다";
    var b = 123;
    var c = a + b;    //"가나다123"
    ```

    3. 단항연산

    연산 결과를 변수 스스로에게 다시 적용할 경우의 단축표현.

    모든 사칙연산자에 대해서 표현 가능함.

    ```javascript
    var a = 100;
    a = a + 10;    //a가 10 증가됨.
    a += 10;       //같은 표현
    ```


    4. 증감연산

    단항 연산에서 사용되는 값이 1이고 덧셈과 뺄셈의 경우만 축약 가능함.

    ```javascript
    var a = 100;
    a++;
    ++a;
    a--;
    --a;
    ```

    다른 연산식에 포함된 경우 증감연산자의 위치에 따라서 계산되는 시점이 다르다.

    ```javascript
    var a = 1;
    //(뒷북) 100+1을 먼저 수행해서 y값을 확정. 그 후 a가 증가함.
    y = 100 + a++;

    //(앞북) a가 먼저 1 증가하고 100+2가 수행되서 y값을 확정.
    y = 100 + ++a;
    ```


    5. 비교연산

    일반적인 부등식

      • 같다: ==
      • 다르다: !=
      • 크다(초과): >
      • 크거나 같다(이상): >=
      • 작다(미만): <
      • 작거나 같다(이하): <=

    부등식의 결과는 참 (true), 혹은 거짓(false)이 된다.

    ```javascript
    var a = 100 < 1000;    //true
    var b = 50 >= 1000;    //false
    ```
        ex) 평균점수가 80점 이상인 사람을 구하기 ...
                ... > 80




    6. 논리연산

    참과 거짓을 and(&&), or(||)로 비교하여 결과를 도출

    &&: 모든 값이 참인 경우만 결과가 참.

    ||: 하나라도 참이면 결과가 참.




    [프로그램의 흐름제어]

    -조건문-

    1. if 문

    괄호안에 주어진 조건이 참인 경우 블록 {}안을 수행.

    cf) { ... } 안에 들어갈 구문이 한 줄만 있는 경우, { } 를 생략 가능.

    ```javascript
    if(조건) {
        //..조건이 참인 경우 실행할 명령 ...
    }

    조건에 명시할 수 있는 형식

    비교식 (==, !=, >, >=, <, <=)

    논리식 (&&, ||)

    논리값 (true / false)



    2. If ~ else 문

    조건이 참인 경우 if 블록이 실행. 그렇지 않은 경우 else 블록이 실행

    if (조건) {
        //...조건이 참인 경우 실행할 명령...
    } else (조건) {
        //...조건이 참이 아닌 경우 실행할 명령...
    }


    3. If ~ else  if ~ else문

    여러 개의 조건을 나열하여 그 중 가장 처음 만나는 참인 조건의 블록을 수행함. 그 외의 블록은 실행하지 않고 빠져 나간다.

    if (1차 조건) {
        ...
    } else if (2차 조건) {
        ...
    } else if (3차 조건) {
        ...
    } else { ---> 생략가능
        ...
    }


    4. switch문

    하나의 변수값에 대한 여러가지 경우의 수를 나열하고 그 중 참인 경우를 실행함.

    switch (변수) {
        case "값1" : //경우의 수는 필요한 만큼 나열
        ...
        break;

        case "값2" : 
        ...
        break;

        case "값3" :
        ...
        break;

        default : //일치하는 경우가 없을 경우 수행할 블록 (생략가능)
        ...
        break;
    }




    반응형

    'Frontend' 카테고리의 다른 글

    [JS] 자바스크립트 3일차 요점정리  (484) 2019.02.09
    [JS] 자바스크립트 2일차 요점정리  (967) 2019.02.09
    [CSS]Day8 -background  (609) 2019.02.09
    [CSS]Day7 -Position  (734) 2019.02.09
    [CSS]Day6 -Display/Float  (1092) 2019.02.09

    COMMENT