웹브라우저에서의 자바스크립트

📁Web Developing/JavaScript 기초

웹브라우저에서의 자바스크립트

Hush 2022. 6. 17. 11:38

웹 브라우저와 자바스크립트

웹 브라우저에서 자바스크립트를 사용하려면 어떻게 해야할까?

웹 문서 안에 <script> 태그로 자바스크립트 작성하기

자바스크립트 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 쉬치에 바로 코드를 작성할 수 있다.

script 태그는 웹 문서의 어디든 위치할 수 있고, 삽입된 위치 그 자리에서 바로 스크립트가 실행된다.

또한 script 태그는 한 문서에서 여러개 사용할 수도 있다.

되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다.

그래서 </body> 태그 직전에 자바스크립트 소스를 삽입한다.

HTML, CSS와 달리 자바스크립트는 대소문자를 구분하므로 주의하자.

다음은 텍스트를 클릭했을 때 글자섹을 바꾸는 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="heading">자바스크립트</h1>
  <p id="text">위 텍스트를 클릭해 보세요</p>
  <script>
    var heading=document.querySelector('#heading');
    heading.onclick=function(){
      heading.style.color="red";
    }
  </script>
</body>
</html>

사실 이런 방법은 단점이 더 많다. 웹 문서가 복잡해보이고 유지, 보수가 힘들다.

그리고 여러 웹 문서에서 같은 자바스크립트 소스를 사용하는 경우 똑같은 소스를 반복해서 삽입해야 한다.

그래서 자바스크립트 소스를 작성할 때 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 많이 사용한다.

외부 스크립트 파일로 연결해서 자바스크립트 작성햐기

CSS와 마찬가지로 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있다.

이렇게 하면 웹 문서 안에는 자바스크립트 소스가 드러나지 않고 HTML 태그와 CSS 만 유지할 수 있어서 소스가 한결 깔끔하다.

외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성하고 확장자는 *.js 파일로 저장한다.

그리고 HTML 문서에서 <script>태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 된다.

이때 연결한 자바스크립트 파일은 마치 웹 문서에서 직접 작성한 자바스크립트 소스처럼 사용할 수 있다.

이 방법을 이용하면 간단히 JS 파일만 수정해도 연결된 모든 HTML 문서에 바로 적용된다.

기본형은 다음과 같다.

<script src="외부 스크립트 파일 경로"></script>

앞선 예제를 외부 스크립트로 구현해보겠다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1 id="heading">자바스크립트</h1>
  <p id="text">위 텍스트를 클릭해 보세요</p>
  <script src="change-color.js"></script>
</body>
</html>

var heading=document.querySelector('#heading');
heading.onclick=function(){
  heading.style.color="red";
}

저작자표시 (새창열림)