목차 일부
1장 자바스크립트 개요와 관련 기초지식 이해하기
1. 자바스크립트는 동적인 웹 페이지를 만드는 스크립트 언어이다 ... 22
1.1 자바스크립트의 유래 ... 23
1.2 스크립트(Script) 언어란? ... 23
1.3 웹 페이지 작성에 사용되는 스크립트 언어의 종류 ... 24
1.4 스크립트 언어가 필...
더보기
목차 전체
1장 자바스크립트 개요와 관련 기초지식 이해하기
1. 자바스크립트는 동적인 웹 페이지를 만드는 스크립트 언어이다 ... 22
1.1 자바스크립트의 유래 ... 23
1.2 스크립트(Script) 언어란? ... 23
1.3 웹 페이지 작성에 사용되는 스크립트 언어의 종류 ... 24
1.4 스크립트 언어가 필요한 이유 : 자바스크립트가 할 수 있는 기능 ... 25
1.5 자바스크립트와 자바 ... 26
1.6 DHTML 개념 ... 27
2. 기본적인 HTML 태그 사용법 ... 30
2.1 HTML 문서의 기본형식 ... 30
2.2 〈TITLE〉 ... 〈/TITLE〉 ... 31
2.3 〈BODY〉 ...〈/BODY〉 ... 32
2.4 본문 내의 문서의 모양을 다루는 태그들 ... 33
2.5 이미지 나타내기 ... 43
2.6 HTML 문서의 연결 ... 45
2.7 〈FORM〉 관련 태그들 ... 46
2.8 〈FRAMESET〉과 〈FRAME〉 ... 47
3. 자바스크립트를 배우기 전에 웹 관련 기초 지식 이해하기 ... 48
3.1 WWW와 웹 브라우저(Web browser) 란? ... 49
3.2 인터넷의 기본적인 네트워크 프로토콜 : TCP/IP ... 49
3.3 인터넷 주소(IP Address)와 도메인 이름 (Domain name) ... 50
3.4 도메인 네임 시스템(DNS : Domain Name System) 서비스 ... 53
3.5 URL(Uniform Resource Locator) ... 54
3.6 웹 서버와 클라이언트 ... 55
4. 클라이언트 측 자바스크립트와 서버 측 자바스크립트 ... 56
4.1 양측에서 사용되는 핵심(core) 명령 ... 57
4.2 클라이언트 측(client-side)의 웹 브라우저에서만 실행되는 자바스크립트 명령 ... 59
4.3 서버 측(server-side)의 웹 브라우저에서만 실행되는 자바스크립트 명령 ... 60
2장 자바스크립트 실행 방법들을 통한 맛보기 프로그램 따라하기
1. 자바스크립트를 HTML 문서 내에 〈SCRIPT〉 태그를 사용하여 실행시키는 방법 ... 64
1.1 기본적인 <SCRIPT〉 방법 ... "64<b
1.3 함수와 〈SCRIPT〉 태그를 여러 번 사용한 예 ... 69
2. 자바스크립트의 소스(source) 파일을 삽입하여 실행시키는 방법 ... 72
2.1 자바스크립트 소스 파일을 삽입하는 방법 ... 72
2.2 자바스크립트 소스 파일을 삽입하여 실행시킨 예 ... 73
3. 〈SCRIPT〉 태그를 사용하지 않고 자바스크립트 명령을 실행하는 방법 ... 76
3.1 자바스크립트 명령을 URL로 사용하여 이벤트 처리하기 ... 76
3.2 이벤트와 이벤트 핸들러 ... 79
4. 이벤트 핸들러로 자바스크립트의 명령을 실행하는 방법 ... 81
4.1 onLoad 이벤트 핸들러를 사용하는 예 ... 81
4.2 onUnload 이벤트 핸들러를 사용하는 예 ... 82
4.3 상태 표시줄에 다양한 메시지를 출력하는 이벤트 핸들러를 사용하는 예 ... 84
5. 버튼 클릭과 하이퍼 링크 클릭에 의해 자바스크립트 함수를 실행하는 방법 ... 87
5.1 버튼 클릭에 의한 더하기 함수를 호출하는 예제 ... 87
5.2 버튼과 텍스트 박스로 구성된 실제 계산기 활용 예제 ... 91
5.3 하이퍼 링크를 클릭하여 자바스크립트 함수 호출하기 ... 103
3장 자바스크립트의 기본
1. 사용 문자 및 코딩 규칙 ... 110
1.1 사용 문자 ... 110
1.2 코딩 규칙 ... 110
2. 변수와 상수 ... 111
2.1 변수와 상수개념 ... 111
2.2 변수 이름을 만들 때 주의할점 ... 113
3. 자료형과 변수 선언 방법 ... 115
3.1 자료형이란? ... 115
3.2 자바스크립트의 4가지 자료형 ... 115
3.3 변수 사용 방법 ... 120
4. 현재 브라우저의 문서 내에 변수와 상수 출력하기 ... 124
4.1 document.write() 명령에 의해 출력하기 ... 124
4.2 내장 함수 alert() 대화상자에 출력하기 ... 127
5. 수치 식(expression) 과 문자열 식의 표현 방법 ... 128
5.1 수치 식(numeric expression) ... 128
5.2 문자열 식 ... 132
6. 조건 기술 방법 ... 133
6.1 관계식 ... 133
6.2 논리식 ... 134
6.3 조건 연산자 (? :) ... 136
6.4 비트 논리식 ... 138
6.5 시프트 연산자 ... 140
6.6 조건 평가 순서 ... 142
4장 프로그램 실행 제어문
1. 조건에 의한 선택문 ... 144
1.1 단순 if 문 ... 144
1.2 if∼else문 ... 147
1.3 else if구를 사용한 다중 if 문 ... 149
1.4 중첩 if문의 예 ... 151
1.5 switch case 문 ... 153
2. 조건 반복문 ... 160
2.1 while 문 ... 160
2.2 do∼while문 ... 164
2.3 for문 ... 168
3. 반복문 내에서 break/continue문 사용 ... 172
3.1 반복문 내에서 break문 사용 ... 172
3.2 반복문 내에서 continue문 사용 ... 175
4. 중첩된 반복문(nested loop) ... 177
4.1 외부 반복문과 내부 반복문간의 관계 ... 177
4.2 중첩 반복문의 예 ... 179
5장 함수(function) 사용하기
1. 함수 개념과 장점 ... 184
1.1 함수 개념 ... 184
1.2 함수를 사용할 때의 장점 ... 184
2. 내장 함수 ... 185
2.1 대화 상자 기능을 갖는 내장 함수들 : alert(), confirm(), prompt() ... 185
2.2 수식 계산에 사용되는 편리한 함수 : eval() ... 192
2.3 문자열을 정수/실수로 변환하는 함수와 문자와 숫자를 구별하는 함수 : parselnt()/parseFloat()와 isNaN() ... 194
2.4 시간에 따라 명령을 실행시키는 함수들 : setTimeout(), clearTimeout(), setlnterval() ... 198
3. 사용자가 함수를 정의하는 방법 : function문 ... 211
3.1 사용자가 함수를 정의하고 호출하는 방법 ... 211
4. 인수 전달이 필요없는 함수 사용 방법 ... 213
4.1 간단한 예 ... 213
4.2 반복적으로 입력된 수식을 계산하는 예 ... 214
4.3 이벤트 핸들러에서 수식을 계산하는 함수를 호출하는 예 ... 216
5. 함수 사용에서 주의할 지역 변수와 전역 변수의 사용 방법 ... 218
5.1 지역 변수 ... 219
5.2 전역 변수 ... 219
5.3 함수에서 지역 변수 사용시 주의할 점 ... 220
6. 함수에 return 명령 사용하기 ... 223
6.1 return 명령이란? ... 223
6.2 함수의 결과 값을 return 문에 반환하기 ... 223
6.3 return 명령만을 기술하여 함수를 종료시키는 방법 ... 227
7. 인수 전달이 필요한 함수 사용 방법 ... 230
7.1 인수를 주고받는 방법 ... 230
7.2 인수 전달 방식 : 값 호출 방식과 참조 호출 방식 ... 231
7.3 두 정수를 교환하는 예를 통한 값 호출 방식에 대한 이해 ... 234
7.4 인수 전달에 의해 <M:MATH ? xmlns ... '"htt
8. 함수의 순환적 호출(recursive call) 방법 ... 239
8.1 순환 함수의 개념 ... 239
8.2 순환 함수의 종류 : 직접 순환과 간접 순환 ... 240
8.3 순환 함수의 사용 예 ... 245
6장 객체개념 이해와 기본적인 객체 사용방법
1. 객체 개념을 이해하자 ... 254
1.1 자바스크립트는 객체를 사용하는 언어이다 ... 254
1.2 객체(Object) 란? ... 255
1.3 객체 개념을 프로그래밍 언어에서 사용하는 이유 ... 256
1.4 자바스크립트에서 미리 제공하는 객체들 ... 257
2. 객체의 구성 요소와 표현방법 ... 260
2.1 속성(attribute)과 메소드(method) ... 260
2.2 객체지향 언어 표현 방법 ... 262
2.3 Math 객체의 속성과 메소드를 사용하는 간단한 예 ... 264
3. 내장 객체를 사용하는 방법 ... 267
3.1 객체를 생성하는 일반적인 방법 ... 267
3.2 생성자 함수에 new 연산자를 사용하여 내장 객체를 생성하여 사용하는 방법 : 인스턴스(Instance) ... 268
3.3 정적(static) 객체를 사용하는 방법 ... 273
3.4 서로 다른 생성자 함수를 사용하여 다양한 객체 생성 방법 ... 275
4. 사용자가 객체를 정의한 후 사용하는 방법 ... 277
4.1 속성만으로 구성되는 객체를 생성하는 방법 ... 277
4.2 객체의 속성을 사용하는 다양한 방법들 ... 283
4.3 객체에 메소드를 정의하는 방법 익히기 ... 292
4.4 객체에 인수가 있는 새로운 메소드를 정의하는 방법 익히기 ... 296
4.5 기존 객체에 prototype을 사용하여 속성이나 메소드를 추가하는 방법 ... 302
4.6 객체를 다른 객체의 속성으로 정의하는 방법 ... 309
5. 객체 초기 생성자(Object initializer)를 사용하여 객체를 생성하는 방법 ... 316
5.1 객체 초기 생성자(Object initializer)를 사용하여 객체를 생성하는 방법 ... 316
5.2 객체 초기 생성자에 의해 속성으로만 구성되는 객체를 생성하는 방법 ... 317
5.3 객체 초기 생성자에 의해 메소드를 등록하여 객체를 생성하는 방법 ... 320
5.4 객체 초기 생성자에 의해 객체를 다른 객체의 속성으로 정의하여 사용하는 방법
6. 객체 제거하기 : delete 연산자 ... 328
7장 핵심 내장 객체 다루기
1. 핵심 내장 객체(predefined core object)의 종류 ... 338
2. 배열 객체 : Array ... 339
2.1 배열의 필요성 ... 340
2.2 Array 객체를 사용하여 배열 객체를 생성하는 방법 ... 350
2.3 Array 객체에 정의된 속성을 사용하는 방법 ... 355
2.4 Array 객체에 정의된 메소드를 사용하는 방법 ... 357
2.5 넷스케이프 커뮤니케이터 4.0이상에서만 실행되는 Array 객체의 메소드들 ... 370
2.6 배열 내의 자료들을 정렬(sorting) 해보기 ... 377
2.7 학생 점수의 석차 구하기 ... 383
2.8 이차원 배열(two dimensional array) 다루기 ... 387
3. 문자열 처리 객체 : String ... 394
3.1 String 객체 생성 방법 ... 394
3.2 String 객체의 속성 사용법 ... 394
3.3 문자 모양에 변화를 주는 String 객체의 메소드 사용법 ... 396
3.4 문자열 처리에 사용되는 String 객체의 메소드 사용법 ... 398
3.5 하이퍼 텍스트 연결에 사용되는 String 객체의 메소드 사용법 ... 410
4. 날짜와 시간을 다루는 객체 : Date 객체 ... 412
4.1 Date 객체 생성 방법 ... 412
4.2 Date 객체의 메소드 종류와 사용 예 ... 414
4.3 Date 객체를 활용하여 만년 달력 만들기 : ex7-37.html ... 420
5. 수학 연산에 사용하는 객체 : Math 객체 ... 423
5.1 Math 객체를 생성하는 방법 : Math 객체는 정적(static) 객체이다 ... 423
5.2 Math 객체의 속성과 사용 방법 ... 424
5.3 Math 객체의 메소드와 사용 방법 ... 425
6. 함수를 생성하는 객체 : Function 객체 ... 431
6.1 Function 객체에 의해 함수를 정의하는 방법과 사용 예 ... 431
6.2 Function 객체의 arguments 속성 중심의 사용 방법 ... 434
7. 숫자 객체 : Number 객체 ... 440
7.1 문자열로 된 숫자를 계산할 수 있는 실제 숫자로 변환해 주는 예 : ex7-48.html ... 440
7.2 Number 객체의 속성 사용 예 : ex7-49.html ... 441
8. 화면 정보 제공 객체 : screen 객체 ... 442
8장 폼관련 태그와 폼관련 객체 그리고 이벤트 다루기
1. FORM 관련 객체와 이벤트 개요 ... 448
1.1 자바스크립트 객체 계층 구조에서 FORM 관련 객체들 ... 448
1.2 이벤트(event)와 이벤트 핸들러(event handler) ... 450
2. FORM 객체와 이벤트 다루기 ... 452
2.1 〈FORM〉 태그의 문법 형식 ... 453
2.2 〈FORM〉 태그 속성 이해를 위한 기본 개념들 ... 454
2.3 〈FORM〉 태그 사용 예 ... 457
2.4 폼과 폼에 구성되는 입력 양식 만들기 ... 457
2.5 FORM 객체 ... 459
2.6 FORM 객체 사용 방법 ... 459
3. text 객체와 관련 이벤트 다루기 ... 465
3.1 text 입력 박스를 만드는 문법 형식 ... 465
3.2 text 입력 상자의 사용 예 ... 466
3.3 text 객체 ... 471
3.4 text 객체 사용 예 ... 472
4. button 객체와 관련 이벤트 다루기 ... 477
4.1 button을 만드는 문법 형식 ... 477
4.2 button 객체 ... 477
4.3 버튼 사용 예 ... 478
5. reset 객체와 관련 이벤트 다루기 ... 482
5.1 reset 버튼을 만드는 문법 형식 ... 482
5.2 reset 객체 ... 482
5.3 reset 버튼 사용 예 ... 483
6. password 객체와 관련 이벤트 다루기 ... 493
6.1 password 입력 박스를 만드는 문법 형식 ... 493
6.2 password 객체 ... 494
6.3 password 사용 예 ... 495
7. radio 객체와 관련 이벤트 다루기 ... 498
7.1 라디오 버튼을 만드는 문법 형식 ... 498
7.2 radio 객체 ... 499
7.3 radio 버튼 사용 예 ... 500
8. checkbox 객체롸 관련 이벤트 다루기 ... 508
8.1 체크 박스를 만드는 문법 형식 ... 508
8.2 checkbox 객체 ... 509
8.3 checkbox 사용 예 ... 509
9. select 객체와 Option 객체 그리고 이벤트 다루기 : 리스트 박스 ... 516
9.1 리스트 박스를 만드는 문법 형식 ... 516
9.2 select 객체 ... 517
9.3 리스트 박스 사용 예 ... 518
9.4 Option 객체를 사용하여 리스트 박스에 항목 추가/삭제/수정하기 ... 528
9.5 Option 객체를 사용하여 리스트 박스에 항목 추가하기 ... 530
9.6 Option 객체를 사용하여 리스트 박스에 구성된 항목 추가/수정/삭제하기 ... 533
9.7 Option 객체를 사용하여 리스트 박스간에 항목 이동하기 ... 538
10. textarea 객체와 관련 이벤트 다루기 ... 542
10.1 텍스트 영역을 만드는 문법 형식 ... 542
10.2 textarea 객체 ... 543
10.3 텍스트 영역 사용 예 ... 544
11. submit 객체와 관련 이벤트 다루기 : 웹 서버로 데이터를 전송하는 submit 버튼 ... 547
11.1 웹 서버로 데이터를 전송하는 버튼의 입력 양식을 만드는 문법 형식 ... 548
11.2 submit 객체 ... 549
11.3 submit 버튼 사용 예 ... 549
12. 숨겨진 입력 양식 다루기 : Hidden 객체 ... 552
12.1 숨겨진 입력 양식을 만드는 문법 형식 ... 552
12.2 hidden 객체 ... 553
12.3 숨겨진 입력 양식을 사용하는 예 ... 553
13. FileUpload 객체와 관련 이벤트 다루기 : 파일 올리기 ... 556
13.1 파일 업로드 입력 양식을 만드는 문법 형식 ... 556
13.2 FileUpload 객체 ... 557
13.3 파일 업로드 입력 양식 사용 예 ... 557
9장 웹 브라우저 객체와 이벤트 다루기
1. window 객체 ... 564
1.1 window 객체에서 사용할 수 있는 속성과 메소드 그리고 이벤트 핸들러 ... 565
1.2 window 객체의 이벤트 핸들러 사용 예 ... 568
1.3 window 객체의 속성 사용 예 ... 570
1.4 window 객체의 메소드 중심 사용 예 ... 575
2. Document 객체 ... 584
2.1 document 객체의 기본적인 속성들 ... 584
2.2 기본적인 속성들 사용 예 ... 585
2.3 document 객체의 속성(=자식) 객체들 ... 593
3. document 객체의 자식인 anchors 객체 다루기 ... 594
3.1 anchors 객체와 관련 태그 ... 594
3.2 anchors 객체의 속성 ... 594
3.3 anchors 객체의 사용 예 ... 595
4. document 객체의 자식인 links 객체 다루기 ... 596
4.1 links 객체와 관련 태그 ... 596
4.2 links 객체의 속성 ... 597
4.3 links 객체의 사용 예 ... 597
5. document 객체의 자식인 images 객체 다루기 ... 598
5.1 images 객체와 관련 태그 ... 598
5.2 images 객체에서 사용하는 속성들 ... 599
5.3 images 객체의 속성을 사용하여 이미지 정보를 출력하는 예 ... 601
5.4 이미지 링크와 이벤트에 의해 이미지가 변경되는 예 ... 603
5.5 버튼을 클릭할 때마다 이미지가 반복적으로 변경되는 예 ... 606
6. document 객체의 자식인 쿠키(cookie) 다루기 ... 608
6.1 쿠키(cookie) 개념 ... 608
6.2 cookie 객체를 사용하여 쿠키를 생성하는 방법 ... 609
6.3 단순한 쿠키 사용 예 ... 611
6.4 방문 여부를 확인하는 쿠키 사용 예 ... 613
7. location 객체 다루기 ... 619
7.1 location 객체의 속성과 메소드 ... 619
7.2 현재 브라우저의 URL 정보를 확인하는 예 ... 619
7.3 location 객체의 href 속성으로 다른 사이트로 이동하기 ... 621
7.4 replace()와 reload() 메소드를 사용하는 예 ... 623
8. history 객체 다루기 ... 625
8.1 history 객체의 속성과 메소드 ... 625
8.2 히스토리 리스트의 길이와 이전/다음 URL 주소로 이동하기 ... 626
8.3 임의의 URL 주소로 이동하기 ... 627
9. frame 객체 다루기 ... 629
9.1 frame 객체를 생성하는 〈FRAMESET〉과 〈FRAME〉 태그 ... 630
9.2 프레임 나누기 ... 631
9.3 자바스크립트에서 프레임 조작에 사용되는 속성들 ... 634
9.4 자바스크립트로 프레임을 다루는 예 ... 639
더보기 닫기