Skip to content

Commit e9efee9

Browse files
bethrobsonbethrobson
committed
adding ES6 let vs var with closures
1 parent a51bfc1 commit e9efee9

File tree

2 files changed

+92
-0
lines changed

2 files changed

+92
-0
lines changed

‎extras/letWithClosures.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Let, scope, and closures</title>
5+
<meta charset="utf-8">
6+
<style>
7+
div {
8+
padding: 5px;
9+
margin: 5px;
10+
border: 1px solid black;
11+
background-color: lightgray;
12+
width: 100px;
13+
cursor: pointer;
14+
}
15+
</style>
16+
<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"
17+
type="text/javascript"></script>
18+
<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
19+
type="text/javascript"></script>
20+
<script>
21+
traceur.options.experimental = true;
22+
</script>
23+
<script type="module">
24+
window.onload = function() {
25+
var button = document.getElementById("button");
26+
button.onclick = function() {
27+
var body = document.querySelector("body");
28+
for (let i = 0; i < 3; i++) {
29+
var div = document.createElement("div");
30+
div.id = "div" + i;
31+
div.innerHTML = "This is div " + i;
32+
div.onclick = function() {
33+
console.log("You just clicked div " + i);
34+
};
35+
body.appendChild(div);
36+
}
37+
};
38+
};
39+
</script>
40+
</head>
41+
<body>
42+
<h1>let, scope, and closures</h1>
43+
<button id="button">click me</button>
44+
</body>
45+
</html>
46+

‎extras/varWithClosures.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Let, scope, and closures</title>
5+
<meta charset="utf-8">
6+
<style>
7+
div {
8+
padding: 5px;
9+
margin: 5px;
10+
border: 1px solid black;
11+
background-color: lightgray;
12+
width: 100px;
13+
cursor: pointer;
14+
}
15+
</style>
16+
<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"
17+
type="text/javascript"></script>
18+
<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
19+
type="text/javascript"></script>
20+
<script>
21+
traceur.options.experimental = true;
22+
</script>
23+
<script type="module">
24+
window.onload = function() {
25+
var button = document.getElementById("button");
26+
button.onclick = function() {
27+
var body = document.querySelector("body");
28+
for (var i = 0; i < 3; i++) {
29+
var div = document.createElement("div");
30+
div.id = "div" + i;
31+
div.innerHTML = "This is div " + i;
32+
div.onclick = function() {
33+
console.log("You just clicked div " + i);
34+
};
35+
body.appendChild(div);
36+
}
37+
};
38+
};
39+
</script>
40+
</head>
41+
<body>
42+
<h1>let, scope, and closures</h1>
43+
<button id="button">click me</button>
44+
</body>
45+
</html>
46+

0 commit comments

Comments
 (0)