HTML5 웹프로그래밍입문 8 장. 자바스크립트 프로그래밍기초
목차 8.1 자바스크립트시작하기 8.2 자바스크립트기본문법 8.3 자바스크립트제어문및반복문 8.4 자바스크립트함수 2
8.1 자바스크립트시작하기 8.1.1 자바스크립트개요와특징 8.1.2 자바스크립트작성하기 8.1.3 자바스크립트실행및디버깅 3
자바스크립트개요 개요및특징 동적인웹문서, 웹응용프로그램을위한사용자인터페이스개발 자바애플릿, CGI 스크립트대체가능 C/C++ 이나자바언어등에비해서작성및실행이매우간편함 인터프리터 (interpreter) 방식 자바스크립트연혁 LiveScript라는이름으로넷스케이프사에서개발시작 1995년에 SUN사와공동개발로 JavaScript이라고명명 현재 ECMA(European Computer Manufacturers Association) 에서표준 따라서, ECMAScript라고도불리움 4
객체기반의자바스크립트 자바언어와차이점 실행방식 자바스크립트 웹브라우저에서실행 - 자바스크립트코드를해석하고바로실행 ( 스크립트 / 인터프리터기반언어 ) 자바언어 자바가상머신에서실행 - 자바프로그램을중간코드로컴파일후변환된 object code 를실행하는방식 ( 컴파일기반언어 ) 성격객체기반 (object-based) 객체지향 (object-oriented) 작성형태 HTML 파일내에포함되어작성됨별도의자바프로그램파일로작성 변수형선언및타입검사 변수의선언이따로필요없으며타입검사도매우느슨함 변수의선언이필요하며변수타입의검사가매우엄격함 5
자바스크립트작성하기 자바스크립트코드는반드시 HTML 파일내에포함 웹문서내장방식 1 2 3 4 5 6 7 8 9 <! HTML documents... >... <script type = "text/javascript"> <! // 자바스크립트코드 // > </script>... <! HTML documents... > 외부파일참조방식 1 2 3 4 5 6 7 8 <! HTML documents... >... <script type="text/javascript" src="myscript.js"> </script>.... <script type="text/javascript" src="http://webclass.me/html5/javascript_example.js"> </script>... <! HTML documents... > 6
간단한자바스크립트예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <! hello.html 간단한인사말을화면에표시하는 HTML/ 자바스크립트기본예제 > <html> <head> <title> Welcome to the JavaScript </title> </head> <body> <script type="text/javascript"> <! document.write("hello, welcome to the JavaScript world!"); // > </script> </body> </html> 7
자바스크립트실행및디버깅 웹브라우저자체인터프리터가코드를해석하고실행 치명적오류가아니라면웹브라우저는그오류를무시하고진행 개발단계의오류를개발자가확인하고수정하는것이바람직 [Chrome 설정및관리 ] 버튼 ( ) 을누른후 [ 도구더보기 ] [ 개발자도구 ] [ 콘솔 ] 을실행 8
8.2 자바스크립트기본문법 8.2.1 자바스크립트기본변수 8.2.2 기본연산자와변수형변환 8.2.3 화면출력및키보드입력 9
자바스크립트기본변수 기본변수타입 대부분의경우미리선언할필요가없음 타입도지정할필요가없다 내부적인변수의다섯가지기본형식 Number, String, Boolean, Undefined, Null 숫자의표현형태 125 1.25 0.125.125 125. 12.e5 1.2e 5 12E5 12e5.12e5 내부적으로숫자는모두실수로저장됨 10
자바스크립트기본변수타입 기본변수타입변수값비고 Number String 정수, 실수등숫자값을가짐 연속된글자들로이루어진문자열 ( 공백도가능함 ). 문자열의시작과끝은작은따옴표 (') 혹은겹따옴표 (") 로지정 숫자 (Number) 와문자열 (String) 타입간에는숫자값에대해자동형변환을제공한다. Boolean true 혹은 false 조건식에서사용 Undefined Null undefined 만가능 null 만가능 자바스크립트변수형은 typeof() 연산자를이용해서확인가능 typeof(123) "Number" 를반환 typeof("123") "String" 을반환 11
자바스크립트변수선언 변수를사전에선언없이사용하는것이가능 전역변수로사용할때는미리선언되어있어야함 별도의변수타입이없으며 var 선언한가지만제공 변수에값이저장될때그값에따라내부적으로변수타입결정 문자열, 정수, 실수등타입상관없음 var 변수명 ; 혹은 var 변수명 = 변수값 ; 변수의선언방식 : 대소문자구분 var index, name = " 모바일웹 "; var start = 0, end = 100.0; var message, condition, sender, receiver; var a = "3"; var b = 2; c = b + 3 + a; d = a + b; // c값은 53 이됨, 더하기후문자열붙히기연산 // d값은 "3"+"2"="32", 문자열연산 (Concatenation) 12
자바스크립트기본연산자 종류 연산자 설명 비고 사칙연산 + - * / % 더하기, 빼기, 곱하기, 나누기, 나머지 -내부적으로실수값으로변환후처리 대입연산자 += -= *= /= %= 왼편변수에우측값을연산후왼편변수에대입 - 자바언어와동일한연산우선순위 증감연산자 ++ -- 기존변수값에 +1 혹은 -1 연산수행 > < 왼편의값이크다, 작다 >= <= 왼편의값이크거나같다, 작거나같다 논리연산자 ==!= ===!== 양편이같다, 다르다 ( 값만비교 ) 양편의같다, 다르다 ( 값과타입모두비교 ) 결과값이 true 혹은 false 이다.! && 논리부정 (NOT), 논리합 (OR), 논리곱 (AND) 연산 13
자바스크립트문자열붙이기연산 문자열붙이기 (Concatenation) 연산 + 연산자를이용해서두문자열을붙임 var first_name = "Steve"; var last_name = "Jobs"; var full_name1 = first_name + " " + last_name; // full_name1: "Steve Jobs" var full_name2 = last_name + ", " + first_name; // full_name2: 'Jobs, Steve' 14
변수형변환 (type conversion) 문자열타입 숫자타입 parseint( 문자열변수 ) 혹은 parsefloat( 문자열변수 ) 함수 숫자타입 문자열타입 tostring( 숫자형변수 ) 메소드를이용 NOTE: 메소드 (Method): 객체에미리정의되어포함되어있는함수 var length = 123, length_num, length_str; length_num = length + 10; length_str = length.tostring() + 10; document.write("length in Number: " + length_num + " cm" + '<br />"); document.write("length in String: " + length_str + " cm" + '<br />"); var num = parseint(length_str) + 20; document.write("length in Integer: " + num + " cm"); 15
화면출력 document.write() 라는화면출력명령어 HTML 문서에콘텐츠를추가하여화면에출력 HTML 태그를추가할경우에는그태그도해석되어화면에출력 HTML 문서는 Document 라는객체로모델링되어있다 document 라는이름으로접근 Document 객체의 write() 메소드 var title1 = " 멀티미디어배움터 2.0"; var title2 = " 모바일멀티미디어 "; var title3 = " 자바입문 : 이론과실습 "; document.write("<caption> 베스트셀러 </caption>"); document.write("<tr>"); document.write("<th> 순위 </th>"); document.write("<th> 제목 </th>"); document.write("</tr>"); document.write("<tr> <td> 1 </td> <td> " + title1 + " </td> </tr>"); document.write("<tr> <td> 2 </td> <td> " + title2 + " </td> </tr>"); document.write("<tr> <td> 3 </td> <td> " + title3 + " </td> </tr>"); 16
대화상자로메시지출력 대화상자 (dialog box) 로입력을받는세가지방법 alert(), prompt(), confirm() alert() 명령어 사용자에게경고사항이나메시지를전달 " 확인 " 버튼을클릭하지않으면다음자바스크립트문장이실행되지않음 alert("html5 프로그래밍 \n 웹사이트로이동합니다."); 17
확인입력받기 confirm() 명령어 사용자에게 Yes/No 선택을입력 => 확인 과 취소 버튼 확인버튼을누르면 true, 취소버튼을누르면 false 를반환 var answer = confirm(" 주문한서적을결재하시겠습니까?"); document.write("answer = " + answer + "<br/>"); 18
키보드로부터문자열입력받기 prompt() 명령어 사용자로부터키보드를통해문자열을입력 확인 을누르면입력된문자열, 취소 를누르면 null 을반환 var answer = prompt(" 서적제목을입력해주세요.", " 모바일멀티미디어 "); document.write("answer = " + answer + "<br/>"); 사용자입력값 초기입력값 19
8.3 자바스크립트제어문및반복문 8.3.1 자바스크립트제어문 8.3.2 자바스크립트반복문 20
자바스크립트제어문 제어문으로 if 문과 switch 문을제공 자바스크립트제어문문법및사용형식비고 if else switch if ( 조건식 ) { // 조건식의값이 true일때실행될문장 else { // 조건식의값이 false일때실행될문장 switch (expression) { case value_1: // expression값이 value_1일때실행될문장 break; case value_2: // expression값이 value_2일때실행될문장 break; case value_3: // expression값이 value_3일때실행될문장 break;... default: // case문에서찾을수없을때실행될문장 21 실행될문장이한개인경우에는 { 를생략할수있다. C/C++, 자바언어와는달리 (expression) 에정수형이외의타입도사용할수있다. 예를들면문자열형식의값을사용할수도있다.
if-else 문 document.write("<caption> 책주문입력내용 </caption>"); document.write("<tr>"); document.write("<th> 제목 </th>"); document.write("</tr>"); 실행첫화면 var book1 = "1: 컴퓨터와 IT 기술의이해 [ 개정판 2 판 ]"; var book2 = "2: 소셜미디어의이해와활용 "; var book3 = "3: 멀티미디어배움터 2.0";9 var book_list = book1 + "\n" + book2 + "\n" + book3; var choice = prompt(" 책번호를입력하세요...\n" + book_list, "1"); if (choice == "1") title = book1; else if (choice == "2") title = book2; else if (choice == "3") title = book3; else { alert(" 리스트에없는책을선택하셨습니다."); title = ""; 2 를입력한경우실행결과 document.write("<tr>"); document.write("<td>" + title + "</td>"); document.write("</tr>"); 22
switch 문 expression 의값에일치하는 case 에있는문장을실행 expression 에정수형이외의타입도사용가능, 예, 문자열 switch (expression) { case value_1: // expression 값이 value_1 일때실행될문장 break; case value_2: // expression 값이 value_2 일때실행될문장 break; case value_3: // expression 값이 value_3 일때실행될문장 break;... default: // case 문에서찾을수없을때실행될문장 23
switch 문예제 실행첫화면 document.write("<caption> 책주문입력내용 </caption>"); document.write("<tr>"); document.write("<th> 제목 </th>"); document.write("</tr>"); var book1 = "IT: 컴퓨터와 IT 기술의이해 [ 개정판 2 판 ]"; var book2 = "SNS: 소셜미디어의이해와활용 "; var book3 = "Multimedia: 멀티미디어배움터 2.0"; var book_list = book1 + "\n" + book2 + "\n" + book3; var choice = prompt(" 키워드를입력하세요...\n" + book_list, ""); switch (choice) { case "IT": title = book1; break; case "SNS": title = book2; break; case "Multimedia": title = book3; break; default: alert(" 리스트에없는책을선택하셨습니다."); title = ""; "IT" 를입력한경우실행결과 document.write("<tr>"); document.write("<td>" + title + "</td>"); document.write("</tr>"); 24
자바스크립트반복문 while, for, do while 문을제공 자바스크립트반복문 문법및사용형식 비고 while for do while while ( 조건식 ) { // 조건식의값이 true 일동안반복해서실행될문장 for ( 초기화문장 ; 조건식 ; 증감문 ) { // 조건식의값이 true 일동안반복해서실행될문장 do { // 조건식의값이 true 일동안반복해서실행될문장 while ( 조건식 ) 실행될문장의개수가하나인경우에는 { 를생략할수있다. 25
while 반복문예제 피보나치수열값이 1000 이하일때반복해서출력... <table border="1"> <script type="text/javascript"> document.write("<tr>"); document.write("<td> Value </td>"); fib1 = 1; fib2 = 1; while (fib2 < 1000) { document.write("<td>"); document.write(fib2); document.write("</td>"); tmp = fib1 + fib2; fib1 = fib2; fib2 = tmp; document.write("</tr>"); </script> </table>... 26
for 반복문예제 document.write("<caption> 책주문입력내용 </caption>"); document.write("<tr>"); document.write("<th> 번호 </th> <th> 제목 </th>"); document.write("</tr>"); var book1 = "IT: 컴퓨터와 IT 기술의이해 [ 개정판 2 판 ]"; var book2 = "SNS: 소셜미디어의이해와활용 "; var book3 = "Multimedia: 멀티미디어배움터 2.0"; 3 입력 IT 입력 var n = prompt(" 주문할책수량을입력하세요.","1"); for(i = 0; i <n; i++) { var book_list = book1 + "\n" + book2 + "\n" + book3; var choice = prompt(" 책제목을선택하세요...\n" + book_list, "1"); if (choice == "IT") title = book1; else if (choice == "SNS") title = book2; else if (choice == "Multimedia") title = book3; else { prompt() 는항상문자열형식을리턴 alert(" 리스트에없는책을선택하셨습니다."); title = ""; 최종실행결과 Multimedia 입력 SNS 입력 document.write("<tr>"); document.write("<td>" + (i+1) + "</td>"); document.write("<td>" + title + "</td>"); document.write("</tr>"); 27
do-while 반복문예제... <table border="1"> <script type="text/javascript"> document.write("<tr>"); document.write("<td> Value </td>"); fib1 = 1; fib2 = 1; do { document.write("<td>"); document.write(fib2); document.write("</td>"); tmp = fib1 + fib2; fib1 = fib2; fib2 = tmp; while(fib2 < 1000) document.write("</tr>"); </script> </table>... 28
8.4 자바스크립트함수 29
자바스크립트내장함수 내장함수 eval() 문자열입력을계산하여결과를반환하는함수 parseint(), parsefloat() 문자열값을각각정수와실수로변환하는함수 var a = eval("1+2*3+4"); document.write("evaluation result of a = " + a + "<br/>"); document.write("value of \"123.45\" = " + parseint("123.45") + "<br/>"); document.write("value of \"123.45\" = " + parsefloat("123.45") + "<br/>"); 30
자바스크립트사용자정의함수 사용자정의함수 // 함수의선언규칙 function function_name ( 함수의인수들 ) { // 함수의명령문들 // 함수의사용예 function print_value(name, v) { document.write("name: " + name + ", "); document.write("value: " + v + "<br/>"); 일반프로그래밍언어의함수와의차이점 매개변수와인수의변수형 / 개수가같은지검사하지않는다 만약, 매개변수의갯수가함수의인수의갯수보다적다면인수의값은 undefined 로설정됨 31
사용자정의함수예제 function print_value(name, v) { document.write("name: "+ name + ", "); document.write("value: "+ v + "<br/>"); function add(a, b) { return (a+b); 함수의리턴값 print_value("the title of this book", "HTML5 웹프로그래밍입문 "); print_value("no name"); print_value("pi", 3.14); result1 = add(12, 34); result2 = add(56, "78"); document.write("result1 = " + result1 + "<br/>"); document.write("result2 = " + result2 + "<br/>"); document.write("11+12 = " + add(11, 12) + "<br/>"); document.write("steve + Jobs = " + add("steave", "Jobs") + "<br/>"); 32
시간지연함수 settimeout() 일정시간의지연시간후에매개변수로지정된함수를호출 지연시간은백만분의 1초단위로지정 settimeout( function_name, delay_time); 예제 ) 문서오픈후 3 초후에메시지표시,5 초후경고창 <script type="text/javascript"> function show_alert() { alert("5 seconds passed..."); function show_message() { document.write("3 seconds passed..."); settimeout(show_alert, 5000); settimeout(show_message, 3000); </script> 5 초후에경고창나타남 3 초후에메시지나타남 33