//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">
<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()!");
                
                // insert text inside an HTML element
                document.getElementById("emptyID").innerHTML
                    = "I'm now inside the empty paragraph";
            }
            
            //INPUT: start mainProcedure when the page finishes loading
            document.body.onclick   = mainProcedure;
        </script>
    </body>
</html>

Live example: Basic Text Output