02. 자바스크립트 기초 문법

* 내부 스크립트 외부로 분리하기

<script src="JS 파일 경로"></script>

 

* 코드 입력 시 주의 사항 

1. 자바스크립트는 대/소문자 구분하여 작성한다. 

2. 코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋다.

   세미콜론을 쓰지 않으면 한 줄에 2개의 코드를 작성할 경우 오류 발생 

   * 한 줄에 한문장만 작성하는 게 가독성을 위해 좋음. 

 

3. 문자형 데이터를 작성할 큰따옴표("")와 작음따옴표('')의 겹침 오류 주의

4. 코드를 작성할 때 중괄호 {} 또는 소괄호 ()의 짝이 맞아야 한다. 

---

* 변수선언

변수는 변하는 데이터를 저장할 수 있는 메모리 공간 / 데이터를 담을 수 있는 그릇 / 데이터가 오직 한 개만 저장됨 

==> 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워짐

 

데이터의 종류 

- 문자형 (String), 숫자형 (Number), 논리형(Boolean), 빈(Null)

 

* 변수 선언 시 주의 사항

변수선언 시 var 키워드를 변수명 앞에 붙인다.

변수명 첫글자로는 $, _(언더바), 영문자만 올수 있다.

변수명 첫글자 다음은 영문자, 숫자, $, _(언더바)만 포함할 수 있다. 

변수명으로 예약어(document, location, window 등)을 사용할 수 없다. 

   - 예약어란 이미 자바스크립트에서 사용중인 단어를 말함. 

한글사용X, 영문과 숫자 그리고 일부 특수문자(_,$)포함 할 수 있다. 

변수명은 의미에 맞게 만드는것이 좋다. 

두번째 단어의 첫글자는 대문자로 표기

var 변수명; ==> 초기에는 값이 등록되지 않은 상태  NUll 

 

ex) var 변수명; var 변수명=값;

---

* 변수에 저장할 수 있는 자료형

 

문자형 데이터

- 문자형 데이터는 문자나 숫자를 큰따옴표 또는 작은 따옴표로 감싸고 있다.

- 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식

 

숫자형 데이터

- var 변수  = 숫자; 또는 Number("문자형 숫자");

 

논리형 데이터 

- 논리형 데이터 : true, false를 반환

- 주로 2개의 데이터를 비교할 때 나오는 결과 

- var 변수 = ture or false; 또는 var qustn = Boolean(데이터);     

- Boolean() 메서드는 숫자 0과 null, undefined, 빈 문자("")를 제외한 데이터에 대해 true를 반환한다. 

 

null & undefined 데이터 

- undefined는 변수에 값이 등록되기 전의 기본값이고, null은 변수에 저장된 값이 null인 경우를 가리킨다.

- var s; // undefined

 

typeof

- typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을때 사용

- typeof 변수 또는 데이터; 

---

* 연산자

- 자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자결합, 대입, 증감, 비교, 논리, 삼항 조건 연산자가 있다

 

1. 산술 연산자 

산술 연산자의 종류와 기본형 

- 더하기(+)

- 빼기(-)

- 곱하기(*)

- 나누기(/)

- 나머지(%)

 

2. 문자 결합 연산자

- 문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터, 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용 

- 더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형변환되고 문자 결합이 이루어져 하나의 문자형 데이터를 반환한다. 

 

ex) "do it" + "javascript" = "do it javascript"; / "100" + 200 = "100200";

 

3. 대입 연산자 

- 대입연산자는 연산된 데이터를 변수에 저장할 때 사용

- 복합대입연산자(+=,-+,*=,/=,%=)는 산술 연산자와 대입 연산자가 복합적으로 적용된것을 말한다. 

 

4. 증감 연산자 

- 증감연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소연산자(--) 있다. 

- 증감연산자는 변수의 어느 위치에 오는가에 따라 결과 값이 달라진다. 

 

ex) var A = ++B :  먼저 B의 값을 증가 시키고 증가된 B의 값을 A에 대입

    var A = B++ : 먼저 B의 값을 A에 대입하고 B의 값을 1증가시킴

 

5. 비교 연산자 

- 두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자

- 연산된 결과 값은 true, false로 논리형 데이터를 반환 

- A>B, A<B, A>=B, A<=B, A==B(숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환, 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 true반환)

- A!=B, A===B (숫자를 비교할 경우 반드시 표기된 숫자와 자료형도 일치해야 true를 반환한다.)

- A!==B

 

6. 논리 연산자 

논리 연산자에는  ||(or), &&(and), !(not)이 있으며, 논리 연산자는 피연산자가논리형 데이터인 true, false로 결과값을 반환 

 

- || : or연산자라 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결과값을 반환

- && : and연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결과값을 반환

- ! : not 연산자라 부르며, 단항연산자 / 피연산자의 값이 true이면 반대로 false로 결과값을 반환 

---

* 연산자 우선순위

1. ()

2. 단항연산자(--, ++, !)

3. 산술연산자(*, /, %, +, -)

4. 비교연산자(>, >=, <=, <=, ==, ===, !==, !=)

5. 논리연산자 (&&, ||)

6. 대입(복합 대입) 연산자 (=, +=, -=, *=, /=, %=)

---

* 삼항 조건 연산자

- 삼항 조건 연산자는 조건식(true, false를 반환)의 결과에 따라 실행결과가 달라지는 삼항연산자로

  연산을 위해 피 연산자가 3개 필요

 

조건식 ? 자바스크립트 코드1 : 자바스크립트 코드 2;

                            true                           false