Javascript 기본 01 - Hello

요약

• <script> 태그는 웹 페이지에 자바스크립트 코드를 추가하는 데 사용.
• '유형' 및 '언어' 속성과 같은 여러 속성이 있지만 필수는 아냐.
• 외부 스크립트 파일은 절대 또는 상대 경로 또는 전체 URL이 될 수 있는 'src' 속성을 사용해 HTML과 연결할 수 있어. 브라우저가 파일을 다운로드하고 캐시하여 트래픽을 줄이고 웹 페이지 속도를 높여 더 나은 성능을 위해 긴 스크립트는 별도의 파일로 저장하는 게 좋아. 'src' 속성이 있는 경우 <script> 태그 안의 코드는 무시해.

스크립트 태그 속성

브라우저에서 <script> 태그에 자바스크립트 코드가 들어가고. 이 태그를 만나면 안의 코드를 자동으로 처리해.

모던 마크업 <script> 태그엔 몇 가지 속성(attribute)이 있어

type 속성: <script type=…>

• HTML4에선 스크립트에 type을 명시하는 것이 필수였어 그래서 type="text/javascript" 속성이 붙은 스크립트를 볼 수 있어. 그치만 타입 명시 이제는 안해도 돼!.
• 현재 HTML 표준에선 이 속성의 의미가 바꼈는데 이 속성은 자바스크립트 모듈에 사용할 수 있어. 모듈은 심화 내용이기 때문에 다른 파트에서 다시 설명할거야,

language 속성: <script language=…>

• 이 속성은 현재 사용하고 있는 스크립트 언어를 나타내.
• 지금은 자바스크립트가 기본 언어여서 의미가 없고. 더는 사용할 필요가 없어.

스크립트 전후에 위치한 주석

• 아주 오래된 책과 가이드에서는 다음과 같이 <script> 태그 안에 주석이 존재하는 걸 볼 수 있어.

<script type="text/javascript"><!--
    ...
//--></script>

• 모던 자바스크립트에선 이렇게 안해.
• 태그 옆에 붙은 주석은 <script> 태그를 처리하지 못하는 브라우저가 해당 스크립트를 읽지 못하게 하려고 사용했었는데. 지난 15년간 출시된 브라우저는 <script> 태그를 처리할 수 있으므로, 이런 형태의 주석을 보면 아주 오래된 LEGACY 코드라고 보면돼!.

외부 스크립트 파일 연결

• 자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있어.
• 이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입해.
  <script src="/path/to/script.js"></script>
• 여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로고.
• 현재 페이지에서의 상대 경로를 사용하는 것도 가능해.
• 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하거든.

물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있어.

복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 돼.

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

주의:

• HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용하고, 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋아.
• 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있어.
• 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용해. 스크립트 파일을 한 번만 다운받으면 되거든. 그럼 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라져.

src 속성이 있으면 태그 내부의 코드는 무시된다는 점 기억해.
<script> 태그는 src 속성과 내부 코드를 동시에 갖지 못해!

실행 안되는 코드

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>

요약

• 웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용함
• type 과 language 속성은 필수가 아님
• 외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입함.

참조

https://ko.javascript.info/hello-world