자바스크립트(JavaScript) 오산대학 컴퓨터정보과 김 영 권
자바스크립트(JavaScript) 웹 문서를 동적으로 표현 객체를 기반으로 하는 프로그래밍 언어 프로그래밍 컴퓨터로 어떤 일을 처리하기 위해 명령어를 정해진 규칙대로 나열하는 것 HTML만으로는 홈페이지를 다양하게 설계하고 변경하는데 많은 제약(이런 문제점을 보완하기 위해 만들어짐) HTML, CSS로 할 수 없는 일을 가능하게 하고, 동적인 웹 페이지를 만들거나 자료를 검증
스크립트(Script) 일종의 매크로로 프로그래밍 경험이 없는 사람도 손쉽게 프로그램을 자신이 원하는 대로 조작할 수 있게 해줌 정의된 명령어만 사용하기 때문에 편리하지만 복잡한 응용 프로그램을 만들기에는 부적합 자바스크립트, Vbscript, Jscript, ActionScript, …
자바스크립트의 역사 넷스케이프와 선 마이크로시스템즈가 공동으로 개발 초기에는 넷스케이프에서만 동작하고 익스플로러에서는 많은 오류 발생 웹브라우져의 기능에 많은 영향을 받기 때문에 가능하면 최신 버전을 사용
자바스크립트 장점 사용자의 웹 브라우져에서 실행되어 서버의 과부하 줄임 HTML 문서 내에 포함되는 형태이므로 사용하기 편리 배우기 쉽고 속도가 빠름 소스가 많이 공개
자바스크립트의 사용 목적 인터렉티브(interactive)한 웹 페이지를 제작하여 사용자가 컴퓨터와 실시간 대화하듯이 메시지를 주고 받을 수 있음 경제적인 가격의 컴퓨터로 서버를 구축해서 사용 가능 플랫폼 독립적(컴퓨터 기종에 관계없이 사용 가능) HTML로는 표현이 불가능했던 프로그램적인 활용이나 동적인 표현이 가능해 좀더 역동적인 홈페이지 만들 수 있음 서버로 전송될 자료의 검증을 웹 프로그램이 실행되기 전인 클라이언트 단계에서 실행하므로 웹 프로그램을 사용할 때 반드시 필요
자바스크립트의 기본 형식 <SCRIPT LANGUAGE = “JavaScript"> <!-- 자바스크립트 구문 //--> </SCRIPT>
자바와 자바스크립트 자바 자바스크립트 플래폼으로부터 독립적인 완벽한 형태의 객체지향 언어 일반 어플리케이션도 개발 가능 일반 어플리케이션도 개발 가능 서버에서 동작할 수 있는 형태의 프로그램을 제작할 수도 있기 때문에 기능적인 면에서 보면 자바가 자바스크립트보다 한수 위 자바스크립트 사용자 웹 브라우져에서 실행
자바와 자바스크립트 구분 자바 자바스크립트 해석 위치 서버 내의 파서(parser) 클라이언트의 브라우져 언어형 컴파일러 방식 : 서버에서 컴파일되어 클라이언트에서 인터프리터됨 인터프리터 방식 : 서버가 아닌 클라이언트에서 인터프리터 됨 존재 HTML 파일과 별도로 존재 HTML 문서 내에 기술 객체 지향 객체 지향 언어 : class(객체)가 존재하고 생성, 상속 가능 객체 기반 언어 : 객체의 표현과 상속은 가능하나 생성과 상속(내장)이 불가능 바인딩 정적 바인딩 동적 바인딩 인터프리터 : 명령문을 한 번에 한 줄씩 읽어서 실행하는 것
자바와 자바스크립트 소스 확인 불가능 확인 가능 보안성 있음 없음 변수형 변수, 자료형의 정의가 있고 명확하게 구분됨 변수의 형(type)을 미리 정의하지 않아도 됨 속도 빠름 느림 사용 어려움 쉬음 운영체제 부분적인 제한 제한 없음
주의 사항 대소문자 반드시 구분 구문은 한 줄에 한 개씩 위치시킨다(한 줄에 두 개 이상의 구문으 두려면, 구문 사이에 세미콜론(;)으로 구분 객체, 속성, 메소드, 함수의 구분은 마침표(.)연산자를 사용 한 개의 구문을 한 줄에 모두 쓰지 못할 경우에는 밑줄(_)을 이용하여 다음 줄과 연결되었음을 표시 문자열 표시는 따옴표를 사용 작은 따옴표나 큰따옴표를 중첩해서 사용할 때는 반드시 나중에 시작한 따옴표를 먼저 달아야 함 따옴표 자체를 문자열에 포함시켜야 할 경우에는 역슬래시(\)와 따옴표를 함께 사용
주석 달기 한 행을 주석문 처리 두 행 이상에 걸치는 주석문 처리 //주석 처리할 행, 문장 두 행 이상에 걸치는 주석문 처리 /* 주석 처리할 영역 */ HTML 문서 안에서 주석을 삽입할 때는 <!-- -- >를 사용하고, 자바크립트 안에서 주석을 삽입할 때는 // 또는 /* */를 사용
자바스크립트 삽입과 실행 내장형 행 입력형 함수형 링크형
자바스크립트 삽입과 실행(내장형) <HTML> <HEAD> <script language = javascript> ~~ 자바스크립트 소스 ~~ </script> </HEAD> <BODY> </BODY>
자바스크립트 삽입과 실행(행입력형) <태그 이벤트핸들러 = “자바스크립트 소스”> <a href = “#” onclick = “alert(‘환영’)”> 클릭 </a><br><br> <a href = “javascipt” : alert(‘환영’)”> 클릭 </a>
자바스크립트 삽입과 실행(함수형) <HTML> <HEAD> <script language = javascript> function 함수명() { ~~ 자바스크립트 소스 ~~ } </script> </HEAD>
자바스크립트 삽입과 실행(링크형) <script language = javascript src = “js 파일의 전체 경로”></script> 자바스크립트 소스를 확장자 *.js인 외부 파일로 저장하여 불러옴 장점 HTML 문서가 길어지는 것을 방지하고 소스를 간략화시킴 자바스크립트 소스의 노출을 방지하여 보안성을 향상시킴 자바스크립트의 소스를 여러 페이지에 적용할 수 있어 효과적인 작업을 할 수 있고 용량을 줄여줌
(5-1.htm) <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("자바스크립트 테스트") //--> </SCRIPT> </HEAD> <BODY> <CENTER><FONT SIZE="4" COLOR="#003300">화면에 나타난 대화상자는 자바스크립트를 이용한 것입니다.</FONT> </CENTER> </BODY> </HTML>
(5-1.htm) : 실행결과
(5-1.htm) : 실행결과
(5-2.htm) <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT SRC="script.js"></SCRIPT> </HEAD> <BODY> <CENTER><FONT SIZE="4" COLOR="#003300">화면에 나타난 대화상자는 자바스크립트를 이용한 것입니다.</FONT> </CENTER> </BODY> </HTML>
(script.js) <!— alert(“자바스크립트 테스트”) //-->
(5-2.htm) : 실행결과
문서에 출력하는 document.write()
대화상자로 알려주는 alert() alert(출력하고자 하는 내용) 사용예 alert(“홍길동”) 대화상자에 문자열 출력
Document.write 사용(5-3.htm) <HTML> <HEAD> <TITLE> document.write() </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("<HR>") // <HR> 태그 수행 (이 내용은 주석으로 처리되기 때문에 화면에 나타나지 않습니다.) document.write("<CENTER>") // <CENTER> 태그 수행 document.write("자바스크립트를 이용한 화면 출력") // 문자열 출력 document.write("<BR>") // <BR> 태그 수행
Document.write 사용(5-3.htm) document.write("<HR>") // <HR> 태그 수행 document.write("30+40="+(30+40)) /* 문자열과 연산의 결과를 연결해서 출력 즉 문자열 "30+40="과 (30+40)의 연산 결과인 70을 연결해서 출력 */ document.write("<BR>") document.write("\"c:\\windows\\돗자리.bmp\"") // "와 \를 출력하려면 다음과 같이 써줍니다 => \",\\ document.write("</CENTER>") // </CENTER> 태그 수행 //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Document.write 사용(5-3.htm) 실행결과
Alert 사용(5-4.htm) <HTML> <HEAD> <TITLE> alert() </TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("안녕하세요") alert("자주 방문해 주세요. \n 늘 새로운 정보를 제공하겠습니다.") //--> </SCRIPT> <BODY> </BODY> </HTML>
Alert 사용(5-4.htm) : 실행결과
Alert 사용(5-4.htm) : 실행결과
Alert 사용(5-4.htm) : 실행결과
변수 사용(5-5.htm) <HTML> <HEAD> <TITLE> 변수 설정 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var name //변수 선언 name="홍길동" //변수에 값 대입 age=25 //변수 선언 없이 바로 사용하는 경우 document.write("name="+name+"<BR>") //"name="은 문자열을 의미하고, name은 변수의 값을 의미함 document.write("age="+age+"<BR>"+"<HR>")
변수 사용(5-5.htm) age=30 //변수에 새로운 값 대입, 즉 변수의 값을 변경하는 경우 document.write("age의 값 변경 후"+"<BR>") document.write("age="+age+"<BR>"+"<HR>") age="30세" //다른 형태의 자료도 대입이 가능함 document.write("age="+age+"<BR>") //--> </SCRIPT> </BODY> </HTML>
변수 사용(5-5.htm) : 실행결과
연산자(5-7.htm) <HTML> <HEAD> <TITLE> 연산자 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- var su=false document.write(!su+"<BR>") su=1 document.write(~su+"<BR>") su=10 document.write(++su+"<BR>") document.write(--su+"<BR>")
연산자(5-7.htm) var a_1=10,b_1 b_1=++a_1 document.write("a_1="+a_1+", b_1="+b_1+"<BR>") var a_2=10,b_2 b_2=a_2++ document.write("a_2="+a_2+", b_2="+b_2) //--> </SCRIPT> </BODY> </HTML>
연산자(5-7.htm) : 실행결과
If 문(5-12.htm) <HTML> <HEAD> <TITLE> IF문 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- // IF문을 이용해서 입력된 값의 절대값 구하기 su=prompt("숫자를 입력하세요","") abs=su // 대화상자에서 입력한 값(su)을 변수 'abs'에 대입 if(su<0) abs=-su // 입력된 값이 0보다 적을 때, 즉 음수일 때만 실행 alert(su+"의 절대값 : "+abs) //--> </SCRIPT> </BODY> </HTML>
If 문(5-12.htm) : 실행결과
If – else 문(5-14.htm) <HTML> <HEAD> <TITLE> IF~ELSE문 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- // 입력된 값이 짝수인지 홀수인지 판단하기 su=prompt("숫자를 입력하세요","") if(su%2==0) alert("** 짝수 **") // su를 2로 나눈 나머지가 0과 같으면, 즉 짝수이면 실행 else alert("** 홀수 **") //su를 2로 나눈 나머지가 0과 같지 않으면, 즉 홀수이면 실행 //--> </SCRIPT> </BODY> </HTML>
If – else 문(5-14.htm) : 실행결과
for 문(5-18.htm) <HTML> <HEAD> <TITLE> FOR문 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- /* 시작 수와 끝 수를 입력받아서 그 사이에 있는 3의 배수를 출력하고 그 개수와 합 구하기 */ sum=0 // 3의 배수의 합을 누적하기 위한 변수 cnt=0 // 3의 배수의 개수를 구하기 위한 변수 begin=prompt("시작 수를 입력하세요","") // begin에 시작 수를 입력받음 end=prompt("끝 수를 입력하세요","") // end에 끝 수를 입력받음 document.write("<CENTER>") document.write(begin+"부터 "+end+"사이의 3의 배수 구하기") document.write("<HR>")
for 문(5-18.htm) for(i=begin ; i<=end ; i++) // i의 값이 begin에서부터 1씩 증가해서 end보다 작거나 같을 때까지 반복 실행 if(i%3==0) { document.write(i+"<BR>") sum+=i cnt++ } /* i를 3으로 나눈 나머지가 0과 같다면, 즉 i가 3의 배수라면 화면에 출력하고, sum에 누적한 후 개수를 하나 증가시킴 */ document.write("<HR>") document.write("3의 배수의 개수는 "+cnt+"<BR>") document.write("3의 배수의 합은 "+sum) document.write("</CENTER>") //--> </SCRIPT> </BODY> </HTML>
for 문(5-18.htm) : 실행결과
for 문(5-19.htm) <HTML> <HEAD> <TITLE> FOR문 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- dan=prompt("구구단 중에서 몇 단이 궁금한가요?(1~9)","") document.write("<TABLE width='200' align='center'>") document.write("<TR bgcolor='#FFFF99'>") document.write("<TH>"+dan+"단"+"</TH>") for(i=1 ; i<=9 ; i++) { document.write("<TR bgcolor='#FFFFCC'>") document.write("<TD align='center'>"+dan+" * "+i+" = "+dan*i+"</TD>") document.write("</TR>") } document.write("</TABLE>") //--> </SCRIPT> </BODY> </HTML>
for 문(5-19.htm) : 실행결과
다중 for 문(5-22.htm) <HEAD> <TITLE> 다중 FOR문 </TITLE> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("<TABLE align='center' width='800'>") document.write("<TR bgcolor='#CC99FF'>") for(i=2; i<=9; i++) document.write("<TH>"+i+"단"+"</TH>") document.write("</TR>") for(i=1; i<=9; i++) { document.write("<TR bgcolor='#CCCCFF'>") for(j=2; j<=9; j++) document.write("<TD align='center'>"+j+" * "+i+" = "+j*i+"</TD>") } document.write("</TABLE>") //--> </SCRIPT> </BODY> </HTML>
다중 for 문(5-21.htm) : 실행결과
while 문(5-22.htm) <HTML> <HEAD> <TITLE> While문 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- sum=0 i=1 while(i<=100) { sum+=i if(i%10==0) document.write("1부터 "+i+"까지의 합은 "+sum+"<BR>") i++ } //--> </SCRIPT> </BODY> </HTML>
while 문(5-22.htm) : 실행결과
Confirm() 내장함수(5-26.htm) <HTML> <HEAD> <TITLE> confirm() 내장 함수 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- reg=confirm("가입하려면 확인 단추를 누르세요.") if(reg==true) document.write("가입해주셔서 감사합니다.") // '확인' 단추를 클릭했을 때의 명령 else document.write("다음 기회에 다시 뵙겠습니다.") // '취소' 단추를 클릭했을 때의 명령 //--> </SCRIPT> </BODY> </HTML>
Confirm() 내장함수(5-26.htm) 실행결과
Confirm() 내장함수(5-26.htm) 실행결과
eval() 내장함수(5-27.htm) <HTML> <HEAD> <TITLE> eval() 내장 함수 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- su=prompt("수식을 입력하세요","") document.write("12+36"+"<BR>") // 수식을 문자열 형태로 출력 document.write(eval("12+36")+"<HR>") // 수식을 계산하여 출력 document.write(su+"<BR>") // 입력된 수식이 문자열 형태로 출력 document.write(eval(su)) // 입력된 수식을 계산하여 출력 //--> </SCRIPT> </BODY> </HTML>
eval() 내장함수(5-27.htm) 실행결과
eval() 내장함수(5-27.htm) 실행결과