JavaScript - Window Object: Your Gateway to Browser Interaction
안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 Window Object의 세상으로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 fascinatings 주제를 안내해 드리겠습니다. 그러면 가상의魔杖(키보드)을 손에握고, JavaScript의 마법을 부르러 가보겠습니다!
What is the Window Object?
브라우저 창을 마법의 문으로 상상해 보세요. Window Object는 이 문의 관문을 통제하는 문지기와도 같아, 웹페이지에서 볼 수 있는 것과 상호작용할 수 있는 모든 것을 통제합니다. 이ほど 중요하기 때문에 JavaScript에서는 자주 "Global Object"라고 불립니다.
Window Object as a Global Object
웹 페이지에 JavaScript를 작성할 때, Window Object는 항상 그곳에 있어, 조용히 코드를 관찰합니다. 우리가 항상 느끼지 못하는 공기처럼, 어디에나 존재합니다.
간단한 예제를 시작해 보겠습니다:
console.log("Hello, World!");이 코드가 실제로는 다음과 같은 약자라는 것을 알고 계신가요:
window.console.log("Hello, World!");window 부분은 암시되므로 일반적으로 생략됩니다. 멋지지 않나요?
Window Object Properties
이제 우리 Window Object의 마법적인 속성을 탐구해 보겠습니다. 이 속성들은 우리 브라우저 성의 다양한 방으로, 각각 자신만의 특별한 목적을 가지고 있습니다.
1. window.innerWidth and window.innerHeight
이 속성들은 우리 브라우저 창의 크기를 알려줍니다. 이들을 실제로 사용해 보겠습니다:
console.log("Window width: " + window.innerWidth);
console.log("Window height: " + window.innerHeight);브라우저 창을 크기 조정하고 이 코드를 다시 실행해 보세요. 숫자가 바뀌는 것을 볼 수 있을 것입니다!
2. window.location
이 속성은 우리 브라우저의 GPS와도 같아, 우리가 웹에서 어디에 있는지 알려주고 새로운 장소로 이동할 수 있게 합니다.
console.log("Current URL: " + window.location.href);
// 새로운 페이지로 이동하려면:
// window.location.href = "https://www.example.com";3. window.history
이것은 브라우저의 일기장과도 같아, 어디를 갔었는지 기록합니다.
console.log("Number of pages in history: " + window.history.length);
// 한 페이지 뒤로 가려면:
// window.history.back();이 속성들을 요약한 표입니다:
| 속성 | 설명 |
|---|---|
| innerWidth | 브라우저 창의 너비 |
| innerHeight | 브라우저 창의 높이 |
| location | 현재 URL에 대한 정보 |
| history | 브라우저의 이력 |
Window Object Methods
이제 우리 Window Object에 부를 수 있는 마법(메서드)을 배워보겠습니다!
1. window.alert()
이 메서드는 사용자에게 "이听着!"라고 외치는 것과 같아, 메시지가 포함된 팝업 상자를 생성합니다.
window.alert("Welcome to JavaScript!");2. window.prompt()
이 메서드는 사용자에게 질문하는 것과 같아, 텍스트 입력이 포함된 팝업 상자를 생성합니다.
let name = window.prompt("What's your name?");
console.log("Hello, " + name + "!");3. window.setTimeout()
이 메서드는 코드에 타이머를 설정하는 것과 같아, 지정된 지연 후 함수를 실행합니다.
window.setTimeout(function() {
console.log("This message appears after 3 seconds!");
}, 3000);4. window.setInterval()
이 메서드는 반복적인 알림을 설정하는 것과 같아, 지정된 간격으로 함수를 반복적으로 실행합니다.
let counter = 0;
window.setInterval(function() {
counter++;
console.log("This message appears every 2 seconds. Count: " + counter);
}, 2000);이 메서드들을 요약한 표입니다:
| 메서드 | 설명 |
|---|---|
| alert() | 팝업 상자로 메시지 표시 |
| prompt() | 사용자 입력을 위한 다이얼로그 상자 표시 |
| setTimeout() | 지정된 지연 후 함수 실행 |
| setInterval() | 지정된 간격으로 함수 반복 실행 |
Putting It All Together
이제 우리가 배운 마법적인 속성과 메서드를 사용하여 간단한 상호작용 웹 페이지를 만들어 보겠습니다:
<!DOCTYPE html>
<html>
<body>
<h1 id="greeting">Welcome!</h1>
<button onclick="startGame()">Start Game</button>
<script>
function startGame() {
let name = window.prompt("What's your name, adventurer?");
document.getElementById("greeting").innerHTML = "Welcome, " + name + "!";
let counter = 5;
let countdown = window.setInterval(function() {
if(counter > 0) {
window.alert(counter + " seconds until the game starts!");
counter--;
} else {
window.clearInterval(countdown);
window.alert("Game start!");
}
}, 1000);
}
</script>
</body>
</html>이 예제에서 우리는 간단한 "게임"을 만들었습니다:
-
prompt()를 사용하여 플레이어의 이름을 묻습니다. - DOM 조작을 사용하여 인사말을 업데이트합니다.
-
setInterval()를 사용하여 카운트다운을 생성합니다. -
alert()을 사용하여 카운트다운과 게임 시작을 알립니다.
그리고 여기에요, 젊은 JavaScript 제자 여러분! 우리는 Window Object의 마법적인 세상을 탐구했고, 그 속성과 메서드를 배웠습니다. 연습이 완벽을 만들어라, 이 개념들을 계속 실험해 보세요. 얼마 지나지 않아 프로처럼 JavaScript 마법을 부를 수 있을 것입니다!
다음에 만날 때까지, 행복한 코딩을 기원합니다!
Credits: Image by storyset