Hope you did well on your exam! 🎉
If this site helped, please leave feedback, check out the project on GitHub, or follow me on GitHub.
F6: JavaScript 2 & AJAX code examples
Code examples from the course Google Drive for the JavaScript 2 & AJAX lecture. View the source and run live previews where available.
ES5 and ES6 Demo — string trim
11.html
HTML17 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var e = " Hello World ";6
alert("Before trim: '" + e + "'\nAfter trim: '" + e.trim() + "'");7
</script>8
</head>9
<body>10
11
<h2>ES5 and ES6 Demo</h2>12
13
14
15
16
</body>17
</html> ES5 and ES6 Demo — Array.isArray
12.html
HTML18 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var fruits = ["Banana", "Orange", "Apple", "Mango"];6
//var fruits =5;7
document.writeln(Array.isArray(fruits));8
</script>9
</head>10
<body>11
12
<h2>ES5 and ES6 Demo</h2>13
14
15
16
17
</body>18
</html> ES5 and ES6 Demo — forEach
13.html
HTML25 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
function myFunction(value)6
{7
txt = txt+ value;8
//console.log(txt);9
document.write(txt);10
}11
12
var txt ="";13
var numbers = [45,4,9,16,25];14
numbers.forEach(myFunction);15
</script>16
</head>17
<body>18
19
<h2>ES5 and ES6 Demo</h2>20
21
22
23
24
</body>25
</html> ES5 and ES6 Demo — map
14.html
HTML24 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
function myFunction(value) 6
{return value *2;}7
var numbers1 = [45, 4, 9, 16, 25];8
var numbers2 = numbers1.map(myFunction);9
document.writeln(numbers1);10
document.writeln("<br>");11
document.writeln(numbers2); 12
13
14
</script>15
</head>16
<body>17
18
<h2>ES5 and ES6 Demo</h2>19
20
21
22
23
</body>24
</html> ES5 and ES6 Demo — filter
15.html
HTML22 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var numbers = [45,4,9,16,25];6
var over18 = numbers.filter(myFunction);7
function myFunction(value)8
{return value >18;}9
document.writeln(over18)10
11
12
</script>13
</head>14
<body>15
16
<h2>ES5 and ES6 Demo</h2>17
18
19
20
21
</body>22
</html> ES5 and ES6 Demo — reduceRight
16.html
HTML22 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var numbers1 = [45,4,9,16,25];6
var sum = numbers1.reduceRight(myFunction);7
8
function myFunction(total, value,index, array) 9
{return total - value;}10
document.writeln(sum)11
12
</script>13
</head>14
<body>15
16
<h2>ES5 and ES6 Demo</h2>17
18
19
20
21
</body>22
</html> ES5 and ES6 Demo — every and some
17.html
HTML25 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var numbers = [45,4,9,16,25];6
//var allOver18 = numbers.every(myFunction);7
var someOver18 = numbers.some(myFunction);8
function myFunction(value, index, array) 9
{return value > 18; }10
11
//document.writeln(allOver18);12
document.writeln(someOver18)13
14
15
</script>16
</head>17
<body>18
19
<h2>ES5 and ES6 Demo</h2>20
21
22
23
24
</body>25
</html> ES5 and ES6 Demo — find
18.html
HTML22 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var numbers = [4,9,16,25,29];6
var first = numbers.find(myFunction);7
function myFunction(value, index, array) {8
return value > 18;9
}10
document.writeln(first);11
12
</script>13
</head>14
<body>15
16
<h2>ES5 and ES6 Demo</h2>17
18
19
20
21
</body>22
</html> ES5 and ES6 Demo — JSON.stringify
19.html
HTML19 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
var JSONobj = {name:"John", age:30, city:"New York"};6
var myJSONstring = JSON.stringify(JSONobj);7
document.writeln(myJSONstring);8
9
</script>10
</head>11
<body>12
13
<h2>ES5 and ES6 Demo</h2>14
15
16
17
18
</body>19
</html> ES5 and ES6 Demo — filter with arrow functions
20.html
HTML33 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
6
//ES57
var numbers1 = [45,4,9,16,25];8
var over18_es5 = numbers1.filter(myFunction);9
function myFunction(value) 10
{11
return value > 18;12
}13
document.writeln("over18_es5: " + over18_es5 + "<br>");14
15
16
17
//ES618
var numbers2 = [45,4,9,16,25];19
var over18_es6 = numbers2.filter((value)=>value>18);20
document.writeln("over18_es6: " + over18_es6 + "<br>");21
22
23
</script>24
</head>25
<body>26
27
<h2>ES5 and ES6 Demo</h2>28
29
30
31
32
</body>33
</html> ES5 and ES6 Demo — flatMap
22.html
HTML31 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
6
/* function sum(...args){7
let sum = 0;8
for (let arg of args) sum += arg;9
return sum;}10
let x = sum(4,9,16,25,29,100,66,77);*/11
12
let numbers=[1,2,3,4];13
let result = numbers.flatMap(x => [x, x * 2]);14
console.log(result);15
document.writeln(result);16
17
18
19
20
</script>21
</head>22
<body>23
24
<h2>ES5 and ES6 Demo</h2>25
<!--<div id="demo"><script>document.writeln(x)</script></div>-->26
27
28
29
30
</body>31
</html> ES5 and ES6 Demo — String.padStart
23.html
HTML33 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
6
//pad the String with 07
let product_cost = '1699'.padStart(7,0);8
document.writeln(product_cost);9
document.writeln("<br>");10
document.writeln(product_cost.length);11
document.writeln("<br>");12
13
//pad the String with blank spaces14
let product_cost1 = '1699'.padStart(7);15
document.writeln(product_cost1);16
document.writeln("<br>");17
document.writeln(product_cost1.length);18
document.writeln("<br>");19
20
21
22
</script>23
</head>24
<body>25
26
<h2>ES5 and ES6 Demo</h2>27
<div id="demo"></div>28
29
30
31
32
</body>33
</html> Promise pizza example — basic Promise
200.html
HTML47 lines
1
<!DOCTYPE html>2
<html>3
<head>4
</head>5
<body>6
7
<h2>Promise Pizza Example</h2>8
<div id="output"></div>9
10
<script>11
12
console.log("1. You ordered a pizza.");13
14
const output = document.getElementById("output");15
function log(message) {16
console.log(message);17
output.innerHTML += message + "<br>";18
}19
20
log("1. You ordered a pizza.");21
22
const pizzaOrder = new Promise((resolve, reject) => {23
// Simulate the pizza shop preparing the order (3 seconds)24
setTimeout(() => {25
let pizzaReady = false; // Change to false to simulate rejection26
27
if (pizzaReady) {28
resolve("3. Pizza is here! ");29
} else {30
reject("3. Sorry, no pizza today. ");31
}32
}, 3000); // 3-second delay simulates the "pending" state33
});34
35
log("2. While waiting, you watch a movie. ");36
37
pizzaOrder38
.then((message) => {39
log(message);40
})41
.catch((error) => {42
log(error);43
});44
</script>45
46
</body>47
</html>
ES5 and ES6 Demo — Promise producer and consumer
21.html
HTML32 lines
1
<!DOCTYPE html>2
<html>3
<head>4
<script>5
6
let myPromise = new Promise(function(myResolve, myReject) {7
8
//producing code-- main function that is taking time9
setTimeout(function() 10
{ 11
myResolve("I love You !!"); 12
},3000);});13
14
//consuming code-- function that will run after the main function15
myPromise.then(function(value) {16
document.getElementById("demo").innerHTML= value;17
});18
19
20
21
</script>22
</head>23
<body>24
25
<h2>ES5 and ES6 Demo</h2>26
<div id="demo"></div>27
28
29
30
31
</body>32
</html> Async/await pizza example
201.html
HTML54 lines
1
<!DOCTYPE html>2
<html>3
<head>4
</head>5
<body>6
7
<h2>Async/await pizza example</h2>8
<div id="output"></div>9
10
<script>11
function log(message) {12
console.log(message);13
document.getElementById("output").innerHTML += message + "<br>";14
}15
16
function orderPizza() {17
return new Promise((resolve, reject) => {18
setTimeout(() => {19
let pizzaReady = true;20
21
if (pizzaReady) {22
resolve("Pizza is ready!");23
} else {24
reject(" Pizza shop ran out of dough.");25
}26
}, 5000);27
});28
}29
30
async function dinnerTime() {31
log("1. You ordered a pizza.");32
33
let seconds = 0;34
const movieInterval = setInterval(() => {35
seconds++;36
log("Watching movie... " + seconds + " seconds passed");37
}, 1000);38
39
try {40
const pizza = await orderPizza();41
log("3. " + pizza);42
} catch (error) {43
log("3. " + error);44
}45
46
clearInterval(movieInterval);47
log("4. Now you're ready to eat! ");48
}49
50
dinnerTime();51
</script>52
53
</body>54
</html>