(Microsoft PowerPoint - 6\300\345.ppt [\310\243\310\257 \270\360\265\345])

Size: px

Start display at page:

Download "(Microsoft PowerPoint - 6\300\345.ppt [\310\243\310\257 \270\360\265\345])"

우식 인
6 years ago
Views:

1 제 6장자바스크립트 자바스크립트기본객체익히기 학습목표 객체와속성및메소드의예제를다룬다. date 객체를사용하여날자와시간을확인하고다양하게활용할수있다. string 객체의속성을숙지하여다양하게활용할수있다. array 객체사용법을숙지하여문자나그림등을배열로선언할수있다. function 객체를사용하여함수를정의할수있다. number 객체를사용하여문자로된숫자단어를숫자로바꿀수있다. math 객체로수식을계산할수있다

2 목차 6.1 객체의응용 6.2 Date 객체 6.3 String 객체 6.4 Array 객체 6.5 Function 객체 6.6 Number 객체 6.7 Math 객체연습문제 2

3 6.1 객체의응용 객체, 속성, 메소드에대한개념을서술하였다. 다음은객체를사용한예제를통하여자세히알아보자. 다음을메모장을열어객체속성.html 이라는파일명으로저장한다. <html> <head> <title> 자바스크립트의예 </ title> </ head> <body> <script language="javascript"> document.write("<h3>document.write는객체속성을이용하여본문에글을쓰는메소드입니다.</ h3>"); </ script> </ body> </ html> 3

4 6.1 객체의응용 위소스를웹브라우저로실행하면 document 라는객체와메소드인 write 를이용하면, document.write 에의해글이출력되는것을볼수있다. 4

5 6.1 객체의응용 자바스크립트에서객체는생성자함수 (constructor function) 생성자함수는객체의특성이나메소드를정의하기위해사용되는함수 객체의예 : 자동차를객체로한다면자동차객체의특성은차의종류 (type), 배기량 (cc), 엔진 (engine) 등이있다. 자동차객체를정의하기위한생성자함수는다음과같다. function car(type, cc, engine) { this.typetype = type; this.cc = cc; this.engine = engine; } this 의의미는생성자함수를통해서만들어지는객체자기자신을가리키는것이다. new 연산자는생성자함수를이용하여객체를만드는방법즉, 생성자함수를통해객체에메모리를할당해주어하나의객체를만들어준다. 예 : car 생성자함수를이용하여 mycar 라는객체를만든다. mycar = new car("avante", 1500, 200); 5

6 6.1 객체의응용 mycar 라는객체는 avante 이라는 type 특성값과 1500 이라는 cc 특성값과 200 이라는 engine 특성값을가진다. 이것을다르게표현하면다음과같다. mycar.type = "avante" mycar.cccc = 1500 mycar.engine = 200. 연산자는객체에속한특성이나메소드를지정하는역할을한다. 연산자왼쪽에는객체가나오고오른쪽에는객체의특성이나메소드가나온다. car 생성자함수를이용하여 friend_car 라는객체를만든다. friend_car = new car("sonata", 2000, 300); friend_car 라는객체는 sonata 라는 type 특성값과 2000 이라는 cc 특성값과 300 이라는 engine 특성값을가진다. type 의특성값이있다할지라도, 이것이 mycar 객체에속한것인지 friend_car 에속한것인지에따라의미가달라진다. 6

7 6.1 객체의응용 객체에대한간단한예제인객체.html 을작성한다. <html> <head> <title> 객체실습 </ title> <script language="javascript"> function Car(tp, cc, engine){ this.tp = tp; this.cc = cc; this.engine = engine; } </ script></ head><body> <h3> 객체만들기 </ h3><hr><br> <script language="javascript"> mycar = new Car("car1",1500,200); friendcar = new Car("car2",200,300); document.write("<h4> 내차 </ h4>"); document.write(" 차의종류 : " + mycar.tp + " "); document.write(" 배기량크기 : " + mycar.cc + " "); document.write(" 엔진크기 : " + mycar.engine + "<p>"); document.write("<h4> 친구차 </ h4>"); document.write(" 차의종류 : " + friendcar.tp + " "); document.write(" 배기량크기 : " + friendcar.cc + " "); document.write(" 엔진크기 : " + friendcar.engine); </ script> </ body> </ html> 7

8 6.1 객체의응용 프로그램을수행시키면다음과같은결과를확인할수있다. 8

9 6.2 Date 객체 Date 객체는날짜와시간을다루는데사용되는객체로 new 연산자를이용하여만든다. today = new Date() 이와같이 Date 객체를만드는방법은다섯가지로요약할수있다. new Date() new Date(miliseconds) new Date(datestring) new Date(year, month, day) new Date(year, month, day, hours, minute, seconds) miliseconds 는 1970 년 1 월 1 일 0 시를기준으로하여현재까지몇밀리초가지났는지를계산하여날짜를생성해주고, datestring 의형태는 "month day, year hours:minutes:seconds" 로표시된다. 9

10 6.2 Date 객체 Date 객체는 Date 객체만으로도날자와시간을표시해줄수있지만, 다음의메소드를활용하면좀더다양한형태로표시해준다. 메소드 geryear() gerfullyear() getmonth() getdate() date 객체 1970년이후의년도를구함년도를구함월을구함,0부터시작일을구함,1부터시작 getday() 요일에해당하는숫자를구함, 0 부터시작하고일요일이 0 gethours() 시간을구함, 0부터 23 분을구함, 0부터시작초를구함, 0부터시작 GetTime() 1970년 1월 1일 00:00:00부터지정한시간까지 1/ 1000초로표시 getminutes() getseconds() GetMillisecond s() 1/100 초로표시 * 위표에서 get 을 set 으로바꾸면날짜와시간을시스템에설정하는메소드가된다. 10

11 6.2 Date 객체 다음예제는 date 객체를이용하여현재시간부터추석까지의남은시간을계산해준다. date.html 이라는이름으로저장하자. <html> <head> <title> Date 객체 </ title> </ head> <body> <h3>date 객체의메소드예제 </ h3><hr><br> <script language="javascript"> var first = new Date("October 6, 2006, 0:0:0"); var now = new Date(); var last = first - now; var result = Math.round(last/(24* 60* 60* 1000)); document.write(" 오늘은 "+now.getyear()+" 년 "+ (now.getmonth()+1) +" 월 "+now.getdate()+" 일입니다.<br>"); document.write(" 추석은앞으로 "+result+" 일남았습니다."); </ script> </ body> </ html> 11

12 6.2 Date 객체 프로그램을실행시키면다음과같이출력되는것을볼수있다. 12

13 6.3 String 객체 String 객체는자바스크립트에서사용하는문자열로 Date 객체와는다르게객체를만드는데 new 연산자를사용하지않는다. String 객체는 기호를통해문자열을만들어준다. 객체로만들어진문자열은글자의속성이나하이퍼링크등을설정할수있고변수의속성, 메소드를마침표 (.) 로연결하여문자열을처리한다. 변수 = 문자열 변수. 속성변수. 메소드 string 객체가갖는 length 속성은문자열의개수를계산해준다예를들어다음과같은문자열의속성값은 7 이다. " 테스트문자열.length 13

14 6.3 String 객체 다음은문자열을꾸며주는메소드이다 메소드 big() small() fontsize( 숫자 ) fontcolor( 색상명 ) bold() fixed() italic() strike() sup() sub() 글자속성관련메소드 <big> 태그와같이글자크기를크게설정 <small> 태그와같이글자크기를작게설정 <font> 태그와같이글자크기를지정글자색을지정 <bold> 태그와같이글자를굵게설정 <tt> 태그와같이크기를고정시킴 <i> 태그와같이글자를이텔릭체로설정 <strike> 태그와같이취소선을설정 <sup> 태그와같이글자를위첨자로설정 <ub> 태그와같이글자를아래첨자로설정 blink() <blink> 태그와같이글자가깜박이도록설정 ( 네스케이프용 ) length 속성은배열의길이도반환해준다. 다음예제를작성하고 string.html 이라는이름으로저장하자. 14

15 6.3 String 객체 <html> <head> <title> 객체 </ title> <script language="javascript"> function output(obj){ for(var i = 0; i< obj.fruit.length; i++){ if(obj.fruit[ i].checked){ var str = " 당신이좋아하는과일은 " + obj.fruit[ i].value +" 입니다."; alert(str); break; } } if(i == obj.fruit.length){ alert(" 좋아하는과일을선택하세요 "); return; } } </ script> </ head> <body> <h3>string 객체의메소드예제 </ h3><hr><br> 좋아하는과일을선택하세요.<br><br> <form name="str"> <input type="radio" name="fruit" value=" 오렌지 "> 오렌지 <br> <input type="radio" name="fruit" value=" 포도 "> 포도 <br> <input type="radio" name="fruit" value=" 사과 "> 사과 <br> <input type="radio" name="fruit" value=" 토마토 "> 토마토 <br> <input type="button" value=" 선택 " onclick="javascript:output(this.form)"> </ form> </ body> </ html> 15

16 6.3 String 객체 위예제에서라디오버튼으로구성된값들이배열의형태로넘겨주면 output() 은넘겨받은값을차례로검사하여선택한과일을화면에출력해주는것을확인할수있다. 16

17 6.3 String 객체 다음은문자열객체의정보를가져오는메소드이다. 문자열객체의정보와관련된메소드 indexof( 문자 ) 문자열객체중문자의위치값을왼쪽부터수치로표현, 0부터시작하며없을경우 - 1 indexof(" 문자,n) 문자를문자열의 n번째위치부터찾는다. lastlndexof(" 문자 ) indexof와같으나 lastindexof는오른쪽부터찾는다. lastindexof(" 문자,n) 문자를문자열의 n번째문자부터찾는다. charat(n) 문자령에서 n번째위치한문자를찾아준다. 0부터시작. substring(n,m) 문자열의 n번째문자부터 m번째문자까지표시한다. slice(n,m) substring과동일하고, 음수값은오른쪽부터계산된다. substr(n,m) 문자열의 n번째문자부터 m개의문자를표시한다. 메소드 split(" 구분문자 ") 구분문자를이용해서문자열객체를분리시킨다. concat(" 문자열 ) 문자열을문자열객체에결합시킨다. touppercase() 모두대문자로표시 tolowercase() 모두소문자로표시 eval() 문자열을수치로변환 tostring(n) 수치를 n진수로바꾸어표시 match() 지정한문자와동일한패턴을찾는다. 없으면 null search() 문자열에서지정한문자턴을찾아그패턴의정수값을반환한다. replace() 지정한문자를찾아지정한다른문자열로바꾼다. charcodeat(n) 문자열의 n 번째문자를 ISO- Latin- 1 코드값으로표시한다. 17

18 6.3 String 객체 다음은문자열객체의정보를가져오는메소드에관한예제이다. string2.html 이라는이름으로저장하자. <html> <head> <title> 객체 </ title> </ head> <body> <h3> 문자열객체의정보를가져오는메소드 </ h3><hr><br> <script language="javascript"> a = new String("HTML- CSS- Javascript Book"); document.write("a.charat(6) : "+ a.charat(6)); document.write("<br>"); document.write("a.charat(15) : "+ a.charat(15)); document.write("<br>"); document.write("a.concat(\ " 은 \ ") : "+ a.concat(" 입니다.")); document.write("<br>"); document.write("a.indexof(\ "C\ ") : " + a.indexof("c")); document.write("<br>"); document.write("a.slice(4,7) : " + a.slice(4,7)); document.write("<br>"); document.write("a.substr(10) : " + a.substr(10)); document.write("<br>"); document.write("a.substring(10,14) : " + a.substring(10,14)); document.write("<br>"); document.write("a.touppercase() : " + a.touppercase()); </ script> </ body> </ html> 18

19 6.3 String 객체 HTML-CSS-Javascript Book 이라는문자열을객체로생성하여여러메소드를적용하였다.. 19

20 6.3 String 객체 아래예제는일련의문자열에서찾고자하는스트링을 indexof 메소드를이용하여확인하는예제이다. string3.html 이라는이름으로저장한다. <html> <head> <title> 객체 </ title> </ head> <body> <h3> 서브스트링찾기예제 </ h3><hr><br> <script language="javascript"> var a = " 자바스크립트프로그래밍이재미있어요 "; document.write("<h3>"); document.write(a); document.write("</ h3>"); var temp = prompt(" 찾고자하는스트링을입력하세요 ",""); var out = a.indexof(temp); if(out == - 1) document.write(temp+ " 는없습니다."); else document.write(temp + " 는 " + out + " 번째있습니다."); </ script> </ body> </ html> 20

21 6.3 String 객체 string3.html 을실행해보면프롬프트창이나타나는데찾고자하는문자를입력하자. 21

22 6.3 String 객체 로 를입력하고확인을누르면문자열에서 로 가들어가는위치를찾아서출력해준다. 22

23 6.4 Array 객체 배열객체는 Array 라는객체를제공한다. 자바스크립트는배열을위한객체를하나정의함으로써배열을사용할수있다. 다음은 array 객체의속성과메소드이다. 23

24 6.4 Array 객체 속성 메소드 length index prototype constructor concat(a) join(" 분리기호 ) reverse() slice(n,m) sort() shift() unshift() pop() push() splice() tosource() tostring() ValueOf() array 객체 배열의개수를나타냄배열의저장공간을가리키는 0부터시작하는정수객체에새로운메소드나속성을추가할때사용해당객체를만든함수의몸체 (function body) 를반환 a 변수에저장된배열을기존배열에추가배열에저장된값을분리기호를구분자로사용해서문자열로표시배열에저장된값을역순으로바꿈배열에서 n 위치부터 m 위치까지의값으로새로운배열생성배열을오름차순으로정렬배열의첫번째요소를제거하고제거된요소를반환배열의앞부분에하나이상의요소를추가한후배열의길이값을반환배열의마지막요소를제거하고그제거된요소를반환배열의끝에하나이상의요소를추가하고새로운배열의길이값을반환지정한위치에서부터지정한개수의배열요소를제거하고새로운요소를지정한위치에추가한후제거된요소를반환배열의소스코드에해당하는문자여을반환지정한배열의요소를결합하여하나의문자열을반환배열의초기값을반환 24

25 6.4 Array 객체 만약 samplearray 라는생성자함수가배열을만들기위해다음과같이한다. function samplearray(n) { this.length = n; for(var i=1; i<=n; i++) this[ i] = 0; return this; } 여기서 n 은배열의개수를나타내며이생성자함수를이용하여하나의배열을선언한다. array = new samplearray(10 10); 배열객체를이용한예제를살펴보자. 다음테이블의각요소를 cell[1]- cell[6] 으로표현하고자한다. 이름전화주소 00 대학교 대한민국 25

26 6.4 Array 객체 아래와같이 array1.html 을작성한다. <html> <head> <title> Array 객체 </ title> <script language="javascript"> function arr(obj){ this.length = obj; } </ script></ head><body> <h3>array 객체의메소드예제 </ h3><hr><br> <script language="javascript"> var cell = new arr(6); cell[ 1] = " 학교 ";cell[ 2] = " 전화 ";cell[ 3] = " 거주지 ";cell[ 4] = " 대학교 ";cell[ 5] = " ";cell[ 6] = " 대한민국 "; n = 1; document.write("<table border>"); for(i=0;i<2;i++){ document.write("<tr>"); for(j=0;j<3;j++){ document.write("<td>"+cell[ n] +"</ td>"); n++; } document.write("</ tr>"); } document.write("</ table>"); </ script></ body></ html> 26

27 6.4 Array 객체 프로그램을수행시키면다음과같이결과가나타난다. 27

28 6.4 Array 객체 다음예제는배열을다차원배열로선언하여자료에접근한다. array2.html 이라는이름으로저장한다. <html> <head> <title> Array 객체 </ title> </ head> <body> <h3> 다중 Array 객체메소드예제 </ h3><hr><br> <script language="javascript"> s1 = new String(); s2 = new String(); var arr = new Array(); for(var i=0;i<2;i++){ arr[ i] = new Array(); for(var j=0;j<3;j++){ arr[ i] [ j] = new Array(); } } arr[ 0] [ 0] [ 0] = "H"; arr[ 0] [ 0] [ 1] = "i" arr[ 0] [ 0] [ 2] = "!" arr[ 0] [ 1] [ 0] = "J"; arr[ 0] [ 1] [ 1] = "i" arr[ 0] [ 1] [ 2] = "m" for(var i=0;i<2;i++){ for(var j=0;j<3;j++){ s2 = " " + arr[ 0] [ i] [ j] ; s1 += s2; } } document.write(s1); </ script> </ body> </ html> 28

29 6.4 Array 객체 프로그램을실행시키면다음과같이출력되는것을확인할수있다. 29

30 6.4 Array 객체 객체의특성을알아내는또다른방법은참조배열의사용 참조배열은배열과유사하지만, [] 안에숫자대신문자열을사용한다는것이다름 위의예제에서 mycar 객체에있는각특성값들은다음과같은참조배 mycar.type = mycar[ 0] = mycar[ "type"] = "sephia" 열을이용해서접근한다. mycar.type = mycar[ 1] = mycar[ "cc"] = "1500" mycar.type = mycar[ 2] = mycar[ "engine"] = "200" 30

31 6.4 Array 객체 참조배열을이용한프로그램은다음과같다. 다음과같이 array3.html 을작성한다. <html> <head> <title> 객체실습 </ title> <script language="javascript"> function Car(tp, cc, engine){ this.tp = tp; this.cc = cc; this.engine = engine; } </ script></ head><body> <h3> 객체만들기 ( 참조배열이용 )</ h3><hr><br> <script language="javascript"> mycar = new Car("car1",1500,200); friendcar = new Car("car2",200,300); document.write("<h4> 내차 </ h4>"); document.write(" 차의종류 : " + mycar[ "tp"] + " "); document.write(" 베기량크기 : " + mycar[ "cc"] + " "); document.write(" 엔진크기 : " + mycar[ "engine"] + "<p>"); document.write("<h4> 친구차 </ h4>"); document.write(" 차의종류 : " + friendcar[ "tp"] + " "); document.write(" 베기량크기 : " + friendcar[ "cc"] + " "); document.write(" 엔진크기 : " + friendcar[ "engine"] ); </ script></ body></ html> 31

32 6.4 Array 객체 프로그램을수행시키면다음과같이결과가나타난다. 32

33 6.5 Function 객체 frunction객체는명령의집합체로복잡한계산을하거나자주사용하는패턴을정형화할때사용하는데, 내장함수와는다른사용자가직접함수를선언하고호출하여사용할수있게하는사용자정의함수이다. 형식 : func = new Function([ arg1, arg2,...], functionbody) arg1, arg2 는현재정의하는함수의매개변수를나타내고, functionbody 는실제함수의내용을나타낸다. 다음예제를작성하여 function.html 이라는이름으로저장한다. <html> <head> <title> Funtion 객체 </ title> </ head> <body> <h3>function 객체예제 </ h3><hr><br> <script language="javascript"> take = new Function("a", "b", "return(a+b)"); document.write(take(10,20)); </ script> </ body> </ html> 33

34 6.5 Function 객체 function.html 을실행하면결과가출력된다. 34

35 6.6 Number 객체 Number 객체는문자로된숫자단어를실제숫자로바꾸어주는간단한객체이다. 숫자로바뀔수없는문자에대해자바스크립트에러를발생시켰지만, 4.0 부터는 NaN 을출력한다. 다음예제를작성하고 number.html 이라는이름으로저장하자. <html> <head> <title> Number 객체 </ title> </ head> <body> <h3>number 객체예제 </ h3><hr><br> <script language="javascript"> var num = prompt(" 반올림할소수를입력해주세요 ( 소수 3 째자리에서반올림 )"); var newnum = new Number(num) document.write(newnum.tofixed(2)); </ script> </ body> </ html> 35

36 6.6 Number 객체 number.html 을실행하면다음과같이프롬프트창이나타난다 를입력하고확인을클릭한다. 36

37 6.6 Number 객체 소수 3 째자리에서반올림한결과가나타난다. 37

38 6.7 Math 객체 Math 객체는자바스크립트에서삼각함수, 지수함수, 로그함수와같은특수함수들과파이, 오일러상수와같은특수값들을사용하기위해제공되는객체로정적객체이기때문에 new 를통해객체를만들지않아도된다. 속성 math 객체 E 오일러상수 ( 약2.718) PI 원주율값 ( 약3.1415) LN2 2의자연로그값 ( 약0.693) LN10 10의자연로그값 ( 약2.302) SQRT2 2의제곱근값 ( 약1.414 SQRT1_2 1/ 2 제곱근값 ( 약0.707) LOG2E 밑이 2인로그값 ( 약 1.442) LOG10E 밑이 10인로그값 * 약 0.434) 38

39 6.7 Math 객체 메소드 sin(x) cos(x) tan(x) acos(x) asin(x) atan(x) atan2(x,y) exp(x) log(x) pow(x,y) sqrt(x) round(x) abs(x) ceil(x) floor(x) random() min(x,y) max(x,y) 사인값코사인값탄젠트값역코사인 ( 아크코사인 ) 값역사인 ( 아크사인 ) 값역탄젠트 ( 아크탄젠트 ) 값역탄젠트 x의지수함수 x의로그함수 지수함수 f(x,y)=xy 제곱근값 x반올림절대값 x보다같거나큰수중에서가장적은정수 x보다같거나작은수중에서가장큰정수 0~ 1 사이의난수발생 x,y 중작은수 x.y 중큰수 39

40 6.7 Math 객체 다음예제는실수를랜덤하게출력하는 math.random() 메소드를이용해접속할때마다다른그림을출력해주는소스이다. math.html 이라는이름으로저장한다. <html> <head> <title>math 객체다루기 </ title> </ head> <body> <h3>math 객체 </ h3><hr><br> <script language="javascript"> pic = new Array(); for(i=1; i<10; i++){ pic[ i] = i + ".jpg"; } i = Math.round(Math.random()* 10); document.write("<img src="+pic[ i] +">"); </ script> </ body> </ html> 40

41 6.7 Math 객체 math.html 을웹브라우저로실행하면새로고침을누를때마다그림이바뀌는것을확인할수있다. 그림 math.html 그림 math.html 41

42 6.7 Math 객체 그림 math.html 42

Javascript.pages

Javascript.pages JQuery jquery part1 JavaScript : e-mail:leseraphina@naver.com http://www.webhard.co.kr I.? 2 ......,,. : : html5 ; ; .