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