명품웹프로그래밍 1
2 강의목표 1. 자바스크립트언어의요소와구조를이해한다. 2. 자바스크립트코드를웹페이지에삽입하는방법을안다. 3. 자바스크립트로브라우저에출력하고사용자입력받는방법을안다. 4. 자바스크립트에서다루는데이터타입과변수에대해이해한다. 5. 자바스크립트의연산자의종류를알고사용할수있다. 6. 자바스크립트의조건문의종류를알고사용할수있다. 7. 자바스크립트의반복문의종류를알고사용할수있다. 8. 자바스크립트함수를작성할수있다. 9. 사용자에게제공되는 eval(), parseint() 등자바스크립트함수를활용할수있다.
자바스크립트언어 3 Javascript 특징 1995 년넷스케이프개발 Netscape Navigator 2.0 브라우저에최초탑재 웹프로그래밍개념창시 HTML 문서에내장 조각소스코드 스크립트언어 인터프리터실행 컴파일필요없음 단순 C 언어구조차용 배우기쉬움 index.html <html> <head> <script> var sum = 0; for(n=0; n<10; n++) sum += n; alert( 합은 = + sum); </script> <head> <body> </body> </html> 자바스크립트코드처리기 자바스크립트코드 컴파일없이바로실행 웹브라우저
웹페이지에서자바스크립트의역할 4 사용자의입력및계산 마우스와키보드입력은자바스크립트로도가능 계산기능 웹페이지내용및모양의동적제어 HTML 태그의속성, 콘텐츠, CSS 프로퍼티값동적변경 브라우저제어 브라우저윈도우크기와모양제어 새윈도우열기 / 닫기 다른웹사이트접속 히스토리제어 웹서버와의통신웹애플리케이션작성 캔버스그래픽, 로컬 / 세션스토리지저장, 위치정보서비스등
자바스크립트코드의위치 5 자바스크립트코드작성이가능한위치 1. HTML 태그의이벤트리스너속성에작성 2. <script></script> 태그에작성 3. 자바스크립트파일에작성 4. URL 부분에작성 1. HTML 태그의이벤트리스너에자바스크립트코드작성
6 예제 6-1 HTML 태그의이벤트리스너속성에자바스크립트코드작성 <!DOCTYPE html> <html> <head> <title> 이벤트리스너속성에자바스크립트코드 </title> </head> <body> <h3> 마우스올려보세요 </h3> <hr> <img src="media/apple.png" alt=" 이미지 " onmouseover="this.src='media/banana.png'" onmouseout="this.src='media/apple.png'"> </body> </html> 이벤트리스너속성 this 는현재 img 태그를가리키는자바스크립트키워드 자바스크립트코드 이미지에마우스를올리면바나나로내리면다시사과로바뀐다.
<script></script> 태그에자바스크립트작성 7 특징 <head></head> 나 <body></body> 내어디든가능 웹페이지내에여러번삽입가능
예제 6-2 <script> 태그에자바스크립트코드작성 8 <!DOCTYPE html> <html> <head><title>script 태그에자바스크립트작성 </title> <script> function over(obj) { obj.src="media/banana.png"; function out(obj) { obj.src="media/apple.png"; </script> </head> <body> <h3> 마우스올려보세요 </h3> <hr> <img src="media/apple.png" alt=" 이미지 " onmouseover="over(this)" onmouseout="out(this)"> </body> </html> obj 는전달받은 img 태그를가리킴 this 는현재 img 태그를가리키는자바스크립트키워드
자바스크립트코드를별도파일에작성 9 자바스크립트코드파일저장 확장자.js 파일에저장 <script> 태그없이자바스크립트코드만저장 여러웹페이지에서불러사용 웹페이지마다자바스크립트코드작성중복불필요 <script> 태그의 src 속성으로파일을불러사용 <script src= 파일이름.js > // 이곳에자바스크립트코드추가작성가능 </script>
예제 6 3 자바스크립트파일작성및불러오기 10 예제 6 2 의 <script> 태그에들어있는자바스크립트코드를 lib.js 파일에저장하고불러와서사용하도록수정하라. /* 자바스크립트파일 lib.js */ function over(obj) { obj.src="media/banana.png"; function out(obj) { obj.src="media/apple.png"; lib.js lib.js 불러오기 <!DOCTYPE html> <html> <head><title> 외부파일에자바스크립트작성 </title> <script src="lib.js"> </script> </head> <body> <h3> 마우스올려보세요 </h3> <hr> <img src="media/apple.png" alt=" 이미지 " onmouseover="over(this)" onmouseout="out(this)"> </body> </html>
예제 6 4 링크의 href 에자바스크립트코드작성 11 <!DOCTYPE html> <html> <head><title>url 에자바스크립트작성 </title> </head> <body> <h3> 링크의 href 에자바스크립트작성 </h3> <hr> <a href="javascript:alert(' 클릭하셨어요?')"> 클릭해보세요 </a> </body> </html>
자바스크립트로 HTML 콘텐츠출력 12 자바스크립트로 HTML 콘텐츠를웹페이지에직접삽입 바로브라우저윈도우에출력 document.write() 예 ) document.write("<h3>welcome!</h3>"); document.writeln() writeln() 은텍스트에 \n' 을덧붙여출력 '\n' 을덧붙이는것은고작해야빈칸하나출력 다음줄로넘어가는것은아님
13 예제 6-5 document.write() 로웹페이지에 HTML 콘텐츠출력 <!DOCTYPE html> <html> <head><title>document.write() 활용 </title> </head> <body> <h3>document.write() 활용 </h3> <hr> <script> document.write("<h3>welcome!</h3>"); document.write("2 + 5 는 <br>"); document.write("<mark>7 입니다.</mark>"); </script> </body> </html>
자바스크립트다이얼로그 : 프롬프트다이얼로그 14 prompt(" 메시지 ", " 디폴트입력값 ") 함수 사용자로부터문자열을입력받아리턴 var ret = prompt(" 이름을입력하세요 ", " 황기태 "); if(ret == null) { // 취소버튼이나다이얼로그를닫은경우 else if(ret == "") { // 문자열입력없이확인버튼누른경우 else { // ret 에는사용자가입력한문자열
자바스크립트다이얼로그 : 확인다이얼로그 15 confirm(" 메시지 ") 함수 메시지 를출력하고 확인 / 최소 (OK/CANCEL) 버튼을가진다이얼로그출력 확인 버튼을누르면 true, ' 취소 ' 버튼이나강제로다이얼로그를닫으면 false 리턴 var ret = confirm(" 전송할까요 "); if(ret == true) { // 사용자가 " 확인 " 버튼을누른경우 else { // 취소버튼이나다이얼로그를닫은경우
자바스크립트다이얼로그 : 경고다이얼로그 16 alert(" 메시지 ") 함수 메시지 와 ' 확인 ' 버튼을가진다이얼로그출력, 메시지전달 alert(" 클릭하였습니다.");
자바스크립트식별자 17 식별자 자바스크립트프로그램의변수, 상수 ( 리터럴 ), 함수의이름 식별자만드는규칙 첫번째문자 : 알파벳 (A-Z, a-z), 언더스코어 (_), $ 문자만사용가능 두번째이상문자 : 알파벳, 언더스코어 (_), 0-9, $ 사용가능 대소문자는구분되어다루어짐 myhome 과 myhome 은다른식별자 자바스크립트예약어사용불가 false, for, if, null 등자바스크립트예약어사용불가 식별자사용사례 6variable; // (x) 숫자로시작할수없음 student_id; // (0) _code; // (0) 맞지만권하지않음 if; // (x) 예약어 if 사용불가 %calc // (x) % 사용불가 bar, Bar; // (0) bar와 Bar는서로다른식별자임에주의
자바스크립트문장 18 문장 자바스크립트프로그램의기본단위는 문장과문장을구분하기위해세미콜론 (;) 사용 i = i + 1 // (0) 한줄에한문장만있는경우세미콜론생략가능 j = j + 1; // (0) k = k + 1; m = m + 1; // (0) 한줄에여러문장 n = n + 1 p = p + 1; // (x) 첫번째문장끝에세미콜론이필요함 주석문 // 한라인주석. 라인의끝까지주석처리 /* 여러라인주석 */
데이터타입 19 자바스크립트언어에서다루는데이터종류 숫자타입 : 정수, 실수 ( 예 : 42, 3.14) 논리타입 : 참, 거짓 ( 예 : true, false) 문자열타입 ( 예 : 좋은세상, "a", "365", "2+4") 객체레퍼런스타입 : 객체를가리킴. C 언어의포인터와유사 null : 값이없음을표시하는특수키워드. Null, NULL과는다름 특징 자바스크립트에는문자타입없음. 문자열로표현
변수 20 변수 : 자바스크립트데이터저장공간 변수선언 : 변수이름을정하고, 저장공간할당 var 키워드로선언하는방법 var score; // 변수 score 선언 var year, month, day; // year, month, day의 3 개의변수선언 var address = 서울시 ; // address 변수를선언하고 서울시 로초기화 var 없이선언 age = 21; age 가이미선언된변수이면, 존재하는 age 에 21 저장 자바스크립트에는변수타입없음 변수타입선언하지않음 // var 없이, 변수 age 를선언하고 21 로초기화 var score; // 정상적인변수선언 int score; // 오류. 변수타입 int 없음 변수에저장되는값에대한제약없음 score = 66.8; // 실수도저장가능 score = high ; // 문자열로저장가능
지역변수와전역변수 21 지역변수 전역변수 함수내에 var 키워드로선언함수밖에선언되거나, 함수내에 var 키워드없이선언된변수 선언된함수내에서만사용 프로그램전역에서사용 var x; // 전역변수 x function f() { var y; // 지역변수 y 선언 x = 10; // 전역변수 x에 10 저장 y = 10; // 지역변수 y에 10 저장 z = 10; // 새로운전역변수 z 선언. 10으로초기화
this 로전역변수접근 22 지역변수와전역변수의이름을같을때 전역변수에접근하고자할때 : this. 전역변수 var x; // 전역변수 function f() { var x; // 지역변수 x = 1; // 지역변수 x에 1 저장 this.x = 100; // 전역변수 x에 100 저장
예제 6-6 지역변수와전역변수 23 <!DOCTYPE html> <html> <head> <title> 지역변수와전역변수 </title></head> <body> <h3> 지역변수와전역변수 </h3> <hr> <script> var x=100; // 전역변수 x function f() { // 함수 f() 선언 var x=1; // 지역변수 x document.write(" 지역변수 x=" + x); document.write("<br>"); document.write(" 전역변수 x=" + this.x); f(); // 함수 f() 호출 </script> </body> </html>
자바스크립트의상수 24 상수 (literal) 데이터값그자체 상수종류
문자열상수 25 이중인용부호 ( ) 와단일인용부호 ( ) 모두사용 문자열내에문자열 문자를그대로사용하고자하는경우 \ 로사용할것 var cite=" 그녀는 \" 누구세요 \" 라고했습니다.";
예제 6-7 상수 26 <!DOCTYPE html> <html> <head><title> 상수 </title></head> <body> <h3> 상수 </h3> <hr> <script> var oct = 015; // 015 는 8 진수. 10 진수로 13 var hex = 0x15; // 0x14 는 16 진수. 10 진수로 21 var condition = true; // True 로하면안됨 document.write("8 진수 015 는십진수로 " + oct + "<br>"); document.write("16 진수 0x15 는십진수로 " + hex + "<br>"); document.write("condition 은 " + condition + "<br>"); document.write(' 문자열 : 단일인용부호로도표현 ' + "<br>"); document.write(" 그녀는 \" 누구세요 \" 라고했습니다."); </script> </body> </html>
자바스크립트의식과연산 27 자바스크립트의연산과연산자종류 산술연산자 5 가지 : 더하기 (+), 빼기 (-), 곱하기 (*), 나누기 (/), 나머지 (%) var x = 32; var total = 100 + x*2/4-3; // total 은 113 연산의결과는항상실수 var div = 32/10; // div = 3.2
예제 6-8 산술연산 28 <!DOCTYPE html> <html> <head><title> 산술연산 </title></head> <body> <h3> 산술연산 </h3> <hr> <script> var x=32; var total = 100 + x*2/4-3; // total 은 113 var div = x / 10; // div 는 3.2 var mod = x % 2; // x 를 2 로나눈나머지, 0 document.write("x : " + x + "<br><br>"); document.write("100 + x*2/4-3 = " + total + "<br>"); document.write("x/10 = " + div + "<br>"); document.write("x%2 = " + mod + "<br>"); </script> </body> </html>
증감연산자 29 증감연산자 : ++, -- (a) 전위연산자 a = 1; b = ++ a; 2 b=2 1 a=2 (b) 후위연산자 a = 1; b = a ++; 1 b=1 2 a=2
대입연산자 30 대입연산 : 오른쪽식의결과를왼쪽에있는변수에대입 var a=1, b=3; a = b; // a에 b의값이대입되어 a=3, b=3이된다. a += b; // a = a + b의연산이이루어져, a=6, b=3이된다. 대입연산자종류
예제 6 9 대입연산 31 <!DOCTYPE html> <html> <head><title> 대입연산 </title></head> <body> <h3> 대입연산 </h3> <hr> <script> var x=3, y=3, z=3; document.write("x=" + x + ", y=" + y); document.write(", z=" + z + "<br><br>"); x += 3; // x=x+3 -> x=6 y *= 3; // y=y*3 -> y=9 z %= 2; // z=z%2 -> z=1 document.write("x += 3; 실행후, x=" + x + "<br>"); document.write("y *= 3; 실행후, y=" + y + "<br>"); document.write("z %= 2; 실행후, z=" + z); </script> </body> </html>
비교연산자 32 비교연산 : 두값비교, true 나 false 의결과를내는연산 var age = 25; var result = (age > 20); // age 가 20 보다크므로 result 는 true 비교연산자종류
예제 6-10 비교연산 33 <!DOCTYPE html> <html> <head><title> 비교연산 </title></head> <body> <h3> 비교연산 </h3> <hr> <script> var x=13, y=7; document.write("x=" + x + ", y=" + y + "<br><br>"); document.write("x == y : " + (x == y) + "<br>"); document.write("x!= y : " + (x!= y) + "<br>"); document.write("x >= y : " + (x >= y) + "<br>"); document.write("x > y : " + (x > y) + "<br>"); document.write("x <= y : " + (x <= y) + "<br>"); document.write("x < y : " + (x < y) + "<br>"); </script> </body> </html>
논리연산자 34 논리연산 : AND, OR, NOT var score = 90; var age = 20; var res = ((score > 80) && (age < 25)); // res=true 논리연산종류
예제 6 11 논리연산 35 <!DOCTYPE html> <html> <head><title> 논리연산 </title></head> <body> <h3> 논리연산 </h3> <hr> <script> var x=true, y=false; document.write("x=" + x + ", y=" + y + "<br><br>"); document.write("x && y : "+ (x&&y) +"<br>"); document.write("x y : "+ (x y) +"<br>"); document.write("!x : " + (!x) +"<br>"); document.write("<hr>"); document.write("(3>2) && (3<4) : " + ((3>2)&&(3<4)) + "<br>"); document.write("(3==-2) (-1<0) : " + ((3==2) (-1<0))); </script> </body> </html>
조건연산자 36 조건연산 condition? expt : expf condition이 true이면전체결과는 expt의계산값 false이면 expf의계산값 var x=5, y=3; var big = (x>y)? x : y; // (x>y) 가 true 이므로 x 값 5 가 big 에대입된다.
예제 6 12 조건연산 37 <!DOCTYPE html> <html> <head><title> 조건연산 </title></head> <body> <h3> 조건연산 </h3> <hr> <script> var a=3, b=5; document.write("a=" + a + ", b=" + b + "<br><br>"); document.write(" 두수의차이 : " + ((a>b)?(a-b):(b-a))); </script> </body> </html>
비트연산 38 비트개념 바이트 x = 10; x 0 0 0 0 1 0 1 0 비트 비트연산종류 비트들끼리의비트논리연산 비트시프트연산
비트논리연산 39 비트논리연산
비트시프트연산 40 시프트 : 저장공간에서비트들의오른쪽 / 왼쪽이동
예제 6 13 비트연산 41 <!DOCTYPE html> <html><head><title> 비트연산 </title> <script> function digit8(v) { // 숫자 v를 8비트 2진수로변환 var str=""; for(i=0; i<8; i++, v<<=1) { if((v & 0x80)) str += "1"; else str += "0"; return str; </script> </head> <body> <h3> 비트논리연산과시프트연산 </h3> <hr> <script> var x=10, y=3; document.write("<pre>"); document.write("x=" + x + ", y=" + y + "<br>"); document.write("x : " + digit8(x) + "<br>"); document.write("y : " + digit8(y) + "<br>"); document.write("<hr>"); document.write("x & y : " + digit8(x&y) + "<br>"); document.write("x y : " + digit8(x y) + "<br>"); document.write("x ^ y : " + digit8(x^y) + "<br>"); document.write("~x : " + digit8(~x) + "<br>"); document.write("<hr>"); document.write("x << 1 : " + digit8(x<<1) + " (" + (x<<1) + ")<br>"); document.write("x >> 1 : " + digit8(x>>1) + " (" + (x>>1) + ")<br>"); document.write("x >>> 1: " + digit8(x>>>1) + " (" + (x>>>1) + ")"); document.write("</pre>"); </script> </body> </html> 곱하기 2 효과 나누기 2 효과
문자열연산자 42 문자열연결 +, += 순서에유의 abc + de // abcde abc + 23 // abc23 23 + abc // 23abc 23 + 35 // 2335 23 + 35 // 58, 정수더하기 23 + 35 + abc ; // 23 + 35 -> 58로먼저계산, 58 + abc -> 58abc abc + 23 + 35; // abc + 23 -> abc23 로먼저계산, abc23 + 35 -> abc2335 문자열비교 비교연산자 (!=, ==, >, <, <=, >=) 는문자열비교에사용 사전순으로비교결과리턴 var name = "kitae"; var res = (name == "kitae"); // 비교결과 true, res = true var res = (name > park ); // name 이 park 보다사전순으로앞에나오므로 res = false
예제 6-14 문자열연산 43 <!DOCTYPE html> <html> <head><title> 문자열연산 </title></head> <body> <h3> 문자열연산 </h3> <hr> <script> document.write("abc" + 23 + "<br>"); document.write(23 + "abc" + "<br>"); document.write(23 + "35" + "<br>"); document.write(23 + 35 + "<br>"); document.write(23 + 35 + "abc" + "<br>"); document.write("abc" + 23 + 35 + "<br><hr>"); var name = "kitae"; document.write(name == "kitae"); document.write("<br>"); document.write(name > "park"); </script> </body> </html>
if, if-else 44 if, if-else 문 if( 조건식 ) { 실행문 // 조건식이참인경우 if(a > b) { document.write( a 가크다 ); if( 조건식 ) { 실행문 1 // 조건식이참인경우 else { 실행문 2 // 조건식이거짓인경우 if(a > b) { document.write( a 가크다 ); else { document.write( a 가크지않다 ); if( 조건식 1) { 실행문 1 // 조건식 1 이참인경우 else if( 조건식 2) { 실행문 2 // 조건식 2 가참인경우 else { 실행문 n; // 앞의모든조건이거짓인경우 if(a > b) { document.write( a 가크다 ); else if(a < b) { document.write( b 가크다 ); else document.write( a 와 b 는같다 );
예제 6 15 if-else 사용 45 <!DOCTYPE html> <html> <head><title>if-else</title></head> <body> <h3>if-else 를이용한학점매기기 </h3> <hr> <script> var grade; var score = prompt(" 황기태님점수를입력하세요 ", 100); score = parseint(score); // 문자열을숫자로바꿈 if(score >= 90) // score 가 90 이상 grade = "A"; else if(score >= 80) // 80 이상 90 미만 grade = "B"; else if(score >= 70) // 70 이상 80 미만 grade = "C"; else if(score >= 60) // 60 이상 70 미만 grade = "D"; else // 60 미만 grade = "F"; document.write(score + " 는 " + grade + " 입니다.<br>") </script> </body> </html>
switch 문 46 switch 문 값에따라서로다른코드를실행할때, switch 문적합 switch( 식 ) { case 값 1: // 식의결과가값 1 과같을때실행문장 1; break; case 값 2: // 식의결과가값 2 와같을때실행문장 2; break;... case 값 m: 실행문장 m; // 식의결과가값과같을때 break; default: // 어느값과도같지않을때실행문장 n; var fruits=" 사과 "; switch(fruits) { case " 바나나 ": price = 200; break; case " 사과 ": price = 300; break; case " 체리 ": price = 400; break; default: document.write(" 팔지않습니다."); price = 0; // switch 문의실행결과 price=300
case 문의 값 47 case 문의 값 은상수 ( 리터럴 ) 만가능 case 1 : case 2.7 : case Seoul : case true : case 문의 값 에변수나식은사용불가 case a : case a > 3 : // 오류. 변수 a 사용불가 // 오류. 식 (a>3) 사용불가
switch 문에서 break 문의역할 48 break 문 switch 문종료 break; 문을만날때까지아래로코드계속실행 var city="seoul"; switch(city) { case "Seoul": document.write(" 서울 "); break; case "NewYork": document.write(" 뉴욕 "); break; case "Paris": document.write(" 파리 "); break; 서울뉴욕 var day=" 월 "; switch(day) { case " 월 ": case " 화 ": case " 수 ": case " 목 ": case " 금 ": document.write(" 정상영업 "); break; case " 토 ": case " 일 ": document.write(" 휴일 "); break; 정상영업 (a) break; 를만날때까지아래로실행을계속하는사례 (b) 여러 case 에대해동일한코드를실행하도록의도적으로 break; 를생략한경우
예제 6 16 switch 문사용 49 <!DOCTYPE html> <html> <head><title>switch</title></head> <body> <h3>switch 문으로커피주문 </h3> <hr> <script> var price = 0; var coffee = prompt(" 무슨커피드릴까요?", ""); switch(coffee) { case "espresso" : case " 에스프레소 " : price = 2000; break; case " 카푸치노 " : price = 3000; break; case " 카페라떼 " : price = 3500; break; default : document.write(coffee + " 는없습니다."); espresso 나 에스프레소 의경우모두실행 if(price!= 0) document.write(coffee + " 는 " + price + " 원입니다."); </script> </body> </html>
반복문 50 for 문 // 0 에서 9 까지출력 for(var i=0; i<10; i++) { document.write(i); 0123456789 while 문 var i=0; while(i<10) { // i 가 0 에서 9 까지반복 document.write(i); i++; 0123456789 do-while 문 var i=0; do { // i 가 0 에서 9 까지반복 document.write(i); i++; while(i<10); 0123456789
예제 6 17 for 문으로 10px~35px 크기로출력 51 <!DOCTYPE html> <html> <head> <title>for 문 </title> </head> <body> <h3>for 문으로 10px~35px 크기출력 </h3> <hr> <script> for(var size=10; size<=35; size+=5) { // 5 씩증가 document.write("<span "); document.write("style='font-size:" + size + "px'>"); document.write(size + "px"); document.write("</span>"); </script> </body> </html>
예제 6 18 while 문으로 0~n 까지의합구하기 52 <!DOCTYPE html> <html> <head> <title>while 문 </title> </head> <body> <h3>while 문으로 0 에서 n 까지합 </h3> <hr> <script> prompt() 가리턴한것은문자열 var n = prompt("0 보다큰정수를입력하세요 ", 0); n = parseint(n); // 문자열 n 을숫자로바꿈 var i=0, sum=0; while(i<=n) { // i 가 0 에서 n 까지반복 sum += i; i++; document.write("0 에서 " + n + " 까지합은 " + sum); </script> </body> </html>
예제 6-19 do-while 문으로 0~n 까지합구하기 53 <!DOCTYPE html> <html> <head> <title>do-while 문 </title> </head> <body> <h3>do-while 문으로 0 에서 n 까지합 </h3> <hr> <script> prompt() 가리턴한것은문자열 var n = prompt("0 보다큰정수를입력하세요 ", 0); n = parseint(n); // 문자열 n 을숫자로바꿈 var i=0, sum=0; do { sum += i; i++; while(i<=n); // i 가 0~n 까지반복 document.write("0 에서 " + n + " 까지합은 " + sum); </script> </body> </html>
반복문내의 break 문과 continue 문 54 break 문 : 가장안쪽반복문하나만벗어나도록제어 for( ) {... break;............ for( ) { while( ) {... break;...... 현재반복문만벗어남 (a) 반복문벗어나기 (b) 중첩반복에서현재반복문만벗어남 continue 문 : 반복코드실행중단, 다음반복으로점프 for( 초기문 ; 조건식 ; 반복후작업 ) {... continue;... while( 조건식 ) {... continue;... do {... continue;... while( 조건식 );
예제 6-20 break 문 55 <!DOCTYPE html> <html> <head> <title>break 문 </title> </head> <body> <h3>1 에서얼마까지더해야 3000 을넘는가?</h3> <hr> <script> var i=0, sum=0; while(true) { // 무한반복 sum += i; if(sum > 3000) break; // 합이 3000 보다큼. 반복문벗어남 i++; document.write(i + " 까지더하면 3000 을넘음 : " + sum); </script> </body> </html>
예제 6-21 continue 문 56 <!DOCTYPE html> <html> <head> <title>continue 문 </title> </head> <body> <h3>3 으로나눈나머지가 1 인수만더하기 </h3> <hr> <script> var sum=0; for(i=1; i<=10; i++) { // i 가 1 에서 10 까지반복 if(i%3!= 1) // 3 으로나눈나머지가 1 이아닌경우 continue; // 다음반복으로점프 (i++ 코드로 ) document.write(i + " "); sum += i; document.write(" 합은 " + sum); </script> </body> </html>
함수 57 함수란? 목적을가지고작성된코드블록 데이터전달받아처리한후결과를돌려주는코드블록 함수개념 애더야더하기부탁해
함수의구성과호출 58 함수의구성 함수선언 함수이름 매개변수 function 함수이름 (arg1, arg2,..., argn) {... 프로그램코드... 결과를리턴하는 return 문 function adder ( a, b ) { var sum; sum = a + b; return sum; // 덧셈합리턴 반환키워드 반환값 함수호출 함수의코드실행요청 함수호출문 var n = adder(10, 20); function adder(a, b) { 호출 var sum; sum = a + b; return sum; 30 함수코드
예제 6 22 adder() 함수작성및호출 59 <!DOCTYPE html> <html> <head> <title> 함수 </title> <script> function adder(a, b) { // 함수작성 var sum; sum = a + b; return sum; </script> </head> <body> <h3> 함수 adder()</h3> <hr> <script> var n = adder(24567, 98374); // 함수호출 document.write("24567 + 98374 는 " + n + "<br>"); </script> </body> </html>
자바스크립트에서제공하는전역함수 60 대표적인자바스크립트함수 eval() 함수 예 ) var res = eval("2*3+4*6"); // res 는 32 parseint() 함수 예 ) var l = parseint("32"); // "32" 를 10진수로변환, 정수 32 리턴 var n = parseint("0x32"); // "0x32" 를 16진수로해석, 정수 50 리턴 isnan() 함수 예 ) isnan(32) // false 리턴 isnan(32) // false 리턴
예제 6 23 eval(), parseint(), isnan() 61 <!DOCTYPE html> <html> <head> <title> 자바스크립트전역함수 </title> <script> function evalparseintisnan() { var res = eval("2*3+4*6"); // res 는 32 document.write("eval(\"2*3+4*6\") 는 32<br>"); var m = parseint("32"); document.write("parseint(\"32\") 는 " + m + "<br>"); var n = parseint("0x32"); document.write("parseint(\"0x32\") 는 " + n + "<br><br>"); // "hello" 는정수로변환할수없으므로 parseint("hello") 는 NaN 리턴 n = parseint("hello"); if(isnan(n)) // true document.write("hello는숫자가아닙니다."); </script> </head> <body> <h3>eval(), parseint(), isnan()</h3> <hr> <script> evalparseintisnan(); </script> </body> </html>
예제 6 24 구구단출력함수만들기 62 <!DOCTYPE html> <html><head><title> 함수만들기 </title> <script> function gugudan(n) { // 함수작성 var m = parseint(n); // 문자열 n을숫자로바꿈 if(isnan(m) m < 1 m > 9) { n이 1~9사이의숫자 alert(" 잘못입력하셨습니다."); 가아닌경우처리 return; for(var i=1; i<=9; i++) { // i는 1~9까지반복 document.write(m + "x" + i + "=" + m*i + "<br>"); </script> </head> <body> <h3> 구구단출력함수만들기 </h3> <hr> <script> var n = prompt(" 구구단몇단을원하세요 ", ""); // n은문자열 gugudan(n); // 함수호출 </script> </body> </html>