모던 JavaScript 튜토리얼 - Hello World!

crewd·2021년 1월 4일
0
post-thumbnail

모던 자바스크립트 튜토리얼

ko.javascript.info

Hello, world!

1.1 script 태그

<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 어느 곳에나 삽입할 수 있다.

<!DOCTYPE HTML>
<html>

<body>
  <p>스크립트 전<p>
  
  <script>
    alert( 'Hello, world!' );
  </script>
  
  <p>스크립트 후 </p>
</body>

</html>

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

1.2 모던 마크업

<script> 태그에는 몇가지 속성(attribute)이 있다.
요즘에는 잘 사용하진 않지만 오래된 코드에서 종종 이 속성을 발견 할 수 있다.

type속성 : <script type=...>
HTML4에서는 스크립트에 type을 명시하는 것이 필수였으나 타입 명시가 필수가 아니게 되었다.
게다가 모던 HTML 표준에선 이 속성의 의미가 자바 스크립트 모듈에서 사용하는 것으로 바뀌었다.

language 속성: <script language=…>

이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다. 지금은 자바스크립트가 기본 언어이므로 더는 사용할 필요가 없다.

1.3 외부 스크립트

자바스크립트 코드의 양이 많은 경우엔, 파일로 나누어 저장할 수 있다..
분리한 파일은 src 속성을 사용해 HTML에 삽입한다.

<script src="/path/script.js"></script>

여기서 /path/script.js는 사이트의 루트에서부터의 파일이 위치한 절대 경로를 나타낸다.
현재 페이지에서의 상대경로를 사용하는 것도 가능

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

위와 같이 URL전체를 속성으로 사용할 수도 있다.

여러개의 스크립트를 삽입 할 때는 스크립트 태그를 여러개 사용.

<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> 태그를 사용
  • typelanguage 속성은 필수가 아니다.
  • 외부 스크립트 파일은 <script src="/path/script.js"></script> 와 같이 사용.

✔과제


alert창 띄우기

"자바스크립트!" 라는 메시지를 담고 있는 alert 창을 띄워주는 페이지를 만들어보세요.

해답

<!DOCTYPE HTML>
<html>
<body>
  <script>
    alert('자바스크립트!');
  </script>
</body>
</html>

외부 스크립트를 이용해 alert 창 띄우기

중요도: 5

이전 과제 alert 창 띄우기의 해답에 있는 스크립트를 alert.js 라는 외부 파일로 옮겨 보세요.
해당 파일을 문서와 동일한 경로로 옮긴 후, 스크립트가 기존처럼 alert 창을 잘 띄워주는지 확인해보세요.

해답

alert.js

alert('자바스크립트!');

HTML 코드

<!DOCTYPE HTML>
<html>
<body>
  <script src="alert.js"></script>
</body>
</html>
profile
공부

0개의 댓글