adding ES6 let vs var with closures

covenz · Mar 25, 2015 · e9efee9 · e9efee9
1 parent a51bfc1
commit e9efee9
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/extras/letWithClosures.html b/extras/letWithClosures.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+<title>Let, scope, and closures</title>
+<meta charset="utf-8">
+<style>
+div {
+	padding: 5px;
+	margin: 5px;
+	border: 1px solid black;
+	background-color: lightgray;
+	width: 100px;
+	cursor: pointer;
+}
+</style>
+<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js" 
+	type="text/javascript"></script>
+<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
+	type="text/javascript"></script>
+<script>
+traceur.options.experimental = true;
+</script>
+<script type="module">
+window.onload = function() {
+	var button = document.getElementById("button");
+	button.onclick = function() {
+		var body = document.querySelector("body");
+		for (let i = 0; i < 3; i++) {
+			var div = document.createElement("div");
+			div.id = "div" + i;
+			div.innerHTML = "This is div " + i;
+			div.onclick = function() {
+				console.log("You just clicked div " + i);
+			};
+			body.appendChild(div);
+		}
+	};
+};
+</script>
+</head>
+<body>
+<h1>let, scope, and closures</h1>
+<button id="button">click me</button>
+</body>
+</html>
+
diff --git a/extras/varWithClosures.html b/extras/varWithClosures.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+<title>Let, scope, and closures</title>
+<meta charset="utf-8">
+<style>
+div {
+	padding: 5px;
+	margin: 5px;
+	border: 1px solid black;
+	background-color: lightgray;
+	width: 100px;
+	cursor: pointer;
+}
+</style>
+<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js" 
+	type="text/javascript"></script>
+<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
+	type="text/javascript"></script>
+<script>
+traceur.options.experimental = true;
+</script>
+<script type="module">
+window.onload = function() {
+	var button = document.getElementById("button");
+	button.onclick = function() {
+		var body = document.querySelector("body");
+		for (var i = 0; i < 3; i++) {
+			var div = document.createElement("div");
+			div.id = "div" + i;
+			div.innerHTML = "This is div " + i;
+			div.onclick = function() {
+				console.log("You just clicked div " + i);
+			};
+			body.appendChild(div);
+		}
+	};
+};
+</script>
+</head>
+<body>
+<h1>let, scope, and closures</h1>
+<button id="button">click me</button>
+</body>
+</html>
+