Presentation is loading. Please wait.

Presentation is loading. Please wait.

기본학습 3: 자바스크립트 변수, 연산자, 사용자 정의 함수, 제어문과 내장 함수

Similar presentations


Presentation on theme: "기본학습 3: 자바스크립트 변수, 연산자, 사용자 정의 함수, 제어문과 내장 함수"— Presentation transcript:

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

2 자바스크립트 개요 자바스크립트 사용법 객체와 속성, 메소드 이벤트와 이벤트핸들러
15장. 자바스크립트 자바스크립트 개요 자바스크립트 사용법 객체와 속성, 메소드 이벤트와 이벤트핸들러

3 자바스크립트 – 학습 사이트 JavaScript Source Bank.방대한 자바스크립트 소스를 제공한다. 유료 사이트다.

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

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

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

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

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

9 자바스크립트 – 자바스크립트의 시작 자바 스크립트의 삽입 위치는? <html> <head>
<title>자바스크립트 페이지</title> </head> <body> <script language="javascript"> document.write("<p>Hello World!</p>"); </script> <noscript> <p>브라우저가 자바스크립트 기능을 지원하지 않거나 자바스크립트 기 능이 꺼져 있습니다.</p> </noscript> </body> </html>

10 자바스크립트 – 자바스크립트의 시작 기본구조 <SCRIPT LANGUAGE="JavaScript"> <!-
자바스크립트 코드 // -> </SCRIPT> 실행방법 1) EditPlus로 *.html로 저장 2) 브라우저에서 실행 - Chrome에서 CTRL+O로 해당 *.html 파일 실행 - IE에서 파일>열기(CTRL+O) 자바스크립트의 실행시기는?

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

12 내장형 자바스크립트 – 자바스크립트 삽입과 실행(2) HTML 문서내에 소스를 직접 입력 소스를 만나자마자 실행됨
Chap15/1500javascript/js01.html, js02.html <html> <head> <title>내장형 - 배경색이 먼저 적용된 다음 메시지 창이 나타난다. </title> </head> <body bgcolor=skyblue> <script language=javascript> alert("환영합니다.") </script> </body> </html>

13 자바스크립트 – 자바스크립트 삽입과 실행(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>

14 자바스크립트 – 자바스크립트 삽입과 실행(3)
함수형: 함수를 호출할 경우에만 실행됨 Chap15/1500javascript/js04.html <script language=javascript> function 함수명( ) { ~~자바스크립트 소스~~ } </script> <태그명 이벤트핸들러="함수명()">

15 자바스크립트 – 자바스크립트 삽입과 실행(3)
함수형 <html> <head> <title> 함수형 </title> <script language=javascript> function hello() { alert("환영합니다") } </script> </head> <body> <input type=button value="클릭" onclick="hello()"> </body> </html>

16 자바스크립트 – 자바스크립트 삽입과 실행(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>

17 객체, 속성, 메소드, 함수의 구분은 마침표(.) 연산자를 사용한다. 문자열 표시는 따옴표를 사용해야 한다
자바스크립트 – 주의 사항 대소문자를 반드시 구분해야 한다 내장 객체, 메소드, 속성, 변수 등 구문은 한 줄에 한 개씩 위치시킨다 한 줄에 두 개의 구문 사용시 alert(“Hello”); alert(“World…”) 객체, 속성, 메소드, 함수의 구분은 마침표(.) 연산자를 사용한다. 문자열 표시는 따옴표를 사용해야 한다 작은 따옴표와 큰 따옴표 모두 사용

18 작은따옴표나 큰따옴표를 중첩해서 사용할 때는 반드시 나중에 시작한 따옴표를 먼저 닫아야 한다.
자바스크립트 – 주의 사항 작은따옴표나 큰따옴표를 중첩해서 사용할 때는 반드시 나중에 시작한 따옴표를 먼저 닫아야 한다. <body onload=“setTimeout(alert(‘hello’),3000)”> 따옴표 자체를 문자열에 포함시켜야 할 경우에는 역슬래시(\)와 따옴표를 함께 사용한다 alert(“안녕\”하세요\” “)

19 자바스크립트 – 특수문자 \n : 개 행(한 줄 바꾸어 출력한다) \t : 탭 (일정한 수의 스페이스를 삽입한다)
\\ : 역슬래시 표시 \” : 쌍따옴표 표시 \’ : 온따옴표 표시 Chap15/1500escape_sequence/escape.htm

20 자바스크립트 – 주석달기 한 행을 주석문 처리 //주석 처리할 행, 문장 두 행 이상에 걸치는 주석문 처리
/* 주석 처리할 영역 */ HTML 문서의 주석 <!– 주석 처리할 영역 --> Chap15/1501/1501end.htm Chap15/1501/1501error.htm: 자바스크립트 오류 찾는 법 EditPlus에서 보기>브라우저보기

21 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=# 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>

22 EditPlus에서 보기>브라우저보기

23 Chap15/1501/1501error.htm: 자바스크립트 오류 찾는 법

24 http://en.wikipedia.org/ DOM
자바스크립트에서 사용하는 브라우저 내장 객체들 객체&속성&메소드 비교 객체의 계층 구조 객체 표현법 Window 객체 Document 객체 DOM

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

26 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

27 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

28 객체명.속성=”값” 객체명.메소드 상위객체이름.하위객체이름.속성=”값” 자바스크립트 – 객체 표현법
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

29 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> <!-- 해상도 체크 끝 -->

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

31 자바스크립트 – document 객체 웹 문서의 색상 설정과 관련된 속성
fgColor bgColor,alinkColor,linkColor ,vlinkColor , 웹 문서와 관련된 정보를 다루는 속성 lastModified,location,referrer,title 웹 문서에 포함된 내용과 관련된 속성 anchors,cookie,forms,links document 객체의 메소드 open(),close(),clear(),write(),writeln()

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

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

34 자바스크립트 – 이벤트핸들러의 종류(1) onLoad( ) : 브라우저에서 웹문서를 불러올 때
onUnload( ) : 현재 웹문서를 닫을 때 onClick( ) : 마우스를 클릭할 때

35 자바스크립트 – 이벤트핸들러의 종류 onFocus( ) : 양식이나 홈페이지에 커서나 포커스가 위치했을 때 (커서가 위치할 때) onBlur( ) : 양식이나 홈페이지에서 커서나 포커스가 다른 곳으로 이동할 때 (커서를 잃어버렸을 때) onMouseover( ) : 마우스가 위로 왔을 때 onMouseout( ) : 마우스가 영역을 벗어났을 때 p.344 표 15-4

36 자바스크립트 – 이벤트핸들러의 종류 Chap15/1500eventhandler/eventhandler.htm
Chap15/1503/1503_start.htm Chap15/1503/1503_end.htm

37 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>


Download ppt "기본학습 3: 자바스크립트 변수, 연산자, 사용자 정의 함수, 제어문과 내장 함수"

Similar presentations


Ads by Google