슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

세창 강
5 years ago
Views:

1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 5 장함수와객체 최황규, 하진영공저

2 목차 제 5 장함수와객체 5.1 함수 5.2 객체 2

3 5.1 함수 함수란특정동작을수행하는코드를의미함 함수를사용하면기능별로소스코드를구분하여사용할수있어재사용이용이함 사용자가직접정의할수있는사용자정의함수와자바스크립트에서기본적으로제공하는내장함수로나눌수있음 3

4 5.1.1 사용자정의함수 특정동작을수행하는코드를사용자가직접함수의형태로정의하여사용하는것을의미함 함수를정의하기위해서는 function 이란키워드를사용함 function 함수이름 ( 매개변수1, 매개변수2, 매개변수3, ) { statement; } function 키워드다음함수이름을지정하고 () 안에매개변수를설정하고, {} 안에수행내용을기술함 4

5 5.1.1 사용자정의함수 함수는사용하기전에정의되어있어야함. 일반적으로 HTML 문서에서는 <HEAD> 안에함수를정의함 매개변수란함수안에서사용될변수를전달받는것을의미하며없을수도있고하나이상존재할수도있음 결과값전달을위함 return 문은일반적으로함수에서수행한결과를 caller 에게전달하는것을의미함 예제를통해각각의경우를알아봄 5

6 5.1.1 사용자정의함수 사용자정의함수예제 1 (1) 예제 5-1 user_function1.html <html><head> <title> Java Script 사용자정의함수 </title> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> function fun( ) { var value=2; document.write(" 구구단 "+"<br>"); document.write(value+" 단입니다."+"<br>"); for (i=1 ; i < 10; i ++) { document.write(value +" * " + i +" = " + value*i); } } document.write("<br>"); </script> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> //java Script 프로그램 document.write(" 함수호출하기전 "+"<br><br>"); fun() document.write("<br>"+" 함수호출한후 "+"<br>"); </SCRIPT> </body> </html> 6

7 5.1.1 사용자정의함수 사용자정의함수예제 1 (2) 7

8 5.1.1 사용자정의함수 사용자정의함수예제 2 (1) 예제 5-2 user_function2.html <html> <head> <title> Java Script 사용자정의함수 </title> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> function fun(a) { } var value=a; document.write(" 구구단 "+"<br>"); document.write(value+" 단입니다."+"<br>"); for (i=1 ; i < 10; i ++) { } document.write(value +" * " + i +" = " + value*i); document.write("<br>"); </script> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> //java Script 프로그램 document.write(" 함수호출하기전 "+"<br><br>"); fun(5) document.write("<br>"+" 함수호출한후 " +"<br>"); </SCRIPT> </body> </html> 8

9 5.1.1 사용자정의함수 사용자정의함수예제 2 (2) 9

10 5.1.1 사용자정의함수 사용자정의함수예제 3 (1) 예제 5-3 Return_function.html <html> <head> <title> return 문사용하기 </title> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> function fun(a,b) { } return a+b; </script> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> //java Script 프로그램 var value; document.write(" 두수 (5,3) 의합구하기 " +"<br><br>"); value=fun(5,3); document.write(" 두수의합은 "+ value); </SCRIPT> </body> </html> 10

11 5.1.1 사용자정의함수 사용자정의함수예제 3 (2) 11

12 5.1.2 내장함수 자바스크립트자체에서자주사용하는함수위주로미리정의되어있는함수를의미함 자바스크립트내장함수 alert() 종류설명종류설명 confirm() prompt() [ 확인 ] 단추가있는메시지창을열어줌 [ 확인 ], [ 취소 ] 단추가있는메시지창을열어줌. [ 확인 ] 단추는 true, [ 취소 ] 단추는 false 를리턴 입력상자가있는메시지창을열어줌 12 escape() unescape() isnan() ISO-Latin-1 문자셋을아스키값으로바꾸어줌 아스키값을 ISO-Latin-1 문자셋으로바꾸어줌 전달받은값이숫자인지문자인지판별하여숫자가아닌경우 true 를반환 eval() 문자열을수식으로바꿔줌 isfinite() 전달받은값이유리수인지판단하여유 리수인경우 true 반환 parsefloat() 문자열을부동소수점으로바꿔줌 Number() 객체를수치로변환 parseint() 문자열을정수로바꿔줌 String() 객체를문자열로변환

13 5.1.2 내장함수 alert() 경고창사용법 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> </SCRIPT> alert(" 메시지 ") confirm() 확인창사용법 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> var result; result = confirm(" 메시지 "); // " 확인 " 버튼은 true, " 취소 " 버튼은 false </SCRIPT> 13

14 5.1.2 내장함수 prompt() 입력창사용법 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> var value; value=prompt(" 메시지 "," 초기값 "); </SCRIPT> eval() 사용법 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> var result; result = eval(" 문자열 "); // 이때문자열은수식이며반환값은수식의계산값이다. </SCRIPT> 14

15 5.1.2 내장함수 내장함수예제 -1 (1) 예제 5-5 Formula.html <html> <head><title> 내장함수 -1</title> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> function fun(formula) { } var result; result = eval(formula); alert(" 입력하신수식의결과는 "+result); </script></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> //java Script 프로그램 alert(" 프로그램시작 "); var con=1; var formula; while(1) { } formula = prompt(" 수식을입력하세요 ", " 여기에입력하세요 "); con = confirm(" 제대로수식을입력하셨나요?"); if (con==true) { } else fun(formula); break continue document.write(" 프로그램이종료하였습니다."); </SCRIPT></body></html> 15

16 5.1.2 내장함수 내장함수예제 -1 (2) 16

17 5.1.2 내장함수 parsefloat() 문자열부동소수점변환 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> result = parsefloat("3.14"); // 이때반환값은부동소수점형이다. </SCRIPT> parseint() 문자열정수로변환 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> result = parseint("1000"); // 이때반환값은정수형이다 </SCRIPT> 17

18 5.1.2 내장함수 String() 객체를문자열로변환 <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> result = String(3.14); // 이때반환값은문자열이다. </SCRIPT> 18

19 5.1.2 내장함수 내장함수예제 -2 (1) 예제 5-6 Transform.html <html> <head><title> 변환내장함수 </title></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> //java Script 프로그램 var number1 = "10"; var number2 ="3.14"; document.write(" 문자열을숫자로변환하기전 " +"<br><br>"); document.write("number1+ number2 ="); document.write(number1+number2); document.write("<br><br><br><br>"); document.write(" 문자열을숫자로변환한후 " +"<br><br>"); number1=parseint(number1); number2= parsefloat(number2); document.write("number1+ number2 ="); document.write(number1+number2); document.write("<br><br><br><br>"); document.write(" 숫자를다시문자열변환하기 " +"<br><br>"); number1=string(number1); number2=string(number2); document.write("number1+ number2 ="); document.write(number1+number2); </SCRIPT></body></html> 19

20 5.1.2 내장함수 내장함수예제 -2 (2) 20

21 5.2 객체 객체란실세계에서하나의표현가능한사물을객체라고함 객체는객체의특징을나타내는속성 (property) 와행동을나타내는메소드 (method) 로구성되며, 속성은변수, 메소드는함수를의미함 객체는함수와마찬가지로사용자정의객체와내장객체로나뉨 21

22 5.2.1 사용자정의객체 사용자정의객체를정의하고자할때는먼저필요한속성과메소드를결정해야함 함수와마찬가지로 function 키워드를사용하여정의함 function functionname1(arg1, arg2,...) // 메소드정의 { } statements function objectname(arg1, arg2,...) { objectname.propertyname; // 속성 objectname.functionname; // 메소드 } 22

23 5.2.1 사용자정의객체 사용자정의객체예제 -1 (1) 예제 5-7 Object_user.html <html> <head><title> 사용자정의객체 </title> <SCRIPT TYPE ="text/javascript" function speek() { LANGUAGE = "JavaScript"> document.write(" 제이름은 "+ this.name+" 입니다."+"<br>"); document.write(" 저는 "+ this.age+" 살입니다."+"<br>"); } function man(name, age) { } this.name = name; this.age = age; this.speek = speek; </script></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> man1 = new man(" 홍길동 ",19); man2 = new man(" 장철수 ",21); man1.speek(); man2.speek(); </SCRIPT> </body> </html> 23

24 5.2.1 사용자정의객체 사용자정의객체예제 -1 (2) 두개의객체를생성하여각각의메소드를이용하여이름과나이를출력함 객체는사용자가계획하여생성할수있고다양한객체를생성할수있음 또한한번생성한객체는다른스크립트에서도쉽게재사용이가능 24

25 5.2.2 내장객체 내장객체란내장함수와같이자바스크립트에서미리정의해놓은객체를의미함 그만큼자주사용되고중요한객체임으로사용법을정확히아는것이중요함 내장객체의종류도다양하고각각의메소드또한다양함, 따라서이번절에서는자주사용되는몇몇내장객체에대해서만알아봄 25

26 5.2.2 내장객체 내장객체의종류 (1) 종류 설 명 종류 설 명 Anchor 링크연결위치설정 ( 책갈피기능 ) Frame 프레임관련객체 Applet 자바애플릿을삽입하는데사용 Function 함수를생성하는객체 Area 이미지맵의각영역을정의 Hidden 숨겨진입력양식을위해사용 Argument 매개변수에관한정보를제공 History 웹브라우저에기록된주소관련객체 Array 배열을만들고관리하는데사용 Image 문서에삽입된그림에관한객체 Boolean 논리형객체를생성 Layer 레이어에관련된객체 Button 버튼입력양식을위해사용 Link 하이퍼링크에관련된객체 Checkbox 체크박스입력양식을위해사용 Location URL 주소에관련된정보를가지는객체 Date 날짜와시간을다루기위해사용 Math 수학계산을위한객체 Document 문서에관련된정보를위해사용 mimetype MIME 타입에관련된객체 Event 이벤트에관련된객체 Navigator 웹브라우저에관한정보를제공하는객체 FileUpload 파일업로드입력양식을위해사용 Number 문자열을숫자로바꾸는데관련된객체 Form 폼관련객체 Option 리스트상자에옵션메뉴에관련된객체 26

27 5.2.2 내장객체 내장객체의종류 (2) 종류 설 명 종류 설 명 Password 비밀번호입력양식을위한객체 String 문자열을처리하기위한객체 Plugin 플러그인에관련된객체 Submit 전송버튼에관련된객체 Radio 라디오버튼에관련된객체 Text 텍스트입력양식을위한객체 Reset 리셋버튼에관련된객체 Textarea 텍스트영역입력양식을위한객체 Screen 화면해상도나색상에관련된객체 Window 웹브라우저윈도우에관련된객체 Select 리스트박스에관련된객체 27

28 5.2.2 내장객체 Array 객체 Array 객체는배열을만들때사용됨 Array 객체구성 속 성 length 배열의길이를저장 메소드 concat(array a) 배열 a를대상배열의뒤에붙임 reverse() 대상배열의순서를뒤집어서저장함 slice(n1, n2) n1에서 n2까지의내용을잘라내어저장 (n2는포함되지않음 ) sort() 대상배열에저장된값을오름차순으로정렬함 28

29 5.2.2 내장객체 Array 생성예제 예제 5-8 Array.html <html> <head><title> Java Script 에서 Array 객체사용하기 </title></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Array(3) a[0] = " 저는 " a[1]= " 홍길동 " a[2]=" 입니다 " document.write("a 배열의내용출력 : <br> "+a[0],a[1],a[2]+"<br>"); b = new Array(" 저는 ",19," 살입니다."); document.write("b 배열의내용출력 : <br> "+b[0],b[1],b[2]+"<br>"); </SCRIPT> </body></html> 29

="text/javascript" LANGUAGE = "JavaScript"> a = new Array(3) a[0] = " 저는 " a[1]=

30 5.2.2 내장객체 Array length 속성 length 속성은배열의길이를저장하고있음 예제 5-9 Array_length.html <html> <head><title> length 속성 </title></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Array(3) a[0] = " 저는 " a[1]= " 홍길동 " a[2]=" 입니다 " document.write("a 배열의의총길이는 : "+a.length+"<br>"); </SCRIPT> </body> </html> 30

31 5.2.2 내장객체 Array concat 메소드 concat() 메소드는배열을마지막에새로운배열을추가함 예제 5-10 Concat_array.html <html> <head><title> concat 메소드 </title> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Array(3) a[0] = " 저는 "; a[1]= " 홍길동 "; a[2]= " 입니다 "; b = new Array(" 저는 ",19," 살입니다."); c = a.concat(b); document.write("c 배열의의총길이는 : "+c.length+"<br>"); for (i=0; i < c.length; i++){ document.write("c["+i+"]"+"="+c[i]+"<br>"); } </SCRIPT> </body> </html> 31

32 5.2.2 내장객체 Array reverse 메소드 reverse() 메소드는배열을값들의순서를정반대변경 예제 5-11 reverse_array.html <html><head><title> Reverse() 매소드 </title></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Array(3); a[0] = " 저는 "; a[1]= " 홍길동 "; a[2]=" 입니다 " b = a.reverse() for (i=0; i < b.length; i++){ document.write("b["+i+"]"+"="+b[i]+"<br>"); } </SCRIPT> </body></html> 32

33 5.2.2 내장객체 Array slice 메소드 slice() 배열의일부분을잘라내새로운배열을생성함 예제 5-12 Slice_array.html <html> <head> <title> Slice() 메소드 </title> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Array(4); a[0]=1; a[1]=2; a[2]=3; a[3]=4; b = a.slice(1,3); for (i=0; i < b.length; i++) { document.write("b["+i+"]"+"="+b[i]+"<br>"); } </SCRIPT></body></html> 33

34 5.2.2 내장객체 Array sort 메소드 sort() 배열에등록된값들을오름차순으로정렬해줌 예제 5-13 Sort_array.html <html> <head> <title> Sort() 메소드 </title> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Array(4); a[0]=4; a[1]=3; a[2]=2; a[3]=1; b = a.sort(); for (i=0; i < b.length; i++) { document.write("b["+i+"]"+"="+b[i]+"<br>"); } </SCRIPT></body></html> 34

35 5.2.2 내장객체 String 객체 String 객체는문자열을다루기위한객체임 String 객체의주요메소드 big() small() charat(index) substring(index1, index2) tolowercase() touppercase() 메소드객체를기본폰트보다조금큰글자로만듬객체를기본폰트보다조금작은글자로만듬객체에서 index 위치의글자를반환함객체에서 index1에서 index2까지스트링객체로반환문자열을소문자로변환문자열을대문자로변환 35

36 5.2.2 내장객체 String 객체메소드예제 (1) 예제 5-14 String.html <html> <head> <title> String 객체 </title> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript">text="HELLO JAVASCRIPT"; document.write("big(): " + text.big()+"<br>"); document.write("small(): " + text.small()+"<br>"); document.write("charat(3): " + text.charat(3)+"<br>"); document.write("substring(3): " + text.substring(3)+"<br>"); document.write("tolowercase(): " + text.tolowercase()+"<br>"); document.write("touppercase(): " + text.touppercase()+"<br>"); </script> </body> </html> 36

37 5.2.2 내장객체 String 객체메소드예제 (2) substring() 에서두번째매개변수를지정하지않으면문자열을끝까지로인식함 37

38 5.2.2 내장객체 Date 객체 시간과날짜에관한정보를제공하는객체 Date 객체의주요메소드 메소드 getyear() 년도를반환 (1970년이후 ) getfullyear() 년도를반환 (YYYY) getmonth() 월을반환 (0=1월, 1=2월,, 11=12월 ) getdate() 일을반환 getday() 요일을반환 gethours() 시간을반환 getminutes() 분을반환 getseconds() 초를반환 gettime() 초를반환 (1970년 1월1일이후시간을 1000분의 1초로표시 ) getmilliseconds() 1000분의 1초로표시 38

39 5.2.2 내장객체 Date 객체메소드예제 (1) 예제 5-15 Date.html <html><head><title> Date 객체 </title></head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> a = new Date(); document.write(" 오늘은 " +a.getyear()+" 년 "); document.write(a.getmonth()+1+" 월 "); document.write(a.getdate() +" 일 "); switch( a.getday() ) { case 0 : b=" 일 "; break; case 1 : b=" 월 "; break; case 2 : b=" 화 "; break; case 3 : b=" 수 "; break; case 4 : b=" 목 "; break; case 5 : b=" 금 "; break; case 6 : b=" 토 "; break; } document.write(b +" 요일입니다."+"<br>"); document.write(" 현재시간은 "); document.write(a.gethours()+" 시 "); document.write(a.getminutes() +" 분 "); document.write(a.getseconds() +" 초입니다."); </script> </body> </html> 39

40 5.2.2 내장객체 Date 객체메소드예제 (2) 40

5.2.2 내장객체 Math 객체 수학에서사용하는특수함수나특수값을사용하기위한객체 Math 객체의주요메소드 메소드 메소드 abs(x) X 의절대값을구함 min(x,y) x, y 중작은수를구함 ceil(x) 올림 pow(x,y) 지수함수 xy 를구함 cos(x) X 의 cosine 값을구함

41 5.2.2 내장객체 Math 객체 수학에서사용하는특수함수나특수값을사용하기위한객체 Math 객체의주요메소드 메소드 메소드 abs(x) X 의절대값을구함 min(x,y) x, y 중작은수를구함 ceil(x) 올림 pow(x,y) 지수함수 xy 를구함 cos(x) X 의 cosine 값을구함 random() 난수를발생함 exp(x) floor(x) log(x) max(x,y) X의지수함수를구함내림 X의로그함수를구함 x, y 중큰수를구함 round(x) x를반올림한수를구함. sin(x) x의 sine 값을구함 sqrt(x) x의제곱근을구함 tan(x) x의 tangent를구함 41

5.2.2 내장객체 Math 객체메소드예제 예제 5-17 Math2.html <html> <head> <title> Math 객체 </title> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> document.write("math.abs(-1) :"+Math.

42 5.2.2 내장객체 Math 객체메소드예제 예제 5-17 Math2.html <html> <head> <title> Math 객체 </title> </head> <body> <SCRIPT TYPE ="text/javascript" LANGUAGE = "JavaScript"> document.write("math.abs(-1) :"+Math.abs(-1)+"<br>"); document.write("math.ceil(15.67) :" + Math.ceil(15.67)+"<br>"); document.write("math.cos(90) :" + Math.cos(90)+"<br>"); document.write("math.exp(16) :" + Math.exp(16)+"<br>"); document.write("math.floor(15.67) :" + Math.floor(15.67)+"<br>"); document.write("math.cos(90) :" + Math.cos(90)+"<br>"); document.write("math.max(90,87) :" + Math.max(90,87)+"<br>"); document.write("math.min(90,87) :" + Math.min(90,87)+"<br>"); document.write("math.pow(2,3) :" + Math.pow(2,3)+"<br>"); document.write("math.random() :" + Math.random()+"<br>"); document.write("math.round(2.6) :" + Math.round(2.6)+"<br>"); document.write("math.sin(90) :" + Math.sin(90)+"<br>"); document.write("math.sqrt(4) :" + Math.sqrt(4)+"<br>"); document.write("math.tan(90) :" + Math.tan(90)+"<br>"); </script></body> </html> 42

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것