JavaScript Output

There are several ways to display information in JavaScript, including:

  • console.log(): This method is used to display information in the browser's developer console.
  • document.write(): This method is used to write information directly to the web page.
  • innerHTML: This property is used to update the content of an HTML element.
  • textContent: This property is used to update the text content of an HTML element.
  • alert(): This method is used to display an alert box with a message.
  • prompt(): This method is used to display a prompt box and get input from the user.
  • Using DOM (Document Object Model) to manipulate the HTML elements and change their properties like style, classes, attributes and etc.
  • Using libraries like JQuery, React or Angular to handle the rendering and updating the views.

innerHTML

document.getElementById() is a JavaScript method that is used to access and manipulate an HTML element on a web page by its unique id. The method returns the first element with the specified id and it is case-sensitive.

Here's an example of how to use document.getElementById():

<!DOCTYPE html>
<html>

<body>
  <h1 id="myHeading">Hello World</h1>

  <script>
  // Get the element with the id "myHeading"
    var heading = document.getElementById("myHeading");
  // Change the text of the heading
    heading.innerHTML = "Hello JavaScript";
  </script>
</body>

</html>

In this example, the JavaScript code uses document.getElementById("myHeading") to get the <h1> element with the id "myHeading". It then uses the innerHTML property to change the text of the heading to "Hello JavaScript".

It is important to note that this method will only return the first element that matches the id, if there are multiple elements with the same id, only the first will be returned.

Also, the best practice is to use the ids in conjunction with CSS and JavaScript to target specific elements on the page and change their properties.

document.write()

document.write() is a JavaScript method that is used to write or output a string or a variable value to a web page. The method can be used to add new content to a web page, or to overwrite existing content.

Here's an example of how to use document.write():

<!DOCTYPE html>
<html>

<body>
  <script>
  // Write a string to the web page
    document.write("Hello JavaScript!");
  </script>
</body>

</html>

In this example, the JavaScript code uses document.write("Hello JavaScript!") to write the string "Hello JavaScript!" to the web page.

It is important to note that the document.write() method should be used with caution, because it can overwrite the entire web page, including the HTML and other scripts, if called after the page has finished loading. So it's best to use it only when the page is loading.

It's also worth noting that using document.write() is not considered as a best practice, as it can lead to unexpected results and can make the code hard to maintain.

There are better alternatives to document.write like innerHTML, textContent, or manipulating the DOM directly with JavaScript to update the content of elements.

It is also important to use the document.write() only in the script tags and not in the HTML elements.

window.alert()

window.alert() is a JavaScript method that is used to display an alert box with a message on a web page. The alert box contains an "OK" button that the user must click to close the box and continue viewing the web page.

Here's an example of how to use window.alert():

<!DOCTYPE html>
<html>

<body>
  <script>
  // Display an alert box with a message
    window.alert("Hello JavaScript!");
  </script>
</body>

</html>

In this example, the JavaScript code uses window.alert("Hello JavaScript!") to display an alert box with the message "Hello JavaScript!" on the web page.

It is important to note that the window.alert() method blocks the execution of the script until the user closes the alert box, so it's recommended to use it only for important notifications or when you want to make sure the user sees the message before continuing.

It's worth noting that window.alert() is not considered as a best practice, as it can be annoying and can disrupt the user experience. There are other ways to display notifications, such as using the browser's notification API, or using a library or framework to create custom notifications.

It's also worth noting that the window.alert() method can be used only in the script tags and not in the HTML elements.

console.log()

console.log() is a JavaScript method that is used to output information to the browser's developer console. It allows developers to output strings, variables, and other data to the console, which can be useful for debugging, testing, and troubleshooting code.

Here's an example of how to use console.log():

<!DOCTYPE html>
<html>

<body>
  <script>
  // Define a variable
    var myVariable = "Hello JavaScript";
  // Output the variable to the console
    console.log(myVariable);
  </script>
</body>

</html>

In this example, the JavaScript code defines a variable called myVariable and assigns it the value "Hello JavaScript". It then uses console.log(myVariable) to output the value of the variable to the browser's developer console.

It is important to note that the console.log() method is only available in a web browser that has a developer console, such as Chrome, Firefox, or Safari. And it will not have any effect on the web page itself, it's just to debug and check the value of the variables and other data in the browser's developer console.

It's also worth noting that the console.log() method can be used to output multiple values and variables, by passing multiple parameters to the method separated by commas like:

console.log("value1", "value2", "value3");

It can also be used to output objects like:

console.log({firstName: "John", lastName: "Doe"});

It's also worth noting that you can add a label to the output by using the console.log("label:", myVariable).

It's a commonly used method among developers for debugging and troubleshooting their code.

window.print()

window.print() is a JavaScript method that is used to display the print dialog box and allows the user to print the current web page.

Here's an example of how to use window.print():

<!DOCTYPE html>
<html>

<body>
  <button onclick="window.print()">Print this page</button>
</body>

</html>

In this example, the JavaScript code creates a button with the text "Print this page" and when clicked, it calls the window.print() method.

When the button is clicked, the browser's print dialog box is displayed, allowing the user to select the printer and adjust the print settings before printing the current web page.

It's worth noting that calling window.print() method does not work on all mobile devices, in such cases, you can use a library or a framework to create custom print dialog and print the webpage's content.

Also, it's worth noting that if you want to print only a specific element or part of the webpage, you should use css to hide the other elements and make the specific elements visible.

Another thing to keep in mind is that calling window.print() method will print the current webpage as it is with all the styles, so you might need to adjust the styles or create a new stylesheet that will be used when the page is printed.

JS Basics