HTML events are “things” that happen to HTML elements.
When JavaScript is used in HTML pages, JavaScript can “react” on these events.
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
Often, when events happen, you may want to do something. Continue reading JavaScript Events
Sometimes we need to create many objects of the same type.
To create an object type we use an object constructor function.
It is considered good practice to name constructor functions with an upper-case first letter.
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Displaying a JavaScript object will output [object Object].
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
Object methods are actions that can be performed on objects.
A method is a function definition stored as a property value.
| Property | Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + ” ” + this.lastName;} |
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
In the example above, this refers to the person object :
this.firstName means the firstName property of person. Continue reading JavaScript Object Methods
Properties are the most important part of JavaScript objects.
Properties can be changed, added, deleted, and some are read only.
The syntax for accessing the property of an object is:
// objectName.property let age = person.age; or //objectName["property"] let age = person["age"]; or //objectName[expression] let age = person[x];
person.firstname + " is " + person.age + " years old."; person["firstname"] + " is " + person["age"] + " years old."; let x = "firstname"; let y = "age"; person[x] + " is " + person[y] + " years old.";
A real life car has properties like weight and color:
car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.
Car objects have the same properties, but the values differ from car to car.
A real life car has methods like start and stop:
car.start(), car.drive(), car.brake(), car.stop().
Car objects have the same methods, but the methods are performed at different times. Continue reading JavaScript Objects
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when “something” invokes it (calls it).
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). Continue reading JavaScript Functions
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
The object data type can contain both built-in objects, and user defined objects:
Built-in object types can be:
objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object:
const date = new Date("2022-03-25");
Assignment operators assign values to JavaScript variables.
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x – y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| **= | x **= y | x = x ** y |
Arithmetic operators perform arithmetic on numbers (literals or variables).
| Operator | Description |
|---|---|
| + | Addition |
| – | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Remainder) |
| ++ | Increment |
| — | Decrement |