//OUTPUT: alert(), .innerHTML, and console.log()

<New code>

//INPUT: document.body.onload = mainProcedure;
— starts mainProcedure(); after the page has finished loading
//INPUT:  <img id="imageId" src="image.jpg">
document.getElementById('imageId').onload = mainProcedure;

— 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:

    <!-- your HTML goes in here -->
    <!-- <script> is the last thing in the <body> -->
        // 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;

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>
        <meta charset="utf-8">
        <title>A basic Javascript Program</title>
        <h1>Basic text output  methods</h1>
        <p>The following paragraph is empty at the beginning of the program:</p>
        <p id="emptyId"></p>
            // 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;

Live example: Basic Text Output