HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted :
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
The function can be called when the form is submitted : Continue reading JavaScript Forms
The HTML DOM allows JavaScript to change the content of HTML elements.
The easiest way to modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax :
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element : Continue reading JavaScript HTML DOM – Changing HTML
This page teaches you how to find and access HTML elements in an HTML page.
Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are several ways to do this:
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