The HTML DOM document object is the owner of all other objects in your web page.
The document object represents your web page.
If you want to access any element in an HTML page, you always start with accessing the document object.
Below are some examples of how you can use the document object to access and manipulate HTML. Continue reading JavaScript HTML DOM Document
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or change.
The HTML DOM can be accessed with JavaScript (and with other programming languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of each object.
A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element). Continue reading JavaScript – HTML DOM Methods
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects: Continue reading JavaScript HTML DOM
“async and await make promises easier to write”
async makes a function return a Promise
await makes a function wait for a Promise
The keyword async before a function makes the function return a promise:
async function myFunction() {
return "Hello";
}
Is the same as:
function myFunction() {
return Promise.resolve("Hello");
}
Here is how to use the Promise : Continue reading JavaScript Async
“I Promise a Result!”
“Producing code” is code that can take some time
“Consuming code” is code that must wait for the result
A Promise is an Object that links Producing code and Consuming code
A Promise contains both the producing code and calls to the consuming code:
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
“I will finish later!”
Functions running in parallel with other functions are called asynchronous
A good example is JavaScript setTimeout()
The examples used in the previous chapter, was very simplified.
The purpose of the examples was to demonstrate the syntax of callback functions :
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
In the example above, myDisplayer is the name of a function. Continue reading Asynchronous JavaScript
“I will call back later!”
A callback is a function passed as an argument to another function
This technique allows a function to call another function
A callback function can run after another function has finished
Static class methods are defined on the class itself.
You cannot call a static method on an object, only on an object class.
class Car {
constructor(name) {
this.name = name;
}
static hello() {
return "Hello!!";
}
}
const myCar = new Car("Ford");
// You can call 'hello()' on the Car Class:
document.getElementById("demo").innerHTML = Car.hello();
// But NOT on a Car Object:
// document.getElementById("demo").innerHTML = myCar.hello();
// this will raise an error.
To create a class inheritance, use the extends keyword.
A class created with a class inheritance inherits all the methods from another class :
Create a class named “Model” which will inherit the methods from the “Car” class :
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();
The super() method refers to the parent class. Continue reading JavaScript Class Inheritance
ECMAScript 2015, also known as ES6, introduced JavaScript Classes.
JavaScript Classes are templates for JavaScript Objects.
Use the keyword class to create a class.
Always add a method named constructor():
class ClassName {
constructor() { ... }
}
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
The example above creates a class named “Car”. Continue reading JavaScript Classes