Option: 1 (Old Way)

<script language="javascript">
// Javascript code here
</script>

Using Comments

// Inline comment or single line comment
var number = 6; // Good way to add a comment to the end of a line of code.
  
/*
Multi
Line 
Comments 
*/
 
/*Commenting out lines of code. 
document.getElementById("myHeader").innerHTML = "My First Headline";
document.getElementById("myParigraph").innerHTML = "My first paragraph.";
*/
 
//document.getElementById("myHeader").innerHTML = "My First Headline";

Declaring & Assigning Variables.

// Initializes a variable. The value is set to undefined.
// Function-scoped, or global at the top level of a classic script.
var variable; 

// Block Scope Local Variable
let variable2 = "Local Scope";

// A binding that cannot be reassigned; objects can still be mutated.
const pie = 3.1415926535897932384626433;

// Declaring many variables in one statement.
var person = "Cindy Smith", carType = "Ford", price = 35000;

// Lets you see the value of the variable in the console. Great to debug your code and make sure things are working.
console.log(variable);
console.log(variable2);
console.log(pie);

// Console log multiple variables in one statement
console.log("PERSON: " + person + " CAR TYPE: " + carType  + " PRICE: " + price);

String Variables In Javascript

// String (Text) ---------------------------------------------------------
var customer = "Cindy Smith";
var message = 'Yes I am!';
  
// Concatenate Strings - Joining Strings Together
var customerMessage = customer + ": " + message;
var fullName = "John" + " " + "Doe";
var ourString = "First sentence. " + "Second sentence."
var myStr = "Hello, my name is " +  fullName + " and i'm a happy coder!";

console.log(customer);
console.log(message);
console.log(customerMessage);
console.log(fullName);
console.log(ourString);
console.log(myStr);
console.log(typeof customer); // Gets type of variable

Find The Length Of A String

var myFirstName = "Nathan Ergang";
var lengthOfFirstName = myFirstName.length;

console.log("My first name is " + myFirstName + ". That has " + lengthOfFirstName + " characters in it.");

// CONSOLE: My first name is Nathan Ergang. That has 13 characters in it.

Advanced Strings

// A template literal can contain double quotes.
const htmlTemplate = `<a href="https://www.greenmarketing.ca">Link</a>`;

// A single-quoted string can also contain double quotes.
const htmlSingle = '<a href="https://www.greenmarketing.ca">Link</a>';

// Escape double quotes inside a double-quoted string with a backslash.
const htmlEscaped = "<a href=\"https://www.greenmarketing.ca\">Link</a>";

// ${...} interpolates an expression inside a template literal.
const text = `half of 100 is ${100 / 2}`;
console.log(text); // half of 100 is 50

const myFirstName = "Nathan Ergang";
const firstLetterOfTheString = myFirstName[0];
const lastLetterOfTheString = myFirstName[myFirstName.length - 1];
console.log(`The first letter is ${firstLetterOfTheString} and the last letter is ${lastLetterOfTheString}.`);
// Strings are immutable. This assignment would fail in strict mode:
// myFirstName[0] = "E";
// Create a new string to change a character instead:
const changedName = "E" + myFirstName.slice(1);
console.log(changedName); // Eathan Ergang

Number Variables

// Numbers
var price_1 = 3;
var price_2 = 10.99;
var total = price_1 + price_2;

console.log(price_1 + " PLUS " + price_2 + " = " + total);
console.log(typeof total); // Gets type of variable

Javascript Expressions

const price_1 = 3;
const price_2 = 10.99;
const totalCost = price_1 + price_2;
const sum = 10 + 12 + 33;
const difference = 50 - 10;
const product = 10 * 10;
const quotient = 100 / 10;

// Initialize a number before incrementing or decrementing it.
let myIncrement = 10;
myIncrement = myIncrement + 1; // 11
myIncrement++; // 12: another increment
let myDecrement = 10;
myDecrement = myDecrement - 1; // 9
myDecrement--; // 8: another decrement

const remainder = 44 % 10; // 4
const isEven = 44 % 2 === 0; // true

// Each pair below performs the operation twice.
let a = 100;
a = a + 40;
a += 40; // 180
a = a - 40;
a -= 40; // 100
a = a * 40;
a *= 40; // 160000
a = a / 40;
a /= 40; // 100

Creating Arrays

var array_name = [1, 2, 3]; 
console.log(array_name);

// Reassign this variable to a new empty array. Other references keep the old array. 
array_name = [];
console.log(array_name);    

// Creates an empty array
var empty_array = []; 

// Array of fruits 
var fruits = ["banana", "apple", "orange", "grape"];
console.log(fruits);
  
// Arrays can span multiple lines
var cars = [
  "Ford",
  "Tesla",
  "Volvo"
];
console.log(cars);

/* You can also create an array this way with the new keyword. The method above is preferred as it’s easier to read and avoids the special single-number behavior of new Array. This is just to show you another way of doing things that you might see */
var travel = new Array("Vietnam", "Canada", "Thailand", "Japan");
console.log(travel);

Accessing Array Elements

// Create 2 Arrays
var fruits = ["Banana", "Apple", "Orange", "Grape"];
var cars = ["Ford", "Tesla", "Volvo"];

// Stores the first element in the car array "Ford" in a variable.
var name = cars[0]; 
console.log(name); 

// Prints out Banana in the console.
console.log(fruits[0]);  

// Changing a value of an element in an array. 
// Arrays are mutable. Strings cannot be changed with bracket notation.
fruits[0] = "Water Melon";
console.log(fruits[0]);

Nested Arrays

// Nested Array / Multi Dimensional Array - An array inside an array
var multiDimensional = [   
   ["Universe 1", 34823], ["Universe 2", 19282]   
];
console.table(multiDimensional);
 
// Flatten a multidimensional array into one array
console.table(multiDimensional.flat(Infinity));
 
// Select a single value within a multidimensional array
var universeCoordinate = multiDimensional[0][1];  
console.log(universeCoordinate);

If Statements Syntax

const val = 8;
if (val > 10) {
// Value is greater than 10
}
else if (val < 5) {
// Value is smaller than 5
}
else {
// Value is between 5 and 10
}

Check to see if a variable is an array using .isArray()

var activities = ["Yoga", "Working", "Sports", "Reading"];
var car = "Ford";
if (Array.isArray(activities)) {
    console.log(activities + " Is an array!");
}
if (Array.isArray(car) != true) {
    console.log(car + " Is not an array!");
}

Switch Statements - Lets you know what day it is.

var day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  default:
    day = "Saturday";
}
console.log("Today is " + day);
document.write("Today is " + day);

Ternary Operator

const isAdult = true;
const message = isAdult ? "Adult" : "Minor";
console.log(message); // Adult

Random Velocity Direction

// Pick a velocity of either 100 or -100.
const velocity = 100 * (Math.random() > 0.5 ? 1 : -1);
console.log(velocity);

JavaScript Built In Functions

console.log(); // Writes out text to JavaScript Console 

Creating JavaScript Functions

// Defines the function
function myFunction(parameter1, parameter2) {
// code to execute
}
//Calls the function
myFunction(1,7);

String Variables In Javascript

//Function that doubles the input
function double(input) {
return input * 2;
}
console.log(double(2));  // console will read out number 4

Arrow Function With No Parameters

const horn = () => {  console.log("Toot")  };
horn();

document.getElementById("text_01").innerHTML = "<b>New Text!</b>";

document.getElementById("text_01").textContent = "New Text!";

var text = document.getElementById("text_01");
 text.textContent = "New Text!";

document.getElementById("text_01").style.color = "blue";

document.getElementById("main-header").style.borderBottom = 'solid 3px #000';

document.getElementById("myImage").src = "sad.jpg";

var items = document.getElementsByClassName('list-group-item');

// Outputs the whole collection of items with this class name to the console.
 console.log(items);
 //Outputs the second list item to CONSOLE. Starts counting for 0. 
 console.log(items[1]);

// Change text of the second list item,
 items[1].textContent = "Changed Text In List";

 // To change something about all items with that class name you need to use a loop.
 for (var i = 0; i < items.length; i++) {
 items[i].style.backgroundColor = "#f4f4f4";
 }

// Finds all <p>  tags and stores them in a variable 
var pTags = document.getElementsByTagName("p");

// Change the background of all <li> elements
var li = document.getElementsByTagName("li");

for (var i = 0; i < li.length; i++) {

     li[i].style.backgroundColor = "#f4f4f4";

}

// Run after the HTML has loaded. Each selector needs a matching element.
const pTagsIntro = document.querySelectorAll("p.intro");
const header = document.querySelector("#main-header");
if (header) header.style.borderBottom = "solid 4px #ccc";

const input = document.querySelector('input[type="text"]');
if (input) input.value = "Hello World";
const submit = document.querySelector('input[type="submit"]');
if (submit) submit.value = "SEND";

const lastItem = document.querySelector(".list-group-item:last-child");
if (lastItem) lastItem.style.color = "blue";
const secondItem = document.querySelector(".list-group-item:nth-child(2)");
if (secondItem) secondItem.style.color = "blue";

const titles = document.querySelectorAll("h2");
if (titles.length > 1) titles[1].textContent = "Hello";

// querySelectorAll returns a NodeList. Style each element, not the list.
const odd = document.querySelectorAll("li:nth-child(odd)");
const even = document.querySelectorAll("li:nth-child(even)");
odd.forEach(item => { item.style.backgroundColor = "#f4f4f4"; });
even.forEach(item => { item.style.backgroundColor = "#ffffff"; });

// #items selects the element whose id is "items".
const itemList = document.querySelector("#items");
if (itemList) {
    console.log(itemList.parentNode);
    console.log(itemList.parentElement);
    // parentNode can be any node; parentElement is an Element or null.
    if (itemList.parentElement) {
        itemList.parentElement.style.backgroundColor = "#f4f4f4";
        console.log(itemList.parentElement.parentElement);
    }
}

const itemList = document.querySelector("#items");
if (itemList && itemList.firstElementChild) {
    console.log(itemList.firstElementChild);
    itemList.firstElementChild.textContent = "Hello 1";
}
if (itemList && itemList.lastElementChild) {
    console.log(itemList.lastElementChild);
    itemList.lastElementChild.textContent = "Hello 5";
}

const itemList = document.querySelector("#items");
if (itemList) {
    console.log(itemList.nextElementSibling);
    console.log(itemList.previousElementSibling);
    if (itemList.previousElementSibling) {
        itemList.previousElementSibling.style.color = "green";
    }
}

const newDiv = document.createElement("div");
newDiv.className = "newDivClass";
newDiv.id = "div1";
newDiv.setAttribute("title", "New div");
newDiv.appendChild(document.createTextNode("Hello World!"));
newDiv.style.fontSize = "30px";
console.log(newDiv);

// Insert as the first child of the header's container, if it exists.
const container = document.querySelector("header .container");
if (container) container.insertBefore(newDiv, container.firstChild);

Delete DOM Elements

// Modern approach: remove the element itself.
const item = document.getElementById("item-to-delete");
if (item) {
    item.remove();
}

// Alternative approach: ask the parent to remove its child.
const anotherItem = document.getElementById("another-item");
if (anotherItem && anotherItem.parentNode) {
    anotherItem.parentNode.removeChild(anotherItem);
}

HTML Event Handler Examples

<!--Syntax Example-->
<element event="JavaScript Code To Execute"></element>
 
<!--On click runs some code-->
<button onclick="this.innerHTML = Date()">The time is?</button>
 
<!--On click runs a function-->
<button onclick="displayDate()">The time is it</button>
<p id="showdate"></p>
<script>
function displayDate() {
  document.getElementById("showdate").innerHTML = Date();
}
</script>

JavaScript Event Handlers - Button Click

// Grabs the Html Element by it's ID and stores in a variable.
var button = document.getElementById("button");

// Adds a click event to the button and calls a function
button.addEventListener("click", buttonClick);

// The action that happens when button is clicked
function buttonClick(){
  console.log("Button was clicked");
}

JavaScript Event Handlers - Different Types Of Mouse Events

var button = document.getElementById("button");
var box = document.getElementById("box");
 
button.addEventListener("click", runEvent);
button.addEventListener("dblclick", runEvent);   // Only fires on double click
button.addEventListener("mousedown", runEvent);  // as soon as you click down. No need to lift up
button.addEventListener("mouseup", runEvent);  // Nothing happens till mouse is released
 
//Only for that element itself not it's children
box.addEventListener("mouseenter", runEvent); // Mouse Enters Box
box.addEventListener("mouseleave", runEvent); // Mouse Leaves Box
 
// Includes children inside the box
box.addEventListener("mouseover", runEvent); // Mouse Enters Box
box.addEventListener("mouseout", runEvent); // Mouse Leaves Box
box.addEventListener("mousemove", runEvent); // Inside the box moving the mouse
 
function runEvent(e){
  // Sends data to console about event type
  console.log("EVENT TYPE:"+ e.type);
  // Changes the color of the box based on mouse position  
  box.style.backgroundColor = "rgb(" + e.offsetX + "," + e.offsetY + ",40)";  
}

JavaScript Event Handling - Event Bubbling

// EVENT BUBBLING
document.addEventListener('click', function (event) {
 
    if (event.target.classList.contains( 'className' ) ) {
            //  Event Action Here
    }
 
}, false);




// EVENT BUBBLING
document.addEventListener('click', listener, false); 
function listener(e) {
// Do Something
}

// EVENT CAPTURING
document.addEventListener('click', listener, true);

Inspect Variables In The Console

const price = 20;
const quantity = 3;
const total = price * quantity;

console.log({ price, quantity, total }); // total: 60
console.assert(total === 60, 'Check the total calculation');

Pause And Inspect A Function

function calculateTotal(price, quantity) {
    debugger; // Pause here when developer tools are open.
    return price * quantity;
}

console.log(calculateTotal(20, 3)); // 60

Object Literal Syntax - The simple way to define an object.

// Object is created with curly braces
const circle = {};

Object Literal Syntax Example

// Doesn't duplicate well. You have to copy the code.
// An object is a collection of key value pairs
const circle = {
    //Properties - Holds values
    radius: 1,
    location: {x:1, y:1},
    //Methods - Define logic & behavior
    draw: function() {       
        console.log("Draw Circle!");
    }
};
circle.draw();  //Call draw method

Factory Function - Using a function to create an object

// A factory returns an object; call it without "new".
function createCircle(radius) {
    return {
        radius: radius,
        draw() { console.log("Draw circle!"); }
    };
}
const anotherCircle = createCircle(1);
console.log(anotherCircle.radius); // 1
anotherCircle.draw();

Constructor Function - Using a function to create an object

// Constructor = function used to create an object
// Constructor Functions use this and new keywords
function Circle(radius) {
  this.radius = radius;
  this.draw = function() {console.log("Draw circle!");}
  // Shows what this is in console    This: Circle {}
  console.log("This:", this); 
}

// When we use a new operator to call a function it will create an object.
const anotherCircle = new Circle(1); 
anotherCircle.draw();

JavaScript - Local Storage Simple Example

// Set a local storage item
var siteName = 'My Site';
localStorage.setItem('siteName', siteName);
// First perameter is the name we will use to lookup data from local storage.
// Second parameter is the variable we are saving the data from

// Access a local storage item
var siteName_ls = localStorage.getItem('siteName');
console.log(siteName_ls);

//Remove item from local storage
localStorage.removeItem('siteName');

Storing objects in local storage with JSON

var siteData = {
  siteName: 'My Site',
  siteDescription: 'Best website in the World!!'
}
var localData;

// Objects need to be stored as a sting
// You can convert it to a JSON sting by using the JSON.stringify method
// JSON object are stings of text
localStorage.setItem('siteData', JSON.stringify(siteData));
//When we get a json item out of storage we have to convert it back to an object.
// We do this with JSON.parse method
localData = JSON.parse(  localStorage.getItem('siteData')  );

console.log(localData);   // JavaScript Object to console
console.log(  localStorage.getItem('siteData')  );  //JSON data

LOCAL STORAGE User input from a form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Storage Example</title>
</head>
<body>
<form id="ls-form">
    <label for="ls-name">Name:</label>
    <input type="text" id="ls-name"><br>
    <label for="ls-message">Message:</label><br>
    <textarea rows="5" cols="30" id="ls-message"></textarea><br>
    <button type="submit" id="ls-send">Save Data</button>
    <button type="button" id="ls-retrieve">Retrieve Data</button>
    <button type="button" id="ls-delete">Delete Data</button>
</form>
<p id="ls-data" role="status" style="white-space: pre-line;"></p>
<script>
(() => {
    const form = document.getElementById("ls-form");
    const nameInput = document.getElementById("ls-name");
    const messageInput = document.getElementById("ls-message");
    const output = document.getElementById("ls-data");
    const storageKey = "siteData";

    form.addEventListener("submit", event => {
        event.preventDefault(); // Save locally without reloading the page.
        try {
            const data = { name: nameInput.value, message: messageInput.value };
            localStorage.setItem(storageKey, JSON.stringify(data));
            output.textContent = "Data saved in this browser.";
        } catch (error) {
            output.textContent = "Unable to save: browser storage is unavailable or full.";
        }
    });

    document.getElementById("ls-retrieve").addEventListener("click", () => {
        try {
            const stored = localStorage.getItem(storageKey);
            if (stored === null) {
                output.textContent = "No data in local storage.";
                return;
            }
            const data = JSON.parse(stored);
            if (!data || typeof data.name !== "string" || typeof data.message !== "string") {
                throw new Error("Invalid stored data");
            }
            // textContent displays input as text rather than interpreting HTML.
            output.textContent = `Name: ${data.name}\nMessage: ${data.message}`;
        } catch (error) {
            output.textContent = "Unable to read the saved data.";
        }
    });

    document.getElementById("ls-delete").addEventListener("click", () => {
        try {
            localStorage.removeItem(storageKey);
            output.textContent = "Saved data deleted.";
        } catch (error) {
            output.textContent = "Unable to delete: browser storage is unavailable.";
        }
    });
})();
</script>
</body>
</html>

<canvas id="myCanvas"></canvas>

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000; background-color:white;">
Your browser does not support canvas.
</canvas>

var canvas = document.getElementById("myCanvas");

var canvas  = document.querySelector('canvas');

canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

window.addEventListener('resize', function(){
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 })

var ctx = canvas.getContext("2d");

ctx.fillStyle = "blue"; // Rectange Fill Color (Before)
 ctx.fillRect(100,100,50,50); // Draws a rectangle

ctx.strokeStyle = "red"; // Rectangle stroke Color (Before)
 ctx.lineWidth = 5; // Stroke Width
 ctx.strokeRect(200,200,50,50); // Draws a rectangle outline

ctx.beginPath(); // Starts a new path
 ctx.fillStyle = "blue"; // Stroke Color
 ctx.arc(200,200,30, 0, Math.PI*2, false); // Creates a circle
 ctx.fill(); // Fills the circle in with the color

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.arc(200, 200, 30, 0, Math.PI * 2);
ctx.stroke(); // Draw a red outline rather than filling the circle.

ctx.beginPath(); // Starts a new path
 ctx.moveTo(100, 100); // (x,y) start point of the line
 ctx.lineTo(200, 50); // (x,y) next end point
 ctx.lineTo(300, 150); // (x,y) next end point
 ctx.lineTo(400, 50); // (x,y) next end point
 ctx.strokeStyle = "red"; // Line Stroke Color
 ctx.lineCap = "round"; // Makes the end of the line round
 ctx.lineJoin = "round"; // Makes the joining of 2 lines round
 ctx.lineWidth = 5; // Stroke Width
 ctx.stroke(); // Adds the stroke to the line

ctx.font = "30px Arial";
ctx.textAlign = "center"; // Set alignment before drawing.
ctx.fillText("Hello", 150, 150);
ctx.font = "30px Comic Sans MS";
ctx.strokeText("World!", 280, 150);

function draw_image(x, y, src) {
    const image = new Image();
    // Register the handler before setting src.
    image.onload = function () { ctx.drawImage(image, x, y); };
    image.onerror = function () { console.error("Could not load image:", src); };
    image.src = src;
}
// Replace image.jpg with the URL of an image you have supplied.
draw_image(0, 0, "image.jpg");
draw_image(100, 100, "image.jpg");

function animate() {
 requestAnimationFrame(animate); // Function that creates an animation loop

// Add code that draws and animated objects

}

animate(); // Call animation loop

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>