기본학습 3: 자바스크립트 변수, 연산자, 사용자 정의 함수, 제어문과 내장 함수 Window, screen, document, link, anchor 등 객체 자바스크립트 활용하기
자바스크립트 개요 자바스크립트 사용법 객체와 속성, 메소드 이벤트와 이벤트핸들러 15장. 자바스크립트 자바스크립트 개요 자바스크립트 사용법 객체와 속성, 메소드 이벤트와 이벤트핸들러
자바스크립트 – 학습 사이트 http://www.jasko.co.kr J@SKO사이트. JavaScript Source Bank.방대한 자바스크립트 소스를 제공한다. 유료 사이트다.
자바스크립트 – 스크립트의 등장과 역할 최초의 스크립트 : 1987년 애플사의HyperCard 발전계기 : 1990년대초에 MS사에서 VB에서 사용할 수 있는 VBA(VBApplication) 개발 SunMicrosystems사가 인터넷 프로그래밍 언어로 Java를 개발 넷스케이프사는 선사와 전략적 제휴를 통하여, HTML 기능을 수용하면서 프로그래밍 개념을 대폭 수용한 JavaScript 개발
일반 유저가 프로그래머 수준의 핸들링을 할 수 있다. 자바스크립트 – 특징 서버가 아닌 클라이언트에서 인터프리터 다이나믹 바인딩이 된다. 객체 지향형 언어다. 객체 : 윈도, 프레임, URL, 폼, 버튼, 도큐먼트 등 HTML 문서에 혼합하여 사용한다. 변수의 형(type)을 지정할 필요가 없다. 일반 유저가 프로그래머 수준의 핸들링을 할 수 있다.
인터렉티브(interactive)한 홈페이지 경제적인 가격의 컴퓨터로 서버 구축 플랫폼이 독립적이다. 자바스크립트 – 사용 목적 인터렉티브(interactive)한 홈페이지 경제적인 가격의 컴퓨터로 서버 구축 플랫폼이 독립적이다. 역동적인 홈페이지 제작(RIA) 웹 프로그램 사용 시 반드시 필요하다.
자바스크립트 – 자바와 자바스크립트 구분 자바 자바스크립트 해석위치 서버 클라이언트 언어형 컴파일러 인터프리터 존재 *.class 파일로 존재 HTML 문서 내에 기술 객체지향 객체 지향 언어 객체 기반 언어 보안성 있음 없음 사용 어려움 쉬움
기본 사용법 삽입 및 실행법 사용자 정의 함수 작성시 주의사항 특수문자와 주석달기 자바스크립트 – 자바스크립트 기본 기본 사용법 삽입 및 실행법 사용자 정의 함수 작성시 주의사항 특수문자와 주석달기
자바스크립트 – 자바스크립트의 시작 자바 스크립트의 삽입 위치는? <html> <head> <title>자바스크립트 페이지</title> </head> <body> <script language="javascript"> document.write("<p>Hello World!</p>"); </script> <noscript> <p>브라우저가 자바스크립트 기능을 지원하지 않거나 자바스크립트 기 능이 꺼져 있습니다.</p> </noscript> </body> </html>
자바스크립트 – 자바스크립트의 시작 기본구조 <SCRIPT LANGUAGE="JavaScript"> <!- 자바스크립트 코드 // -> </SCRIPT> 실행방법 1) EditPlus로 *.html로 저장 2) 브라우저에서 실행 - Chrome에서 CTRL+O로 해당 *.html 파일 실행 - IE에서 파일>열기(CTRL+O) 자바스크립트의 실행시기는?
자바스크립트 – 자바스크립트 삽입과 실행(1) 내장형 행 입력형 함수형 링크형
내장형 자바스크립트 – 자바스크립트 삽입과 실행(2) HTML 문서내에 소스를 직접 입력 소스를 만나자마자 실행됨 Chap15/1500javascript/js01.html, js02.html <html> <head> <title>내장형 - 배경색이 먼저 적용된 다음 메시지 창이 나타난다. </title> </head> <body bgcolor=skyblue> <script language=javascript> alert("환영합니다.") </script> </body> </html>
자바스크립트 – 자바스크립트 삽입과 실행(2) 행 입력형 HTML 태그 내에서 이벤트핸들러와 함께 사용 Chap15/1500javascript/js03.html <태그 이벤트핸들러="자바스크립트 소스"> <html> <head> <title> 라인입력형 </title> </head> <body> <input type=button value="클릭" onclick="alert('환영')"><br><br> <input type=button value="클릭" onclick="javascript:alert('환영')"><br><br> <a href="#" onclick="alert('환영')">클릭</a><br><br> <a href="javascript:alert('환영')">클릭</a> </body> </html>
자바스크립트 – 자바스크립트 삽입과 실행(3) 함수형: 함수를 호출할 경우에만 실행됨 Chap15/1500javascript/js04.html <script language=javascript> function 함수명( ) { ~~자바스크립트 소스~~ } </script> <태그명 이벤트핸들러="함수명()">
자바스크립트 – 자바스크립트 삽입과 실행(3) 함수형 <html> <head> <title> 함수형 </title> <script language=javascript> function hello() { alert("환영합니다") } </script> </head> <body> <input type=button value="클릭" onclick="hello()"> </body> </html>
자바스크립트 – 자바스크립트 삽입과 실행(3) 링크형 소스를 외부파일(*.js)로부터 불러옴 HTML 문서가 길어지는 것을 방지 소스의 노출을 방지, 보안성 향상 소스 파일을 여러 페이지에 적용 가능 Chap15/1500javascript/js05.html <script language=javascript src="js 파일의 전체 경로"></script><html> <html> <head> <title> 링크형 - 함수 호출 </title> <script language=javascript src="hi.js"></script> <script language=javascript src="hello.js"></script> </head> <body onload="hello()"> <input type=button value="클릭" onclick="hi()"> </body> </html>
객체, 속성, 메소드, 함수의 구분은 마침표(.) 연산자를 사용한다. 문자열 표시는 따옴표를 사용해야 한다 자바스크립트 – 주의 사항 대소문자를 반드시 구분해야 한다 내장 객체, 메소드, 속성, 변수 등 구문은 한 줄에 한 개씩 위치시킨다 한 줄에 두 개의 구문 사용시 alert(“Hello”); alert(“World…”) 객체, 속성, 메소드, 함수의 구분은 마침표(.) 연산자를 사용한다. 문자열 표시는 따옴표를 사용해야 한다 작은 따옴표와 큰 따옴표 모두 사용
작은따옴표나 큰따옴표를 중첩해서 사용할 때는 반드시 나중에 시작한 따옴표를 먼저 닫아야 한다. 자바스크립트 – 주의 사항 작은따옴표나 큰따옴표를 중첩해서 사용할 때는 반드시 나중에 시작한 따옴표를 먼저 닫아야 한다. <body onload=“setTimeout(alert(‘hello’),3000)”> 따옴표 자체를 문자열에 포함시켜야 할 경우에는 역슬래시(\)와 따옴표를 함께 사용한다 alert(“안녕\”하세요\” “)
자바스크립트 – 특수문자 \n : 개 행(한 줄 바꾸어 출력한다) \t : 탭 (일정한 수의 스페이스를 삽입한다) \\ : 역슬래시 표시 \” : 쌍따옴표 표시 \’ : 온따옴표 표시 Chap15/1500escape_sequence/escape.htm
자바스크립트 – 주석달기 한 행을 주석문 처리 //주석 처리할 행, 문장 두 행 이상에 걸치는 주석문 처리 /* 주석 처리할 영역 */ HTML 문서의 주석 <!– 주석 처리할 영역 --> Chap15/1501/1501end.htm Chap15/1501/1501error.htm: 자바스크립트 오류 찾는 법 EditPlus에서 보기>브라우저보기
Chap15/1501/1501end.htm <html> <head> <title> 자바스크립트로 HTML 문서 제작 </title> </head> <body> <script language=javascript> document.write("<html><head><title>자바스크립트로 처음 만들어 보는 홈페이지 </title></head>") document.write("<body bgcolor=#001428 topmargin=0>") document.write("<center><img src='model.jpg'><br><br>") //""(쌍따옴표)안에 있는 문자는 ''(온따옴표)로 묶어 주세요~ document.write("<font size=+2 color=#33CCFF>자바스크립트로 만든 홈페이지</font></center>") document.write("</body></html>") alert("환영합니다.") </script> </body> </html>
EditPlus에서 보기>브라우저보기
Chap15/1501/1501error.htm: 자바스크립트 오류 찾는 법
http://en.wikipedia.org/ DOM 자바스크립트에서 사용하는 브라우저 내장 객체들 객체&속성&메소드 비교 객체의 계층 구조 객체 표현법 Window 객체 Document 객체 http://en.wikipedia.org/ DOM
자바스크립트 – 객체, 속성, 메소드의 비교 구분 객체 속성 메소드 원어 object property method나 function 특징 프로그램의 대상이 되는 모든 것 객체의 속성, 성격, 특징 객체의 기능, 성능, 역할 예 창, 문서 색깔, 크기, 모양 저장, 닫기
Window parent Frames self, top location history document forms links 브라우저 내장 객체의 계층 구조 (hierarchy): DOM Window parent Frames self, top location history document Elements: Text fields textarea Checkbox Password Radio Select Button Submit reset forms links anchors
DOM An example of a DOM tree is shown below: |-> Document |-> Element (<html>) |-> Element (<body>) |-> Element (<div>) |-> text node |-> Anchor |-> Form |-> Text-box |-> Text Area |-> Radio Button |-> Check Box |-> Select |-> Button
객체명.속성=”값” 객체명.메소드 상위객체이름.하위객체이름.속성=”값” 자바스크립트 – 객체 표현법 window.status=”GO!” 객체명.메소드 window.close( ) 상위객체이름.하위객체이름.속성=”값” window.document.frm1.id.value=”홍길동” window 객체 밑의 document 객체에서 frm1이라는 form객체 중 id라는 입력상자의 value 속성값에 “홍길동”을 대입 <form name=frm1> <input type=text name=id> Chap15/1501/1502_end.htm
Chap15/1501/1502_end.htm <!-- 해상도 체크 시작--> <script language="javascript"> //window.screen.width : 사용자의 해상도 가로픽셀값 //window.screen.height : 사용자의 해상도 세로픽셀값 document.write("<br><center><font size=2 color=black>") //코딩1 document.write("당신은 지금 " + window.screen.width + "*" + window.screen.height + " 해상도를 사용하고 있습니다"+"<br>"); //문자와 변수, 변수와 변수는 연결연산자 +를 사용한다. document.write("최적의 상태로 홈페이지를 감상하시려면 800×600으로 설정하시기 바랍니다."); document.write("</font></center>") </script> <!-- 해상도 체크 끝 -->
자바스크립트 – window 객체 윈도의 생성 및 제거 메소드 open() open(“문서명”, “창이름”, “옵션”) 생성될 윈도의 겉모양 toolbar,location, status, menubar, scrollbars, resizable, copyhistory, width, height close()
자바스크립트 – document 객체 웹 문서의 색상 설정과 관련된 속성 fgColor bgColor,alinkColor,linkColor ,vlinkColor , 웹 문서와 관련된 정보를 다루는 속성 lastModified,location,referrer,title 웹 문서에 포함된 내용과 관련된 속성 anchors,cookie,forms,links document 객체의 메소드 open(),close(),clear(),write(),writeln()
자바스크립트 – 이벤트와 이벤트핸들러 이벤트 & 이벤트핸들러 이벤트핸들러의 종류
자바스크립트 – 이벤트와 이벤트핸들러 사용자가 마우스를 움직이거나 키를 누르는 등의 동작을 event라 한다. 이 이벤트 앞에 on을 붙이면 event handler가 된다. 사용자의 행위 자체는 이벤트 사용자의 행위를 전달하는 시점은 이벤트핸들러
자바스크립트 – 이벤트핸들러의 종류(1) onLoad( ) : 브라우저에서 웹문서를 불러올 때 onUnload( ) : 현재 웹문서를 닫을 때 onClick( ) : 마우스를 클릭할 때
자바스크립트 – 이벤트핸들러의 종류 onFocus( ) : 양식이나 홈페이지에 커서나 포커스가 위치했을 때 (커서가 위치할 때) onBlur( ) : 양식이나 홈페이지에서 커서나 포커스가 다른 곳으로 이동할 때 (커서를 잃어버렸을 때) onMouseover( ) : 마우스가 위로 왔을 때 onMouseout( ) : 마우스가 영역을 벗어났을 때 p.344 표 15-4
자바스크립트 – 이벤트핸들러의 종류 Chap15/1500eventhandler/eventhandler.htm Chap15/1503/1503_start.htm Chap15/1503/1503_end.htm
Chap15/1503/1503_end.htm <html> …………………… <!-- 코딩1 --> <body onload="frm1.id.focus();alert('어서오세요')" onunload="alert('또 놀러오세요')" bgcolor=black background="images/bg.jpg" leftmargin=0 topmargin=0> <form name=frm1><!-- 폼이름은 frm1 --> 아이디 : <input type="text" name="id" size=15> <!-- 아이디 입력상자의 이름은 id --> 비밀번호 : <input type="password" name="pw" size=15> <!-- 코딩2 --> <input type=button value="Login" onclick="alert('회원이 아니군요!')"> </form> </body> </html>