Core Building Blocks Scope this a special keyword used by a callback to reference its own property

function scoping - global & local obj.celebrate_birthday = function() {

variables Hoisting - declaring variable before defining will output undefined instead of not this.age++;
var a = 5; // for storing a number in a variable defined console.log(this.name + " is now " + this.age + " years old");
var b = "hello world"; //for storing a string in a variable var whoamI; }
var c = [1,3,5,7,8]; //for storing an array in a variable console.log ( whoamI );
whoamI = 5; Event Listeners
if/else HTML
if( ...condition... ) { ES6 <button id='myBtn'>My Button</button>
// codes that should be executed if the condition is true let & const <p id='demo'>...</p>
} block-scoping Javascript
else if( ...condition... ) { document.getElementById("myBtn").addEventListener("click",
// codes that should be executed if the second condition is true Callbacks function() {
} store a function in a variable document.getElementById("demo").innerHTML = "Hello World";
else { let c = function(name = "Michael") { });
... console.log('my name is', name); other functions in getting an element aside from "id" (can be also by "class", or
} return name.length; the "tag" itself)
}
for loops console.log( c("John") ); Main Events
for(var i=0; i<10; i++) { change - an HTML element has been changed
console.log(i); //prints a number from 0 to 9 passing a function to a function - function that is passed as an argument for the click - the user clicks an HTML element
} function mouseover - the user moves the mouse over an HTML element
const sum = function(a, b) { mouseout - the user moves the mouse out/away from an HTML element
functions return a+b; keydown - the user presses a keyboard key
function abc(x, y, z) { } load - the browser finishes loading the page
... function performOperation(num1, num2, operation){ submit - a form is submitted
return x+y+z; let result = operation(num1, num2); https://www.w3schools.com/jsref/dom_obj_event.asp
} console.log('result is', result);
return result; Using Inspect Element, you can also see which html elements have event
EcmaScript - scripting language } listeners attached. For example, see
performOperation(3, 5, sum); https://umaar.com/dev-tips/24-view-event-listeners/
Objects (associative array)
key value pair having a function return a function querySelector is used to grab the first specific element specified, only returns the
var teacher = { name: 'Michael', city: 'Seattle', state: 'Washington' }; function abc(a, b){ first specific element
console.log( teacher.name ); return function() { document.querySelector(CSS selectors);
teacher.city = 'Bellevue'; console.log('hello'); document.querySelector("h1"); //gets the first <h1> element in the
console.log( teacher.city ); //this will now log Bellevue return a+b+10; document
teacher.favorite_sport = "soccer"; } document.querySelector("p.example"); //gets the first <p> element in
console.log(teacher); //this would now log all the key values storied in } the document with class 'example'
the variable teacher let result = abc(5, 10); document.querySelector("#title").innerHTML = "New Title"; //gets the
let z = result(); element with an id of title and updates the HTML
array of objects console.log(z);
var students = [ { name: "John", age: 25 }, querySelectorAll grab ALL elements specified by the CSS selectors
{ name: "KB", age: 21 }, note that you can also attach a callback function to a key let x = document.querySelectorAll("p.red"); // gets all <p> elements in
{ name: "Jomar", age: 25 } ]; var obj = { the document with class red
for(var i=0; i<students.length; i++) { name: 'Michael', for(let i=0; i<x.length; i++){
console.log( "Student Name: " + students[i].name + " - Age: " + age: 39, x[i].innerHTML = "hello"; //updates each innerHTML
students[i].age); hello: function() { }
} console.log('Michael says hello!'); //
for(student of students) { } let y = document.querySelectorAll("h2, p, img"); //gets all the <h2>, <p>,
console.log( "Student Name: " + student.name + " - Age: " + }; and <img> elements
student.age); obj.hello(); // this executes the function inside the hello property and for(let i=0; i<y.length; i++){
} logs 'Michael says hello!' y[i].style.backgroundColor = "blue"; //updates each
style.backgroundColor to be blue