자바스크립트(javascript)의 모든 것

**자바스크립트의 배경지식

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

- 페이지 내에 있는 변수는 다른 페이지에서 접근할 수 없다.

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

탭과 탭은 별도의 윈도우라는 것을 알아야 한다.

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

-예전에는 오프너라 해서 다른 창에 있는 변수 접근이 가능했으나

현재는 자바스크립트 보안 관계로 다른 창의 변수를 가져올 수 없도록 하였다

0. 변수와 자료형

- 변수 선언 : 자바스크립트는 데이터형을 선언하지 않는다.

var a; => 이 변수에는 어떠한 값을 넣어도 가능하다.

a=10;         (number 데이터형)

a=홍길동;   (String 데이터형)

a= true;       (boolean 데이터형)

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

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

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

ex> console.log(10);

- 바인딩 : 변수의 데이터형이 결정되는 것

언제 결정이 되는 것인가? => 값을 할당한 후 결정된다.

ex>var b; => 바인딩이 안되어 있는 상태

console.log(b);

1. 자료형 검사 : typeof()

자료형 : null, undefined

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

ex>b=10;

console.log(typeof(b));

b=10.5;

console.log(typeof(b));

-동적 바인딩(dynamic binding <> static binding ex: Java, C, C++, C#)

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

자바스크립트는 값을 할당할 때 데이터 형이 결정되는 것이 특징이다.

가능한 변수의 용도를 결정했으면 그대로 사용하여야 한다.

ex> 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”;

=> 브라우저에게 자바스크립트 문법을 엄격하게 검사할 것을 요구.

스크립트를 진행하기 전에“use strict”;를 선언함으로 해서 브라우저에게 자바스크립트를 엄격하게 검사할 것을 요구한다.

이 문법은 최근 문법이다.

예전 브라우저는 일반 문자열로만 바라보지만

최근 브라우저는 문자열로 선언하더라도 일반 문자열로 보지 않고  엄격한 검사를 요구한다는 것을 인지한다.

c=20;

console.log(typeof(c));

=> 최근 브라우저는 인지를 한다. 유지보수가 어려운 상황이 발생할 수 있으므로

미연에 방지하기 위해서 “use strict” 문법을 먼저 선언해주는 것이다.

선언해주는 동시에 위에 예시는 검사해서 에러를 발생시킨다.

그러므로 이 문법을 사용할 경우에는  반드시 ‘var’ 를 통한 변수선언을 해 주어야 한다.

- 중복 선언은 오류가 아니다. 단, 기존 변수를 덮어쓴다.

var c =”홍길동”;

console.log(c);

- window 객체 : 브라우저에 미리 정의된 객체. 브라우저의 정보를 다루는 객체.

. 글로벌 변수나 함수를 포함하고 있다.

. 글로벌 변수는 모두 window 객체의 프로퍼티로 포함된다.

. 글로벌 함수도 또한 모두 window 객체에 포함된다.

ex> console.log(window.c);

ex> var d = 20;

window.e=30;

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

console.log(window.d);

2. prompt(), confirm()

ex >

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

console.log(r);

var r2= confirm(“당신은 비트 수강생입니까?”);

console.log(r2);

alert(“오호라.... 단순 메시지 출력!”);

3. 배열 [ , , , ] ;

배열은  [ ] 내부에 데이터 형을 따지지 않으므로 어떤 형이든 입력이 가능하다.

ex>

var names = [“홍길동”, “임꺽정”, “유관순”];

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

console.log(names.[i]);

}

4. == 와 ===의 차이

var x1 = 20;

var x2 = “20”;

if(x1 == x2){

console.log(“x1 == x2”);

}

=> 앞의 값과 데이터 형을 맞추기 위해서 암시적 형변환이 발생한다.

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

“ === ” 활용

ex>

if(x1 === x2){

console.log(“x1 === x2”);

}else{

console.log(“x1 !== x2”);

}

* alert 창 사용

ex>

<script>

alert(‘This\’ is “String”);

alert(“This\” is ‘String’);

</script>

=> alert 창 내부에 “ ” , ‘ ’ 둘 다 사용이 가능하다. 단, 창 내부에 두가지를 혼용할 수는 없다.

혼용하기 위해서는 ‘ \ '을 위에 예시 처럼 사용하면 된다.

* 숫자와 문자열을 덧셈할 경우의 예시

<script>

       // 1번

       console.log('52 + 273');

       // 2번

       console.log(52 + 273);

       // 3번

       console.log('52' + 273);

       // 4번

       console.log(52 + '273');

       // 5번

       console.log('52' + '273');

   </script>

=>  결과

52 + 273

325

52273

52273

52273

=> 문자열은 문자열 그대로 출력/ 숫자는 그대로 더한 결과값 출력

문자 + 숫자일 경우와 문자 + 문자일 경우에는 합계가 아닌 이어 붙인 결과가 출력된다.

문자와 숫자를 더해서 합한 결과를 얻고자 할 경우에는 타입 캐스팅 하는 방법을 사용해야 한다.

ex> console.log((number)‘52’ + 273);

 <script>

       alert(Boolean(0));

       alert(Boolean(NaN));

       alert(Boolean(''));

       alert(Boolean(null));

       alert(Boolean(undefined));

   </script>

=> alert 창으로  모두 false 가 출력됨

* 조건연산자

var a = (20 > 30) ? "와~ 정말?" : "그러면 그렇지...";

console.log(a);

조건 연산자를 사용할 경우 출력은 true, false로 판단해서 결과 출력.

-> 예시문 출력결과 : "그러면 그렇지..."

*  ||와 &&의 다른 활용

ex> var x = 20;

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

‘ || ’ 를 사용할 경우 앞에 값이 true 인 경우에는 뒤에 값은 검사하지 않고 앞의 값으로 출력

ex> var age = Number(prompt("너 나이 몇이야?", "18"));

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

' || ' 를 사용할 경우에는

둘 중 하나라도 true이면 true

둘 다 false일 경우는 false

둘 다 true인 경우는 true

'&& '를 사용할 경우에는

둘 중 하나라도 false이면 false

둘 다 true여야만 true이다.

둘 다 false일 경우는 당연히 false이다.

** 조건문

ex>

* if ~ else

 <script>

       // 변수를 선언합니다.

       var date = new Date( );

       var hour = date.getHours( );

       // 조건문

       if (hour < 11) {

           // "hour < 11"가 참일 때 실행합니다.

           alert('아침 먹을 시간입니다.');

       } else if (hour < 15) {

           // "hour < 11"이 거짓이고 "hour < 15"가 참일 때 실행합니다.

           alert('점심 먹을 시간입니다.');

       } else {

           // "hour < 15"가 거짓일 때 실행합니다.

           alert('저녁 먹을 시간입니다.');

       }

   </script>

원래는 else if가 자바에서는 아래와 같이 활용되어야 하는 것이 정확하다.

if (hour < 11) {

           // "hour < 11"가 참일 때 실행합니다.

           alert('아침 먹을 시간입니다.');

       } else {

      if (hour < 15) {

          // "hour < 11"이 거짓이고 "hour < 15"가 참일 때 실행합니다.

           alert('점심 먹을 시간입니다.');

       } else {

           // "hour < 15"가 거짓일 때 실행합니다.

           alert('저녁 먹을 시간입니다.');

       }

}

** 함수(function)

1. 함수 선언

- 리턴 타입이 없다. => 데이터형이 없기 때문에

- 함수 선언시 주의사항 : 파라미터 변수는 var를 붙이지 않는다.

엄격하게 검사하기 위해서 함수 선언 전에  “use strict”  를 붙인다.

- 모든 근로벌 변수, 함수는 window 객체에 포함된다.

ex>

<script>

console.log(plus(10, 11));

=> plus 함수는 다음 script 엘리먼트에서 만들기 때문에 여기서는 호출할 수 없다.

    스크립트는 순서대로 실행이되므로 함수 이전에 console.log를 찍게 되면 찾을 수 없으므로 결과를 출력할 수 없다.

</script>

<script>

“use strict”;

function plus(a, b){

return a+b;

}

console.log(plus(10, 20));

console.log(window.plus(10, 20));

</script>

2. 자바스크립트 실행 순서

- 자바스크립트는 <script></script> 엘리먼트 단위 순서대로 실행된다.

 script element 안에서는 함수 선언을 먼저 실행하고 => 함수 밖의 문장을 순서대로 실행한다.

- 다음 스크립트 엘리먼트에서는 이전 스크립트 엘리먼트에서 만든 변수나 함수는 글로벌 변수, 함수이므로  접근할 수 있다.

ex>

<script>

console.log(plus(20, 30));

</script>

=> 스크립트 엘리먼트가 나뉘더라도 위에 함수가 먼저 선언되었으므로

정상적으로 실행될 수 있다.

3. 함수 선언2

-  함수 객체를 생성하는 방법

(함수 선언이 아니라 함수를 선언하는 방법으로 객체를 생성한 것이다.)

ex> "use strict";

var plus = function(a, b){

return a+ b;

};

console.log(plus(50, 50));