Web App. 개발을 위한 객체지향 JavaScript [1일차 - 3]

JavaScript를 사용한 HTML

HTML 페이지는 JavaScript가 해석되어 document 객체를 만들고 이를 해석해 보여준다고 할 수 있다.

최종적인 페이지는 HTML 페이지로 document에 작성된 것은 HTML 페이지에 표시한다고 볼 수 있다.

즉, document는 html 페이지 접근을 위한 객체로 볼 수 있다.

2.2 변수

var 는 변수를 선언할 때 사용되어 진다. 다른 컴파일 언어들과 틀리게 var 하나의 명령을 통해 객체를 생성하고 그 안에 문자, 숫자, 참/거진 등을 담게 된다.

예제: 점심 메뉴를 html 페이지로 표시해 보자.

HTML 태그를 표시하기 위해서는 위와 같이 write에 태그를 삽입하도록 한다.

* html 참조 사이트: http://www.w3schools.com/ 를 참조하자

비교 연산자

다른 비교 연산자는 같고, === 는 다르게 표시된다.

아래와 같이 null == undefined 와 같음을 알수 있다. 또 문자 "1"은 숫자 1과 같다. 

하지만, === 비교를 하면 false를 return 한다. "===" 연산자는 값과 타입이 모두 같아야 true을 return 한다.

1 == true 값이 true 일까요? false 일까요? ㅎㅎ

정답: true

1 === true 값이 true 일까요? false 일까요? 

정답: false

해시를 사용 방법

var obj = { x:1, y:2, z:3};   // { 키:값, 키:값, ...}   document.writeln(obj.x);    // 객체명.프로퍼티명 document.writeln(obj['x']);  //객체명['프로퍼티명']

* 주의 할 점은 키값은 문자열 이여야 한다는 것이다. 예를 들어. 123이라는 키값일 경우 obj.123을 하면 에러가 발생한다.

이럴때는 obj['123'] 과 같은 방식을 사용해야 하며 이런 방식으로는 사용하지 말도록 하자.

함수도 하나의 객체로 취급한다 이는 나중에 자세히 알아보기로 한다.

미정의 값(undefined)

미정의 값은 어떤 변수값이 정의되어 있지 않음을 나타내는 값이다.

* 어떤 변수가 선언완료 상태에서 값을 부여하지 않은 경우

* 미정의된 프로퍼티를 참조하려고 하는 경우

JavaScript는 null도 지원하지만 사용할 기회는 많지 않다고 한다. 그리고 undefined는 Global 객체의 properties의 하나로 값을 대입할 수 있다. 절대 사용하지 않도록 주의하자. (ex> undefined = 10 ; 가능하지만 예상하지 않은 결과를 얻을 것이다.)

다음 예제를 해봅시다. (궁금해서 한번 해봤습니다.)

위와 같이 === 연산자의 경우는 undefined 경우에만 true 입니다. 하지만 == 연산자의 경우 null도 true 입니다.

기본형과 참조형에 따른 대입의 차이

기본형은 x의 값을 y에 대입할 경우 값만 대입된다. 하지만 참조형의 경우에는 값이 아닌 주소값이 복사된다.

아래의 예에서 처럼 ary2 에 ary1을 대입했을 경우 ary1의 값을 변경하면 ary2의 값도 변하게 된다. ary2는 ary1을 참조하고 있을 뿐이다.

var x = 1; var y = x; x = 2; document.writeln(y); // 1이 출력된다. (값 전달) var ary1 = [0, 1, 2]; var ary2 = ary1; ary1[0] = 5; document.writeln(ary2);     // 5, 1, 2가 출력된다.(참조 전달)

지정 횟수만큼 루프를 처리하기 for .. in 명령

for ... in 명령은 지정된 배열/연상배열이나 객체 내의 요소/멤버에 대해 선두부터 순서대로 반복한다.

for( 가변수 in 배열/객체) {  루프 내에서 실행하는 명령 }

try .. catch .. finally

예외처리를 위해사용 가능

try {      예외가 발생할지 모르는 명령 } catch(예외 정보를 취할 변수){      예외가 발생 했을 경우 명령 } [finally{      예외의 유무와 관계 없이 최종적으로 실행( 옵션이다) }]

* 예외처리는 오버헤드가 크다: 루프에는 넣지 않도록 주의 한다.

* throw를 사용하여 명시적으로 에러를 처리 할 수도 있다. 

throw new Error(에러 메세지)