웹프로그래밍 제 3 장 JavaScript
3. JavaScript 교재 p.249 3.1 JavaScript 기초 3.2 JavaScript 기본문법 3.3 객체 3.4 이벤트 3.5 레이어활용 2
3.1 JavaScript 기초 교재 p.251 JavaScript 개요 JavaScript 기본구조 3
3.1.1 JavaScript 개요 교재 p.251 JavaScript 특징 브라우저에의해실행되는클라이언트사이드스크립트언어 명령어를사용하는 (imperative) 절차적 (procedural) 언어로구조적프로그래밍 (structured programming) 가능 4
3.1.1 JavaScript 개요 교재 p.252 JavaScript 특징 ( 계속 ) 객체 (object) 의정의와사용을지원하는객체기반 (object-based) 언어 실행시간에자료형을검사하는동적타이핑 (dynamic typing) 언어 동적인웹페이지와향상된사용자인터페이스를쉽게구현가능 5
3.1.2 JavaScript 기본구조 기본구조 <script> 태그를써서 HTML 페이지내에삽입 형식 1 : <script type = "text/javascript"> JavaScript_ 코드 </script> 교재 p.252 형식 2 : <script language = "JavaScript"> JavaScript_ 코드 </script> 6
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> 7
3.1.2 JavaScript 기본구조 예제 : first-example.html 교재 p.253 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> 8
3.1.2 JavaScript 기본구조 실행결과 교재 p.254 9
3.2 JavaScript 기본문법 자료형및변수 교재 p.255 연산자 문장 함수 10
3.2.1 자료형및변수 교재 p.255 자료형 변수를선언할때자료형 (data type) 을지정하지않으며, 각변수의자료형은값이배정될때결정 [ 표 3.1] JavaScript 의자료형 자료형정수 (integer) 실수 (float) 불리언 (boolean) 문자열 (string) 설명 10진수, 8진수 (0), 16진수 (0x) 형태의양수나음수부동소수점표현방식의실수논리값 true와 false를가짐따옴표 ( 또는 ) 사이에들어가는텍스트 11
3.2.1 자료형및변수 교재 p.255 변수 값 (value) 을저장하는이름이부여된기억장소 키워드 (keyword) var 을사용하여선언 12
3.2.1 자료형및변수 교재 p.256 변수 ( 계속 ) 변수선언 형식 : var 변수 _ 선언 _ 리스트 ; 선언예 변수 _ 선언 : 변수 _ 이름 [= 값 ] 선언예 : var a; var b, c; var d = 1; 13
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> 14
3.2.1 자료형및변수 교재 p.257 실행결과 15
3.2.1 자료형및변수 교재 p.258 변수의사용범위 지역변수 (local variable) 전역변수 (global variable) [ 표 3.3] 지역변수와전역변수 구분 설명 지역변수 함수내부에서 var 로선언한변수, 변수를선언한함수내부에서만사용가능 전역변수 함수내부에서선언되지않은변수, 또는함수내부에서 var 로선언하지않은변수, 페이지의어디에서나사용가능 16
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> 17
3.2.1 자료형및변수 교재 p.259 실행결과 18
3.2.2 연산자 교재 p.260 산술연산자 산술연산 사용예 : a + b a b a * b a / b a % b 19
3.2.2 연산자 교재 p.260 증감연산자 ++, -- 기호를변수앞이나뒤에붙임 변수값을 1 씩증가또는감소 사용예 : ++a a++ --a a-- 20
3.2.2 연산자 교재 p.261 관계연산자 값의대소관계를판단 참 (true) 또는거짓 (false) 을구함 사용예 : a > b a >= b a < b a <= b a == b a === b a!== b a!= b 21
3.2.2 연산자 교재 p.262 논리연산자 참 (true) 또는거짓 (false) 을구함 사용예 : a && b a b! a a > b && c == d a > 7 b <= 100 22
3.2.2 연산자 교재 p.262 문자열연산자 두개의문자열들을연결하여하나의문자열생성 연산자로 + 기호사용 사용예 : a + b 23
3.2.2 연산자 교재 p.263 배정연산자 변수에값저장 할당연산자또는대입연산자 사용예 : a = 1 a = b a += b a -= b a *= b a /= b a %= b 24
3.2.2 연산자 교재 p.263 조건연산자 논리식의결과에따라참이면식 1 을, 거짓이면식 2 를변수에배정 형식 : 변수 = 논리식? 식 1 : 식 2 ; 사용예 : x = a > b? b : c ; 25
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>"); 26
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> 27
3.2.2 연산자 교재 p.266 실행결과 28
3.2.3 문장 교재 p.266 조건문 반복문 29
3.2.3.1 조건문 교재 p.267 if 문 형식 : (a) if 문 (b) if-else 문 (c) if-else if-else 문 if( 조건식 1) if( 조건식 1) if( 조건식 1) { { { 문장 _ 리스트 1 문장 _ 리스트 1 문장 _ 리스트 1 } } } else else if( 조건식 2) { { 문장 _ 리스트 2 문장 _ 리스트 2 } } else { 문장 _ 리스트 3 } 30
3.2.3.1 조건문 교재 p.268 if 문순서도 (a) if 문 (b) if-else 문 (c) if-else if-else 문 31
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> 32
3.2.3.1 조건문 교재 p.269 실행결과 33
3.2.3.1 조건문 교재 p.270 switch 문 형식 : switch ( 식 ) { case 값 1 : 문장 _ 리스트 1 break; case 값 2 : 문장 _ 리스트 2 break; case 값 n : 문장 _ 리스트 n break; [ default : 문장 _ 리스트 n+1 ] } 34
3.2.3.1 조건문 교재 p.270 switch 문순서도 35
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> 36
3.2.3.1 조건문 교재 p.272 실행결과 37
3.2.3.2 반복문 교재 p.272 for 문 형식 : for( 초기화식 ; 조건식 ; 증감식 ) { 문장 _ 리스트 } 38
3.2.3.2 반복문 교재 p.273 for 문순서도 39
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> 40
3.2.3.2 반복문 교재 p.274 실행결과 41
3.2.3.2 반복문 교재 p.275 for-in 문 형식 : for ( [var] 변수 in { 객체 배열 }) { 문장 _ 리스트 } 42
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> 43
3.2.3.2 반복문 교재 p.276 실행결과 44
3.2.3.2 반복문 교재 p.276 while 문 형식 : while ( 조건식 ) { 문장 _ 리스트증감식 ; } 45
3.2.3.2 반복문 교재 p.277 while 문순서도 46
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> 47
3.2.3.2 반복문 교재 p.278 실행결과 48
3.2.3.2 반복문 교재 p.279 do while 문 형식 : do { 문장 _ 리스트증감식 ; } while ( 조건식 ); 49
3.2.3.2 반복문 교재 p.279 do while 문순서도 50
3.2.3.2 반복문 교재 p.280 예제 : 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> 51
3.2.3.2 반복문 교재 p.281 실행결과 52
3.2.4 함수 교재 p.281 내장함수 사용자정의함수 재귀함수 53
3.2.4.1 내장함수 교재 p.281 경고대화상자 : alert() 확인대화상자 : confirm() 프롬프트대화상자 : prompt() 수식계산 : eval(), parseint(), parsefloat() 54
3.2.4.1 내장함수 교재 p.282 경고대화상자 : alert() 형식 : alert(" 문자열 ) alert( 변수 ) 예제 : alert.html 4 : <script type="text/javascript"> 5 : alert(" 반갑습니다.\n 저의홈페이지방문을환영합니다!"); 6 : </script> 55
3.2.4.1 내장함수 교재 p.283 실행결과 56
3.2.4.1 내장함수 교재 p.283 확인대화상자 : confirm() 형식 : confirm(" 문자열 ") confirm( 변수 ) 예제 : confirm.html 4 : <script type="text/javascript"> 5 : var result = confirm(" 어떤값이출력될까요???"); 6 : document.write(" 당신이선택한버튼의값은 "); 7 : document.write("<b>" + result + "</b> 입니다."); 8 : </script> 57
3.2.4.1 내장함수 교재 p.284 실행결과 58
3.2.4.1 내장함수 교재 p.285 프롬프트대화상자 : prompt() 형식 : prompt( 변수 1 또는 " 문자열 1", 변수 2 또는 " 문자열 2") 변수1 또는 문자열1 은프롬프트대화상자에표현될메시지설정 변수2 또는 문자열2 는입력필드부분에초기값으로보여주는값설정 59
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> 60
3.2.4.1 내장함수 교재 p.286 실행결과 61
3.2.4.1 내장함수 교재 p.287 수식계산 : eval(), parseint(), parsefloat() 형식 : - eval( 문자열 또는변수 ) - parseint( 문자열 또는변수 - parseint( 문자열 또는변수, 진법 ) - parsefloat( 문자열 또는변수 ) 62
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> 63
3.2.4.1 내장함수 교재 p.288 실행결과 64
3.2.4.2 사용자정의함수 사용자정의함수 교재 p.289 형식 : function 함수명 ( [ 매개변수 _ 리스트 ] ) { 문장 _ 리스트 [ return 식또는변수또는값 ] } 65
3.2.4.2 사용자정의함수 예제 : 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> 교재 p.290 66
3.2.4.2 사용자정의함수 예제 : function-return.html ( 결과값을반환하는경우 ) 함수호출부 교재 p.290 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> 67
3.2.4.2 사용자정의함수 실행결과 교재 p.290 68
3.2.4.2 사용자정의함수 예제 : function-alert.html ( 결과값을반환하지않는경우 ) 함수선언부 교재 p.291 4 : <script type="text/javascript"> 5 : function who(name) { 6 : alert(" 안녕하세요. 저는 " + name + " 입니다."); 7 : } 8 : </script> 69
3.2.4.2 사용자정의함수 예제 : function-alert.html ( 결과값을반환하지않는경우 ) 함수호출부 12 : <script type="text/javascript"> 13 : var input = prompt(" 이름을입력하세요!"); 14 : who(input); 15 : </script> 교재 p.291 70
3.2.4.2 사용자정의함수 실행결과 교재 p.291 71
3.2.4.3 재귀함수 교재 p.292 재귀함수 재귀호출 (recursive call) 문장을포함하고있는함수 72
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> 73
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> 74
3.2.4.3 재귀함수 교재 p.293 실행결과 75
3.3 객체 교재 p.294 내장객체 브라우저객체 HTML DOM 객체 사용자정의객체 76
3.3.1 내장객체 교재 p.294 Array 객체 Boolean 객체 Date 객체 Math 객체 Number 객체 String 객체 77
3.3.1 내장객체 교재 p.295 Array 객체 배열생성 [ 표 3.7] Array 객체의주요속성과메소드 구분이름설명 속성 length 배열의길이 메소드 join( 분리자 ) 배열의원소들사이에분리자삽입하여하나의문자열로 합침 ( 분리자지정가능하며기본은쉼표 (,)) concat( 배열 1, 배열 2,... 배열 n) 다수의배열들을순서대로합하여하나의배열생성 78
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> 79
3.3.1 내장객체 교재 p.297 실행결과 80
3.3.1 내장객체 교재 p.297 Boolean 객체 논리값을저장하고문자열로변환 [ 표 3.8] Boolean 객체의주요메소드 구분이름설명 메소드 valueof() tostring() 객체의원시값을반환 불리언값을문자열로변환하고그결과값을반환 81
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> 82
3.3.1 내장객체 교재 p.298 실행결과 83
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 까지의초 ) 84
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> 85
3.3.1 내장객체 교재 p.300 실행결과 86
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) random() pow(a, b) exp(n) sqrt(n) 가장큰값가장작은값 n의절대값 0에서 1사이의난수 (random number) a b e n n 의제곱근 log(n) n 의자연로그값 87
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> 88
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> 89
3.3.1 내장객체 교재 p.302 실행결과 90
3.3.1 내장객체 교재 p.303 Number 객체 문자열로표현된수를실제수로변환시켜주는객체 [ 표 3.11] Number 객체의주요속성과메소드 구분이름설명 속성 메소드 MAX_value MIN_value valueof() tostring([ 진법 ]) 표현할수있는최대값표현할수있는최소값객체의원시값을반환진법의문자열로변환, 진법은 2~36 사이의값이며생략하면 10 91
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> 92
3.3.1 내장객체 교재 p.304 실행결과 93
3.3.1 내장객체 교재 p.304 String 객체 문자열처리 [ 표 3.12] String 객체의주요속성과메소드 구분이름설명 속성 length 문자열길이 메소드 concat( 문자열1, 문자열2,,,, 문자열n ) search( 스트링 ) match( 정규식 ) replace( 문자열1, 문자열2 ) tolowercase() touppercase() 두개이상의문자열을연결 ( 매개변수는문자열또는문자열변수 ) 스트링을검색하여인덱스반환, 없으면 -1 반환정규식 (regular expression) 과일치하는문자열검색하여배열로반환, 없으면 null 반환문자열1을문자열2로대체소문자로변환대문자로변환 94
3.3.1 내장객체 교재 p.305 String 객체 ( 계속 ) [ 표 3.13] HTML 래퍼메소드 메소드 설명 fontcolor( 색상 ) fontsize( 크기 ) big() bold() italics() fixed() strike() sup() sub() 글자색글자크기글자를좀더크게글자를굵게이탤릭체타자기체취소선윗첨자아래첨자 95
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> 96
3.3.1 내장객체 교재 p.306 실행결과 97
3.3.2 브라우저객체 교재 p.306 브라우저객체 window 객체 history 객체 location 객체 navigator 객체 screen 객체 : 윈도우를다루기위한기능제공 : 방문했던페이지들에대한정보제공 : 현재브라우저에서보여주는페이지들의위치정보제공 : 브라우저에대한정보제공 : 방문자의스크린에대한정보제공 98
3.3.2 브라우저객체 교재 p.307 window 객체 브라우저에오픈된윈도우를다루는객체 [ 표 3.14] window 객체의주요속성 구분이름설명 속성 document history location navigator screen self parent top defaultstatus document 객체 history 객체 location 객체 navigator 객체 screen 객체현재윈도우부모윈도우최상위의윈도우상태표시줄에출력할기본문자열설정 status 상태표시줄에출력할문자열 99
3.3.2 브라우저객체 교재 p.308 window 객체 ( 계속 ) [ 표 3.14] window 객체의주요메소드 구분이름설명 메소드 alert( 메시지 ) confirm( 메시지 ) prompt( 메시지 [, 기본값 ]) createpopup([ url ]) open([ url ]) close() focus() blur() 경고대화상자에메시지생성확인대화상자에메시지생성프롬프트대화상자에메시지생성, 기본값은초기입력값 url의페이지팝업윈도우생성, url 생략하면빈윈도우생성 url의페이지열기, url 생략하면빈윈도우생성윈도우닫기윈도우에포커스설정윈도로부터포커스제거 100
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> 101
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> 102
3.3.2 브라우저객체 교재 p.309 실행결과 103
3.3.2 브라우저객체 교재 p.309 history 객체 사용자가방문한페이지의 url 들을히스토리목록 (history list) 에저장 [ 표 3.15] history 객체의주요속성과메소드 구분이름설명 속성 length 방문한페이지목록의 url 의개수 메소드 back() forward() 방문한페이지목록에서이전페이지로이동 방문한페이지목록에서다음페이지로이동 104
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> 105
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> 106
3.3.2 브라우저객체 교재 p.311 실행결과 107
3.3.2 브라우저객체 교재 p.311 location 객체 현재페이지의 url 에대한정보를얻을수있음 [ 표 3.16] location 객체의주요속성과메소드 구분이름설명 속성 메소드 href pathname hostname port protocol reload() replace( url ) 전체 url 경로명호스트이름포트번호프로토콜현재페이지를다시로드현재페이지를특정 url의페이지로대체 108
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> 109
3.3.2 브라우저객체 교재 p.312 실행결과 110
3.3.2 브라우저객체 교재 p.313 navigator 객체 브라우저에대한정보를얻을수있음 [ 표 3.17] navigator 객체의주요속성과메소드 구분이름설명 속성 appname appversion 브라우저의이름 브라우저의버전 메소드 javaenabled() 브라우저의 Java 지원여부 (true, false) 111
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> 112
3.3.2 브라우저객체 교재 p.314 실행결과 113
3.3.2 브라우저객체 교재 p.314 screen 객체 사용자의스크린에대한정보를저장하고있음 [ 표 3.18] screen 객체의주요속성 구분이름설명 속성 height width availheight availwidth pixeldepth colordepth 스크린의전체높이스크린의전체너비작업표시줄을제외한스크린의높이작업표시줄을제외한스크린의너비스크린의컬러해상도색상심도 (color depth) 의비트수 114
3.3.2 브라우저객체 교재 p.315 예제 : screen.html 4 : <script type="text/javascript"> 5 : document.write(" 스크린의너비는 " + screen.width + " 픽셀입니다." + "<br>") 6 : document.write(" 스크린의높이는 " + screen.height + " 픽셀입니다." + "<br>") 7 : document.write(" 스크린의컬러해상도는 " + screen.colordepth + " 비트입니다." + "<br>") 8 : </script> 115
3.3.2 브라우저객체 교재 p.315 실행결과 116
3.3.3 HTML DOM 객체 HTML DOM 객체 HTML 문서의요소 (element) 에접근하거나조작하기위해정의된객체 [ 표 3.19] 주요 HTML DOM 객체 교재 p.315 이름 설명 이름 설명 Document 문서객체처리 Input Text 텍스트입력필드처리 Elements 문서의요소처리 Input Button 입력버튼처리 Events 문서의요소에이벤트처리기등록 Input Checkbox 체크박스처리 Body body 요소처리 Input Password 패스워드필드처리 Image 이미지요소처리 Input Radio 라디오버튼처리 Table 테이블요소처리 Button 버튼요소처리 Form 폼요소처리 Textarea 텍스트영역요소처리 Frame/IFrame 프레임요소처리 Anchor 앵커객체처리 Frameset 프레임셋요소처리 Link 링크요소처리 117
3.3.3 HTML DOM 객체 document 객체 교재 p.316 브라우저에로드된 HTML 문서를다를수있음 [ 표 3.20] document 객체의주요속성과메소드 구분이름설명 속성 메소드 title lastmodified getelementsbyname( 이름 ) getelementsbyid( ID ) write( 문자열 ) writeln( 문자열 ) 문서의제목문서를마지막으로수정한날짜와시각지정된이름의모든요소들접근지정된 ID의처음요소에접근문자열출력문자열출력과줄바꿈 118
3.3.3 HTML DOM 객체 예제 : document.html document 속성사용및 url 함수정의 교재 p.317 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> 119
3.3.3 HTML DOM 객체 예제 : document.html( 계속 ) url 함수호출 교재 p.318 14 : <body> 15 : <h3> W3C 웹페이지로이동하려면다음의확인버튼을누르세요. </h3> 16 : <input type="button" value=" 확인 " onclick="url()"><br> 17 : </body> 120
3.3.3 HTML DOM 객체 실행결과 교재 p.318 121
3.3.4 사용자정의객체 사용자정의객체 교재 p.319 객체생성메소드를이용하거나함수정의방법을활용하여생성 122
3.3.4 사용자정의객체 객체생성메소드이용 교재 p.319 형식 : var 객체 _ 이름 = new Object(); 객체 _ 이름. 속성 _ 이름 = 속성값 ; 사용예 : var student = new Object(); student.id = "2013001 ; student.name = " 김소연 ; student.dept = " 컴퓨터공학 ; 123
3.3.4 사용자정의객체 함수정의방법이용 [ 객체정의및생성예 1 : 매개변수가없는함수 ] 교재 p.320 사용예 : function student( ) { this.id; this.name; this.dept; } st = new student( ) ; 124
3.3.4 사용자정의객체 함수정의방법이용 ( 계속 ) [ 객체정의및생성예 2 : 매개변수가있는함수 ] 교재 p.320 사용예 : function student(identity, name, department) { this.id = identity; this.name = name; this.dept = department; } st = new student("2013001", " 김소연 ", " 컴퓨터공학 ") ; 125
3.3.4 사용자정의객체 메소드정의 [ 메소드정의예 1 : 함수내부의메소드 ] 교재 p.321 사용예 : function student(identity, name, department) { this.id = identity; this.name = name; this.dept = department; } this.stinfo = function() { return " 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."; }; st = new student("2013001", " 김소연 ", " 컴퓨터공학 ") ; 126
3.3.4 사용자정의객체 메소드정의 [ 메소드정의예 2 : 함수외부의메소드 ] 교재 p.321 사용예 : function info() { document.writeln(" 학생정보 : 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."); } function student(identity, name, department) { this.id = identity; this.name = name; this.dept = department; } this.stinfo = info ; st = new student("2013001", " 김소연 ", " 컴퓨터공학 "); 127
3.3.4 사용자정의객체 예제 : user-object-method1.html student 함수정의 교재 p.322 4 : <script type="text/javascript"> 5 : function student(identity, name, department) { 6 : this.id = identity; 7 : this.name = name; 8 : this.dept = department; 9 : 10 : this.stinfo = function() { return " 학생정보 : 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."; }; 11 : } 12 : 13 : st = new student("2013001", " 김소연 ", " 컴퓨터공학 "); 14 : </script> 128
3.3.4 사용자정의객체 예제 : user-object-method1.html 메소드를이용한학생정보출력 교재 p.322 18 : <script type="text/javascript"> 19 : document.writeln(" 학번 : " + st.id + "<br>"); 20 : document.writeln(st.stinfo() + "<br>"); 21 : </script> 129
3.3.4 사용자정의객체 실행결과 교재 p.322 130
3.3.4 사용자정의객체 예제 : user-object-method2.html student 함수정의 교재 p.323 4 : <script type="text/javascript"> 5 : function info() { 6 : document.writeln(" 학생정보 : 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."); 7 : } 8 : 9 : function student(identity, name, department) { 10 : this.id = identity; 11 : this.name = name; 12 : this.dept = department; 13 : 14 : this.stinfo = info; 15 : } 16 : 17 : st = new student("2013001", " 김소연 ", " 컴퓨터공학 "); 131
3.3.4 사용자정의객체 예제 : user-object-method2.html 메소드를이용한학생정보출력 교재 p.323 22 : <script type="text/javascript"> 23 : document.writeln(" 학번 : " + st.id + "<br>"); 24 : document.writeln(st.stinfo() + "<br>"); 25 : </script> 132
3.3.4 사용자정의객체 실행결과 교재 p.324 133
3.4 이벤트 교재 p.324 JavaScript 이벤트 (event) 에의해실행되는언어 이벤트처리기 이벤트가발생할경우이를처리 이벤트의이름앞에 'on' 이라는접두어를붙여서사용 134
3.4 이벤트 교재 p.326 마우스의동작과관련된이벤트처리기를이용한예 마우스이벤트처리기의기능 (1) onmouseover : 특정한요소에마우스포인터가위치할때 사용예 : <a href = "url" onmouseover = " 마우스포인터가링크영역에위치할때실행되는함수 "> 링크텍스트또는링크이미지 </a> 135
3.4 이벤트 교재 p.326 마우스이벤트처리기의기능 (2) onmouseout : 특정한요소로부터마우스포인터가벗어날때 사용예 : <a href = "url" onmouseout = " 마우스포인터가링크영역에서벗어날때실행되는함수 "> 링크텍스트또는링크이미지 </a> 136
3.4 이벤트 교재 p.326 마우스의동작과관련된이벤트처리예 마우스포인터의위치에따라이미지를교체하여버튼이눌린것처럼보이도록하는기능구현 필요한이미지 up.jpg down.jpg 137
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> 138
3.4 이벤트 교재 p.327 실행결과 139
3.5 레이어활용 교재 p.328 레이어소개 140
3.5.1 레이어소개 교재 p.328 레이어 (Layer) 란? 레이어는층을의미 하나의웹페이지에여러개의레이어를만들어한레이어위에다른레이어를겹쳐쌓을수있음 레이어를보이거나감출수있음 레이어를옮기거나감추거나확대또는축소가능 동적인애니메이션을구현가능 141
3.5.1 레이어소개 교재 p.329 레이어정의 고유한 ID 이름을가져야하며, 여기에레이어위치와크기를속성값으로지정 형식 : <style> #ID 이름 {position : 속성값 (absolute, relative); 위치속성 (left, top) : 수 (pt, px, in, cm); 크기속성 (width, height) : 수 (pt, px, in, cm);} </style> 142
3.5.1 레이어소개 교재 p.329 레이어생성에필요한태그 <div> 와 <span> 태그사용 class 와 id 속성을추가하여원하는부분의스타일지정 형식 : <div id = "id 이름 "> <span class = " 클래스이름 "> 표현할내용 1 </span> 표현할내용 2 </div> 143
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> 144
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> 145
3.5.1 레이어소개 교재 p.331 실행결과 146
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> 147
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> 148
3.5.1 레이어소개 교재 p.332 실행결과 149