Download presentation
Presentation is loading. Please wait.
1
Chapter09 JavaScript 구구단표 만들기
HTML & JavaScript
2
Contents 1. 주석 2. 조건문 3. 반복문 4. 함수 5. 구구단표 만들기 Chapter09
JavaScript 구구단표 만들기
3
주석 형식 : // 한 줄 주석 /* 여러 줄 주석 */ 예제 :
Chapter09 형식 : // 한 줄 주석 /* 여러 줄 주석 */ 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- /* 주석문을 사용하는 방법 자바스크립트 주석문은 C언어와 같은 방법으로 사용함 */ // document.write("주석 사용하기") //--> </SCRIPT> JavaScript 구구단표 만들기
4
If 문 if문 지정한 조건식의 참, 거짓 여부에 따라 해당 문장을 실행하는 조건문
Chapter09 if문 지정한 조건식의 참, 거짓 여부에 따라 해당 문장을 실행하는 조건문 if와 else로 구성하고 else는 생략 가능 조건식이 참일 경우에는 if 다음에 오는 명령을 실행하며 거짓일 경우에는 else 다음에 오는 명령을 실행 만약 조건에 따라 여러 명령문을 실행하고자 할 때에는 해당하는 명령문에 ‘{ }’로 묶어 주면 됨 JavaScript 구구단표 만들기
5
If 문 형식 : // if문의 사용방법 1 if (조건식) 문장 else // if문의 사용방법 2
Chapter09 형식 : // if문의 사용방법 1 if (조건식) 문장 else // if문의 사용방법 2 // if문의 사용방법 3 if (조건식) { 문장 } else { } JavaScript 구구단표 만들기
6
If문 <HTML> <SCRIPT LANGUAGE="JAVASCRIPT"> <!--
Chapter09 <HTML> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- var result=prompt("당신의 점수는?","0") if (result >= 90) document.write("A 학점입니다.") else document.write("F 학점입니다.") //--> </SCRIPT> <BODY> </BODY> </HTML> JavaScript 구구단표 만들기
7
Else if문 else if문 조건식을 2개 이상 사용하여 3개 이상의 분기로 나누어 실행하고자 할 때 사용
Chapter09 else if문 조건식을 2개 이상 사용하여 3개 이상의 분기로 나누어 실행하고자 할 때 사용 else if를 사용하여 추가적인 조건식을 입력 JavaScript 구구단표 만들기
8
Else if문 형식 : if (조건식) 문장 else if (조건식) else 예제 :
Chapter09 형식 : if (조건식) 문장 else if (조건식) else 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- if(strLevel >= 90) document.write("당신의 학점은 A입니다."); else if(strLevel >= 80) document.write("당신의 학점은 B입니다."); else document.write("당신의 학점은 C입니다."); //--> </SCRIPT> JavaScript 구구단표 만들기
9
Chapter09 <HTML><BODY> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- var result=prompt("당신의 점수는?","점수를 입력...“) if (result >= 90) document.write("당신의 학점은 A입니다") else if (result >= 80) document.write("당신의 학점은 B입니다") else if (result >= 70) document.write("당신의 학점은 C입니다") else if (result >= 60) document.write("당신의 학점은 D입니다") else document.write("당신의 학점은 F입니다") //--> </SCRIPT> </BODY></HTML> JavaScript 구구단표 만들기
10
Switch문 switch문 하나의 조건식만을 판단
Chapter09 switch문 하나의 조건식만을 판단 그 결과 값을 case문의 값과 비교해 해당 문장을 실행하는 구조를 가지고 있음 default는 case로 지정된 값 이외의 경우에 대한 명령을 실행할 경우 사용 JavaScript 구구단표 만들기
11
Switch문 형식 : switch (변수) { case 값 1 : 문장 break; case 값 2 : default : }
Chapter09 형식 : switch (변수) { case 값 1 : 문장 break; case 값 2 : default : } 예제 : switch(strLevel) { case "A": document.write("당신은 우등생입니다."); break; case "B": document.write("조금만 더 노력하세요."); case "C": document.write("더욱 많은 노력이 필요합니다."); default: document.write("공부에 관심이 없으신 분이군요."); } JavaScript 구구단표 만들기
12
For문 for문 지정한 회수만큼 { } 안의 명령을 반복 수행
Chapter09 for문 지정한 회수만큼 { } 안의 명령을 반복 수행 기본적으로 3개의 값을 지정하게 되는데, 그것은 초기 값, 종료 조건, 증감 식으로 구성됨 JavaScript 구구단표 만들기
13
For문 형식 : for (초기값; 최종값; 증감) { 문장; ...... } 예제 :
Chapter09 형식 : for (초기값; 최종값; 증감) { 문장; ...... } 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- for (var i = 1; i <= 10; i++){ document.write("회원님의 방문횟수는" + i + "입니다<BR>"); } //--> </SCRIPT> JavaScript 구구단표 만들기
14
프로그램 9-5 [그림 9-14] for의 실행결과 [그림 9-15] for의 실행결과 Chapter09
JavaScript 구구단표 만들기
![프로그램 9-5 [그림 9-14] for의 실행결과 [그림 9-15] for의 실행결과 Chapter09](http://slidesplayer.org/slide/14636604/90/images/14/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8+9-5+%5B%EA%B7%B8%EB%A6%BC+9-14%5D+for%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%5B%EA%B7%B8%EB%A6%BC+9-15%5D+for%EC%9D%98+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+Chapter09.jpg "JavaScript 구구단표 만들기.")
15
While문 while문 사용하는 이유는 for문과 비슷하지만 반복 조건의 지정하는 방법이 다름
Chapter09 while문 사용하는 이유는 for문과 비슷하지만 반복 조건의 지정하는 방법이 다름 while문의 옆에 ( ) 안에는 조건식을 입력하며 반복 실행되는 명령은 { }안에 넣음 조건식에 지정한 변수의 값의 증감식은 { }안에 넣음 조건식이 참인 동안에만 반복적으로 { }안의 명령을 실행 만약 증감식을 혹시나 넣지 않는다면 while문 안의 명령들이 무한반복 실행되어 무한 루프에 빠지게 됨 JavaScript 구구단표 만들기
16
While문 형식 : while (조건식) { 문장; 증감식; } 예제 :
Chapter09 형식 : while (조건식) { 문장; 증감식; } 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- var intCount = 1; while(intCount < 10){ document.write("회원님은" + intCount + "번째 방문입니다.<BR>"); intCount++; } //--> JavaScript 구구단표 만들기
17
Do while문 do while문 명령문들을 먼저 실행한 후 조건식이 참인지 거짓인지 판단
Chapter09 do while문 명령문들을 먼저 실행한 후 조건식이 참인지 거짓인지 판단 명령문은 조건에 상관없이 최소 1번 실행 JavaScript 구구단표 만들기
18
Do while문 형식 : do { 문장; ...... 증감식; } while (조건식) 예제 :
Chapter09 형식 : do { 문장; ...... 증감식; } while (조건식) 예제 : <SCRIPT LANGUAGE="JavaScript"> <!-- var intCount = 1; do { document.write("회원님은" + intCount + "번째 방문입니다.<BR>"); intCount ++; } while (intCount < 10) //--> </SCRIPT> JavaScript 구구단표 만들기
19
조건문, 반복문, 함수를 이용한 구구단 표 만들기 ￭ 사용자로부터 두 개의 숫자를 입력받아야 한다.
Html+javaScript 조건문, 반복문, 함수를 이용한 구구단 표 만들기 지시 사항 ￭ 사용자로부터 두 개의 숫자를 입력받아야 한다. ￭ 구구단 테이블의 제일 처음 행의 셀에는 “9단”과 같은 표현 ￭ 셀의 색은 “Lightgreen” 색으로 하며 ￭ 사용자가 입력한 두 개의 숫자에 대한 계산 결과는 다르게 표시 ￭ 이 셀은 글자색이 푸른색이고 크기는 3
20
Html+javaScript 완성 화면 1
21
Html+javaScript 완성 화면 2
22
Html+javaScript 완성 소스 (1). <HTML> <head><TITLE>제어문 예제</TITLE></head> <body> <FONT SIZE=5 COLOR=BLUE>제어문을 이용한 구구단 만들기</FONT><BR><BR> <TABLE BORDER=1 cellspacing=0 cellpadding=2> <TR> <script language="javascript"> var i, j, x, y, result x= prompt("구구단을 계산할 첫번째 숫자를 입력하시오.") y= prompt("구구단을 계산할 두번째 숫자를 입력하시오.") // 칸을 만들면서 1부터 9까지 제목을 출력 for(i=1; i<=9; i++) { document.write("<TD ALIGN=CENTER BGCOLOR=Lightgreen HEIGHT=30 VALIGN=MIDDLE>"); document.write(i + "단"); document.write("</TD>"); } document.write("</TR>");
23
완성 소스 (2) Html+javaScript for(i=1; i<=9; i++) {
document.write("<TR>"); for(j=1; j<=9; j++) { //각 셀에 곱셈결과를 계산하여 출력 if((i==x) && (j==y)) { document.write("<TD BGCOLOR=Seashell HEIGHT=30 VALIGN=MIDDLE>"); document.write("<FONT size=4 COLOR=BLUE>"); } else { document.write("<FONT COLOR=BLACK>"); document.write("<TD HEIGHT=30 VALIGN=MIDDLE>"); } result = i * j; document.write(i + " X " + j + " = "); document.write(result + "<BR>"); document.write("</FONT></TD>"); } document.write("</TR>"); } </script> </TABLE> </body> </html>
Similar presentations
