◆ 자바스크립트 기초
◎ <꼭 알아두어야 할 것 >
------------------------------------------------------------------------------------------------------
▶ 문법에 맞지 않는 글자가 단 한자라도 있거나 구절이 있다면 스크립트 실행 시 에러가 납니다.
▶ <script language="javascript">로 시작하여 </script> 로 닫아줍니다.
이 것은 language="javascript" 명령으로 사용된 스크립트가 자바스크립트임을 알려주는 것으로 <script>태그를 생략하면 자바스크립트는 실행되지 않고 일반텍스트로 간주하여 본문에 스크립트 소스가 그대로 표시됩니다.
-----------------------------------------------------------------------------------------
◎ HTML 문서안에서 자바스크립트의 기본 구조
<HTML>
<HEAD>
<TITLE>자바스크립트 소스의 기본 구조 </TITLE>
<SCRIPT language="JavaScript">
<!--
/* 이 안에는 프로그램을 설명하고 나중에
분석하기 쉽도록 필요한 주석문을 기입합니다.*/
function test() //test() 라는 함수를 정의
{
실행될 함수의 내용 //한줄짜리 주석문
}
//-->
</SCRIPT>
<NOSCRIPT>
자바스크립트를 지원하지 않는 브라우저에 나타날 내용
</NOSCRIPT>
</HEAD>
<BODY>
<!-- 아래와 같이 바디태그 안에 실행부분을 기록하는데 클릭이라 적혀있는 버튼을 클릭 시 헤드 부분에서 정의한 함수 test() 를 실행하는 예 -->
<input type="button" value="클릭" onClick="test();">
</BODY>
</HTML>
● 위 내용에 대한 분석
▶ 생략기호 <!-- -->
는 자바스크립트를 지원하지 않는 브라우저에서 스크립트의 실행을 하지 못하게 합니다.
이 유는 실행오류나 문서의 깨짐을 방지하기 위함입니다. 대부분 웹브라우저에서 자바스크립트를 지원하므로 생략기호를 사용하지 않아도 되지만 핸드폰이나 PDA 등의 브라우저에서는 비교적 간단한 검색만 지원하고 자바스크립트를 지원하지 않으므로 이러한 브라우저를 생각한다면 생략기호로서 실행을 막아야 합니다.
▶ 여러 줄 주석문 : /*주석내용*/ , 한줄 주석문 : //
주석이란 문서 제작자가 소스를 분석하기 쉽게 필요한 곳에 기록해 놓는글로서 프로그램에는 지장을 주지 않고 화면에 나타나지도 않습니다.
html에서의 주석문은 <!-- 주석문 --> 을 사용합니다. 만일 html 태그 안에서 위 자바스크립트 주석문을 사용하면 주석문의 효력이 없고 텍스트 그대로 화면에 나타나게 됩니다.
한줄짜리 주석문 기호 // 에 비해 여러 줄을 기록할 수 있는 주석기호 /* 는 꼭 주석이 끝나는 줄에서 */ 로 닫아주어야 합니다.
▶ <NOSCRIPT>내용</NOSCRIPT>
태그는 자바스크립트를 지원하지 않는 브라우저를 위한 태그입니다.
이 태그로 둘러싸인 문장이나 태그는 자바스크립트를 지원하지 않는 브라우저에서 자바스크립트 프로그램 실행 대신 화면에 나타나게 됩니다.
자바스크립트를 지원하는 브라우저에서는 화면에 나타나지 않고 아무런 작용도 하지 않습니다.
◎<SCRIPT language="JavaScript>
에서 language 속성은 스크립트의 종류와 버전을 웹브라우저에 알려주는 속성인데 대부분 웹브라우저의 기본 스크립트는 자바스크립트이므로, <SCRIPT>태그만 사용해도 됩니다.
하지만 그렇지 않은 브라우저도 있기 때문에 <SCRIPT language="JavaScript"> 로 시작하는 것이 좋습니다.
◆ JavaScript 작성 예제 1 ( test1.htm )
<HEAD>
<TITLE>자바스크립트 예제</TITLE>
<SCRIPT language="JavaScript">
<!--
function test()
{
alert("안녕하세요? 이 창을 경고창, 혹은 글월상자라고도 합니다.")
}
//-->
</SCRIPT>
<NOSCRIPT>
자바스크립트를 지원하지 않는 브라우저에 나타날 내용<br>
<img src="http://218.234.208.9/o.jpg">
</NOSCRIPT>
</HEAD>
<BODY onLoad="test();">
</BODY>
</HTML>
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◆ JavaScript 작성예제 2 ( test2.htm )
<HTML>
<HEAD>
<TITLE> 홍길동의 홈페이지 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<HR>");
document.write("안녕하세요.. 홍길동입니다.");
document.write("<HR>");
</SCRIPT>
</BODY>
</HTML>
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◆ JavaScript 작성예제 3 ( test3.htm )
<HTML>
<HEAD>
<TITLE> 홍길동의 홈페이지 </TITLE>
</HEAD>
<BODY>
<SCRIPT SRC=test3.js>
</SCRIPT>
</BODY>
</HTML>
◇ test3.js
document.write("<HR>");
document.write("안녕하세요.. 홍길동입니다.");
document.write("<HR>");
JavaScript 코드를 HTML 문서와 별도로 작성하는 경우, JavaScript 파일은 확장자 이름을 “.js”로 저장해야 하고, 이문서는 <SCRIPT> 태그를 사용하지 않는다.
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◆ JavaScript 작성예제 4 ( test4.htm )
<HTML>
<HEAD>
<TITLE> 홍길동의 홈페이지 </TITLE>
</HEAD>
<BODY onLoad="document.write('안녕하세요.. 홍길동입니다.');document.write('<HR>');">
</SCRIPT>
</BODY>
</HTML>
JavaScript를 작성하는 또 다른 방법은 HTML 태그 안에 옵션 값으로 작성하는 방법이다. 이는 이벤트에 의해 동작하는 방법으로 다음과 같이 작성한다.
<HTML_태그 이벤트명 = “JavaScript_Code">
※document.write 명령문은 웹브라우저에 지정한 문자열을 출력하라는 명령이다. document객체에서 설명한다.
◆ 변수와 상수의 이해
변수란 단어가 뜻하는 바 그대로 변하는 수라는 것을 의미하고, 상수란 항상 변하지 않는 수라는 것을 의미합니다. 사용자가 프롬프트 입력창에 입력한 데이타를 화면에 출력해주는 간단한 예를 들어 이해를 해 봅니다.
<HTML>
<HEAD>
<TITLE>변수,상수의 이해</TITLE>
<script language="javascript">
<!--
var a=prompt("사랑하는 이의 이름을 입력하세요","");
document.write("당신이 사랑하는 사람은 "+a+" 입니다.")
//-->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
위에서
var a=prompt("사랑하는 이의 이름을 입력하세요",""); 은
프롬프트 입력창을 띄워서 사용자가 입력한 내용을 a 라는 변수에 대입하고,
document.write("당신이 사랑하는 사람은 "+a+" 입니다.") 은
문장과 변수 a의 값을 화면에 출력해 줍니다.
즉, a 는 사용자가 입력한 내용에 따라 수시로 변하게 되므로 변수 가 되는 것입니다.
변수는 위에서 알수 있듯이 var 로 선언을 합니다.
물론 var 는 생략할 수도 있으나 기본적으로 변수를 뜻하는 variable 의 약자인 var 로 선언을 하는 것입니다.
변수의 반대되는 개념은 상수인데, 상수는 항상 변하지 않는 수로서 숫자 1 이나 2와 같은 숫자나 문자가 이에 해당합니다.
숫자 1 은 1로서 2나 3이 될 수 없기 때문에 상수가 되는 것입니다.
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◆ 변수의 선언과 정의
변수는 선언을 함으로서 프로그램에 그 변수가 사용될 것임을 미리 알리고, 선언된 변수에 어떤 값을 대입하는 것을 정의(초기화) 한다고 합니다. 변수를 정의한다는 말을 “대입한다” 또는 “초기화한다”라고도 합니다.
아래는 변수를 선언할 때 알아두어야 할 몇 가지입니다.
1. 변수를 선언할 때 var명령을 사용하는데 var는 생략을 해도 됩니다. 하지만 var가 대문자가 되어서는 안됩니다.
2. 변수 이름은 대, 소문자를 정확히 구별함으로 주의합니다.
3. 변수를 여러개 선언할때는 ,(쉼표) 로 구분하여 선언합니다.
4. 함수 안에 변수를 사용할 때는 따옴표를 사용하지 않습니다.
5. 변수는 선언을 함과 동시에 정의를 할 수 있습니다.
다음은 위의 주의사항을 참고하여 일례로 z 라는 변수를 선언함에 있어서 맞는 예입니다.
z; //var 명령을 생략하였을 경우
var z; //var 명령을 사용하였을 경우
var z,x,y; //쉼표로 z,x,y 라는 세 개의 변수를 동시에 선언할 경우
var z=0; //z 라는 변수를 선언함과 동시에 0 이란 값을 변수 z 에 대입(정의, 초기화)한 경우
var z=0,x=1,y=2; //변수z에는0, 변수x에는1, 변수y에는2 라는 값을 변수 선언과 동시에 대입한 경우
아래는 틀린 예입니다.
varz; //var 명령과 z 변수 이름이 붙어 있으므로 틀린 예입니다. var 와는 한 칸 띄워야 합니다.
VAR z; //var 명령은 소문자로 하여야 하므로 틀린 예입니다.
var zxy; //여러개의 변수를 선언할 경우 쉼표로 구분해야 하므로 틀린 예입니다.
◇ 변수 작성 규칙
㉠ 변수를 사용하기 전에 반드시 변수를 선언해야 합니다.
㉡ variable 의 약자인 var로 변수를 선언을 알리고 ; 기호로 닫습니다.
㉢ 변수이름은 영문 혹은, “_”로 시작해야 합니다.(한글, 특수문자는 변수이름으로 사용불가)
㉣ 함수 이름이나 예약어는 변수의 이름으로 사용할 수 없습니다. (this, var, true, null, if, for...)
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◆ 자바스크립트의 자료형
◇ 정수형 자료
정수형 자료는 숫자 0,1,2 혹은 -3 과 같이 소수점이 붙지 않은 정수형입니다.
자바스크립트에서 정수형 숫자를 표시할 때는 10진수와 16진수 방식을 사용합니다.
우리가 흔히 사용하는 정수형 0,1,2,-3 과 같은 것이 10진수이고,16진수 방식은 숫자 앞에 0x 기호를 붙입니다.
예를 들면 16진수 0x7 은 10진수 7이 되고, 16진수 0x10 은 10진수 16이 된다.
<HTML>
<BODY>
<script>
<!--
var a = 7
var b = 0x7
alert("a 는 " + a + "이고, b는 " + b +"입니다.")
//-->
</script>
</BODY>
</HTML>
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◇ 실수형 자료
실수형은 3.14 와 같이 소수점이 들어간 것입니다.
또, 실수형은 가수부와 지수부로 표현할 수 있기 때문에 정수형 보다 큰 수를 다룰 수가 있습니다.
예를 들어 1억 이란 수를 표현할 때 10진수로 표시하려면 9자리의 자리수가 필요합니다.
하지만 이것을 가수부와 지수부로 표기하면 108 이 됩니다. 즉 가수부 10 과 지수부 8로 나누어서 표기할 수 있습니다. 이것을 다시 지수표기로 표기하면 1.0E8 이 됩니다.
1.0e8 과 같이 소문자로 해도 됩니다.
<HTML><BODY>
<script language="javascript">
<!--
var a=1.0e8;
var b=1.0E8;
var c=1.23e2
var d=3.5e-3;
document.write("1.0e8 의 값은 "+a+" 이고<br>1.0E8 의 값은 "+b+" 이고")
document.write("<br>1.23e2 의 값은 "+c+" 이고,<br>3.5e-3 의 값은 "+d+" 입니다.");
//-->
</script>
</BODY></HTML>
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◇ 문자형 자료
문자형 자료는 가,나,다,A,B,C 와 같은 문자를 표현하기 위한 자료입니다.
숫자도 문자형 자료가 될 수 있지만 이때는 큰따옴표 또는, 작은 따옴표로 묶어 주어야 합니다.
즉, 문자를 표시하기 위해서는 큰따옴표와 작은 따옴표로 묶어주어야 합니다.
<HTML><BODY>
<script language="javascript">
<!--
var a="소스나라";
var b="1+2"//변수 c 의 값은 숫자이지만 따옴표로 묶었기에 문자열이 됩니다.
var c=1+2; //변수 c 의 값은 따옴표로 묶지 않았기에 계산식이 됩니다.
document.write("a 의 값은 "+a+" 입니다.<br>");
document.write("b 의 값은 "+b+" 입니다.<br>");
document.write("c 의 값은 "+c+" 입니다.<br>");
//-->
</script>
</BODY></HTML>
┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
◇ 논리형 자료
논리(boolean)형 자료는 논리를 판단하여 참(true)와 거짓(false)값을 표기해 줍니다.
논리형 자료인 true 와 false 는 문자형 자료가 아니므로 문자형 처럼 따옴표로 묶지 않습니다.
<HTML><BODY>
<script language="javascript">
<!--
var a=1;//변수 a 에 1을 대입
var b=2;//변수 b 에 2를 대입
var c=(a<b);
var d=(a>b);
document.write("c 의 값은 "+c+" 입니다.<br>");
document.write("d 의 값은 "+d+" 입니다.<br>");
//-->
</script>
</BODY>
</HTML>
[출처] 자바스크립트 기초1|작성자 유림
