Java Script Simple Java Script Java Script html

  • Slides: 110
Download presentation
Java. Script

Java. Script

Simple Java. Script 예 Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> <!-document.

Simple Java. Script 예 Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> <!-document. write("여러분"); document. write("안녕. . . "); --> </script> <noscript> <body>당신의 브라우저는 자바스트립트를 지원 하지 않습니다. </body> </noscript> </head> <body> Java. Script 이건 body사이의 내용 입니다. . . </body> </html>

따옴표 표시하기 Java. Script 개요 ” : 큰따옴표 ’ : 작은따옴표 \ : 역슬래쉬

따옴표 표시하기 Java. Script 개요 ” : 큰따옴표 ’ : 작은따옴표 \ : 역슬래쉬 표시 <html> <head> <title>Sample html</title> <script language="javascript"> <!-var x, y, z; x = "Black Sabbath의 "; y = "she's gone을 아세요 "; document. write(x+y); document. write("그래요, 난 she's gone을 압니 다. "); --> </script> </head> <body> </html>

조건문 / 반복문(for) Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> <!-var name

조건문 / 반복문(for) Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> <!-var name = prompt("당신의 이름은. . . ? ", "홍길동"); if (name == "이종철") document. write("방가~" + name + "!!! "); for(i=0; i<10; i++) { document. write("Hello World! "); } --> </script> </head> <body> </html>

Function(함수) Java. Script 개요 <html> <head> <script language="javascript"> <!-function A() { var 변수; //지역변수

Function(함수) Java. Script 개요 <html> <head> <script language="javascript"> <!-function A() { var 변수; //지역변수 변수; //전역변수 } --> </script> </head> <body> <script language=“javascript> <!— A() </script> </body> </html>

내장함수(alert) Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> alert("여러분 n환영합니다. "); alert("이

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

내장함수(confirm) Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> haha = confirm("18세 이상의

내장함수(confirm) Java. Script 개요 <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> </html>

내장함수(prompt) Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> passwd = prompt("비밀번호를 입력하세요.

내장함수(prompt) Java. Script 개요 <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> </html>

내장함수(eval, is. Na. N) Java. Script 개요 <html> <head> <title>Sample html</title> <script language="javascript"> //eval함수는

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

Event 처리(on. Click, on. Load, on. Unload) 예제(1) <html><head> <script language="javascript"> function answer() {

Event 처리(on. Click, on. Load, on. Unload) 예제(1) <html><head> <script language="javascript"> function answer() { alert('브라질'); } </script> </head><body on. Load="alert('방문을 환영합니다. ')" on. Unload="alert('안녕히 가세요~ 쥔장올림. . . ')"> <table> <tr> <td bgcolor="F 4 ECF 3" on. Click="answer(); "> 2002년도 월드컵 우승팀은? </td> </tr> <td bgcolor="F 4 ECF 3"> <!-- On. Click에 명령을 직접 사용해도 된다. --> <!-- div는 문서의 범위를 잡아 스타일을 주기 위해 주 로 사용 --> <div on. Click="alert('서울'); "> 대한민국의 수도는? </div> </td> </tr> </table></body></html>

Event 처리 예제(2) <html> <head><title> 자바스크립트 이벤트 예제 </title></head> <script> function no. Change() {

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

Event 처리 예제(2) <INPUT type=button value=“흰색" on. Click="document. bg. Color='white'"> <input name=textbox size=20 value="절대

Event 처리 예제(2) <INPUT type=button value=“흰색" on. Click="document. bg. Color='white'"> <input name=textbox size=20 value="절대 바꾸지 마시오. " on. Change="no. Change()"> <input NAME=button 2 TYPE=button VALUE="여기에 마우스 포 인터를 올려보세요. " on. Mouse. Over="document. testform. button 2. value='그럼 이렇게 바 뀝니다. '" on. Mouse. Out="document. testform. button 2. value='또 바뀌는군요. '"> </form> </body> </html>

내장객체(Date)예제 -요일구하기 <script> a = new Date(); b = a. get. Day(); switch(b) {

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

내장객체(String) 문자열 객체를 만들기 위해 new 연산자를 사용할 필요가 없다. 변수에 문자열을 대입하면 자동으로

내장객체(String) 문자열 객체를 만들기 위해 new 연산자를 사용할 필요가 없다. 변수에 문자열을 대입하면 자동으로 스트링객체가 생성되며, 이객체에 ‘. ’연산자를 이용하여 속성이나 메소드를 이용가능하다. <script language="Java. Script"> <!-document. write(" BIG ". big() + "<BR>") document. write(" SMALL ". small() + "<BR>") document. write(" BLINK ". blink() + "<BR>") document. write(" BOLD ". bold() + "<BR>") document. write(" FIX ". fixed() + "<BR>") document. write(" ITALICS ". italics() + "<BR>") document. write(" STRIKE ". strike() + "<BR>") document. write("AA" + " SUBSCRIPT ". sub() + "<BR>") document. write("AA" + " SUPERSCRIPT ". sup() + "<BR>") document. write(" FONTCOLOR = GREEN ". fontcolor("green") + "<BR>") document. write(" FONTCOLOR = BLUE ". fontcolor("blue") + "<BR>") document. write(" FONTCOLOR = RED ". fontcolor("red") + "<BR>") document. write(" FONT SIZE 3 ". fontsize(3) + "<BR>") document. write(" FONT SIZE 4 ". fontsize(4) + "<BR>") document. write(" FONT SIZE 5 ". fontsize(5) + "<BR>") //--> </script>

내장객체(String) 예제 (link 사용하기) <html> <head><title>자바스크립트 내장객체</title></head> <SCRIPT LANGUAGE="Java. Script"> <!-document. write("제 1장". link("#chapter

내장객체(String) 예제 (link 사용하기) <html> <head><title>자바스크립트 내장객체</title></head> <SCRIPT LANGUAGE="Java. Script"> <!-document. write("제 1장". link("#chapter 1") + "<BR>") document. write("제 2장". link("#chapter 2") + "<P>") document. write(" "); document. write("제 1장 WWW 서비스". anchor("chapter 1") + "<BR>") document. write("야후 서비스". link("http: //www. yahoo. com") + "<BR>") document. write("라이코스 서비스 ". link("http: //www. lycos. com") + "<P>") document. write(" "); document. write("제 2장 자바스크립트 서비스 ". anchor("chapter 2") + "<BR>") document. write(" "); //--> </SCRIPT> <body> </html>

내장객체(String) 메소드 사용하기 <script language="Java. Script"> <!-document. write("javascript 문자열 중에서 script 문자열의 위치는 ")

내장객체(String) 메소드 사용하기 <script language="Java. Script"> <!-document. write("javascript 문자열 중에서 script 문자열의 위치는 ") document. write("javascript". index. Of("script") + " ") document. write("javascript 문자열의 마지막 문자는 ") document. write("javascript". char. At("javascript". length 1)+" ") str 1 = "This is test" str 2 = str 1. split(" ") document. write(""" + str 1 + """ + "를 단어로 분리 ") document. write(str 2) // 자바스크립트 끝 --> </script>

내장객체(Math) 메소드 설명 abs(x) x의 절대값을 반환 acos(x) arc cos asin(x) arc sin atan(x)

내장객체(Math) 메소드 설명 abs(x) x의 절대값을 반환 acos(x) arc cos asin(x) arc sin atan(x) arc tan atan 2(x, y) arc tan 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="Java. Script"> <!-var k var a 1 = Math. abs(100); var

내장객체(Math) 예제 <SCRIPT LANGUAGE="Java. Script"> <!-var k var a 1 = Math. abs(100); var a 2 = Math. abs(-100); if (a 1 == a 2) k = "두 변수 값이 같습니다. " alert(k); //--> </SCRIPT>

내장객체(Array) <SCRIPT LANGUAGE="Java. Script"> <!-var my. Array = new Array(); my. Array = ["홍",

내장객체(Array) <SCRIPT LANGUAGE="Java. Script"> <!-var my. Array = new Array(); my. Array = ["홍", "김", "장", "권", "최", "고"] document. write("my. Array[0] = " + my. Array[0]+"<p>"); document. write("my. Array[1] = " + my. Array[1]+"<p>"); document. write("my. Array[2] = " + my. Array[2]+"<p>"); document. write("my. Array[3] = " + my. Array[3]+"<p>"); document. write("my. Array[4] = " + my. Array[4]+"<p>"); //--> </SCRIPT>

내장객체(Array) 메소드 예제 <script language="Java. Script"> gentleman = new Array(3) //배열의 크기를 3개 설정

내장객체(Array) 메소드 예제 <script language="Java. Script"> gentleman = new Array(3) //배열의 크기를 3개 설정 gentleman[0] = "홍길동" gentleman[1] = "홍국영" gentleman[2] = "홍성원" //생성객체끼리 공유 할 수 있도록 comment 속성을 생성시킴 Array. prototype. comment = null gentleman. comment = "<h 1>Array 객체의 속성</h 1><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) 메소드 예제 //함수를 만들어서 배열을 내림차순으로 정렬합니다. sort = str. sort(compare) document. write(sort)

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

내장객체(Screen) 현재 동작중인 컴퓨터의 해상도, 색상수, 화 면크기 등을 구해주는 내장객체 New 연산자를 사용하지

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

웹브라우저 내장객체(Window) 2. window 객체의 메소드 * open() 새로운 윈도우를 하나 만들어냅니다. open("URL", "window

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

웹브라우저 내장객체(Window) 예제 1 <html> <head></head> <body onload="window. default. Status='default. Status속성을 익히자'"> <center> <a

웹브라우저 내장객체(Window) 예제 1 <html> <head></head> <body onload="window. default. Status='default. Status속성을 익히자'"> <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">링크위에 마우스를 대면 하단상 태바에 해당 링크에 대한 지정된 이벤트결과인 문자열이 출력됩니다. </font> </p> <input type="button" value="야후로 가자" on. Click='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="Java. Script"> function make. Window() {

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

웹브라우저 내장객체(Window) 예제 3 <html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table> <tr><td> <!-- Netscape에서만 동작한다.

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

웹브라우저 내장객체(Window) 예제 4 <html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td> <!– resize. By는 현재

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

웹브라우저 내장객체(Window) 예제 5 <html><head><TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td> <!--move. By는 현재 위치를 기준으로

웹브라우저 내장객체(Window) 예제 5 <html><head><TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td> <!--move. By는 현재 위치를 기준으로 이동 --> <input type="button" value="오른쪽으로이동" on. Click="window. move. By(200, 0)"> <input type="button" value="왼쪽상단에정렬" on. Click="window. move. To(0, 0)"> </td></tr></table> </body> </html>

웹브라우저 내장객체(Window) 예제 6 <html> <head> <TITLE>자바스크립트를 이용한 시간보기</TITLE> <script language="Java. Script"> function show.

웹브라우저 내장객체(Window) 예제 6 <html> <head> <TITLE>자바스크립트를 이용한 시간보기</TITLE> <script language="Java. Script"> function show. Time() { var today = new Date() var timestr = "현재 시간은 "+ today. get. Hours() timestr += "시 " + today. get. Minutes()+ "분 " timestr += today. get. Seconds()+ "초입니다" window. status = timestr; time_id = set. Timeout("show. Time()", 1000) } </script> </head> <body on. Load="show. Time()"> <h 3> 현재 시간이 상태바에 나타나고 있습니다. </h 3> </body> </html>

웹브라우저 내장객체(document) 예제 <html> <head><title>document 내장객체</title></head> <body> <script LANGUAGE="Java. Script"> document. write("문서의 제목 :

웹브라우저 내장객체(document) 예제 <html> <head><title>document 내장객체</title></head> <body> <script LANGUAGE="Java. Script"> document. write("문서의 제목 : " + document. title + "<BR>") document. write("문서의 URL : " + document. location + "<BR>") the. Day = new Date(document. last. Modified) year = the. Day. get. Year() month = the. Day. get. Month() + 1 day = the. Day. get. Date() document. write("갱신 날짜 : " + year + "년 " + month + "월 " + day + "일") </script> </body> </html>

웹브라우저 내장객체(location) 예제 Location 객체의 Property 예) URL주소 : http: //www. digital. co. kr:

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

웹브라우저 내장객체(location) 예제 <html> <head><title>Location 객체</title> <script language="Java. Script"> function showlocation(){ var out="location. href

웹브라우저 내장객체(location) 예제 <html> <head><title>Location 객체</title> <script language="Java. Script"> 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" on. Click="javascript: location. reload(); "> <input type="button" value="show Location" on. Click="showlocation()"> </body> </html>

웹브라우저 내장객체(document/link) <html> <head><title>Location 객체</title> </head> <body> <a href="http: //www. oraclejava. co. kr">Oracle. Java</a>

웹브라우저 내장객체(document/link) <html> <head><title>Location 객체</title> </head> <body> <a href="http: //www. oraclejava. co. kr">Oracle. Java</a> <a href="http: //www. mobiejava. co. kr">Mobile. Java</a> <script language="Java. Script"> document. write("링크수는 ", document. links. length, " 개 입니다. . . ") for(i=0; i<document. links. length; i++) { document. write(document. links[i], " "); } </script> </body> </html>

웹브라우저 내장객체(navigator) 예제 1 <SCRIPT LANGUAGE="Java. Script"> <!-document. write(navigator. app. Code. Name+" "); //웹브라우저의

웹브라우저 내장객체(navigator) 예제 1 <SCRIPT LANGUAGE="Java. Script"> <!-document. write(navigator. app. Code. Name+" "); //웹브라우저의 코드이름 반환 document. write(navigator. app. Name+" "); //웹브라우저의 이름 반환 document. write(navigator. app. Version+" "); //웹브라우저의 버전정보 반환 document. write(navigator. user. Agent+" "); //HTTP request 저장되는 user. Agent정보 반환 document. write(navigator. java. Enabled()+" "); //자바 지원여부검사 document. write(navigator. taint. Enabled()+" "); //? //--> </SCRIPT>

웹브라우저 내장객체(navigator) 예제 2 <SCRIPT LANGUAGE="Java. Script"> <!-for (prop in navigator) { document. write(prop+"==>"+navigator[prop]+"<BR>")

웹브라우저 내장객체(navigator) 예제 2 <SCRIPT LANGUAGE="Java. Script"> <!-for (prop in navigator) { document. write(prop+"==>"+navigator[prop]+"<BR>") } //--> </SCRIPT>

웹브라우저 내장객체(history) 예제 <html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td> <!--move. By는 현재 위치를 기준으로

웹브라우저 내장객체(history) 예제 <html><head> <TITLE>자바스크립트 테스트</TITLE> </head> <body> <table><tr><td> <!--move. By는 현재 위치를 기준으로 이동 --> <input type="button" value="돌아가기" on. Click="history. back()"> <input type="button" value="돌아가기(-2)" on. Click="history. go(-2)"> <input type="button" value="앞으로가기" on. Click="history. forward()"> </td></tr></table> </body> </html>

form 객체 예제 1 <html> <head><script language="Java. Script"> function check. Text() { if (document.

form 객체 예제 1 <html> <head><script language="Java. Script"> function check. Text() { 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="입력 확인" on. Click="check. Text()"> </form> </body> </html>

form 객체 예제 2(1) <html> <head><script language="Java. Script"> function check. Text() { var str

form 객체 예제 2(1) <html> <head><script language="Java. Script"> function check. Text() { 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> <H 1> Form 예제 </h 1> <form name="myform"

form 객체 예제 2(2) </script></head> <body> <H 1> Form 예제 </h 1> <form name="myform" action="save. asp" method=get> 이름 : <input type="text" name="irum"> <input type="button" value="입력 확인 및 보내기" on. Click="check. Text()"> </form> </body> </html>

form 객체 예제 3 <html> <head> <script language="Java. Script"> function before. Submit() { return

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

text 객체 예제 1(1) <html> <head> <script language="Java. Script"> function make. Upper(form) { var

text 객체 예제 1(1) <html> <head> <script language="Java. Script"> function make. Upper(form) { var str = form. input. value = str. to. Upper. Case() } </script> </head>

text 객체 예제 1(2) <body> <h 1> text 예제 </h 1> <form name="myform 1">

text 객체 예제 1(2) <body> <h 1> text 예제 </h 1> <form name="myform 1"> Input 1: <input type="text" name="input" value="" on. Change="make. Upper(this. form)"> </form> <form name="myform 2"> Input 2: <input type="text" name="input" value="" on. Change="make. Upper(this. form)"> </form> </body> </html>

text 객체 예제 2(1) – text defaultvalue사용 <html> <head><title>default value 사용예제</title> <script language="Java. Script">

text 객체 예제 2(1) – text defaultvalue사용 <html> <head><title>default value 사용예제</title> <script language="Java. Script"> function make. Upper(field) { var str = field. value = str. to. Upper. Case() } function reset. Value(form) { form. input 1. value = form. input 1. default. Value form. input 2. value = form. input 2. default. Value } </script>

text 객체 예제 2(2) – text defaultvalue 사용 </head> <body> <H 1> Form 예제

text 객체 예제 2(2) – text defaultvalue 사용 </head> <body> <H 1> Form 예제 </H 1> <BR> <form name="myform 1"> Input 1: <input type="text" name="input 1" value="test" on. Change="make. Upper(this)"><BR> Input 2: <input type="text" name="input 2" value="test" on. Change="make. Upper(this)"><P> <input type="button" value="Reset" on. Click="reset. Value(this. form)"> </form> </body> </html>

text 객체 예제 3(onfocus 예제) <html> <head><script language="Java. Script"> function show. Status(str) { window.

text 객체 예제 3(onfocus 예제) <html> <head><script language="Java. Script"> function show. Status(str) { window. status=str } </script></head> <body><form name="myform 1"> 이름 : <input type="text" on. Focus="show. Status('이름을 입력하시오')"> 나이 : <input type="text" on. Focus="show. Status('나이을 입력하시오')"> 주소 : <input type="text" on. Focus="show. Status('주소을 입력하시오')"> </form></body> </html>

textarea 객체 예제 <html> <head><script language="Java. Script"> function check(form) { alert(form. mail. value) }

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

checkbox 객체 예제(checked 이용) <html> <HEAD><SCRIPT LANGUAGE="Java. Script"> function find. Checked(form) { var str

checkbox 객체 예제(checked 이용) <html> <HEAD><SCRIPT LANGUAGE="Java. Script"> function find. Checked(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> <H 1> 드라이브 선택 </H 1><P> <FORM ACTION="save. asp">

checkbox 객체 예제(checked 이용) <BODY> <H 1> 드라이브 선택 </H 1><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” on. Click="find. Checked(this. form)"> </FORM> </BODY> </html>

checkbox 객체 예제(on. Click 이용) <html> <HEAD> <SCRIPT LANGUAGE="Java. Script"> function click. Check(box) {

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

checkbox 객체 예제(on. Click 이용) <FORM ACTION="nothingcgi"> <H 1> 드라이브 선택 </H 1><P> <INPUT

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

radio 객체 예제(length및 checked 이용) <html> <HEAD> <SCRIPT LANGUAGE="Java. Script"> function find. Selected(form) {

radio 객체 예제(length및 checked 이용) <html> <HEAD> <SCRIPT LANGUAGE="Java. Script"> function find. Selected(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"> <H 1> 드라이브 선택 </H 1>

radio 객체 예제(length및 checked 이용) <BODY> <FORM ACTION="nothingcgi"> <H 1> 드라이브 선택 </H 1> <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" on. Click="find. Selected(this. form)"> </FORM> </BODY> </html>

radio 객체 예제(on. Click 이용) <html> <HEAD> <SCRIPT LANGUAGE="Java. Script"> function change(rad) { document.

radio 객체 예제(on. Click 이용) <html> <HEAD> <SCRIPT LANGUAGE="Java. Script"> function change(rad) { document. bg. Color = rad. value } </SCRIPT> </HEAD> <BODY> <H 1> 배경색 바꾸기 </H 1><P>

radio 객체 예제(on. Click 이용) <FORM ACTION="save. asp"> <INPUT TYPE="radio" NAME="color" VALUE="white" on. Click="change(this)">

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

select 객체 예제(selectedindex 이용) <html><HEAD> <SCRIPT LANGUAGE="Java. Script"> function select. Com(form) { alert("당신은 "

select 객체 예제(selectedindex 이용) <html><HEAD> <SCRIPT LANGUAGE="Java. Script"> function select. Com(form) { alert("당신은 " + form. com. selected. Index + "번째를 선택했습니다. ") } </SCRIPT></HEAD> <BODY><FORM> <H 1> 컴퓨터 선택 </H 1><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="선택 결과" on. Click="select. Com(this. form)"> </FORM></BODY></html>

select 객체 예제(options[i]. selected 이용) <html><HEAD> <SCRIPT LANGUAGE="Java. Script"> function select. Com(form) { var

select 객체 예제(options[i]. selected 이용) <html><HEAD> <SCRIPT LANGUAGE="Java. Script"> function select. Com(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> <H 1> 컴퓨터 선택 </H 1><P> <SELECT

select 객체 예제(options[i]. selected 이용) <BODY> <FORM> <H 1> 컴퓨터 선택 </H 1><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="선택 결과" on. Click="select. Com(this. form)"> </FORM> </BODY> </html>

주민등록번호 검사기(1) - 계속 <html><head><title>주민등록번호 체크</title> <script language="Java. Script"> function is. OK() { var

주민등록번호 검사기(1) - 계속 <html><head><title>주민등록번호 체크</title> <script language="Java. Script"> function is. OK() { var chk=0; for(i=0; i<=5; i++) { chk = chk + ((i%8) + 2) * parse. Int(document. myform. jumin 1. value. substring(i, i+1)); } for(i=6; i<=11; i++) { chk = chk + ((i%8) + 2) * parse. Int(document. myform. jumin 2. value. substring(i-6, i-5)); } chk = 11 -(chk % 11); chk = chk % 10; if (chk != document. myform. jumin 2. value. substring(6, 7)) { alert("잘못된 주민등록 번호 입니다. . . "); document. myform. jumin 1. focus(); return false; }

주민등록번호 검사기(2) else { alert("올바른 주민등록 번호 입니다. . . "); } } </script>

주민등록번호 검사기(2) else { alert("올바른 주민등록 번호 입니다. . . "); } } </script> </head> <body> <form name="myform"> <input type="text" name="jumin 1" size="6" maxlength="6"><input type="text" name="jumin 2" size="7" maxlength="7"> <input type="button" value="주민등록번호 검사" on. Click="is. OK()"> </form> </body> </html>

즐겨 찾기에 추가하기 <html><head> <script> function Add. Favorites() { window. external. Add. Favorite( location.

즐겨 찾기에 추가하기 <html><head> <script> function Add. Favorites() { window. external. Add. Favorite( location. href, "즐겨찾기 예 제" ) } </script> </head> <body> <a href="javascript: Add. Favorites()">현재 페이지를 즐 겨찾기에 추가</a> </body> </html>

다음 방문 시 창 띄우지 않기(main. html – 1) <HTML><HEAD> <script language="Java. Script"> var

다음 방문 시 창 띄우지 않기(main. html – 1) <HTML><HEAD> <script language="Java. Script"> var n = 0; function get. Cookie(name) { var Found = false var start, end var i = 0 // cookie 문자열 전체를 검색 while(i <= document. cookie. length) { start = i end = start + name. length // name과 동일한 문자가 있다면 if(document. cookie. substring(start, end) == name) { Found = true break } i++ }

다음 방문 시 창 띄우지 않기(main. html – 2) // name 문자열을 cookie에서 찾았다면

다음 방문 시 창 띄우지 않기(main. html – 2) // name 문자열을 cookie에서 찾았다면 if(Found == true) { start = end + 1 end = document. cookie. index. Of("; ", start) // 마지막 부분이라는 것을 의미(마지막에는 "; "가 없다) if(end < start) end = document. cookie. length // name에 해당하는 value값을 추출하여 리턴한다. return document. cookie. substring(start, end) } // 찾지 못했다면 return "" }

다음 방문 시 창 띄우지 않기(main. html – 3) function open. Msg. Box() {

다음 방문 시 창 띄우지 않기(main. html – 3) function open. Msg. Box() { var event. Cookie=get. Cookie("memo"); if (event. Cookie != "no") window. open('popup. html', '_blank', 'width=350, height=300, top= 50, left=150'); //팝업창의 주소, 같은 도메인에 있어야 한다. } </SCRIPT> <BODY on. Load="open. Msg. Box()"> 이 창은 메인 창 입니다. . . </BODY> </HTML>

다음 방문 시 창 띄우지 않기(popup. html – 1) <html><head> <script language="Java. Script"> function

다음 방문 시 창 띄우지 않기(popup. html – 1) <html><head> <script language="Java. Script"> function set. Cookie( name, value, expiredays ) { //escape()는 영숫자 및 * @ - _ +. /를 제외한 모든 문자를 별도의 방법으로 처리합니다. 공백은 %20등으로 …’가’는 ‘%u. AC 00’ 로…ASCII 코드의 문자는 %xx 형태로 변경하며, 그 외의 문자 는 %uxxxx로 나타나는 유니코드로 처리합니다. var today. Date = new Date(); today. Date. set. Date( today. Date. get. Date() + expiredays ); document. cookie = name + "=" + escape( value ) + "; path=/; expires=" + today. Date. to. GMTString() + "; " } function close. Win() { if ( document. lehit. event. checked ) set. Cookie("memo", "no" , 60); // 60일 간 쿠키적용 //1000*60*60*24 24시를 1/1000로 변환 } </script>

다음 방문 시 창 띄우지 않기(popup. html – 2) </HEAD> <BODY onunload="close. Win()"> 아래의

다음 방문 시 창 띄우지 않기(popup. html – 2) </HEAD> <BODY onunload="close. Win()"> 아래의 체크박스에 체크를 하고 난 다음에 창을 닫으면 다음에 방문할 때는 창이 열리지 않습니다. <form name="lehit"> <input type="checkbox" name="event"><font size=2>다음부터 이 창을 열지않음</font> <input type=button value="닫기" onclick="self. close()"> </form> </body> </html>