고정 헤더 영역
상세 컨텐츠
본문
기초 문법
- 대소문자를 구분한다.
- HTML파일 내부에서 사용하거나 외부파일로 빼내어 사용할 수 있다.
//외부 자바스크립트 파일 사용시
<script
language="javascript"
type="text/javascript"
src="filename.js">
</script>
//자바스크립트를 사용할 때
<script language="javascript" type="text/javascript">
<!--
//자바스크립트 내용
//-->
</script>- 외부 자바스크립트를 위한 <script>태그와 내부 자바스크립트를 위한 <script>는 반드시 따로 존재해야한다.
- 외부 자바스크립트르 위한 <script>태그에는 반드시 닫기 태그가 존재해야하며, XML타입의 간략한 형태의 닫기 태그는 사용할 수 없다.
- 내부 자바스크립트를 위한 <script>태그에 주석처리(<!-- //-->)를 하는 이유는 자바스크립트를 지원하지 않는 브라우져를 위한 것이며 생략해도 상관없다.
- src에는 외부 자바스크립트 파일을 지정하면 된다.
- language를 생략시, 기본 값은 javascript이다.
- 자바스크립트의 위치는 보통 <head>태그 사이이며, <body>태그 내부에도 위치한다. 어디에 위치하든 큰 차이는 없다.
- 주석으로는 //, /* */ 등이 있다.
- 자바스크립트를 지원하지 않는 브라우저는 거의 없지만, 만약 자바스크립트를 지원하지 않는 브라우져에서 소스코드가 출력되는 것을 방지하기 위해 <!-- --> 주석안에 자바스크립트를 작성하는 것이 권장된다.
- 자바스크립트를 지원하지 않는 브라우저를 위한 태그로는 <noscript>가 있으며, 이 태그 사이에 자바스크립트를 사용하지 못하는 브라우저에서 출력될 내용을 기술하면 된다. 통상적으로 <script>태그 다음으로 사용한다.
<script language="javascript" type="text/javascript">
<!--
자바스크립트 내용
-->
</script>
<noscript>
<b> 자바스크립트를 지원하지 않습니다.</b>
</noscript> - 자바와 관련은 없으며, 문법은 자바와 비슷하지만 느슨한 문법을 지원한다. 즉, 엄격한 자바의 문법을 흉내낸 형태로 각 기능을 지원한다.
- C++이나 자바로 구현되는 임베디드 환경에서 사용하도록 제작된 언어로서, C++이나 자바로 작성된 일부 객체를 자바스크립트에서 사용할 수 있다.(C++이나 자바에서 해당 객체를 열어둘 경우)
- 브라우저에서 자바스크립트가 해석되고 동작할 때, 순차적으로 인터프리트 되어 동작한다.
- HTML파일이 다운로드가 완료된 후, 브라우저는 HTML, CSS, Javascript등 모든 요소를 순차적으로 읽고 분석한다.
- 이때 브라우저는, HTML각 엘리먼트를 만나면 해당 엘리먼트를 DOM의 각 요소로 구성하게 시킨다.
- Javascript를 만나면 한줄 한줄 프로그램을 해석하고 실행하게 된다.
- 인라인이나 외부 CSS는 해당 엘리먼트를 찾아서 속성에 적용시킨다.
- Javascript의 최초로 읽히고 동작하는 순간은, 브라우저가 해당 HTML파일을 처음 읽고 분석하는 단계에서 시작되지만, 사용자는 자바스크립트가 window.onload의 이벤트 핸들러를 통해서 처음 동작하되도록 작성해야한다. 즉, 자바 같은 기타 컴파일 언어는 Main함수부터 동작을 시작하듯이, window.onload부터 시작하는 것이 바랍직하다. 왜냐하면, window.onload 이벤트 핸들러가 동작하기 전에는 DOM엘리먼트도 제대로 갖춰지기 전이며 브라우져가 페이지 분석도 끝내기 전이기 때문이다. 따라서 window.onload 이전에 자바스크립트가 동작하도록 할 경우, 예상치 못한 동작이 야기될 수 있으며, 프로그램의 규모가 커질경우 유지 보수도 상당히 힘들어진다.
- 자바스크립트는 사용자에게 상당한 자유도를 부여하는 느슨한 문법을 제공하지만, 규칙이나 가이드라인 없이 javascript프로그램을 작성 할 경우 작은 프로그램에서는 상관없지만 규모가 커질 수 록 유지 보수도 힘들어지고, 심한 경우 프로그램을 뒤 엎고 새로 작성해야 하는 경우도 발생한다.
변수
- 지역변수와 전역변수로 나뉜다. 함수 외부의 변수는 전역 변수, 함수 내부의 변수는 지역변수가 된다.
- 변수의 사용을 위해, 변수의 선언이 필요 없으며 해당 변수가 처음 사용되는 순간이 변수가 생성되는 순간이다.
하지만 변수의 선언 순간을 명시적으로 알리기 위해서는 var 키워드를 사용하게 되며, 이미 정의된 변수를 var로 선언할 경우 에러가 발생한다. - 변수의 사용을 위해, 변수의 타입을 지정할 필요없다. 변수의 타입은 자동으로 결정되고 형변환된다.
- 변수의 타입은 typeof 변수로 알 수 있다.
- 변수의 타입으로는 number, string, boolean, object, function, undefined이 존재한다.
- 변수를 생성하면 반드시 초기화 한다. 변수를 초기화 하지 않았을 떄 생기는 대표적인 문제는 다음과 같다.
변수를 초기화 하지 않았을 때는, undefined가 할당된다. 반면에, 변수를 ""로 초기화 할 경우 null(또는 0. 여기서 null과 0, false의 의미는 같다.)을 가지게 된다. undifined라는 값이 할 당되고, 이 값은 문자열과 결합 시에 그대로 undefined가 결합되며, 숫자와 계산이 될때는 NaN(Not a Number)로 계산 결과로 NaN을 가지게된다.//초기화된 변수와 그렇지 않은 변수
var clearedVariable = "";
var unclearedVariable;//변수에 텍스트를 덧붙인다.
result1 = clearedVariable + "*NewText*";
result2 = unclearedVariable + "*NewText*";
result3 = unclearedVariable + 10;//실제 출력이 예상한것과 다르다는 것을 알 수 있을 것이다.
alert("result1 : " + result1 + "\nresult2 : " + result2 + "\nresult3 : " + result3);
배열
- 배열을 사용하기 위해서는 반드시 Array객체 할당을 통해서 사용할 수 있다.
var 변수명 = new Array(매개변수n); - Array 객체의 생성자 매개변수로는 다음과 같다.
- 하나의 정수값을 지정할 경우, 배열의 크기가 된다.
- n개의 데이터를 지정할 경우, 배열의 요소가 된다. 첨자값으로 숫자가 사용되며 첨자는 0부터 시작한다.
- 지정하지 않을 경우, 배열의 크기는 처음 값을 대입하는 순간 결정된다.(즉 배열의 크기는 0으로 시작한다는 말.)
- Array객체의 다양한 속성과 함수를 통해 배열의 조작이 가능하다. 대표되는 몇가지는 다음과 같다.
- length 속성 : 배열요소의 개수를 가지고 있다.
- prototype 속성 : 함수나 속성을 Array객체에 추가할 수 있다. 단 new로 생성된 객체에서는 prototype를 통해 추가할 수 없다.
- pop() 함수 : 배열의 마지막 요소를 삭제하고 배열의 크기를 1줄인다. 삭제된 값을 반환한다.
- sort() 함수 : 매개변수를 생략하면 오름차순으로 정렬되며, 매개변수에 정렬함수를 지정할 수 있는데 다음과 같은 규칙을 따라야한다.
- 정렬 함수는 두개의 매개변수를 받아들여, 두 매개변수를 비교하여 양수, 음수, 0 중에 하나의 값을 반환해야한다.
- 다음은 정렬 함수를 지정하는 예제로서, 반환 값을 조정함으로서 오름차순, 내림 차순 등을 지정할 수 있다.
var myArray = new Array(3,4,5,2,34,5,23,4,1,2,1);
myArray.sort(
function(a,b)
{
if(a > b)
return 1;
else if(a < b)
return -1;
else
return 0;
}
);alert(myArray.toString());
- reverse() 함수 : 배열에 포함된 요소의 값을 뒤집어 버린다.
- 배열의 크기를 늘이는 것은 매우 간단하다. 배열의 첨자를 크게 지정할 때마다 그 만큼 배열이 자동확장되기 때문이다. 하지만 배열의 크기를 줄이기 위해서는 Array객체의 함수를 사용해야한다.
- 배열의 첨자로 정수 뿐만 아니라 문자열 키 값을 지정할 수 있다. 이 경우, 일반 숫자 첨자를 사용한 배열 요소처럼 Array객체의 속성이나 함수로 조작할 수 없다.
위의 경우 문자열 첨자 'test' 항목은, 숫자첨자를 사용하는 항목과 따로 관리된다는 것을 알 수 있다.myArray = new Array(1,2,3,4,5);
myArray["test"] = 30;
myArray = {name:son, age:20} ;
alert(myArray.length); //5 출력
alert(myArray["test"]); //30 출력
alert(myArray.toString()); //1,2,3,4,5 출력
내부적으로 위의 배열이 동작하는 원리를 알면, 왜 위와 같은 결과가 나타나는지 알 수 있다. 위의 배열 객체에서 숫자 첨자를 이용한 데이터는 Array객체 내부적으로 배열 값으로 정상 처리하지만, 문자열 첨자의 경우 객체의 속성값으로 지정해버린다. 따라서, 문자열 첨자로 지정한 데이터는 Array의 각 종 함수와 속성에 영향을 받지 않게 된다.
위의 예에서 볼 수 있듯이, 문자열 키 점자 length로 값을 지정하였더니, 기존의 Array의 length라는 속성의 값으로 할당되는 것으로 알 수 있다. 즉 myArray.length와 myArray["length"]는 같은 표현이며, 같은 데이터를 가리키고 있다.myArray = new Array(1,2,3,4,5);
//length라는 문자열 첨자로 값을 지정할 경우
myArray["length"] = 30;
//Array의 속성 length와 중복된다는 것을 알 수 있다.
alert(myArray.length); //30 출력
alert(myArray["length"]); //30 출력
이와 같은 자바스크립트의 특징은 객체 단계로 넘어가면 더 잘 알 수 있게 되는데, 자바스크립트에서 객체와 리스트와 배열 사이의 경계는 상당히 모호하다. 자바스크립트는 사용자에게는 다른 Java나 C#과 같은 언어의 문법을 제공함으로서 사용자가 객체 지향 프로그래밍을 쉽게 사용할 수 있도록 하고 있지만, 내부적으로 객체는 배열을 이용해서 구성하고 있을 뿐이다. - Array 객체를 사용하지 않고, 사용하는 방법은 다음과 같다.
myList 부분에서 키 3과 같이 키 값에 공백이 들어간다면 더블쿼테이션(")으로 둘러쳐 주면 된다.//배열
myArray = ["값1", "값2", "값3"];
//키와 값을 이용하는 리스트
myList = {키1:"값1", 키2:"값2", "키 3" :"값3"}; - 다차원배열 : 자바스크립트에서 배열은 1차원배열만 지원한다. 따라서, 일차원배열에 다시 배열을 할당함으로서 다차원배열을 구현할 수 있다. 그 값을 참조하기 위해서는 [][][].. 등으로 기존의 다른 언어와 같다.
