The <script> Tag
자바스크립트는 HTML 문서내에서 <script>와 </scrip> 태그 사이에 삽입해 사용할 수 있습니다.
또는 <script> 태그를 사용하여 외부 자바스크립트 파일을 로드하여 사용할 수 있습니다.
<html>
<head>
<title>웹 페이지 제목</title>
<script src="파일경로/파일이름.js"></script>
</head>
<body>
<!-- 웹 페이지 내용 -->
</body>
</html><!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "자바 스크립트로 넣은 텍스트입니다.";
</script>
</body>
</html>JavaScript in Body
자바 스크립트로 넣은 텍스트입니다.
JavaScript Functions and Events
JavaScript에서 함수는 재사용 가능한 코드 블록입니다.
함수를 사용하여 특정 작업을 수행하고 필요할 때 호출할 수 있습니다.
이벤트는 사용자의 동작(예: 버튼 클릭, 마우스 움직임 등)에 응답하여 특정 동작을 수행하는 것을 말합니다.
JavaScript에서는 함수를 이벤트 핸들러로 사용하여 웹 페이지의 동작을 제어할 수 있습니다.
JavaScript in <head>
HTML 문서 내 <head>태그 내 작성하여 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo1">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>Demo JavaScript in Head
A Paragraph.
JavaScript in <body>
HTML 문서 내 <body>태그 내 작성하여 사용할 수 있습니다.
<script> 태그는 일반적으로 <head> 태그 내부에 위치시키는 것이 일반적입니다.
그러나 자바스크립트 코드가 HTML 요소를 조작하거나 이벤트 처리를 위해 DOM 요소에 접근해야 할 경우에는
<body> 태그의 맨 아래, 즉 HTML 문서의 끝 부분(</body> 태그 직전)에 <script> 태그를 배치하는 것이 좋습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo2">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var updatedText = "텍스트가 변경됩니다.";
document.getElementById("demo2").innerHTML = updatedText;
alert(updatedText);
}
</script>
</body>
</html>Demo JavaScript in Body
A Paragraph.
External JavaScript
외부 파일에 생성해 사용할 수 있습니다.
외부 스크립트는 동일한 코드가 여러 웹 페이지에서 사용될 때 실용적입니다.
외부 파일에 스크립트를 배치하면 몇 가지 이점이 있습니다.
HTML과 코드를 분리합니다.
HTML 및 JavaScript를 더 쉽게 읽고 유지 관리할 수 있습니다.
캐시된 JavaScript 파일은 페이지 로드 속도를 높일 수 있습니다.
한 페이지에 여러 스크립트 파일을 추가하려면 여러 스크립트 태그를 사용하십시오.
<html>
<head>
<title>웹 페이지 제목</title>
<script src="파일경로/파일이름.js"></script>
</head>
<body>
<!-- 웹 페이지 내용 -->
</body>
</html>
'FRONTEND > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 튜토리얼 - JavaScript Variables (0) | 2023.07.21 |
|---|---|
| JavaScript 튜토리얼 - JavaScript Syntax (0) | 2023.07.19 |
| JavaScript 튜토리얼 - JavaScript Statements (0) | 2023.07.17 |
| JavaScript 튜토리얼 - JavaScript Output (0) | 2023.07.14 |
| JAVASCRIPT 튜토리얼 - 자바스크립트 기초적인 사용 기능 (0) | 2023.07.12 |