Transcript 인터넷활용
1. 자바스크립트
• 웹문서에 동적인 효과를 추가하기 위해 사
용하는
프로그래밍 언어
자바스크립트-1
1. 자바스크립트 역사
• 넷스케이프에서 시작
• 썬
• 인터넷 익스플로러(MS사에서….)
자바스크립트-2
1. 자바스크립트 실행
• 클라이언트(웹 브라우저)에서 실행
• 자바스크립트가 포함된 HTML 문서 해석
1. HTML 태그 부분은 HTML 처리기에서
2. 자바스크립트 코드는 자바스크립트 인
터프린터에서 처리
자바스크립트-3
1. 자바스크립트 실행
• 처리할 내용이 바로 실행되어야 한다면
읽는 즉시 실행됨
<SCRIPT>
document.write(…);
alert(…);
</script>
자바스크립트-4
1. 자바스크립트 실행
• 처리할 내용이 바로 실행되면 안 되는 경
우
<SCRIPT>
document.write(…);
alert(…);
funtion aaa(..) {
*****
}
</script>
자바스크립트-5
1. 자바스크립트 장단점
• 장점 314쪽
• 단점 315쪽
자바스크립트-6
1. 자바스크립트 기능 : 315쪽
자바스크립트-7
2. 자바스크립트 삽입
✎ <SCRIPT> 태그 - 316
형식 1
<SCRIPT 속성=“속성값”> ........ </SCRIPT>
속성
예
language
language =
"JavaScript"
src
src =
"sample01.js"
설명
스크립트 언어의 종류를 지정
함. 스크립트는 자바스크립트
라는 것을 지정함.
스크립트를 별도의 파일로 저
장하고 사용하는 경우에만 src
속성을 사용한다. 다운로드 받
아 적용할 스크립트 파일에 대
한 URL을 지정.
자바스크립트-8
✎ <SCRIPT> 태그 사용의 두 가지 형식
1. 선언방법 1 – 내부 스크립트
<SCRIPT language=“Javascript”>
<! - [ javascript source ]
// - - >
</SCRIPT>
2. 선언방법 2 – 외부 스크립트
<SCRIPT language=“Javascript” SRC=“ex.js”>
</SCRIPT>
자바스크립트-9
소스 입력 규칙
1. 따옴표 사용하기
document.write("당신을 환영합니다");
“ “ 안에는 …
2. 문장 끝에 ; 사용하기
3. 대소문자 구별함..
4. 주석 삽입
자바스크립트-10
브라우저 창에 자바스크립트를 이용해 글자를 출력해 보자.
■ <HEAD> 태그에 자바스크립트 코드 삽입
<HTML>
<HEAD>
<TITLE> 간단한 자바스크립트 </TITLE>
<SCRIPT language="JavaScript">
document.write("당신을 환영합니다 ");
document.write(“언제든지 방문해주세요 ");
</SCRIPT>
</HEAD>
<BODY>
여기는 나의 홈페이지이다.
</BODY>
</HTML>
자바스크립트-11
12.3
323쪽
• document.write()
– 자바스크립트에서 웹브라우저에 출력하고자 할
때 사용
– <BODY> 태그 내의 내용을 document 객체가 가
지고 있다
– document.write(“……”)
– 웹 브라우저에 태그를 지정한다면
document.write("당신을 환영합니다!!! <BR>");
자바스크립트-12
JavaScript 문법 - 변수
• 변수
– 변수는 특정 자료형의 값을 가지고 있는 저장 장소
• 변수이름 작성 규칙
– 변수이름은 영문자, _, $, 숫자의 조합으로 이루어진
다.
– 첫째 글자는 영문자, _, $ 로 시작해야 한다.
– 대소문자를 구별한다.
• 변수의 선언 방법
– 변수는 선언 시 변수타입을 지정하지 않는다.
– var 키워드를 이용한다.
• var count ;
• name =“홍길동”;
자바스크립트-13
JavaScript 문법 - 연산자
• 산술연산자
– +
-
* /
% ++
--
• 연결연산자
–
–
–
–
+
문자열과 문자열을 붙여서 하나의 문자열로 만든다.
피연산자 중 하나가 문자열이어야 한다.
Ex) var ex = 8+”8” ;
//ex는 “88” 값을 가짐
• 대입연산자
– = +=
-= *=
/= %=
• 비교연산자
– ==
!=
<
<= > >=
• 논리연산자
– || (or)
&&(and)
! (not)
자바스크립트-14
JavaScript 문법 - 조건문
• if
– if (조건식) { 문장들 }
• if ~ else
– if (조건식) {문장들} else {문장들}
• 중첩 if
– if (조건식) {문장들}
else if (조건식) {문장들}
else if (조건식) …
자바스크립트-15
예
1. <SCRIPT language="JavaScript">
2.
if (salary>3000000) {
3.
bonus = salary * 0.3;
4.
sudang = 20000; }
5.
else {
6.
bonus = salary * 0.5;
7.
sudang = 40000; }
8. </SCRIPT>
자바스크립트-16
예제 12-4 : 330쪽
• Jumsu.htm 문서에서
1. <BODY>
2. <FORM name="form">
3.
점수 : <INPUT type="text" name="jumsu" size="10"><BR
4.
성적 : <INPUT type="text" name="sungjuk" size="10"><B
5.
<INPUT type="button" value="성적 알아보기" OnClick="aa
6. </FORM>
7. </BODY>
자바스크립트-17
예제 12-4 : 330쪽
1. function aaa()
2.
{
3.
jumsu = document.form.jumsu.value;
4.
if (jumsu >= 90)
5.
document.form.sungjuk.value = "A";
6.
else if (jumsu >= 80)
7.
document.form.sungjuk.value = "B";
8.
else if (jumsu >= 70)
9.
document.form.sungjuk.value = "C";
10. }
자바스크립트-18
JavaScript 문법 - 반복문
• for
– for (초기값; 조건식; 증감식; )
{ 문장들 }
• while
– while (조건식)
{ 문장들 }
• do ~ while
– do {
문장들
} while (조건식)
• break
– 반복문안에서 break를 만나면 반복문을 빠져나간다.
• continue
– 반복문안에서 continue를 만나면 나머지 문장을
실행
자바스크립트-19
하지 않고 반복문의 처음으로 돌아간다.
13.2 내장함수
• 웹페이지에 간단하게 표시되는 작은 창
– 경고창, 확인창, 프롬프트 창
– window 객체의 메서드
• 경고창
– 간단한 메시지 표시
– window.alert( “메시지” );
• 확인창
– 확인과 취소를 사용자가 선택하여 그에 대한 처리가
가능
– window.confirm( “메시지” );
• 프롬프트창
– 사용자가 메시지에 따라 데이터를 입력할 수 있다.
– window.prompt( “메시지”[, “기본값”] ); 자바스크립트-20
이벤트와 이벤트 핸들러
322쪽
자바스크립트-21
event
• Event란…
– 웹 브라우저상에서 일어나는 어떤 동작이나
사건
– 웹 페이지 영역 안에서의 동작 예
• 웹페이지 읽어오기(load)
• 링크나 버튼을 클릭하는 것(click)
• 링크나 이미지위 또는 밖으로 마우스를 움직이는
것(mouseOver, mouseOut)
• 폼 요소를 선택하는 것(focus, select)
자바스크립트-22
event handler
• event handler
– event가 발생했을 때 실행되는 작업
– event 이름 앞에 on을 붙인다.
• onClick, onLoad, onMouseOver, onFocus 등
• 대소문자 구별하지 않음.
– event handler는 javascript code(대부분 함수)
형태로 구현된다.
– event가 발생했을 때 실행될 javascript 함수와 연
결해 주는 역할을 한다.
– 이미지 롤오버 효과 예
< IMG SRC=“abc.jpg” onMouseOver = “rollover()” >
event handler
javascript
code
자바스크립트-23
event 와 event handler의 종류
event발생시점
event
event handler
웹 페이지를 모두 읽어왔을 때
load
onLoad
현재 보고있는 웹 페이지를 빠져나갈 때
unload
onUnload
링크나 이미지, 폼 등을 클릭했을 때
click
onClick
링크나 이미지, 폼 등을 더블 클릭했을 때
dblclick
onDblclick
링크나 이미지 밖으로 마우스 커서를 옮겼을 때
mouseout
링크나 이미지 위로 마우스커서를 올려놓았을 때
mouseover
마우스 버튼을 누르는 순간
mousedown
onMouseOut
onMouseOver
onMouseDown
마우스 버튼을 눌렀다가 떼는 순간
mouseup
onMouseUp
마우스가 위치를 옮겼을 때
mousemove
onMouseMove
마우스를 드래그했을 때
dragdrop
onDragDrop
키보드의 키를 눌렀을 때
keydown
onKeyDown
키보드의 키를 누르는 순간
keypress
onKeyPress
자바스크립트-24
키보드의 키를 눌렀다가 떼는 순간
keyup
onKeyUp
이벤트
이미지에 마우스가 올라가면
경고메시지가 출력되도록 자바스크립트 코드를 작성한다.
이 예제에서는 onMouseOver 이벤트 핸들러가 필요하다
1
2
3
4
5
6
7
8
9
10
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function mouse_over(){
alert("아직 공사중입니다."); }
</SCRIPT>
</HEAD>
<BODY>
<img src="버만.jpg" onMouseOver="mouse_over()">
</BODY></HTML>
자바스크립트-25