Exploring Window Object Methods

Introduction

In our last lesson, we introduced the Browser Object Model (BOM) and discussed its various components, like the Window Object. Now, we’re going to dive deeper into the Window Object and explore some of its useful methods. These methods help us interact with the user through pop-up boxes and get feedback from them.

The `alert` Method

The alert method displays a simple pop-up box with a message and an OK button. It’s a way to show important information or warnings to the user.

Syntax:

alert(message);

Explanation: The alert method takes one argument, message, which is the text you want to display. When the user clicks OK, the pop-up box closes.

For example, if you want to tell the user that their form has been submitted, you can use an alert to let them know.


<!DOCTYPE html>
<html>
<head>
<title>Alert Example</title>
</head>
<body>

<script>
// Show an alert box with a message
alert("Form submitted successfully!");
</script>


</body>
</html>

When this code runs, a pop-up box with the message "Form submitted successfully!" will appear. The user will need to click OK to continue.

The `confirm` Method

The confirm method shows a pop-up box with a message, an OK button, and a Cancel button. It’s used to ask the user for confirmation before proceeding with an action.

Syntax:

confirm(message);

Explanation: The confirm method takes one argument, message, which is the text you want to display in the confirmation box. It returns true if the user clicks OK and false if they click Cancel.

For example, if you want to ask the user if they are sure they want to delete an item, you can use a confirm dialog.


<!DOCTYPE html>
<html>
<head>
<title>Confirm Example</title>
</head>
<body>

<script>
// Ask for confirmation before deleting an item
const userConfirmed = confirm("Are you sure you want to delete this item?");

if (userConfirmed) {
alert("Item deleted.");
} else {
alert("Action cancelled.");
}
</script>


</body>
</html>

This code will display a pop-up asking the user if they want to delete the item. Depending on their response, a message will appear telling them whether the item was deleted or the action was cancelled.

The `prompt` Method

The prompt method shows a pop-up box that asks the user for input. It includes a message, a text input field, an OK button, and a Cancel button.

Syntax:

prompt(message, defaultValue);

Explanation: The prompt method takes two arguments: message, which is the text you want to show, and defaultValue (optional), which is the text that appears in the input field by default. It returns the text entered by the user if they click OK, or null if they click Cancel.

For example, you might want to ask the user to enter their name.


<!DOCTYPE html>
<html>
<head>
<title>Prompt Example</title>
</head>
<body>

<script>
// Prompt the user to enter their name
const userName = prompt("Please enter your name:", "Your name here");

if (userName) {
alert("Hello, " + userName + "!");
} else {
alert("No name entered.");
}
</script>


</body>
</html>

This code will display a pop-up asking the user to enter their name. If they provide a name and click OK, a greeting will appear with their name. If they click Cancel, a message saying "No name entered" will appear.

Conclusion

The Window Object methods alert, confirm, and prompt are powerful tools for interacting with users through pop-up boxes. They help you display messages, get confirmations, and collect input, making your web pages more interactive and engaging.

Exploring Window Object Methods

Introduction

The alert Method

The confirm Method

The prompt Method

Conclusion

The `alert` Method

The `confirm` Method

The `prompt` Method