메뉴표시줄: 포토샵에서 쓰는 각종 메뉴들이 있습니다. 순서대로 File, Edit, Image, Layer, Select, Filter, View, Window, Help입니다. File: 파일 저장과 기본적인 옵션을 설정하는 메뉴들이 있습니다. Edit: 선택영역을 편집하는 메뉴들이 있습니다. Image: 이미지를 보정하거나 이미지 전체를 처리할 수 있는 메뉴들이 있습니다. Layer: 레이어에 관련된 메뉴들입니다. Select: 선택영역을 처리할 수 있습니다. Filter: 사진이미지를 그린 것처럼 처리하거나, 모자이크 효과등을 내주는 각종 필터들이 있습니다. View: 작업이미지가 보이는 모양을 조정할 수 있고, 이미지에 격자선이나 자를 보여줄 수 있습니다. Window: 각종 팔레트들을 보이게 하거나 숨길 수 있습니다. 팔레트들이 흩어져 있을 때는 Window메뉴의 Reset Palette Rocations를 클릭하면 기본으로 되돌릴 수 있습니다. Help: 도움말을 볼 수 있습니다.
옵션바: 도구상자에서 도구를 선택하면 도구에 딸린 옵션이 나타납니다.
도구상자: 툴박스라고도 합니다. 이미지를 편집하는데 쓰는 각종 도구들이 모여있습니다.
팔레트: 오른쪽의 네모들은 팔레트입니다. 각각의 팔레트들은 특정한 작업을 진행하기 위한 작업대와 같은 것들입니다.
픽셀과 해상도: 픽셀은 화소라고도 불리며, 색을 표시하는 가장 작은 단위입니다. TV를 아주 가까이 보면 작은 네모들이 보이는데 이를 픽셀이라고 보면 됩니다. TV에 비하면 컴퓨터 모니터가 훨씬 정밀합니다. 컴퓨터는 모니터에 이미지를 나타낼 때 이 픽셀들을 찍어서 나타냅니다. 같은 크기의 그림이라도 더 많은 픽셀을 써서 나타내면 그림의 질이 훨씬 좋아집니다. 이렇게 기준 크기를 얼마나 많은 픽셀이 나타내고 있는지를 표시하는 것이 해상도입니다. 해상도가 높다는 것은 같은 크기의 그림을 더 많은 픽셀이 나타내고 있다는 뜻으로서, 해상도가 높아지면 그림의 질은 높아지지만 파일의 크기는 커지게 됩니다. 해상도는 인쇄매체에 따라 조정하여 쓰면 됩니다. 웹용 이미지: 72ppi(pixels per inches) 신문용지에 인쇄할 이미지: 70~90ppi 일반용지에 인쇄할 이미지: 150~250ppi 고급용지에 인쇄할 이미지: 300ppi
RGB: RGB는 Red, Green, Blue의 약자로, RGB모드는 Red, Green, Blue 세 가지 색의 가산 혼합에 의해 색깔을 표현합니다. 모니터는 최대 약 1천6백만 칼라(이를 24bit칼라라고도 부른다.)의 색상 수를 표현할 수 있는 데 이는 자연계에서 사람이 볼 수 있는 색깔을 표현하기에 충분한 색상 수라고 합니다. 포토삽의 RGB Color는 이미지의 작업시 색상 팔레트와 이미지 내의 색상의 구현을 24bit칼라에 기초하여 하도록 하는 모드입니다. RGB색상은 각 색상을 2자리씩의 16진수로 표현합니다.
CMYK: CMYK는 잉크에 기초한 색상구현 원리(감산혼합)를 사용하는 모드입니다. CMYK는 Cyan(짙은 하늘색), Magenta(자주색), Yellow(노란색) 그리고 Black(검정색) 네 가지 색상을 혼합하여 색상을 표현합니다. 나타낼 수 있는 색상 수는 위의 RGB 영역보다 적지만, 컬러 인쇄의 경우 CMYK잉크로 인쇄하므로 출력물의 색상을 예측하여 작업해야 할 경우에는 CMYK모드에서 작업합니다.
레이어: 레이어는 에니메이션에 사용하는 셀에 비교를 할 수 있을 것입니다. 셀은 에니메이션 제작에 사용되는 투명한 셀룰로이드지를 말하는 것인데, 배경그림, 캐릭터 등을 따로 그려서 장면을 만들 때 재구성하여 사용합니다. 따라서, 하나의 캐릭터가 같은 동작을 다른 배경에서 할 경우 배경그림만 바꾸어 주면 이미 그려 놓은 캐릭터 셀을 다시 사용할 수 있는 것이다. 즉 필요에 따라서 셀을 재구성하기 때문에, 수정을 할 경우 전체를 손보는 것이 아니라, 이상이 있는 셀만을 수정하면 되는 것입니다. 레이어도 이와 마찬가지입니다. 새 이미지에서 가장 아래에 만들어지는 레이어는 Background라는 이름으로 되어 있는데, 이 레이어는 배경화면을 이루는 것으로 이미지의 기본이 됩니다. 레이어는 이미지의 합성이나, 편집, 채색 등의 모든 작업을 할 때 매우 편리하게 사용할 수 있습니다.
필터: 필터는 원래 사진기로 촬영을 할 때 사진기 렌즈 앞에 붙여서 사진에 다양한 효과를 내주는 렌즈를 말합니다. 종류도 이미지의 색상을 보정해 주는 필터, 초점을 흐리게 하여 부드러운 효과를 내주는 필터등 다양합니다. 포토샵의 필터도 이미지에 특수한 효과를 내주는 역할을 합니다. 모든 필터를 막힘없이 사용하기 위한 컬러모드는 RGB모드입니다.
여러가지 그래픽 파일 형식 BMP: 윈도우 95와 OS/2에서 기본적으로 지원하는 그래픽 파일입니다. 사용이 간편하고 거의 모든 프로그램에서 지원한다는 장점이 있지만, 압축이 전혀 되지 않아 파일 크기가 매우 큽니다. 윈도우 95의 배경 화면으로 사용하는 포맷이 바로 bmp입니다. GIF: 서로 다른 그래픽 형식의 호환을 위해 개발된 형식으로 인터넷에서 널리 사용되고 있습니다. 256색상인 경우에 파일 크기가 가장 작은 포맷이기 때문에 웹사이트의 아이콘으로 많이 사용되며, Gif89a 포맷은 움직이는 애니메이션이나 바탕이 투명처리된 파일을 만들 때에 많이 사용되고 있습니다. JPG: GIF형식과 함께 웹에서 널리 쓰이고 있습니다. 화질이 다른 포맷에 비해 조금 떨어진다는 단점이 있지만 육안으로는 거의 차이가 없고, 트루컬러(1,680만색)로 저장할 수 있는 파일형식중 파일 크기가 가장 작습니다. 현재 이미지 배포를 위해 가장 많이 사용하는 압축 포맷으로 압축률이 가장 높습니다. TIF: Tagged Image Format의 약자로 jpg처럼 화질이 떨어지지도 않고, 모든 색상을 표현할 수 있으며, 압축율도 뛰어난 형식입니다. 이런 특징으로 인해 컴퓨터 출판을 위한 이미지에 많이 쓰이고 있습니다. PSD: 포토샵 표준 저장 형식입니다. 모든 알파 채널과 레이어, 주석, 스팟 컬러, 패스등을 보호하여 저장하므로 용량은 크지만 나중에 다시 작업이 필요할 때 유용합니다.
FTP로 유저들을 귀찮게 하는 대신에, HTML 파일 업로드 요소를 사용하여 웹 페이지 상의 파일을 선택할 수 있다. 이 새로운 요소에는 텍스트 란과 검색 버튼이 들어 있다. 버튼은 파일을 선택할 수 있는 대화 상자를 가져온다. 텍스트 란에는 선택된 파일의 이름이 저장되어 있다. 유저가 양식을 전송할 경우, 그 파일이 서버로 보내진다.
보안상의 이유로, 자바 스크립트는 이력 태그에 집어넣은 이름과 파일 업로드 요소 값만을 읽을 수 있다.
아래의 코드처럼, 유저가 파일을 선택했는지를 확인하는 데 value를 사용할 수 있다.
FileUpload 오브젝트
특성
name : 이름 속성의 값 value : 파일의 위치
방식
focus() : 텍스트 란으로 옮겨 가기 blur() : 텍스트 란에서 떠나기
이벤트핸들러
파일 업로드하기
Give us your files!!
if(document.forms[0].theFie.value == ""){
if( ){ 확인 기능 내에, if와 괄호를 써넣는다. 이것은 괄호 안에 집어넣은 것이 true일 경우에만 자바 스크립트가 계속 진행되게 한다.
document.forms[0].theFile 파일 업로드 요소를 나타낸다.
.value 도트와 value를 써넣어 유저의 파일 위치로 접근한다.
=="" 동등 연산자 심볼(==)을 써넣고 나서 아무 것도 없는 문자열("")을 써넣는다. 이것이 유저가 파일을 선택했는지를 검사해 준다.
alert("Please specify a file to upload.")
if 절의 괄호 안에 에러 메시지를 집어넣는다. 유저가 파일을 선택하기 전에 양식을 전송하려고 하면 자바 스크립트가 이 문장을 디스플레이하게 된다.
■ 코드 실행 결과
17. 복수의 조건들 검사하기
스크립트에 하나 이상의 값을 검사하는 데도 조건절을 사용할 수 있다. 예를 들어, 밑의 코드는 유저가 페이지 상의 두개의 다른 라디오 버튼을 선택했을 경우에만 경고를 한다. 단일 조건절에 복수의 조건을 포함시켜려면 밑의 표에 나와 있는 것처럼 논리 연산자들을 사용해야 한다.
연산자
&& || !
논리비교
양쪽 피연산자들이 모두 진짜이면 true ("and") 한쪽 연산자만이라도 진짜면 true ("or") 어느 한쪽 피연산자만이라도 거짓이면 true("not")
파일 업로드하기
function analyze(theForm){
검사하고 있는 양식을 참조하는 하나의 인자로 기능을 정의한다.
if (theForm.group[0].checked && theForm.group2[0].checked) {
if ( ) { 기능 내에, 복수의 값들을 검사하는 데 사용할 if절을 써 넣는다.
theForm.group[0].checked 인자의 이름과 양식에 검사하고 싶은 첫번째 특성의 주소를 써 넣는다. 이 특성은 true와 false 값을 가지고 있다.
&& 원하는 논리 연산자를 써넣는다. 위의 표에는 모두 3개가 나와 있다. 위의 코드는 &&를 사용하여 두개의 버튼이 모두 선택되어 있는지를 확인하고 있다.
theForm.group2[0].checked 논리 연산자 등에 인자의 이름과 특성을 확인하는 두번째 라디오 버튼의 주소를 써 넣는다. 이것이 오른쪽 피연산자가 된다.
onClick="analyze(this.Form)"
HTML 태그 내에 이벤트 핸들러를 위치시켜 검사 기능을 호출한다. 이것을 this.form으로 패스하여 작업하고 있는 양식을 참조하는 것을 짧게 줄인다.
■ 코드 실행 결과
18. for 루프로 숫자 세기
while 루프는 문장 세트를 몇 번이고 반복해서 실행시킨다. 루프가 반복될 때마다 다른 정보로 작업하게 하려면, for 루프가 필요하다. for 루프는 계수기(counter)를 사용하여 반복할 때마다 값을 변경시킨다. for 루프를 정의할 때, 루프 조건에 덧붙여서 계수기에 대한 정보를 지정한다.
for 루프로 수세기
for (var i=1;i<=10;i++){ document.write("
"+i+"
") alert("Wow,we're counting!") }
for( ) 스크립트 어디에든 for를 써넣고 그 뒤에 괄호를 집어넣어 for루프의 시작을 나타낸다.
var i =1 등호표시를 사용하여 계수기에 대한 시작값을 배정한다. 전통적으로 for 루프들은 i변수를 사용한다. 앞서 해 놓지 않았다면 변수를 선언할 수 있다.
;i<=10 세미콜론 다음에 루프의 조건을 놓는다. 이 조건이 true가 아닐 때 루프가 멈추게 된다. 일반적으로 비교 연산자들을 사용하여 계수기와 고정값을 비교하게 된다.
i++ 세미콜론 다음에 루프의 계수식을 써넣는다. 증가 연산자들을 이용할 수 있다. 예를 들어 위의 코드는 ++를 사용하여 매번 반복할 때마다 계수기에 하나를 더하고 있다.
{ document.write("
"+i+"
") alert("Wow, we're counting!")} )다음에, 중괄호 안에 문장을 써넣는다. 이 문장에 계수기 변수를 사용할 수도 있다.
■ 코드 실행 결과
19. 문자열을 숫자로, 정수로, 숫자를 문자열로 변환시키기
유저가 숫자를 텍스트 란에 입력하면, 자바 스크립트가 그 난의 값을 문자열로서 읽는다. 이 값을 수치로서 작업하려면 그 유형을 변환시켜야 한다. 자바 스크립트에는 문자열을 숫자로 변환시키는 데 사용할 수 있는 세 가지 기능이 탑재되어 있다.
유저가 입력한 텍스트를 숫자로 변환시키는 데는 eval()을 가장 자우 사용하게 된다. eval()는 그것이 스크립트의 일부인 것처럼 부여한 텍스트를 읽는다.(이 것은 변환 작업은 부수적인 효과일 뿐이다.). 코드행을 검사하는 것과 같은 몇가지 목적을 위해서(아래의 코드 참조), 원래의 목적으로 eval 명령을 사용하게 된다.
document.forms[0].field.value 스크립트 내에 텍스트란에 들어갈 텍스트를 나타낸다.
eval( ) eval을 써넣고 문자열을 괄호로 감싼다. 이것은 그 안에 있는 것은 무엇이든지 자바 스크립트 코드로 바꿔준다. eval()에 숫자를 담고 있는 문자열을 부여하면, 이것이 진짜 수치 값으로 바뀌게 된다.
document.forms[0].out.value= 일단 변환을 하고 나면, 등호 표시를 사용하여 새로운 숫자를 변수에 배정하여 나중에 다시 사용할 수 있다.
■ 코드 실행 결과
19.2. 문자열을 정수로 변환시키기
자바 스크립트는 정수와 부동 소수점이라는 두 가지 종류의 숫자들로 작업할 수 있다. 자바스크립트가 유저에 의해 입력된 텍스트를 특정한 종류의 숫자로 취급하게 만드려면, parselnt()를 사용하여 정수로 변환시키거나 parseFloat()를 사용하여 부동 소수점으로 변환시킨다.
유저가 숫자를 입력할지 잘 모르는 상황에서도 이런 명령을 사용할 수 있다. eval()에 글자를 부여하면 에러 메시지가 나타나는 반면에, parsInt()와 parseFloat()는 "숫자가 아님"을 나타내는 NaN을 반영하게 된다.
문자열을 정수로 변환시키기
var a = parseInt(document.it.num.value)
parseInt( ) 스크립트 내에 parseInt와 괄호를 써 넣어 정수로 변환시키고 싶다는 것을 알린다.
또는 parseFloat( ) parseFloat와 괄호를 써 넣어 부동 소수점(소수) 숫자로 변환시킨다.
document. it. num. value 인용 부호 안에 숫자를 써넣거나 텍스트란의 주소를 써넣는다. 이 숫자에 소수점 자리가 포함되어 있으면, parseInt()이 아래의 결과에서처럼 그것들을 떼어버리게 된다. var a = 변수를 만들고 그것에 새로운 정수를 배정하고 등호 표시를 넣는다. 이제 이 변수를 통해서 변환된 숫자로 접근할 수 있다.
■ 코드 실행 결과
19.3. 숫자를 문자열로 변환시키기
거의 언제나 자바 스크립트가 필요한 만큼 숫자를 문자열로 변환시키도록 해 놓을 수 있다. 하지만, 숫자를 특정한 진법으로 나타낼 수 있도록 이것을 분명하게 해야 한다. 이것은 HTML 16진수 컬러 코드로 작업해야 할 경우에 특히 도움이 된다.
num 숫자를 저장하고 있는 변수의 이름을 써 넣는다. 위의 코드는 유저가 선택한 숫자를 담아 둘 것을 하나 만들고 있다.
.toString( ) 도트와 toString을 써 넣어 숫자를 문자열로 변환시키고 있음을 알린다.
base 10진법이 아닌 다른 기수법으로 숫자를 나타내려면, 괄호 안에 2와 16 사이의 숫자를 삽입한다.
document.forms[0].outfield.value = 텍스트 상자의 텍스트를 나타내고('오브젝트에 대하여' 참조) 등호 표시를 사용하여 그것에 자신이 만든 문자열을 배정한다. 이것은 그 란에 변환된 숫자를 나타내 준다.
■ 코드 실행 결과
20. 페이지 로드에 반응하기
대부분의 이벤트 핸들러들은 페이지 상의 유저의 행동들의 반응을 한다. onLoad와 onUnload는 페이지 행동들에 반응을 한다. onLoad와 onUnload는 페이지 자체가 로드하는 것에 대해 다르게 반응한다. onLoad와 onUnload를 사용하여, 페이자가 다운로드되는 것이 완료되었을 때나 유저가 페이지를 떠날 때 기능을 트리거할 수 있다. 예를 들어, 아래의 코드는 페이지가 완료되었을 때 감사 메시지를 디스플레이해 준다.
페이지가 아직 로드되고 있을 때 스크립트가 페이지의 일부로 접근하려 하면, 에러 메시지가 나타난다. 이런 현상을 피하려면, onLoad를 사용하여 페이지가 로드되자마자 스크립트가 트리거되도록해야 한다.
페이지 로드에 반응하기
HTML의 본문 태그를 지정한다.
onLoad onLoad 이벤트 핸들러를 사용하여, 모든 이미지들을 포함해서 페이지가 로드되는 것이 완료되었을 때 기능을 트리거 한다.
또는 onUnload 유저가 링크를 클릭하거나, 브라우저를 종료시키거나, 아니면 윈도우를 닫아서 그 페이지로부터 떠나게 되었을 때는 onUnload를 사용하여 기능을 트리거 할 수 있다.
="thanks()" 기능의 이름과 괄호를 써 넣는다. 이것을 동호 표시와 함께 이벤트 핸들러에 배정해 놓는다.
■ 코드 실행 결과
21. 상태바 메시지 디스플레이 하기
브라우저 윈도우의 하단에 있는 회색 영역을 상태바라고 한다. 브라우저는 이 곳에 도큐멘트와 이미지들을 로드하는 진행 과정에 대한 정보를 디스플레이 한다.
상태 바의 텍스트를 개별화하는 것은 자바 스크립트의 용도 중 가장 자주 사용되는 것이다. 이 것은 defaultStatus와 status로 할 수 있다. status에 배정된 텍스트는 즉각 디스플레이되는데, 브라우저가 다음에 메시지를 디스플레이할 때 사라진다. 보통 status는 유저가 링크 위로 이동하는 작업과 같은 유저의 이벤트와 메시지를 연계시키는 데 사용된다.
defaultStatus는 페이지가 로드되어 있는 한 상태 텍스트의 초기값을 설정해 준다. 이것은 변경되지 않고, 위의 코드에서처럼 아무 메시지도 나타나지 않을 경우에 보이게 되는 메시지를 디스플레이하는 데 사용한다.
상태바 메시지 디스플레이하기
본문 태그의 onLoad 이벤트 핸들러 내에 defaultStatus를 써 넣어 상태 바의 초기 텍스트를 대치시키고 싶다는 것을 알린다.
대부분의 프로그램들에서 마우스로 버튼을 클릭하면 어떤 상태로 나타나는지는 이미 알고 있을 것이다. 소프트웨어 업체들은 실제로 진짜 버튼을 누른 것처럼 실감나게 버튼을 만들어 놓으려고 애쓰고 있다. 자바스크립트로 페이지에 대화형 버튼을 추가하여 유저에게 좀더 친숙한 페이지로 만들 수 있다.
컴퓨터는 내장되어 있는 시계로 현재의 시간을 나타냅니다. 새로운 날짜 변수를 만들어서 그 시간을 저장할 수 있다. 날짜를 저장하고 싶을 때마다 Data 생성자를 사용하여 인스턴스를 만들 수 있다.
현재 날짜 디스플레이하기
var today = new Date()
var today = 스크립트 내에, 변수를 만들고 등호 표시를 사용하여 그것에 새 날짜를 배정합니다.
new new를 써 넣어 새로운 인스턴스를 만들려고 한다는 것을 자바스크립트에게 알립니다.
Date() Date 생성자를 사용하고 싶다는 것을 나타내고 그 이름 뒤에 괄호 놓습니다. 괄호 안에 정보를 집어 넣으면 현재 날짜가 아닌 날짜도 저장할 수 있습니다.
alert("The current date is:"+today) alert()의 괄호 안에 메시지와 Date 변수의 이름을 삽입합니다. 다음의 실행 결과에서처럼 자바 스크립트는 현재 날짜를 디스플레이 해줍니다.
■ 코드 실행 결과
24. 배열 만들기
자바 스크립트 계층 구조에 사용했던 배열들과 같이, 만들어 놓은 배열들에는 관련 정보가 저장되어 있다. 배열 엔트리에는 수치, 부울값, 문자열 등 어떤 종류의 정보라도 집어 넣을 수 있다. 첫번째 엔트리가 0으로 시작되는 수치로 자신의 엔트리들을 참조할 수 있다.
넷스케이프3.0의 Array 생성자로 배열들을 만들 수 있다. 배열 엔트리에 집어 넣을 것과 엔트리 수를 지정할 수 있다.
현재 날짜 디스플레이하기
var colors = new Array(3)
var color = 변수를 만들어서 새로운 배열을 닫는다.
new new를 써 넣어 오브젝트를 만들려고 한다는 것을 알린다.
Array() Array 생성자를 지정하여 인덱스 엔트리 세트를 만든다.
3 새로운 배열에 담고자 하는 엔트리의 수를 써 넣는다. 이것들 각각은 그것에 값을 배정하기 전까지는 null을 담고 있게 된다.
또는 "tan","peru","wheat" 배열에 담고 싶은 값들을 써 넣는다. 첫번째 엔트리가 0으로 시작되는 배열의 엔트리들에 자바 스크립트가 이것들을 집어 넣는다.
colors[0] = myColor
특정 엔트리를 채우려면, 배열 이름과 엔트리 번호를 대괄호 안에 써 넣는다. 등호 표시를 사용하여 그것에 값을 배정한다.
■ 코드 실행 결과
25. 새로운 윈도우 열기, 윈도우 닫기
25.1. 새로운 윈도우 열기
아래의 코드에서처럼 open()을 사용하여 새로운 윈도우들을 열 수 있다. 이것으로 윈도우의 내용과 기능들 (크기, 스크롤 막대 등등)을 제어할 수 있다. 유일하게 제어 할 수 없는 것은 화면에서 새로운 윈도우의 위치 뿐이다.
새로운 윈도우 열기
var myWin = window.open("beauty.htm"),"picture
var myWin = 변수를 선언한다. 새로운 윈도우에 대한 참조를 저장하는 데 이것을 사용하게 된다.
open( ) open()을 써 넣어 새로운 윈도우를 연다.
"beauty.htm" 인용 부호 안에, 새로운 윈도우에 대한 HTML 파일의 위치를 써넣는다.
,"picture" 쉼표 다음에 새로운 윈도우에 대한 이름을 지정한다. 다른 페이지 상의 링크들로 그 새로운 윈도우를 지정하면, 이 이름을 사용하게 된다.
,"status=no, " 쉼표 다음에 인용 부호 안에 새로운 윈도우의 기능들을 지정해 넣는다. 원치 않는 윈도우 기능의 이름 뒤에는 = no를, 원하는 기능 뒤에는 = yes를 써 넣는다. 아래 그림에는 설정할 수 있는 모든 기능들을 나타내 놓았다. 어떤 기능들도 지정하지 않으면, 그 것들은 모두 초기값인 yes로 된다. 위의 코드에서처럼 그것들 중 적어도 한 개라도 no로 설정하면, 원하는 것들은 yes로 설정해 놓아야 한다. 기능 배정은 쉼표로 분리시킨다.
width=300,height=200 인용 부호 내에, 윈도우의 가로와 세로 크기를 픽셀 값으로 지정해 넣는다.
■ 코드 실행 결과
25.2. 윈도우 닫기
넷스케이프 2.0이하의 브라우저에서는, 스크립트는 아무 경고 없이 어떤 윈도우라도 닫을 수 있다. 너무도 많은 사람들이 이것을 남용해서, 넷스케이프 3.0 이상에서는 이 기능을 제한하고 있다. 어떤 윈도우라도 닫을 수 있지만, 자바 스크립트가 그것을 열지않았으면 유저에게 닫을 것인지를 확인하게 된다.
페이지가 두번째 윈도우를 열었다면, 그것을 열을 때 사용했던 변수 이름으로 그것을 닫을 수 있다. 현재 윈도우를 닫으려면 self를 사용하고, 현재 윈도우를 열어 준 윈도우를 닫으려면 opener를 사용한다.
윈도우 닫기
onClick="self.close()"
self 닫으려고 하는 윈도우의 스크립트 내에, self라고 써넣어 그 윈도우임을 나타낸다. 이것을 떠나면 자바 스크립트는 현재 윈도우를 닫고 싶어하는 줄 알게 되는데, self를 사용하여 코드를 확실하게 해 두어야 한다. 위의 코드는 이벤트 핸들러로부터 self를 나타내고 있다.
또는 opener opener를 써넣어 현재 윈도우를 열어 준 윈도우를 나타낸다.
.close() .close와 그 뒤에 괄호를 써넣어 지정했던 윈도우를 닫는다. 자바 스크립트가 이 윈도우를 열었다면, 이것을 즉각 닫아준다. 자바 스크립트가 이 윈도우를 열지 않았다면, 유저에게 그것을 닫을지를 물어 오게 된다.
유저는 이벤트(event)라고 하는 행동을 통해서 웹 페이지의 부분들과 서로 반응하게 된다. 자바 스크립트를 사용해서 이벤트 핸들러 (event handler)들을 이용하여 이벤트들에 반응할 수 있다. 자바 스크립트에는 12개의 이벤트 핸들러가 있는데 이것을 아래의 표에 나타내었다.
이벤트
이벤트핸들러
onFocus
유저가 오브젝트에 초점을 맞춘다.
onBlur
유저가 오브젝트로부터 초점을 뗀다.
onSelect
유저가 텍스트를 하이라이트 한다.
onChange
유저가 오브젝트의 값을 바꾼다.
onSumit
유저가 양식을 전송한다.
onClick
유저가 버튼이나 링크를 클릭한다.
onMouseOver
유저가 커서를 링크 위로 이동시킨다.
onMouseOut
유저가 커서를 링크 위에서 옮겨 간다.
onLoad
페이지나 이미지가 로드 완료된다.
onUnLoad
유저가 페이지에 떠난다.
onAbort
유저가 로딩 작업을 멈춘다.
onError
에러가 발생한다.
일반적으로 이벤트 헨들러를 통해 스크립트의 제동 장치 역할을 부여하게 된다. 유저가 버튼을 클릭하면, 자바 스크립트로 강화된 페이지가 반응을 하게 된다. 이것은 onClick에 원하는 반응을 배정하여 할 수 있다. 웹 페이지의 각 부분은 어떤 특정한 이벤트 핸들러로써 작동된다.
대부분의 경우, 이런 이벤트 핸들러의 이름들은 자신들이 작동될 때를 나타내 준다. 하지만 몇 가지는 설명이 필요하다. 텍스트 난이나 윈도우로 이동하여 초점을 맞추는 이벤트는 onFocus로 작동된다. 난이나 윈도우를 떠나는 것은 onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur가 아니라 onChange로 작동된다.
어떤 이벤트들은 유저의 행동에 직접적으로 개입하지 않는다. 예를 들어, onError는 스크립트가 작동시에 에러를 만났을 때 반응을 유발시킨다.
11.1. 이벤트에 반응하기
웹 페이지의 거의 모든 부분은 적어도 하나의 이벤트 핸들러를 가지고 있다. 이것들을 이용하여 페이지의 부분들이 스크립트의 부분들을 작동시키도록 할 수 있다.
이벤트 핸들러에 스크립트의 부분을 할당하여 그 이벤트가 (on-다음에 오는 것)발생할 때 그 스크립트 부분을 자바 스크립트가 읽도록 해 놓는다. 작동시키고 싶은 코드를 인용 부호 안에 집어넣어야 한다.
글쓰지 마세요:
스크립트로 쓰고 싶은 HTML 태그를 선택한다.
onChange HTML 속성 다음에 해당 이벤트 핸들러의 이름을 써 넣는다. on 다음에 나오는 글자만 빼고는 모두 소문자로 되어 있어야 한다.
= 등호 표시를 사용하여 배정을 나타낸다.
"alert("경고! 경고!")" 등호 표시 다음의 괄호 안에 반응을 써 넣어서 그 이벤트에 반응을 배정한다. 아래의 코드 실행 결과는 경고 메시지를 나타내 주는 것이다.
■ 코드 실행 결과
11.2. this로 표현 방법 짧게 줄이기
자바 스크립트의 표현 방법은 때로 좀 긴 경향이 있다. 예를 들어, 텍스트 난의 값을 나타내는 것은 적어도 네 단계가 필요하다 : document.forms[0].elements.[0].value 다행히도, this라는 키워드를 사용하여 이것을 짧게 만들 수 있다. this가 전체 오브젝트 내용을 대신한다. 스크립트를 보다 분명하고 간결하게 만들 수 있을 때 this를 사용해야 한다.
원하는 HTML 태그 안에 이벤트 헨드러를 위치시킨다. 밑의 코드 실행 결과는 유저가 텍스트 난 밖을 클릭하면 경고를 나타나게 하는 것이다.
="alert( )"> 이벤트 핸들러에 명령어를 배정한다.
this this를 써넣어 명령어로 작업하고 있는 오브젝트를 지적한다. 또는 document.form[0].elements[0] this를 사용하지 않으면 전체 내용을 완벽하게 써넣어야 한다.
.value 접근하고 싶은 특성과 그 앞에 도트를 써넣는다.
■ 코드 실행 결과
12. 함수 정의하기
함수란 이름을 갖고 있는 자바 스크립트 내용들의 집합이다. 자신이 원하는 내용과 그 그룹에 원하는 이름을 정의할 수 있다. 그 함수를 호출할 때마다, 그 명령어들을 써넣는 순서대로 자바 스크립트가 읽게 된다.
12.1. 함수 정의하기
onClick=" " 이벤트로 함수를 트리거하려면 HTML 태그 내에 이벤트 핸들러를 위치시킨다. 밑의 코드 실행 결과에서는 이것에 버튼을 사용하고 있다.
doMath 이벤트 핸들러 내에 함수명을 써넣는다. 함수를 정의하는 데 사용했던 똑같은 제목을 사용한다.
() 자바 스크립트에게 함수를 불러내고 있다는 것을 알리기 위해 이름에 괄호를 더한다.
■ 코드 실행 결과
12.3. 이벤트 핸들러 재설정하기
이벤트 핸들러는 그것이 트리거될 때마다 똑같은 일을 해낸다. 이것이 문제가 되지는 않지만, 버튼이 처음 트리거되었을 때 한 함수를 호출하고 다시 트리거되었을 때는 다른 함수를 호출하게 하고 싶다면 어떻게 할까? 넷스케이프3.0이상에서는 스크립트 내의 어디서나 이벤트 핸들러에 새로운 함수를 배정할 수 있도록 하여 이 문제를 해결해 놓았다. 이런 기법을 이벤트 핸들러 재설정하기라고 한다. 이벤트 핸들러를 재설정하려면, 스크립트 내에 그것의 위치를 나타내 놓는 방법이 몇 가지 필요한데, 이벤트 핸들러와 연계되어 있는 오브젝트의 특성으로써 나타내면 된다.('오브젝트에 대하여' 참조)
대화 상자를 통하여 간단하게 유저와 상호 반응할 수 있다. 대화 상자에서는 정보를 나타낼 수도 있고 받을 수도 있다. 자바 스크립트로 경고 (alert), 프롬프트(prompt), 확인(confirm) 대화 상자를 만들 수 있다. 다음 강좌 페이지들은 이것에 대해 설명해 놓았다. 웹 페이지 상의 버튼들과 같이 모든 대화 상자들은 유저의 작동 시스템의 표준 부분들을 사용한다. 예를 들면 경고 대화 상자는 매킨토시와 윈도우즈에서 약간씩 다르게 나타난다. 경고 대화 상자는 경고 아이콘과 작업자가 지정한 텍스트가 들어 있는 표준 대화 상자이다. 유저가 OK 버튼을 누르면 대화상자가 지워진다. 경고 명령으로 경고 대화 상자를 나타낼 수 있다.
경고메시지 나타내기
alert("message")
alert alert 명령을 지정하여 밑의 코드 실행 결과에서처럼 간단한 대화 상자를 나타낸다.
( ) 메시지 주위에 괄호를 집어넣는다. 이것은 자바 스크립트 표시이다.
"message" 인용부호 내에 원하는 메시지를 써넣는다.
■ 코드 실행 결과
8.2. 확인 대화 상자 나타내기
버튼이 두개 있는 것(밑의 코드 실행 결과 참조) 말고는 확인 대화 상자는 경고 대화 상자와 똑같다. 윈도우즈에는 OK와 Cancel 버튼이 있고, 매킨토시에는 Yes와 No 버튼이 있다. 두개의 버튼으로 유저에게 간단한 질문을 하게 되어 있다. 확인 대화 상자는 유저의 답을 스크립트에 반영시켜 준다. 즉 True나 fale를 써 넣은 곳에 명령어를 사용할 수 있다. 유저가 OK를 선택하면 확인 대화 상자는 true로 알게 된다. confirm 명령으로 확인 대화 상자를 만들 수 있다.
확인 대화상자 나타내기
document.write(confirm("message"))
confirm( ) confirm()을 이용하여 OK와 Cancel 버튼이 있는 대화 상자를 나타낸다.
"message" 대화 상자에 나타내고 싶은 텍스트를 인용 부호 안에 지정해 놓는다.
document.write( ) confirm 명령은 true와 false 논리값을 반영하므로 스크립트가 이 값을 사용할 수 있다. document.write()의 괄호 안에 confirm()을 집어넣으면 유저의 대답이 HTML 페이지에 나타나게 된다.
■ 코드 실행 결과
8.3. 프롬프트 대화 상자 나타내기
프롬프트 대화 상자에는 기본적인 대화 상자에 있는 외에 또 다른 구성 요소가 들어 있다. 유저가 OK를 클릭하면, 유저가 텍스트 난에 입력한 내용인 프롬프트 명령 위치에 놓이게 된다. 이렇게 하여 유저로부터 텍스트 정보를 받게 되는 것이다. 앞서의 다른 명령어들과는 달리 prompt()는 괄호 안에 한 개 이상의 항목을 사용한다. 이것들을 인자라고 하는데 작업자가 명령어에 주는 정보이다. 인자가 하나 이상 있을 때는 각각을 쉼표로 분리시킨다. 프롬프트 명령의 두 개의 인자들은 디스플레이될 메시지와 텍스트 난에 나타날 첫번째 (초기) 텍스트를 지정한다.
프롬프트 대화상자 나타내기
document.write(prompt("message","")
prompt( ) 이것은 괄호 앞의 프롬프트 명령을 지정한다. 괄호를 사용하여 인자를 담고 있다.
"message" 대화 상자에 나타낼 첫번째 인자인 메시지를 지정한다.
," " 쉼표를 써넣고 나서 두번째 인자인 텍스트 난에 넣을 초기 텍스트를 써넣는다. 두 개의 인용 부호("")를 써넣어 자바 스크립트로 하여금 그 난을 빈칸으로 두게 한다.
document.write( ) prompt()가 유저가 입력한 텍스트로 바뀌기 때문에 아래 코드 실행 결과에서처럼 document.write()와 함께 이것을 페이지에 나타내 놓을 수 있다.
■ 코드 실행 결과
9. 변수들
프롬프트 명령에서의 메시지처럼 자바스크립트에서 사용하는 정보들을 값(value)이라고 한다. 메시지 주위에 인용 부호를 사용하여, 스크립트에 직접 써 넣는 텍스트 리터럴(literal)이라고 하는 값을 사용하고 있다는 것을 알려 준다. 하지만 이런 기법은 이런 정보로 할 수 있는 것에 많은 제한을 둔다. 스크립트 내에 이것을 사용하려면 이 값을 다시 써 넣을 필요가 있을 뿐 아니라, 각각의 메시지는 다른 것들과 독립적이 된다. 스크립트가 한 메시지에 작업을 실행시켜도, 다른 메시지들은 변화가 없다. 변수 (valuable)를 사용하여 값을 담을 수 있도록 함으로써 이 문제를 해결할 수 있다. 변수에 작업을 실행하면 그 변수가 사용된 곳은 모두 값이 바뀌게 된다. 변수들은 스크립트의 부분들이 다른 것과 상호 반응하도록 해준다.
아래의 코드에서처럼 var라는 키워드를 사용하여 변수를 정의한다. 일단 정의하고 나면, 그것에 부여한 이름으로 변수를 참조할 수 있다. 다음 규칙에 의해 변수의 이름을 선정해야 한다.
9.1. 변수 이름 선정하기
변수들
간격은 전혀 사용하지 않는다. 대신에, 밑줄 문자(_)를 사용하거나, 위의 코드에서처럼 첫번째 다음에 나오는 각 단어의 첫번째 글자를 대문자로 쓴다. 자바 스크립트는 문자형에 민감하다. HTML을 써 본 사람이라면 이것에 잘 익숙해지지 못할 것이다. 이름 붙이기 과정을 표준화하여 변수의 이름에 대문자를 집어넣는 것에 너무 신경쓰지 않도록 해 두는 것이 좋다. 독특하고 묘사적인 것으로 한다. 이렇게 하면 작업자 자신이나 스크립트를 확인하는 유저 모두가 기억하기 쉬워진다. 또한 자바 스크립트에 이미 들어 있는 단어들과도 달라야 한다.
10. 오브젝트에 대하여
10.1. 오브젝트 지향
많은 프로그래밍 언어들 중에서 자바와 자바 스크립트는 정보를 조작하는 데 오브젝트를 이용한다. 프로그래머들은 이런 언어들을 오브젝트 지향(Object Oriented)이라고 부른다.
브랜드나 모델과 같은 질은 특성(property)라고 한다. 애플리케이션을 작동시키는 것과 같은 수행 작업은 방식(method)이라고 부른다.
예를 들어, 페이지에 HTML을 쓰려면, document.write()를 사용한다('자바스크립트에서 HTML 쓰기' 참조). 이 코드에서 write()는 도큐멘트라고 부르는 오브젝트에 속해 있는 방식이다. 오브젝트의 특성이나 방식을 나타내는 데 마침표를 사용한다. 이런 시스템을 도트구문 이라고 한다. 오브젝트 지향은 이런 명령 시스템을 사용하지 않는 작업 과정 언어들에 많은 이점을 가지고 있다. 오브젝트는 관련 정보와 명령어들을 논리적인 그룹들에 위치시켜서 더 다루기 쉽게 해준다. 오브젝트는 관련 정보와 명령어들을 논리적인 그룹들에 위치시켜서 더 다루기 쉽게 해준다. 예를 들면 document는 웹 도큐멘트에 들어 있는 링크나 이미지로부터 그 배경색에 이르기까지 웹 도큐멘트의 부분들을 포함한다.
10.2. 오브젝트의 계층 구조
완전한 오브젝트 지향적인 프로그래밍 언어에서 자기 자신의 오브젝트들을 만들어야 한다. 자바 스크립트는 필요한 모든 툴만을 포함하고 있을 뿐이다. 일반적으로 이런 오브젝트들은 HTML 도큐멘트에서의 태그에 해당 된다.
자바 스크립트는 오브젝트의 계층 구조를 이용하여 페이지의 부분들로 접근하고 조직한다. 다른 모든 것을 담고 있는 오브젝트인 브라우저 윈도우가 맨 위에 위치한다. 이 오브젝트는 자신의 특성들과 방식들을 갖고 있다. 윈도우 내에 자리잡고 있는 모든 서브 오브젝트를 특성으로서 다룰 수 있다.
특성이나 방식과 같은 서브 오브젝트들은 도트 구문을 통해서 부모 오브젝트들과 연계되어 있다. 이런 서브 오브젝트들도 자신의 특성, 방식, 그리고 서브 오브젝트를 가질 수 있다.
자바 스크립트를 마스트하고 페이지의 부분들을 작성하려면, 그 계층 구조를 배워야 한다.
현재의 날짜나 산술적인 상수처럼 페이지에는 아무 작용도 하지 않는 정보를 다루어야 할 때도 있다. 자바스크립트는 계층 구조의 일부가 아닌 내장되어 있는 오브젝트들을 통해서 이런 일을 해준다. 계층 구조에 있는 것과는 달리, 내장되어 있는 오브젝트들은 윈도우의 서브 오브젝트로서 나타낼 수 없다.
최상위 단계 자바 스크립트의 계층 구조에서 최상위 단계는 브라우저 윈도우이다. 이것은 Window로 나타낸다. 각 윈도우는 현재의 주소를 위치와 히스토리 상에서의 이전의 URL에 담고 있다.
유저가 보고 있는 페이지는 윈도우 내에 있다. HTML로 정의한 모든 것을 포함하여 이 페이지의 내용들은 세번째 서브 오브젝트인 도큐멘트를 구성한다. 도큐멘트에는 모든 닻, 링크, 이미지, 그리고 페이지 상의 양식들이 들어 있다.
하위 단계 도큐멘트의 각 서브오브젝트를 여러 개의 요소들로 더 세분화 할 수 있다. 예를 들면 forms[]는 여러 개의 요소들을 담고 있고, 그 각각은 자신의 특성을 지니고 있다.
네번째 단계의 네 개의 오브젝트들은 모두 배열이라고 하는 것으로 정보를 담고 있다. 자바 스크립트는 배열을 사용하여 페이지에 비슷한 부분들을 번호순으로 조직한다.
예를 들어, 이미지 오브젝트는 그 페이지의 모든 이미지들을 담고 있다. 특정 이미지로 접근하려면 images[]를 써넣고 그 괄호 안에 번호를 써 넣어야 한다.
자바 스크립트는 HTML에 나타나는 HTML 순서로 이미지들과 모든 배열 입력 내용들을 담고 있다. 이 순서는 항상 0으로 시작된다. 페이지 상의 맨 처음 이미지는 document.images[0]이라는 코드로 나타내고, 두번째 것은 document.images[1]로 나타내는 식이다.
어떠한 프로그래밍 언어를 배우든지 가장 첫 번째로 배우는 것은 결과를 어떻게 출력하느냐 하는 것이다. 밑의 코드는 자바 스크립트로 작성된 모범적인 "자바 스크립트를 배웁시다" 라는 프로그램을 나타내고 있다.
자바 스크립트를 배웁시다.
자바 스크립트를 배웁시다.
위의 코드에서는 document.write("
자바 스크립트를 배웁시다.") 명령이 HTML 문서로의 출력 작업을 수행한다. 이 명령은 현재의 문서에 문자열을 출력할 것을 명령하고 있다. 이 문자열에서는 HTML 명령 또는 추가로 문자 포맷 명령이 포함될 수 있다. 예를 들어, document.write("
자바 스크립트를 배웁시다")라는 명령을 사용하여 그 문자열의 일부를 볼드체로 나타낼 수도 있다. 밑의 그림에서 HTML의 "자바스크립트" 메시지 전에 나오는 자바 스크립트의 "자바스크립트" 메시지를 주의하여 보면 이것은 자바 스크립트 코드를 문서의 앞부분, 그러니까 HTML 메시지의 본문 앞에 위치시켰기 때문이다. 만약 HTML 문서의 앞부분에, 그리고 자바 스크립트 본문의 앞부분에 위치되었다면 그 순서가 뒤바뀌었을 것이다.
2. HTML에 스크립트 삽입하기
원하는 페이지의 HTML 도큐먼트에 스크립트를 직접 집어넣고 싶을 때가 많다. 그러려면, 스크립트의 시작과 끝을 나타내는 스크립트 태그와 스크립트 끝맺음 태그를 사용한다.
페이지의 제목 부분과 본문 부분에 스크립트를 배치시킬 수 있다. 자바 스크립트를 보다 능숙하게 사용하게 되면, 스크립트를 제목에 집어넣어 그것이 맨 처음으로 로드되게 해 놓을 수 있다.
HTML에 스크립트 삽입하기
자바스크립트 삽입
자바스크립트 삽입...
스크립트 끝맺음 태그로 자바스크립트 코드가 끝났음을 나타낸다.
3. 별개의 파일에서의 스크립트
넷스케이프 3.0이상의 버전은 자신의 스크립트를 별개의 도큐먼트에 보관할 수 있다. 웹 페이지에 똑같은 스크립트를 사용하거나 유저들이 이 코드를 읽지 못하게 하고 싶을 때 이것을 사용한다.
브라우저가 자신의 스크립트를 알게 하려면, 그 파일이 있는 장소를 알려 주어야 한다. 이것은 스크립트 태그에 있는 소스 속성으로 가능하다. 별개의 소스 파일들을 사용하면 유저들이 읽지 못하도록 주석을 달 필요가 없다. 외부 소스 도큐먼트를 사용하기 전에, 자신의 서버 관리자로 하여금 MIME 유형의 application/x-javascript에 .js를 붙여 놓도록 해야 한다.
주소
의미
http://www.mysite.com/script.js
일반적인 주소
script.js 또는 ./script.js
HTML 파일과 같은 디렉토리
../script.js
HTML 파일보다 한 단계 위 디렉토리
.../script.js
HTML 파일보다 두 단계 위 디렉토리
/script.js
도메인의 최상위 디렉토리
별개의 파일에 스크립트 위치시키기
별개의 파일에서의 스크립트
별개의 파일에서의 스크립트
스크립트의 끝을 알리는 스크립트 끝맺음 태그이다. HTML 도큐먼트에 스크립트를 집어넣지 않아도 이것은 꼭 써넣어야 한다.
4. 자바스크립트가 아닌 내용
자바 스크립트를 해석할 수 없는 브라우저들이 자신의 스크립트를 읽지 못하게 가려 놓은 것 외에, 사용자에게 더 좋은 브라우저를 사용하라는 메시지를 나타내고 싶을 때가 있다. 이것은 noscript 태그로 가능하다.
넷스케이프 3.0은 noscript의 시작과 끝맺음 태그 사이에 있는 모든 것을 무시한다. 이 두 태그 내에 다른 대체 내용을 집어넣을 수 있다.
이 noscript 태그는 넷스케이프 3.0에 새로 등장한 것이다. 만약 유저가 네트웍 설정에서 자바스크립트를 불능으로 해 놓아도 텍스트가 디스플레이된다.
자바 스크립트를 해석하지 못하는 브라우저를 위한 메시지 담기
자바스크립트가 아닌 내용
메시지 뒤에 끝맺음 noscript 태그를 삽입한다. 이렇게 하면 브라우저가 계속해서 그 도큐먼트를 읽게된다.
5. 자바스크립트에서 HTML 쓰기
자바 스크립트를 사용하여 도큐먼트에 HTML을 쓸 수 있다. 이것을 하려면, 현재의 도큐먼트에 괄호 안의 텍스트와 HTML을 더해 주는 기본 명령인 document.write()를 사용한다.
자바 스크립트에 대해 더 배우게 되면, document.write()를 이용하여 HTML 도큐먼트를 유저의 상호 반응에 따라 개별화시킬 수 있다는 것을 알게 될 것이다.
스크립트로부터 텍스트와 HTML 쓰기
자바스크립트에서 HTML 쓰기
document.write(" 강좌!)
document.write 사용하고 있는 명령어를 지정한다. 이 경우 document.write를 써넣어 HTML 도큐먼트로 출력하게 한다.
( ) 명령어 뒤에 괄호를 넣는다. 자바 스크립트 명령어를 사용할 때는 항상 이것을 집어넣는다.
" 강좌! 괄호 안에 원하는 HTML을 써넣는다. 이것을 인용부호로 감싸서 자바스크립트 코드와 구분지어 놓는다.
'+3' 인용 부호가 있는 HTML 태그를 써넣을 경우에는, 이중 인용 부호 위치에 단일인용 부호를 사용하여 자바스크립트가 그 두개를 혼동하지 않도록 해 놓는다.
6. 미리 포맷된 텍스트 쓰기
HTML은 태그로 지정되지 않은 모든 포맷을 무시해 버린다. 자신이 써넣은 대로 똑같이 텍스트를 디스플레이하려면, 미리 포맷된 텍스트 블록이나 대화 상자를 사용해야 한다. 스크립트가 미리 포맷된 텍스트 블록 안에 텍스트를 내 놓으면, 특별한 자바 스크립트 기능들을 이용하여 포맷을 지정할 수 있다. 텍스트를 새로운 행으로 분리시키고 싶을 때는, document.writeln()으로나 새로운 행용의 특별한 문자를 포함시키는 것으로 할 수 있다.
문자
의미
f
양식
새로운 행
신규행 리턴
탭
자바 스크립트는 탭이나 양식과 같이 여러 가지 유형의 포맷을 만들어 내는 특수한 문자를 인식한다. 이 특수 문자에 대해서는 위의 표를 참조하시기 바란다.
미리 포맷된 텍스트 쓰기
자바스크립트에서 미리 포맷된 텍스트 쓰기
document.writeln("
안녕하세요
")
document.writeln(" ") document.writeln()을 사용하여 새로운 행에 집어넣을 내용을 삽입한다. 이 명령은 행분리를 일으키는 것만 제외하고는 document.write()와 동일하다.
미리 포맷된 텍스트 블록의 시작을 나타내는 미리 포맷 태그를 써넣는다.
원하는 포맷을 나타내는 특수 문자를 지정한다. 탭 문자로는 텍스트를 들여 쓰고, 리턴 문자로는 새로운 행을 만든다.
미리 포맷된 텍스트 블록의 끝을 알리는 미리 포맷 끝맺음 태그를 써넣는다.
7. 스크립트에 주석 삽입하기
HTML과 자바 스크립트 같은 언어들은 도큐먼트 내의 모든 단어들을 평가하기 때문에, 무시하고 싶은 텍스트를 나타내는 데 특수한 심볼을 사용해야 한다. 이렇게 무시된 텍스트를 주석 (comment)이라고 하는데, 이것은 자신이나 독자로 하여금 그 코드를 이해하는 데 도움이 될 정보를 집어 넣을 수 있게 해준다. 스크립트 기능에는 별 필요가 없는 것이지만, 스크립트를 쉽게 읽고 편집할 수 있게 해준다.
밑의 코드는 주석에 대해 보여주고 있다. 스크립트가 작동하는 방법을 꼭 이해할 필요는 없지만, 주석이 사용되는 방법은 꼭 검사해 보는 것이 좋다.
자바 스크립트에는 단일 행과 복수 행의 두 가지 유형의 주석이 있다. 단일 행 주석은 브라우저로 하여금 그 뒤에 나오는 모든 것을 무시하게끔 한다. 복수행 주석은 무시될 코드 블록을 표시해 준다. 스크립트에 주석 삽입하기
미리 포맷된 텍스트 쓰기
/*comment*/
/* 한 행 이상에 걸쳐 있는 주석을 만들려면, 시작 부분에 주석 시작 표시를 한다. 이 것은 주석 끝까지 나오는 모든 것을 브라우저가 무시하게 만든다. 또는// 브라우저가 행의 나머지 부분을 무시해 버리게 만들려면, 이중 슬래쉬로 단일 행 주석을 나타낸다. 이렇게 하면 브라우저가 다음 행으로 건너뛰게 된다.
comment 원하는 정보를 써넣는다. 위의 코드에서처럼 스크립트의 어느 부분이 실행되는지에 대한 간략한 설명을 써넣어야 한다.
자바 스크립트는 다양한 산술 표현식 및 데이터 처리 표현식들을 제공한다. 이러한 표현식들은 C로 프로그램을 짜본 사람들에게는 익숙할 것이다. 그 산술 표현식들은 다음과 같다.
산술 표현식
+ (더하기)
- (빼기)
* (곱하기)
/ (나누기)
% (나머지)
++ (증가)
-- (감소)
= (할당 표현식)
bit-wise 표현식
& (bit-wise AND)
| (bit-wise inclusive OR)
^ (bit-wise exclusive OR)
>> (오른쪽으로 자리 이동)
<< (왼쪽으로 자리 이동)
논리 표현식
&& (논리 AND)
|| (논리 OR)
! (논리 NOT)
위 자바 스크립트 표현식들은 HTML 문서의 데이터들을 처리할 수 있는 막강한 기능을 제공한다. 이러한 표현식들을 사용하여 복잡한 수적, 논리적 표현들을 나타낼 수 있다. 여러분의 자바 스크립트 코드에서 이러한 표현식들을 사용하여 사용자들의 데이터를 처리할 수 있을 뿐만 아니라 사용자들의 입력에 기초해서 어떤 작업을 수행할 것인가도 결정할 수 있다.
2. 선언문과 지정문
우리들이 태어남과 동시에 이름을 갖게 되듯이, 변수도 그것이 선언된 즉시로 그 이름을 갖게 된다. 만약 미국 시민이라면 태어나고 얼마 후 여러분은 사회보장번호를 갖게 된다. 변수들의 초기값은 물론 그 변수가 생성되고, 또는 선언된 후 얼마 있다가 지정된다. 자바 스크립트에서 여러분은 보통 var 문장과 할당(=) 문장을 사용하여 변수를 선언하게 된다.
2.1. var 문장 자바 스크립트에서 var 문장은 변수를 선언할 때 사용된다. 이것은 int, float, double(이 외에도 많음) 같은 뚜렷한 데이터 형식을 사용하는 C, C++, 자바와는 근본적으로 다르다. 자바 스크립트 변수 이름은 문자 또는 밑줄 문자( _ )로 시작될 수 있으며, 그 뒤에 숫자, 문자, 밑줄 문자 등을 포함할 수 있다. 물론 자바 스크립트 예약어들은 적절한 변수 이름이 아니므로 사용하면 안된다. 다음의 코드는 몇 가지의 부적절한 변수 이름과 적절한 변수 이름을 보여주고 있다.
var 2p1; // 부적절한 변수 이름이다. 숫자 2를 처음에 쓸 수 없다. var with; // 부적절한 변수 이름이다. 자바 스크립트 예약어를 사용할 수 없다. var p21; // 적절한 변수 이름이다. var number_of_widgets; // 적절한 변수 이름이다.
이러한 규칙들 외에 자바 스크립트의 변수 이름은 대소문자를 구별하므로 var Apple와 var apple은 서로 다른 것이다.
일반적으로 변수를 선언할 때 그것에 0 또는 빈 문자열을 할당함으로써 그것을 초기화하는 작업도 같이 해야 한다. 그렇게 변수들을 명확히 초기화하지 않으면 그 변수에는 null 값이 배정된다. 그래서 나중에 여러분이 먼저 그 변수에 아무런 값도 지정하지도 않고서, 그 변수를 숫자로서 참조하려고 하면 인터프리터는 에러를 발생시킨다. 다음의 코드는 이러한 예를 보여주고 있다.
var totalUser; // 변수를 선언하고 그 변수를 0으로 초기화한다. var newUser; // 변수만 선언한다. totalUsers=totalUsers+nesUsers; // 에러가 발생한다.
newUsers가 숫자가 아니고, 그것이 먼저 숫자가 초기화되지 않았기 때문에 자바 스크립트는 위의 마지막 줄에서 에러를 발생시킨다.
편의상 자바 스크립트는 다음과 같이 여러분이 하나의 문장에서 콤마로 분리하여 여러 개의 변수들을 선언할 수 있도록 해준다.
var rate=0, distance=100;
물론, 초기화할 때는 여러 가지의 형식을 사용할 수 있다. 다음의 예는 먼저 선언된 변수를 어떤 문자에 곱합니다. 그것은 문법적으로 완전한 자바 스크립트 문장이다.
var rate=0 var newRate=rate*1.1;
하나의 변수를 선언하면서 다른 변수의 값을 사용하여 그 변수를 초기화할 수 있는 이러한 기능은 매우 유용하다. 그러나 변수들을 사용할 때 이미 선언된 변수들을 사용한다는 것에 주의해야 한다. 이 경우에서는 어떤 변수가 선언되기 전에 그 변수를 사용하면 안된다. 만약 위의 문장이 서로 뒤바뀌면 에러가 발생하게 된다.
2.2. 옵션으로서의 var 변수를 선언하고 초기화하는 데 var를 사용해도 되고, 안해도 된다. 그러나 여러분이 이 변수를 선언하고 초기화하고자 한다는 사실을 명확하게 나타내는 데 var를 사용한다는 것은 바람직한 일이다.
만약 여러분이 var를 사용하지 않았을 때 그 변수가 존재하지 않는 것이라면 그 변수는 묵시적으로 또는 자동적으로 선언될 것이다. 만약 그 변수가 이미 선언되어 있는 것이라면 그 변수에는 단지 새로운 값이 할당될 것이다. 만약 여러분이 함수를 사용하기 시작한다면 여러분은 로컬 변수를 선언하는 데 var를 사용하여야 똑같은 이름의 글로벌(global) 변수의 값이 부주의로 바뀌는 것을 막을 수 있다. 여기에 있는 코드는 변수를 선언하고 초기화하는 두 가지의 방법을 보여주고 있다.
첫 번째 줄은 var를 사용하여 변수를 선언하고 정의하려 한다는 사실을 명확하게 밝히고 있다. 두 번째 줄에서는 var를 사용하고 있지 않다.
그러므로 그전의 코드를 살펴보지 않는 한 이것이 새로운 변수를 선언하고 그 것을 초기화하는 것인지, 아니면 기존의 변수 그냥 새로운 값을 할당하는 것인지를 알 수 없다.
var count=0; // 이 방법을 권장한다.
// 아래의 코드도 새로운 변수를 선언하고 초기화하는 일을 수행한다. 그러나 이렇게 하면 여러분의 프로그램을 알아보기 어렵게 된다.
numWidget=0;
3. 자바스크립트의 숫자 표현
대부분의 프로그래밍 언어에서 정수나 실수 같은 특정한 형식의 숫자를 선언할 필요가 있다. 그러나 자바 스크립트에서는 숫자가 정수값을 가질 수도 있고, 실수값을 가질 수도 있다. 그들 사이에 확연한 차이점은 존재하지 않는다. 그러므로 96과 3.14159는 둘 다 "숫자"로 간주된다.
3.1. 정수값의 표현 자바 스크립트는 정수를 10진수, 16진수, 8진수 등으로 표시할 수 있다. 10진수로 표시되는 정수가 디폴트로서, 앞에 문자를 붙일 필요가 없다. 16진수는 Ox 또는 OX 문자로 시작되며, 0에서 9까지의 숫자와 f 또는 A에서 F까지의 문자들을 가진다. 8진수는 0으로 시작되며, 0에서 7까지의 숫자만을 가질 수 있다. 다음의 예는 255라는 십진수를 나타내는 각각의 형식을 보여주고 있다.
dec = 255; hex = Oxff; oct = 0377;
3.2. 실수값의 표현 자바 스크립트에서의 실수값은 십진수로 표현된 정수, 소숫점, 십진수로 표현된 다른 정수(소숫점 이하를 나타낸다.), 지수 표현(e 또는 E) 등올 구성된다. 어떤 숫자가 실수라면 그 숫자는 소숫점 또는 지수 표현을 포함하든가, 또는 그 둘을 다 포함하고 있어야 한다. 다음은 실수를 나타내는 몇가지 예이다.
7.1. Font 속성 글자 모양과 크기에 관계된 여러 가지 속성을 지정할 수 있다. 주로 사용되는 속성들에 대한 정리를 다음의 표를 이용하여 해보았다.
속성
속성값
설명
font-family
[[글꼴이름 | 기본글꼴이름]
글꼴을 정하는 속성이다. 두 개 이상의 글꼴 이름을 쓸 때는 쉼표(,)로 구분하고, 글꼴 이름이 두 단어 이상이면 큰따옴표(" ")로 묶는다. 브라우저는 앞에 있는 글꼴을 먼저 찾고 사용자의 시스템에 설치되어 있지 않은 글꼴인 경우에는 기본 글꼴을 보여준다. 제일 마지막에 쓰는 글꼴은 기본 글꼴을 써 주도록 하는 것이 현명할 것이다. 영문 기본 글꼴은 serif, sans-serif, cursive, fantasy, monospace 등 5개를 말한다.
font-style
normal | italic | oblique
글자의 모양이다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. Italic과 oblique는 모두 기울임꼴이다.
font-variant
normal | small-caps
초기값은 normal이다. Small-caps는 크기가 작은 대문자로 나온다.
font-weight
normal | bold | bolder | lighter | 100∼900
글자의 굵기를 조정한다. 초기값은 normal이다. Normal은 400과 같고, bold는 700과 같다. 실제로 어떤 굵기로 화면에 출력되느냐는 글꼴에 따라 다르다. 어떤 글꼴은 normal과 bold로만 표현될 수도 있고, 어떤 글꼴은 8단계로 나타날 수도 있다.
font-size
절대값 | 상대값 | 길이 | 퍼센트
글자의 크기를 정한다. 초기값은 medium이다. 절대값 : xx-small | x-small | small | medium | large | x-large | xx-large 상대값 : larger | smaller 퍼센트 값을 썼을 때는 부모 요소의 글자 크기를 기준으로 한다.
6.1. Width 속성 하나의 요소에 의해 그려지는 box의 폭은 width 속성의 값으로 결정된다.
속성
속성값
설명
width
길이 | 퍼센트 | auto
Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다.
max-width
길이 | 퍼센트
Box의 최대폭을 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 100%이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다.
min-width
길이 | 퍼센트
Box의 최소폭을 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 0이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다.
6.2. Height 속성 하나의 요소에 의해 그려지는 box의 높이는 height 속성의 값으로 결정된다.
속성
속성값
설명
height
길이 | 퍼센트 | auto
Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다.
max-height
길이 | 퍼센트
Box의 최대 높이를 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 100%이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다.
min-height
길이 | 퍼센트
Box의 최소 높이를 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 0이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다.
6.3. Overflow 속성 박스(단락)의 범위를 벗어난 content의 경우에 관한 처리방식을 제어하는 속성이다. 일반적으로 자식 요소(content)는 부모 요소의 box 안에 배열되는 것이 보통이지만, 다음과 같은 경우에는 그 경계를 벗어날 수 있다.
floating 요소이고, 부모 요소 box에 비해 크기가 더 클 때.
absolute positioning이 적용되었을 때.
음수의 margin을 가질 때.
overflow
visible | hidden | scroll | auto Position 속성의 값이 absolute인 요소에 적용되며, 상속되지 않는다. 초기값은 visible이다.
visible
크기에 관계없이 내용을 모두 보여준다.
hidden
해당 요소에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다. Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다.
auto
할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다.
scroll
언제나 스크롤바를 나타낸다.
아래 예를 보면, 주어진 공간의 크기보다 내용이 길지만, 기본값이 visible이 적용되어 내용이 화면에 모두 나타난다.
가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한 다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나 오지만, 너비는 200픽셀을 유지한다.
Overflow 속성의 값을 hidden으로 해 보자.
가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한 다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나 오지만, 너비는 200픽셀을 유지한다.
Overflow 속성의 값을 auto와 scroll로 준 경우이다.
overflow : auto /*필요한 수직 스크롤바만 나온다.*/
overflow : scroll /*수평, 수직 스크롤바가 모두 나온다.*/
6.4. 배경색과 이미지 배경이란, Box model에서 content의 배경이 되는 부분과 padding을 포함한 부분을 말한 다. Border 부분의 색과 모양은 border 속성으로 지정할 수 있다. Margin 부분은 언제나 투명하기 때문에 부모 요소의 배경이 비쳐 보이게 된다. 배경에 관계된 속성은 실제로는 모두 상속되지 않는다. 그러나, background-color 속성 의 기본 초기값이 transparent(투명)이기 때문에 특별히 이 속성을 사용하지 않았을 때는 부모 요소의 배경색이나 무늬가 자식 요소에도 똑같이 나타나 상속된 것처럼 보일 수 있다. 다음의 표를 살펴보면서 하나씩 알아나가도록 하자.
속성
속성값
background-color
색이름 | RGB 값 | transparent
background-image
url | none
background-repeat
repeat | repeat-x | repeat-y | no-repeat
background-attachment
scroll | fexed
background-position
퍼센트값 | 길이, top | center | bottom, left | center | right
background-color : 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 transparent이다. 다음 예제의 결과를 한번 생각해 보자.
FF0000에 해당하는 색
background-image : URL의 값으로 나오는 이미지를 요소의 배경으로 지정할 수 있 다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 none이다. 그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께 지정하는 것이 좋다. 그림이 나오게 되면 배경색 위쪽에 덮이게 된다.
이 곳에는 배경이 나오지 않습니다.
이 곳에는 배경이 나와야겠지요.
익스플로러 4.0 이상에서는 잘 나올 겁니다.. 배경그림이 어떠한 방식으로 페이지를 채우는가요?
여기에는 배경이 나오지 않겠지요.
예제에서 볼 수 있듯이, 배경으로 쓰이는 그림은 그림이 나타나야 하는 영역보다 크기가 작을 경우에, 바둑판식으로 영역을 꽉 채우게 된다.
background-repeat : 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 repeat이다. 배경으로 사용하는 그림은 기본적으로 바둑판식, 즉, X, Y 방향 모두 연속되게 출력된다. Background-repeat 속성을 사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다.
repeat : 가로, 세로 모두 연속된다.
repeat-x : 가로 방향으로만 연속된다.
repeat-y : 세로 방향으로만 연속된다.
no-repeat : 그림 한 개만 나온다.
본문 전체가 물고기배경으로 덮이겠지요. 세로 방향으로만 연속될 겁니다.
위의 예를 보면, 배경 그림을 한 방향으로만 연속시키거나 연속시키지 않을 때(none으로 줄 때)는 시작 위치가 브라우저의 왼쪽 위라는 것을 알 수 있다.
background-attachment : 배경 그림으로 사용한 그림의 위치가, 적용된 요소와 함께 움직이는지, 브라우저의 화면에 고정되는지를 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 scroll이다. 다음에 나오는 background-position과 함께 보자.
background-position : 배경 그림이 들어갔을 때, 그 시작점을 어디로 할 것인지를 정한다. Block-level 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 0%, 0%이다. 퍼센트 값을 썼을 때, background-attachment의 값이 scroll이면, 이 속성이 사용된 요소의 content box(Box dimensions 참고)를 기준으로 한다(padding, border, margin을 포함한 상자가 아니다). Background-attachment의 값이 fixed이면, 전체 화 면의 크기를 기준으로 한다.
화면의 정 중앙에서 시작해 아래쪽으로만 배경그림이 연속되어야 정상이다.
background : 모든 요소에 적용할 수 있고, 상속되지 않는다. 대표속성에는 초기값이 없다.
File: 파일 저장과 기본적인 옵션을 설정하는 메뉴들이 있습니다. 
background-color : 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 transparent이다. 다음 예제의 결과를 한번 생각해 보자.
최근 댓글 목록