PowerPoint 프레젠테이션

Size: px

Start display at page:

Download "PowerPoint 프레젠테이션"

괴옥 한
5 years ago
Views:

1 04 : 기본학습 3: 학습내용 변수, 연산자, 사용자정의함수, 제어문과내장함수 Window, screen, document, link, anchor 등객체활용하기

2 04 : 15 장. 학습내용 개요사용법객체와속성, 메소드이벤트와이벤트핸들러

3 학습사이트 빨강콩의자바스크릡트사이트로 css,javascript, dhtml 정보를제공한다. 특히도움말이대화상자형태로제공된다. 사이트. JavaScript Source Bank. 방대한소스를제공한다. 유료사이트다. 소스베껴쓰기, 기초예제를제공한다.

4 스크립트의등장과역할 최초의스크립트 : 1987 년애플사의 HyperCard 발전계기 : 1990 년대초에 MS 사에서 VB 에서사용할수있는 VBA(VBApplication) 개발 SunMicrosystems 사가인터넷프로그래밍언어로 Java 를개발 넷스케이프사는선사와전략적제휴를통하여, HTML 기능을수용하면서프로그래밍개념을대폭수용한 JavaScript 개발

5 특징 서버가아닌클라이언트에서인터프리터 다이나믹바인딩이된다. 객체지향형언어다. 객체 : 윈도, 프레임, URL, 폼, 버튼, 도큐먼트등 HTML 문서에혼합하여사용한다. 변수의형 (type) 을지정할필요가없다. 일반유저가프로그래머수준의핸들링을할수있다.

6 사용목적 인터렉티브 (interactive) 한홈페이지 경제적인가격의컴퓨터로서버구축 플랫폼이독립적이다. 역동적인홈페이지제작 웹프로그램사용시반드시필요하다.

7 자바와 구분자바 해석위치서버클라이언트 언어형컴파일러인터프리터 존재 *.class 파일로존재 HTML 문서내에기술 객체지향객체지향언어객체기반언어 보안성있음없음 사용어려움쉬움

8 기본 기본사용법삽입및실행법사용자정의함수작성시주의사항특수문자와주석달기

9 의시작 의삽입위치는? 기본구조 <SCRIPT LANGUAGE="JavaScript"> <!- 진짜코드 // -> </SCRIPT> 의실행시기는?

10 삽입과실행 (1) 내장형 행입력형 함수형 링크형

11 삽입과실행 (2) 내장형 <script language=javascript> ~~ 소스 ~~ </script> 행입력형 < 태그이벤트핸들러 =" 소스 ">

12 삽입과실행 (3) 함수형 <script language=javascript> function 함수명 ( ) { ~~ 소스 ~~ } </script> < 태그명이벤트핸들러 =" 함수명 ()"> 링크형 <script language=javascript src="js 파일의전체경로 "></script>

13 주의사항 대소문자를반드시구분해야한다 구문은한줄에한개씩위치시킨다 객체, 속성, 메소드, 함수의구분은마침표 (.) 연산자를사용한다. 문자열표시는따옴표를사용해야한다 작은따옴표나큰따옴표를중첩해서사용할때는반드시나중에시작한따옴표를먼저닫아야한다. 따옴표자체를문자열에포함시켜야할경우에는역슬래시 (\) 와따옴표를함께사용한다.

14 특수문자 \n : 개행 ( 한줄바꾸어출력한다 ) \t : 탭 ( 일정한수의스페이스를삽입한다 ) \\ : 역슬래시표시 \ : 쌍따옴표표시 \ : 온따옴표표시

15 주석달기 한행을주석문처리 // 주석처리할행, 문장 두행이상에걸치는주석문처리 /* 주석처리할영역 */ HTML 문서의주석 <! 주석처리할영역 -->

16 객체 객체 & 속성 & 메소드비교 객체의계층구조 객체표현법 Window 객체 Document 객체

17 객체, 속성, 메소드의비교 구분객체속성메소드 원어 object property method 나 function 특징 프로그램의대상이되는모든것 객체의속성, 성격, 특징 객체의기능, 성능, 역할 예 창, 문서색깔, 크기, 모양저장, 닫기

18 객체의계층구조 Window parent Frames self, top location history document forms links anchors Elements: Text fields textarea Checkbox Password Radio Select Button Submit reset

19 객체표현법 객체명. 속성 = 값 window.status= GO! 객체명. 메소드 window.close( ) 상위객체이름. 하위객체이름. 속성 = 값 window.document.frm1.id.value= 노무현

20 window 객체 윈도의생성및제거메소드 open() open( 문서명, 창이름, 옵션 ) 생성될윈도의겉모양 toolbar,location, status, menubar, scrollbars, resizable, copyhistory, width, height close()

21 document 객체 웹문서의색상설정과관련된속성 fgcolor bgcolor,alinkcolor,linkcolor,vlinkcolor, 웹문서와관련된정보를다루는속성 lastmodified,location,referrer,title 웹문서에포함된내용과관련된속성 anchors,cookie,forms,links document 객체의메소드 open(),close(),clear(),write(),writeln()

22 이벤트와이벤트핸들러 이벤트 & 이벤트핸들러 이벤트핸들러의종류

23 이벤트와이벤트핸들러 사용자가마우스를움직이거나키를누르는등의동작을 event 라한다. 이이벤트앞에 on 을붙이면 event handler 가된다. 사용자의행위자체는이벤트 사용자의행위를전달하는시점은이벤트핸들러

24 이벤트핸들러의종류 (1) onload( ) : 웹브라우적홈페이지를불러올때 onunload( ) : 현재홈페이지에서빠져나가려할때 onclick( ) : 마우스를클릭할때

25 이벤트핸들러의종류 onfocus( ) : 양식이나홈페이지에커서나포커스가위치했을때 onblur( ) : 양식이나홈페이지에서커서나포커스가다른곳으로이동할때 onmouseover( ) : 마우스가위로왔을때 onmouseout( ) : 마우스가영역을벗어났을때

26 04 : 16 장. 변수, 연산자, 사용자정의함수 학습내용 변수배열과객체연산자함수

27 배열, 연산자, 사용자정의함수 기본실행문 변수선언문 : var i = 10 대입문 : i = 10 이나 i = masan 조건문 if(i < 10) document.write( 조건만족 ) 순환문 for(var i = 0; i < 10; i++){document.write(i)}

28 배열, 연산자, 사용자정의함수 변수 변수의데이타형 (type) Numbers( 숫자형 ), String( 문자열형 ) Boolean( 논리형 ), Null( 널 ) 변수의명명시주의사항 예약어, 함수명, 객체명, 속성명, 사용중인변수등은사용할수없다. 변수는영자나밑줄로만시작한다. 대소문자를구별하되, 의미있는이름을붙인다.

29 배열, 연산자, 사용자정의함수 배열변수선언법 배열 (array) 은같은형, 같은길이의데이터를 2 개이상붙여서동일한변수로처리하는것 기본형식 var 배열변수명 = new Array( ) 배열변수명 [0]= 값 배열변수명 [1]= 값 배열변수명 [2]= 값 var 배열변수명 = new Array( 배열개수 ) var jumsu = new Array( 값 1, 값 2, 값 3)

30 배열, 연산자, 사용자정의함수 연산문 산술연산문 : +, -, *, /, % 증감연산 : ++, -- 대입연산문 : =, +=, -=, *=, /=, %= 조건연산자 : 변수명 =( 조건식 )? 명령 1 : 명령 2 논리연산문 : &&,,!, 관계연산자 : >, <, >=, <= 비교연산 : ==,!= 연결연산문 : happy + day

31 배열, 연산자, 사용자정의함수 연산기호의우선순위 산술 > 논리 > 대입 1. () 2.! * / % < <= > >= 6. ==!= 7. && = += -= *= /= %=

32 배열, 연산자, 사용자정의함수 사용자정의함수 FUNCTION 은프로그램의형식을완전히갖추지않은부속프로그램으로, 복잡한계산을하거나자주사용되는루틴을정형화할때쓰인다. 함수의정의 <!- function makewindow(){ window.open( allim.htm","new","width=200 height=200")} //-> 함수의호출 <body onload="makewindow()">

33 배열, 연산자, 사용자정의함수 사용자정의함수의종류 매개변수가없는함수 Function test(){ } 매개변수가있는함수 Function test(name){ } 리턴값이있는경우 Function test(question){ } Ans=confirm(question) Return ans

34 04 : 17 장. 제어문과내장함수 학습내용 제어문 내장함수 제어문내장함수

35 제어문과내장함수 IF 조건문 (1) If( 조건 ) 실행문A else 조건 false 실행문 B 실행문 B true 실행문 A

36 제어문과내장함수 IF 조건문 (2) 형식 1 If( 조건 ) 형식 2 명령문 If( 조건 ){ } else{ } 명령문1 명령문2 명령문1 명령문2 중첩 IF 문 If( 조건 ) 명령문 else if( 조건 ) 명령문 else if( 조건 ) 명령문 else( 조건 ) 명령문

37 제어문과내장함수 SWITCH 문 switch( 표현식 ){ case value1: 명령문 1; Break; case value2: 명령문 ; Break;.. default 명령문 n }

38 제어문과내장함수 FOR 문 - 반복문 (1) 기본형식 for( 초기값 ; 조건부 ; 증감식 ){ } 예제 코드부 for(a=1;a<11;a++){ document.write(a+ * +a+ = +a*a+ <br> ) }

39 제어문과내장함수 FOR 문 - 반복문 (2) 시작 조건 true 실행문 false 종료

40 제어문과내장함수 WHILE 문 기본형식 while( 조건 ){ } 예제 a=1 명령문 while(a<11){ document.write(a+ * +a+ = +a*a+ <br> ) } A++

41 제어문과내장함수 DO WHILE 문 기본형식 do{ 명령문 } While( 조건 ) 예제 a=1 do{ document.write(a+ * +a+ = +a*a+ <br> ) A++ } while(a<11)

42 제어문과내장함수 BREAK, CONTINUE 문 Break : 제어문종료 Continue : 제어문반복 예제 A=10 While(true){ a } if(a>10) continue if(a==0) break document.write(a+ * +a+ = +a*a+ <br> )

43 제어문과내장함수 RETURN 문 함수에서특정값을리턴값으로보내고싶을때사용 예제 Function square(a){ return a*a } For(a=1;a<11;a++){ document.write(a+ * +a+ = +a*a+ <br> ) }

44 제어문과내장함수 FOR IN 객체조작문 객체가가지는속성정보를알려준다. 만약객체의모든속성이 5 개라면 5 번반복된다. 는완성된언어가아니므로버전업되면서새로추가된객체의속성정보를알수있다. for (variable in 객체 ) { 수행할작업 }

45 제어문과내장함수 WITH 객체조작문 하나의객체에대해여러가지속성들을한꺼번에조작할때사용한다. with ( 객체 ) { 조작내용 } with (document) { bgcolor = "white"; fgcolor = "red"; }

46 제어문과내장함수 내장함수의종류 표현식 alert(" 메시지 ") prompt(" 메시지 "," 기본문구 ") confirm(" 메시지 ") eval( ) isnan( ) parsefloart( ) parseint( ) escape( ) unescape( ) isfinite( ) Number( ) String( ) 설명 확인 버튼이있는메시지창을띄움입력상자가있는메시지창을띄움 확인, 취소 버튼이있는메시지창을띄움문자열을수식으로바꿈전달받은값이숫자인지문자인지판별하여숫자가아닌경우 true 값을반환문자열을부동소수점으로바꿈문자열을정수로바꿈 ISO-Latin-1 문자셋을아스키값으로바꿈, 문자값을 URL 표기형으로변환아스키값을 ISO-Latin-1 문자셋으로바꿈, URL 표기형을문자로변환전달받은값이유리수인지판단하여유리수인경우에만 true 값반환객체를수치로변환객체를문자열로변환

47 04 18장. window, screen, document, : link, anchor 객체 학습내용 window 객체 screen 객체와 document 객체 link 객체와 anchor 객체

48 Window, screen, document, link, anchor 객체 Window 객체의속성 속성 defaultstatus status window frames opener parent self top classes tags screenx screeny closed name length 설명브라우저상태표시줄에표시할문자열의초기값설정상태표시줄에표시할문자열지정창자신을가리킴창에포함된프레임을배열형태로지정 open( ) 메소드를사용해서새창을열었을경우, 새창을열도록한문서를가리킴주종관계를이루고있는프레임문서에서상위프레임을가리킴현재작업중인창, 즉자기자신을가리킴프레임이설정되기전의상태로돌아감, 프레임을모두무시하고창하나만남음문서안에정의된모든스타일시트의정보를갖음문서안에정의된모든태그의정보를나타냄창의 x 좌표반환창의 y 좌표반환창이닫혀있는지확인한후 true, false 반환창의이름반환창안에프레임수반환

49 Window, screen, document, link, anchor 객체 window 객체의메소드 (1) 사용자의응답을요구하는다이얼로그상자를생성하는메소드 alert(" 메시지 ") : 경고창띄움 prompt(" 메시지 "," 기본문구 ") : 입력창띄움 confirm(" 메시지 ") : 확인, 취소창띄움 창생성및제거메소드 open(" 문서명 "," 창이름 ", " 속성 ") : 새창을염 close( ) : 창을닫음

50 Window, screen, document, link, anchor 객체 window 객체의메소드 (2) 브라우저크기, 위치설정 moveby(x,y) : 브라우저를상대적인좌표로지정한픽셀만큼이동 moveto(x,y) : 브라우저를절대적인좌표로지정한위치로이동 resizeby(x,y) : 브라우저의크기를상대적으로지정한픽셀만큼설정 resizeto(x,y) : 브라우저의크기를절대값으로지정한 픽셀만큼설정 scroll(x,y) : 창이나프레임안의내용을스크롤함 scrollby(x,y) : 스크롤을상대좌표로이동 scrollto(x,y) : 스크롤을절대좌표로이동

51 Window, screen, document, link, anchor 객체 window 객체의메소드 (3) 동작시간간격을조절하는메소드 settimeout(" 명령문 ", 시간간격 ) : 일정한시간간격으로명령문을반복실행 ( 시간은 1/1000 초단위 ) cleartimeout( ) :SetTimeout( ) 으로동작되는타이머해제 기타 print( ) : 현재문서출력

52 Window, screen, document, link, anchor 객체 open 메소드로창열기 window.open(" 문서명 ", " 창이름 "," 옵션설정 ");

53 Window, screen, document, link, anchor 객체 window.open 메소드에설정할수있는창옵션 옵션 값 설명 directories yes/no 연결등디렉토리메뉴표시여부 menubar yes/no 메뉴바표시여부 toolbar yes/no 툴바표시여부 location yes/no 주소입력줄표시여부 resizable yes/no 크기재설정버튼표시여부 status yes/no 상태표시줄표시여부 scrollbars yes/no 스크롤바표시여부 copyhistory yes/no 히스토리정보를저장할지여부 channelmode 전체화면모드 fullscreen 전체화면으로표시 width pixel 창넓이 height pixel 창높이 left pixel 창의좌측좌표값 top pixel 창의위쪽좌표값

54 Window, screen, document, link, anchor 객체 screen 객체의속성 속성 availheight 설명 작업표시줄을제외한화면의높이를픽셀값으로표시 availwidth availtop availleft height width colordepth 작업표시줄을제외한화면의너비를픽셀값으로표시화면표시영역의 y 좌표표시화면표시영역의 x 좌표표시화면의높이를픽셀값으로표시화면의너비를픽셀값으로표시컴퓨터에서사용하고있는컬러수를표시 pixeldepth 화면의컬러해상도 (bits/pixel) 를표시 ( 넷스케이프네비게이터용

55 Window, screen, document, link, anchor 객체 document 객체의속성 (1) 색상지정 bgcolor : 문서의배경색지정 fgcolor : 문서의글자색, 선색지정 linkcolor : 링크문자색지정 vlinkcolor : 방문한링크문자색지정 alinkcolor : 선택중인링크문자색지정

56 Window, screen, document, link, anchor 객체 document 객체의속성 (2) 웹문서와관련된정보 lastmodifed : 홈페이지가마지막으로갱신된날짜저장 location : 웹문서의 URL 주소저장 URL : 문서의 URL 주소값반환 domain : 서버의도메인이름을지정하거나반환 title :<title> 태그사이의문서제목을제공 cookie : 쿠키파일의정보를읽고쓸수있음

57 Window, screen, document, link, anchor 객체 document 객체의속성 (3) 웹문서에포함된배열객체 images : 문서에삽입된그림을배열로제공 links : 문서에포함된모든링크의이름을배열로제공 forms:<form> 태그입력순서대로배열로제공 anchors : 문서에포함된하이퍼링크의이름을배열로제공 Applets : 문서에포함된배열들의배열을설정 Embeds : 문서에포함된플러그인을배열로제공 layers : 레이어의배열정보를제공

58 Window, screen, document, link, anchor 객체 document 객체의메소드 clear( ) : 문서의모든내용을지움 open( ) : 문서의내용을보여줌 close( ) :open( ) 으로보여준문서를닫음 write( ) : 태그를포함하는문자열을출력 writeln( ) : <pre> 태그와함께사용하면행마지막에서자동개행자동개행을제외하면 write( ) 와동일한기능을함 getselection( ) : 마우스로선택한문자열을반환 ( 넷스케이프네비게이터에서동작 )

59 Window, screen, document, link, anchor 객체 link 객체와 anchor 객체 link 객체 document.links[ 인덱스번호 ]. 속성 document.links.length document. 링크이름. 속성 anchor 객체 document.anchors[ 인덱스번호 ]. 속성 document.anchors.length document.anchors[ 책갈피명 ] 또는 document.all[ 책갈피명 ]

60 04 : 19 장. navigator, history, location, string 객체 학습내용 navigator 객체와 history 객체 location 객체와 string 객체

61 Navigator, history, location, string 객체 navigator 객체의속성 appcodename : 브라우저의코드명을알려줌 appname : 브라우저의종류를알려줌 appversion : 브라우저의버전을알려줌 useragent: 브라우저의코드명, 버전, 운영체제와같은브라우저정보를알려줌 platform : 시스템코드를알려줌

62 Navigator, history, location, string 객체 history 객체의메소드 back( ) : 이전페이지로돌아감, 뒤로 이동아이콘과같은역할 forward( ) : 한페이지다음으로이동, 앞으로 이동아이콘과같은역할 go(n):n 단계만큼이동 go( 정수 ), go( 음수 ), go( 문자열 ) go(0): 현재페이지, 새로고침 아이콘과같은역할 go(1) :history.forward( ) 와같이다음페이지로이동 go(-1) :history.back( ) 과같이이전페이지로이동

63 Navigator, history, location, string 객체 location 객체 href Protocal hostname port pathname hash host

64 Navigator, history, location, string 객체 location 객체의속성 속성 hash host hostname href pathname port protocol search 설명 # 다음에오는문자열, 즉앵커이름을표시 hostname과 port번호표시호스트명을표시완전한형태의 URL 주소표시문서의경로표시포트번호표시프로토콜종류표시검색엔진을실행할때나타나는? 이후의문자표시

65 Navigator, history, location, string 객체 location 객체의메소드 reload( ) : 문서를다시읽어옴 ( 새로고침 ) replace("url 주소 ") : 문서를 URL 주소로대체하고이전페이지로돌아갈수없게설정 ( 넷스케이프네비게이터에서만동작 )

66 Navigator, history, location, string 객체 string 객체 기본형식 변수 = 문자열 변수. 속성 변수. 메소드 " 문자열 ".length 사용예 환영합니다..bold() 환영합니다..bold().fontcolor( red )

67 Navigator, history, location, string 객체 문자열객체에서사용되는글자속성관련메소드 big( ) :<big> 태그와같이글자크기를크게설정 small( ) :<small> 태그와같이글자크기를작게설정 fontsize( 숫자 ) :<font> 태그처럼글자크기를지정 fontcolor( 색상명 ) : 글꼴색지정 bold( ) :<bold> 태그와같이글자를진하게설정 fixed( ) :<tt> 태그와같이글자크기를고정시킴 italic( ) :<i> 태그와같이글자를이탤릭체로설정 strike( ) :<strike> 태그와같이취소선을설정 sup( ) :<sup> 태그와같이글자를위첨자로설정 sub( ) :<sub> 태그와같이글자를아래첨자로설정

68 Navigator, history, location, string 객체 문자열객체의정보를가져오는메소드 (1) 문자열위치와관련된메소드 indexof( 문자 ) indexof( 문자,n) 문자열객체중에서문자의위치값을왼쪽부터계산하여숫자로표시한다. 시작은 0 번부터, 없으면 1 이된다. 문자를문자열의 n 번째문자부터찾는다.. lastindexof( 문자 ) lastindexof( 문자,n) 문자열객체중에서문자의위치을오른쪽부터계산하여숫자로표시한다. 시작은 0 번부터, 없으면 1 이된다. 문자를문자열의 n 번째문자부터찾는다. charat(n) 문자열에서 n 번째위치한문자를찾아준다. 숫자는 0 번부터시작한다.

69 Navigator, history, location, string 객체 문자열객체의정보를가져오는메소드 (2) 문자열에포함된문자표시방법 Substring(n,m) 문자열의 n 번째문자부터 m 번째문자까지표시한다. 음수값은무시된다. slice(n,m) substring 과동일하고, 음수값은오른쪽부터순번으로계산된다. subsrt(n,m) 문자열의 n 번째문자부터 m 개의문자를표시한다.

70 Navigator, history, location, string 객체 문자열객체의정보를가져오는메소드 (3) 문자열분리및결합메소드 split(" 구분문자 ") 구분문자를이용해서문자열객체를분리시킨다. concat(" 문자열 ") 문자열을문자열객체에결합시킨다. 대소문자구분설명 touppercase( ) 모두대문자로표시한다. tolowercase( ) 모두소문자로표시한다.

71 Navigator, history, location, string 객체 문자열객체의정보를가져오는메소드 (4) eval( ): 문자열을수치로바꾼다. tostring(n): 수치를 n 진수로바꾸어표시한다. match( ) : 지정한문자와동일한패턴을찾는다. 없으면널값반환한다. search( ): 문자열에서지정한문자턴을찾아그패턴의오프셋값 ( 정수 ) 을반환한다. replace( ): 지정한문자를찾아지정한다른문자열로바꾼다. CharCodeAt(n): 문자열의 n 번째문자를 ISO- Latin-1 코드값으로표시한다.

72 04 : 20 장. Date, Array 객체 학습내용 Date 객체 Array 객체 Date 객체 Array 객체

73 Date, Array 객체 Date 객체를생성하는다양한방법 now=new Date( ): 현재날짜와시각을갖는 now 객체를생성한다. now=new Date(year, month, day): 연, 월, 일정보를갖는 now 객체를생성한다. now=new Date(year, month, day, hours, minutes, seconds): 연, 월, 일, 시, 분, 초의정보를갖는 now 객체를생성한다. now=new Date("month, day, year hours: minutes: seconds"): 월, 일, 연시 : 분 : 초의정보를갖는 now 객체를생성한다.

74 Date, Array 객체 날짜와시간을표시하는메소드 메소드명 설명 getyear( ) getfullyear( ) 1970 년이후의년도를구함 년도를구함 getmonth( ) 월을구함 (0~11, 1월은0, 12월은11) getdate( ) 일을구함 (1~31) getday( ) 요일에해당하는숫자를구함 (0~6, 일요일은0, 토요일은6) gethours( ) 시간을구함 (24시간기준, 0~23) getminutes( ) 분을구함 (0~59) getseconds( ) 초를구함 (0~59) GetTime( ) GetMilliseconds( ) 1970년 1월 1일 00:00:00부터지정한시간까지를 1/1000초로표시 1/100초로표시

75 04 Section Date, Array 객체 배열객체생성과사용법 배열객체생성법 변수명 =new Array( 배열개수 ) 변수명 =new Array( 값1, 값2, 값3.) 배열객체사용법 배열객체명. 속성 배열객체명. 메소드

76 Date, Array 객체 Array 객체의속성 속성 설명 length 배열의개수를나타냄 index 배열의저장공간을가리키는 0 부터시작하는정수 prototype 객체에새로운메소드나속성을추가할때사용 constructor 해당객체를만든함수의몸체 (function body) 를반환

77 Date, Array 객체 Array 객체의메소드 메소드 concat(a) join( 분리기호 ) reverse( ) slice(n,m) sort( ) shift( ) unshift( ) pop( ) push( ) splice( ) tosource( ) tostring( ) value( ) 설명 a 변수에저장된배열을기존배열에추가 배열에저장된값을분리기호를구분자로사용해서문자열로표시 배열에저장된값을역순으로바꿈 배열에서 n 위치부터 m 위치까지의값으로새로운배열생성 배열을오름차순으로정렬 배열의첫번째요소를제거하고제거된요소를반환 배열의앞부분에하나이상의요소를추가한후배열의길이값을반환 배열의마지막요소를제거하고그제거된요소를반환 배열의끝에하나이상의요소를추가하고새로운배열의길이값을반환 지정한위치에서부터지정한개수의배열요소를제거하고새로운요소를지정한위치에추가한후제거된요소를반환 배열의소스코드에해당하는문자열을반환 지정한배열의요소를결합하여하나의문자열을반환 배열의초기값을반환

78 04 : 21 장. frame, image, event, math, layer 객체 학습내용 frame 객체 image 객체 event 객체 math 객체 layer 객체

79 Frame, image, event, math, layer 객체 frame 객체의기본사용법 window.frames[ 인덱스번호 ]. 속성 frames[ 인덱스번호 ]. 메소드 window. 프레임명. 속성 프레임명. 메소드

80 Frame, image, event, math, layer 객체 frame 객체의속성 속성 설명 length 프레임개수를알려줌 name 해당프레임의이름을알려줌 parent 해당프레임을포함하고있는상위프레임을가리킴 self 해당프레임자신을의미 window self 와같이자신의창을의미

81 Frame, image, event, math, layer 객체 image 객체의기본사용법 window.document.images[ 배열번호 ]. 속성 그림이름. 속성

82 Frame, image, event, math, layer 객체 image 객체의기본속성 name: 그림에설정된 name 속성값을알려줌 Length: 문서에삽입된그림의개수를알려줌 src : 그림의 src 속성에설정된경로를알려줌 lowsrc: 그림의 lowsrc 속성에설정된저해상도그림의경로를알려줌 hspace: 그림의 hspace 속성에설정된좌우여백값을알려줌 vspace : 그림의 vspace 속성에설정된상하여백값을알려줌 width: 그림의 width 속성에설정된너비값을알려줌 height: 그림의 height 속성에설정된길이값을알려줌 border: 그림의 border 속성에설정된테두리두께를알려줌 complete: 그림전송이완료되면 true, 그렇지않으면 false 값을반환

83 Frame, image, event, math, layer 객체 event 객체의속성 (1) altkey :alt 키를누르면 true 값발생 altleft: 왼쪽 alt 키를누른경우이벤트발생 button: 마우스버튼을누른경우이벤트발생선택한마우스버튼의종류에따라다른값전달 ( 왼쪽 =1, 오른쪽 =2, 왼쪽 + 오른쪽 =3, 가운데 =4, 왼쪽 + 가운데 =5, 가운데 + 오른쪽 =6, 모두누른경우 =7) clientx: 윈도우영역에서마우스의 x 좌표값 clienty : 윈도우영역에서마우스의 y 좌표값 ctrlkey :ctrl 키를누르면 true 값발생 ctrlleft: 왼쪽 ftrl 키를누른경우이벤트발생 fromelement:onmouseover 나 onmouseout 이벤트를사용하는경우의마우스객체를가리킴 key :Code 키를눌렀을경우의키의유니코드값을설정 keycode: 키보드의키값을전달받음 offsetx : 이벤트가발생한객체에서마우스의 x 좌표값 offsety : 이벤트가발생한객체에서마우스의 y 좌표값

84 Frame, image, event, math, layer 객체 event 객체의속성 (2) propertyname: 이벤트를발생한객체에서변경된속성이름을설정 repeaton:keydown 이벤트의반복횟수설정 reason : 데이터의전송상태 returnvalue : 이벤트에서발생한값을 true 또는 false 로설정 screenx : 전체화면에서마우스의 x 좌표값설정 screeny : 전체화면에서마우스의 y 좌표값설정 shiftkey :shift 키를누르면 true 값을발생 shiftleft: 왼쪽 shift 키를누른경우이벤트발생 srcelement: 이벤트를발생한객체를가리킴 srcfilter:onfilterchange 이벤트를발생시킨 filter 객체를설정 toelement: 마우스포인터가위치해있는객체를설정 type : 이벤트객체의이벤트종류를설정 X : 선택한객체의상대적인 x 좌표값을설정 Y : 선택한객체의상대적인 y 좌표값을설정

85 Frame, image, event, math, layer 객체 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인로그값 ( 약 ) LOG10E 밑이 10인로그값 ( 약 0.434)

86 Frame, image, event, math, layer 객체 math 객체의메소드 (1) sin(x) : 사인값 cos(x) : 코사인값 tan(x) : 탄젠트값 acos(x) : 역코사인 ( 아크코사인 ) 값 asin(x) : 역사인 ( 아크사인 ) 값 atan(x) : 역탄젠트 ( 아크탄젠트 ) 값 atan2(x,y) : 역탄젠트 exp(x) :X의지수함수 log(x) :X의로그함수 pow(x,y) : 지수함수 f(x,y)=xy sqrt(x) : 제곱근값

87 Frame, image, event, math, layer 객체 math 객체의메소드 (2) round(x) :x 반올림 abs(x) ceil(x) 정수 : 절대값 :x 보다같거나큰수중에서가장적은 floor(x) :x 보다같거나작은수중에서가장큰정수 random() :0~1 사이의난수발생 min(x,y) : x, y 중큰수 max(x,y) :x, y 중작은수

88 Frame, image, event, math, layer 객체 레이어다루기 레이어의스타일속성사용법 document.all[id 명 ].style. 스타일속성 레이어보이거나감추게하기 document.all[id 명 ].style.visibility=visible/hidden 레이어이동하기 document.all[id 명 ].style.left= 값 document.all[id 명 ].style.top= 값 document.all[id 명 ].style.left=event.clientx document.all[id 명 ].style.top=event.clienty

89 04 : 22 장. 폼관련객체 학습내용 forms 객체입력상자체크상자, 라디오버튼목록상자

90 폼관련객체 form 객체 document. 폼이름. 속성 document.forms[ 배열번호 ]. 속성 document. 폼이름.elements[ 배열번호 ]. 속성

91 폼관련객체 form 객체가제공하는속성 속성 action 설명 <form> 태그의 action 속성에기록된정보를알려줌 elements 입력상자, 라디오버튼, 체크버튼등폼양식을배열로정의 encoding <form> 태그의 encoding 속성에기록된정보를알려줌 method target length name <form> 태그의 method 속성에기록된정보를알려줌 <form> 태그의 target 속성에기록된정보를알려줌폼양식의개수를알려줌 <form> 태그의 name 속성에기록된정보를알려줌

92 04 Section 폼관련객체 form 객체의메소드와이벤트 form 객체가제공하는메소드 Blur( ) 커서를사라지게함 Reset( ) 폼양식에입력된값을초기화 Submit( ) 폼양식에입력된값을지정된서버로보냄 form 객체에서사용하는이벤트 Onreset 한다. Onsubmit 한다. 리셋버튼을누르면이벤트가발생 제출버튼을누르면이벤트가발생

93 폼관련객체 select 객체의속성 속성 설명 type multiple 정보를가져옴 length 목록의개수를알려줌 options <select> 태그안에포함된 <option> 태그를배열로구성 selectindex 목록을배열번호로표시하거나배열번호를가져옴

94 04 Section 폼관련객체 options 속성정보를알려주는속성 목록의항목을선택해주는 options 속성 폼이름.select 이름.options[ 배열번호 ] 속성 defaultselected index selected text value 설명 선택한목록이 <option> 태그에 selected 속성을사용한목록인지확인 선택한목록의배열번호를가져옴 선택한목록이선택되었는지확인 선택한목록에입력된내용을가져옴 선택한목록에사용된 value 속성값을가져옴

95 폼관련객체 목록상자에항목추가 / 삭제하기 목록상자에항목추가하기 변수 =new Option( 내용, value 속성값, 초기선택상태, 선택 ) 목록상자에항목삭제하기 form.newadd.options[n] =null

96 04 : 23 장. 활용하기 학습내용 스타일제어활용하기무작정베껴쓰기

97 활용하기 스타일제어하는법 문서에삽입된스타일을제어하는법 document. 객체명.style. 스타일속성 레이어보이거나감추게하기 document.all[id 명 ].style.visibility=visible/hidden

98 활용하기 blendtrans 필터와 RevealTrans 필터 blendtrans 필터 : 선택한요소가서서히오버랩되면서바뀌는효과 RevealTrans 필터 : 장면이바뀔때 24 가지다양한시각적효과를화면에보여주는효과

99 활용하기 JS 외부파일연결법 js 확장자로저장된소스를문서에연결하는법 <script language="javascript" src="js 확장자를가지는파일의전체경로 "></script>

100 활용하기 소스베껴쓸때의주의사항 <head> 태그사이에있는소스는복사해서 <head> 태그사이에붙여넣는다. <body> 태그사이에있는소스는복사해서 <body> 태그사이에붙여넣는다. <body> 태그에함수호출이있을경우같이호출해주어야한다.

HTML5

HTML5 자바스크립트 류관희 충북대학교 자바스크립트 스크립트의등장과역할 최초의스크립트 : 1987 년애플사의 HyperCard 발전계기 : 1990 년대초에 MS 사에서 VB 에서사용할수있는 VBA(VBApplication) 개발 SunMicrosystems 사가인터넷프로그래밍언어로 Java 를개발 넷스케이프사는선사와전략적제휴를통하여, HTML 기능을수용하면서프로그래밍개념을대폭수용한