JavaScript Output

When you write JavaScript, you need to verify what your code is doing. Is your logic correct? What value does a variable hold right now? JavaScript gives you multiple ways to show output, and each one has a specific use case.

console.log() is the most common way to see output from your JavaScript code. It prints messages to the browser's developer console (press F12 to open it).

You'll use this constantly while learning. Want to check if a variable has the right value? Want to see if a piece of code actually runs? Just wrap it in console.log() and check the console.

//Printing in same line
console.log("learnjavascript", "simplyjavascript", 2+2);

//Printing in new line
console.log("learnjavascript");
console.log("simplyjavascript");

document.write() writes text or HTML directly onto the web page. It's quick for testing, but there's a catch: if you use it after the page has finished loading, it erases everything on the page first.

It's like writing on a whiteboard that auto-clears when you're late. For real projects, use DOM methods like createElement() and appendChild() instead. We'll cover those in the DOM tutorial.

document.write("Hello World");
document.write("Hello SimplyJavaScript</br>Hello Learners"); //br will print Hello Learners in the new line 

window.alert() shows a pop-up message and waits for the user to click "OK." It is simple and useful for quick checks while learning.

The downside is that it blocks everything until the user responds. In real applications, that usually hurts user experience, so developers prefer non-blocking UI messages like toasts or custom notifications.

window.alert("Hello"); 

innerHTML lets you read or change the HTML content inside any element on your page. For example, you can grab a <div> and replace its content with new text, images, or HTML.

It is very useful for updating content without reloading the page. Just remember: setting innerHTML replaces everything inside that element.

Note: We'll cover innerHTML in detail in the DOM tutorial. For now, just know it's one way to display output on the page.

<div id='test'></div>

document.getElementById('test').innerHTML = '<span>Hello World</span>'; 

• console.log(): Prints output to the browser console. Your go-to tool for debugging and checking values.
• document.write(): Writes directly on the page. Quick for testing, but dangerous after page load (it erases everything).
• window.alert(): Shows a pop-up message. Pauses all code until user clicks OK. Avoid in real applications.
• innerHTML: Reads or changes the HTML content inside an element. Great for updating the page dynamically.

What's next? Now that you can see your code's output, let's learn about comments in the next tutorial.

• What is the primary purpose of console.log() in JavaScript? How does it differ from other methods like console.error() or console.warn()?
• Can you describe situations where console.log() is particularly useful in debugging JavaScript code?
• Explain document.write() and potential drawbacks or limitations when using this method?
• When might you choose to use document.write() over other DOM manipulation methods like innerHTML or appendChild()?
• Explain window.alert(). How does it interact with user interaction and why might it be used sparingly?
• What are the advantages and disadvantages of using window.alert() for displaying messages compared to other methods like modals or custom UI elements?
• Explain the purpose and functionality of the innerHTML property in JavaScript. What are some considerations or best practices when using it to manipulate the DOM?
• How does innerHTML differ from other DOM manipulation methods, such as createElement() and appendChild()? When would you prefer one over the other?