JavaScript

JavaScript

JavaScript 개요 • HTML만으로 동적페이지를 구현하는데 한계가 있다. • NetScape사에서 Sun의 Java의 기능과 결합시켜 만듬, NetScape2.0에 자바를 추가 할 때 HTML과 자바 기술을 이어줄 강력한 스크립트 언어의 필요에 의해(LiveScriptJavaScript) • 웹브라우저에서 실행된다. • 객체언어 이다. • 동적인 효과를 줄수있다. • 조건에 따라 동작이 가능하다. • HTML 문서 자체에 포함되어 실행 된다. JavaScript

JavaScript 사용방법 JavaScript 개요 • HTML 문서내<script> Tag를 이용하여 자바스크립트임을 정의 <script language=“JavaScript”> 자바스크립트 소스… </script> <script language=“JavaScript” src=“URL”> </script> 선택적으로 SRC 속성을 이용하여 수행될 스크립트를 정의 할 파일(*.js)을 따로 만들어서 지정 가능 • 반드시 <head>에 위치하는것이 아니며 필요한 부분에 기술한다. • 자바스크립트를 외부 파일에 저장한 후 src 속성을 이용하여 표현하는 경우에는 소스보기에서 자바스크립트 소스가 보이지 않는다. • 자바스트립트로 코딩 할 경우에는 대소문자를 구분한다. JavaScript

JavaScript 사용방법 JavaScript 개요 <html> <head> <title>Sample html</title> </head> <script language=“javascript”> <!— /* 주석 */ //주석 자바스크립트 내용  </script> <noscript></noscript> <body> </body> </html> JavaScript 웹브라우저가 자바스트립트를 지원하지 않을경우에 내용을 생략 자바스트립트를 지원하지 않을경우에 표시할 내용을 기술

Simple JavaScript 예 JavaScript 개요 <html> <head> <title>Sample html</title> <script language="javascript">  </script> <noscript> <body>당신의 브라우저는 자바스트립트를 지원하지 않습니다.</body> </noscript> </head> <body> <br>이건 body사이의 내용 입니다... </body> </html> JavaScript

따옴표 표시하기 JavaScript 개요 \” : 큰따옴표 \’ : 작은따옴표 \\ : 역슬래쉬 표시 <html> <head> <title>Sample html</title> <script language="javascript">  </script> </head> <body> </body> </html>

조건문 / 반복문(for) JavaScript 개요 <html> <head> <title>Sample html</title> <script language="javascript">  </script> </head> <body> </body> </html>

Function(함수) JavaScript 개요 <html> <head> <script language="javascript">  </script> </head> <body> <script language=“javascript> <!— A()  </script> </body> </html>

내장함수(alert) JavaScript 개요 <html> <head> <title>Sample html</title> <script language="javascript"> alert("여러분 \n환영합니다."); alert("이 html 페이지는 " + document.lastModified+"에 수정되었습니다."); today = new Date(); alert("오늘은 "+(today.getMonth()+1)+"월 "+(today.getDate())+"입니다."); </script> </head> <body> <a href="javascript:alert('글씨를 누르셨네요...')">눌러보세요</a> <input type="button" value="눌러주세여~" onClick="javascript:alert('버튼을 누르셨네요...')"> </body> </html>

내장함수(confirm) JavaScript 개요 <html> <head> <title>Sample html</title> <script language="javascript"> haha = confirm("18세 이상의 성인인 경우 [확인]을 Click하세요~"); if (haha == true) { location.href="http://www.daum.net"; } else { location.href="http://www.oraclejava.co.kr"; } </script> </head> <body> </body> </html>

내장함수(prompt) JavaScript 개요 <html> <head> <title>Sample html</title> <script language="javascript"> passwd = prompt("비밀번호를 입력하세요.",""); if (passwd == "1234") location.href="http://www.naver.com" else { alert("비밀번호가 맞지 않습니다."); history.go(-1); } </script> </head> <body> </body> </html>

내장함수(eval, isNaN) JavaScript 개요 <html> <head> <title>Sample html</title> <script language="javascript"> //eval함수는 수치형태로 입력된 문자열을 계산하여 주는 함수 document.write(eval("2+3")); //--- 숫자인지 확인하는 isNaN (Not a Number) x = isNaN(123456); //false y = isNaN("oracle"); //true document.write("<br>"); document.write(x, "<br>", y); </script> </head> <body> </body> </html>

Event 처리(이벤트 핸들러) JavaScript 개요 • 효과를 실행하기 위해 조건을 부여하는것을 이벤트라고 한다. 꼭 대소문자를 구분할 필요는 없다. • 이러한 이벤트를 자바스크립트에서 인식할수 있도록 사용하는 명령어를 이벤트핸들러라고 한다. • 홈페이지에 접속하면 메시지창이 나타나거나 그림에 마우스 포인터가 위치하면 그림이 바뀌는등의 효과를 줄때 사용… • OnAbort : 이미지를 읽다가 중단하는경우 실행 • OnBlur : 대상에서 포커스가 이동되었을 경우 • OnChange : 대상에 입력되어 있는 값이 바뀐경우 • OnClick, OnDblClick • OnDragDrop : 마우스를 클릭한 상태에서 이동한 경우 • OnError : 도큐멘트나 이미지 로드시 에러가 발생했을때 • OnFocus : 대상에 포커스가 들어왔을 경우

Event 처리 JavaScript 개요 • OnMouseDown, OnMouseMove, OnMouseOut • OnMouseOver, OnMouseUp • OnMove : 윈도우나 프레임을 움직였을 경우 • OnReset : 대상을 재시작 했을 경우 • OnResize : 윈도우나 프레임의 크기를 변경한 경우 • OnSelect : 입력양식의 한필드를 선택했을때 • OnSubmit : submit Button을 눌렀을때(입력양식을 서버로 보냈을때) • OnLoad, OnUnload : 대상을 열거나, 종료했을때

Event 처리(onClick, onLoad, onUnload) 예제(1) <html><head> <script language="javascript"> function answer() { alert('브라질'); } </script> </head><body onLoad="alert('방문을 환영합니다.')" onUnload="alert('안녕히 가세요~ 쥔장올림...')"> <table> <tr> <td bgcolor="F4ECF3" onClick="answer();"> 2002년도 월드컵 우승팀은? </td> </tr> <tr> <td bgcolor="F4ECF3">   <div onClick="alert('서울');"> 대한민국의 수도는? </div> </td> </tr> </table></body></html>

Event 처리 예제(2) <html> <head><title> 자바스크립트 이벤트 예제 </title></head> <script> function noChange() { alert("바꾸지 말라니까요! ") document.testform.textbox.value = "절대 바꾸지 마시오." } </script> <body onLoad="alert('자바스크립트 이벤트 예제에 오신 것을 환영합니다.')" onUnload="alert('안녕히가세요. ^^')"> <form name="testform"> 화면 배경색 바꾸기 : <INPUT type=button value="초록" onClick="document.bgColor='green'"> <INPUT type=button value="파랑" onClick="document.bgColor='blue'">

Event 처리 예제(2) • <INPUT type=button value=“흰색" onClick="document.bgColor='white'"> • <br><br> • <input name=textbox size=20 value="절대 바꾸지 마시오." onChange="noChange()"> • <br> <br> • <input NAME=button2 TYPE=button VALUE="여기에 마우스 포인터를 올려보세요." • onMouseOver="document.testform.button2.value='그럼 이렇게 바뀝니다.'" • onMouseOut="document.testform.button2.value='또 바뀌는군요.'"> • </form> • </body> • </html>

내장객체 • 내장객체란 미리 정의되어 있기에 별도의 함수로 정의하지 않아도 되는 객체 • 내장 객체를 사용하려면 객체에 new 연산자를 사용해서 정의한다. 물론 new 연산자를 사용 안하는 것도 있다. • 내장객체의 경우 대소문자를 구분한다.

내장객체(Number) • 문자열로 되어 있는 것을 숫자로 바꿈 • <script> • var i = Number("1234") +5 • alert(i); • </script>

내장객체(Date) 클라이언트의 시스템에 있는 날짜와 시간을 사용할 수 있게 해주는 객체이며 이 객체를 이용하여 날짜와 시간을 변경할 수도 있습니다. <script language="JavaScript"></ script >

내장객체(Date)예제 -요일구하기 <script> a = new Date(); b = a.getDay(); switch(b) { case 0 : c = "일"; break; case 1 : c = "월"; break; case 2 : c = "화"; break; case 3 : c = "수"; break; case 4 : c = "목"; break; case 5 : c = "금"; break; case 6 : c = "토"; break; } alert("오늘은 "+c+"요일 입니다."); </script>

내장객체(String) 문자열 객체를 만들기 위해 new 연산자를 사용할 필요가 없다. 변수에 문자열을 대입하면 자동으로 스트링객체가 생성되며, 이객체에 ‘.’연산자를 이용하여 속성이나 메소드를 이용가능하다. <script language="JavaScript">  </script>

내장객체(String) 예제 (link 사용하기) <html> <head><title>자바스크립트 내장객체</title></head> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <body> </body> </html>

내장객체(String) 메소드

내장객체(String) 메소드 사용하기 [chartAt] 첫 번째 charAt() 메소드는 매개변수로 입력된 숫자가 지정하는 곳에 있는 문자를 알려주게 된다. 아래의 예에서 charAt 메소드는 "j" 문자를 리턴하게 된다. "javascript " .charAt(0) 이때 주의할 점은 문자열의 첫 번째 문자는 0번째에 있는 문자로 취급된다는 것이다. "javascript". charAt(5) 이 예는 charAt 메소드의 매개변수로 5가 들어갔기 때문에, 6번째 문자인 "c"가 리턴될 것이다. [indexOf / iastlndexOf] indexOf와 lastIndexOf 메소드는 문자열에서 자신이 검색하기를 원하는 문자가 처음 나오는 곳의 인덱스를 리턴하는 메소드이다. indexOf는 문자열의 왼쪽에서부터 검색을 시작하고 lastIndexOf는 문자열의 오른쪽에서부터 검색을 시작한다. "javascript".indexOf("script") 위의 예는 4를 리턴하게 된다. "javascript". lastIndexOf("a") 이 예는 3을 리턴한다.

내장객체(String) 메소드 사용하기 [substring] substring 메소드는 시작위치와 마지막위치 사이에 있는 문자열을 추출하는 메소드이다. "javascript".substring(0,2) 이 예는 "jav"를 리턴한다. 매개변수가 하나만 있을 경우는 그 위치부터 끝까지 모두 추출하게 된다. "javascript".substring(4) [toLowerCase / toUpperCase] toLowerCase와 toUpperCase 메소드는 지정된 문자열의 모든 문자들을 소문자나 대문자로 만드는 메소드이다. "javascript".toLowerCase() "javascript".toUpperCase() [concat(string)] concat 메소드는 두 개의 문자열을 합하는 메소드이다. String str = "안녕하세요 " . concat("예제입니다."); 결과적으로 str에는 "안녕하세요 예제입니다."가 대입된다.

내장객체(String) 메소드 사용하기 <script language="JavaScript">  </script>

내장객체(Math) 수학에서 사용하는 특수함수나 특수 값 들을 사용 할 수 있게 한다. 형식> Math.메소드() Math.메소드(매개변수,매개변수,......) Math.속성

내장객체(Math)

내장객체(Math) 예제 <SCRIPT LANGUAGE="JavaScript"></SCRIPT>

내장객체(Array) <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

내장객체(Array) 속성 Array()객체를 이용해서 배열을 생성했을 경우 생성된 배열끼리는 모든곳에서 공유할수있는 속성을 만들어준다. length : 확보한 메모리의 개수(크기)를 리턴한다. <SCRIPT LANGUAGE="JavaScript"> gentleman = new Array(3) //배열의 크기를 3개 설정 gentleman[0] = "홍길동" gentleman[1] = "홍국영" gentleman[2] = "홍성원" //gentleman = new Array("홍길동","홍국영","홍성원")//배열데이타를 직접입력 gentleman.comment = "<h1>Array 객체의 속성</h1><p>" document.write(gentleman.comment) for(i=0;i<gentleman.length;i++) { document.write("gentleman[" + i + "] = " + gentleman[i] + "<br>"); } </SCRIPT>

내장객체(Array) 메소드 join() : 배열을 하나의 문자열로 만들어 줍니다. color.join() : "yellow , blue , white" color.join("+") : "yellow + blue + white" reverse() : 배열에 입력된 값의 순서를 바꿀 때 사용합니다. sort() : 배열의 값을 오름차순으로 정렬합니다. concat() :두개의 배열을 하나의 배열로 합하고져 할때 사용합니다. slice() : 배열에서 일부를 축출하여 새로운 배열을 만듭니다.

내장객체(Array) 메소드 예제 <script language="JavaScript"> gentleman = new Array(3) //배열의 크기를 3개 설정 gentleman[0] = "홍길동" gentleman[1] = "홍국영" gentleman[2] = "홍성원" //생성객체끼리 공유 할 수 있도록 comment 속성을 생성시킴 Array.prototype.comment = null gentleman.comment = "<h1>Array 객체의 속성</h1><p>" document.write(gentleman.comment) for(i=0;i<gentleman.length;i++) { document.write("gentleman[" + i + "] = " + gentleman[i] + "<p>"); } //join() : 하나의 문자열로 연결해 줍니다. join = gentleman.join(","); document.write(join+"<p>"); //reverse() : 배열의 순서를 바꾸고져 할때 reverse = gentleman.reverse() document.write(reverse+"<p>");

내장객체(Array) 메소드 예제 //concat() :두개의 배열을 하나의 배열로 합하고져 할때 man = Array("장홍민","홍성원") woman = Array("홍정민","안정연") concat = man.concat(woman) document.write(concat+"<p>"); //slice() : 배열에서 일부를 축출하여 새로운 배열을 만듭니다. people = Array("1부1반","1부2반","1부3반","1부4반","1부5반","1부6반","1부7반","1부8반") slice = people.slice(2,5) //2는 처음위치 처음위치를 0 부터 계산 , 5는 마지막위치 처음위치를 1 부터 계산 document.write(slice[0] + "," + slice[1] + "," + slice[2] + "," + slice[3] + "<p>") //sort() : 배열의 내용을 오름차순으로 정렬합니다. str = Array(23 , 24 , 54 , 34 , 12) sort = str.sort() document.write(sort+"<p>")

내장객체(Array) 메소드 예제 //함수를 만들어서 배열을 내림차순으로 정렬합니다. sort = str.sort(compare) document.write(sort) function compare(a , b) { if(a>b) return false; else return true; //sort해라…바꾸어라 } </script>

내장객체(Screen) 현재 동작중인 현재 동작중인 컴퓨터의 해상도, 색상수, 화면크기 등을 구해주는 내장객체 New 연산자를 사용하지 않는다. <script language="JavaScript"> document.write("화면의 실제높이 :",screen.availHeight,"<br>"); document.write("화면의 해상도 : ",screen.width+"/"+screen.height,"<br>"); document.write("화면의 색상수 :",screen.colorDepth,"<br>"); //NetScape Browser에서만 동작한다. document.write("픽셀당 비트수 :",screen.pixelDepth,"<br>"); </script>

웹브라우저 내장객체

웹브라우저 내장객체 내장객체 계층구조 현재 브라우저가 보여주고 있는 문서에 관한 여러 가지 정보뿐만 아니라 윈도우 정보, 히스토리 정보,문서가 존재하는 위치에 관한 정보 등을 모두 포함하고 있으며 객체들은 계층구조로 이루어져 있고 가장 최상위에는 window객체, 아래에는 frames, document, history, location객체가 있으며 각각의 개체들은 아래로 또 다른 객체들이 파생됩니다

웹브라우저 내장객체(Window) 1. window 객체의 특성 * status 브라우저 하단에 있는 상태바에 원하는 문자열를 출력합니다. window.status="string" * defaultStatus status에 특별한 문자열을 지정하지 않았을 때 브라우저 상태바에 출력할 문자열을 지정합니다. window.defaultStatus="string" * self window 객체의 self 특성은 자기 자신을 가리킵니다. 즉 window 객체가 됩니다. 한 윈도우 안에서 여러 개의 프레임을 사용하는 경우에 유용합니다. * parent/top parent : window 객체간에 계층구조가 생길 때 상위 객체를 말합니다. top : window 객체간에 계층구조가 생길 때 최상위 객체를 말합니다. 프레임을 가리키려면 window.frames["frame1"] 이라고 하면 됩니다.

웹브라우저 내장객체(Window) * frames frames 특성은 배열로써 현재 윈도우에 포함되어 있는 프레임들을 가리킵니다. frames[0]은 첫번째 프레임, frames[1]은 두번째 프레임을 가리킵니다. "frame1"이란 이름을 가진 * innerHeight / innerWidth 윈도우의 내용이 실제로 나타나는 영역의 높이와 너비 정보가 포함되어 있습니다. * outerHeight / outerWidth 윈도우 바깥 테두리의 높이와 너비 정보가 포함되어 있습니다. * locationbar/menubar/personalbar/scrollbar/statusbar/toolbar 각 특성의 visible 값을 true나 false로 설정함으로써 설정합니다. locationbar.visible = true menubar.visible = false

웹브라우저 내장객체(Window) 2. window 객체의 메소드 * open() 새로운 윈도우를 하나 만들어냅니다. open("URL", "window name", "윈도우 특징") 윈도우 특징 toolbar/location/directories/status/menubar/scrollbars/resizable/copyhistory width/height window1 = window.open("", "new window", "status=yes, resizable=yes, menubar=no") * close() open() 메소드를 통해 만든 윈도우를 닫는 역할을 합니다. window1.close() * alert() 정보나 경고 메시지를 전하기 위한 간단한 다이얼로그 박스입니다. 오직 정보를 일방적으로 보기만 하도록 되어 있습니다. alert("message")

웹브라우저 내장객체(Window) * confirm() 사용자로부터 대답을 받기 위한 다이얼로그 박스입니다. OK와 Cancel중에 하나를 선택받습니다. answer = comfirm("나 좋아해?") * prompt() 사용자로부터 문자열을 직접 입력받는 다이얼로그 박스입니다. prompt("message", "defalut answer") name = prompt("이름이 뭐니", "문성국") 리턴값이 문자열이기 때문에 정수나 실수를 입력받고 싶다면 리턴된 값을 parseInt()나 parseFloat() 함수를 이용해 변환시켜 줘야 합니다. * setTimeout() 지정된 시간동안 기다린 후 지정된 명령을 실행시킵니다. setTimeout("function", time) function : 지정된 시간이 지난후 실행할 함수나 명령 time : 기다릴 시간(단위:ms, 1/1000초) testTimer = setTimeout("showTime()", 1000) * clearTimeout() 앞에서 지정한 setTimeout() 메소드로 지정한 것을 해제시킵니다. clearTimeout(testTimer)

웹브라우저 내장객체(Window) * setInterval() 일정한 간격을 두고 명령을 주기적으로 실행시킵니다. setInterval("function", time) setInterval("showTime()", 1000) * back() / forward() / home() home() : 브라우저가 지정한 홈페이지로 이동시킵니다. * stop() / print() stop() : 웹 페이지로부터의 전송을 중단시킵니다. print() : 현재 윈도우에 보여주고 있는 내용을 프린터로 출력합니다.

웹브라우저 내장객체(Window) 예제1 <html> <head></head> <body onload="window.defaultStatus='defaultStatus속성을 익히자'"> <center> <a href="http://www.yahoo.co.kr" onmouseover="window.status='야후로 가보자' ;return true">야후코리아</a> || <a href="http://www.zzagn.net" onmouseover="window.status='짜근넷으로 가볼까나?' ;return true">짜근넷</a> <p><font face="돋움체" size="2">링크위에 마우스를 대면 하단상태바에 해당 링크에 대한 <br>지정된 이벤트결과인 문자열이 출력됩니다.</font> </p> <br> <input type="button" value="야후로 가자" onClick='window.open("http://www.yahoo.co.kr", "새창", "status=yes, resizable=yes, menubar=no, width=400 ,height=400“)'> </center> </body> </html>

웹브라우저 내장객체(Window) 예제2 <html><head> <title>자바스크립트 테스트</title> <script language="JavaScript"> function makeWindow() { myWin = window.open("http://www.daum.net","","toolbar=no, width=400, height=500") } function closeWindow() { myWin.close(); } </script> </head> <body> <table><tr><td> <input type="button" value="새창" onClick="makeWindow()"> <input type="button" value="종료" onClick="closeWindow()"> </td></tr></table> </body> </html>

웹브라우저 내장객체(Window) 예제3 <html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table> <tr><td>  <input type="button" value="시작페이지로 이동" onClick="window.home()"> <input type="button" value="back" onClick="window.back()"> <input type="button" value="forward" onClick="window.forward()"> </td></tr></table> </body> </html>

웹브라우저 내장객체(Window) 예제4 <html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td> <!– resizeBy는 현재 크기를 기준 --> <input type="button" value="축소하기" onClick="window.resizeBy(-50, -50)"> <input type="button" value="800*600" onClick="window.resizeTo(800, 600)"> <input type="button" value="1024*768" onClick="window.resizeTo(1024, 768)"> </td></tr></table> </body> </html>

웹브라우저 내장객체(Window) 예제5 <html><head><TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td>  <input type="button" value="오른쪽으로이동" onClick="window.moveBy(200,0)"> <input type="button" value="왼쪽상단에정렬" onClick="window.moveTo(0, 0)"> </td></tr></table> </body> </html>

웹브라우저 내장객체(Window) 예제6 <html> <head> <TITLE>자바스크립트를 이용한 시간보기</TITLE> <script language="JavaScript"> function showTime() { var today = new Date() var timestr = "현재 시간은 "+ today.getHours() timestr += "시 " + today.getMinutes()+ "분 " timestr += today.getSeconds()+ "초입니다" window.status = timestr; time_id = setTimeout("showTime()", 1000) } </script> </head> <body onLoad="showTime()"> <h3> 현재 시간이 상태바에 나타나고 있습니다. </h3> </body> </html>

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JavaScript

JavaScript

Javascript

JavaScript