목차
1 브라우저 윈도우 이해하기
1. 윈도우의 모양새 이해하기 = 17
2. Document area = 17
3. Javascrip Interpreter = 18
2 윈도우와 도큐멘트
1. 윈도우에 있는 것 = 19
2. 윈도우 객체란? = 19
3. 도큐멘트란? = 20
3 자바스크립트의 코딩 위치는?
1. HTML 내에서의 Coding 위치 = 22
2. Body 이전에 선언되어 보여지는 형태 = 23
3. Body 내에 선언되어 보여지는 형태 = 23
4 자바스크립트 출력문
1. Document 출력 구문 = 24
2. 도큐멘트의 배경색 바꾸기 = 32
3. 테이블에 구구단 자동으로 만들기 = 34
5 함수를 만들어 편리한 작업
1. 입력 폼 만들기 = 40
2. Rollover Event 적용하기 = 40
3. Javascript에서 사용자 정의 함수 만들기 = 41
4. 함수 안으로 onMouseOver Event의 내용을 옮긴다 = 42
5. 사용자가 정의한 함수를 사용하기 = 43
6 함수에 매개 변수 사용하기
1. 입력 폼 만들기 = 44
2. 입력 버튼에 onClick Event 만들기 = 44
3. 사용자 정의 함수 만들기 = 45
4. 함수 내의 적용 구문 만들기 = 45
5. 버튼 클릭 이벤트에 사용할 함수 지정하기 = 46
6. 함수에 대해 매개변수 값을 사용하기 = 46
7. 매개 변수를 설정한다 = 47
8. 실제 구문에 매개 변수 사용 = 47
9. 다른 버튼을 만들어 함수 사용하기 = 48
7 이미지 다루기
1. 이미지 보기 = 50
2. 문서에 이미지 올리기 = 50
3. 이미지에 마우스 이벤트 적용 = 51
4. 마우스 이벤트로 폼의 속성 변경하기 = 52
5. 이미지에 이름 부여하여 개체로 변환하기 = 53
6. 이미지 개체의 'SRC' 확인하기 = 54
7. 동적으로 이미지 개체 새로 만들기 = 55
8. 동적으로 생성된 이미지 개체에 경로 지정하기 = 56
9. 동적으로 이미지 개체를 하나 더 생성하기 = 57
10. 마우스 오버 이벤트로 이미지 경로 바꾸기 = 58
11. 마우스 오버 이벤트로 이미지 경로 바꾸기 = 59
8 이미지 바꾸기의 함수
1. 이미지 올리기 = 60
2. HyperLink 적용하기 = 60
3. 함수 만들기 = 61
4. 사용할 이미지의 객체화 선언하기 = 61
5. 수행 구문과 이벤트에서 함수 불러오기 = 62
6. onMouseOut Event 만들기 = 62
7. 생성 과정 보기 = 63
9 이미지 별로 함수 만들기
1. 이미지 올리기 = 64
2. Hyper Link, MouseEvent, Function 만들기 = 64
3. 이미지 개체 만들고 구문 적용하기 = 65
4. 이벤트에 함수 적용하여 결과 보기 = 66
10 애니메이션
1. 포토샵 레이어에서 이미지 만들기 = 68
2. 저장된 애니메이션 파일 보기 = 68
3. 이미지 올리기 = 68
4. 동적 개체 및 함수 만들기 = 69
5. 애니메이션에 사용될 변수 지정 = 69
6. 'onLoad' Event 사용 = 70
7. 폼 태그를 이요하여 결과 확인 = 71
8. 함수에 테스트용 구문 적용 = 72
9. 실행 순서 = 73
10. 'count'변수의 값을 증가하기 = 74
11. setTimeout() 함수 사용하기 = 75
12. 증가값 제어 = 76
13. 이미지 애니메이션 하기 = 77
14. 소스 코드 = 77
11 이미지의 다양한 개체 정의
1. 이미지의 여러 가지 개체 지정 표현 = 79
2. 형식 "B" ： 배열 번호 사용하기 = 79
3. 형식 "C" ： 개체 이름을 문자열로 사용하기 = 85
4. "D" ： 문자와 숫자의 연산 = 88
12 다중 이미지의 이벤트 일괄 처리
1. 이미지의 여러 가지 개체 지정 표현 = 92
2. 폼 만들기 = 92
3. 함수와 이벤트 추가 = 93
4. 마우스 이벤트에 함수 적용 = 93
5. 실행 구문 = 94
6. 값을 입력하기 = 95
7. eval() 내장 함수 적용하기 = 96
8. 결과 보기 = 96
9. eval() 함수를 이용하여 이미지 바꾸기 = 97
10. 형식 "B"를 사용하여 다중 이미지 제어하기 = 100
11. 형식 "C"로 바꾸기 = 104
12. 형식 "D"로 바꾸기 = 105
13. 형식 "D"의 응용(Group별 다중 이미지 제어) = 109
14. 개체의 매개 변수화 = 117
13 배열 기초
1. 배열 개체 만들기 = 120
2. 배열 선언 = 120
3. 배열의 개수 = 121
4. 다차원 배열(Multi Dimension Array) = 122
14 배열을 이용한 이미지 바꾸기
1. 이미지 올리기 = 124
2. 배열을 이용한 동적 이미지 개체, 함수, 마우스 이벤트 만들기 = 124
3. 함수에 실행 구문 적용 = 125
4. 소스 코드 = 125
15 배열을 이용한 다중 이미지 일괄처리
1. 이미지 올리기 = 126
2. 배열 개체 만들기 = 127
3. 각 배열에 동적 이미지 개체 생성 = 127
4. 함수와 마우스 이벤트 만들기 = 127
5. 함수에 매개 변수 만들기 = 128
6. 마우스 이벤트에 사용할 함수 지정(매개 변수 적용) = 129
7. 함수의 적용 구문 만들기 = 129
8. 소스 코드 = 129
16 배열을 이용한 이미지 애니메이션
1. 애니메이션 이미지 보기 = 131
2. 이미지 올리기 = 131
3. 배열 개체 만들기 = 131
4. 각 배열에 동적 이미지 개체 만들기 = 132
5. 변수와 함수 만들기 = 132
6. timer를 'count' 변수값 제어 = 133
7. 이미지 바꾸기 = 133
8. onLoad Event 적용 = 133
9. 소스 코드 = 134
10. 이미지 개체의 배열 지정 바꾸기 = 135
11. 변형된 소스 코드 = 135
12. 지연 시간용 배열 만들기 = 136
13. 함수에 배열 적용 = 137
14. 소스 코드 = 137
17 애니메이션 이미지에 각각 하이퍼링크 제어하기
1. 포토샵에서 이미지 만들기 = 139
2. 각 이미지의 파일 이름 = 139
3. 각 HTML 보기 = 140
4. 애니메이션 페이지에 이미지 올리기 = 141
5. 배열 선언 = 141
6. 각 배열의 값으로 이미지 개체 지정 = 142
7. 'count' 변수 설정 = 142
8. 함수에 애니메이션 적용하기 = 143
9. onLoad Event 적용하기 = 143
10. 이미지에 하이퍼링크 적용하기 = 143
11. 'URL' 사용될 배열 만들기 = 144
12. 하이퍼링크 발생시 URL을 제어할 함수 = 144
13. 하이퍼링크에서 자바스크립트 함수 사용하기 = 145
14. 소스 코드 = 145
15. 애니메이션 과정과 URL 이동 과정 보기 = 146
16. 프레임을 이용한 하이퍼링크 제어 = 148
17. Navigation.htm의 소스 코드 = 148
18. Information.htm의 소스 코드 = 149
19. Main.htm의 소스 코드 = 150
20. Navigation.htm의 소스 코드 = 150
21. Navigation.htm의 소스코드 = 150
18 폼 제어하기
1. 폼 만들기 = 152
2. 함수 생성 = 152
3. 문서 로딩 후 입력 폼에 포커스하기 = 153
4. 전송 버튼 생성 = 153
5. 폼에 전송 방식 및 액션 취하기 = 154
6. 전송 이벤트인 submit event 생성 = 155
7. 전송 이벤트에 return value 만들기 = 156
8. 폼을 이용하여 return value 만들기 = 157
9. 입력 필드의 내용 유무를 체크하기 = 160
10. 매개 변수에 폼 개체 넘기기 = 162
11. 체크 함수에 매개 변수값 설정하기 = 163
12. 조건 성립시 경고 박스 생성하기 = 163
13. 내용이 없을 경우 입력 필드에 포커스 하기 = 164
14. 입력 필드 내용 유무의 체크 함수 만들기 = 165
15. 매개 변수를 이용하여 개체 전달하기 = 166
16. 라디오 버튼의 체크 = 167
17. 라디오 버튼의 체크의 그룹 개체 지정 = 168
18. 라디오 버튼의 체크 유무 확인하기 = 169
19. 라디오 버튼의 체크 함수 만들기 = 170
20. 체크 박스 버튼 만들기 = 172
21. 체크 박스 선택 상태 체크하기 = 173
22. 드림위버에서 작업된 폼 = 174
23. 드림위어에 생성된 입력 폼에 스크립트 추가 = 175
19 메시지 스크롤 하기
1. 폼 만들기 = 179
2. 문자형 변수 = 179
3. 함수, onLoad Event 만들기 = 180
4. 'substring()' 함수 = 181
5. 변수의 값 변형 = 181
6. 변수의 값 변형 = 182
7. 변수의 값을 재설정하기 = 182
8. setTimeout Event 적용 = 183
9. 소스 코드 = 184
10. 문자열에 공백 추가 하기 = 185
11. 브라우저 구분하기 = 186
12. 조건문을 이용하여 브라우저 구분하기 = 186
13. 소스 코드 = 187
14. 적용 순서 변형 = 188
15. 배열 만들기 = 188
16. msg 변수에 배열의 값 설정하기 = 189
17. 변수 값의 증가에 따른 msg 값 바꾸기 = 189
18. 스크롤 내용을 바구는 함수 추가 = 191
19. 스크롤 문자의 바꾸기 = 192
20. 소스 보기 = 193
20 타이핑 효과의 메시지 스크롤
1. 폼 만들기 = 195
2. 문자형 변수 = 195
3. 함수, onLoad Event = 195
4. 함수들 만들기 = 196
5. 배열 만들기 = 197
6. 제어문 만들기 = 197
7. 소스 코드 = 198
8. 스타일을 이용하여 입력 필드에 정렬 방식 지정 = 199
9. 스타일 지정 = 199
10. 소스 코드 = 200
21 레이어 제어하기
1. 이미지 올리기 = 202
2. 레이어 만들기 = 202
3. 하이퍼링크 만들기 = 203
4. 함수 생성후 하이퍼링크에 적용 = 204
5. Netscape에서 레이어 움직이기 = 204
6. Explorer에서 레이어 움직이기 = 205
7. 브라우저 체크하기 = 206
8. 레이어의 유형 구분하기 = 208
9. 레이어 안의 버튼 올리기(레이어 속에 있는 이미지 제어하기) = 209
10. 동적 이미지 개체, 마우스 이벤트 = 209
11. 함수 만들기 = 210
12. 레이어로 브라우저 구분하기 = 211
13. 이미지 바구기 = 211
14. 실행 구분 바꾸기(1) = 213
15. 실행 구분 바꾸기(2) = 214
16. 실행 구분 바꾸기(3) = 214
17. 소스 코드 = 215
18. 이미지 올리기(스크롤 이미지) = 216
19. 이미지를 레이어에 두기 = 216
20. 함수, onLoad Event = 217
21. 레이어 객체의 구분을 이용한 브라우저 체크 = 218
22. 레이어 개체를 변수화 하기 = 218
23. 레이어를 브라우저 상단에 두기 = 219
24. 스크롤시에 따라 다니기 = 220
25. 장소에 따른 스크립트 제어 = 222
26. 풀다운용 레이어 만들기 = 226
27. 레이어 설정하기 = 227
28. 함수, onLoad Event 만들기 = 228
29. 레이어 객체의 구분을 이용한 브라우저 체크 = 229
30. 레이어의 초기 위치 설정 = 229
31. Switch 변수와 제어 함수 만들기 = 230
32. 클릭 이벤트 만들기 = 231
33. Switch 제어하기 = 231
34. 함수 내에서 레이어 객체의 구분을 이용한 브라우저 체크 = 232
35. Switch가 false일 때 클릭하여 true 변환 후 레이어 내려오기 = 233
36. Switch가 true일 때 클릭하여 false 변환 후 레이어 올라가기 = 234
37. 전체 소스 코드 = 235
22 레이어 Visibility를 이요한 이미지 제어
1. 이미지 올리기 = 237
2. 스타일과 레이어 만들기 = 237
3. 하이퍼링크 생성 = 238
4. 동적 이미지 개체 생성 = 238
5. 함수 생성 = 239
6. 마우스 이벤트에 함수 적용 = 240
7. 실행구문 적용 = 240
8. 문서 시작시에 브라우저 구분 = 241
9. 소스보기(1) = 242
10. 소스보기(2) = 243
11. 글자에 하이퍼링크 만들기(글자를 이용한 레이어 비지블 처리) = 244
12. 스타일과 레이어를 이용하여 이미지 올리기 = 244
13. 함수 제어 = 245
14. 브라우저 체크 = 246
15. 레이어의 비지블 속성 제어 = 246
16. 마우스 이벤트와 제어함수 = 247
17. 소스 보기 = 248
18. 변형 소스 = 249
19. 이미지 올리기(다중 레이어 제어하기) = 250
20. 레이어에 넣기 = 251
21. 버튼용 이미지 올리기 = 252
22. 각 버튼용 이미지에 레이어 사용하기 = 252
23. 전체 보기 = 255
24. 버튼 레이어들의 초기 비지블을 'hidden' 처리하기 = 257
25. Image에 Map 처리 = 258
26. 함수와 마우스 이벤트 = 258
27. 매개 변수 만들기 = 259
28. 실행 구문 만들기 = 260
29. 변형 구문 및 전체 소스 보기 = 261
30. onMouseOver 이벤트로 바꾸어 적용하기 = 262
23 멀티미디어 이벤트 만들기
1. 포토샵 화면 보기 = 264
2. 파일들의 경로 및 버튼 보기 = 265
3. 이미지 올리기 = 265
4. 테이블 처리 = 266
5. 하이퍼링크 적용 = 266
6. 동적 이미지 개체와 함수 생성 = 267
7. 하이퍼링크에 함수 적용 및 실행 구문 만들기 = 268
8. 행위 보기 = 269
9. clicknum 변수를 이용한 조건 제어 = 270
10. 클릭시에 발생되는 함수의 내용 바꾸기 = 272
11. 클릭시에 발생되는 함수의 내용 바꾸기 = 274
12. 소스 코드 보기 = 276
24 프레임 간의 이미지 제어하기
1. 포토샵 화면 보기 = 278
2. 파일들의 경로 및 버튼 보기 = 278
3. 각 html 보기 = 279
4. 프레임 구조 = 281
5. 프레임 간의 개체 접근 = 281
6. 'btn.htm' 페이지 내에 있는 이미지 바꾸기 = 282
7. 'img.htm ' 페이지 내에 있는 이미지를 'btn.htm'에서 제어하기(전체 소스 코드) = 283
8. 'img.htm' 페이지 내의 이미지를 레이어에 두기 = 284
9. 'btn.htm'에서 'img.htm' 페이지 내의 레이어에 있는 이미지 제어(전체 소스 코드) = 285
10. 프레임 내의 레이어에 이미지 접근 = 285
25 디지털 시계 만들기
1. 포토샵에서 이미지 만들기 = 287
2. 시간 개체 만들기 = 287
3. 생성된 시간 개체의 내용 보기 = 287
4. 시간의 반복 표시 = 288
5. Date() 함수 내에 포함된 함수들 = 289
6. 년도 입력 = 289
7. '월' 입력 = 291
8. '일' 입력 = 292
9. '시' 입력 = 292
10. '분' 입력 = 293
11. '초' 입력 = 293
12. '요일' 입력 = 294
13. '시' 재설정 = 294
14. 소스 코드 = 295
15. 포토샵에서 디지털 시계에 사용될 이미지 만들기 = 297
16. 'Table' 구성하기 = 297
17. 테이블 데이터로 이미지 사용하기 = 298
18. 이미지에 개체 이름 부여하기 = 299
19. 동적 이미지 개체 생성 = 306
20. 함수와 실행 구문 만들기 = 306
21. onLoad Event 생성 = 307
22. 'substring()' 함수 = 307
23. substring()' 함수를 이용하여 이미지 꾸미기 = 308
24. 소스 코드 = 309
25. 배열, eval(), 이중 'for loop'문을 이용한 코드를 간결하게 하기 = 312
