- 홈페이지 디자인 팁 - 자바스크립트의...
TRANSCRIPT
자바스크립트의 이해 1
최현종(서원대학교)
자바스크립트 기초 상식
HTML과 자바스크립트
HTML : 웹 문서의 뼈대
자바스크립트 : HTML문서의 기능을 더욱 다양하게 해줌 -> 웹 문서에 날개를 달아주는 역할
넷스케이프에서 라이브스크립트라는 이름으로 개발
1995년 선 마이크로시스템즈사가 라이브스크립트 개발권을 넘겨 받으면서 이름을 자바스크립트로 바꿈
자바스크립트의 최대 장점
배우기 쉽다는 것
웹 페이지를 동적으로 만드는 데 필요한 기능만 사용할 수도
있고 미리 만들어진 소스를 가져다 쉽게 응용할 수도 있다.
VBScript : 이후에 자바스크립트와 대항하기 위해 마이크로소프트사에서 개발한 스크립트 언어
자바스크립트는 어떻게 동작하나?
자바스크립트 코드는 웹브라우저가 직접 이해하지 못함.
대신 브라우저 안에 포함된 스크립트 인터프리터 라는 곳에서 자바스크립트 소스를 해석한 후 웹 브라우저에게 결과를 보여주라고 명령
스크립트 소스의 작성 요령
작성원칙 소스가 길어지면 오타가 생기기도 쉽고 찾는 일 또한 힘들기 때문에
자바스크립트를 작성할 때에는 무조건 위에서부터 한 줄씩 입력하지 않고 자바스크립트의 구성에 따라 작성
소스작성요령 1. 스크립트가 들어갈 자리를 만든다.
2. 함수가 들어갈 자리를 만든다.
3. 함수 내부를 채운다.
4. 나머지 실행문을 입력한다.
자바스크립트 선언 방법 <SCRIPT>태그 - HTML 소스와 구분
내부스크립트 HTML문서 안에 필요한 소스를 모두 입력
형식: <SCRIPT LANGUAGE=“javascript”>
<!-
[자바스크립트 소스]
//->
<SCRIPT>
내부스크립트
<SCRIPT LANGUAGE=“javascript”> :
- </SCRIPT>태그를 만날때까지 그 안의 소스들은 내장된 자바스크
립트 인터프리터로 차근차근 넘겨주게 된다.
- <SCRIPT>라고만 적기도 함.
<!- - 와 //- -> : 주석처리
</SCRIPT> : 스크립트 소스의 끝부분
외부스크립트 스크립트 소스를 별도의 파일로 저장해 놓고 사용
장점 – 소스를 감출 수 있다
- 유지, 관리가 쉽다
- 라이브러리를 지원한다
단점 - HTML 요소를 참조하기 어렵다
- 불필요한 부분까지 처리 될 수 있다
- 또 다른 서버 액세스가 필요하다
외부스크립트 사용방법
- 형식
- 내부스크립트에서 <!- - 와 //- - >사이의 실제 소스부분만 따로 저장하면 된다
<SCRIPT LANGUAGE=“javascript” src=“스크
립트 파일”> </SCRIPT>
외부스크립트 (예제)
자바스크립트의 핵심 요소
함수
변수
객체
메서드
프로퍼티
function viewDate() {
window.setTimeout(“viewDate()”,1000)
var now = New Date()
var display=now.toLocaleString()
window.status=display
}
함 수
명령의 단위
미리 만들어져 있는 함수를 불러다 사용하기도 하고, 사용자가
새롭게 만들기도 한다.
형식
function 함수이름([매개변수]){
[명령들]
}
변수 미리 정해지지 않은 값을 대입하여 사용할 수 있는 것
( 예 ) var now = new Date() 문장은 new Date() 결과값을
now라는 변수에 저장
형식 var 변수이름 = 선언내용
객 체
웹페이지에서 다룰 수 있는 대상들
그 객체의 속성을 담고 있는 프로퍼티 부분과 객체의 동작을 제어하는 메서드 부분으로 구성
프로퍼티 객체와 관련된 속성들
객체 이름 뒤에 마침표를 찍고 그 뒤에 프로퍼티 이름을 표시
(예시)
window 객체 : 웹브라우저 창을 나타내는 객체
웹브라우저 창은 메뉴, 도구모음, 폭, 높이, 스크롤바, 상태표시줄 등도 모두 속성
-> 즉, width , height, scrollbars 같은 프로퍼티들이 존재
window.width
window.scrollbars
window.toolbar
브라우저 창의 폭
스크롤바 표시 여부
도구모음 표시 여부
메서드
객체의 동작방법
(예시) 브라우저 창이 할 수 있는 동작 ?
창 열기 = open() 메서드 담당
메서드는 window 객체 안에 이미 만들어져 있음
(예시) window.alert(“우리들의행복한시간♡”)
최상위 객체인 window는 생략가능
코딩을 위한 기본 약속
따옴표 사용하기
: 큰따옴표(“)와 작은따옴표(‘) 두 가지 종류 사용 : 큰따옴표 안에 또 따옴표를 사용해야 할 경우에는 작은 따옴표를 사용 (예시)
document.write(“<img src=‘cool.jpg’>”)
주 석
필요한 부분에 설명을 달아놓는 것
한 줄 주석 : // 붙은 다음 부터는 한 줄만 주석으로
인식
여러 줄 주석 : 주석 내용이 여러 줄일 경우
맨 앞에 /* 붙이고 맨 뒤에 */ 를 넣는다
(예시) /*이미지 소스를 아래처럼
넣습니다*/
gfx[0]=“image.jpg” //다른 이미지
gfx[1]=“img.jpg”
스크립트 실행하기 소스 안에서 직접실행 하는 방법
실행할 소스가 짧을 경우 <script>와 </script> 사이에 즉시 실행할 수 있는 문장을 넣는다. 단, 스크립트 위치에 따라 소스 실행 결과가 조금씩 달라질 수 있음.
링크에서 실행하는 방법
<A> 와 </A> 태그 사이에 스크립트 소스를 삽입 형식
<A HREF=“javascript:실행내용”> ~ </A>
미리 알아둘 document.write() : 괄호 안의 내용을 웹 브라우저 화면에 표시하는 메서드
이벤트 핸들러를 이용해서 함수를 실행하는 방법
이벤트 핸들러 ? 어떤 행동을 했을 때 그에 따른 반응을 보이도록 하는 것
<A> 태그의 HREF속성에서 #만 입력하고 바로 뒤에 이벤트 핸들러 소스 추가
(예) <A HREF=“#” onClick=“mymovie()”> 요걸클릭하면?</A>
예제
함수정의부분
함수실행부분