많은 다른 종류의 프로그래밍 언어와 마찬가지로 같이 Javascript도 텍스트 형식으로 작성되며 문장과 상호 관련있는 문장으로 이루어진 블럭 및 주석으로 구성된다.
Javascript 문장 내부에는 변수, 문자열과 숫자등 즉시 실행되는 데이터들과 식들로 구성되어 있다.
Javascript 프로그램은 문장의 집합이고, 문장은 영어를 기준으로 작성되었으며, 하나의 완전한 작업을 수행하는 방식으로 식을 결합한 것이다.
문장은 한 개 이상의 식, 키워드, 연산자(기호) 등으로 구성된다.
한개의 문장은 때에 따라서는 여러줄에 걸쳐 작성할 수도 있지만 일반적으로 한 줄씩 나누서 쓰는 것이 보통이다.
한줄에 여러 문장이 나올 수 있고, 이 때에는 문장간의 구분을 위하여 반드시 세미 콜론(;)으로 구분하여야 한다.
새줄에 새 문장으로 시작하는 것이 일반적이고, 줄바꿈은 자동적으로 한 문장이 종결되었음을 알려주지만, 한 문장을 종결하고 세미 콜론(;)으로 명시적으로 문장이 끝났음을 표시하는 습관을 갖는 것이 좋다.
세 문장으로 구성된 Javascript 코드
<SCRIPT> var radius=100; // 반경 변수 radius를 선언하고 초기값 100을 할당한다. var area=radius*2*Math.PI; // 반경 변수을 이용하여 원의 넓이를 계산하여 면적 변수 area에 할당한다. document.write('area=',area); // 설명하는 문자열과 함께 산출된 면적 변수 area 값을 출력한다. <SCRIPT>한줄에 세 문장을 다음과 같이 기술하여도 결과는 같다.
<SCRIPT> var radius=100;var area=radius*2*Math.PI;document.write('area=',area); <SCRIPT>
문장들을 참조하라.
중괄호({ ... })로 둘러 싸인 여러 줄들의 코드 묶음을 문장 블럭이라고 한다.
블럭 문장은 일반적으로 단일한 문장으로 취급된다. 따라서 단일한 문장을 사용할 수 있는 곳에서는 대부분 블럭을 사용할 수 있다.
그러나 for 루프와 while 루프 문장의 헤더는 예외이다. 블럭 내의 원시 문장은 세미콜론으로 종결되지만 블럭 자체는 그렇지 않고 } 자체로 종결되기 때문이다. 그 속에는 여러개의 문장들이 들어 갈 수 있어 블럭을 형성한다.
블럭은 주로 기능함수와 조건문에 사용된다.
C++이나 다른 언어와는 달리 Javascript는 블럭을 새 범위로 취급하지 않아서 기능함수만 새로운 범위를 만들 수 있다.
흰색 바탕 부분이 문장 블럭 부분이다.
예제에서 첫째 문장은 기능함수 정의를 시작하는 문장으로, 이 기능함수는 5개의 문장들로 이루어진 블럭으로 구성되어 있다.
그 다음 4개 문장은 중괄호를 사용하지 않았고, 기능함수 정의의 부분이 아니고 블럭도 아니다.
<SCRIPT> function reportDate(now){ // 기능함수 정의를 시작하는 문장이다.year=now.getFullYear(); // 이 5개의 문장은 하나의 블럭이다. month=now.getMonth()+1; date=now.getDate(); hour=now.getHours(); return str='지금은 '+year+'년 '+month+'월 '+date+'일 '+hour+'시이다';} var str; // 이 4개의 문장은 블럭이 아니다. var now=new Date(); reportDate(now); document.write(str); </SCRIPT>
한 줄로 된 주석은 두 개의 슬래시(//)로 시작하고 그 줄 마지막까지 주석으로 적용된다.
<SCRIPT>
now=new Date(); // 이 부분은 이줄 끝까지 한 줄 주석 부분이다.
<SCRIPT>
여러 줄로 된 주석은 슬래시와 별표(/*)로 시작되고 별표와 슬래시(*/)로 끝난다.
<SCRIPT>
/* 이 붉은색 부분은 여러 줄 주석 부분이다.
주석부분의 코드는 참고로 기술된 것이고, 코드는 실행되지 않는다.
프로그램 내용을 설명하거나, 임시로 수행되지 않게 막거나, 실험을 위해 부분적으로 실행을 중지시키는데 많이 사용된다.
*/
<SCRIPT>
여러 줄 주석은 네스팅 될 수 없다.
여러 줄 주석의 끝을 표시하는 */으로 모든 여러줄 주석이 종료되므로 예상치 않은 오류가 발생될 것이다.
잘못된 여러줄 주석
<SCRIPT> /* 여러줄 주석부분 /* 잘못된 이중 여러줄 주석 부분 그러나 이 부분은 주석으로 작용한다. */ 모든 여러줄 주석이 끝났으므로, 이부분은 코드가 수행되도록 시도하여 오류가 발생된다. */ <SCRIPT>
여러줄 주석 속에 한 줄 주석은 들어갈 수 있다.
모든 주석을 여러개의 한 줄 주석으로 나누어 블럭 형태로 사용하는 것이 좋다. 그러면 나중에 묶음으로 여러 줄 주석을 사용할 수 있다.
<SCRIPT> /* 나중에 여러줄 주석 사용 가능 // 한줄 주석 // 이 한줄 주석은 문제 없다. // 한줄 주석. var now=new Date(); // 현재 일자와 시간을 얻어 변수 now에 할당한다. 나중에 사용 가능 */ </SCRIPT>
상세한 설명은 //... 혹은 /*...*/ 문장을 참고하라.
문장에서 등호(=)는 변수에 값을 할당할 때 사용된다.
이것은 할당(=) 연산자이며 = 연산자의 왼쪽 피연산자는 오른쪽 식을 연산한 결과값을 갖게 된다.
그 결과값을 왼쪽 피연산자에 할당한다고 한다.
할당은 다순한 변수뿐 아니라, 기능함수, 배열변수나 배열변수 요소, 개체나 개체의 속성들도 가능하다.
<SCRIPT> myString='문자열 변수에 할당'; // 문자열을 할당한다. document.write(myString,'<BR>'); // 변수가 가지고 있는 값을 출력한다. myValue=100*2; // 수치를 할당한다. document.write(myValue,'<BR>'); // 변수가 가지고 있는 값을 출력한다. myArray=new Array(); // 배열변수를 할당한다. myArray[3]='배열변수 요소'; // 배열변수의 요소를 할당한다. document.write(myArray[3],'<BR>'); // 변수가 가지고 있는 값을 출력한다. myDate=new Date(); // 일자를 할당한다. document.write(myDate,'<BR>'); // 변수가 가지고 있는 값을 출력한다. myObject=document; // 개체를 할당한다.(이 문서 개체) document.write(myObject+'<BR>'); // 변수가 가지고 있는 값을 출력한다. myProperty=myObject.location; // 개체의 속성을 할당한다.(이 문서의 주소) document.write(myProperty+'<BR>'); // 변수가 가지고 있는 값을 출력한다. </SCRIPT>
Javascript 컴파일러는 예제의 제일 위 문장을
== 연산자는 변수값을 비교하는 연산자로 연산자 왼쪽과 오른쪽 피연산자의 값이 같은가를 검정하는데 사용된다.
틀리기 쉬운 할당(=) 연산자와 같음(==) 연산자 사이에 혼동되지 않게 주의하여야 한다.
<SCRIPT> myVar=1234; // 변수에 수치로 활당한다. myStr='1234'; // 변수에 문자열로 할당한다. document.write('(myVar==myStr)=',myVar==myStr,'<BR>'); // 두 변수를 비교하여 같다. 강제변환을 하기 때문이다. document.write('(myVar=="1,234")=',myVar=='1,234'); // 변수와 문자열을 비교하여 다르다. 문자열은 수치(NaN)가 아니다. </SCRIPT>
상세한 내용은 비교(==) 연산자와 프로그램 흐름 제어를 참고하라.
Javascript 식은 해석기가 숫자, 문자열, 개체 등 값을 계산하여 생성할 수 있는 유효한 형식의 Javascript '문구'이다. 가장 간단한 식을 리터럴이라고 한다.
3.9 // 숫자 리터럴
'Hello!' // 문자열 리터럴
false // 부울 리터럴
null // 리터럴 null 값
[1,2,3] // 배열변수 리터럴
function(argu){return argu*argu;} // 기능함수 리터럴
식에는 리터럴에 추가하여 변수, 기능함수 호출, 연산자(+, -, *, / 등)의 결합 및 다른 식을 포함할 수 있다.
<SCRIPT> var areaString='100*12/33+56'; // 수학 공식 문자열을 할당한다. document.write('areaString=',areaString,'<BR>'); // 결과를 출력한다. var area=eval(areaString); // 기능함수를 호출하여 공식을 계산하고 결과를 수치로 할당한다. document.write('area=',area,'<BR>'); var radius=Math.sqrt(area/2/Math.PI); // 결과 수치(면적)와 같은 원의 반지름을 구하여 변수에 할당한다. document.write('radius=',radius,'<BR>'); var ballvolume=(Math.pow(radius,3)*Math.PI*4/5).toFixed(2); // 결과 반지름으로 구(공)의 부피를 구하여 소수점 2자리로 만들어 변수에 할당한다. document.write('ballvolume=',ballvolume,'<BR><BR>'); var calcArea='area=100*12/33+56='+area; // 공식과 결과값을 문자열로 변수에 할당한다. document.write(calcArea,'<BR>'); var calcRadius='radius=('+area+'/2/π)의 제곱근='+radius; // 공식과 결과값을 문자열로 변수에 할당한다. document.write(calcRadius,'<BR>'); var calcVolume='ballbolume=('+radius+'<SUP>3</SUP>)*<FONT size=+2>π</FONT>;*4/3='+ballvolume+')'; // 공식과 결과값을 문자열로 변수에 할당한다. document.write(calcVolume,'<BR>'); </SCRIPT>
여기서는 식이 이런 방식으로 구성된다는 것만 이해하고 전 과정을 통하여 각종 식에 대한 학습을 할 것이다.