JS 기초

여태 기초적인 웹페이지 동작을 위해 HTML을 통해 정보를 표시하고, 그 정보의 디자인을 위한 CSS를 사용하는 방법을 학습했다. 오늘은 자바스크립트의 기본적인 사용법을 학습한다.

자바 스크립트는 html 태그 위치와 상관없이 만들 수 있지만, 스크립트가 위에서 아래로 실행되기 때문에 스크립트 실행이 우선되야할 경우 head부분에 작성해서 사용한다.

 

---

자료형

자바 스크립트에서는 자바와 달리 변수,메서드 선언시에 자료형을 지정하지 않는다.  

 

숫자형 : 정수와 실수의 자료형 구분이 없다. 

문자열 : 문자집합.자바와 동일

날짜 객체 Date는 문자열 형태로 저장된다.

 

 

연산자는 자바와 동일하지만,  두드러지게 차이나는 연산자는 아래와 같다.

 

== 연산자를 사용시 자바스크립트는 10 == '10'이 true가 나온다. 숫자형10과 문자형10을 똑같이 인식한다.

=== 연산자를 사용시, 값 뿐만 아니라 자료형이 같은지도 함께 비교한다.

+ 연산자 사용시 문자열+ 숫자는 덧셈이 아니라 이어붙이기 연산자를 사용한 결과로 나온다.

 

 

 

 

변수 선언

 

var : 재선언과 업데이트 가능, 모든 변수를 var로 사용시 지역변수와 전역변수를 구분하기 어려워진다는 단점이 있다.

let :  선언된 블록 내에서만 사용 가능 var의 단점을 보완하기 위해 사용한다. 재선언 불가, 업데이트 가능 .

const : 자바의 final과 동일하다. 상수로 선언. 재선언 불가, 업데이트 불가.

 

변수를 선언하지 않고 사용해도 오류없이 사용된다. 선언하지 않을시 자바스크립트에서 자동으로 값을 선언하고 실행된다. 그러므로 변수 통제에 좀더 신경을 써야한다.

 

 

 

 

---

 

기초지식

1. 숫자 리터럴만 조건문에 넣으면, 0은 false가 나오고 0이 아닌 숫자는 true가 나온다.

if (10) alert("10 true입니다")

else alert("false") //true

 

if (0) alert("0 true입니다")

else alert("false")  //false

 

if (-10) alert("-10 true입니다")

else alert("false") // true

 

위 코드에서 2번째 코드만 false값이 나오고, 10과 -10은 true가되어 각각 alert 알림창이 실행된다.

 

if ("") alert("true입니다")

else alert("false") //false

if ("a") alert("true입니다")

else alert("false") //true

 

2. 문자 리터럴의 경우 조건문에 사용시 length가 0이면 false, 아니면 true가 나온다. 

 

 

3. DATE 객체에서 getMonth,getDay 메서드 사용시 결과값이 0부터 시작한다. set 메서드 사용시에도 Month의 경우 0부터 11까지의 값을 넣어줘야 한다.

 

4. 자바는 배열에 똑같은 종류의 값이 들어가야 하지만, 자바스크립트 에서는 다른 종류의 값이 들어가는 것을 허용한다.

 

ex ) let array = [273, '문자열', true, function () {}, {}, [32,103]]; 

*함수도 배열에 들어갈 수 있다.

 

 

 

5.  익명 함수

 

function () {} : 익명 함수. 이름을 입력하지 않음. 변수안에 들어가 있는 함수의 경우에는 변수.()로 불러오면 되기 때문에 이름이 필요 없는 경우가 있음.

 

function 함수이름(){} : 선언적 함수. 이름과 함께 선언되어 사용된다.

 

선언적 함수와 익명 함수를 함께 사용할 경우 선언적 함수가 먼저 읽힌다.

 

 

6. 자바스크립트에서도 HTML 태그를 사용시 속성값에 " " 기호를 붙여주여야 한다.

 

 

 

---

 

마무리

 

자바스크립트와 자바는 비슷한점도 많지만 다른부분도 많은 것 같다. 특히 자바스크립트에서는 자바에서 컴파일 오류가 나던 것이 안날 때가 있어서,  사용할 때 매우 조심해야할 것 같다.