1 / 10

자바스크립트 시작하기 실습 예제

4. 자바스크립트 시작하기 실습 예제. 자바스크립트 기본 문서를 만들어보자 !. 예제 1_ 예제설명 및 결과화면. 예제설명 사용자가 원하는 단의 구구단을 출력하는 페이지를 만들어보자 .

lynn
Download Presentation

자바스크립트 시작하기 실습 예제

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 4 자바스크립트 시작하기 실습 예제 자바스크립트 기본 문서를 만들어보자!

  2. 예제1_예제설명 및 결과화면 예제설명 사용자가 원하는 단의 구구단을 출력하는 페이지를 만들어보자. 􄤎원하는 구구단의 단을 내장 함수 prompt( )로 입력하면, 해당 구구단을 출력한다. 􄤎배경 이미지 : back3.gif 결과화면

  3. <HTML> <HEAD><TITLE> 예제1 </TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- var dan=prompt("원하는 구구단은?","3"); for(i=1;i<=9;i++){ document.write(dan+"*" + i +" = "+ dan*i + "<br>"); } --></script> </HEAD> <BODY background="back3.gif" align="center"></BODY> </HTML>

  4. 예제2_예제설명 및 결과화면 예제설명 입력창에 점수를 입력하면 해당 점수에 따라서 합격과 불합격을 표기하는 페이지를 만들어보자. 􄤎합격과 불합격의 기준은 점수가 60점 이상이면 합격으로 처리한다. 􄤎사용 이미지 : tal4.gif 결과화면

  5. <html><head><title> 예제2 </title> <script language="JavaScript"> <!-- function justify(){ Total=frm.total.value if(Total>=60) result="합격" else result="불합격" frm.Result.value=result } // 자바스크립트 끝 --></script></head> <body><center><h3>합격자 조회 (60점 이상이면 합격!)</h3> <img src="tal4.gif"><br><br> <form name="frm"> 시험 점수 : <input type="text" size=5 name="total"> &nbsp;&nbsp; <input type="button" class=button value="결과확인" onclick="justify()">&nbsp;&nbsp; 결과 : <input type="text" size=10 name="Result"> </form></center></body></html>

  6. 예제3_예제설명 및 결과화면 예제설명 퀴즈 게임 페이지의 기본 형태를 만들어보자. 􄤎문제를 읽고, alert( ) 함수를 이용하여 정답을 출력한다. 􄤎<table> 태그를 이용하고, 퀴즈 내용은 결과 화면과 같이 작성한다. 결과화면

  7. <HTML><HEAD><TITLE>예제3</TITLE></HEAD> <BODY bgcolor=F2F6CD> <TABLE width=500 border=0 cellpadding=0 cellspacing=0> <caption> 퀴즈 게임</caption> <tr> <td bgcolor=F8DAA8 colspan=2> 자바스크립트에서 자바란 무슨 뜻을 가진 말일까요?</td> <td><input type="button" value="정답보기" onclick="alert('커피이름')"></td> </tr> </TABLE><body></html>

  8. 예제4_예제설명 및 결과화면 예제설명 덧셈과 뺄셈만 가능한 미니 계산기 페이지를 만들어보자. 􄤎계산기는 <table> 태그를 사용하여 결과 화면과 같이 작성한다. 􄤎덧셈과 뺄셈 연산은 eval( ) 함수를 사용한다. 􄤎2개의 입력 값이 숫자가 아닐 때는 isNaN( ) 함수를 이용한다. 결과화면

  9. <HTML><HEAD><TITLE>예제모음14</TITLE> <SCRIPT LANGUAGE="javascript"> <!-- var x function ch(x){ n1=eval(document.gg.f1.value); n2=eval(document.gg.f2.value); if(x=="a"){ n3=n1+n2; document.gg.f3.value=n3; } else if(x=="b"){ n3=n1-n2; document.gg.f3.value=n3; } } // 자바스크립트 끝--> </SCRIPT></HEAD> <BODY> <center> <table border> <form name="gg"> <caption>미니 계산기</caption> <tr><td colspan=3>숫자1<td colspan=3><input type="text" name="f1"><br> </tr> <tr><td colspan=3>숫자2<td colspan=3><input type="text" name="f2"><br> </tr> <tr align=center> <td colspan=3> <input type="button" value=" + " onclick="ch('a')";>&nbsp; <td colspan=3> <input type="button" value=" - " onclick="ch('b')";>&nbsp; </tr> <tr><td colspan=3>결과 : <td colspan=3><input type="text" name="f3"><br> </tr> </form></table></center></body></html>

More Related