어제
자바스크립트
에 대해 살펴보고 오늘부터 기초를 탄탄하게 하기 위해서 기본 문법부터 차근히 살펴보기로 했다.
아이디어를 모두 표현할 수 있는자바스크립트
를 자유롭게 사용하기 위해 열심히 공부해야겠다.
Javascript
코드를 HTML 파일에 집어넣으려면 <script>
요소를 사용하면 된다.<script type="text/javascript">
Javascript Code
</script>
type
속성은 스크립트의 종류를 나타낸다. 일반적으로 [text/javascript] 이외를 사용하는 일은 없다.<script>
요소를 기술하는 장소<script>
요소를 기술하는 장소는 크게 3개로 분류할 수 있다.<body>
요소의 안 (임의의 위치)
<script>
요소에서의 처리 결과를 웹 페이지에 직접 출력할 때 사용한다.
하지만, 요즘은 콘텐츠와 코드가 혼재하게 되면 코드의 가독성이 떨어지기 때문에 거의 사용하지 않는 것 같다.
<body>
요소의 안 (</body>
직전)일반적으로 브라우저에서는 스크립트의 로딩이나 실행이 끝날 때까지 화면을 갱신을 하지 않는다.
이러한 이유로 로딩이나 실행에 오랜 시간이 걸리는 스크립트인 경우 그만큼 화면 갱신이 지연된다.
이런 문제점을 해결하기 위해 웹 페이지의 말미(</body>
직전)에<script>
태그를 배치한다.
즉, 웹 페이지의 화면 갱신이 끝난 후 스크립트를 로딩/실행할 수 있기 때문에 실제로 사용자에게 보이는 화면 갱신 속도가 개선된다.
</head>
요소의 안웹 페이지 말미에 배치했을 때 오류가 발생할 수 있는데, 그 이유는
Javascript
에서는 함수를 호출하기 위한<script>
요소보다 함수 정의를 위한<script>
요소를 먼저 정의해야 하기 때문이다.
예를 들어,<body>
요소 내에서 호출해야하는 함수는<head>
요소 내에서 미리 정의되어 있어야한다.
또한, 스크립트에서 스타일 시트를 출력해야 하는 상황에서도 마찬가지로 본문의 출력보다 미리 <head>
요소 내에서 <script>
요소를 정의해야 한다.
기본적인 방법은 웹 페이지의 말미에 선언하여 사용하고 예외 상황에서는 </head>
요소의 안에 정의하는 방법을 사용하면 될 것 같다.
Javascript
코드는 별도의 외부 파일로도 정의가 가능하다.<script type="text/javascript" src="path" [charset="encoding "]>
</script>
path: 스크립트 파일의 경로
encoding : 스크립트 파일에서 이용하고 있는 문자 코드
외부 스크립트
와 인라인 스크립트
를 병용하는 경우, 아래와 같은 코드는 사용할 수 없으므로 주의 해야한다.<script type="text/javascript" src="lib.js">
window.alert("text!"); //무시된다
</script>
src
속성을 지정한 경우 <script>
요소 안에 콘텐츠는 무시된다.외부 스크립트
와 인라인 스크립트
를 병용할 경우에는 아래와 같이 <script>
요소를 분리해야 한다.<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
window.alert("text!");
</script>
<script>
요소에 정의하는 것 외에도 Anchor
태그의 href
속성에 'Javascript:~'
의 형식으로 스크립트를 사용할 수 있다.<a href="Javascript:스크립트 코드"> 링크 텍스트 </a>
<a href="Javascript:window.alert("text!");"> 대화상자 표시 </a>
Javascript
의 코드는 일반적으로 하나 이상의 문장(Statement)으로 구성되어 있다.세미콜론
을 생략하는 것도 가능하지만, 개행
이나 인덴트(탭/공백)
를 넣어서 표현할 수 있다.window.
alert
("Text!");
개행
을 추가해 오히려 코드가 거대해지기만 했을 뿐 별다른 의미는 없다.단어(키워드)
나 기호
의 뒤에서만 가능하다.win
dow.alert("text!"); // Window라는 단어의 중간에서 줄을 바꾸었으므로 오류다.
Javascript
의 문장은 대문자
와 소문자
가 엄격하게 구별된다.window.Alert("text!"); // 오류
alert
와 Alert
는 각각 별개의 명령으로 인식된다.세미콜론
으로 문장의 종료를 나타내면 하나의 행에 복수의 문장을 포함하는 것도 가능하다.window.alert("text!"); window.alert("text1!");
주석(Comment)
이란, 코드에 영향을 미치지 않는 메모와 같은 정보를 뜻한다.Javascript
에서는 주석을 3가지 기법으로 표현한다기법 | 개요 |
---|---|
// Comment | 단일행 주석. // 부터 해당 행의 끝까지 주석으로 인식한다. |
/* Comment */ | 복수행 주석. /*~*/ 으로 둘러싸인 블록을 주석으로 인식한다. |
/** Comment */ | 문서화 주석. /**~*/ 으로 둘러싸인 블록을 주석으로 인식한다. |
보면 볼수록 Python
하고 비슷한 것 같다. 생각보다 어렵다기 보다는 체계가 확실히 잘 잡혀있는? 언어라는 생각이 들어서 거부감이 들지 않는다.