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

실습 1

HTML page을 다음과 같이 작성해 보자.

* 저장한 파일은 http://validator.w3.org/ 사이트에서 문법에 맞는지 검사해 볼 수 있다.

검사시 위와 같이 여러개의 에러가 발생하는 것을 볼 수 있다. 

이제 설명의 도움을 받아 아래와 같이 다시 작성해 보자.

DOCTYPE을 설정하고 title만 주는 것으로 기본 문법을 만족 시킬 수 있다.

이제 JavaScript의 기본 문법을 적어 보자..

위와 같이 작성해서 실행 시켜 보면 아래와 같이 표시 된다.

예전에는 <script type="text/javascript">와 같이 작성해야 했지만 지금은 <script> 라고만 작성해도 문제 없다.

type 속성은 현재 주요 브라우저의 대부분에서 대응하고 있기 때문에 특별히 지정해 줄 필요 없는것이다.

스크립트는 순차적으로 실행 된다. 위에서 처럼 h1 다음에 안녕하세요가 표시된다.

document는 문서의 전체를 나타내는 객체이다. '안녕하세요'를 '자바스크립트 프로그래밍'위에 표시하고 싶으면 바로 위쪽으로 옮기거나 Head에 표시하면 된다.

변수 만들기

변수는 var로 선언한다. 문자는 '와 " 모두 사용 가능하다. 

크롬 개발자 도구에서 이러한 변수를 테스트 하기 위해 변경 할 수도 있다. var라고 선언하지 않고 암시적으로 선언 할 수도 있지만 어디서 초기화 되고 사용되었는지 알 수 없다. 반드시 명시 하도록 하자. (최초 문법 정의시 간단한 스크립트만 지원하도록 해서 선언하지 않아도 되도록 선언 되어진듯 하다.)

위와 같이 myStatus를 선언 하면 현재의 값을 보여준다. 이를 변경하고 Enter를 치면 값은 변경되어 진다.

JavaScript는 에러가 발생해도 Document를 정상적으로 표시한다. 

아래와 같이 코드를 작성하고 실행을 시켜도 크게 문제가 발생하지는 않는다. 그림에서 myStatus2는 위에서 선언하지 않았지만 사용하고 있다. 

실행을 하면 정상적으로 수행되고 개발자 옵션을 켜고 확인해보면 myStatus2가 정의 되지 않았음을 보여준다.