실행 환경에 독립 적인 코어 자바스크립트(Core JavaScript)
Node.js 같은 서버 사이드 환경에서는 node 파일명.js 명령어를 입력하면 된다
웹 페이지에 스크립트를 삽입하는 방법
script 태그
<script> 태그를 사용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.
<script> alert( 'Hello, world!' ); </script>
<script>
alert( 'Hello, world!' );
</script>
브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다.
모던 마크업
<script> 태그엔 몇 가지 속성(attribute)이 있다.
요즘엔 잘 사용하지 않지만 오래된 코드에서 발견 가능
type 속성: <script type= >
HTML4에선 스크립트에 type을 명시하는 것이 필수였다. ( type='text/javascript' )
이젠 타입 명시가 필수가 아니고 모던 HTML 표준에서 이 속성의 의미가 바뀌었다.
이제 속성은 자바스크립트 모듈에서 사용 가능 ( 모듈은 심화 내용이라 나중에 다시 )
language 속성: <script language= >
현재 사용하고 있는 스크립트 언어
- 지금은 자바스크립트가 기본 언어라서 속성의 의미가 퇴색되었다. ( 사용할 필요 없음 )
스크립트 전후에 위치한 주석
오래된 책과 가이드에서 <script> 태그 안에 주석이 존재하는 걸 볼 수 있다.
<script type='text/javascript'><!--
// --></script>
이 트릭은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했다.
지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로 이런 주석이 보이면 아주 오래된 코드다.
외부 스크립트
자바스크립트 코드 양이 많은 경우 파일로 소분해 저장할 수 있다.
이렇게 나눠놓은 파일은 src 속성을 이용해 HTML에 삽입한다.
<script src='경로/파일명.js'></script>
경로는 루트에서부터 파일이 위치한 절대 경로/혹은 현재 페이지에서의 상대 경로
혹은 URL 전체를 속성으로 사용할 수도 있다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
여러 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됨
<script src='경로/파일명1.js'></script>
<script src='경로/파일명2.js'></script>
*HTML 안에 직접 스크립트를 작성하는 방식은 스크립트가 아주 간단할 때만!
스크립트가 길어지면 분리된 파일로 저장하는 것이 좋다.
스크립트를 별도의 파일에 저장하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상 이점이 있다.
여러 페이지에서 동일한 스크립트 사용 시, 브라우저는 페이지가 바뀔 때마다 새로 스크립트를 다운 받는 것이 아니라
캐시로부터 스크립트를 가져와 사요한다. 한 번만 다운 받으면 된다.
- 트래픽 절약 / 웹 페이지 속도 상승
** src 속성이 있으면 내부의 코드는 무시된다.
<script src='파일명.js'>
alert('hello!') // src 속성이 사용되었으므로 이 코드는 무시된다.
</script>
src로 외부 파일을 연결할지, 태그 내에 코드를 작성할지 선책해야 한다.
요약
- 웹 페이지에서 자바스크립트 코드를 추가하기 위해 <script> 태그 사용
- type과 language는 필수가 아니다(이젠 잘 안씀)
- 외부 스크립트 파일은 src 속성으로 삽입
