HTML - JavaScript: 초보자 가이드

안녕하세요, 웹 개발자 꿈나이들! HTML과 JavaScript의 세계로의 흥미로운 여정에 여러분을 안내하게 되어 기쁩니다. 10년 이상 프로그래밍을 가르쳐온 사람으로서, 여러분이 즐거운 시간을 보낼 것이라 확신합니다. 함께 웹 개발의 미스터리를 풀어보겠습니다!

HTML - Javascript

JavaScript는 무엇인가요?

자세한 내용에 들어가기 전에 JavaScript가 무엇인지 이해해 보겠습니다. JavaScript는 웹 페이지에 생기를 불어넣는 강력한 프로그래밍 언어입니다. 인터넷의 마법 지팡이처럼, 정적 HTML 페이지를 춤추게 하고, 상호작용하며, 사용자의 동작에 반응하게 합니다.

웹사이트를 집으로 생각해 보겠습니다. HTML은 구조 - 벽, 지붕, 기초입니다. CSS는 페인트와 장식입니다. 그렇다면 JavaScript는 전기, 배관, 그리고 집을 기능적이고 상호작용적으로 만드는 모든 멋진 장치입니다!

문법

JavaScript는 다른 언어와 마찬가지로 자신만의 규칙을 가지고 있습니다. 기본적인 내용을 풀어보겠습니다:

변수

변수는 정보를 담는 컨테이너입니다. 다음과 같이 선언합니다:

let myName = "Alice";
const myAge = 25;
var myHobby = "coding";

이 예제에서:

let은 변경될 수 있는 변수에 사용됩니다.
const은 변경되지 않는 변수에 사용됩니다.
var은 예전 방식으로 변수를 선언하는 것이지만, let과 const이 현재 선호됩니다.

함수

함수는 재사용 가능한 코드 블록입니다. 프로그램의 레시피와 같습니다:

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Bob"); // 출력: Hello, Bob!

이 함수는 name을 입력으로 받아 인사를 출력합니다. 친절한 로봇이 누구를 소개해도 인사를 하는 것과 같습니다!

조건문

이들은 코드가 결정을 내리는 데 도움을 줍니다:

let temperature = 22;

if (temperature > 30) {
console.log("It's hot outside!");
} else if (temperature > 20) {
console.log("It's a nice day!");
} else {
console.log("It's a bit chilly.");
}

이 코드는 온도를 확인하고, 얼마나 따뜻한지에 따라 다른 메시지를 출력합니다. 컴퓨터를 날씨 해설가로 만드는 것과 같습니다!

HTML 내에서 JavaScript 사용 예시

이제 HTML 페이지 내에서 JavaScript를 어떻게 사용할 수 있는지 보겠습니다. 세 가지 주요 방법이 있습니다:

1. 인라인 JavaScript

이는 빠른 지시를 속삭이는 것과 같습니다:

<button onclick="alert('Hello!')">Click me</button>

이 버튼을 클릭하면 "Hello!"라는 팝업이 나타납니다. 빠르고 간편하지만, 더 큰 스크립트에선 적합하지 않습니다.

2. 내부 JavaScript

이는 HTML 페이지에 자신의 뇌를 주는 것과 같습니다:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<button onclick="changeColor()">Change Color</button>
</body>
</html>

이 스크립트는 버튼을 클릭하면 페이지 배경을 푸른색으로 변경합니다. 웹 페이지에 변신 능력을 주는 것과 같습니다!

3. 외부 JavaScript

이는 웹 페이지에 별도의 뇌를 참조할 수 있게 하는 것과 같습니다:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="greet()">Say Hello</button>
</body>
</html>

그리고 myscript.js 파일에서:

function greet() {
alert("Hello from an external file!");
}

이렇게 하면 HTML을 깨끗하게 유지하고 JavaScript를 정리할 수 있습니다. 도구를 도구 상자에 보관하는 것과 같습니다.

HTML

사용자의 브라우저에서 JavaScript가 사용되지 않거나 비활성화된 경우, <noscript> 요소가 유용합니다:

<script>
document.write("Hello, JavaScript is working!");
</script>
<noscript>
<p>Oh no! Your browser doesn't support JavaScript or it's turned off.</p>
</noscript>

이는 예비 계획과 같습니다. JavaScript가 작동하면 사용자는 첫 번째 메시지를 볼 수 있고, 그렇지 않으면 두 번째 메시지를 볼 수 있습니다. 항상 준비하는 것이 좋습니다!

JavaScript 메서드 표

자주 사용할 JavaScript 메서드 몇 가지를 살펴보겠습니다:

메서드	설명	예제
`alert()`	팝업 메시지 표시	`alert("Hello, World!");`
`console.log()`	브라우저 콘솔에 출력	`console.log("This is a log");`
`document.getElementById()`	HTML 요소를 ID로 찾기	`let elem = document.getElementById("myDiv");`
`addEventListener()`	요소에 이벤트 핸들러 추가	`button.addEventListener("click", function() { alert("Clicked!"); });`
`setTimeout()`	지연 후 함수 실행	`setTimeout(function() { console.log("Delayed message"); }, 2000);`