머리말
오타 및 잘못된 부분이 있을 수 있습니다. 이점 참고해주시면 감사하겠습니다.
script 태그
html 문서에서 <script></script> 라는 태그를 사용하여 어디서든 작성할 수 있습니다.
<!DOCTYPE HTML>
<html>
<body>
<p>스크립트 전</p>
<script>
alert('안녕 나는 자바스크립트야!');
</script>
<p>스크립트 후</p>
</body>
</html><script></script> 안에 자바스크립트 코드 넣으면 브라우저가 자동으로 처리합니다.
외부 스크립트
자바스크립트 코드가 많으면 파일을 나눠서 저장할 수 있습니다.
src 속성을 사용하여 html 문서의 head 안에 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="../js/script.js"></script>
</head>
</html>url도 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
</head>
</html>파일을 나눠서 저장 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="../js/script.js"></script>
<script src="../js/main.js"></script>
<script src="../js/snb.js"></script>
</head>
</html>주의
html 문서에서 직접 <script></script> 태그를 사용하는 것은 간단한 자바스크립트 코드일 때만 사용합니다. 만약에 자바스크립트 코드가 길어지면 파일을 만들어서 저장하는 것이 좋습니다.
자바스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운로드하여 캐시에 저장하기 때문에, 성능상의 이점이 있습니다.
자바스크립트 파일로 저장하면 브라우저가 자바스크립트 파일 다운로드해서 캐시에 저장합니다.
여러 페이지에서 똑같은 자바스크립트 코드를 사용하는 경우 브라우저는 페이지가 바뀔 때마다 자바스크립트 파일을 다운로드하지 않고 캐시로부터 자바스크립트 파일을 가지고 와서 사용합니다.
이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라집니다.
html 문서에서 작성할 때 조심해야할 것들
html 문서에서 <script></script> 태그를 사용할 때 src 속성 작성하고 사용하면
실행되지 않습니다.
<!DOCTYPE html>
<html>
<body>
<p>스크립트 전</p>
<script src="../js/script.js">
// src 속성이 사용되었으므로 이 코드는 실행이 안됩니다.
alert('안녕? 자바스크립트야');
</script>
<p>스크립트 후</p>
</body>
</html>따라서 <script src=""> 로 외부 파일을 연결할지 아니면 <script> 태그 내에 코드를 작성할지를 선택해야 합니다.
위의 예시는 스크립트 두 개로 분리하면 정상적으로 실행됩니다.
<!DOCTYPE html>
<html>
<body>
<p>스크립트 전</p>
<script src="../js/script.js"></script>
<script>
alert('오늘 공부 잘 했어!!');
</script>
<p>스크립트 후</p>
</body>
</html>html 작성할 때 2가지 방법
- html 문서에서 작성하고 싶으면
<script></script>태그 안에다가 작성합니다. - 외부 파일로 작성하고 싶으면 html 문서의 head 안에
<script src="../js/script.js"></script>작성합니다.
꼬리말
피드백 환영합니다.
