JAVA SCRIPT DISPLAY
PROPERTIES
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().
Using innerHTML
• To access an HTML element, JavaScript can use
the document.getElementById(id) method.
• The id attribute defines the HTML element. The innerHTML property defines the
HTML content:
• Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Using document.write()
• For testing purposes, it is convenient • Example
to use document.write():
<!DOCTYPE html>
• Example
<html>
<!DOCTYPE html>
<html>
<body>
<body>
<h1>My First Web Page</h1>
<h1>My First Web Page</h1> <p>My first paragraph.</p>
<p>My first paragraph.</p>
<button type="button" onclick="d
<script>
document.write(5 + 6); ocument.write(5 + 6)">Try
</script> it</button>
</body> </body>
</html> </html>
Using window.alert()
• We can use an alert box to display • we can skip the window keyword.
data: • In JavaScript, the window object is the global
scope object. This means that variables,
Example properties, and methods by default belong to
<!DOCTYPE html> the window object. This also means that
specifying the window keyword is optional:
<html>
<body> Example
<!DOCTYPE html>
<html>
<h1>My First Web Page</h1> <body>
<p>My first paragraph.</p>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6); <script>
</script> alert(5 + 6);
</script>
</body> </body>
</html> </html>
Using console.log()
• For debugging purposes, you can call the console.log() method in the
browser to display data.
• We will learn more about debugging in a later chapter.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print
• JavaScript does not have any print object or print methods.
• We cannot access output devices from JavaScript.
• The only exception is that you can call the window.print() method in
the browser to print the content of the current window.
• Example
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
