5. 예제로 배우기 |
|||||
|---|---|---|---|---|---|
| 작성자 | 컴샘 | 등록일 | 19.09.18 | 조회수 | 135 |
|
5. 예제로 배우기 (1) <FRAME SRC> - 개별 창을 독립 실행시켜 주는 태그
① 메인 HTML 문서(파일명 : FRAME1.HTM) <HTML> <FRAMESET ROWS="40%,60%> <FRAME SRC="WIN1-1.HTM> <FRAMESET COLS="40%,60%"> <FRAME SRC="WIN1-2.HTM> <FRAME SRC="WIN1-3.HTM"> </FRAMESET> </FRAMESET> </HTML>
② WIN1-1.HTM <HTML> <H5> 첫 번째 창입니다.</H5> </HTML>
③ WIN1-2.HTM <HTML> <H5> 두 번째 창입니다.</H5> </HTML>
④ WIN1-3.HTM <HTML> <H5> 세 번째 창입니다.</H5> </HTML>
고찰 : 한 화면에 창을 3개로 나누려면 4개의 HTML 문서가 필요하다.
(2) <FRAME SRC NAME> <A HREF TARGET> - 하이퍼링크 창 개설
① 메인 HTML 문서(파일명 : FRAME2.HTM) <HTML> <FRAMESET COLSS="40%,60%> <FRAME SRC="WIN2-1.HTM> <FRAME SRC="WIN2-2.HTM" NAME="dodam"> </FRAMESET> </FRAMESET> </HTML>
② WIN2-1.HTM <HTML> <H5> 첫 번째 창입니다.</H5> <A HREF="WIN2-3.HTM" TARGET="dodam"> *** 도담삼봉 구경 *** < /A> </HTML>
③ WIN2-2.HTM <HTML> <CENTER> <H5> 두 번째 창입니다.</H5> <P> </CENTER> </HTML> ④ WIN2-3.HTM <HTML> <CENTER> <H1> 어서 오세요. 바로 여기가 도담삼봉입니다.</H1> </CENTER> </HTML>
(3) 비밀번호 확인 <HTML> <HEAD> <TITLE> 자바스크립트를 이용한 비밀번호 확인 문서 작성</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var password=prompt("비밀번호를 입력하세요:") if(password=="12345") { alert("비밀번호가 확인되었습니다") location="이동할 페이지.htm" } else {location="비밀번호가 틀릴 경우 가야할 페이지.htm" } </script> </body> </html>
고찰 : 3개의 html 문서가 필요하겠죠. 먼저 비밀번호를 사용할 문서, 비밀번호가 맞았을 때 이동할 문서, 비밀번호가 틀렸을 때 이동할 문서
(4) 버튼 만들기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function push(str) { alert(str); } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="버튼 1번" onClick="push('버튼 1번이 눌렸습니다.')"> <P> <INPUT TYPE="button" VALUE="버튼 2번" onClick="push('버튼 2번이 눌렸습니다.')"> </FORM> </BODY> </HTML>
(5) 상태선에 글자 쓰기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </HEAD> <BODY> <A HREF="http://www.yahoo.com" onMouseOver="window.status='이곳을 누르면 야후 검색 서비스로 이동합니다.'; return true">야후</A> <P> <A HREF="http://www.lycos.com" onMouseOver="window.status='이곳을 누르면 라이코스 검색 서비스로 이동합니다.'; return true">라이코스</A> </BODY> </HTML>
(6) 선택형 문제 만들기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function order(str) { if(str == "피자") alert("피자를 주문하셨습니다."); else if(str == "짜장") alert("짜장를 주문하셨습니다."); else if(str == "비빔밥") alert("비빔밥를 주문하셨습니다."); } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H1> 어떤 것을 드시고 싶으십니까? </H1> <P> <FORM> <INPUT TYPE="button" VALUE="피 자" onClick="order('피자')"> <INPUT TYPE="button" VALUE="짜 장" onClick="order('짜장')"> <INPUT TYPE="button" VALUE="비빔밥" onClick="order('비빔밥')"> </FORM> </BODY> </HTML>
(7) 1부터 10까지 제곱 구하기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </HEAD> <BODY> <H1> 1부터 10까지 제곱 구하기 </H1> <P> <SCRIPT LANGUAGE="JavaScript"> <!-- i = 1; /* i 변수가 1에서 10이 될 때까지 계속해서 i의 제곱 계산하여 출력 */ while(i < 11) { document.write(i + " * " + i + " = " + i*i + "<BR>"); i++; } // 자바스크립트 끝 --> </SCRIPT> </BODY> </HTML>
(8) o, x 형 문제 만들기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function askOpinion(question) { var ans
// confrim은 화면에 question 메시지를 담은 다이얼로그 박스를 띄우고 // 확인/취소 여부를 물어보는 자바스크립트 내장 함수 // 확인 버튼을 누르면 true가 리턴되고, 취소 버튼을 누르면 false가 리턴 ans = confirm(question) if(ans == true) return "찬성합니다." else return "반대합니다." } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H1> 곰돌이가 우리 모임에 참여하는 것을 찬성합니까? </H1> <P> <SCRIPT LANGUAGE="JavaScript"> <!-- var answer
answer = askOpinion("찬성하면 확인 버튼, 반대하면 취소 버튼.") document.write("<H3><B>" + answer + "</B></H3>"); // 자바스크립트 끝 --> </SCRIPT> </BODY> </HTML>
(9) 수식 계산
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </HEAD> <BODY> <H1> 수식 계산 </H1> <P> <SCRIPT LANGUAGE="JavaScript"> <!-- var eval_string
// 사용자로부터 수식을 입력받는다 eval_string = prompt("계산할 수식을 입력하십시요")
document.write("<H3> 입력한 수식 : " + eval_string + "<H3><P>") document.write("<H3> 답 : " + eval(eval_string) + "<H3>") // 자바스크립트 끝 --> </SCRIPT> </BODY> </HTML>
(10) 날짜, 시간 나타내기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- today = new Date() document.write("오늘 날짜는 ", today.getYear(), "년 ", today.getMonth()+1, "일 ", today.getDate(), "일") document.write("입니다. < P>") document.write("현재 시간은 ", today.getHours(), "시 ", today.getMinutes(),"분") document.write("입니다. ") // 자바스크립트 끝 --> </SCRIPT> </BODY> </HTML>
(11) 하이퍼 텍스트 연결
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("제1장".link("#chapter1") + "<BR>") document.write("제2장".link("#chapter2") + "<P>")
document.write("제1장 WWW 서비스".anchor("chapter1") + "<BR>") document.write("야후 서비스".link("http://www.yahoo.com") + "<BR>") document.write("라이코스 서비스".link("http://www.lycos.com") + "<P>")
document.write("제2장 자바스크립트 서비스".anchor("chapter2") + "<BR>") // 자바스크립트 끝 --> </SCRIPT> </BODY> </HTML>
(12) 배경색 바꾸기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // 초기 배경값 지정 document.bgColor = "white"
// document 객체의 기본 특성을 초기값으로 환원 function setDefault() { document.bgColor = "white" } // document 객체의 기본 특성을 임의로 변환 function changeColor() { document.bgColor = "green" } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <CENTER> <H1> Document 객체의 기본 특성 바꾸기 </H1><P> </CENTER> <A HREF="DOCU3.HTM"> 링크 </A><P> <FORM> <INPUT TYPE="button" VALUE="배경색 바꾸기" onClick="changeColor()"> <INPUT TYPE="button" VALUE="초기색으로 환원" onClick="setDefault()"> </FORM> </BODY> </HTML>
(13) 입력 양식
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </HEAD> <BODY> <CENTER> <H1> 입력 양식 </H1> </CENTER> <FORM> 이름 : <INPUT TYPE="text" NAME="이름" SIZE=10><BR> 암호 : <INPUT TYPE="password" NAME="암호" SIZE=8><P> </FORM>
<FORM> 검색할 드라이브 : <BR> <OL> <LI><INPUT TYPE="checkbox" NAME="drive" VALUE="A"> A 드라이브 <LI><INPUT TYPE="checkbox" NAME="drive" VALUE="B"> B 드라이브 <LI><INPUT TYPE="checkbox" NAME="drive" VALUE="C"> C 드라이브 </OL> </FORM> <P>
<SCRIPT LANGUAGE="JavaScript"> <!-- document.write("입력 양식의 수 : " + document.forms.length) // 자바스크립트 끝 --> </SCRIPT> </BODY> </HTML>
(14) 히스토리 이동
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> </HEAD> <BODY> <H1> 히스토리 이동 </H1> <FORM> <INPUT TYPE="button" VALUE="2단계 앞으로" onClick="history.go(-2)"> <INPUT TYPE="button" VALUE="앞으로" onClick="history.go(-1)"> <INPUT TYPE="button" VALUE="뒤로" onClick="history.go(1)"> <INPUT TYPE="button" VALUE="2단계 뒤로" onClick="history.go(2)"> </FORM> </BODY> </HTML>
(15) 서버로 데이터 보내기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function beforeSubmit() { // YES 버튼을 누르면 true가 리턴될 것이다. return confirm("데이타를 정말로 보낼까요?") } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H1> Form 예제 </H1> <BR> <FORM NAME="myform" ACTION="nothingcgi" onSubmit="beforeSubmit()"> 이름 : <INPUT TYPE="text"> <INPUT TYPE="submit"> </FORM> </BODY> </HTML>
고찰: 서버에 nothingcgi.cgi 프로그램이 만들어져 있어야 함
(16) 4지 선다형 문제 만들기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function verifyValue(form) { var ans = form.input.value
if(ans == "") { alert("입력하지 않으셨습니다.") // 입력하도록 입력 양식에 커서를 넣는다. form.input.focus() } else if(ans == "a" || ans == "A") { alert("맞았습니다.") } else { alert("틀렸습니다. 다시 선택하십시오.") // 다시 입력하도록 입력 양식에 커서를 넣고 선택한다. form.input.focus() form.input.select() } } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H1> Form 예제 </H1> <BR> 우리나라의 수도는 어디입니까? <BR> A) 서울 B) 광주 C) 부산 D) 대구 <P> <FORM NAME="myform1"> 답 : <INPUT TYPE="text" NAME="input"> <INPUT TYPE="button" VALUE="Verify" onClick="verifyValue(this.form)"> </FORM> </BODY> </HTML>
(17) 라디오 버튼으로 배경색 바꾸기
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function change(rad) { document.bgColor = rad.value } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H1> 배경색 바꾸기 </H1><P> <FORM ACTION="nothingcgi"> <INPUT TYPE="radio" NAME="color" VALUE="white" onClick="change(this)"> 흰색<BR> <INPUT TYPE="radio" NAME="color" VALUE="black" onClick="change(this)"> 검은색<BR> <INPUT TYPE="radio" NAME="color" VALUE="green" onClick="change(this)" CHECKED> 녹색<BR> <INPUT TYPE="radio" NAME="color" VALUE="blue" onClick="change(this)"> 파란색<P> </FORM> </BODY> </HTML>
(18) 선택 버튼
<HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <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>
(19) 목록 스타일
<HTML> <HEAD> <TITLE> 기타 스타일 쉬트</TITLE> <STYLE TYPE="text/javascript"> classes.LIST1.UL.listStyleType = "disc"; classes.LIST2.UL.listStyleType = "upper-roman"; classes.LIST3.UL.listStyleType = "upper-alpha"; </STYLE> </HEAD> <BODY> <H1> 목록 스타일 (자바스크립트 사용)</H1> <BR> <UL CLASS=LIST1> <LI> 디스크 목록 1 <LI> 디스크 목록 2 </UL> <UL CLASS=LIST2> <LI> 넷스케이프 커뮤니케이터 4.0 <LI> 마이크로소프트 익스플로러 4.0 </UL> <UL CLASS=LIST3> <LI> 서울 <LI> 부산 <LI> 대구 <LI> 광주 </UL> </BODY> </HTML>
고찰 : list-style-type 은 넷스케이프 4.0에서만 지원 됨
disk : 디스크 모양 circle : 원 모양 square : 사각형 모양 decimal : 숫자(1,2,3...) lower-roman : 로마자 소문자 upper-roman : 로마자 대문자 lower-alpha : 소문자 알파벳 upper-alpha : 대문자 알파벳 non : 없음
(20) 브라우저 상태선에 메시지 스크롤 시키기 <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // 상태선에 보여줄 메시지, 여기만 자신이 원하는 메시지로 수정하면 된다. var msg = "Welcome to My Homepage... Welcome to My Homepage..." // 메시지 제일 앞에 붙혀줄 빈 칸의 수 var space = 170 // setTimeout() 메소드의 리턴값 var timer_id = null // 현재 상태선에 메시지 스크롤이 일어나는지의 여부를 보여준다. var running_flag = false // 스크롤 시간 간격 var waiting_time = 30
// 출력 메시지 만들기 : 메시지 앞에 빈칸을 넣는 것은 스크롤이 // 오른쪽에서 시작되는듯한 효과를 주기 위한 것. for(i=0; i<space; i++) msg = " " + msg
// 메시지를 상태선에 보여주는 함수 function scrollStatus() { // 현재 msg 문자열 중 처음부터 170번째까지 문자까지만 // 상태선에서 보여준다. window.status = msg.substring(0, 169) // msg 문자열의 첫 번째 문자를 제일 뒤로 보낸다. msg = msg.substring(1, msg.length) + msg.substring(0, 1)
// waiting_time 후에 scrollStatus() 함수 실행되도록 ... timer_id = setTimeout("scrollStatus()", waiting_time) running_flag = true } // 메시지 스크롤을 중지시키는 함수 function stopScroll (){ // 현재 상태선에 스크롤이 될 때에만 clearTimeout() 메소드 사용 if(running_flag) clearTimeout(timer_id) running_flag = false // 스크롤이 중지되었으니 상태선을 지운다. window.status = " " } // 메시지 스크롤을 시작시키는 함수 function startScroll() { // 메시지 스크롤을 확실히 끝낸다. stopScroll() // 메시지 스크롤 시작 scrollStatus() } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY onLoad="startScroll()"> <H2> 브라우저 상태선에 메시지 스크롤시키기 </H2> <P> <FORM NAME="clock_form"> <INPUT TYPE="button" VALUE="스크롤 시작" onClick="startScroll()"> <INPUT TYPE="button" VALUE="스크롤 중지" onClick="stopScroll()"> </FORM> </BODY> </HTML>
(21) 뉴스속보 보여주기(글자 우측에서 좌측으로 이동) <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // 뉴스 메시지 var msg = "Today is Sunday. Yesterday is Saturday." // setTimeout() 메소드의 리턴값 var timer_id = null // 현재 메시지 스크롤이 일어나는지의 여부 var running_flag = false // 스크롤 시간 간격 var waiting_time = 50
// 출력 메시지 만들기 : 메시지 앞에 빈칸을 넣는 것은 스크롤이 // 오른쪽에서 시작되는듯한 효과를 주기 위한 것. for(i=0; i<60; i++) msg = " " + msg
// 뉴스를 스크롤시키는 함수 function scrollNews() { // 현재 msg 문자열 중 처음부터 60번째까지 문자까지만 보여줌. document.myform.news.value = msg.substring(0, 59) // msg 문자열의 첫 번째 문자를 제일 뒤로 보낸다. msg = msg.substring(1, msg.length) + msg.substring(0, 1)
// waiting_time 후에 scrollNews() 함수 실행되도록 ... timer_id = setTimeout("scrollNews()", waiting_time) running_flag = true } // 뉴스 스크롤을 중지시키는 함수 function stopNews(){ // 현재 스크롤이 될 때에만 clearTimeout() 메소드 사용 if(running_flag) clearTimeout(timer_id) running_flag = false } // 뉴스 스크롤을 시작시키는 함수 function startNews() { // 뉴스 스크롤을 확실히 끝낸다. stopNews() // 뉴스 스크롤 시작 scrollNews() } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY onLoad="startNews()"> <H2> 뉴스 속보 </H2> <P> <FORM NAME="myform"> <INPUT TYPE="text" NAME="news" SIZE="60"> </FORM> </BODY> </HTML>
(22) 자바스크립트로 만드는 애니메이션(10개의 이미지(t1.gif -t10.gif)를 연속해서 보여주기) <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // 이미지 바꾸는 시간 간격 delay = 100 // 현재 이미지 번호 num = 1
// 이미지 파일을 미리 읽어 Image 객체 만들기 my_image = new Array() for(i = 1; i <= 10; i++) { my_image[i] = new Image() my_image[i].src = "T" + i + ".gif" }
// 연속된 이미지를 보여주는 함수 function animate() { // < IMG> 택의 이름 java_image document.java_image.src = my_image[num].src num++ if(num > 10) num = 1 } // 자바스크립트 끝 --> </SCRIPT> </HEAD> <BODY> <H1> 애니메이션 </H1> <IMG NAME="java_image" SRC="T1.gif" onLoad="setTimeout('animate()', delay)"> </BODY> </HTML>
(23) 편지써서 보내기 <HTML> <HEAD> <TITLE> 텍스트 영역 입력 양식 </TITLE> </HEAD> <BODY> <FORM ACTION="nothingcgi"> <H2> 편지 쓰기 </H2><P> <TEXTAREA NAME="mail" ROWS=10 COLS=65> 여기는 편지 내용을 쓰는 곳입니다. </TEXTAREA> <BR>
<INPUT TYPE="submit" VALUE="Send Mail"> <INPUT TYPE="reset" VALUE="Reset Mail"> </FORM> </BODY> </HTML>
고찰 : nothingcgi.cgi 프로그램이 서버컴퓨터에 있어야 됨
24. y축 스크롤(아래화면 자동으로 보여주기) <html> <head> <title> 자동 스크롤</title> <SCRIPT LANGUAGE-"JavaScript"> <!-- function pagescroll(){ var x=0 for (var y=0;y<=1000;y+=0.1){ window.scroll(x,y) } } //stop --> </script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form method="get"> <p><input type="button" value="스크롤" onclick="pagescroll()"> </p> </form> <h1>흔히 현대는 정보 전쟁의 시대라고 한다. </h1> <h1 align="center"><img src="images/군.jpg" width="400" height="250" border="0"><img src="images/컴.jpg" width="400" height="250" border="0"></h1> <p> </p> </body> </html>
25. x축 스크롤(오른쪽화면 자동으로 보여주기) <html> <head> <title> x축 자동 스크롤</title> <SCRIPT LANGUAGE-"JavaScript"> <!-- function autoscroll(){ var y=0 for (var x=0;x<=1000;x+=0.1){ window.scroll(x,y) } } //stop --> </script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<h1>흔히 현대는 정보 전쟁의 시대라고 한다. </h1> <form method="get"> <p><input type="button" value="스크롤" onclick="autoscroll()"> </p> </form> <p><img src="images/컴.jpg" width="1219" height="258" border="0"></p> </body>
</html>
|
|||||
| 다음글 | 4. 태그 모음 |
|---|