Java Script

---

JAVA SCRIPT

---

• <script type="text/javascript">

-> 자바 스크립트 타입으로 지정

• "use strict";

- 브라우저에게 자바스크립트를 엄격하게 검사할 것을 요구.

- 최신의 브라우저에 추가된 명령어로, "" 넣은 이유는 이전 브라우저에서

오류가 발생할 수 있기 때문에 미연의 방지차 정의 된 것이다.

• 배경지식

- 변수는 페이지 단위로 관리된다.

- 페이지와 페이지 사이에는 절대 공유할 수 없다.

- 글로벌 변수 => 그 페이지 내에서 어디서든 접근할 수 있는 변수

---

변수와 자료형

---

- 변수 선언: 데이터형을 선언하지 않는다.

var a;                        // 변수에는 어떤 값을 넣을 수 있는가? - 마음대로.

a = 10; // number 데이터형

a = "홍";         // string 데이터형

a = true;         // boolean 데이터형

a = new Object(); // Object 데이터형

a = function() {}; // function 데이터형

- 출력: 브라우저의 콘솔 창으로 출력할 수 있다.

console.log(10); // 개발하는 동안 확인용으로 사용한다.

• 바인딩이란?

- 변수의 데이터형의 결정되는 것.

- 값을 할당한 후 결정 된다.

var b;    // 바인딩 안되어 있는 상태: undefined

// 해당 변수에 값이 할당되지 않은 상태. 즉, 데이터형이 결정되어 있지 않은 상태.

console.log(b);

- 변수의 데이터형 알아내기: 바인딩 된 후 변수의 데이터형 확인 typeof()

b = 10;

console.log(typeof(b));

b = 10.5;

console.log(typeof(b));

- 동적 바인딩(dynamic binding <> static binding)

-> 예시) Java, C, C++, C#

- 변수의 데이터 형은 고정되어 있지 않다. 값을 할당하는 순간 결정되기 때문이다.

- 값을 할당할 때 데이터형이 결정되는 것.

- 가능한 변수의 용도를 결정했으면 그대로 사용.

---

자료형 검사: typeof()

자료형: null, undefined

---

b = "홍길동";

console.log(typeof(b));

b = true;

console.log(typeof(b));

b = null;

console.log(typeof(b));

b = new Object();

console.log(typeof(b));

b = function() {};

console.log(typeof(b));

- 이전 자바스크립트 명세에서는 var을 선언하지 않고 만든 변수는 글로벌 변수로 설정.

- 현재는 반드시 var을 붙여야 한다.

- 브라우저에게 자바스크립트 문법을 엄격하게 검사할 것을 요구. 'use strict";

• 중복 선언?

- 오류가 아니다. 기존 변수 덮어쓴다.

var c = 10;

console.log(typeof(c));

var c = "홍길동";

console.log(c);

window 객체: 브라우저에 미리 정의된 객체

-> 브라우저의 정보를 다루는 객체

• 글로벌 변수나 함수를 포함하고 있다.
• 글로벌 변수는 모두 window 객체의 프로퍼티로 포함된다.
• 글로벌 함수도 또한 모두 window 객체에 포함된다.

console.log(window.c);

var d = 20;

window.e = 30;

console.log(e);                                // e앞에 window 객체 레퍼런스가 생략된 것.

console.log(window.e);

---

기본 라이브러리

prompt(), confirm(), alert()

---

prompt()

- prompt 리턴값은 string이다.

var r = prompt("당신의 나이는?");

console.log(r);

var r2 = confirm("당신은 비트 수강생입니까?", "제목입니까?");

console.log(r);

alert("오호라... 단순 메시지 출력할 때 사용");

---

배열: [ , , , ]

---

var names = ["홍길동", "임꺽정", "유관순", 20, function(){}, true];

for(var i = 0; i < names.lenght; i++){

console.log(names[0]);

}

---

==와 ===의 차이

---

var x1 = 20;

var x2 = "20";

if(x1 == x2){                                // 암시적 형변환이 발생함.

console.log("x1 == x2");

}

암시적 형변환 없이 정확하게 데이터형과 값이 일칳나는지 확인하고 싶다면?

if(x1 === x2){

console.log("x1 === x2");

} else {

console.log("x1! ==  x2");

}

console.log('52 + 273');            // 1번

console.log(52 + 273);              // 2번

console.log(parseInt('52') + 273);            // 3번: parseInt로 썼을 경우 데이터형으로 변환한다.

        

console.log(52 + '273');            // 4번

console.log('52' + '273');            // 5번

조건 연산자

var a = (20 > 30) ? "와우 정말?! ㅎㅎ" : "어후,,,";

console.log(a);

||와 &&의 다른 활용

var x = 20;

var b = true || (x = 30);

console.log(x, b);

var b = false || (x = 30);

console.log(x, b);

var age = prompt("니 나이 몇이냐?", "18");

// (age > 18) || console.log("미성년자입니다.");

(age < 19) && console.log("미성년자입니다.");