JavaScript Output

Tanveer Ahmad

 JavaScript Output

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

JavaScript Output



Using innerHTML

Certainly! The `innerHTML` property in JavaScript allows you to get or set the HTML content of an element. Here's a simple example to illustrate its usage:


      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>innerHTML Example</title>
      </head>
      <body>

      <div id="exampleDiv">
         <p>This is some initial content.</p>
      </div>

      <button onclick="changeContent()">Change Content</button>

      <script>
         function changeContent() {
            // Get the element by its ID
            var exampleDiv = document.getElementById("exampleDiv");

            // Set the new HTML content using innerHTML
            exampleDiv.innerHTML = "<p>New content added!</p>";
         }
      </script>

      </body>
      </html>


Using document.write

document.write() is a JavaScript method that allows you to write content directly to a document. It was commonly used in the early days of web development to dynamically generate content and add it to a webpage. However, it has some drawbacks and is generally not recommended for modern web development due to various reasons, such as its impact on page loading and potential security issues.

Here's a simple example of how you can use document.write():

   <!DOCTYPE html>
   <html lang="en">

   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>document.write() Example</title>
   </head>

   <body>

      <script>
         // Using document.write() to add content to the page
         document.write("<h1>Hello, World!</h1>");
         document.write("<p>This is a simple example using document.write()</p>");
      </script>

   </body>

   </html>


Using window.alert

In JavaScript, window.alert() is a method that displays a dialog box with a specified message and an OK button. It is often used for simple pop-up notifications or alerts in web applications. Here's a basic example of how you can use window.alert():


<!DOCTYPE html>
   <html lang="en">

   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Alert Example</title>
      <!-- You can include this script in the head or at the end of the body -->
      <script>
         // JavaScript code
         function showAlert() {
            // Display an alert with a message
            window.alert("Hello, this is an alert!");
         }
      </script>
   </head>

   <body>

      <!-- Trigger the showAlert function when a button is clicked -->
      <button onclick="showAlert()">Click me for an alert</button>

   </body>

   </html>


Using console.log

In JavaScript, console.log() is a method used for logging information to the console. It's commonly used for debugging purposes to display values or messages during the execution of a script. Here's a simple example:


   // Example 1: Logging a String
   var message = "Hello, World!";
   console.log(message);

   // Example 2: Logging Variables
   var number = 42;
   var booleanValue = true;
   console.log("The number is: " + number);
   console.log("The boolean value is: " + booleanValue);

   // Example 3: Logging Multiple Values
   var firstName = "John";
   var lastName = "Doe";
   var age = 30;
   console.log("Name: " + firstName + " " + lastName + ", Age: " + age);

   // Example 4: Logging Objects
   var person = {
   firstName: "Jane",
   lastName: "Doe",
   age: 25
   };
   console.log("Person:", person);

   // Example 5: Logging Arrays
   var colors = ["red", "green", "blue"];
   console.log("Colors:", colors);

   // Example 6: Logging Expressions
   var x = 5;
   var y = 10;
   console.log("Sum of x and y:", x + y);



0 Comments