HTML5 웹 프로그래밍 입문 (개정판) 8장. 자바스크립트 프로그래밍기초
목차 8.1 자바스크립트 시작하기 8.2 자바스크립트 기본 문법 8.3 자바스크립트 제어문 및 반복문 8.4 자바스크립트 함수 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. 자바스크립트 프로그래밍기초
8.1 자바스크립트 시작하기 8.1.1 자바스크립트 개요와 특징 8.1.2 자바스크립트 작성하기 8.1.3 자바스크립트 실행 및 디버깅
자바스크립트 개요 개요 및 특징 자바스크립트 연혁 동적인 웹 문서, 웹 응용프로그램을 위한 사용자 인터페이스 개발 자바 애플릿, CGI 스크립트 대체 가능 C/C++이나 자바 언어 등에 비해서 작성 및 실행이 매우 간편함 인터프리터 (interpreter) 방식 자바스크립트 연혁 LiveScript라는 이름으로 넷스케이프사에서 개발 시작 1995년에 SUN사와 공동 개발로 JavaScript이라고 명명 현재 ECMA(European Computer Manufacturers Association)에서 표준 따라서, ECMAScript라고도 불리움
객체 기반의 자바스크립트 자바 언어와 차이점 자바스크립트 자바 언어 실행 방식 웹 브라우저에서 실행 자바스크립트 자바 언어 실행 방식 웹 브라우저에서 실행 - 자바스크립트 코드를 해석하고 바로 실행 (스크립트/인터프리터 기반 언어) 자바가상머신에서 실행 - 자바 프로그램을 중간코드로 컴파일 후 변환된 object code를 실행하는 방식 (컴파일 기반 언어) 성격 객체기반(object-based) 객체지향(object-oriented) 작성 형태 HTML 파일 내에 포함되어 작성됨 별도의 자바 프로그램 파일로 작성 변수형 선언 및 타입 검사 변수의 선언이 따로 필요 없으며 타입 검사도 매우 느슨함 변수의 선언이 필요하며 변수 타입의 검사가 매우 엄격함
자바스크립트 작성하기 자바스크립트 코드는 반드시 HTML 파일 내에 포함 웹문서 내장 방식 외부 파일 참조 방식 자바스크립트 포함의 시작을 알리는 <script> 태그 1 2 3 4 5 6 7 8 9 <!-- HTML documents... --> .... <script type = "text/javascript"> <!-- // 자바스크립트 코드 // --> </script> 실제 자바스크립트 코드들이 위치하는 곳 자바스크립트 포함의 끝을 알리는 클로징 태그 <script> 요소의 src 속성의 값으로 실제 자바스크립트 파일의 경로를 지정할 수 있다. 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>
간단한 자바스크립트 예제 “Hello, welcome to the JavaScript world!”라는 문구를 출력 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> 웹브라우저에서 보여지는 문서상에 Hello, welcome to the JavaScript world!라 는 문구를 출력하는 명령문 “Hello, welcome to the JavaScript world!”라는 문구를 출력 자바스크립트 프로그래밍기초
자바스크립트 실행 및 디버깅 웹 브라우저 자체 인터프리터가 코드를 해석하고 실행 치명적 오류가 아니라면 웹브라우저는 그 오류를 무시하고 진행 개발 단계의 오류를 개발자가 확인하고 수정하는 것이 바람직 [Chrome 설정 및 관리] 버튼( )을 누른 후 [도구 더보기] [개발자 도구] [콘솔]을 실행
8.2 자바스크립트 기본 문법 8.2.1 자바스크립트 기본 변수 8.2.2 기본 연산자와 변수 형변환 8.2.3 화면 출력 및 키보드 입력
Number, String, Boolean, Undefined, Null 자바스크립트 기본 변수 기본 변수 타입 대부분의 경우 미리 선언할 필요가 없음 타입도 지정할 필요가 없다 내부적인 변수의 다섯가지 기본 형식 숫자의 표현 형태 내부적으로 숫자는 모두 실수로 저장됨 Number, String, Boolean, Undefined, Null 125 1.25 0.125 .125 125. 12.e5 1.2e-5 12E5 12e5 .12e5
자바스크립트 기본 변수 타입 자바스크립트 변수형은 typeof() 연산자를 이용해서 확인 가능 변수 값 비고 Number 정수, 실수 등 숫자 값을 가짐 숫자 (Number)와 문자열 (String) 타입간에는 숫자 값에 대해 자동 형변환을 제공한다. String 연속된 글자들로 이루어진 문자열 (공백도 가능함). 문자열의 시작과 끝은 작은 따옴표 (') 혹은 겹따옴표 (")로 지정 Boolean true 혹은 false 조건식에서 사용 Undefined undefined 만 가능 Null null 만 가능 자바스크립트 변수형은 typeof() 연산자를 이용해서 확인 가능 typeof(123) "Number"를 반환 typeof("123") "String"을 반환
문자열, 정수, 실수 등 모든 변수 타입에 대해 var로선언한다. 자바스크립트 변수 선언 변수를 사전에 선언 없이 사용하는 것이 가능 전역 변수로 사용할때는 미리 선언되어 있어야 함 별도의 변수 타입이 없으며 var 선언 한가지만 제공 변수에 값이 저장될 때 그 값에 따라 내부적으로 변수 타입 결정 문자열, 정수, 실수 등 타입 상관 없음 변수의 선언 방식: 대소문자 구분 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; // c값은 “53”이 됨, 더하기 후 문자열 붙히기 연산 d = a + b; // d값은 "3"+"2"="32", 문자열연산(Concatenation) 연산의 우선순위에서 b+3이 우선 연산의 우선순위에서 a가 우선하므로 b의 값 즉 숫자 2을 문자열 "2"로 변환한 후 a의 값 "3"과 문자열 붙이기 연산 수행
자바스크립트 기본 연산자 종류 연산자 설명 비고 사칙연산 + - * / % 더하기, 빼기, 곱하기, 나누기, 나머지 + - * / % 더하기, 빼기, 곱하기, 나누기, 나머지 내부적으로 실수 값으로 변환 후 처리 - 자바 언어와 동일한 연산 우선순위 대입 연산자 += -= *= /= %= 왼편 변수에 우측 값을 연산 후 왼편 변수에 대입 증감 연산자 ++ -- 기존 변수 값에 +1 혹은 -1 연산 수행 논리연산자 > < >= <= 왼편의 값이 크다, 작다 왼편의 값이 크거나 같다, 작거나 같다 결과값이 true 혹은 false이다. == != === !== 양편이 같다, 다르다 (값만 비교) 양편의 같다, 다르다 (값과 타입 모두 비교) ! | | && 논리부정 (NOT), 논리합 (OR), 논리곱 (AND) 연산
자바스크립트 문자열 붙이기 연산 문자열 붙이기 (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'
변수 형변환 (type conversion) 문자열 타입 숫자 타입 parseInt(문자열 변수) 혹은 parseFloat(문자열 변수) 함수 숫자 타입 문자열타입 toString(숫자 형 변수) 메소드를 이용 NOTE: 메소드(Method): 객체에 미리 정의되어 포함되어 있는 함수 숫자 10을 문자열 "10"으로 변환 후 문자열 붙이기 연산이 수행되어 결과는 문자열 "12310"이 된다. 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"); 문자열 "12310"을 숫자 12310으로 변환한다. 다시 숫자 20과 더하므로 결과값은 숫자 12330이 된다.
화면 출력 document.write()라는 화면 출력 명령어 HTML 문서에 콘텐츠를 추가하여 화면에 출력 HTML 문서는 Document라는 객체로 모델링 되어 있다 document라는 이름으로 접근 ⇒ Document 객체의 write() 메소드 var title1 = "컴퓨터와 IT기술의 이해 [개정판-2판]"; var title2 = "소셜미디어의 이해와 활용"; var title3 = "멀티미디어 배움터 2.0"; 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>"); document.write() 메소드로 삽입된 문자열은 모두 HTML 문서 안에 삽입되어 일반 HTML 문서처럼 해석된다.
대화상자로 메시지 출력 대화상자(dialog box)로 입력을 받는 세가지 방법 alert() 명령어 alert(), prompt(), confirm() alert() 명령어 사용자에게 경고사항이나 메시지를 전달 "확인" 버튼을 클릭하지 않으면 다음 자바스크립트 문장이 실행되지 않음 alert("HTML5 프로그래밍 \n웹사이트로 이동합니다.");
확인 입력 받기 confirm() 명령어 사용자에게 Yes/No 선택을 입력 => “확인”과 “취소” 버튼 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환 var answer = confirm("주문한 서적을 결재하시겠습니까?"); document.write("Answer = " + answer + "<br/>");
키보드로부터 문자열 입력 받기 prompt() 명령어 사용자로부터 키보드를 통해 문자열을 입력 “확인”을 누르면 입력된 문자열, “취소”를 누르면 null을 반환 var answer = prompt("서적 제목을 입력해 주세요.", "모바일 멀티미디어"); document.write("Answer = " + answer + "<br/>"); 사용자입력값 초기입력값
8.3 자바스크립트 제어문 및 반복문 8.3.1 자바스크립트 제어문 8.3.2 자바스크립트 반복문
자바스크립트 제어문 제어문으로 if 문과 switch 문을 제공 자바스크립트 제어문 문법 및 사용 형식 비고 if-else // 조건식의 값이 true일 때 실행될 문장 } else { // 조건식의 값이 false일 때 실행될 문장 실행될 문장이 한 개인 경우에는 { }를 생략할 수 있다. switch switch (expression) { case value_1: // expression값이 value_1일 때 실행될 문장 break; case value_2: // expression값이 value_2일 때 실행될 문장 case value_3: // expression값이 value_3일 때 실행될 문장 ... default: // case문에서 찾을 수 없을 때 실행될 문장 C/C++, 자바 언어와는 달리 (expression)에 정수형 이외의 타입도 사용할 수 있다. 예를 들면 문자열 형식의 값을 사용할 수도 있다.
if-else 문 실행 첫 화면 2를 입력한 경우 실행 결과 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 = ""; } document.write("<td>" + title + "</td>"); 2를 입력한 경우 실행 결과
switch 문 expression의 값에 일치하는 case에 있는 문장을 실행 case value_1: // expression값이 value_1일 때 실행될 문장 break; case value_2: // expression값이 value_2일 때 실행될 문장 case value_3: // expression값이 value_3일 때 실행될 문장 ... default: // case문에서 찾을 수 없을 때 실행될 문장 }
switch 문 예제 실행 첫 화면 "IT"를 입력한 경우 실행 결과 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 = ""; } document.write("<td>" + title + "</td>");
자바스크립트 반복문 while, for, do-while 문을 제공 자바스크립트 반복문 문법 및 사용 형식 비고 while // 조건식의 값이 true일 동안 반복해서 실행될 문장 } 실행될 문장의 개수가 하나인 경우에는 { }를 생략할 수 있다. for for (초기화 문장; 조건식; 증감문) { do-while do { } while (조건식)
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>
for 반복문 예제 3 입력 IT 입력 Multimedia 입력 SNS 입력 prompt()는 항상 문자열 형식을 리턴 최종 실행 결과 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"; 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 { alert("리스트에 없는 책을 선택하셨습니다."); title = ""; } document.write("<td>" + (i+1) + "</td>"); document.write("<td>" + title + "</td>"); prompt()는 항상 문자열 형식을 리턴
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>
8.4 자바스크립트 함수
자바스크립트 내장 함수 내장함수 eval() parseInt(), parseFloat() 문자열 입력을 계산하여 결과를 반환하는 함수 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/>");
자바스크립트 사용자 정의 함수 사용자 정의 함수 일반 프로그래밍 언어의 함수와의 차이점 매개변수와 인수의 변수형/개수가 같은지 검사하지 않는다 만약, 매개 변수의 갯수가 함수의 인수의 갯수보다 적다면 인수의 값은 undefined로 설정됨 // 함수의 선언 규칙 function function_name (함수의 인수들) { // 함수의 명령문 들 } // 함수의 사용 예 function print_value(name, v) { document.write("Name: " + name + ", "); document.write("Value: " + v + "<br/>");
사용자 정의 함수 예제 함수의 리턴값 두 번째 매개변수를 넘기지 않았으므로 undefined로 처리됨 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/>"); 함수의 리턴값 두 번째 매개변수를 넘기지 않았으므로 undefined로 처리됨
시간 지연 함수 setTimeout() 일정시간의 지연시간 후에 매개변수로 지정된 함수를 호출 지연시간은 백만분의 1초 단위로 지정 예제) 문서 오픈 후 3초 후에 메시지 표시, 5초 후 경고창 setTimeout( function_name, delay_time); <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> 3초 후에 메시지 나타남 5초 후에 경고창 나타남