제1과목 1-12. 클라이언트 스크립트, 자바스크립트
페이지 정보
본문
1-12. 클라이언트 스크립트, 자바스크립트
⑴ 클라이언트 사이드 스크립트의 개요
① 정의
클라이언트 사이드 스크립트(Client Side Script)는 HTML이 할 수 없는 웹페이지 상의 다양한 동적(Dynamic) 표현들을 구현하고 폼 입력 사항에 대한 입력 오류를 점검하는 등의 기능을 한다.
② 종류
클라이언트 스크립트의 종류는 자바스크립트, VB스크립트가 있으나 일반적으로 범용되는 것은 자바스크립트이다.
⑵ 자바스크립트 (javascript)
넷스케이프와 선마이크로시스템사가 공동 프로젝트로서 만든 것으로 선마이크로시스템사에서 제작한 자바(JAVA)라는 프로그램과 유사한 면이 많다고 하여 자바스크립트라는 이름을 갖게 되었다.
① 자바스크립트의 특징
■ 객체를 정의하고 활용하는 객체 지향적(OOP)인 방법을 사용한다. (완전 객체지향 프로그램은 아님)
■ 클라이언트에서 작동하는 클라이언트 사이드 스크립트이다.
■ HTML 문서에 같이 포함된다.
■ 클라이언트가 소스 코드의 내용을 볼 수 있다.
■ 배열 연산 함수 등의 활용으로 프로그래밍 언어와 유사한 면도 있다.
■ 서버 사이드 스크립트(ASP 등) 또는 CGI와 연동되어 활용의 편리성을 증대시킨다.
■ HTML 문서를 더욱 다이나믹하게 작성할 수 있도록 해주는 도구(Dynamic HTML의 한 요소)이다.
② 자바스크립트의 활용
■ 롤 오버 : 이미지에 마우스를 올리면 이미지가 변경되는 기능.
■ 이벤트 창 : 다양한 설정, 다양한 크기의 새 창 띄우기.
■ 알림 메시지 : 클라이언트에게 여러 가지 사항을 알려주는 방법.
■ 레이어 활용 : 보이지 않는 숨겨진 창으로서 메뉴를 슬라이딩해서 보여주거나 간단한 애니메이션을 구현하기도 한다.
■ 입력 양식의 완성 확인 : Form 태그가 있는 웹페이지에 사용되어 입력의 오류나 누락 시 경고 메시지를 띄우고 포커스를 필요 항목에 맞춰주는 등의 작업을 수행함.
■ 기타 HTML이 하지 못하는 무수히 많은 일을 자바스크립트가 수행한다.
③ 자바스크립트의 요소
■ 객체(object) : 이미 만들어져 있는(브라우저에 존재하는) 요소 또는 작성자가 필요에 따라 만드는 요소로서 어떤 기능을 하기 위한 도구 또는 목적으로 존재한다.
■ 프로퍼티(property) : 객체가 갖고 있는 여러 속성
■ 함수 : 사용자가 어떤 행위를 함에 따라(즉 이벤트를 실행함에 따라) 이벤트 핸들러가 작동하여 자바스크립트를 실행한다. 자바스크립트는 그에 따른 기능 즉 함수를 실행하여 작성자가 의도한 결과를 만들어 내는 것이다. 함수는 미리 정의되어 있어야만 실행될 수 있으며 함수 속에 객체와 프로그래밍 요소를 활용하여 좀 더 복잡한 기능을 수행할 수 있다.
■ 내장함수 : 작성자가 정의하는 것이 아니라 웹 브라우저 내에 이미 정의되어 있는 함수.
■ 이벤트 : 웹 페이지 상에서 발생될 수 있는 특정 행위를 이벤트라고 한다. Click, Load, Unload, Mouseover, Focus 등이 이벤트이다.
■ 이벤트 핸들러 : 특정 이벤트가 발생하면 자바스크립트를 실행할 수 있도록 하는 하나의 장치로서 on이 이벤트 이름에 붙는다. onclick, onload, onunload, onmouseover, onfocus 등이 이벤트 핸들러이다.