JavaScript 관련 참고


목차

들어가며


지난날 자바스크립트는 많은 비난을 받았다. 믿을 수 없을뿐더러 심지어 위험한 것으로 여겨지기도 했다. 브라우저 안 어딘가에 잠복해 있는 조잡하게 만들어진 팝업 창이나 띄우는 엔진으로 취급되었다.

하지만 시대가 변했다. 의미론적으로 바람직한 마크업과 제대로 된 CSS의 지원을 이끌어낸 웹 표준 덕분에 자바스크립트 구문은 브라우저마다 더욱 일관성을 띠게 되었다. 또한 브라우저 동작에 영향을 미치는 부분에 합리적인 통제가 가능하게 되었다.

그와 동시에 제이쿼리 등과 같이 모범 사례를 기반으로 구축되었으며, 각 브라우저의 특성이나 버그를 정상화시키는 자바스크립트 '도우미' 프레임워크가 등장했다. 그 결과 지금은 개발자가 더 빠르고 품질 좋은 자바스크립트를 작성할 수 있게 되었다.

스크립트 작성

CSS를 다루어본 적이 있다면 스크립트를 페이지에 포함시키는 방법이 스타일시트를 포함시키는 방법과 거의 비슷하다는 사실을 알게 될 것이다. 그러나 약간의 문법적인 차이와 주의할 점은 있다.

웹 문서 안(in-page)에 스크립트 코드를 직접 쓰려면, <style> 태그를 사용해 CSS를 포함시킬 때와 마찬가지로 <script> 태그로 스크립트 코드를 감싸면 된다. 여러 페이지에 걸쳐 동일하게 사용해야 할 스크립트가 있다면, 외부 스타일시트처럼 필요한 곳에서 외부 스크립트를 쉽게 참조할 수 있다. 단, CSS에서의 link와는 다르게 스크립트에서는 <script> 태그의 src 속성을 사용한다.

<aside> 💡 외부 스크립트를 사용할 때 인터넷에서 <script> 태그에 language나 type과 같은 자바스크립트 특정 속성이 함께 쓰인 것을 볼 수 있는데, 이는 모두 HTML5에서는 이미 지원이 중단되었거나 선택사항인 속성들이다. 따라서 웹 표준에서는 그냥 간단하게 <script src="code.js"></script> 로 사용하면 된다.

</aside>

자바스크립트의 경우 스크립트를 페이지이 어느 위치에 넣는지가 중요하다. 너무 단순화한다는 위험을 감수하고 말하면 브라우저는 파일 내용을 처음부터 순서대로 파싱하는데, 스크립트 파일을 HTML 페이지 상단에 포함하면 브라우저는 페이지에 실제 존재하는 요소들을 파악하기도 전에 스크립트를 파싱하고 해석해 실행시킨다.