JavaScript - HTML 파일 내 위치

안녕하세요, 미래의 자바스크립트 마법사 여러분! 자바스크립트 배치의 마법적인 세계로 안내해드리게 되어 매우 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저로서는 여러분과 지식과 경험을 나누고 싶어 마음이 뛰어います. 그럼, 가상의 지팡이(키보드)를 손에 들고 함께 빠져보겠습니다!

JavaScript - Placement

HTML 파일 내 자바스크립트 배치

마법을 부를 때(코드를 작성할 때) 전에, 우리의 자바스크립트 문구를 HTML 문서 어디에 배치할 수 있는지 이해하는 것이 매우 중요합니다. 마술사가 토끼를 모자에서 꺼내는 것과 같이, 우리는 자바스크립트가 효과적으로 마법을 발휘할 수 있는 완벽한 장소를 알아야 합니다.

자바스크립트를 HTML 파일에 추가할 수 있는 주요한 세 가지 장소가 있습니다:

<head> 섹션 내
<body> 섹션 내
외부 파일

이 각 옵션을 자세히 탐구해보겠습니다.

`<head>...</head>` 섹션 내 자바스크립트

자바스크립트를 <head> 섹션에 배치하는 것은 쇼가 시작되기 전에 마법을 준비하는 것과 같습니다. 페이지 콘텐츠가 나타나기 전에 로드되어야 하는 스크립트에 매우 적합한 장소입니다.

다음은 예시입니다:

<!DOCTYPE html>
<html>
<head>
<title>마법의 웹 페이지</title>
<script>
function greet() {
alert("자바스크립트 마법의 세계에 환영합니다!");
}
</script>
</head>
<body>
<h1>첫 번째 자바스크립트 마법</h1>
<button onclick="greet()">인사 마법 부르기</button>
</body>
</html>

이 예제에서, 우리는 <head> 섹션 내 greet() 함수를 정의했습니다. 이 함수는 환영 메시지를 보여주는 알림 상자를 생성합니다. 그런 다음, 이 함수를 <body> 섹션에서 버튼이 클릭될 때 사용합니다.

왜 <head>에 넣는가요? 그것은 우리의 마법(함수)이 페이지가 로드되자마자 부를 수 있도록 보장하기 위해서입니다. 하지만 조심해야 합니다! <head>에 너무 많은 마법이 있으면 페이지의 초기 로드 시간을 늦출 수 있습니다.

`<body>...</body>` 섹션 내 자바스크립트

자바스크립트를 <body> 섹션에 배치하는 것은 쇼 중에 마법 트릭을 수행하는 것과 같습니다. 페이지가 로드된 후에 상호작용하거나 실행되어야 하는 스크립트에 적합합니다.

예시를 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>마법의 웹 페이지</title>
</head>
<body>
<h1>두 번째 자바스크립트 마법</h1>
<p id="demo">이 텍스트가 변할 것을 지켜보세요!</p>

<script>
document.getElementById("demo").innerHTML = "Abracadabra! 텍스트가 바뀌었습니다!";
</script>
</body>
</html>

이 마법의 데모에서, 우리는 자바스크립트를 <body> 섹션의 마지막에 배치했습니다. 이 스크립트는 id가 "demo"인 요소를 찾아 그 내용을 변경합니다. 스크립트를 <body>의 끝에 배치함으로써, 모든 HTML 요소가 로드된 후에 마법을 시도하게 됩니다.

`<body>`와 `<head>` 섹션 내 자바스크립트

때로는 마술사가 사전에 몇 가지 트릭을 준비하고 쇼 중에 다른 트릭을 수행해야 합니다. 마찬가지로, 우리는 <head>와 <body> 섹션 모두에서 자바스크립트를 사용할 수 있습니다.

다음은 그 예입니다:

<!DOCTYPE html>
<html>
<head>
<title>마법의 웹 페이지</title>
<script>
function changeColor(newColor) {
document.body.style.backgroundColor = newColor;
}
</script>
</head>
<body>
<h1>세 번째 자바스크립트 마법</h1>
<button onclick="changeColor('red')">적색 마법</button>
<button onclick="changeColor('blue')">청색 마법</button>

<script>
document.write("<p>이 텍스트는 자바스크립트에 의해 소환되었습니다!</p>");
</script>
</body>
</html>

이 매력적인 예제에서, 우리는 <head> 섹션에서 배경색을 변경하는 함수를 정의했습니다. 그런 다음, <body> 섹션에서는 이 함수를 호출하는 버튼과 페이지에 텍스트를 직접 작성하는 스크립트를 가지고 있습니다.

외부 파일 내 자바스크립트

이제 우리의 대미를 장식할 외부 자바스크립트 파일입니다! 이 것은 여러 쇼에서 사용할 수 있는 마법 책과 같습니다. HTML을 깨끗하게 유지하고 자바스크립트를 재사용할 수 있게 합니다.

먼저, magic.js라는 파일을 생성하고 다음 내용을 추가합니다:

function revealSecret() {
document.getElementById("secret").innerHTML = "비밀은... 자바스크립트가 멋적다는 것입니다!";
}

그런 다음, HTML 파일에서:

<!DOCTYPE html>
<html>
<head>
<title>마법의 웹 페이지</title>
<script src="magic.js"></script>
</head>
<body>
<h1>네 번째 자바스크립트 마법</h1>
<p id="secret">비밀이 숨겨져 있습니다...</p>
<button onclick="revealSecret()">비밀을 밝히기</button>
</body>
</html>

src 속성을 사용하여 외부 자바스크립트 파일을 링크함으로써, 우리는 여러 페이지에서 같은 마법(함수)을 사용할 수 있습니다!

`<script>` 태그 사용의 장점

이제 우리가 자바스크립트를 배치할 수 있는 다양한 방법을 탐구했으므로, <script> 태그 사용의 장점을 요약해보겠습니다:

장점	설명
유연성	`<head>`나 `<body>`에 배치할 수 있습니다.
외부 파일	외부 .js 파일을 링크할 수 있습니다.
여러 스크립트	문서에 여러 개의 `<script>` 태그를 가질 수 있습니다.
속성	`src`, `async`, `defer`와 같은 유용한 속성을 지원합니다.
인라인 코드	직접 자바스크립트 코드를 포함할 수 있습니다.