1부 HTML 1장 HTML 기초 익히기 1. 홈페이지를 제작하려면? ... 24 2. HTML이란? ... 25 3. HTML 문서 특징 ... 27 4. HTML 문서 작성과 실행 방법 ... 28 4.1 일반 텍스트 편집기를 사용하는 방법 ... 28 4.2 HTML 문서 전용 편집기 사용 방법 ... 29 5. HTML 문서의 기본 구조 ... 30 6. HTML 문서에 제목달기 : 〈TITLE〉…〈／TITLE〉 ... 31 6.1 〈TITLE〉 태그 사용 예 ... 31 6.2 〈TITLE〉 태그를 반드시 사용해야 하는 이유 ... 32 7. 태그(tag) 기본 문법 형식 이해하기 ... 32 7.1 태그의 기본 문법 형식 ... 32 7.2 〈BODY〉태그를 통한 태그의 기본 형식 이해하기 ... 33 2장 본문 내의 문서 모양 다루는 태그 배우기 1. 머릿글이나 제목 강조하기 : 〈Hn〉…〈／Hn〉 ... 40 2. 글자 크기, 색상, 글꼴 지정하기 : 〈FONT〉…〈／FONT〉태그 ... 41 3. 가운데로 정렬하기 : 〈CENTER〉…〈／CENTER〉태그 ... 43 4. 줄바꿈과 문단 구분하기 : 〈BR〉과 〈P〉…〈／P〉태그 ... 44 5. 수평선 그리기 : 〈HR〉…〈／HR〉태그 ... 45 6. 문자 효과 태그들 ... 47 7. 〈PRE〉…〈／PRE〉태그 ... 48 8. 특수 문자 처리하기 ... 50 9. 주석 달기 : 〈!--…--〉 ... 51 10. 리스트(List) 만들기 ... 52 10.1 순서 없는 리스트(Unordered List) 만들기 ... 52 10.2 순서 리스트(Ordered List) ... 53 10.3 중첩 리스트(Nested List) ... 55 3장 HTML 문서에서 이미지 처리하기 1. 이미지 삽입〈IMG〉태그 ... 58 2. 이미지 크기 및 여백 조정 ... 59 3. 이미지 정렬 및 테두리선 조정 ... 61 4. 이미지의 위치에 설명 나타내기 ... 63 5. 〈BODY〉태그를 사용하여 배경 이미지 삽입하기 ... 64 4장 HTML 문서간에 하이퍼링크시키기 1. 하이퍼링크(Hyperlink)란? ... 68 2. 하이퍼링크 부분 만들기 : 〈A〉태그 ... 69 2.1 내 컴퓨터에 있는 HTML 문서와 이미지, 비디오 파일을 하이퍼링크시키는 방법 ... 69 2.2 인터넷상의 다른 컴퓨터에 있는 HTML 문서를 하이퍼링크시키는 방법 ... 71 3. HTML 문서 내의 특정 부분으로 하이퍼링크시키기 ... 76 3.1 HTML 문서 내의 특정 부분으로 하이퍼링크시키는 예 ... 76 3.2 다른 HTML 문서의 특정 부분으로 하이퍼링크시키는 예 ... 78 4. 전자우편 주소를 하이퍼링크시키기 ... 80 5. 작은 이미지에서 큰 이미지로 링크하기 ... 81 5장 HTML 문서에서 테이블 만들기 1. 기본 테이블 만들기 ... 86 1.1 2행 2열짜리 테이블 만들기 ... 86 1.2 border 속성을 사용하여 테두리있는 테이블 만들기 ... 88 2. 테이블 크기 조정과 정렬 ... 89 2.1 테이블 크기 조정하기 ... 91 2.2 테이블 내의 내용 정렬하기 ... 93 3. 줄과 칸의 개수가 다른 다양한 테이블 만들기 ... 95 3.1 colspan 속성을 사용하여 칸을 합친 테이블 만들기 ... 96 3.2 rowspan 속성을 사용하여 줄을 합친 테이블 만들기 ... 97 3.3 colspan과 rowspan 속성을 사용하여 다양한 테이블 만들기 ... 98 4. 테이블에 제목과 여백 넣기 ... 99 4.1 테이블에 제목 넣기 ... 99 4.2 테이블에 제목 칸 넣기 ... 101 4.3 테이블에 여백 넣기 ... 102 5. 테이블에 배경색과 이미지 넣기 ... 104 5.1 테이블에 배경색 넣기 ... 104 5.2 테이블에 배경 이미지 넣기 ... 105 5.3 테이블에 이미지 넣기 ... 106 6장 폼 관련 입력 양식 만들기 1. 〈FORM〉태크 ... 110 1.1 폼에 다양한 입력 양식 만들기 ... 110 1.2 〈FORM〉태그의 문법 형식 ... 112 1.3 〈FORM〉태그 사용 예 ... 112 2. 텍스트 입력 양식 만들기 : 〈INPUT type ＝ 'text'〉 ... 113 2.1 text 입력 양식을 만드는 문법 형식 ... 113 2.2 text 입력 양식의 사용 예 ... 114 3. 버튼 만들기 : 〈INPUT type＝'button'〉 ... 117 3.1 button을 만드는 문법 형식 ... 118 3.2 버튼 사용 예 ... 118 4. reset 버튼 만들기 : 〈INPUT type＝'reset'〉 ... 119 4.1 reset 버튼을 만드는 문법 형식 ... 119 4.2 텍스트 박스 안에 이름을 지우는 리셋 버튼 사용 예 ... 119 5. 암호 입력 양식 만들기 : 〈INPUT type＝'password'〉 ... 120 5.1 password 입력 박스를 만드는 문법 형식 ... 121 5.2 password 사용 예 ... 121 6. 라디오 버튼 만들기 : 〈INPUT type＝'radio'〉 ... 122 6.1 라디오 버튼을 만드는 문법 형식 ... 123 6.2 라디오 버튼 사용예 ... 123 7. 체크박스 만들기 : 〈INPUT type＝'checkbox'〉 ... 125 7.1 체크박스를 만드는 문법 형식 ... 126 7.2 checkbox 사용 예 ... 126 1) 취미 종류를 체크박스로 구성한 예 ... 126 2) 다양한 취미 내용을 입력할 수 있게 텍스트 박스와 체크박스를 활용하는 예 ... 127 8. 리스트 박스 만들기 : 〈select〉…〈／select〉 ... 128 8.1 리스트 박스를 만드는 문법 형식 ... 129 8.2 리스트 박스 사용 예 ... 130 1) 리스트 박스에 색깔들을 항목으로 나열한 예 ... 130 2) 리스트 박스에서 여러 개를 선택할 수 있게 하는 예 ... 131 9. 여러 줄의 텍스트 입력 양식 만들기 : 〈textarea〉…〈／textarea〉 ... 132 9.1 텍스트영역을 만드는 문법 형식 ... 132 9.2 텍스트영역 사용 예 ... 133 7장 하나의 윈도우를 여러 개의 프레임으로 나누기 1. 프레임 작성 방법 ... 138 1.1 〈FRAMESET〉…〈／FRAMESET〉태그 ... 139 1.2 프레임을 나누는 방법 ... 139 1.3 〈FRAME〉…〈／FRAME〉태그 ... 140 2. 프레임 나누기 예 ... 141 2.1 수평으로 프레임 나누기 예 ... 141 2.2 수직으로 프레임 나누기 예 ... 143 3. 다중 프레임 나누기 ... 144 3.1 '┬' 형태로 프레임 나누기 예 ... 144 3.2 '├' 형태로 프레임 나누기 예 ... 146 8장 CSS를 이용한 HTML 문서 꾸미기 1. 스타일시트(CSS)란? ... 150 2. HTML 문서에 CSS를 사용하는 이유 ... 150 3. HTML 문서에 CSS를 적용하는 이유 ... 151 3.1 style 속성을 이용하는 방식 : Inline Style ... 151 3.2 〈HEAD〉부분에서 스타일을 지정하는 방식 : Embedded Style ... 152 3.3 외부 스타일시트 파일을 링크하는 방식 : Linked Style ... 154 4. 글꼴 관련 스타일 시트 속성 사용하기 ... 157 4.1 글꼴(font) 속성 ... 157 4.2 글꼴 관련 스타일 시트 속성 사용 예 ... 157 5. 글자 장식 관련 속성 사용하기 ... 162 5.1 글자 장식 속성 ... 162 5.2 글자 장식 관련 속성 사용 예 ... 162 6. 배경색과 배경 이미지 관련 속성 사용하기 ... 166 6.1 배경색 속성 사용 예 : background-color 속성 ... 166 6.2 배경 이미지 속성 사용 예 ... 167 7. CLASS Selector를 사용하여 스타일 적용하기 ... 172 7.1 서로 다른 html태그에 같은 스타일을 적용하기 ... 172 7.2 동일한 html 태그에 선택적으로 서로 다른 스타일 적용하기 ... 174 2부 JAVAScript 1장 자바스크립트란? 1. 자바스크립트란? ... 180 1.1 자바스크립트의 유래 ... 180 1.2 스크립트 언어의 종류 ... 180 1.3 스크립트(Script) 언어란? ... 181 2. 자바스크립트가 할 수 있는 기능 ... 181 3. 자바스크립트와 자바 ... 182 4. 클라이언트 측 자바스크립트와 서버 측 자바스크립트 ... 183 4.1 클라이언트 측의 웹 브라우저에서만 실행되는 자바스크립트 명령 ... 184 4.2 양측에서 사용되는 핵심(core) 명령 ... 185 4.3 서버측의 웹 브라우저에서만 실행되는 자바스크립트 명령 ... 185 2장 자바스크립트 실행 방법을 통한 맛보기 프로그램 따라하기 1. 〈SCRIPT〉태그를 사용하여 자바스크립트 실행시키는 방법 ... 188 1.1 기본적인 〈SCRIPT〉 태그 사용 방법 ... 188 1.2 〈SCRIPT〉태그에 LANGUAGE 옵션을 사용하는 방법 ... 190 1) LANGUAGE 옵션을 사용하는 이유 ... 190 2) LANGUAGE 옵션을 기술하는 방법 ... 190 2. 자바스크립트의 소스 파일을 삽입하여 실행시키는 방법 ... 194 2.1 자바스크립트 소스 파일을 삽입하는 방법 ... 194 2.2 자바스크립트 소스 파일을 삽입하여 실행시킨 예 ... 195 1) 미리 작성된 test.js 파일의 내용은 다음과 같다. ... 195 2) test.js 파일을 실행시키기 위해서 〈SCRIPT〉태그 내의 SRC(＝source) 옵션에 test.js 파일을 명시하면 된다. ... 195 3. 이벤트 핸들러로 자바스크립트 명령을 실행하는 방법 ... 197 3.1 이벤트(event)란? ... 198 3.2 이벤트 핸들러(event handler) ... 198 3.3 이벤트 핸들러로 자바스크립트의 명령을 실행하는 문법 ... 199 3.4 onClick 이벤트 핸들러로 자바스크립트 명령을 실행시킨 예 ... 200 3.5 onLoad 이벤트 핸들러로 자바스크립트 명령을 실행시킨 예 ... 201 3.6 onUnload 이벤트 핸들러로 자바스크립트 명령을 실행시킨 예 ... 202 4. 하이퍼링크 클릭에 의해 자바스크립트 명령을 실행하는 방법 ... 203 4.1 하이퍼링크를 클릭하여 암호를 확인하는 자바스크립트 함수를 호출하는 예 ... 203 4.2 마우스 이벤트에 따라 자바스크립트 명령으로 하이퍼링크된 이미지를 변경시키는 예 ... 206 5. 계산기 활용 예제 ... 209 3장 자바스크립트의 기본 1. 코딩 규칙과 주석 달기 ... 216 1.1 코딩시 지켜야 할 점 ... 216 1.2 주석(comment)달기 : '／／'나 '／*'와 '*／' ... 217 2. 변수 ... 217 2.1 변수와 상수 ... 217 2.2 변수 이름을 만들 때 주의할 점 ... 218 2.3 변수명에서 대소문자를 구별하지 않아 오류가 발생한 예 ... 219 3. 자바스크립트의 4가지 자료형 ... 220 3.1 수치 자료형 ... 220 1) 정수형 ... 220 2) 실수형 ... 221 3.2 문자열(string) 자료형 ... 223 3.3 불리언(Boolean) 자료형 ... 224 3.4 null ... 225 4. 변수 사용 방법 ... 225 4.1 변수를 선언하지 않고 사용하는 방법 ... 225 4.2 var를 이용하여 변수를 선언하는 방법 ... 226 4.3 자동으로 변수의 자료형 변환 : 묵시적인 형 변환 ... 227 5. 현재 브라우저의 문서 내에 변수와 상수 출력하기 ... 228 5.1 document.wirte() 명령에 의해 출력하기 ... 228 5.2 내장 함수 alert()에 의해 출력하기 ... 231 6. 수치 식과 문자열 식의 표현 방법 ... 232 6.1 수치 식(numeric expression) ... 232 1) 증가 연산자 : ++… ... 232 2) 감소 연산자 : --… ... 233 3) 증감 연산자와 산술 연산자 그리고 우선순위 ... 233 4) 수치 식의 계산 순서 ... 233 5) 할당 연산자(assingnment operator) : ＝… ... 234 6.2 문자열 식(string expression) ... 235 7. 조건 기술 방법 ... 236 7.1 관계식(relational expression) ... 236 1) 수치 대소 비교 관계식 ... 237 2) 문자열 대소 비교 관계식 ... 237 7.2 논리식(logical expression) ... 237 7.3 조건 연산자(? :) ... 239 7.4 비트 논리적(bit logical expression) ... 240 1) x ＝ 2, y ＝ 6 일 때 비트 &(AND) 연산의 예 ... 241 2) x ＝ 2, y ＝ 6 일 때 비트 |(OR) 연산의 예 ... 241 3) x ＝ 2, y ＝ 6 일 때 비트 ^(X-OR : Exclusive-OR) 연산의 예 ... 242 7.5 시프트(shift) 연산자 ... 243 1) 오른쪽 시프트(shift) 연산자 : 》 ... 243 2) 왼쪽 시프트(shift) 연산자 : 《 ... 244 8. 모든 연산자들의 우선순위 ... 244 4장 프로그램 실행 제어 1. 조건문 ... 248 1.1 단순 if문 ... 248 1.2 if-else문 ... 250 1.3 else if 구를 사용한 다중 if문 ... 251 1.4 중첩 if문의 예 ... 253 1.5 switch case문 ... 255 1) 입력 값에 따라 여러 가지 경우로 분기하는 예 ... 256 2) break문의 생략 여부를 판단하게 해 주는 예 ... 257 3) 학점 평가의 예 ... 258 2. 조건 반복문 ... 260 2.1 while문 ... 261 2.2 do∼while문 ... 262 1) 1+2+3+…+9+10을 구하는 do∼while의 예 ... 263 2) 입력받은 값이 잘못되면 반복 또는 종료시키는 예제 ... 263 2.3 for문 ... 265 1) 1+2+3+…+9+10을 구하는 예 ... 266 2) 1+2+3+…+(n-1)+n을 구하는 예 ... 267 3) 구구단 프로그램 ... 268 3. 반복문 내에서 break／continue문 사용 ... 269 3.1 반복문 내에서 break문 사용 ... 269 1) for문, while문, do∼while문에서의 break문을 사용한 예 ... 270 3.2 반복문 내에서 continue문 사용 ... 272 1) for문에 continue문을 사용한 예 ... 272 4. 중첩된 반복문(nested loop) ... 273 4.1 외부 반복문과 내부 반복문간의 관계 ... 274 4.2 중첩 반복문의 예 ... 275 1) 중첩된 반복문을 이용하여 1단에서 9단까지 전체 구구단을 출력하는 프로그램을 작성한 예 ... 275 2) 구구단 프로그램을 반복 제어하는 예 ... 277 5장 함수(function) 사용하기 1. 함수 개념과 장점 ... 280 1.1 함수 개념 ... 280 1.2 함수를 사용할 때의 장점 ... 280 2. 자바스크립트 내장 함수 ... 280 2.1 대화상자 기능을 갖는 내장 함수들 : alert(), confirm(), prompt() ... 281 1) 메시지 출력 대화상자 : alert() 함수 ... 281 2) 입력 대화상자 : prompt()함수 ... 282 3) 질문 메시지에 대한 응답 확인 대화상자 : confirm() 함수 ... 283 4) alert(), confirm(), prompt() 함수의 사용 예 ... 284 2.2 수식 계산에 사용되는 편리한 함수 : eval() ... 286 2.3 문자열을 정수／실수로 변환하는 함수와 문자와 숫자를 구별하는 함수 : parselnt()와 parseFloat() ... 288 1) 문자열을 정수로 변환하는 함수 : parselnt() ... 288 2) 문자열을 실수로 변환하는 함수 : parseFloat() ... 290 2.4 문자인지 숫자인지를 구별하는 함수 : isNaN() ... 291 2.5 일정 시간 경과한 후에 자동으로 명령을 실행시키는 함수 : selTimeout() ... 292 1) 5초가 지난 후에 한미르 검색 사이트로 자동 이동하는 예 ... 292 2) 5초 간격으로 alert() 대화상자가 자동으로 3번 수행되는 예 ... 293 2.6 일정 시간 간격마다 명령이 반복 실행되는 함수 : setInterval() ... 294 1) 브라우저의 상태바에 현재 날짜와 시간이 1초마다 반복 출력되는 시계 만들기 ... 295 2.7 시간 설정을 해제하는 함수 : clearTimeout() ... 297 1) clearTimeout() 함수로 setTimeout() 함수의 명령을 해제시키는 예 ... 297 2) 버튼을 사용하여 clearTimeout()함수로 setInterval() 함수의 명령을 해제시키는 예 ... 298 3. 사용자 함수 정의 방법 : function 문 ... 300 3.1 사용자 함수를 정의하는 방법 ... 300 3.2 함수를 호출하는 방법 ... 302 4. 인수 전달이 필요 없는 함수 사용 예 ... 302 4.1 입력된 수식을 계산하는 함수 사용 예 ... 302 4.2 버튼 클릭 이벤트에 의해 수식 계산 함수를 호출하는 예 ... 304 5. 함수 사용에서 추의할 지역 변수와 전역 변수의 사용 방법 ... 306 5.1 지역 변수 ... 306 5.2 전역 변수 ... 307 5.3 함수에서 지역 변수 사용시 주의할 점 ... 307 6. 함수에 return 명령 사용하기 ... 309 6.1 return 명령을 사용하는 경우 ... 309 6.2 함수의 결과 값을 return 문에 반환하는 예 ... 309 6.3 return 명령으로 함수를 종료시키는 예 ... 311 7. 인수 전달이 필요한 함수 사용 방법 ... 313 7.1 인수를 전달하는 방법 ... 313 7.2 인수 전달 방식 : 값 호출 방식과 참조 호출 방식 ... 314 1) 값 호출(Call by value) 방식 ... 314 2) 참조 호출(Call by reference)방식 ... 314 7.3 입력받은 이름과 전화번호를 인수로 전달한 후 출력하는 예 ... 314 7.4 두 정수를 교환하는 예를 통한 값 호출 방식에 대한 이해 ... 316 8. 함수의 순환적 호출(recursive call) ... 318 8.1 직접 순환 함수의 예 ... 318 1) 단순한 직접 순환 호출 함수의 예 ... 319 2) 암호 확인 함수를 직접 순환 호출하는 예 ... 320 3) 1+2+3+…+n까지의 합을 인수 전달에 의한 순환 호출 함수로 구하는 예 ... 321 8.2 간접 순환 함수 방식으로 nm을 구하는 예 ... 324 6장 객체 개념과 기본적인 객체 사용 방법 1. 객체 개념 이해하기 ... 328 1.1 객체(Object)란? ... 328 1.2 객체의 속성(attribute)과 메소드(method) ... 328 1) 속성과 메소드에 대한 일반적인 예 ... 328 2) Math 객체의 속성과 메소드에 대한 예 ... 329 3) 속성과 메소드의 역할 ... 329 4) 속성과 메소드에 대한 다른 용어들 ... 330 2. 자바스크립트에서 미리 제공하는 객체들 ... 330 2.1 핵심(Core) 내장 객체 ... 331 2.2 클라이언트 측의 웹 브라우저에서 사용하는 자바스크립트 객체들 ... 331 3. 객체지향 언어 표현 방법 ... 333 3.1 기본적인 객체지향 언어 표현 방법 ... 333 3.2 계층적인 관계를 사용하는 객체지향 언어 표현 방법 ... 333 4. 인스턴스 객체와 정적 객체 ... 334 4.1 인스턴스(instance) 객체 ... 335 .4.2 정적(static) 객체 ... 335 5. 정적(static) 객체 사용 방법 ... 336 6. 인스턴스 객체 사용 방법 ... 338 6.1 인스턴스 객체 생성 방법 ... 338 6.2 생성자 함수란? ... 338 6.3 내장 객체를 생성하는 방법 : 인스턴스(instance) ... 339 6.4 Date 객체 사용 예 : 인스턴스(instance) ... 339 1) Date 객체의 용도 ... 339 2) Date 객체를 생성하는 예 ... 339 6.5 Date 객체를 생성한 후 메소드를 사용하는 예 ... 341 6.6 서로 다른 생성자 함수를 사용하는 Data 객체 사용 예 ... 342 1) Date 객체의 생성자 함수 종류들 ... 342 2) 특정한 년／월／일로 설정된 Date 객체를 생성하여 출력한 예 ... 343 7. 사용자가 객체를 정의한 후 사용하는 방법 ... 344 7.1 속성만으로 구성되는 객체를 생성하는 예 ... 344 1) 학생 객체를 생성하기 위한 제약 조건 ... 344 2) 학생 객체의 생성자 함수(Student) 정의하기 ... 345 3) this 표현의 편리함 이해하기 ... 346 7.2 사용자 정의 객체를 사용하는 예 ... 348 7.3 배열 표현으로 객체의 속성을 사용하는 예 ... 350 7.4 for … in 반복문을 사용하여 객체의 속성 알아내기 ... 352 1) for … in 반복문 ... 352 2) for … in 반복문으로 객체의 속성을 알아내는 예 ... 352 3) oneStudent라는 객체의 모든 속성을 출력하는 for … in 반복문에 대한 설명 ... 354 7.5 객체에 메소드를 정의하는 방법 익히기 ... 354 1) 메소드와 함수의 차이점 ... 355 2) 본 절의 예로 사용할 display 메소드란? ... 355 3) Student 객체에서 메소드로 사용할 display 함수를 정의하는 방법 ... 355 4) 생성자 함수 내에 display() 함수를 메소드로 등록시키는 방법 ... 356 5) Student 객체에 등록된 display() 메소드를 사용하는 예 ... 357 6) 인수가 있는 새로운 메소드를 정의하는 예 ... 358 7.6 기존 객체에 prototype을 사용하여 속성이나 메소드를 추가하는 방법 ... 361 1) prototype을 사용하여 새로운 속성이나 메소드를 추가하는 문법 형식 ... 361 2) prototype을 사용하여 새로운 속성을 추가하는 예 ... 362 3) prototype을 사용하여 새로운 메소드를 추가하는 예 ... 364 8. 객체를 다른 객체의 속성으로 정의하는 방법 ... 367 8.1 School 객체에서 정의할 속성들과 메소드 ... 367 8.2 School 객체에 속성들과 메소드를 정의하는 방법 ... 368 8.3 School 객체를 생성한 후 속성과 display() 메소드를 사용하는 방법 ... 369 9. 객체 제거하기 : delete 연산자 ... 373 9.1 delete 연산자를 사용하여 객체를 제거하는 방법 ... 373 9.2 객체를 제거하는 예 ... 374 9.3 객체가 정상적으로 제거되었는지 확인하는 예 ... 374 9.4 객체의 속성과 변수를 제거하는 예 ... 376 7장 핵심 내장 객체 다루기 1. 핵심 내장 객체(predefined core object)의 종류 ... 380 2. 배열 객체 : Array ... 381 2.1 배열의 필요성에 대한 예 ... 381 2.2 Array 객체를 생성하는 방법 ... 382 1) Array 객체의 생성자 함수들 ... 382 2) Array(배열크기) 생성자 함수 사용 방법 ... 382 3) Array() 생성자 함수를 사용하는 방법 : ex7-2.html ... 385 4) Array(요소0, 요소1, …요소n) 생성자 함수를 사용하는 방법 : ex7-3.html ... 387 2.3 Array 객체에 정의된 속성을 사용하는 방법 ... 388 1) length 속성을 사용한 예 : ... 388 2) prototype 속성을 사용한 예 : ex7-3.html ... 389 2.4 Array 객체에 정의된 메소드를 사용하는 방법 ... 390 1) join() 메소드의 사용 예 : ex7-4.html ... 390 2) toString() 메소드의 사용 예 : ex7-4.html ... 391 3) sort() 메소드의 사용 예 ... 392 4) reverse() 메소드의 사용 예 : ex7-8.html ... 396 5) concat() 메소드의 사용 예 : ex7-9.html ... 398 6) slice() 메소드 사용 예 : ex7-10.html ... 399 2.5 배열 내의 자료들을 정렬해 보기 ... 400 1) 선택 정렬(selection sort) 방법 개요 ... 400 2) 선택 정렬(selection sort) 의 예 ... 400 3) 교환 방법 ... 402 4) 선택 정렬(selection sort) 프로그램 ... 402 2.6 2차원 배열(two dimensional array) 다루기 ... 404 1) 2차원 배열을 생성하는 방법 ... 404 2) 2차원 배열에서 자료를 처리하는 방법 ... 405 3) 행(row) 중심으로 2차원 배열의 자료를 처리하는 예 : ex7-12.html ... 405 3. 문자열 처리 객체 : String ... 408 3.1 String 객체 생성 방법 ... 408 3.2 String 객체의 속성 사용법 ... 408 1) length 속성의 사용 예 ... 409 2) prototype 속성의 사용 예 : ex7-13.html ... 409 3.3 문자 모양에 변화를 주는 String 객체의 메소드 사용법 ... 410 1) 문자 모양에 변화를 주는 String 객체의 메소드 사용 예 ... 410 2) 문자 모양에 변화를 주는 메소드를 혼합하여 사용한 예 ... 411 3.4 문자열 처리에 사용되는 String 객체의 메소드 사용법 ... 412 1) charAt(인덱스) 메소드 사용 예 : ex7-15.html ... 412 2) indexOf('문자열') 메소드 사용 예 : ex7-16.html ... 413 3) lastindexOf('문자열') 메소드 사용 예 : ex7-16.html ... 415 4) substring(시작, 마지막) 메소드 사용 예 : ex7-17.html ... 416 5) substr(시작, 길이) 메소드 사용 예 : ex7-18.html ... 417 6) toLowerCase()과 toUpperCase() 메소드 사용 예 : ex7-19.html ... 418 7) concat('문자열') 메소드 사용 예 : ex7-20.html ... 419 8) split([분리문자]) 메소드 사용 예 : ex7-21.html ... 420 3.5 하이퍼링크에 사용되는 String 객체의 메소드 사용법 ... 422 4. 날짜와 시간을 다루는 객체 : Date객체 ... 424 4.1 Date 객체 생성 방법 ... 424 1) new Date() : ex7-23.html ... 424 2) Date(year, month, day) : ex7-23.html ... 425 3) Date(year, month, day, hours, minutes, seconds) : ex7-23.html ... 425 4) Date('month day, year hours : minutes : seconds') : ex7-23.html ... 425 4.2 Date 객체의 메소드 종류와 사용 예 ... 426 1) Date인스턴스에서 년／월／일／시／분／초를 추출하는 메소드를 사용하는 예 : ex7-24.html ... 427 2) 오늘이 무슨 요일이라고 알려주는 예 : ex7-25.html ... 428 3) 현재 시간을 상태바에 나타내는 예 : ex7-26.html ... 429 4.3 Date 객체를 활용하여 만년 달력 만들기 ex7-27.html ... 430 5. 수학 연산에 사용하는 객체 : Math 객체 ... 433 5.1 Math 객체는 정적(static) 객체이다 ... 434 5.2 Math 객체의 속성과 사용 방법 ... 434 5.3 Math 객체의 메소드와 사용 방법 ... 435 1) 각종 삼각 함수의 30도를 구하는 예 : ex7-29.html ... 436 2) 다양한 Math 메소드의 사용 예 : ex7-30.html ... 436 3) 난수를 발생시키는 random() 메소드 사용 예 : ex7-31.html ... 439 6. 함수를 생성하는 객체 : Function 객체 ... 440 6.1 Function 객체에 의해 함수를 정의하는 방법과 사용 예 ... 440 1) Function 객체에 의해 두 수를 더하는 함수를 정의한 예 : ex7-38.html ... 441 2) add 함수를 호출하는 예 : ex7-32.html ... 441 6.2 Function 객체의 arguments 속성 중심의 사용 방법 ... 442 1) 함수에 정의된 인수와 실제 함수에 전달된 인수의 개수를 확인하는 예 : ex7-33.html ... 442 2) 함수에 부정확하게 인수가 전달될 때 오류 메시지를 출력하는 예 : ex7-34.html ... 444 3) arguments 속성을 사용하여 함수에 전달된 인수를 출력하는 예 : ex7-35.html ... 445 4) arguments 속성을 사용하여 여러 개의 문자열을 분리문자로 결합하는 예 : ex7-36.html ... 446 7. 숫자 객체 : Number 객체 ... 448 7.1 문자열로 된 숫자를 계산할 수 있는 실제 숫자로 변환해 주는 예 : ex7-37.html ... 448 7.2 Number 객체의 속성 사용 예 : ex7-38.html ... 449 8장 폼 관련 입력양식 객체들로 이벤트 다루기 1. 입력 양식 객체들과 이벤트 종류 ... 452 1.1 입력 양식 객체들을 생성하는 태그들 ... 453 1.2 폼 관련 입력 양식에서 발생하는 이벤트 종류 ... 453 2. FORM 객체와 이벤트 다루기 ... 455 2.1 FORM 객체 ... 455 2.2 ＜FORM＞ 태그 사용 예 ... 456 2.3 ＜FORM＞ 태그 속성 이해 ... 457 1) ASP란? ... 457 2) 웹 서로로 데이터를 전송하는 방식 : GET과 POST ... 457 2.4 FORM 객체 사용 예 ... 458 1) FORM 객체의 속성과 메소드 사용 방법 ... 458 2) FORM 객체의 속성과 메도스 사용 예 : ex8-1.html ... 458 3) forms 배열과 element 배열 사용 방법 : ex8-2.html ... 459 4) FORM 객체의 이벤트 핸들러 이해 ... 461 3. text 객체와 관련 이벤트 다루기 ... 462 3.1 text 객체 ... 462 3.2 text 객체 사용 예 ... 463 1) onfocus와 onblur 이벤트 핸들러를 사용한 예 ... 463 2) onclick 이벤트 핸들러에서 지정한 사용자 정의 함수를 실행시킨 예 ... 465 3) focus() 메소드를 사용하는 예 ... 466 4) name 속성을 사용하여 'ex8-5.html'을 재작성한 예 ... 467 5) 폼 두 개를 만든 후 텍스트 박스에서 동작하는 onBlur.onChange 이벤트 핸들러를 사용하는 예 ... 467 4. button 객체와 관련 이벤트 다루기 ... 470 4.1 button 객체 ... 470 4.2 버튼 사용 예 ... 471 1) onclick 이벤트 핸들러를 사용한 예 ... 471 2) onclick 이벤트 핸들러가 호출하는 msg() 함수에 this.form표현으로 인수를 전달하는 예 ... 472 5. reset 객체와 관련 이벤트 다루기 ... 474 5.1 reset 객체 ... 474 5.2 reset 버튼 사용 예 ... 475 1) 텍스트 박스 안에 이름을 지우는 리셋 버튼 사용 예 ... 475 2) 누락된 입력 자료를 확인하는 예 ... 476 3) 버튼, 텍스트 박스, 리셋 버튼을 사용한 계산기 활용 예제 ... 478 6. password 객체와 관련 이벤트 다루기 ... 483 6.1 password 객체 ... 483 6.2 password 사용 예 ... 484 7. radio 객체와 관련 이벤트 다루기 ... 486 7.1 radio 객체 ... 486 7.2 radio 버튼 사용 예 ... 487 1) 남성／여성을 구분하는 예 ... 487 2) 라디오 버튼의 onClick 이벤트 핸들러와 value 속성으로 남성／여성을 구분하는 예 : this를 인수로 전달하는 예 ... 489 3) 여러 개의 라디오 버튼 중에서 어떤 라디오 버튼이 체크되었는지를 검사하는 예 ... 491 4) length 속성을 사용하여 모든 라디오 버튼의 value 값 출력하기 ... 492 8. checkbox 객체와 관련 이벤트 다루기 ... 494 8.1 checkbox 객체 ... 494 8.2 checkbox 사용 예 ... 495 1) 체크박스에 선택한 취미들 출력하기 ... 495 2) 다양한 취미 내용을 입력할 수 있게 텍스트박스와 체크박스를 활용하는 예 ... 498 9. select 객체와 Option 객체 그리고 이벤트 다루기 : 리스트 박스 ... 501 9.1 select 객체 ... 501 9.2 리스트 박스 사용 예 ... 502 1) 리스트 박스에서 선택된 색깔로 문서의 배경 색상을 변경하는 예 ... 502 2) 리스트 박스에서 선택된 항목의 위치와 내용을 출력하는 예 ... 505 3) 리스트 박스에서 여러 개를 선택할 수 있게 하는 예 ... 507 4) 리스트 박스에서 선택한 웹사이트로 이동하기 ... 509 9.3 Option 객체를 사용하여 리스트 박스에 항목 추가／삭제／수정하기 ... 511 1) Option 객체를 생성하는 방법 ... 511 2) Option 객체에서 사용할 수 있는 속성들 ... 512 9.4 Option 객체를 사용하여 리스트 박스에 항목 추가하기 ... 513 1) ＜select＞태그와 ＜option＞태그로 미리 만들어 놓은 리스트 박스 ... 513 2) Option 객체를 사용하여 리스트박스에 추가할 새로운 항목 객체를 생성하는 명령 ... 514 3) Option 객체로 생성된 add_option을 실제 리스트 박스에 추가하는 명령 ... 514 9.5 Option 객체를 사용하여 리스트 박스에 구성된 항목 추가／수정／삭제하기 ... 516 1) 추가 과정 ... 517 2) 삭제 과정 ... 517 3) 수정 과정 ... 518 9.6 Option 객체를 사용하여 리스트 박스간에 항목 이동하기 ... 520 10. textarea 객체와 관련 이벤트 다루기 ... 523 10.1 textarea 객체 ... 524 10.2 텍스트 영역 사용 예 ... 525 11. submit 객체와 관련 이벤트 다루기 : 웹 서버로 데이터를 전송하는 submit버튼 ... 528 11.1 submit 객체 ... 528 11.2 submit 버튼 사용 예 ... 529 1) ＜form＞ 태그 설명 ... 529 2) submit 버튼 설명 ... 529 12. 숨겨진 입력 양식 다루기 : Hidden 객체 ... 531 12.1 hidden 객체 ... 531 12.2 숨겨진 입력 양식을 사용하는 예 ... 531 13. FileUpload 객체와 관련 이벤트 다루기 : 파일 올리기 ... 534 13.1 파일 업로드 입력 양식을 만드는 문법 형식 ... 534 13.2 FileUpload 객체 ... 534 13.3 파일 업로드 입력 양식 사용 예 ... 535 1) 파일 업로드 입력 양식 설명 ... 536 2) 파일 업로드 입력 양식과 관련된 ＜FORM＞ 태그 설명 ... 536 3) onsubmit 이벤트 핸들러에 대한 설명 ... 537 9장 웹 브라우저 객체와 이벤트 다루기 1. window 객체 ... 542 1.1 window 객체에서 사용할 수 있는 속성과 메소드 그리고 이벤트 핸들러 ... 543 1.2 window 객체의 이벤트 핸들러 사용 예 ... 545 1) onLoad 이벤트 핸들러를 사용하는 예 ... 545 2) onUnload 이벤트 핸들러를 사용하는 예 ... 546 1.3 window 객체의 속성 사용 예 ... 547 1) 상태 표시줄에 메시지를 출력하는 defaultStatus와 status 속성 사용 예 ... 547 2) 네비게이터 브라우저에서만 적용되는 속성 사용 예 ... 549 1.4 window 객체의 메소드 사용 예 ... 550 1) open() 메소드 사용 방법 ... 550 2) open() 메소드에서 브라우저의 구성 요소 인수를 생략한 경우 ... 551 3) 브라우저 구성 요소를 모두 나타나지 않게 한 예 ... 552 4) 도구바와 메뉴바만 나타나게 한 예 ... 553 5) 브라우저의 너비와 높이를 지정한 후 크기를 조절할 수 있게 만든 예 ... 555 6) close() 메소드 사용 방법 ... 556 7) close() 메소드 사용 예 ... 556 2. Document 객체 ... 558 2.1 document 객체의 기본적인 속성들 ... 558 2.2 기본적인 속성들 사용 예 ... 559 1) HTML 문서의 title, location, bgColor 등의 속성을 출력하는 예 ... 559 2) 리스트 박스에서 선택된 색깔로 문서의 배경 색상과 글자 색상을 변경하는 예 ... 561 2.3 document의 지식 객체들 ... 563 3. document 객체의 자식인 anchors 객체 다루기 ... 564 3.1 anchors 객체와 관련 태그 ... 564 3.2 anchors 객체의 속성 ... 565 3.3 anchors 객체의 사용 예 ... 565 4. document 객체의 자식인 links 객체 다루기 ... 567 4.1 links 객체와 관련 태그 ... 567 4.2 links 객체의 속성 ... 567 4.3 links 객체의 사용 예 ... 568 5. document 객체의 자식인 images 객체 다루기 ... 569 5.1 images 객체와 관련 태그 ... 569 5.2 images 객체에서 사용하는 속성들 ... 569 5.3 images 객체의 속성을 사용하여 이미지 정보를 출력하는 예 ... 572 5.4 이미지 링크와 이벤트에 의해 이미지가 변경되는 예 ... 574 5.5 버튼을 클릭할 때마다 이미지가 반복적으로 변경되는 예 ... 576 6. document 객체의 자식인 쿠키(cookie) 다루기 ... 578 6.1 쿠키(cookie) 개념 ... 578 1) 쿠키(cookie)란? ... 578 2) 쿠키에 저장되는 정보들 ... 578 6.2 cookie 객체를 사용하여 쿠키를 생성하는 방법 ... 578 1) 쿠키를 생성하는 방법 ... 578 2) 단순한 쿠키 생성과 확인하는 예 ... 579 3) 쿠키 파일이 저장되는 폴더 ... 580 6.3 단순한 쿠키 사용 예 ... 581 6.4 방문 여부를 확인하는 쿠키 사용 예 ... 582 1) 쿠키의 존재 유무 확인 방법 ... 583 2) 쿠키 생성 방법 ... 584 7. location 객체 다루기 ... 586 7.1 location 객체의 속성과 메소드 ... 587 7.2 현재 브라우저의 URL 정보를 확인하는 예 ... 588 7.3 location 객체의 href 속성으로 다른 사이트로 이동하기 ... 589 7.4 replace()와 reload() 메소드를 사용하는 예 ... 591 8. history 객체 다루기 ... 592 8.1 history 객체의 속성과 메소드 ... 592 8.2 히스토리 리스트의 길이와 이전／다음 URL 주소로 이동하기 ... 593 8.3 임의의 URL 주소로 이동하기 ... 595 9. frame 객체 다루기 ... 596 9.1 프레임 조작에 사용되는 속성들 ... 597 9.2 예를 통한 프레임 속성들 이해하기 ... 598 1) frames 객체 ... 599 2) parent 속성 ... 600 3) self 속성 ... 601 4) top 속성 ... 602 9.3 프레임 속성 사용 예 ... 602 찾아보기 ... 609