JavaScript.

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”> 선택적으로 SRC 속성을 이용하여 수행될 스크립트를 정의 할 파일(*.js)을 따로 만들어서 지정 가능 반드시 <head>에 위치하는것이 아니며 필요한 부분에 기술한다. 자바스크립트를 외부 파일에 저장한 후 src 속성을 이용하여 표현하는 경우에는 소스보기에서 자바스크립트 소스가 보이지 않는다. 자바스트립트로 코딩 할 경우에는 대소문자를 구분한다. JavaScript

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

JavaScript Simple 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) <html> <head>
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()  </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=" } else { location.href=" </script> </head> <body> </body> </html>

내장함수(prompt) JavaScript 개요 <html> <head>
<title>Sample html</title> <script language="javascript"> passwd = prompt("비밀번호를 입력하세요.",""); if (passwd == "1234") location.href=" 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 : 대상에 포커스가 들어왔을 경우

OnMouseDown, OnMouseMove, OnMouseOut OnMouseOver, OnMouseUp
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> <td bgcolor="F4ECF3">   <div onClick="alert('서울');"> 대한민국의 수도는? </div> </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 연산자를 사용 안하는 것도 있다. 내장객체의 경우 대소문자를 구분한다.

문자열로 되어 있는 것을 숫자로 바꿈 <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) 메소드 메소드 기능 charAt(index) 지정된 위치에서 문자 찾기 indexOf(string)
지정된 문자의 위치 찾기(왼쪽부터 검색) lastIndexOf(string) 지정된 문자의 위치 찾기(오른쪽부터 검색) subString(index1, index2) 지정된 위치에 있는 문자열 추출 slice()도 동일하다. toLowerCase() 소문자로 만들기 toUpperCase() 대문자로 만들기 concat(string) 두 문자열을 하나로 붙이기 slice(start_index, end_index) 문자열 일부 추출하기 split([분리자],[개수]) 문자열 분리시키기 substr(start_index, length)

내장객체(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]
"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) 메소드 설명 abs(x) x의 절대값을 반환 acos(x) arc cos asin(x) arc sin
atan(x) arc tan atan2(x,y) ceil(x) x 값의 소수 부분을 올림 cos(x) cos exp(x) 지수함수 floor(x) x 값의 소수 부분을 버림 log(x) log max(x,y) 최대값 min(x,y) 최소값 pow(x,y) Xy random() 난수를 발생 솔라리스에만 적용 round(x) x를 반올림 sin(x) sin sqrt(x) 제곱근 tan(x) tan

내장객체(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>

join() : 배열을 하나의 문자열로 만들어 줍니다. color.join() : "yellow , blue , white"
내장객체(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>

현재 동작중인 현재 동작중인 컴퓨터의 해상도, 색상수, 화면크기 등을 구해주는 내장객체 New 연산자를 사용하지 않는다.
내장객체(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[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=" onmouseover="window.status='야후로 가보자' ;return true">야후코리아</a> || <a href=" onmouseover="window.status='짜근넷으로 가볼까나?' ;return true">짜근넷</a> <p><font face="돋움체" size="2">링크위에 마우스를 대면 하단상태바에 해당 링크에 대한 <br>지정된 이벤트결과인 문자열이 출력됩니다.</font> </p> <br> <input type="button" value="야후로 가자" onClick='window.open(" "새창", "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(" 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>

<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>

<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>

웹브라우저 내장객체(document) 1. document 객체의 특성 * title HTML문서의 <title>..</title> 태그 속에 들어있는 문서의 제목을 문자열 형태로 포함하고 있습니다. document.write(document.title) * location 현재 브라우저에 나타나 있는 문서의 URL 주소를 문자열 형태로 포함하고 있습니다. location은 특성 정보이기 때문에 오직 하나의 정보를 하나의 형태로 제공합니다. window.location 객체는 객체이기 때문에 여러 가지 특성을 가집니다. document.write(document.location) * lastModified 문서가 가장 최근에 변경된 날짜에 대한 정보를 문자열 형태로 포함하고 있습니다. document.write(document.lastModified) * referrer 링크를 통해 다른 문서를 읽어들였을 때 그 링크가 있던 문서의 URL 주소를 문자열 형태로 포함하고 있습니다. window.location = document.referrer //링크가 있는 문서로 되돌아간다 * bgColor / fgColor / linkColor / alinkColor / vlinkColor 이 특성들은 모두 <body> 택에서 설정되는 성질들입니다. 각각의 특성들은 각각의 설정값들을 문자열의 형태로 포함하고 있고 이 특성들을 수정하게 되면 그 즉시 브라우저 화면에 결과가 반영됩니다. document.bgColor = "white"

웹브라우저 내장객체(document) * anchors HTML 문서에 들어있는 모든 표식(anchor, <a name="">로 지정)에 대한 정보를 배열로 포함하고 있습니다. 내장객체인 String객체의 anchor과 혼동하지 말길... 몇 개의 표식이 있는지 ".length"를 통해 알 수 있습니다. 인덱스를 이용해서 각각 접근이 가능합니다. document.write(document.anchors.length) * links HTML 문서에 들어있는 모든 링크(link, <a href="">로 지정)에 대한 정보를 배열로 포함하고 있습니다. ".length"로 몇 개의 링크가 있는 지 알 수 있습니다. 인덱스를 사용해서 각각 접근이 가능합니다. document.write(document.links.length) * forms HTML 문서에 들어있는 모든 입력 양식(<form>..</form>)에 관한 정보를 배열로 포함하고 있습니다. ".length"를 통해 총 입력 양식의 수를 알 수 있고 인덱스를 통해 각각 접근할 수 있습니다. document.write(document.forms.length) * images / applets / embeds 각각 문서 안에 포함되어 있는 이미지, 자바 애플릿, 플러그인들에 대한 정보를 배열로 포함하고 있습니다. ".length"를 통해 모두 몇 개인지 알 수 있고 인덱스로 각각 접근할 수 있습니다. * layers 문서 안에 포함되어 있는 레이어들에 대한 정보를 배열로 포함하고 있습니다.

웹브라우저 내장객체(document) 2. document 객체의 메소드 * open() 지정된 윈도우에 데이터를 보낼 준비를 할때 사용합니다. window 객체의 open() 메소드와는 다릅니다. * close() 지정된 윈도우에 데이터를 모두 보냈다는 것을 알립니다. * clear() 브라우저에 나타난 문서를 지워주는 역할을 합니다. close() 메소드로 확실히 닫혀진 문서에 사용해야 할 것입니다. * write() / writeln() 지정된 문서에 데이터를 출력하는 기능을 가집니다. writeln() 은 문자열을 출력할 뿐 아니라 줄도 바꾸어 줍니다. document.write("message") document.writeln("message")

웹브라우저 내장객체(document) 예제
<html> <head><title>document 내장객체</title></head> <body> <script LANGUAGE="JavaScript"> document.write("문서의 제목 : " + document.title + "<BR>") document.write("문서의 URL : " + document.location + "<BR>") theDay = new Date(document.lastModified) year = theDay.getYear() month = theDay.getMonth() + 1 day = theDay.getDate() document.write("갱신 날짜 : " + year + "년 " + month + "월 " + day + "일") </script> </body> </html>

웹브라우저 내장객체(location) Location 객체 Property href 문서의 URL주소 host
hostname URL 주소의 호스트 이름 protocal 프로토콜 종류 pathname 디렉토리 위치 port 포트 번호 hash 표식 이름 search 검색엔진을 호출할 때 사용하는 형식 Method reload() 브라우저의 현재 문서를 다시 읽도록 만드는 메소드 replace() 현재 문서를 특정 URL에 있는 문서로 바꿔치는 메소드 Event handler 없음

웹브라우저 내장객체(location) 예제
Location 객체의 Property 예) URL주소 : 일 경우 href : protocal : http: host : hostname: port : 80 pathname: /html/pc/mypc.html hash : #doc1

웹브라우저 내장객체(location) 예제
<html> <head><title>Location 객체</title> <script language="JavaScript"> function showlocation(){ var out="location.href : " + location.href + "\n" + "location.protocol : "+ location.protocol + "\n" + "location.host : " + location.host + "\n" + "location.hostname : "+ location.hostname + "\n" + "location.pathname : " + location.pathname alert(out) } </script> </head> <body> <input type="button" value="Reload" onClick="javascript:location.reload();"> <input type="button" value="show Location" onClick="showlocation()"> </body> </html>

웹브라우저 내장객체(document/link)
HTML 문서 안에 삽입되어 있는 <a href ~>나 <area href~> 태그정보를 제공 <a href ~>나 <area href~> 태그 명령어를 입력되어 있는대로 배열번호로 설정하여 위치를 지정 문서에 삽입된 하이퍼링크의 수 및 정보를 알려준다.

웹브라우저 내장객체(document/link)
<html> <head><title>Location 객체</title> </head> <body> <a href=" <a href=" <script language="JavaScript"> document.write("링크수는 ",document.links.length,"개 입니다...<br>") for(i=0;i<document.links.length;i++) { document.write(document.links[i],"<br>"); } </script> </body> </html>

웹브라우저 내장객체(document/anchor)
HTML 문서에 들어 있는 모든 표식(anchor, <A NAME="">로 지정)에 대한 정보를 제공하는 객체로서 Document 객체로부터 파생된다. 형식: document.anchor[0] document.anchor[n] 웹 문서에 들어 있는 모든 표식에 대한 정보를 제공 즉 <A NAME=“”>들에 대한 정보 객체의 특성이나 메소드나 이벤트 핸들러가 하나도 없음 단지 배열을 이용하여 길이만 계산 document.anchors.length

웹브라우저 내장객체(navigator)
내장객체 계층구조에서 어떠한 객체와도 포함되지 않고 독립적으로 사용하는 내장객체, 웹브라우저의 정보를 파악할때 용이하다. 속성 의미 appName 사용자가 사용하고 있는 웹 브라우저의 이름 appVersion 사용자가 사용하고 있는 웹 브라우저의 버전과 브라우저가 만들어진 운영 체제, 브라우저가 지원하는 국가 코드 appCodeName 특정 브라우저에 대한 제조업자의 인-하우스 개발 코드 이름 language language version mimeTypes 현재 브라우저에서 지원하고 있는 MIME 타입 platform operating system plugins 현재 브라우저에 설치된 플러그인의 종류 userAgent appCodeName과 appVersion 속성의 결합, 브라우저의 능력 식별 가능

웹브라우저 내장객체(navigator) 예제1
<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

웹브라우저 내장객체(navigator) 예제2
<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

웹브라우저 내장객체(history) 브라우져의 history 리스트 정보를 저장해 두는 객체로 이 객체를 이용해서 지나왔던 페이지로 이동할 수 있습니다. 리스트 속의 URL은 JavaScript로 알아 낼 수 없습니다. Forward는 이전에 열었던 페이지에서 다시 앞으로 돌아감 속성 의미 current current history entry의 URL length 히스토리 리스트에 포함되어 있는 URL 주소의 수 next next history entry의 URL previous previous history entry의 URL 메소드 의미 back() 이전(뒤로) 문서로 이동 forward() 이전(앞으로) 문서로이동 go() 현재의 URL에 대한 타겟 URL에 해당하는 정수값. 0은 현재페이지, -값은 뒷페이지, +값은 앞페이지

웹브라우저 내장객체(history) 예제
<html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td>  <input type="button" value="돌아가기" onClick="history.back()"> <input type="button" value="돌아가기(-2)" onClick="history.go(-2)"> <input type="button" value="앞으로가기" onClick="history.forward()"> </td></tr></table> </body> </html>

입력양식

form 객체 특성 설명 action : <FORM>태그의 ACTION 속성값 target
method encoding elements 메소드 submit() reset() 이벤트 핸들러 onSubmit onReset 설명 : <FORM>태그의 ACTION 속성값 : <FORM>태그의 TARGET 속성값 : <FORM>태그의 METHOD 속성값 : <FORM>태그의 ENCTYPE 속성값 : <FORM>태그 안에 있는 모든 입력 양식을 배열로 저장 : 입력된 데이터를 서버에 보내기 위한 메소드 : 입력 양식을 리셋시키는 메소드 : Submit 버튼이 눌렸을 때 : 리셋 버튼을 눌렀을 때

form 객체 예제1 <html>
<head><script language="JavaScript"> function checkText() { if (document.myform.irum.value != "") //if(document.myform.elements[0].value != "") alert("이름은 " + document.myform.elements[0].value + "입니다.") else alert("이름을 입력하지 않으셨습니다.") } </script></head> <body> <form name="myform"> 이름 : <input type="text" name="irum"> <input type="button" value="입력 확인" onClick="checkText()"> </form> </body> </html>

form 객체 예제2(1) <html>
<head><script language="JavaScript"> function checkText() { var str if(document.myform.elements[0].value != "") { str = "이름은 " + document.myform.elements[0].value + "입니다.\n" str += "데이타를 보냈습니다." document.myform.submit() alert(str) //이젠 save.asp에서 이름을 받아서 DB에 저장하면 되겟죠^^. //request.form("irum") } else alert("이름을 입력하지 않아서 데이터를 보내지 않았습니다.")

form 객체 예제2(2) </script></head> <body>
<H1> Form 예제 </h1><br> <form name="myform" action="save.asp" method=get> 이름 : <input type="text" name="irum"> <input type="button" value="입력 확인 및 보내기" onClick="checkText()"> </form> </body> </html>

form 객체 예제3 <html> <head>
<script language="JavaScript"> function beforeSubmit() { return confirm("데이타를 정말로 보낼까요?") } </script> </head> <body> <form name="myform" action="save.asp" onSubmit="beforeSubmit()"> 이름 : <input type="text" name="irum"> <input type="submit"> </form> </BODY> </html>

text 객체 특성 name value defaultValue type 메소드 focus() blur() select()
이벤트 핸들러 onFocus onBlur onSelect onChange 설명 : 텍스트 입력 양식의 이름 : 텍스트 입력 양식에 입력한 값 : 처음 <INPUT> 태그의 VALUE에 입력했던 값 : <INPUT>태그의 TYPE에 입력된 값(“text”) : 텍스트 입력 필드 안에 커서 넣기 : 텍스트 입력 필드 안에서 커서 제거하기 : 텍스트 입력 필드 안에 있는 모든 값 선택하기 : 마우스나 탭으로 커서가 입력 필드 안에 들어갔을 때 : 마우스나 탭으로 커서가 입력 필드에서 나갔을 때 : 마우스로 입력 필드의 문자열을 선택했을 때 : 텍스트 입력 양식의 값을 바꿨을 때

<script language="JavaScript"> function makeUpper(form) {
text 객체 예제1(1) <html> <head> <script language="JavaScript"> function makeUpper(form) { var str = form.input.value form.input.value = str.toUpperCase() } </script> </head>

text 객체 예제1(2) <body> <h1> text 예제 </h1><br> <form name="myform1"> Input 1: <input type="text" name="input" value="" onChange="makeUpper(this.form)"> </form> <form name="myform2"> Input 2: <input type="text" name="input" value="" </body> </html>

text 객체 예제2(1) – text defaultvalue사용
<html> <head><title>default value 사용예제</title> <script language="JavaScript"> function makeUpper(field) { var str = field.value field.value = str.toUpperCase() } function resetValue(form) { form.input1.value = form.input1.defaultValue form.input2.value = form.input2.defaultValue </script>

text 객체 예제2(2) – text defaultvalue 사용
</head> <body> <H1> Form 예제 </H1> <BR> <form name="myform1"> Input 1: <input type="text" name="input1" value="test" onChange="makeUpper(this)"><BR> Input 2: <input type="text" name="input2" value="test" onChange="makeUpper(this)"><P> <input type="button" value="Reset" onClick="resetValue(this.form)"> </form> </body> </html>

text 객체 예제3(onfocus 예제) <html>
<head><script language="JavaScript"> function showStatus(str) { window.status=str } </script></head> <body><form name="myform1"> 이름 : <input type="text" onFocus="showStatus('이름을 입력하시오')"> <br> 나이 : <input type="text" onFocus="showStatus('나이을 입력하시오')"> <br> 주소 : <input type="text" onFocus="showStatus('주소을 입력하시오')"> </form></body> </html>

textarea 객체 특성 설명 name : 텍스트 영역의 이름 value : 텍스트 영역에 입력한 값 defaultValue
type 메소드 focus() blur() select() 설명 : 텍스트 영역의 이름 : 텍스트 영역에 입력한 값 : 처음 <TEXTAREA> </TEXTAREA> 사이에 들어간 글 : <INPUT>태그의 TYPE에 입력된 값(“textarea”) : 텍스트 영역 안에 커서 넣기 : 텍스트 영역 안에서 커서 제거하기 : 텍스트 영역 안에 있는 모든 값 선택하기

textarea 객체 이벤트 핸들러 설명 onFocus : 마우스나 탭으로 커서가 텍스트 영역 안에 들어갔을 때 onBlur
onSelect onChange onKeyDown onKeyPress onKeyUp 설명 : 마우스나 탭으로 커서가 텍스트 영역 안에 들어갔을 때 : 마우스나 탭으로 커서가 텍스트 영역에서 나갔을 때 : 마우스로 텍스트 영역에서 글을 선택했을 때 : 텍스트 영역의 값을 바꿨을 때 : 입력 필드에서 키를 눌렀을 때

textarea 객체 예제 <html>
<head><script language="JavaScript"> function check(form) { alert(form.mail.value) } </script></head> <body> <form name="myform1"> <textarea name="mail" rows=10 cols=65> 여기는 편지 내용을 쓰는 곳입니다. </textarea> <P> <INPUT type="button" value="확인" onClick="check(this.form)"> </form></body> </html>

password 객체 특성 name value defaultValue type 메소드 focus() blur()
select() 이벤트 핸들러 설명 : 암호 입력 양식의 이름 : 암호 입력 양식에 입력한 값 : 처음 VALUE 속성에 설정된 문자열 : <INPUT>태그의 TYPE에 입력된 값(“passwd”) : 암호 입력 양식 안에 커서 넣기 : 암호 입력 양식 안에서 커서 제거하기 : 암호 입력 양식 안에 있는 모든 값 선택하기 없음

hidden 객체 특성 name value type 메소드 click() 이벤트 핸들러 onClick onMouseDown
onMouseUp 설명 : 버튼 입력 양식의 이름 : 버튼 입력 양식에 입력한 값 : <INPUT>태그의 TYPE에 입력된 값(“button”) : 버튼을 클릭시키는 메소드 : 버튼을 클릭할 때 : 마우스 버튼을 눌렀을 때 : 마우스 버튼을 놓았을 때

button 객체 특성 name value type 메소드 click() 이벤트 핸들러 onClick onMouseDown
onMouseUp 설명 : 버튼 입력 양식의 이름 : 버튼 입력 양식에 입력한 값 : <INPUT>태그의 TYPE에 입력된 값(“button”) : 버튼을 클릭시키는 메소드 : 버튼을 클릭할 때 : 마우스 버튼을 눌렀을 때 : 마우스 버튼을 놓았을 때

submit 객체 특성 name value type 메소드 click() 이벤트 핸들러 onClick 설명
: <INPUT>태그의 TYPE에 입력된 값(“submit”) : Submit 버튼을 클릭시키는 메소드 : Submit 버튼을 클릭할 때

reset 객체 특성 name value type 메소드 click() 이벤트 핸들러 onClick 설명
: 리셋 버튼 입력 양식의 이름 : 리셋 버튼 입력 양식에 입력한 값 : <INPUT>태그의 TYPE에 입력된 값(“reset”) : 리셋 버튼을 클릭시키는 메소드 : 리셋 버튼을 클릭할 때

checkbox 객체 특성 name value checked defaultChecked type 메소드 click()
이벤트 핸들러 onClick 설명 : 체크 박스의 이름 : 체크 박스에 할당하고 싶은 값 : 체크 박스가 체크되었는지의 여부 : 체크 박스가 처음 체크되었는지의 여부 <INPUT>태그의 TYPE에 입력된 값(“checkbox”) : 체크 박스를 클릭시키는 메소드 : 체크 박스를 클릭할 때

checkbox 객체 예제(checked 이용)
<html> <HEAD><SCRIPT LANGUAGE="JavaScript"> function findChecked(form) { var str = "" if(form.drivea.checked == true) str += "A 드라이브를 선택했습니다. \n" if(form.driveb.checked == true) str += "B 드라이브를 선택했습니다. \n" if(form.drivec.checked == true) str += "C 드라이브를 선택했습니다. \n" if(form.drived.checked == true) str += "D 드라이브를 선택했습니다. \n" alert(str) } </SCRIPT></HEAD>

checkbox 객체 예제(checked 이용)
<BODY> <H1> 드라이브 선택 </H1><P> <FORM ACTION="save.asp"> <INPUT TYPE="checkbox" NAME="drivea" VALUE="A_Drive"> A 드라이브<BR> <INPUT TYPE="checkbox" NAME="driveb" VALUE="B_Drive"> B 드라이브<BR> <INPUT TYPE="checkbox" NAME="drivec" VALUE="C_Drive" CHECKED> C 드라이브<BR> <INPUT TYPE="checkbox" NAME="drived" VALUE="D_Drive"> D 드라이브<P> <INPUT TYPE="button" VALUE="Check” onClick="findChecked(this.form)"> </FORM> </BODY> </html>

checkbox 객체 예제(onClick 이용)
<html> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function clickCheck(box) { if(box.checked == true) window.status = box.value + " 드라이브를 체크했습니다." else window.status = box.value + " 드라이브의 체크를 해제했습니다." } </SCRIPT> </HEAD> <BODY>

checkbox 객체 예제(onClick 이용)
<FORM ACTION="nothingcgi"> <H1> 드라이브 선택 </H1><P> <INPUT TYPE="checkbox" NAME="drivea" VALUE="A" onClick="clickCheck(this)"> A 드라이브<BR> <INPUT TYPE="checkbox" NAME="driveb" VALUE="B" onClick="clickCheck(this)"> B 드라이브<BR> <INPUT TYPE="checkbox" NAME="drivec" VALUE="C" onClick="clickCheck(this)" CHECKED> C 드라이브 <BR> <INPUT TYPE="checkbox" NAME="drived" VALUE="D" onClick="clickCheck(this)"> D 드라이브<P> </FORM></BODY></html>

radio 객체 특성 name value length checked defaultChecked type 메소드 click()
이벤트 핸들러 onClick 설명 : 라디오 버튼의 이름 : 라디오 버튼에 할당하고 싶은 값 : 그룹 안에 포함되어 있는 라디오 버튼의 수 : 라디오 버튼이 체크되었는지의 여부 : 라디오 버튼이 처음 체크되었는지의 여부 <INPUT>태그의 TYPE에 입력된 값(“radio”) : 라디오 버튼을 클릭시키는 메소드 : 라디오 버튼을 클릭할 때

특성 name value length checked defaultChecked type 메소드 click() 이벤트 핸들러
radio 객체 특성 name value length checked defaultChecked type 메소드 click() 이벤트 핸들러 onClick 설명 : 라디오 버튼의 이름 : 라디오 버튼에 할당하고 싶은 값 : 그룹 안에 포함되어 있는 라디오 버튼의 수 : 라디오 버튼이 체크되었는지의 여부 : 라디오 버튼이 처음 체크되었는지의 여부 <INPUT>태그의 TYPE에 입력된 값(“radio”) : 라디오 버튼을 클릭시키는 메소드 : 라디오 버튼을 클릭할 때

radio 객체 예제(length및 checked 이용)
<html> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function findSelected(form) { for(var i = 0; i < form.drive.length; i++) { if(form.drive[i].checked == true) { alert(form.drive[i].value + " 드라이브가 선택되었습니다.") } </SCRIPT> </HEAD>

radio 객체 예제(length및 checked 이용)
<BODY> <FORM ACTION="nothingcgi"> <H1> 드라이브 선택 </H1> <P> <INPUT TYPE="radio" NAME="drive" VALUE="A" CHECKED> A 드라이브<BR> <INPUT TYPE="radio" NAME="drive" VALUE="B"> B 드라이브<BR> <INPUT TYPE="radio" NAME="drive" VALUE="C"> C 드라이브<BR> <INPUT TYPE="radio" NAME="drive" VALUE="D"> D 드라이브<P> <INPUT TYPE="button" VALUE="Check" onClick="findSelected(this.form)"> </FORM> </BODY> </html>

radio 객체 예제(onClick 이용)
<html> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function change(rad) { document.bgColor = rad.value } </SCRIPT> </HEAD> <BODY> <H1> 배경색 바꾸기 </H1><P>

radio 객체 예제(onClick 이용)
<FORM ACTION="save.asp"> <INPUT TYPE="radio" NAME="color" VALUE="white" onClick="change(this)"> 흰색<BR> VALUE="black" onClick="change(this)"> 검은색<BR> VALUE="green" onClick="change(this)" CHECKED> 녹색<BR> VALUE="blue" onClick="change(this)"> 파란색<P> </FORM> </BODY> </html>

select 객체 특성 name length selectedIndex options options[i].index
options[i].text options[i].value options[i].selected options[i].defaultSelected options[i].prototype Type 이벤트핸들러 onChage 설명 : 리스트 박스의 이름 : 리스트 박스에 포함되어 있는 목록의 수 : 리스트 박스에서 현재 선택된 목록의 인덱스 : 리스트 박스에 포함된 목록 정보의 배열 : 각 목록의 인덱스 : 각 목록의 문자열 : 각 목록에 할당되어 있는 값 : 각 목록이 현재 선택되어 있는지의 여부 : 각 목록이 처음 선택되어 있는지의 여부 : 옵션 메뉴에 새로운 특성을 만들기 위한 것 : <INPUT>태그의 TYPE에 입력된 값(“select”)

select 객체 예제(selectedindex 이용)
<html><HEAD> <SCRIPT LANGUAGE="JavaScript"> function selectCom(form) { alert("당신은 " + form.com.selectedIndex + "번째를 선택했습니다.") } </SCRIPT></HEAD> <BODY><FORM> <H1> 컴퓨터 선택 </H1><P> <SELECT NAME="com" SIZE=3> <OPTION VALUE="XT" SELECTED> XT 컴퓨터 <OPTION VALUE="AT"> AT 컴퓨터 <OPTION VALUE="386"> 386 컴퓨터 <OPTION VALUE="486"> 486 컴퓨터 <OPTION VALUE="펜티엄"> 펜티엄 컴퓨터 </SELECT><P> <INPUT TYPE="button" VALUE="선택 결과" onClick="selectCom(this.form)"> </FORM></BODY></html>

select 객체 예제(options[i].selected 이용)
<html><HEAD> <SCRIPT LANGUAGE="JavaScript"> function selectCom(form) { var str = "선택 : " for(i = 0; i < form.com.length; i++) { if(form.com.options[i].selected == true) { str += form.com.options[i].text + "\n" } alert(str) </SCRIPT> </HEAD>

select 객체 예제(options[i].selected 이용)
<BODY> <FORM> <H1> 컴퓨터 선택 </H1><P> <SELECT NAME="com" SIZE=5 MULTIPLE> <OPTION VALUE="XT" SELECTED> XT 컴퓨터 <OPTION VALUE="AT"> AT 컴퓨터 <OPTION VALUE="386"> 386 컴퓨터 <OPTION VALUE="486"> 486 컴퓨터 <OPTION VALUE="펜티엄"> 펜티엄 컴퓨터 </SELECT><P> <INPUT TYPE="button" VALUE="선택 결과" onClick="selectCom(this.form)"> </FORM> </BODY> </html>

JavaScript.

Similar presentations

Presentation on theme: "JavaScript."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

JavaScript.

Similar presentations

Presentation on theme: "JavaScript."— Presentation transcript:

Similar presentations

About project

지원