English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
JavaScript가 HTML에서의 사용법
이 장에서는 JavaScript를 웹 페이지에 통합하는 방법을 배울 것입니다.
일반적으로 웹 페이지에 JavaScript를 추가할 수 있는 방법이 세 가지 있습니다：<script>HTML에서는 반드시</script>에서 추가할 수 있습니다
끼워넣어 JavaScript 코드를 삽입할 수 있습니다이벤트 속성（사용하여
예를 들어 onclick, onkeypress 등) JavaScript 코드를 직접 HTML 태그 내에 배치할 수 있습니다<script>외부 JavaScript 파일을 만들어 그런 다음
<script> 태그<script>HTML에서는 반드시</script>와
<script> 끼워넣어 JavaScript 코드를 삽입할 수 있습니다. </script>테스트를 보고‹/›
주의：document.write("Hello World");/type 속성을 사용하는古い JavaScript 예제가 있을 수 있습니다：<script type="text5javascript">. HTML 이후로5의 기본 스크립트 언어입니다. 이후로 type 속성이 필요하지 않습니다. JavaScript는 HTML
HTML 문서에脚本을 무제한으로 배치할 수 있습니다.
스크립트는 HTML 페이지의<head>또는 <body> 내에, 스크립트를 언제 로드하고 싶는지에 따라 다릅니다.
이 예제에서, JavaScript 함수는 HTML 페이지의<head>부분에 있습니다。
버튼을 클릭할 때 함수가 호출됩니다：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript in Head</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">This is a Paragraph</p>
</html>테스트를 보고‹/›각<script>태그는 페이지 표시 과정을 막을 수 있으며, JavaScript 코드가 완전히 다운로드 및 실행될 때까지 페이지 표시가 방해받을 수 있습니다. 따라서, 합리적인 이유 없이 이를 문서의 초头来 배치하면 웹 사이트의 성능에 심각한 영향을 미칠 수 있습니다.
이 예제에서, JavaScript 함수는 HTML 페이지의부분에 있습니다。
버튼을 클릭할 때 함수가 호출됩니다：
<!DOCTYPE html>
<html>
<h2>JavaScript in Body</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">This is a Paragraph</p>
<script>
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>테스트를 보고‹/›스크립트는 본문 부분의 마지막에,</body>body> 태그 전에 배치하면 웹 페이지의 로드 속도가 빨라집니다. 왜냐하면 이는 초기 페이지 표시를 방해하지 않기 때문입니다.
JavaScript 코드를 내장으로 배치할 수도 있습니다.이벤트 속성（예를 들어 onclick, onkeypress와 같은) JavaScript 코드를 직접 HTML 태그 안에 넣을 수 있습니다.
<p onclick="this.innerHTML='Hello World';">This is First Paragraph (Click me)</p>테스트를 보고‹/›
그러나, 많은 JavaScript 코드를 인라인으로 피해야 합니다. 왜냐하면 JavaScript는 HTML을 혼란스럽게 하고 JavaScript 코드를 유지보수하기 어렵게 만들기 때문입니다.
JavaScript 코드를 .js 확장자를 가진 별도의 파일에 넣고 그런 다음 사용할 수 있습니다：<script>태그의src속성을 통해 페이지에 로드합니다。
아래의 예제는 외부 JavaScript 파일을 가리킵니다：
<script src="myscript.js"></script>테스트를 보고‹/›
다른 여러 스크립트 파일을 한 페이지에 추가하려면 여러 스크립트 태그를 사용하세요：
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
필요에 따라<head>또는<body>외부 스크립트 참조를 두고 있습니다。
이 스크립트의 행동은 그것이 정확히 위치한 것처럼 보입니다<script>태그가 있는 위치와 같습니다.
주의：외부 스크립트 파일에는 포함할 수 없습니다<script>태그。
스크립트를 외부 파일에 두는 것에는 몇 가지 장점이 있습니다：
그것은 JavaScript와 HTML을 분리합니다
그것은 HTML과 JavaScript를 읽고 유지보수하기 쉽게 합니다
캐시된 JavaScript 파일은 페이지 로드 속도를 빠르게 할 수 있습니다
동일한 스크립트를 여러 문서에서 사용할 수 있습니다
푸시：보통, 외부 JavaScript 파일을 처음 다운로드할 때, 그것은 브라우저의 캐시에 저장됩니다(이미지와 스타일 시트와 같이), 따라서 웹 페이지를 만든 웹 서버에서 여러 번 다운로드할 필요가 없습니다. 더 빠르게 로드됩니다。
전체 URL 또는 현재 웹페이지에 대한 상대 경로를 사용하여 외부 스크립트를 참조할 수 있습니다。
이 예제는 스크립트에 대한 전체 URL을 사용하여 링크합니다：
<script src="https://ko.oldtoolbag.com/run/js/myscript.js"></script>테스트를 보고‹/›
이 예제는 현재 웹사이트에 있는 지정된 폴더에 있는 스크립트를 사용합니다：
<script src="/run/js/myscript.js"></script>테스트를 보고‹/›
“ HTML 파일 경로 ”장에서 파일 경로에 대한更多信息를 알 수 있습니다.