1 개요

1.1 자바스크립트의 역사 Javascript란? 웹 브라우저에서 많이 사용하는 프로그래밍 언어 넷스케이프 사의 브랜든 아이히(Brendan Eich)에 의해 모카라는 이름으로 시작 (모카 라이브 스크립트로 이름 변경) 넷스케이프 사가 썬 마이크로시스템과 함께 자바스크립트라는 이름을 붙이고 본격적 발전

1.2 자바스크립트의 활용 웹에서 웹 애플리케이션으로 초기의 웹 자바스크립트의 등장 웹은 애플리케이션의 모습에 점점 가까워짐 변화 없는 정적 글자들의 나열 웹은 하이퍼링크라는 매개체를 사용해 웹 문서가 연결된 거대한 책에 불과 자바스크립트의 등장 웹 문서의 내용을 동적으로 바꾸거나 마우스 클릭 같은 이벤트 처리 웹은 애플리케이션의 모습에 점점 가까워짐 대표적인 예는 아래 그림과 같은 웹 문서 작성 도구 구글 , 마이크로소프트에서는 웹 브라우저만으로 워드, 엑셀, 파워포인트 같은 애플리케이션 사용 가능 웹 애플리케이션은 웹 브라우저만 있으면 언제 어디서나 사용 가능

1.2 자바스크립트의 활용 구글에서 제공하는 크롬 웹 스토어 웹 스토어에서 웹 브라우저상에서 실행되는 웹 애플리케이션 거래

1.2 자바스크립트의 활용 인터넷 연결 없이 웹 브라우저에서 실행 가능한 웹 애플리케이션 스마트 폰이나 스마트패드 내의 애플리케이션을 만들 때에도 자바스크립트 사용

1.2 자바스크립트의 활용 파이어폭스 OS 자바스크립트로 애플리케이션을 만듬 그 밖에 웹 애플리케이션 사용이 가능한 장치  데스크톱, 노트북, 스마트폰 등

1.2 자바스크립트의 활용 3D 테트리스 HTML5의 도입  웹에서 플래시나 실버라이트 없이 게임과 같은 복잡한 프로그램 작성 가능

1.2 자바스크립트의 활용 Air Mech 크롬 애플리케이션 현대의 웹 브라우저는 3D 개발 가능

1.3 자바스크립트의 종류 자바스크립트의 종류 유럽 컴퓨터 제조 협회(European Computer Manufacturer’s Association)는 자바스크립트를 ECMAScript라는 이름으로 표준화 웹 브라우저나 애플리케이션에 내장된 자바스크립트의 종류 ECMAScript와 Jscript는 모두 자바스크립트를 의미

1.4 Visual Studio 2012 Express for Web 설치 자바스크립트는 메모장을 사용해도 개발 가능 처음 자바스크립트를 공부하는 독자라면? Visual Studio 2012 Express for Web 설치 추천 http://www.microsoft.com/visualstudio/kor/downloads에 접속해 Visual Studio 2012 Express for Web 눌러 내려 받기

1.4 Visual Studio 2012 Express for Web 설치 설치 중 “SQL Server Express 설치 계획이 감지되었습니다”라는 화면 이 나오면 윈도 인증 모드 선택 설치 완료 화면

1.5 Visual Studio 2012 Express for Web 인증받기 30일 평가판 사용 가능 제품의 사용기간 연장을 위해 제품 인증 아래 그림이 나오면 온라인 등록 회원 가입/간단한 양식 입력  인증 키 부여 인증키로 제품 등록  시간 제약 없이 사용

VS 2012 Express for Web https://www.microsoft.com/ko- kr/download/details.aspx?id=30669

VS 2012 Express for Web https://www.microsoft.com/ko- kr/download/details.aspx?id=30669

VS 2012 Express for Web

1.6 HTML 파일 만들기 HTML 파일을 만들고 실행하는 방법 [파일]→[새 파일]을 선택해 새 파일 대화상자 열기 HTML5 표준(XHTML5 표준) 형식의 코드

1.6 HTML 파일 만들기 모든 예제는 HTML5 표준 형식 사용 자바 스크립트 코드 위치 기본 페이지의 head 태그 사이에 script 태크 삽입 script 태그 사이에 자바스크립트 코드 입력 HTML5에서는 script 태그에 type 속성을 적지 않는 게 원칙

1.6 HTML 파일 만들기 자바스크립트 작동 HTML 페이지의 각 태그는 웹 브라우저에 의해 순차적으로 실행 웹 브라우저는 head 태그를 먼저 읽은 후 body 태그를 읽음 script 태그를 head 태그에 넣으면 body 태그를 읽기 전 실행 body 태그에 넣으면 head 태그를 실행한 이후에 실행 Script 태그를 head 태그 안에 넣어야 코드를 살펴보기 편리한 이점

1.6 HTML 파일 만들기 1) 예제 작성

1.6 HTML 파일 만들기 2) 실행 [파일]→[브라우저에서 보기] (Ctrl + Shift + W 단축키) -> 실행 [파일]→[브라우저 선택] 통해 기본 실행 브라우저 선택 가능

1.6 HTML 파일 만들기 3) 실행 결과 자동으로 브라우저 실행 문자열 “Hello World..!”가 있는 경고창 pop-up

1.7 오류 확인 방법 콘솔 오류를 확인하는 방법은 크롬에서 F12 키 실행 코드 오류 시 우측 하단에 경고 경고 클릭  오류가 발생한 코드 줄 확인 가능 타 브라우저의 F12 키를 통한 오류 확인 복잡한 과정 자세한 내용은 부록 A확인 크롬으로 검사하는 것을 추천

1.7 오류 확인 방법 경고 화면 인터넷 익스플로러의 경고 화면 이용 인터넷 익스플로러 [설정]  [인터넷 옵션] 실행

1.7 오류 확인 방법 경고 화면 고급 탭에서 ‘스크립트 디버깅 사용 안 함’을 해제 스크립트 디버깅 사용 안 함 선택 후 오류 발생 시 화면 위의 방법의 단점 일반 웹사이트에 접속하기 어려울 수 있음 콘솔로 오류 찾기 추천