웹 프로그래밍 제3장 JavaScript 생능출판사
3. JavaScript 3.1 JavaScript 기초 3.2 JavaScript 기본 문법 3.3 객체 3.4 이벤트 3.5 레이어 활용
3.1 JavaScript 기초 교재 p.251 JavaScript 개요 JavaScript 기본 구조
3.1.1 JavaScript 개요 교재 p.251 JavaScript 특징 브라우저에 의해 실행되는 클라이언트 사이드 스크립트 언어 명령어를 사용하는(imperative) 절차적(procedural) 언어로 구조적 프로그래밍(structured programming) 가능
3.1.1 JavaScript 개요 교재 p.252 JavaScript 특징(계속) 객체(object)의 정의와 사용을 지원하는 객체 기반(object-based) 언어 실행 시간에 자료형을 검사하는 동적 타이핑(dynamic typing) 언어 동적인 웹 페이지와 향상된 사용자 인터페이스를 쉽게 구현 가능
3.1.2 JavaScript 기본 구조 교재 p.252 기본 구조 교재 p.252 기본 구조 <script> 태그를 써서 HTML 페이지 내에 삽입 형식1 : <script type = "text/javascript"> JavaScript_코드 </script> 형식2 : <script language = "JavaScript"> JavaScript_코드 </script>
3.1.2 JavaScript 기본 구조 교재 p.253 기본 구조 기본 구조 형식3 : <script type = "text/javascript" src = "JavaScript 파일의 url"> JavaScript_코드 </script> 형식4 : <script language = "JavaScript" src = "JavaScript 파일의 url"> JavaScript_코드 </script>
3.1.2 JavaScript 기본 구조 교재 p.253 예제 : first-example.html 3 : <body> 4 : HTML 페이지의 출력 내용입니다. 5 : <br> 6 : <script type="text/javascript"> 7 : document.write("<font color=‘red’> JavaScript의 출력 내용입니다. </font>"); 8 : </script> 9 : <br> 10 : HTML 페이지의 출력 부분으로 돌아왔습니다. 11 : </body>
3.1.2 JavaScript 기본 구조 교재 p.254 실행 결과
3.2 JavaScript 기본 문법 교재 p.255 자료형 및 변수 연산자 문장 함수
3.2.1 자료형 및 변수 교재 p.255 자료형 변수를 선언할 때 자료형(data type)을 지정하지 않으며, 각 변수의 자료형은 값이 배정될 때 결정 [표 3.1] JavaScript의 자료형 자료형 설명 정수(integer) 10진수, 8진수(0), 16진수(0x) 형태의 양수나 음수 실수(float) 부동소수점 표현 방식의 실수 불리언(boolean) 논리값 true와 false를 가짐 문자열(string) 따옴표 (“ ” 또는 ‘ ’) 사이에 들어가는 텍스트
3.2.1 자료형 및 변수 교재 p.255 변수 값(value)을 저장하는 이름이 부여된 기억 장소 키워드(keyword) var을 사용하여 선언
3.2.1 자료형 및 변수 교재 p.256 변수(계속) 변수 선언 선언 예 형 식 : var 변수_선언_리스트; 변수(계속) 변수 선언 선언 예 형 식 : var 변수_선언_리스트; 변수_선언 : 변수_이름[= 값] 선언 예 : var a; var b, c; var d = 1;
3.2.1 자료형 및 변수 교재 p.257 예제 : variable.html 4 : <script type="text/javascript"> 5 : var a, b; 6 : var c = 10; 7 : a = 5; 8 : b = c; 10 : document.write("변수 a의 값은 : " + a + "이다." + "<br>"); 11 : document.write("변수 b의 값은 : " + b + "이다." + "<br>"); 12 : document.write("변수 c의 값은 : " + c + "이다." + "<br>"); 13 : </script>
3.2.1 자료형 및 변수 교재 p.257 실행 결과
3.2.1 자료형 및 변수 교재 p.258 변수의 사용 범위 지역 변수(local variable) 3.2.1 자료형 및 변수 교재 p.258 변수의 사용 범위 지역 변수(local variable) 전역 변수(global variable) [표 3.3] 지역변수와 전역변수 구분 설명 지역 변수 함수 내부에서 var로 선언한 변수, 변수를 선언한 함수 내부에서만 사용 가능 전역 변수 함수 내부에서 선언되지 않은 변수, 또는 함수 내부에서 var로 선언하지 않은 변수, 페이지의 어디에서나 사용 가능
3.2.1 자료형 및 변수 교재 p.258 예제 : variable-scope.html 4 : <script type="text/javascript"> 5 : 6 : var a = 2; 7 : b = 7; 8 : 9 : function add() { 10 : var a = 4; 11 : c = 6; 12 : 13 : document.write("a+b+c의 값은 : " + (a + b + c) + " 이다." + "<br>"); 14 : } 15 : 16 : add(); 17 : document.write("a+b+c의 값은 : " + (a + b + c) + " 이다." + "<br>"); 18 : 19 : </script>
3.2.1 자료형 및 변수 교재 p.259 실행 결과
3.2.2 연산자 교재 p.260 산술 연산자 산술 연산 사용 예 : a + b a – b a * b a / b a ％ b
3.2.2 연산자 교재 p.260 증감 연산자 ++, -- 기호를 변수 앞이나 뒤에 붙임 변수 값을 1씩 증가 또는 감소 사용 예 : ++a a++ --a a--
3.2.2 연산자 교재 p.261 관계 연산자 값의 대소 관계를 판단 참(true) 또는 거짓(false)을 구함 사용 예 : a > b a >= b a < b a <= b a == b a === b a !== b a != b
3.2.2 연산자 교재 p.262 논리 연산자 참(true) 또는 거짓(false)을 구함 사용 예 : a && b a > b && c == d a > 7 || b <= 100
3.2.2 연산자 교재 p.262 문자열 연산자 두 개의 문자열들을 연결하여 하나의 문자열 생성 연산자로 ‘+’ 기호 사용 교재 p.262 문자열 연산자 두 개의 문자열들을 연결하여 하나의 문자열 생성 연산자로 ‘+’ 기호 사용 사용 예 : a + b
3.2.2 연산자 교재 p.263 배정 연산자 변수에 값 저장 할당 연산자 또는 대입 연산자 사용 예 : a = 1 a = b
3.2.2 연산자 교재 p.263 조건 연산자 논리식의 결과에 따라 참이면 식1을, 거짓이면 식2를 변수에 배정 교재 p.263 조건 연산자 논리식의 결과에 따라 참이면 식1을, 거짓이면 식2를 변수에 배정 형 식 : 변수 = 논리식 ? 식1 : 식2 ; 사용 예 : x = a > b ? b : c ;
3.2.2 연산자 교재 p.265 예제 : operator.html 4 : <script type="text/javascript"> 5 : var a, b, x, y; 6 : a = 7; 7 : b = 3; 8 : c = true; 9 : d = false; 10 : e = "hybrid"; 11 : f = "car"; 13 : document.write("<b> 산술 연산 </b> <br><br>"); 14 : document.write(a + " + " + b + " = " + (a + b) + "<br>"); 15 : document.write(a + " * " + b + " = " + (a * b) + "<br>"); 16 : document.write(a + " / " + b + " = " + (a / b) + "<br>"); 17 : document.write(a + " % " + b + " = " + (a % b) + "<br>");
3.2.2 연산자 교재 p.265 예제 : operator.html(계속) 19 : document.write("<br> <b> 관계 연산 </b> <br><br>"); 20 : document.write(a + " > " + b + " => " + (a > b) + "<br>"); 21 : document.write(a + " < " + b + " => " + (a < b) + "<br>"); 22 : document.write(a + " == " + b + " => " + (a == b) + "<br>"); 23 : 24 : document.write("<br> <b> 논리 연산 </b> <br><br>"); 25 : document.write(c + " && " + d + " => " + (c && d) + "<br>"); 26 : document.write(c + " || " + d + " => " + (c || d) + "<br>"); 27 : document.write(" !" + c + " => " + (!c) + "<br>"); 28 : 29 : document.write("<br> <b> 문자열 연산 </b> <br><br>"); 30 : document.write(e + "+" + f + " => " + (e + f) + "<br>"); 31 : </script>
3.2.2 연산자 교재 p.266 실행 결과
3.2.3 문장 교재 p.266 조건문 반복문
3.2.3.1 조건문 교재 p.267 if 문 형식 : (a) if 문 if(조건식1) { 문장_리스트1 } 형식 : (a) if 문 if(조건식1) { 문장_리스트1 } (b) if-else 문 else 문장_리스트2 (c) if-else if-else 문 else if(조건식2) 문장_리스트3
3.2.3.1 조건문 교재 p.268 if 문 순서도 (a) if 문 (b) if-else 문 (c) if-else if-else 문
3.2.3.1 조건문 교재 p.268 예제 : if.html 4 : <script type="text/javascript"> 5 : var a, b, c; 6 : a = 10; 7 : b = 20; 9 : document.write("<b>두 수: " + a + ", " + b + "</b> <br><br>"); 10 : document.write("<b>큰 수에서 작은 수 빼기</b> <br><br>"); 11 : 12 : if(a >= b) 13 : { 14 : c = a-b; 15 : document.write(a + " - " + b + " = " + c + "<br>"); 16 : } 17 : else 18 : { 19 : c = b-a; 20 : document.write(b+ " - " + a + " = " + c + "<br>"); 21 : } 22 : </script>
3.2.3.1 조건문 교재 p.269 실행 결과
3.2.3.1 조건문 교재 p.270 switch 문 형 식 : switch (식) { case 값1 : 문장_리스트1 break; case 값2 : 문장_리스트2 ‧‧‧ case 값n : 문장_리스트n [ default : 문장_리스트n+1 ] }
3.2.3.1 조건문 교재 p.270 switch 문 순서도
3.2.3.1 조건문 교재 p.271 예제 : switch.html 4 : <script type="text/javascript"> 5 : 6 : var rainbow = 3; 8 : switch(rainbow){ 9 : case 1 : 10 : document.write("무지개 색깔 중, Red 입니다."); break; 11 : case 2 : 12 : document.write("무지개 색깔 중, Orange 입니다."); break; 13 : case 3 : 14 : document.write("무지개 색깔 중, Yellow 입니다."); break; 15 : case 4 : 16 : document.write("무지개 색깔 중, Green 입니다."); break; 17 : case 5 : 18 : document.write("무지개 색깔 중, Blue 입니다."); break; 19 : case 6 : 20 : document.write("무지개 색깔 중, Dark Blue 입니다."); break; 21 : default : 22 : document.write("무지개 색깔 중, Violet 입니다."); 23 : } 24 : </script>
3.2.3.1 조건문 교재 p.272 실행 결과
3.2.3.2 반복문 교재 p.272 for 문 형 식 : for(초기화식; 조건식; 증감식) { 문장_리스트 }
3.2.3.2 반복문 교재 p.273 for 문 순서도
3.2.3.2 반복문 교재 p.274 예제 : for.html 4 : <script type="text/javascript"> 5 : var i, dan; 6 : dan = 5; 7 : 8 : document.write("<b> 구구단 </b> <br>"); 9 : document.write("<b> [" + dan + "단] </b> <br><br>"); 10 : 11 : for(i = 1; i <= 9; i++) 12 : document.write(dan + " * " + i + " = " + dan * i + "<br>"); 13 : 14 : document.write("<br><br>"); 15 : </script>
3.2.3.2 반복문 교재 p.274 실행 결과
3.2.3.2 반복문 교재 p.275 for-in 문 형 식 : for ( [var] 변수 in { 객체 | 배열 }) { for-in 문 형 식 : for ( [var] 변수 in { 객체 | 배열 }) { 문장_리스트 }
3.2.3.2 반복문 교재 p.275 예제 : for-in.html 4 : <script type="text/javascript"> 5 : 6 : var a = new Array("사과", "바나나", "파인애플"); 7 : var b = " "; 8 : 9 : for (var key in a) { 10 : b += "인덱스 " + key + " 의 값은 : " + a[key]; 11 : b += "<br>"; 12 : } 13 : 14 : document.write(b); 15 : </script>
3.2.3.2 반복문 교재 p.276 실행 결과
3.2.3.2 반복문 교재 p.276 while 문 형 식 : while (조건식) { 문장_리스트 증감식; }
3.2.3.2 반복문 교재 p.277 while 문 순서도
3.2.3.2 반복문 교재 p.278 예제 : while.html 4 : <script type="text/javascript"> 5 : var i; 6 : i = 1; 7 : 8 : while(i <= 7) 9 : { 10 : document.write("<font size=" + i + "> 안녕하세요! </font><br>"); 11 : i++; 12 : } 13 : </script>
3.2.3.2 반복문 교재 p.278 실행 결과
3.2.3.2 반복문 교재 p.279 do while 문 형 식 : do { 문장_리스트 증감식; } while (조건식);
3.2.3.2 반복문 교재 p.279 do while 문 순서도
3.2.3.2 반복문 교재 p.280 예제 : do-while.html 예제 : do-while.html 4 : <script type="text/javascript"> 5 : 6 : var i = 1; 7 : document.write("1~20까지의 짝수만 출력한 결과는?" + "<br>"+ "<br>"); 8 : 9 : do{ 10 : if(i % 2 == 0) 11 : document.write(i + "<br>"); 12 : 13 : i = i + 1; 14 : 15 : } while (i <= 20); 16 : 17 : document.write("<hr>"); 19 : </script>
3.2.3.2 반복문 교재 p.281 실행 결과
3.2.4 함수 교재 p.281 내장 함수 사용자 정의 함수 재귀함수
3.2.4.1 내장 함수 교재 p.281 경고 대화상자 : alert() 확인 대화상자 : confirm() 프롬프트 대화상자 : prompt() 수식 계산 : eval(), parseInt(), parseFloat()
3.2.4.1 내장 함수 교재 p.282 경고 대화상자 : alert() 예제 : alert.html 형 식 : 4 : <script type="text/javascript"> 5 : alert("반갑습니다.\n 저의 홈페이지 방문을 환영합니다!"); 6 : </script>
3.2.4.1 내장 함수 교재 p.283 실행 결과
3.2.4.1 내장 함수 교재 p.283 확인 대화상자 : confirm() 예제 : confirm.html 형 식 : 4 : <script type="text/javascript"> 5 : var result = confirm("어떤 값이 출력될까요???"); 6 : document.write("당신이 선택한 버튼의 값은 "); 7 : document.write("<b>" + result + "</b> 입니다."); 8 : </script>
3.2.4.1 내장 함수 교재 p.284 실행 결과
3.2.4.1 내장 함수 교재 p.285 프롬프트 대화상자 : prompt() 변수1 또는 “문자열1”은 프롬프트 대화상자에 표현될 메시지 설정 변수2 또는 “문자열2”는 입력 필드 부분에 초기 값으로 보여주는 값 설정 형 식 : prompt(변수1 또는 "문자열1", 변수2 또는 "문자열2")
3.2.4.1 내장 함수 교재 p.285 예제 : prompt.html 4 : <script type="text/javascript"> 5 : var input = prompt("당신은 누구십니까?", "이름을 입력해 주세요"); 6 : document.write("<br>"); 7 : document.write("<b>" + input + "</b>"); 8 : document.write("님의 방문을 진심으로 환영합니다."); 9 : </script>
3.2.4.1 내장 함수 교재 p.286 실행 결과
3.2.4.1 내장 함수 교재 p.287 수식 계산 : eval(), parseInt(), parseFloat() 형 식 :
3.2.4.1 내장 함수 교재 p.287 예제 : eval.html 5 : <script type="text/javascript"> 6 : var input = prompt("수식을 입력하세요!"); 7 : document.write("수식 : " + input + " =<font color=‘red’>" + eval(input) + "</font><br>"); 8 : 9 : var a = prompt("첫 번째 수를 입력하세요!"); 10 : var b = prompt("두 번째 수를 입력하세요!"); 11 : var c = a + b; 12 : var d = parseInt(a) + parseInt(b); 13 : 14 : document.write("수식 : " + a + "+" + b + " =<font color=‘red’>" + c + "</font><br>"); 15 : document.write("수식 : " + a + "+" + b + " =<font color=‘red’>" + d + "</font>"); 16 : </script>
3.2.4.1 내장 함수 교재 p.288 실행 결과
3.2.4.2 사용자 정의 함수 교재 p.289 사용자 정의 함수 형 식 : function 함수명( [매개변수_리스트] ) { 문장_리스트 [ return 식 또는 변수 또는 값 ] }
3.2.4.2 사용자 정의 함수 교재 p.290 예제 : function-return.html (결과값을 반환하는 경우) 함수 선언부 4 : <script type="text/javascript"> 5 : function sum(x, y) 6 : { 7 : var z = x + y; 8 : return(z); 9 : } 10 : </script>
3.2.4.2 사용자 정의 함수 교재 p.290 예제 : function-return.html (결과값을 반환하는 경우) 함수 호출부 14 : <script type="text/javascript"> 15 : var a = 10; 16 : var b = 20; 17 : var result = sum(a, b); 18 : document.writeln(a + " + " + b + " = " + result); 19 : </script>
3.2.4.2 사용자 정의 함수 교재 p.290 실행 결과
3.2.4.2 사용자 정의 함수 교재 p.291 예제 : function-alert.html (결과값을 반환하지 않는 경우) 함수 선언부 4 : <script type="text/javascript"> 5 : function who(name) { 6 : alert("안녕하세요. 저는 " + name + "입니다."); 7 : } 8 : </script>
3.2.4.2 사용자 정의 함수 교재 p.291 예제 : function-alert.html (결과값을 반환하지 않는 경우) 함수 호출부 12 : <script type="text/javascript"> 13 : var input = prompt("이름을 입력하세요!"); 14 : who(input); 15 : </script>
3.2.4.2 사용자 정의 함수 교재 p.291 실행 결과
3.2.4.3 재귀 함수 교재 p.292 재귀 함수 재귀 호출(recursive call) 문장을 포함하고 있는 함수
3.2.4.3 재귀 함수 교재 p.293 예제 : function-recursion.html 함수 선언부 3 : <script type="text/javascript"> 4 : function sum(n) { 5 : if(n <= 1) 6 : return 1; 7 : return n + sum(n - 1); 8 : } 9 : </script>
3.2.4.3 재귀 함수 교재 p.293 예제 : function-recursion.html(계속) 함수 호출부 13 : <script type="text/javascript"> 14 : var number = parseInt(prompt("1부터 몇 까지의 합을 구할까요?")); 15 : document.write("1부터 " + number + "까지의 합은 : " + sum(number) + "입니다."); 16 : </script>
3.2.4.3 재귀 함수 교재 p.293 실행 결과
3.3 객체 교재 p.294 내장 객체 브라우저 객체 HTML DOM 객체 사용자 정의 객체
3.3.1 내장 객체 교재 p.294 Array 객체 Boolean 객체 Date 객체 Math 객체 Number 객체 String 객체
3.3.1 내장 객체 교재 p.295 Array 객체 배열 생성 [표 3.7] Array 객체의 주요 속성과 메소드 구분 이름 설명 속성 length 배열의 길이 메소드 join(분리자) 배열의 원소들 사이에 분리자 삽입하여 하나의 문자열로 합침(분리자 지정 가능하며 기본은 쉼표(,)) concat(배열1, 배열2, ... 배열n) 다수의 배열들을 순서대로 합하여 하나의 배열 생성
3.3.1 내장 객체 교재 p.296 예제 : array.html 4 : <script type="text/javascript"> 5 : var title = new Array(3); 6 : title[0] = "W"; 7 : title[1] = "e"; 8 : title[2] = "b"; 9 : 10 : var title2 = title.join("."); 11 : var title3 = new Array(" Programming"); 12 : var title4 = title2.concat(title3); 13 : 14 : document.write("첫 번째 책 제목은 "); 15 : 16 : for(i = 0; i < title.length ; i++) { 17 : document.write(title[i]); 18 : } 19 : 20 : document.write("입니다." + "<br>" + "두 번째 책 제목은 "); 21 : document.write(title4 + "입니다."); 22 : </script>
3.3.1 내장 객체 교재 p.297 실행 결과
3.3.1 내장 객체 교재 p.297 Boolean 객체 논리값을 저장하고 문자열로 변환 구분 이름 설명 메소드 valueOf() 객체의 원시값을 반환 toString() 불리언 값을 문자열로 변환하고 그 결과값을 반환
3.3.1 내장 객체 교재 p.297 예제 : boolean.html 4 : <script type="text/javascript"> 5 : var bool1 = new Boolean(true); 6 : document.write("(1) true 값 입력 시, " + bool1.toString() + " 출력"+ "<br>"); 7 : 8 : var bool2 = new Boolean(false); 9 : document.write("(2) false 값 입력 시, " + bool2.toString() + " 출력" + "<br>"); 10 : 11 : var bool3 = new Boolean(1); 12 : document.write("(3) 값 1을 입력 시, " + bool3.toString() + " 출력" + "<br>"); 13 : 14 : var bool4 = new Boolean(0); 15 : document.write("(4) 값 0을 입력 시, " + bool4.toString() + " 출력" + "<br>"); 16 : </script>
3.3.1 내장 객체 교재 p.298 실행 결과
3.3.1 내장 객체 교재 p.298 Date 객체 현재 날짜와 시각 [표 3.9] Date 객체의 주요 메소드 메소드 설명 getYear() 연도 getMonth() 월 (0=1월, 1=2월, … , 11=12월) getDate() 일 (1~31까지의 날짜) getHours() 시 (0~23까지의 시) getMinutes() 분 (0~59까지의 분) getSeconds() 초 (0~59까지의 초)
3.3.1 내장 객체 교재 p.299 예제 : date.html 4: <script type="text/javascript"> 5: var day = new Date(); 6: document.write("오늘은 <b>" + day.getYear() + "</b>년<b>" + (day.getMonth() + 1) + "</b>월<b>" + day.getDate() + "</b>일 입니다.<br>"); 7: document.write("현재 시각은<b>" + day.getHours() + "</b>시<b>" + day.getMinutes() + "</b>분<b> " + day.getSeconds() + "</b>초 입니다.<br>"); 8: </script>
3.3.1 내장 객체 교재 p.300 실행 결과
3.3.1 내장 객체 교재 p.301 Math 객체 수학 계산 [표 3.10] Math 객체의 주요 속성과 메소드 구분 이름 설명 속성 PI π (약 3.14159) SQRT 2 (약 1.41421) 메소드 max(n1, n2, ‧‧‧ , nk) 가장 큰 값 min(n1, n2, ‧‧‧ , nk) 가장 작은 값 abs(n) n의 절대값 random() 0에서 1사이의 난수(random number) pow(a, b) ab exp(n) en sqrt(n) n의 제곱근 log(n) n의 자연 로그값
3.3.1 내장 객체 교재 p.302 예제 : math.html 원의 넓이와 둘레를 정의한 함수 4 : <script type="text/javascript"> 5 : function calculate(r) { 6 : oval.result1.value= r * r * Math.PI; 7 : oval.result2.value= 2 * r * Math.PI; 8 : } 9 : </script>
3.3.1 내장 객체 교재 p.302 예제 : math.html(계속) 원의 넓이와 둘레의 결과값 출력 12 : <form name="oval"> 13 : 반지름 <input type="text" name="radius" size="10"> 14 : <input type="button" value="확인" onClick="calculate(radius.value)"><br> 15 : 원의 넓이 <input type="text" name="result1" size="10"><br> 16 : 원의 둘레 <input type="text" name="result2" size="10"> 17 : </form>
3.3.1 내장 객체 교재 p.302 실행 결과
[표 3.11] Number 객체의 주요 속성과 메소드 3.3.1 내장 객체 교재 p.303 Number 객체 문자열로 표현된 수를 실제 수로 변환시켜 주는 객체 [표 3.11] Number 객체의 주요 속성과 메소드 구분 이름 설명 속성 MAX_value 표현할 수 있는 최대값 MIN_value 표현할 수 있는 최소값 메소드 valueOf() 객체의 원시값을 반환 toString([진법]) 진법의 문자열로 변환, 진법은 2~36 사이의 값이며 생략하면 10
3.3.1 내장 객체 교재 p.303 예제 : number.html 4 : <script type="text/javascript"> 5 : var a = "10", b = "20"; 6 : var c = "JavaScript"; 7 : 8 : document.write("a + b = " + (a + b) + "<br>"); 9 : document.write("Number(a) + Number(b) = " + (Number(a) + Number(b)) + "<br>"); 10 : document.write("Number(c) = " + Number(c) + "<br>"); 11 : </script>
3.3.1 내장 객체 교재 p.304 실행 결과
[표 3.12] String 객체의 주요 속성과 메소드 3.3.1 내장 객체 교재 p.304 String 객체 문자열 처리 [표 3.12] String 객체의 주요 속성과 메소드 구분 이름 설명 속성 length 문자열 길이 메소드 concat(“문자열1”, “문자열2“, ,,, “문자열n“) 두 개 이상의 문자열을 연결 (매개변수는 문자열 또는 문자열 변수) search(“스트링”) 스트링을 검색하여 인덱스 반환, 없으면 -1 반환 match(정규식) 정규식(regular expression)과 일치하는 문자열 검색하여 배열로 반환, 없으면 null 반환 replace(“문자열1”, “문자열2”) 문자열1을 문자열2로 대체 toLowerCase() 소문자로 변환 toUpperCase() 대문자로 변환
3.3.1 내장 객체 교재 p.305 String 객체(계속) [표 3.13] HTML 래퍼 메소드 메소드 설명 fontcolor(색상) 글자색 fontsize(크기) 글자크기 big() 글자를 좀 더 크게 bold() 글자를 굵게 italics() 이탤릭체 fixed() 타자기체 strike() 취소선 sup() 윗첨자 sub() 아래첨자
3.3.1 내장 객체 교재 p.306 예제 : string.html 4 : <script type="text/javascript"> 5 : document.write("굵은체".bold()); 6 : document.write("이탤릭체".italics()); 7 : document.write("타자기체".fixed() + "<br><br>"); 8 : 9 : document.write("현재에" + "위첨자".fontcolor("red").sup() + "<br><br>"); 10 : document.write("현재에" + "아래첨자".sub() + "<br><br>"); 11 : 12 : document.write("font SIZE 7 ".fontsize(7) + "<br>"); 13 : document.write("취소선 ".strike() + "<br><br>"); 14 : 15 : document.write("파랗고 크게".big().fontcolor("blue") + "<br><br>"); 16 : document.write("이탤릭체&강조&빨간색".italics().strike().fontcolor("red") + "<br><br>"); 17 : document.write("크기는 5이면서 볼드체로".fontsize(5).bold() + "<br>"); 18 : </script>
3.3.1 내장 객체 교재 p.306 실행 결과
3.3.2 브라우저 객체 교재 p.306 브라우저 객체 ‧ window 객체 ‧ history 객체 ‧ location 객체 ‧ navigator 객체 ‧ screen 객체 : 윈도우를 다루기 위한 기능 제공 : 방문했던 페이지들에 대한 정보 제공 : 현재 브라우저에서 보여주는 페이지들의 위치 정보 제공 : 브라우저에 대한 정보 제공 : 방문자의 스크린에 대한 정보 제공
3.3.2 브라우저 객체 교재 p.307 window 객체 브라우저에 오픈된 윈도우를 다루는 객체 구분 이름 설명 속성 document document 객체 history history 객체 location location 객체 navigator navigator 객체 screen screen 객체 self 현재 윈도우 parent 부모 윈도우 top 최상위의 윈도우 defaultStatus 상태 표시줄에 출력할 기본 문자열 설정 status 상태 표시줄에 출력할 문자열
3.3.2 브라우저 객체 교재 p.308 window 객체(계속) [표 3.14] window 객체의 주요 메소드 구분 이름 설명 메소드 alert(“메시지”) 경고 대화상자에 메시지 생성 confirm(“메시지”) 확인 대화상자에 메시지 생성 prompt(“메시지”[, “기본값”]) 프롬프트 대화상자에 메시지 생성, 기본값은 초기 입력값 createPopup([“url”]) url의 페이지 팝업 윈도우 생성, url 생략하면 빈 윈도우 생성 open([“url”]) url의 페이지 열기, url 생략하면 빈 윈도우 생성 close() 윈도우 닫기 focus() 윈도우에 포커스 설정 blur() 윈도로부터 포커스 제거
3.3.2 브라우저 객체 교재 p.308 예제 : window.html browser_status 함수 정의 3 : <script type="text/javascript"> 4 : function browser_status() 5 : { 6 : window.status = "상태 표시줄의 문자열이 변경되었네요.“; 7 : } 8 : </script>
3.3.2 브라우저 객체 교재 p.308 예제 : window.html 상태 표시줄의 메시지 변경 10 : <body onLoad="window.defaultStatus='홈페이지 방문을 환영합니다.'"> 11 : <form> 12 : <h3> 확인 버튼을 누르면 상태 표시줄의 문자열이 변경됩니다.</h3> 13 : <input type="button" value="확인" onClick="browser_status()"> <br> 14 : </form> 15 : </body>
3.3.2 브라우저 객체 교재 p.309 실행 결과
[표 3.15] history 객체의 주요 속성과 메소드 3.3.2 브라우저 객체 교재 p.309 history 객체 사용자가 방문한 페이지의 url들을 히스토리 목록(history list)에 저장 [표 3.15] history 객체의 주요 속성과 메소드 구분 이름 설명 속성 length 방문한 페이지 목록의 url의 개수 메소드 back() 방문한 페이지 목록에서 이전 페이지로 이동 forward() 방문한 페이지 목록에서 다음 페이지로 이동
3.3.2 브라우저 객체 교재 p.310 예제 : history.html history_back 함수, history_forward 함수 정의 3 : <script language="JavaScript"> 4 : function history_back() 5 : { 6 : history.back(); 7 : } 8 : 9 : function history_forward() 10 : { 11 : history.forward(); 12 : } 13 : </script>
3.3.2 브라우저 객체 교재 p.310 예제 : history.html(계속) history_back 함수, history_forward 함수 호출 16 : <form> 17 : <h3> 이전 페이지로 이동하기</h3> 18 : <input type="button" value="이전으로 이동" onClick="history_back();"> <br> 19 : <h3> 다음 페이지로 이동하기</h3> 20 : <input type="button" value="다음으로 이동" onClick="history_forward();"><br> 21 : </form>
3.3.2 브라우저 객체 교재 p.311 실행 결과
[표 3.16] location 객체의 주요 속성과 메소드 3.3.2 브라우저 객체 교재 p.311 location 객체 현재 페이지의 url에 대한 정보를 얻을 수 있음 [표 3.16] location 객체의 주요 속성과 메소드 구분 이름 설명 속성 href 전체 url pathname 경로명 hostname 호스트 이름 port 포트 번호 protocol 프로토콜 메소드 reload() 현재 페이지를 다시 로드 replace(“url”) 현재 페이지를 특정 url의 페이지로 대체
3.3.2 브라우저 객체 교재 p.312 예제 : location.html 5 : <form> 6 : <input type="button" value="이동" 7 : onClick="location.replace('http://www.w3.org')"><br> 8 : </form>
3.3.2 브라우저 객체 교재 p.312 실행 결과
[표 3.17] navigator 객체의 주요 속성과 메소드 3.3.2 브라우저 객체 교재 p.313 navigator 객체 브라우저에 대한 정보를 얻을 수 있음 [표 3.17] navigator 객체의 주요 속성과 메소드 구분 이름 설명 속성 appName 브라우저의 이름 appVersion 브라우저의 버전 메소드 javaEnabled() 브라우저의 Java 지원 여부(true, false)
3.3.2 브라우저 객체 교재 p.313 예제 : navigator.html 5 : <script type="text/javascript"> 6 : document.write("사용하는 브라우저의 이름은 " + navigator.appName + " 입니다." + "<br>" + "<br>"); 7 : document.write("사용하는 브라우저의 버전은 " + navigator.appVersion + " 입니다." + "<br>"); 8 : </script>
3.3.2 브라우저 객체 교재 p.314 실행 결과
3.3.2 브라우저 객체 교재 p.314 screen 객체 사용자의 스크린에 대한 정보를 저장하고 있음 구분 이름 설명 속성 height 스크린의 전체 높이 width 스크린의 전체 너비 availHeight 작업 표시줄을 제외한 스크린의 높이 availWidth 작업 표시줄을 제외한 스크린의 너비 pixelDepth 스크린의 컬러 해상도 colorDepth 색상 심도(color depth)의 비트수
3.3.2 브라우저 객체 교재 p.315 예제 : screen.html 4 : <script type="text/javascript"> 5 : document.write("스크린의 너비는 " + screen.width + " 픽셀입니다." + "<br>") 6 : document.write("스크린의 높이는 " + screen.height + " 픽셀입니다." 7 : document.write("스크린의 컬러 해상도는 " + screen.colorDepth + "비트입니다." + "<br>") 8 : </script>
3.3.2 브라우저 객체 교재 p.315 실행 결과
3.3.3 HTML DOM 객체 교재 p.315 HTML DOM 객체 HTML 문서의 요소(element)에 접근하거나 조작하기 위해 정의된 객체 [표 3.19] 주요 HTML DOM 객체 이름 설명 Document 문서 객체 처리 Elements 문서의 요소 처리 Events 문서의 요소에 이벤트 처리기 등록 Body body 요소 처리 Image 이미지 요소 처리 Table 테이블 요소 처리 Form 폼 요소 처리 Frame/IFrame 프레임 요소 처리 Frameset 프레임 셋 요소 처리 이름 설명 Input Text 텍스트 입력 필드 처리 Input Button 입력 버튼 처리 Input Checkbox 체크박스 처리 Input Password 패스워드 필드 처리 Input Radio 라디오 버튼 처리 Button 버튼 요소 처리 Textarea 텍스트 영역 요소 처리 Anchor 앵커 객체 처리 Link 링크 요소 처리
[표 3.20] document 객체의 주요 속성과 메소드 3.3.3 HTML DOM 객체 교재 p.316 document 객체 브라우저에 로드된 HTML 문서를 다를 수 있음 [표 3.20] document 객체의 주요 속성과 메소드 구분 이름 설명 속성 title 문서의 제목 lastModified 문서를 마지막으로 수정한 날짜와 시각 메소드 getElementsByName(“이름”) 지정된 이름의 모든 요소들 접근 getElementsById(“ID”) 지정된 ID의 처음 요소에 접근 write(“문자열”) 문자열 출력 writeln(“문자열”) 문자열 출력과 줄바꿈
3.3.3 HTML DOM 객체 교재 p.317 예제 : document.html document 속성 사용 및 url 함수 정의 3 : <script type="text/javascript"> 4 : document.title = "document 객체 사용 예"; 5 : document.write("현재 문서의 제목은 " + document.title + "입니다." + "<br><br>"); 6 : 7 : document.write("현재 문서를 마지막으로 수정한 시각은 " + document.lastModified + "입니다." + "<br><br>"); 8 : 9 : function url(){ 10 : document.URL = "http://www.w3.org"; 11 : } 12 : </script>
3.3.3 HTML DOM 객체 교재 p.318 예제 : document.html(계속) url 함수 호출 14 : <body> 15 : <h3> W3C 웹 페이지로 이동하려면 다음의 확인 버튼을 누르세요. </h3> 16 : <input type="button" value="확인" onClick="url()"><br> 17 : </body>
3.3.3 HTML DOM 객체 교재 p.318 실행 결과
3.4 이벤트 교재 p.324 JavaScript 이벤트(event)에 의해 실행되는 언어 이벤트 처리기 이벤트가 발생할 경우 이를 처리 이벤트의 이름 앞에 'on'이라는 접두어를 붙여서 사용
3.4 이벤트 교재 p.326 마우스의 동작과 관련된 이벤트 처리기를 이용한 예 마우스 이벤트 처리기의 기능(1) onMouseOver : 특정한 요소에 마우스 포인터가 위치할 때 사용 예 : <a href = "url" onMouseOver = "마우스 포인터가 링크 영역에 위치할 때 실행되는 함수"> 링크 텍스트 또는 링크 이미지 </a>
3.4 이벤트 교재 p.326 마우스 이벤트 처리기의 기능(2) onMouseOut : 특정한 요소로부터 마우스 포인터가 벗어날 때 사용 예 : <a href = "url" onMouseOut = "마우스 포인터가 링크 영역에서 벗어날 때 실행되는 함수"> 링크 텍스트 또는 링크 이미지 </a>
3.4 이벤트 교재 p.326 마우스의 동작과 관련된 이벤트 처리 예 마우스 포인터의 위치에 따라 이미지를 교체하여 버튼이 눌린 것처럼 보이도록 하는 기능 구현 필요한 이미지 up.jpg down.jpg
3.4 이벤트 교재 p.326 예제 : event.html 6 : <a href="#" onMouseOver="document.images[0].src='down.jpg'" 7 : onMouseOut="document.images[0].src='up.jpg'"> 8 : <img src="up.jpg" border="0"> 9 : </a><br><br>
3.4 이벤트 교재 p.327 실행 결과
예제 4-15 onload_onUnload.html <head> <title> 웹 브라우저가 시작되고 종료될 때 </title> </head> <body background ="image/mountain.jpg" onload="alert('홈페이지에 오신 것을 환영합니다.')" onunload="alert('안녕히 계십시요..')"> </body> </html> ◆ load 와 unload는 <BODY> 태그에 적용함
<html><head> <title> 클릭 이벤트와 더블클릭 이벤트가 발생했을 때 </title></head> <body> <form> <input type = button value="클릭" onclick="alert('한번 클릭')"> <input type = button value="더블 클릭" onclick="alert('더블 클릭')"> </form></body> </html> ◆ 이벤트를 발생시킬 특정한 대상에 이벤트를 등록함 (예제에서는 버튼)
예제 4-18 Focus_Blur.html <html> <head> <title> 포커스에 대한 이벤트 </title> </head> <body> <p>입력 : <input type="text" size=10 onfocus="alert('포커스가 있습니다.')" onblur="alert('포커스가 떠났습니다.')"> </p></body> </html>
JavaScript 객체의 계층 구조
onReset시 리셋확인,onSubmit시 전송가능검사 <html> <head> <script type ="text/javascript" language = "JavaScript"> function testReset(fo) { return confirm("폼을 리셋할까요?"); } function testSubmit(fo) if(fo.t.value.length <= 0) return notice(); if(fo.id.value.length <= 0) return notice(); for(var i=0; i<fo.g.length; i++) { if(fo.g[i].checked) break; if(i==fo.g.length) return notice(); return true; function notice() alert("폼의 모든 필드를 채우세요"); return false; </script> </head> <body> <h3>onReset과 onSubmit 핸들러의 예</h3> <hr noshade> reset 버튼을 누르면 confirm 메시지 박스를 출력하고 submit 버튼을 누르면 폼 요소가 모두 입력 되었는지를 검사 <p> <form name="f" method="post” action=”” bin/cgitest3.cgi" onReset="return testReset(this)" onSubmit="return testSubmit(this)"> 이름 <input type="text" name="t" value=""><br> 학번 <input type="text" name="id"><br> 희망성적 <input type="radio" name="g" value="a">A <input type="radio" name="g" value="b">B <input type="radio" name="g" value="c">C <input type="radio" name="g" value="d">D <input type="radio" name="g" value="f">F <br> <input type="reset" value="리셋"> <input type="submit" value="완료"> </form> </body> </html>
리셋버튼을 눌렀을 때 완료 버튼을 눌렀을 때
링크의 URL을 브라우저 사용자의 동적으로 변경 <html><head><title>Link 객체 예</title><script type ="text/javascript" language = "JavaScript"> function setURL(l,s) { l.href=s.options[s.selectedIndex].value } </script> </head> <body> <h3>링크 객체의 URL을 동적으로 설정하는 예</h3> <hr noshade> 가고 싶은 곳을 선택하고 링크를 클릭하세요.<p> <form name="f"> <select name="s"> <option selected value="http://www.yahoo.co.kr">야후 코리아 <option value="http://home.netscape.com">넷스케이프 <option value="http://www.sun.co.kr">선마이크로 </select> </form> <a href="" onClick="setURL(this, document.f.s);"> 선택하신후이곳을클릭하면이동합니다</a> </body></html>
<a href=“” onClick=“ this.href=‘http://www.yahoo.co.kr’”> 이것은 링크입니다. </a>
Image 객체 생성 <img> 태그에 의해 자동으로 Image() 생성자에 의해(new Image(…)) new Image (width, height) width (선택사항)이미지가 그려질 폭. 픽셀 값. height (선택사항)이미지가 그려질 높이. 픽셀 값.
이미지 로딩과 이미지 화면 출력 <img> 태그에 의해 생성된 이미지 객체와 new Image() 에 의해 생성된 객체 사이에는 다소 차이가 존재 <img> 태그에 생성된 이미지 객체는 화면상에 이미지 출력 공간을 확보하고 있음 new Image()에 생성된 객체는 내부적으로 이미지 데이터를 가질 수 있지만 화면 상에 출력될 공간을 확보하고 있지않음 <img> 태그로 생성된 Image 객체의 src 프로퍼티를 변경하면 다른 이미지를 화면에 출력 가능 이미지 로딩 생성자를 이용한 Image 객체의 생성 후 src 속성에 이미지 파일이름지정 이미지 화면 출력 <img> 태그에 의해 생성된 이미지 객체의 src 프로퍼티에 이미지 파일 이름 지정
메뉴에 마우스 올리면 메뉴가 선택된 상태로 변함 <html><head><script type ="text/javascript" language = "JavaScript”> imgOver = new Array(3) imgOver[0] = new Image(); imgOver[0].src = "0_over.jpg"; imgOver[1] = new Image(); imgOver[1].src = "1_over.jpg"; imgOver[2] = new Image(); imgOver[2].src = "2_over.jpg"; imgOut = new Array(3) imgOut[0] = new Image(); imgOut[0].src = "0_out.jpg"; imgOut[1] = new Image(); imgOut[1].src = "1_out.jpg"; imgOut[2] = new Image(); imgOut[2].src = "2_out.jpg"; function mOver(n) { document.images[n].src = imgOver[n].src } function mOut(n) { document.images[n].src = imgOut[n].src </script></head> <body> <center> <table border=0> <tr> <td width="100" height="60" align=center> <img name="m0" src="0_out.jpg“href onMouseOver="mOver(0)" onMouseOut="mOut(0)"></td> </tr> <img name="m1" src="1_out.jpg“ onMouseOver="mOver(1)" onMouseOut="mOut(1)"></td> <img name="m2" src="2_out.jpg“ onMouseOver="mOver(2)" onMouseOut="mOut(2)"></td> </table> </center> </body></html>
결과
이미지 버튼 <html><head><title>이미지 submit 버튼</title> </head> <body > <form name="fm" action="http://naver.com"> <img src = "0_out.jpg" onclick = fm.submit();"> </form> </body> </html> <html><head><title>이미지 submit 버튼</title> </head> <body > <form name="fm" action="http://naver.com"> <a href="javascript:fm.submit();"> <img src = "0_out.jpg"></a> </form> </body> </html>
새 브라우저 윈도우 열기 및 닫기 open() close() window.open()을 이용할 것 open(URL, windowName, windowFeature) close() URL 새 윈도우에 로드할 URL 스트링. empty 스트링 즉 ””으로 주어지면 empty 윈도우가 생성 windowName <FORM>이나 <A> 태그의 target으로 사용할 수 있는 윈도우 이름 windowFeatures (선택사항)생성될 윈도우의 속성을 지정하는 스트링. 콤마로 분리되는 리스트.빈칸이 존재하면 오류발생 open() window.open()을 이용할 것 open()은 document.open()으로 해석됨 기존 윈도우의 이름을 이용하여 기존 윈도우 상에 open() 할 수 있다 윈도우가 열려지고 난 후, 자바스크립트로 windowFeatures 들을 변경할 수 없다. close() 지정된 윈도우를 닫는다
windowFeatures 속성 값(1) features 설명 alwaysLowered alwaysRaised dependent directories height hotkeys innerHeight innerWidth location menubar outerHeight outerWidth resizable screenX screenY 설명 yes이면 새 윈도우를 다른 윈도우들 뒤에 생성 yes이면 새 윈도우를 다른 윈도우들 위에 생성 yes이면 현재 윈도우의 자식 윈도우로 생성되며 태스크바에 보이지 않는다. 부모 윈도우가 닫히면 자식 윈도우도 함께 닫힌다. Yes이면 표준 디렉토리 버튼들을 생성 윈도우의 높이 지정. 픽셀 단위 no(또는 0)이면 메뉴바를 가지지 않는 새 윈도우의 핫키를 금지 윈도우의 클라이언트 영역의 높이. 픽셀 단위 윈도우의 클라이언트 영역의 폭. 픽셀 단위 yes이면 Location 입력 필드를 생성 yes이면 윈도우의 상단에 메뉴바를 생성 윈도우 외부 경계의 수직 위치를 지정. 픽셀 단위 윈도우 외부 경계의 수평 위치를 지정. 픽셀 단위 yes이면 사용자에 의해 크기 조절이 가능한 윈도우 생성 윈도우가 생성될 스크린 상의 x 좌표. 픽셀 값 윈도우가 생성될 스크린 상의 y 좌표. 픽셀 값
windowFeatures 속성 값(2) features 설명 scrollbars yes이면 스크롤바를 생성 status titlebar toolbar width z-lock 설명 yes이면 스크롤바를 생성 yes이면 상태바를 생성 yes이면 제목바를 가진 윈도우 생성 Yes이면 브라우저 표준 툴바를 가진 윈도우 생성 윈도우의 폭 지정.픽셀 값 yes이면 활성화될 때 다른 윈도우의 위에 그려지지 않는 윈도우 생성
로드시 자동으로 다른 윈도우를 열어 새소식 정보를 주는 페이지 만들기 예 <html><head><title>새 윈도우 열기</title> <script type ="text/javascript" language = "JavaScript"> function news() { newWin=window.open("js-news.htm", "newWinName“, "screenX=0,screenY=0,width=350,height=350,scrollbars=yes,status") } </script> </head> <body onLoad="news()"> <h3>window 객체의 open 메소드 예 : 새소식을 전하는 창을 추가적으로 생성하는 예</h3> <hr noshade> 안녕하세요. 저희 홈 페이지를 방문하여 주셔서 감사합니다. 이 웹 사이트를 방문하면 따로 새소식을 전하는 창을 생성합니다. window 객체의 onLoad 핸들러를 이용하여 (0,0) 스크린 위치에 350x350 크기의 새 윈도우를 생성하는 자바스크립트 코드를 작성하였습니다. </body> </html>
결과 새소식을 보여 주는 윈도우로서 이 윈도우가 시작될 때 새소식을 보여주는 js-news.htm 파일을 로드한다. 윈도우를 추가적으로 생성하고 그 윈도우에 js-news.htm 파일을 로드한다.
3.5 레이어 활용 교재 p.328 레이어 소개
3.5.1 레이어 소개 교재 p.328 레이어(Layer)란? 레이어는 층을 의미 하나의 웹 페이지에 여러 개의 레이어를 만들어 한 레이어 위에 다른 레이어를 겹쳐 쌓을 수 있음 레이어를 보이거나 감출 수 있음 레이어를 옮기거나 감추거나 확대 또는 축소 가능 동적인 애니메이션을 구현 가능
3.5.1 레이어 소개 교재 p.329 레이어 정의 고유한 ID 이름을 가져야 하며, 여기에 레이어 위치와 크기를 속성값으로 지정 형 식 : <style> #ID이름 {position : 속성값(absolute, relative); 위치 속성(left, top) : 수(pt, px, in, cm); 크기 속성(width, height) : 수(pt, px, in, cm);} </style>
3.5.1 레이어 소개 교재 p.329 레이어 생성에 필요한 태그 <div>와 <span> 태그 사용 class와 id 속성을 추가하여 원하는 부분의 스타일 지정 형 식 : <div id = "id 이름"> <span class = "클래스 이름"> 표현할 내용1 </span> 표현할 내용2 </div>
3.5.1 레이어 소개 교재 p.330 예제 : layer.html 레이어 정의 3 : <style> 4 : #layer1 { position:absolute; 5 : left:50; top:20; width:150; height: 100; 6 : background:green; z-index:1; } 7 : #layer2 { position:absolute; 8 : left:100; top:90; width:150; height: 100; 9 : background:yellow; z-index:2; } 10 : .white { background:white; } 11 : </style>
3.5.1 레이어 소개 교재 p.330 예제 : layer.html 레이어 사용 13 : <body> 14 : <div id="layer1"> 15 : <center><br><span class="white"> 초록 색종이 </span></center> 16 : </div> 17 : <div id="layer2"> 18 : <center><br> 노랑 색종이 </center> 19 : </div> 20 : </body>
3.5.1 레이어 소개 교재 p.331 실행 결과
3.5.1 레이어 소개 교재 p.331 예제 : layer-position.html 레이어 정의 3 : <style> 4 : #layer0 {position:absolute; left:40px; top:40px; 5 : color:yellow; font-weight:bold} 6 : #layer1 {position:absolute; left:400px; top:160px; 7 : color:yellow; font-weight:bold} 8 : #layer2 {position:relative; left:215px; top:-120px; 9 : color:yellow; font-weight:bold} 10 : </style>
3.5.1 레이어 소개 교재 p.331 예제 : layer-position.html 레이어 사용 12 : <body> 13 : <!--절대적 위치 지정 : 문서의 좌측상단을 기준점(0,0)으로--> 14 : <div id = "layer0"><p> 압구정역 </p></div> 15 : <div id = "layer1"><p> 압구정로 </p></div> 16 : 17 : <p> <img src = "map.jpg" border = "3"> </p> 18 : 19 : <!--상대적 위치 지정 : 지도의 왼쪽 아래 점을 기준점(0,0)으로--> 20 : <div id = "layer2"><p> 선릉로 </p></div> 21 : </body>
3.5.1 레이어 소개 교재 p.332 실행 결과
예제 : layer-map.html
갤러리 레이어의 Visibility 속성을 Visible로 바꿔서 보여주기 예제 6-2 Gallery.html <html> <head> <title>gallery</title> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> function show(layer) { document.all[layer].style.visibility = 'visible'; } function hide(layer) document.all[layer].style.visibility = 'hidden'; </script> </head> <body bgcolor="white" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> 레이어의 Visibility 속성을 Visible로 바꿔서 보여주기 레이어의 Visibility 속성을 hidden로 바꿔서 사라지기
갤러리 그림을 레이어로 설정 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다. 그림을 레이어로 설정 <div id="dog" style="position:absolute; left:350px; top:25px; visibility:hidden; "> <table width="220" height="320" border="1"> <tr><td bgcolor="maroon"> <center> <img src="dog.jpg" width=200px height=220px border="1"> <p> <font color="white" size="2"> <a href="javascript:hide('dog')"> [닫기] </a> </font> </center></td></tr> </table> </div> <div id="rabbit" style="position:absolute; <table width="220" border="1" height="320"> 그림을 레이어로 설정 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다. 그림을 레이어로 설정
갤러리 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다. 그림을 레이어로 설정 닫기를 클릭한 경우 <center> <img src="rabbit.jpg" width=200px height=220px border="1"> <p> <font color="white" size="2"> <a href="javascript:hide('rabbit')"> [닫기] </a></font> </center></td></tr> </table> </div> <div id="monkey" style="position:absolute; left:350px; top:25px; visibility:hidden; "> <table width="220" border="1" height="320"> <tr><td bgcolor="maroon"> <img src="monkey.jpg" width=200px height=220px border="1"> <p> <font color="white" size="2"> <a href="javascript:hide('monkey')"> [닫기] </a></font> 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다. 그림을 레이어로 설정 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다.
갤러리 그림을 레이어로 설정 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다. </center></td></tr> </table> </div> <div id="tigger" style="position:absolute; left:350px; top:25px; visibility:hidden; "> <table width="220" border="1" height="320"> <tr><td bgcolor="maroon"> <center> <img src="tigger.jpg" width=200px height=220px border="1"> <p> <font color="white" size="2"> <a href="javascript:hide('tigger')"> [닫기] </a></font> </center></td></tr> </table> <br> </p> <table cellpadding="0" cellspacing="0" width=400px height = 160px bgcolor="black" border=3> 그림을 레이어로 설정 닫기를 클릭한 경우 Hide() 함수 호출하여 레이어를 숨긴다.
갤러리 이미지를 클릭하였을 경우 레이어 보여주기 <tr> <td width="408" height="120"> <a href="javascript:show('dog')"> <img src="dog.jpg" width=100px height=120px border="1"> </a> <a href="javascript:show('rabbit')"> <img src="rabbit.jpg" width=100px height=120px border="1"> <a href="javascript:show('monkey')"> <img src="monkey.jpg" width=100px height=120px border="1"> <a href="javascript:show('tigger')"> <img src="tigger.jpg" width=100px height=120px border="1"> </td> </tr> </table> </body> </html> 이미지를 클릭하였을 경우 레이어 보여주기
갤러리