IS231: Web Technology
JavaScript-3
By: Neamat El Tazi
References
- W3shools.com
2 Web Technology Neamat El Tazi
ECMAScript 2009 – ES5
ECMAScript 2009, also known as ES5, was the
first major revision to JavaScript.
3 Web Technology Neamat El Tazi
ES5 Most Important Features
"use strict"
String.trim()
Array.isArray()
Array.forEach()
Array.map()
Array.filter()
Array.reduce()
Array.reduceRight()
Array.every()
Array.some()
Array.indexOf()
Array.lastIndexOf()
JSON.parse()
JSON.stringify()
Date.now()
Property Getters and Setters
New Object Property Methods
4 Web Technology Neamat El Tazi
Use Strict Directive
The "use strict" directive was new in ES5.
It is not a statement, but a literal expression, ignored by
earlier versions of JavaScript.
The purpose of "use strict" is to indicate that the code
should be executed in "strict mode".
With strict mode, you can not, for example, use
undeclared variables.
5 Web Technology Neamat El Tazi
String.trim()
String.trim() removes whitespace from both sides of a
string.
Check Demo 11
6 Web Technology Neamat El Tazi
Array.isArray()
The isArray() method checks whether an object is an
array.
var fruits =
["Banana", "Orange", "Apple", "Mango"];
console.log(Array.isArray(fruits));
Check Demo 12
7 Web Technology Neamat El Tazi
Array.forEach()
The forEach() method calls a function once for each array element.
function myFunction(value) {
txt = txt + value + "<br>";
console.log(txt);
}
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
Check Demo 13
8 Web Technology Neamat El Tazi
Array.map()
The map() method creates a new array by performing a function on each
array element.
The map() method does not execute the function for array elements
without values.
The map() method does not change the original array.
This example multiplies each array value by 2:
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
Check Demo 14
9 Web Technology Neamat El Tazi
Array.filter()
The filter() method creates a new array
with array elements that passes a test.
This example creates a new array from elements
with a value larger than 18:
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
###check Arrow functions in ES6 .. Coming ☺
10 Web Technology Neamat El Tazi
Array.reduce()
The reduce() method runs a function on each array element
to produce (reduce it to) a single value.
The reduce() method works from left-to-right in the array
This example finds the sum of all numbers in an array:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
//Total here represents the initial value or the previously returned value
Check Demo 16
11 Web Technology Neamat El Tazi
Array.reduceRight()
The reduceRight() method runs a function on each array
element to produce (reduce it to) a single value.
The reduceRight() works from right-to-left in the array.
This example finds the sum of all numbers in an
array:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value, index, array)
{
return total + value;
}
12 Web Technology Neamat El Tazi
Array.every()
The every() method check if all array values pass a test.
This example check if all array values are larger than 18:
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Check Demo 18
13 Web Technology Neamat El Tazi
Array.some()
The some() method check if some array values pass a test.
This example check if some array values are larger than 18:
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Check Demo 18
14 Web Technology Neamat El Tazi
Array.indexOf()
The indexOf() method searches an array for an element
value and returns its position.
Note: The first item has position 0, the second item has
position 1, and so on.
var fruits =
["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
15 Web Technology Neamat El Tazi
Array.lastIndexOf()
Array.lastIndexOf() is the same as Array.indexOf(), but
returns the position of the last occurrence of the
specified element.
var fruits =
["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
16 Web Technology Neamat El Tazi
Array.find()
The find() method returns the value of the first array element
that passes a test function.
This example finds (returns the value of) the first element that
is larger than 18:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Check Demo 18
17 Web Technology Neamat El Tazi
JSON.stringify() and JSON.parse()
A common use of JSON is to send data to a web
server.
When sending data to a web server, the data has
to be a string.
Imagine we have this object in JavaScript:
var obj = {name:"John", age:30, city:"New York"};
Use the JavaScript function JSON.stringify() to
convert it into a string.
var myJSON = JSON.stringify(obj);
18 Web Technology Neamat El Tazi
Date.now()
Date.now() returns the number of milliseconds since
zero date (January 1. 1970 00:00:00 UTC).
var timInMSs = Date.now();
19 Web Technology Neamat El Tazi
Property Getters and Setters
ES5 lets you define object methods with a syntax
that looks like getting or setting a property.
This example creates a getter for a property
called fullName:
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
20 Web Technology Neamat El Tazi
New Object Property Methods
Object.defineProperty() is a new Object method in ES5.
// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
// Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
21 Web Technology Neamat El Tazi
Property Access on Strings
The charAt() method returns the character at a specified
index (position) in a string:
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5 allows property access on strings:
var str = "HELLO WORLD";
str[0]; // returns H
22 Web Technology Neamat El Tazi
Trailing Commas
ES5 allows trailing commas in object and array
definitions:
person = {
firstName: "John",
lastName: " Doe",
age: 46,
}
Note: JSON does not allow trailing commas.
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
23 Web Technology Neamat El Tazi
Strings Over Multiple Lines
ES5 allows string literals over multiple lines if
escaped with a backslash:
"Hello \
Dolly!";
A safer way to break up a string literal, is to use
string addition:
"Hello " +
"Dolly!";
24 Web Technology Neamat El Tazi
Reserved Words as Property Names
ES5 allows reserved words as property
names:
var obj = {name: "John", new: "yes"}
25 Web Technology Neamat El Tazi
