본문 바로가기
자바스크립트

자바스크립트 시작하기

by forSilver 2023. 1. 9.
반응형

자바스크립트 시작하기

HTML, CSS와 더불어 웹페이지를 동적으로 보여주기 위해서 사용하는 웹문서 언어입니다. HTML과 CSS는 정적 웹만 구현할 수 있습니다. 자바스크립트가 참여하면서 웹페이지는 동적 웹(Dynamic Web)으로 변모합니다.

문서에 자바스크립트를 적용하고 싶다면 HTML 문서와 자바스크립트 파일을 연결해야 합니다.


내부 스크립트 방법

내부 스크립트는 HTML 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법입니다.

<body>
  <script>
    document.write("내부 스크립트");
  </script>
</body>

내부 스크립트에 의한 표현

자바 스크립트에서 'document.write()' 메서드는 웹 브라우저 화면에 글자를 표시해 주는 자바스크립트 코드입니다. 위의 경우는 HTML 내부에 자바 스크립트 코드를 포함시킨 경우입니다.


외부 스크립트 방법

외부 스크립트는 js 확장자로 된 별도 파일을 연결하여 HTML 문서를 작성하는 방법입니다.

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

외부 스크립트 적용

스크립트 태그 위치는 body 태그의 종료 태그 전에 사용하는 것이 좋습니다. 내부 스크립트도 외부 스크립트도 마찬가지입니다. body 태그 전에 script 태그를 작성하는 이유는 HTML 문서는 첫 줄부터 순차적으로 해석하기 때문입니다. 사용자에게 당장 보여줘야 하는 영역은 HTML과 CSS가 가장 관련도가 큽니다. 만약 head 태그 안에 script 태그를 사용했는데 해석하는데 시간이 걸리면 그만큼 웹페이지 로딩이 느려지고 맙니다.


정리

자바 스크립트도 CSS와 마찬가지로 내부와 외부 사용이 가능합니다. 일반적으로 외부 스크립트 파일을 만들어 사용하는 것이 일반적입니다.