Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

JavaScript 3

The document discusses new features introduced in ECMAScript 5 (ES5) for JavaScript, including strict mode, methods for strings and arrays, JSON methods, date objects, object property definitions, and more. It provides examples and explanations of each new feature such as String.trim(), Array.forEach(), JSON.stringify(), Date.now(), and Object.defineProperty().

Uploaded by

ski superhuman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

JavaScript 3

The document discusses new features introduced in ECMAScript 5 (ES5) for JavaScript, including strict mode, methods for strings and arrays, JSON methods, date objects, object property definitions, and more. It provides examples and explanations of each new feature such as String.trim(), Array.forEach(), JSON.stringify(), Date.now(), and Object.defineProperty().

Uploaded by

ski superhuman
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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

You might also like