<New code>
//INPUT:
document.body.onload = mainProcedure;
— starts mainProcedure();
after the page has finished loading
//INPUT:
<img id="imageId" src="image.jpg">
<script>
document.getElementById('imageId').onload = mainProcedure;
</script>
— starts mainProcedure();
after the image has finished loading
//OUTPUT:
alert("example message");
— displays a pop up message
//OUTPUT:
console.log("example message");
— outputs a message to the browser console log
//OUTPUT:
document.getElementById('exampleId').innerHTML = "example message";
— inserts/replaces a message inside an HTML element
Setting up a basic script
All Javascript code is placed inside the <script> block of a document.
Usually you want to define a main function to run,
often called mainProcedure(),
and then you want it to run when the window has finished loading.
Using document.body.onload = mainProcedure; will do the trick!
The following code is of an empty script, ready to go:
<body>
<!-- your HTML goes in here -->
<!-- <script> is the last thing in the <body> -->
<script>
// this is the main function
function mainProcedure () {
// your code goes inside here
}
//INPUT: start mainProcedure() when the body of the page is finished loading
document.body.onload = mainProcedure;
</script>
</body>Three basic ways to output text information to a user
Pop up messages with alert()
Want to annoy your users? Of course you don't!
But there are still plenty of times when you want to pop up a window, such as for notifications, or to help you troubleshoot your programs.
To do this, add the line alert("example message");
inside mainProcedure.
Secretly send messages to the developer console with
console.log()
Sometimes you want to send messages secretly to yourself. In most browsers there is a developer console that show errors and other information. It can usually be opened by hitting ctrlshiftJ on the keyboard.
If you add console.log("secret message"); to
mainProcedure, the message will appear in the console.
You will find that the developer console is essential for hunting down bugs.
AND MOST IMPORTANTLY: Insert text into HTML elements with
document.getElementById().innerHTML
Most of the time that you are sending text to a user, you will be inserting a message inside an element on your webpage.
Let's say that you have an empty paragraph in the
<body> of your code like:
<p id="emptyId"></p>
If you add
document.getElementById('emptyId').innerHTML = "Hello world!" to
mainProcedure, that message will appear inside that paragraph.
This is an essential piece of code that you will use over and over again.
Code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A basic Javascript Program</title>
</head>
<body>
<h1>Basic text output methods</h1>
<p>The following paragraph is empty at the beginning of the program:</p>
<p id="emptyId"></p>
<script>
// OUTPUT: show an alert, a log, and in insertion
function mainProcedure () {
// make an alert message pop up
alert( "Hello - this is an alert()" );
// send a hidden message to the developer console
// check the console out with cntl-shift-J
console.log( "Hey! I'm in the console.log()!" );
var newText = "I'm now inside the empty paragraph";
// insert text inside an HTML element
document.getElementById( "emptyId" ).innerHTML = newText;
}
//INPUT: start mainProcedure when the page finishes loading
document.body.onclick = mainProcedure;
</script>
</body>
</html>