JavaScript - Window 物件：瀏覽器互動的入門
Hello there, future JavaScript wizards! Today, we're going to embark on an exciting journey into the world of the Window Object. As your friendly neighborhood computer teacher, I'm here to guide you through this fascinating topic. So, grab your virtual wands (keyboards), and let's cast some JavaScript spells!
What is the Window Object?
Imagine the browser window as a magical portal to the web. The Window Object is like the gatekeeper of this portal, controlling everything you see and interact with on a webpage. It's so important that it's often called the "Global Object" in JavaScript.
Window Object as a Global Object
When you're writing JavaScript for a web page, the Window Object is always there, silently watching over your code. It's like the air we breathe - it's everywhere, even if we don't always notice it.
Let's start with a simple example:
console.log("Hello, World!");Did you know that this is actually shorthand for:
window.console.log("Hello, World!");The window part is usually omitted because it's implied. Neat, right?
Window Object Properties
Now, let's explore some of the magical properties of our Window Object. These properties are like the different rooms in our browser castle, each with its own special purpose.
1. window.innerWidth and window.innerHeight
These properties tell us the size of our browser window. Let's see them in action:
console.log("Window width: " + window.innerWidth);
console.log("Window height: " + window.innerHeight);Try resizing your browser window and running this code again. You'll see the numbers change!
2. window.location
This property is like the GPS of our browser. It tells us where we are on the web and lets us navigate to new places.
console.log("Current URL: " + window.location.href);
// To navigate to a new page:
// window.location.href = "https://www.example.com";3. window.history
Think of this as your browser's journal, keeping track of where you've been.
console.log("Number of pages in history: " + window.history.length);
// To go back one page:
// window.history.back();Here's a table summarizing these properties:
| Property | Description |
|---|---|
| innerWidth | Width of the browser window |
| innerHeight | Height of the browser window |
| location | Information about the current URL |
| history | Browser's history |
Window Object Methods
Now, let's learn some spells (methods) that we can cast on our Window Object!
1. window.alert()
This method is like shouting "Hey, listen!" to the user. It creates a pop-up box with a message.
window.alert("Welcome to JavaScript!");2. window.prompt()
This method is like asking the user a question. It creates a pop-up box with a text input.
let name = window.prompt("What's your name?");
console.log("Hello, " + name + "!");3. window.setTimeout()
This method is like setting a timer for your code. It runs a function after a specified delay.
window.setTimeout(function() {
console.log("This message appears after 3 seconds!");
}, 3000);4. window.setInterval()
This method is like setting a recurring alarm. It runs a function repeatedly at specified intervals.
let counter = 0;
window.setInterval(function() {
counter++;
console.log("This message appears every 2 seconds. Count: " + counter);
}, 2000);Here's a table summarizing these methods:
| Method | Description |
|---|---|
| alert() | Displays an alert box |
| prompt() | Displays a dialog box for user input |
| setTimeout() | Executes a function after a specified delay |
| setInterval() | Executes a function repeatedly at specified intervals |
Putting It All Together
Now that we've learned about these magical properties and methods, let's use them to create a simple interactive webpage:
<!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>In this example, we've created a simple "game" that:
- Asks for the player's name using
prompt() - Updates the greeting using DOM manipulation
- Uses
setInterval()to create a countdown - Uses
alert()to notify the player of the countdown and game start
And there you have it, young JavaScript apprentices! We've explored the magical realm of the Window Object, from its properties to its methods. Remember, practice makes perfect, so keep experimenting with these concepts. Before you know it, you'll be casting JavaScript spells like a pro!
Until next time, happy coding!
Credits: Image by storyset