JavaScript

Download Report

Transcript JavaScript 

1
PC통신과 인터넷
9.JavaScript
PC통신과 인터넷
JavaScript 개요
 원래는
Netscape에서 사용할 수 있는 스크립트 언어
–Netscape 2.0 ~
–Live Script
 Sun
Microsystems와 공동프로젝트로 JavaScript 발표
–Live Script의 확장
2
PC통신과 인터넷
Java vs. JavaScript

극단적으로 말해서, 이름만 비슷하지 서로 다른 언어임.
문법상의 유사성
 상호간의 연계성 제공
–Javascript와 Java Applet간의 상호 정보공유 가능


Java
–본격 범용 프로그래밍 언어
–Compiler 언어
–Object Oriented
–강력한 기능 (Network, 분산객체, Graphics …)
–배우기 어려움

JavaScript
–Script 언어
–Interpreter 언어
–Object Based
–제한적 기능
–배우고 사용하기 쉬움
3
4
PC통신과 인터넷
JavaScript의 사용
 HTML
문서 내에 source를 포함
 <script>
… </script>내에 JavaScript source를 써 넣음
–이 블록은 보통 헤더(Header)에 포함시킴
–language 속성 : 값은 “JavaScript”로.
 주석문
( <!-- … --> )으로 묶어놓기도 함
–JavaScript를 지원하지 않는 옛날 브라우저를 위한 배려
–불필요
각
문장의 끝은 세미콜론(;)으로 끝나거나 그냥 Enter
예
<html>
<head>
<title>자바스크립트예제</title>
<script language=“JavaScript”>
…
</script>
</head>
<body></body>
</html>
PC통신과 인터넷
간단한 JavaScript 예제
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language=“JavaScript”>
document..write(“Hello World!”)
</script>
</head>
<body>
이것은 자바스크립트 수행 결과임
</body>
</html>
5
PC통신과 인터넷
연산자
 변수
대입
–(변수명) = (값)
예) x=3
–변수 정의 필요 없음
–변수명은 영문자 숫자 조합. 첫글자는 영문자 또는 _. 대소문자 구분 철저
–문자열은 “ ” 또는 ‘ ’ 로 묶음
예) name=“서용원”
–참고 : var
 변수 선언문 (변수를 사용하기 전에 사용할 변수를 미리 선언)
 연산자
–수치 연산자
 사칙연산 ( + - * / )
 ++, --, +=, -=
–비교 연산자
 >, <, >=, <=, ==, !=
–조건 연산자
 &&, ||
6
7
PC통신과 인터넷
제어문
If (조건) {
…
}
If (조건) {
…
}
else {
…
}
If (조건) {
…
}
else if (조건) {
…
}
else {
…
}
while(조건) {
…
}
do {
…
} while(조건)
for(초기화 ; 조건 ; 증감식) {
…
}
break;
continue;
PC통신과 인터넷
함수(function)
 어떤
입력값을 주면 이를 이용하여 정해진 작업을 수행하고, 작업의 결과값을
리턴(돌려준다는 뜻)해 줌
–입력값을 인자(argument), 결과값을 리턴값(return value)라고 함
–예) y=sin(x)
 함수의
정의
function 함수이름(인자리스트) {
…
return 얼마
}
 함수의
사용 (호출, call)
–함수이름(인자값)
–변수=함수이름(인자값)
8
9
PC통신과 인터넷
예제 I - 음식 주문
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
function order(x) {
if (x==1) {
alert("김치찌개를 주문하셨습니다.");
}
else if (x==2) {
alert("된장찌개를 주문하셨습니다.");
}
else {
alert("순두부를 주문하셨습니다.");
}
}
</script>
</head>
<body>
<form>
<input type=button value="김치찌개" onClick="order(1)">
<input type=button value="된장찌개" onClick="order(2)">
<input type=button value="순두부" onClick="order(3)">
</form>
</body>
</html>
PC통신과 인터넷
예제 II - 1~10까지의 제곱값 출력
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
function jegob(x) {
return x*x;
}
i=1;
while (i<=10) {
document.write(i+"*"+i+"="+jegob(i)+"<br>");
i++;
}
</script>
</head>
<body>
</body>
</html>
10
PC통신과 인터넷
예제 III - 구구단 출력
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
for (i=2; i<=9; i++) {
for (j=1; j<=9; j++) {
document.write(i+" * "+j+" = "+i*j+"<br>");
}
document.write("<hr>");
}
</script>
</head>
<body>
</body>
</html>
11
12
PC통신과 인터넷
객체(Object)
 객체의
개념
–attribute(property, 속성)
–method
 JavaScript의
객체
–JavaScript내장객체
 Date, String, Math, Array …
–브라우저 객체
 Window, Frame, Document, History…
–사용자 정의 객체
 직접 객체를 만들 수 있음
각
객체의 attribute와 method의 의미, 기능을 알고 있거나, 찾아 쓸 수 있어야
함
–reference
http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm
PC통신과 인터넷
객체간 계층관계 (브라우저 객체)
13
PC통신과 인터넷
window object
 현재
떠 있는 브라우저 창을 가리키는 object
object 중 최상위 object임
 주요 property
 JavaScript의
–status : 브라우저 상태선에 나타날 문자열
–frames : window 내의 frame들의 매열
–document : window가 나타내고 있는 document
–location : window에 나타낼 웹페이지 주소
 주요
method
–open( ) : 새로운 창 열기
–close( ) : 창 닫기
–alert( ) : 메시지 전달을 위한 다이얼로그 박스
–confirm( ) : 사용자 확인을 받기 위한 다이얼로그 박스
–prompt( ) : 사용자로부터 문자열을 입력받는 다이얼로그 박스
–setTimeout( ) : 일정 시간 대기 후 정해진 명령 수행 (<- clearTimeout( ) )
–setInterval( ) : 일정한 시간간격으로 정해진 명령 수행 (<- clearInterval())
14
PC통신과 인터넷
window object
–back( ), forward( ) : 이전 페이지, 다음 페이지로 이동
–find( ) : 브라우저의 찾기 명령 수행
–print( ) : 현재 윈도우 인쇄
15
PC통신과 인터넷
예제I - 이름 물어 보기
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
name=prompt("What's your name?");
document.write(name+"씨 환영합니다");
</script>
</head>
<body>
</body>
</html>
16
PC통신과 인터넷
예제II - 페이지 들어가기 전 확인
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
function check() {
x=confirm("이곳은 21세 이상만 들어오실 수 있는 곳입니다. 정말 들어가시겠습니까?");
if (x==true) {
window.location="hello.html";
}
else {
back();
}
}
</script>
</head>
<body onLoad=check()>
사용자 확인 예제
</body>
</html>
17
PC통신과 인터넷
예제III - 상태 표시줄에 현재시간 나타내기
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
function initialize() {
setInterval("showTime()", 1000);
}
function showTime() {
today=new Date();
timestr="현재 시각은 "+today.getHours()+"시 ";
timestr+=today.getMinutes()+"분 ";
timestr+=today.getSeconds()+"초 입니다";
window.status=timestr;
}
</script>
</head>
<body onLoad="initialize()">
시각 보여주기
</body>
</html>
18
PC통신과 인터넷
예제IV - 홈페이지에 시계 넣기
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
function initialize() {
setInterval("showTime()", 1000);
}
function showTime() {
today=new Date();
timestr="현재 시각은 "+today.getHours()+"시 ";
timestr+=today.getMinutes()+"분 ";
timestr+=today.getSeconds()+"초 입니다";
document.form1.clock.value=timestr;
}
</script>
</head>
<body onLoad="initialize()">
시각 보여주기<br>
<form name="form1">
<input name="clock" type="text" size=40>
</form>
</body>
</html>
19
PC통신과 인터넷
예제V - 상태 표시줄에 문자열 scroll시키기
<html>
<head>
<title>간단한 JavaScript예제</title>
<script language="JavaScript">
function initialize() {
setInterval("showMessage()", 30);
str="안녕하세요 저의 홈페이지에 오신 것을 환영합니다~";
for(i=0; i<150; i++) str=" "+str;
}
function showMessage() {
window.status=str;
str=str.substring(1,str.length)+str.substring(0,1);
}
</script>
</head>
<body onLoad="initialize()">
상태표시줄에 문자열 스크롤<br>
</body>
</html>
20
PC통신과 인터넷
document object
 현재
창에 나타나 있는 문서를 나타내는 object
 주요
property
–title
–bgColor, fgColor, linkColor, alinkColor, vlinkColor
–forms, links, images
 주요
method
–write( ), writeln( )
21
PC통신과 인터넷
예제 - 글자색, 배경색 바꾸기
<html>
<head>
<title>간단한 JavaScript예제</title>
</head>
<body>
<form>
<input type="button" value="흰색" onClick="document.bgColor='#ffffff'">
<input type="button" value="하늘색" onClick="document.bgColor='#4080ff'">
<input type="button" value="연보라" onClick="document.bgColor='#ffa0ff'">
</form>
</body>
</html>
22
23
PC통신과 인터넷
이벤트(Event)
 (주로
사용자가 일으키는) 각종 사건
–마우스 움직이기, 마우스 누르기, 키보드 입력 …
 프로그램의
패러다임 변화
–DOS, UNIX --> GUI환경(Windows, X-Windows)
–procedural --> event-driven (event handling)
 Event
Handling(이벤트 처리)
–이벤트가 발생하면, 정해진 작업을 수행함
–이런 일을 하는 프로그램을 Event Handler(이벤트 처리기)라고 함
24
PC통신과 인터넷
이벤트(Event)
 JavaScript의
이벤트
–mouseover, mouseout, click, dblclick, dragdrop, mousemove,
– load, unload, move, resize, focus, blur
–submit, reset, change, select
–keypress, keydown, keyup
–abort, error
 이벤트
처리
–태그에 명시
–문법 :
<TAG eventHandler="JavaScript Code">
–eventHandler의 이름
 on+이벤트이름 (예: onMouseOver)
–예) <a href=“…” onMouseOver=“grimOn( )”>
PC통신과 인터넷
중요한 Event Handler
 <a>
tag
–onMouseOver, onMouseOut, onClick
 <body>
tag
–onLoad, onUnload, onBlur, onFocus
 입력
Form 관련 Tag들의 이벤트 핸들러
–입력 Form 부분에서 자세히 다룸
25
PC통신과 인터넷
26
예제
<html>
<head>
<title>Event처리 연습</title>
<script language="JavaScript">
function tell(s) {
document.form1.msg.value=s;
}
</script>
</head>
<body>
<a href="www.yahoo.com" onMouseOver="tell('마우스가 링크 위로 왔음')" onMouseOut="tell('마우스가 나갔음')">
이건 링크입니다</a>
<form name="form1">
<input name="msg" type="text" size=40>
</form>
</body>
</html>