웹 브라우저와 자바스크립트
웹 브라우저에서 자바스크립트를 사용하려면 어떻게 해야할까?
웹 문서 안에 <script> 태그로 자바스크립트 작성하기
자바스크립트 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 쉬치에 바로 코드를 작성할 수 있다.
<script> 와 </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";
}
'📁Web Developing > JavaScript 기초' 카테고리의 다른 글
| 객체 (0) | 2022.06.19 |
|---|---|
| DOM을 이용한 이벤트 처리기 (0) | 2022.06.19 |
| 이벤트와 이벤처리기 (0) | 2022.06.19 |
| JavaScript 기초 (0) | 2022.04.03 |
| JavaScript 강좌 (0) | 2022.04.03 |
댓글