HTML5

Size: px

Start display at page:

Download "HTML5"

용림 순
6 years ago
Views:

1 자바스크립트 류관희 충북대학교

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

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

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

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

6 자바스크립트 자바스크립트기본 기본사용법삽입및실행법사용자정의함수작성시주의사항특수문자와주석달기 6

7 자바스크립트 자바스크립트의시작 자바스크립트의삽입위치는? 기본구조 <SCRIPT LANGUAGE="JavaScript"> <!- 진짜자바스크립트코드 // -> </SCRIPT> 자바스크립트의실행시기는? 7

8 자바스크립트 자바스크립트삽입과실행 (1) 내장형 행입력형 함수형 링크형 8

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

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

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

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

13 자바스크립트 주석달기 한행을주석문처리 // 주석처리할행, 문장 두행이상에걸치는주석문처리 /* 주석처리할영역 */ HTML 문서의주석 <! 주석처리할영역 --> 13

14 자바스크립트 객체 객체 & 속성 & 메소드비교 객체의계층구조 객체표현법 Window 객체 Document 객체 14

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

16 자바스크립트 객체의계층구조 Window parent Frames self, top location history document forms links anchors Elements: Text fields textarea Checkbox Password Radio Select Button Submit reset 16

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

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

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

20 자바스크립트 이벤트와이벤트핸들러 이벤트 & 이벤트핸들러 이벤트핸들러의종류 20

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

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

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

24 변수, 연산자, 사용자정의함수 변수배열과객체연산자함수

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

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

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

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

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

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

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

32 제어문과내장함수 제어문내장함수 제어문내장함수

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

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

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

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

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

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

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

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

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

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

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

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

PowerPoint Template

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