Prev Next

JavaScript Output

JavaScript provides various ways to display output to users. The method you choose depends on the context, such as displaying messages in the browser, logging information, or manipulating the HTML content dynamically.

Key Topics

Alert Box

The alert() method is used to display a simple message box. It is typically used for debugging or displaying information to users.

alert("This is an alert box!");

Output

A pop-up alert box with the message: "This is an alert box!"

Console Log

The console.log() method is used to log information to the browser's developer console. It is helpful for debugging purposes.

console.log("This is a console log message.");

Output

Logs the message "This is a console log message." in the browser console.

Modifying HTML with innerHTML

The innerHTML property allows you to change the content of an HTML element dynamically.

<!DOCTYPE html>
<html>
<body>
    <h1 id="heading">Original Heading</h1>
    <button onclick="changeHeading()">Change Heading</button>

    <script>
        function changeHeading() {
            document.getElementById("heading").innerHTML = "New Heading";
        }
    </script>
</body>
</html>

Output

Clicking the button changes the heading from "Original Heading" to "New Heading."

Different Output Methods

Here are some other JavaScript methods to display output:

  • document.write(): Writes directly to the HTML output stream. Useful for testing but not recommended for modern applications.
  • window.prompt(): Displays a dialog box that prompts the user for input.
  • window.confirm(): Displays a dialog box with OK and Cancel buttons for user confirmation.

Key Takeaways

  • alert(): Displays a pop-up alert box for immediate attention.
  • console.log(): Logs information to the console for debugging.
  • innerHTML: Dynamically modifies the content of HTML elements.
  • Other Methods: Functions like document.write(), prompt(), and confirm() provide additional ways to interact with users.
Prev Next