2. var links = document.querySelectorAll(“a”);
for (var i = 0; i < links.length; i++)
{
links[i].onclick = function(){alert(i);};
}
Warmup- what’s wrong with this code
3. var links = document.querySelectorAll(“a”);
for (var i = 0; i < links.length; i++)
{
var clickFunc = function(j) {
links[j].onclick = function(){alert(j);};
}(i);
}
Warmup- fix the wrong code (v5)
4. var links = document.querySelectorAll("a");
for (var i = 0; i < links.length; i++)
{
let j = i;
links[j].onclick = function(){alert(j);};
}
Fix the code (v6)
6. var firstName = ‘Ran’;
var lastName = ‘Wahle’;
//ES5
var person = {firstName: firstName, lastName: lastName};
//ES6
var person = {firstName, lastName};
Syntactic sugars: Shorthand objects
8. var phoneParts = /^(d{3})-(d{2})-(d{7})$/.exec("972-54-
3050897");
var countryCode = phoneParts[0];
var areaCode = phoneParts[1];
var local = phoneParts[2];
console.log("countryCode", countryCode);
console.log("areaCode", areaCode);
console.log("local", local);
Desctructure: extract from array
9. var [,countryCode, areaCode, local] = /^(d{3})-(d{2})-
(d{7})$/.exec("972-54-3050897");
console.log("countryCode", countryCode);
console.log("areaCode", areaCode);
console.log("local", local);
Destructure of Array
10. var family= { father: {firstName: 'Dan', lastName: 'Wahle'} ,
mother: {firstName: 'Nira', lastName: 'Wahle'},
children: [
{firstName: 'Ran', lastName: 'Wahle'},
{firstName: 'Ayala', lastName: 'Fridman'},
{firstName: 'Tamar',lastName: 'Wahle'},
{firstName: 'Yair', lastName: 'Wahle'},
{firstName: 'Giyora', lastName: 'Wahle'},
{firstName: 'Amnon', lastName: 'Wahle'}
] }
//Query the first name of the family’s oldest child
var {'children': [{'firstName': name}]} = family;
console.log(name)
Nested objects destructure
14. var promise = new Promise(
function(resolve, reject)
{
var request = new XMLHttpRequest();
request.open('GET', ‘/', true);
request.onreadystatechange = () =>
{resolve(request.response);
};
request.send();
}
).then(result =>
{console.log("Result", result, "Promise", promise);},
error =>
{console.error("Promise error", error);});
Promises (no q.js library involved)
15. var numbers = [1,2,3,4,5,6];
var squares = [x*x for (x of numbers)];
//query the array
var evens = [number for (number of numbers)
if (number % 2 === 0)]
console.log(numbers, squares, evens);
//output
[1, 2, 3, 4, 5, 6] [1, 4, 9, 16, 25, 36] [2, 4, 6]
Build array from another array
16. class Vehicle {
constructor( name, year ) {
this.name = name;
this.year = year;
}
summary() {
return "This vehicle's name is " + this.name + " and it
was manufactured in " + this.year;
}
}
var myCar = new Vehicle(‘Susita’, 1975);
Classes
Example from Daniel Struk’s blog http://dstrunk.com/ecmascript-6-features-classes/
17. class SemiTruck extends Vehicle {
constructor( x, y ) {
super( x, y );
this.wheels = 18;
}
}
Inherritence
Example from Daniel Struk’s blog http://dstrunk.com/ecmascript-6-features-classes/
19. Modules
AMD implementation without libraries
No need to wrap an entire code in a function
Export
var innerResult = 0;
var addition = function(number)
{
console.log(typeof number, typeof innerResult);
innerResult = innerResult + number;
if (isNaN(innerResult))
{
innerResult = 0;
}
return innerResult;
};
//Export
export {addition};
Import
import {addition} from 'calculator';
document.querySelector('#btnAdd').onclick = function()
{
var number =
parseInt(document.querySelector('#txtNumber').value);
document.querySelector('#spnResult').innerText =
addition(number);
}
22. ECMAScript 6 has many features
Many of them are already implemented
in various libraries
Its standards are still in process
Many platforms not yet supports it
Summary