제 1 장 자바스크립트란 ?

제 1장자바스크립트란 ?

자바스크립트(JavaScript) • 자바스크립트(JavaScript)는 기존 HTML의 정적인 특성을 보완하여 사용자의 요구에 따른 상호 작용이 가능한 웹 페이지를 작성하게 하는 대표적인 스크립트 언어이다. • 스크립트 종류 ① Javascript는 네스케이프사와 선 마이크로시스템사가 공동으로 개발한 스크립트 언어로서 넷스케이프나 익스플로러 등과 같은 모든 웹브라우저에서 동작한다. ② VBscript는 마이크로소프트사에서 비주얼베이직과 비슷한 문법 체계로 개발한 언어이며, 익스플로러 브라우저에서만 작동된다. ③ Jscript 역시 마이크로소프트사에서 Javascript에 대항하기 위해서 VBscript 단점을 보안하여 개발한 스크립트 언어이다.

자바스크립트로 할수 있는 일 ① 웹 페이지를 만들 때, 사용자의 마우스 클릭이나 키보드 조작에 의해서 발생하는 이벤트를 웹 서버에 의존하지 않고 직접 처리해 줄 수 있도록 하는 기능 ② 웹 서버에 사용자가 입력한 데이터를 전송하기 전에 사용자가 입력한 데이터를 확인하여 오류를 잡아주는 기능 ③ 사용자가 새로운 웹 페이지를 열거나 이동할 때 원하는 작업을 수행시킬 수 있는 기능 ④ 웹 페이지에 계산기나 달력 등을 만들어 주는 기능 ⑤ 웹 페이지 상의 날짜 형식을 자동으로 변경시키는 기능. ⑥ 웹브라우저 자체의 윈도우, 문서 내용, 주소 입력 부분, 상태바, 도구바 등의 객체들을 조작하는 기능 ⑦ 동적인 메뉴나 애니메이션 등을 사용할 수 있는 기능 ⑧ 사용자가 방문했던 웹 페이지를 기록해 놓은 기능 ⑨ 연결된 웹 페이지가 팝업 윈도우 내에 나타나게 하는 기능. ⑩ 마우스의 움직임에 따라 텍스트나 그래픽 이미지를 변화시키는 기능 등

자바스크립트와 자바

클라이언트 측 자바스크립트와 서버 측 자바스크립트

제 2장자바스크립트 실행방법을 통한 맛보기 프로그램 따라하기

기본적인 자바스크립트 실행 방법: <SCRIPT>태그 사용 <SCRIPT> 자바스크립트 명령들 </SCRIPT> <HTML> <HEAD> <SCRIPT>  </SCRIPT> <HEAD> <BODY> </BODY> </HTML>

<SCRIPT> 태그에 LANGUAGE 옵션 사용 • LANGUAGE 옵션을 기술하는 방법 • ① 자바스크립트를 기술하는 예 • <SCRIPT LANGUAGE="JavaScript"> • 자바스크립트 명령들 • </SCRIPT> ->만일 LANGUAGE 옵션을 생략하면 브라우저는 자동으로 JavaScript로 인식한다. • ② 자바스크립트의 버전을 기술하는 예 • <SCRIPT LANGUAGE="JavaScript1.2"> • 자바스크립트 명령들 • </SCRIPT> • ③ VB스크립트를 기술하는 예 • <SCRIPT LANGUAGE="VBScript"> • VB스크립트 명령들 • </SCRIPT>

예제 <HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> document.write "<p> VBScript 연습입니다." </SCRIPT> </HEAD> <BODY> </BODY></HTML>

자바스크립트 함수 호출 예 <HEAD> <SCRIPT> function test() { document.write("안녕하세요 ? 자바스크립트 <br>"); document.write("자바스크립트 함수 호출의 예입니다.<br>"); } </SCRIPT> <SCRIPT> test(); // test 함수 1번 호출 test(); // test 함수 2번 호출 test(); // test 함수 3번 호출 </SCRIPT> </HEAD>

자바스크립트 소스 파일을 삽입하는 방법 ① SRC(=source) 옵션에 메모장과 같은 편집기로 미리 작성된 소스 파일명을 기술한다. <SCRIPT LANGUAGE="JavaScript" SRC="소스파일명.js"> </SCRIPT> ② 이 때 주의해야 할 점은 자바스크립트 소스를 담은 파일의 확장자는 반드시 ".js"이어야 한다. [소스파일명.js]  ③ 자바스크립트 명령으로 미리 작성된 소스(source) 파일을 사용하여 자바스크립트를 실행하는 장점은 미리 작성된 소스(source) 파일을 서로 다른 여러 HTML 문서에서 삽입하여 사용할 수 있다

예제 1) 미리 작성된 test.js 파일 document.write(" 자바스크립트 소스 파일을 삽입하여 실행하는 예제로서! <p> "); document.write(" test.js 파일이 실행되는 예 입니다. ! <p> "); 2) test.js 파일을 실행시키기 위해서 <SCRIPT> 태그 내의 SRC 옵션에 test.js 파일을 명시. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" SRC="test.js"> </SCRIPT> <HEAD> <BODY> </BODY> </HTML>

<script> 태그를 사용하지 않고 이벤트 핸들러로 자바스크립트를 실행하는 방법 <TAG eventHandler="자바스크립트 명령이나 함수"> ① <INPUT type="button" value="더하기 버튼" onClick="addition()"> 사용자가 "더하기 버튼"을 클릭하여 이벤트를 발생시키면 onClick 이벤트 핸들러가 자바스크립트 명령으로 정의된 addition() 함수가 실행된다. ② <INPUT type="button" value="배경색 변경" onClick="document.bgColor ='blue'"> 사용자가 "배경색 변경" 버튼을 클릭하면 onClick 이벤트 핸들러가 자바스크립트 명령인 "document.bgcolor='blue'"를 실행시켜 문서의 배경 색상을 파란색으로 변경시킨다. ③ <body onLoad="window.defaultStatus='어서오세요';"> HTML 문서가 처음 실행될 때 자동으로 발생되는 onLoad 이벤트 핸들러가 자바스크립트 명령인 "window.defaultStatus='어서오세요';"를 실행시켜 브라우저 하단의 상태 표시줄에 "어서오세요"와 같은 초기 메시지를 출력한다.

이벤트 핸들러

onClick 이벤트 핸들러로 자바스크립트 명령을 실행한 예 <html> <body><center> <form> <INPUT type = "button" value = "배경색 변경" onClick="document.bgColor='red';"> </form></center> </body> </html>

onLoad 이벤트 핸들러로 자바스크립트 명령을 실행 <html> <body onLoad="alert('제 홈페이지를 방문한 것을 환영합니다')" > <h4> 특정 웹 페이지가 접속되었을 때 관련 HTML 문서가 실행될 때 자동으로 동작 하는 onLoad 이벤트 핸들러를 사용하는 예 </body> </html>

onUnload 이벤트 핸들러로 자바스크립트 명령을 실행 <html> <body onUnload="alert('제 홈페이지를 방문해 주셔서 감사합니다.')" > <h4> 접속한 웹 페이지를 떠날 경우에 자동으로 동작하는 onUnload 이벤트 핸 들러를 사용하는 예 </h4> <h5> 다른 사이트로 이동하거나 웹브러우저의 종료 버튼을 클릭하면 onUnload 이벤트 핸들러에 정의한 alert 대화상자가 자동으로 실행됩니다. </h5> </body> </html>

하이퍼 링크를 클릭하여 암호 확인 자바스크립트 <HTML> <HEAD> <SCRIPT language="JavaScript"> function password_check(){ passwd=prompt("암호를 입력하세요",""); if (passwd == "simmani") location.href = "http://www.simmani.com"; else alert("암호를 기억한 후 방문해 주세요 !!!"); } </SCRIPT> </HEAD> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <p><a href="javascript:password_check();"> 암호를 묻는 자바 스크립트 예제입니다.. 클릭하세요!! </a></p> <p> 암호를 묻는 대화상자에서 암호가 맞으면 심마니 검색 사이트로 이동하는 자바스크립트 예제입니다. !!</p> <p> 참고로, 정확한 암호는 simmani입니다.</p> </body> </html>

마우스 이벤트와 이미지 변경 <html> <body> <center> <a href="javascript://" onMouseOver="document.images[0].src='bird.gif';" onMouseOut="document.images[0].src='tiger.gif';"> <img src=bird.gif ></a><br><br> 이미지가 변경되는 자바스크립트의 이벤트 처리 예제입니다.. <P> 날아가는 새 이미지에 마우스를 올려놓은 후 잠시후에 <br> 마우스를 새 이미지에서 벗어나면 호랑이 이미지로 바뀝니다. <br> 다시 호랑이 이미지에 마우스를 올려놓으면 날아가는 새 이미지로 변경되고요 .. </center> </body> </html>

계산기 활용 예

제 3장자바스크립트 기본

코딩시 지켜야 할 점 영문자, 숫자, 특수 문자들을 사용하여 자바스크립트 프로그램은 내용에 따라 여러 라인의 문장으로 구성된다. ① 각 라인은 한 문장이상을 자유롭게 코딩할 수 있다. ② 한 라인에 하나 이상의 문장을 기술하고자 할 때는 문장과 문장 사이에 반드시 세미콜론(;)을 표시하여 구분 한다. ③ 만일 한 라인에 하나의 문장만을 기술하고자 할 때는 문장 끝에 세미콜론(;)을 생략해도 상관없다. ④ 프로그램 실행 순서는 특별한 제어가 없는 한 라인 순으로 처리된다.

주석(comment)달기 • 보통 한 줄의 주석을 달아줄 때는 "//"를 사용하고, 여러 줄의 주석을 달아줄 경우에는 "/*" 와 "*/"를 사용한다. • [예] • /* 여러 줄의 주석을 달아줄 경우에 사용하는 주석문입니다. */ • // 한 줄의 주석을 달아줄 때 사용하는 주석문입니다.

변수 이름을 만들 때 주의할 점 ① 자바스크립트에서 변수 이름을 만들 때 첫 자는 반드시 영문자나 “_"로 시작해야 하고, 두 번째 문자부터는 영문자, 숫자 등을 조합하여 의미있게 구성할 수 있다. [올바르게 만든 예] : sum, irum, _javaScript, lhk140 등 [잘못 만든 예] : 3sum, *irum, 140script 등 ② 대문자와 소문자를 구별해서 변수 이름을 만들어야 한다. 대소문자로 서로 다르게 구성되었기 때문에 서로 다른 변수로 취급됨을 주의해야 한다. result, Result, RESULT, REsult 등 basic, BASIC, Basic basIC 등 ③ 자바스크립트에서 특수한 용도를 가지고 미리 정의된 단어들인 if, var 등과 같은 예약어(reserved word)는 변수 이름으로 사용할 수 없다.

변수명에서 대소문자를 구별하지 않아 오류가 발생한 예 <html> <head> <script language="JavaScript"> a = 10; b = 5; RESULT = 100; result = a + b; document.write(" <h3> 변수명에 대소문자가 구별되지 않아<p>"); document.write(" 10 + 5의 결과가 100이라고 잘못 나온 예제입니다."); alert( a + " + " + b + " = " + RESULT); </script> </head> </html>

자바스크립트의 4가지 자료형(data type) • 수치 자료형 • 문자열 자료형 • 불리언 자료형 • null

수치 자료형 - 정수형 ① 10진수 정수형 0에서 9 사이의 숫자로 나타낸다. ② 8진수 정수형 8진수(octal) 정수 표현은 숫자 0으로 시작되어 0과 7사이의 숫자로 나타내며, 8진수 정수로 표현된 자료는 출력될 때 10진수로 변환되어 출력된다. Ex: 015, 067 등 ③ 16진수 정수형 16진수(hexadecimal) 정수 표현은 0x(숫자 0과 알파벳 x) 혹은 0X로 시작되어 0에서 f사이의 숫자로 나타내며, 16진수 정수로 표현된 자료는 출력될 때 10진수로 변환되어 출력된다. Ex: 0xa1, 0x6b 등

예제 <html> <head> <script language="JavaScript"> // 8진수 12는 10진수로 10이다. document.write( 012 + "<br>" ) //16진수 f는 10진수로 15이다. document.write(0xf + "<br>") </script> </head> </html> ■ 실행 결과 10 15

수치 자료형 - 실수형 ① 110.23, 3.14159, -23.432 등과 같이 소수 부분이 있는 숫자. ② 지수 형식은 실수 중에서 아주 작은 숫자나 아주 큰 숫자를 짧게 표현하기 위해 사용한다. E(exponent)는 10의 몇승을 의미한다. 120000000 = 1.2 * 108 -> 1.2E+8 -0.00000000067 = -6.7 * 10 -10-> -6.7E-10 <script language="JavaScript"> // 실수 계산에서 근사치 결과가 발생하는 경우 a = 10; b = 5.444 result = a + b; document.write("결과는 : " + result); </script> [실행 결과] 결과는 : 15.443999999999999

문자형 자료형 ① 자바스크립트에서는 예와 같이 특수 문자 이중 따옴표(" ")나 단일 따옴표(' ') 사이에 들어가는 자료를 모두 문자열로 처리한다. "대화 상자", "10 + 5", '두수', ‘123’ ② 자바스크립트는 문자열 자료임을 나타내주는 이중 따옴표(")나 단일 따옴표(')를 원래의 문자 자료로 출력하고 싶으면, 특수 문자 “\"(backslash)를 앞에 적어 준다.

예제 <html> <head> <script language="JavaScript"> // 출력 결과와 같이 이중 따옴표(")가 출력된다. document.write("\"이중 따옴표\"의 출력을 보여주는 예제입니다.<BR>"); // 출력 결과와 같이 단일 따옴표(')가 출력된다. document.write("\'단일 따옴표\'의 출력을 보여주는 예제입니다."); </script> </head> </html> [실행 결과] "이중 따옴표"의 출력을 보여주는 예제입니다. '단일 따옴표'의 출력을 보여주는 예제입니다.

불리언 자료형 ① 조건에서 참(true)과 거짓(false) 값으로 결과를 나타내는 불리언(Boolean) 자료형이 요구된다. ② 불리언 자료형은 true와 false라는 값만 사용된다. a= true, b = false

예제 <html> <head> <script language="JavaScript"> a = false; if(a) document.write("true"); else document.write("false"); </script> </head> </html> [실행 결과] false

Null ① 자바스크립트는 특별하게 null이라는 자료 값이 사용되고 있다. 이 null이라는 값은 말 그대로 아무 값도 없다는 것을 의미한다. ② 자바스크립트에서 변수를 선언할 때 var라는 예약어(reserved word)를 사용하여 변수를 선언해주는데, 만일 어떤 자료형의 값을 갖게될지 모르는 변수의 경우에는 null 값으로 초기화해 주면 안전하다.

변수를 선언하지 않고 사용하는 예 자!! 자바스크립트는 다른 프로그래밍 언어와 다르게 변수에 자료형을 선언하지 않고, 변수에 자료를 할당하기만 하면 해당하는 4가지 자료형(data type) 중의 하나인 변수로 자동 선언되어 사용된다. javaScript = 80 // javaScript는 정수형 변수이다. pi = 3.14159 // pi는 실수형 변수로 이다. name = "임 홍준" // name은 문자열 변수이다. bool = false // bool은 불리언 변수이다. empty = null // empty는 null 값을 갖는 변수이다.

var를 이용하여 변수를 선언하는 방법 var javaScript // javaScript 정수형 변수이다. var pi = 3.14159 // pi는 실수형 변수이다. var name = "임 성준" // name은 문자열 변수이다. var bool = false // bool은 불리언 변수이다. var empty = null // empty는 null 값을 갖는 변수이다. // 변수 area는 앞으로 사용하기 위해 자료형은 결정되지 않고 선언만 된 경우이다. var area; // radius는 초기 값 10을 갖는 정수형, pi는 초기 값을 3.14159로 갖는 실수형 변수로서 사용된다. var radius=10, pi = 3.14159; // area 변수는 실수와 정수들의 곱한 결과가 저장되기 때문에 실수형 변수가 된다. */ area = pi * radius * radius

자동으로 변수의 자료형 변환 : 묵시적인 형 변환 var test =10 // test는 처음에 정수형 변수이다. test = "문자열로 변환" // 이때는 문자열 변수로 변환된다. test = true // 이때는 불리언 변수로 변환된다.

자동으로 변수의 자료형 변환 : 묵시적인 형 변환 <script language="JavaScript"> jungsu = 5; silsu = 10.5;bool = truestring = "문자열"; /*정수 변수인 jungsu는 실수 변수인 silsu와 더하여져 자동으로 실수형 변수로 변환된다. */ jungsu = jungsu + silsu; /*실수 변수인 silsu는 문자열 변수와 실수 변수 그리고 불리언 변수를 "+" 기호에 의해 결합시키면 문자열 변수로 자동 형 변환된다. */ silsu = string + silsu + bool; document.write( jungsu + "<br>"); document.write( silsu ); </script> [실행 결과] 15.5 문자열10.5true

document.write() 명령에 의해 출력하기 1 a = 10; b = 5; result = a + b; document.write( a + " 과 " + b + "를 더한 결과는 " + result + " 이다."); [실행 결과] 10 과 5를 더한 결과는 15 이다.

document.write() 명령에 의해 출력하기 2 주의할 점은 document.write( a + b); 문장과 같이 a와 b가 수치 변수라면 수치 변수들 사이에 "+"가 사용되면 원래의 더하기 연산이 수행된 결과가 예와 같이 15가 출력된다. a = 10; b = 5;document.write( a + b ); [실행 결과]15 그러나 예와 같이 문자열 상수 다음의 수치 변수 a가 문자열로 자동 형 변환되어 "결과 :10"이 되고, 그 다음 수치 값 5도 문자열로 변환되어 실행 결과처럼 사용자의 의도와는 다르게 "결과 :105"라고 출력된다. a = 10; b = 5;document.write( "결과 :" + a + b ); [실행 결과]결과 :105

document.write() 명령에 의해 출력하기 3 ⑧ document.write() 명령으로 출력할 때 "("와 ")"사이에 <h3>, <hr> <p>, <br> 등 HTML 태그를 문자열 상수처럼 취급하여 HTML 태그의 기능을 활용하여 다양한 출력을 할 수 있다. <html> <head> <script language="JavaScript"> a = 10; b = 5; result = a + b; document.write( "<h2>" + a + " 과 " + b + "를 더한 결과는<br> " + "<h1>" + result + " 이다."); </script> </head> </html>

내장 함수 alert()에 의해 출력하기 1 ① alert() 내장 함수는 메시지와 확인 버튼만으로 구성되는 대화상자로서 경고나 인사말 등과 같은 사용자의 요구를 받을 필요가 없는 메시지를 출력하는 경우에 주로 사용되는데 document.write() 명령처럼 프로그램에서 사용하는 변수나 상수들을 출력하는데 이용한다. a = 10; b = 5; result = a + b; alert( "두수 " + a + " 와 " + b + "를 더한 결과는 " + result + " 이다");

내장 함수 alert()에 의해 출력하기 2 ② alert() 함수에서 "("와 ")"사이는 출력될 메시지를 기술하는 부분으로 document.write() 명령에서 설명한 것과 동일하게 출력될 변수나 상수들 사이에 "+"로 구분하면서 출력시키면 된다. ③ document.write() 명령과의 차이점은 alert() 함수에서는 "("와 ")"사이에 <h3>, <hr> <p>, <br> 등 HTML 태그를 사용할 수 없다는 점이다. 만일 사용하면 실행 결과처럼 HTML 태그가 문자열로 취급되어 그대로 출력된다.

증감 연산자와 산술 연산자 그리고 우선순위

증감 연산자 사용 예 1) 증가 연산자 : ++ ① i++는 i = i + 1과 동일 sum = sum + i++; // sum = sum + i를 먼저 수행하고 난 후에 i = i + 1을 수행 ② ++i는 i = i + 1과 동일 // i = i + 1을 먼저 수행하고 난 후에 sum = sum + i를 수행sum = sum + ++i; 2) 감소 연산자 : --① i--는 i = i - 1과 동일 sum = sum + i--; // sum = sum + i를 먼저 수행하고 난 후에 i = i - 1을 수행② --i는 i = i - 1과 동일sum = sum + --i; // i = i - 1을 먼저 수행하고 난 후에 sum = sum + i를 수행

수치 식의 계산 순서 수치 식의 계산 순서는 연산자 우선순위에 의존하고 만일 같은 우선순위의 연산자들이 여러개 표현되었을 때는 수학에서와 같이 왼쪽에서 오른쪽 순으로 처리한다. 그리고 괄호를 사용하여 연산자들의 실행 순서를 변경할 수 있다. <html> <head> <script language="JavaScript"> document.write(4 + 6 % 3 + 5.8 / 2 + "<br>"); x = 15 y = 5 document.write( 16 / ++x + y % 3) </script> </head> </html> [실행 결과] 6.9 3

할당 연산자의 또다른 표현 방법들 ① i = i + j와 i += j는 동일하다. ② i = i - j와 i -= j는 동일하다. ③ i = i * j와 i *= j는 동일하다. ④ i = i / j와 i /= j는 동일하다. ⑤ i = i * (3 + j)와 i *= 3 + j는 동일하다. ⑥ i = j = k = 1 : i, j, k에 모두 1이 할당된다. ⑦ j = i = (i *3 ) : i * 3의 값을 i에 할당한 후 그 값을 다시 j에 할당한다. ⑧ i += j *= 3 : j = j * 3을 수행한 후 i = i + j를 연산한다.

문자열 식(string expression) 문자열 식에 사용되는 연산자는 두개의 문자열을 하나의 문자열로 결합시켜 주는 "+" 연산자(concatenation operator) 뿐이다. <html> <head> <script language="JavaScript"> area_code = "0331"; local_number =" 200-1234"; pone_number = area_code + "-" + local_number; document.write( "전화 번호 --> " + pone_number); </script> </head> </html> [실행 결과] 전화 번호 --> 0331-200-1234

관계식(relational expression)

수치 대소 비교 관계식 산술 연산자들의 우선순위가 관계 연산자들의 우선순위 보다 높으므로 먼저 계산된다. A = 10 B = 20 C = 4 document.write( A + B < C * 10) // true가 출력된다.

제 1 장 자바스크립트란 ?

제 1 장 자바스크립트란 ?

Presentation Transcript