JavaScript can be used to create output. This can be done many different ways:
- Using
document.writeto add content to the HTML webpage - Use
alert()to display a warning message in an alert popup - Use
console.log()to display a message in the developer tools of a browser
The document.write command will add content to the document.
Open up a new HTML file, name it output.html, add the standard HTML elements, and then add the following code:
<script>
document.write( "<h1>Creating Output</h1>" );
document.write( "<p>Quotes can cause conflicts with creating output." + " " +
"To resolve quote issues there are three solutions:</p>" );
document.write( "<ul>" +
"<li>Escape them with a slash</li>" +
"<li>Use alternating quotes</li>" +
"<li>Use special characters</li>" +
"</ul>" );
</script>Test the file using a browser. The body section of the webpage should have some useful information regarding JavaScript, output, and quotations.
The alert() command will display a message using an alert style popup.
Open up the previous file, right before the closing script tag, add the following code:
alert("This is an alert message");The console.log() command will display a message using the browser developer tools.
Open up the previous file, right before the closing script tag, add the following code:
console.log( "This is a console log" );To test the console.log line of code, follow these steps:
- Open a browser
- Right click on the web page and choose Inspect Element
- From the developer tools, choose the Console tab
- Open the
output.htmlfile - The message in the
console.logcommand will be displayed
Create an HTML file and add the following code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Output</title>
</head>
<body>
<h1>W3Schools</h1>
<p>W3Schools is a web developer information website, with tutorials
and references relating to web development topics such as HTML, CSS,
JavaScript and PHP.</p>
<a href="http://www.w3schools.com/">W3Schools</a>
<br>
<img src="w3schools.png">
</body>
</html>Convert each line of HTML in the body section to use JavaScript and document.write(). For example, converting the h1 element could look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creating Output</title>
</head>
<body>
<script>
document.write("<h1>W3Schools</h1>");
</script>
<p>W3Schools is a web developer information website, with tutorials
and references relating to web development topics such as HTML, CSS,
JavaScript and PHP.</p>
<a href="http://www.w3schools.com/">W3Schools</a>
<br>
<img src="w3schools.png">
</body>
</html>When you have completed the goal, the body tag will only include one script tag and a number of document.write() commands.
Full tutorial URL:
https://codeadam.ca/learning/javascript-output.html
