Getting Started

Writing Your First Javascript Program - Quick Start
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>First Javascript Program</title>

        <style>
            #touchTarget{
                background-color: #990000;
                color: white;
                width: 200px;
                height: 200px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById('touchTarget').addEventListener('click', respond);
            }
            function respond(e) {
                //alert("You clicked me!");
                document.getElementById('touchTarget').style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id="touchTarget"><h1>Touch me!</h1></div>
    </body>
    </html>
        
Top

Index

Where to Put Javascript Code
Javascript is about interaction while HTML is about structure
inline Javascript is a bad practice
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>The quick brown fox jumped over the lazy dogs</h1>
        <button onclick="alert('Thanks for clicking');">Click Me</button>
    </body>
    </html>
        
can put Javascript between script tags
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById('myButton').addEventListener('click', respond);
            }
            function respond(e) {
                alert('thanks for clicking');
            }
        </script>
    </head>
    <body>
        <h1>The quick brown fox jumped over the lazy dogs</h1>
        <button id="myButton">Click Me</button>
    </body>
    </html>
        
recommended : can put script in separate file
    window.onload = function () {
        document.getElementById('myButton').addEventListener('click', respond);
    }
    function respond(e) {
        alert('thanks for clicking');
    }
        
HTML using separate js file
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="where.js"></script>
    </head>
    <body>
        <h1>The quick brown fox jumped over the lazy dogs</h1>
        <button id="myButton">Click Me</button>
    </body>
    </html>
        
Top

Index

The window.onload Function
the code below does not work because the getElementById function runs before the button is drawn
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>window.onload function</title>
        <script>
            document.getElementById('myButton').addEventListener('click', respond);
            function respond(e) {
                alert("Hi! You pressed me");
            }
        </script>
    </head>
    <body>
        <button id="myButton">PressMe</button>
    </body>
    </html>
        
the code below does work because the getElementById runs after the button is drawn
co-mingling the interaction and structure is not a preferred way of doing things
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>window.onload function</title>
        <script>
            function respond(e) {
                alert("Hi! You pressed me");
            }
        </script>
    </head>
    <body>
        <button id="myButton">PressMe</button>
        <script>
            document.getElementById('myButton').addEventListener('click', respond);
        </script>
    </body>
    </html>
            
using the window.onload function avoids both the race condition and the co-mingling of interaction and structure
the anonymous function isn't called until after the page is drawn
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>window.onload function</title>
        <script>
            window.onload = function () {
                document.getElementById('myButton').addEventListener('click', respond);
            }
            function respond(e) {
                alert("Hi! You pressed me");
            }
        </script>
    </head>
    <body>
        <button id="myButton">PressMe</button>
    </body>
    </html>
        
window is an object within the DOM
Top

Index

Output to the Console
using Chrome as a browser F12 will open developer tools
the console tab will display what the code below writes
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Console</title>
        <script>
            var clicks = 0;
            window.onload = function () {
                console.log("window.onload ... run");
                document.getElementById('myButton').addEventListener('click', respond);
            }
            function respond(e) {
                clicks++;
                console.log("button clicked " + clicks + " times");
            }
        </script>
    </head>
    <body>
        <button id="myButton">Press Me</button>
    </body>
    </html>
       
Top

Index

Output to the Browser
use Javascript to replace or append content
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Output to the Browser</title>
        <script>
            var clicks = 0;
            window.onload = function () {
                document.getElementById('myButton').addEventListener('click', respond);
            }
            function respond(e) {
                document.getElementById('one').innerHTML = "<h1>Hello World!</h1>";
                document.getElementById('two').innerHTML += " : Javascript course";
            }
        </script>
    </head>
    <body>
        <div id="one">This is div 'one'</div>
        <div id="two">This is div 'two'</div>
        <button id="myButton">Click Me</button>
    </body>
    </html>
        
Top

Index

Understanding getElementById()
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>getElementById</title>
        <script>
            window.onload = function () {
                document.getElementById('content').addEventListener('click', respond);
                document.getElementById('one').addEventListener('click', respondOne);
                document.getElementById('two').addEventListener('click', respondTwo);
            }
            function respond(e) {
                console.log("content div was clicked");
                document.getElementById('content').style.color = "yellow";
           }
            function respondOne(e) {
                console.log("p one was clicked");
                document.getElementById('one').style.color = "blue";
           }
            function respondTwo(e) {
                console.log("p two was clicked");
                document.getElementById('two').style.color = "red";
            }
        </script>
    </head>
    <body>
        <div id="content">
            Hello World!
            <p id="one">This is sentence one.</p>
            <p id="two">This is sentence two.</p>
        </div>
    </body>
    </html>
        
Top

Index

n4jvp.com