diff --git a/lectureCodeExamples/Week3/JavaScript5Code/ArrayReduce.html b/lectureCodeExamples/Week3/JavaScript5Code/ArrayReduce.html
new file mode 100755
index 0000000000000000000000000000000000000000..ddb1beef197c0345b11a6da49047b31c80188f05
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/ArrayReduce.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Array reduce method Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ var products = [{
+ name: "Licensed Metal Fish",
+ price: 694.00
+ },
+ {
+ name: "Tasty Rubber Chicken",
+ price: 345.00
+ },
+ {
+ name: "Handmade Fresh Chicken",
+ price: 984.00
+ },
+ {
+ name: "Ergonomic Frozen Computer",
+ price: 838.00
+ },
+ {
+ name: "Tasty Cotton Tuna",
+ price: 914.00
+ },
+ {
+ name: "Fantastic Steel Mouse",
+ price: 93.00
+ },
+ {
+ name: "Practical Rubber Keyboard",
+ price: 319.00
+ },
+ {
+ name: "Incredible Wooden Hat",
+ price: 930.00
+ },
+ {
+ name: "Fantastic Metal Soap",
+ price: 351.00
+ },
+ {
+ name: "Ergonomic Concrete Mouse",
+ price: 829.00
+ }
+ ];
+
+ const str = ['CMSC', '389N'];
+ console.log(...str);
+
+
+ const reducer1 = (priceSum, p, idx, arr) => priceSum += Number(p.price);
+ document.writeln(products.reduce(reducer1, 0));
+
+ const reducer2 = function (priceSum, p) {
+ return priceSum += Number(p.price);
+ }
+ document.writeln(products.reduce(reducer2, 0));
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/README.txt b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/README.txt
new file mode 100755
index 0000000000000000000000000000000000000000..257a9ff5acfa17324aae8d6c51925f64a659fe16
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/README.txt
@@ -0,0 +1,2 @@
+For this examples, we have also provided the .php files that
+a web server will use to process the requests.
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.css b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.css
new file mode 100755
index 0000000000000000000000000000000000000000..4a40e2245efb39c2e0d08271eeec16fe96e27008
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.css
@@ -0,0 +1,12 @@
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+fieldset {
+ border-radius: .75em;
+}
+
+input {
+ border-radius: .75em;
+}
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.html b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.html
new file mode 100755
index 0000000000000000000000000000000000000000..16b23d13365c94d816bd07c831060f833dcd0b0b
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Form Validation</title>
+ <link rel="stylesheet" href="formValidation.css" />
+ <script src="formValidation.js"></script>
+</head>
+
+<body>
+ <form id="myForm" action="paymentValidation.php" method="get">
+ <fieldset>
+ <legend>
+ <em>Customer Info</em>
+ </legend>
+ <strong>Name:
+ </strong><input id="name" type="text" name="name" value="Mary" />
+
+ <strong>Account Number:
+ </strong><input id="account" type="text" name="account" /><br /><br />
+
+ <strong>Payment:
+ </strong><input id="payment" type="text" name="payment" /><br /><br />
+
+ <strong>Receive News:
+ </strong><input type="checkbox" name="news" id="news" checked value="YesReceiveNews" /><br /><br />
+
+ <strong>Payment Plan:</strong>
+ <input type="radio" name="plan" id="oneYearPlan" value="OneYearPaymentPlan" checked />
+ <label for="oneYearPlan">One-Year</label>
+ <input type="radio" name="plan" id="twoYearPlan" value="TwoYearPaymentPlan" />
+ <label for="twoYearPlan">Two-Year</label><br /><br />
+
+ <strong>Location:</strong>
+ <select name="location">
+ <option value="In-State">In-State</option>
+ <option value="Out-of-State" selected="selected">Out-of-State</option>
+ </select>
+
+ <br /><br />
+ <input type="reset" />
+ <input type="submit" value="Submit Data" />
+ </fieldset>
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.js b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.js
new file mode 100755
index 0000000000000000000000000000000000000000..9f7b01be6d2af110850b7ea6baa6b31f999f2674
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/formValidation.js
@@ -0,0 +1,38 @@
+/* IMPORTANT: Setting the function to call when submit is selected */
+window.onsubmit = validateForm;
+
+/* This function must return true or false
+ If true the data will be sent to the server.
+ If false the data will not be sent to the server */
+
+function validateForm() {
+ /* Retrieving the values */
+ let name = document.getElementById("name").value;
+ let account = document.getElementById("account").value;
+ let payment = document.getElementById("payment").value;
+
+ /* Validating numeric values */
+ let invalidMessages = "";
+ if (String(parseInt(account)) !== account) {
+ invalidMessages += "Invalid account number provided.\n";
+ }
+ if (Number(payment) <= 0) {
+ invalidMessages += "Invalid payment amount provided.";
+ }
+
+ if (invalidMessages !== "") {
+ alert(invalidMessages);
+ return false;
+ } else {
+ let valuesProvided = "Do you want to submit the following payment?\n";
+ valuesProvided += "Name: " + name + "\n";
+ valuesProvided += "Account: " + account + "\n";
+ valuesProvided += "Payment: " + payment + "\n";
+ /* We could write the following as return window.confirm(valuesProvided) */
+ if (window.confirm(valuesProvided)) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+}
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/paymentValidation.php b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/paymentValidation.php
new file mode 100755
index 0000000000000000000000000000000000000000..da9f10687715cabee4c5081e484aef4d994ced4b
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/FormValidation/paymentValidation.php
@@ -0,0 +1,9 @@
+<?php
+ print "<h1>Payment Confirmation for {$_GET['name']}</h1>";
+ print "<p>";
+ print "A payment of \${$_GET['payment']} has been received for account {$_GET['account']}";
+ print "</p>";
+ print "Receive news: {$_GET['news']} <br />";
+ print "Payment Plan: {$_GET['plan']} <br />";
+ print "Location: {$_GET['location']}";
+?>
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/IIfe.html b/lectureCodeExamples/Week3/JavaScript5Code/IIfe.html
new file mode 100755
index 0000000000000000000000000000000000000000..bf56fbf35dd92f1fead32102d01477b3141293c3
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/IIfe.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS IIFE Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ /* myStar variable will be attached to windows global object */
+ var myStar = "Albireo";
+ document.writeln(`myStar Value: ${window.myStar}<br>`);
+
+ /* communityStar variable will not be attached to windows global object */
+ let communityStar = "Algol";
+ document.writeln(`communityStar Value: ${window.communityStar}<br>`);
+
+ (function() {
+ var hiddenStar = "HiddenStar";
+ })();
+ document.writeln("Printing value of hiddenStar (see console)<br>");
+ console.log(hiddenStar);
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/Map.html b/lectureCodeExamples/Week3/JavaScript5Code/Map.html
new file mode 100755
index 0000000000000000000000000000000000000000..9e0ec45dc70c9ba14bb954c215e31e3dbb6bbdbc
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/Map.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Map Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ function printMap(map) {
+ document.writeln("<strong>Map size: " + map.size + "</strong><br>");
+ document.writeln("<strong>Map Contents</strong><br>");
+ for (let entry of map) {
+ document.writeln(entry + "<br>");
+ }
+ }
+
+ let map = new Map();
+ map.set("Mike", 88);
+ map.set("Rose", 90);
+ map.set("Kelly", 100);
+ printMap(map);
+ document.writeln("<br>Value for Rose: " + map.get("Rose") + "<br>");
+ document.writeln("Value for NotInMap: " + map.get("NotInMap") + "<br>");
+ document.writeln("map.has(\"Mike\"): " + map.has("Mike") + "<br><hr>");
+
+
+
+ let firstDeletion = map.delete("Rose");
+ document.writeln("<br>First deletion (Rose): " + firstDeletion + "<br>");
+ let secondDeletion = map.delete("NotInMap");
+ document.writeln("Second deletion: " + secondDeletion + "<br>");
+ printMap(map);
+ document.writeln("<hr>");
+
+
+
+ document.writeln("<br>Using keys()<br>");
+ for (let key of map.keys()) {
+ document.writeln(key + "<br>");
+ }
+ document.writeln("<hr>");
+
+
+
+ document.writeln("<br>Using values()<br>");
+ for (let value of map.values()) {
+ document.writeln(value + "<br>");
+ }
+ document.writeln("<hr>");
+
+
+
+ document.writeln("<br>Using map.entries<br>");
+ for (let entry of map.entries()) {
+ document.writeln(entry[0] + ", " + entry[1] + "<br>");
+ }
+ document.writeln("<hr>");
+
+
+
+ document.writeln("<br>Using map.entries(2)<br>");
+ for (let [key, value] of map.entries()) {
+ document.writeln(key + ", " + value + "<br>");
+ }
+ document.writeln("<hr>");
+
+
+
+ document.writeln("<br>Another Iteration<br>");
+ for (let [key, value] of map) {
+ document.writeln(key + ", " + value + "<br>");
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/Set.html b/lectureCodeExamples/Week3/JavaScript5Code/Set.html
new file mode 100755
index 0000000000000000000000000000000000000000..535818e2b3849d798be07a39176a08c940bac4f1
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/Set.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Set Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ /* Notice the use of const instead of let */
+ const mySet = new Set();
+ const student1 = {
+ name: "Mike",
+ id: 10
+ };
+ const student2 = {
+ name: "Rose",
+ id: 20
+ };
+ document.writeln("Adding entries to set<br><br>");
+ mySet.add(150);
+ mySet.add(student1).add(student2); /* Add is chainable */
+ document.writeln("Set size: " + mySet.size + "<br>");
+ document.writeln("Set Entries<br>");
+ for (let entry of mySet) {
+ document.writeln(entry + "<br>");
+ }
+ document.writeln("150 part of the set? " + mySet.has(150) + "<br><hr>");
+
+
+ document.writeln("<br>After deleting an entry<br><br>");
+ mySet.delete(student1);
+ for (let entry of mySet) {
+ document.writeln(entry + "<br>");
+ }
+ document.writeln("<hr>");
+
+
+ document.writeln("<br>After clearing the set<br>");
+ mySet.clear();
+ for (let entry of mySet) {
+ document.writeln(entry + "<br>");
+ }
+ document.writeln("<hr>");
+
+
+ document.writeln("<br>Set based on array: ");
+ let arr = ["C", "JavaScript", "Pascal"];
+ document.writeln(arr + "<br>");
+ let setFromArray = new Set(arr);
+ document.writeln("Iterating over set<br>");
+ for (let value of setFromArray.values()) {
+ document.writeln(value + "<br>");
+ }
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript5Code/WeakMap.html b/lectureCodeExamples/Week3/JavaScript5Code/WeakMap.html
new file mode 100755
index 0000000000000000000000000000000000000000..80d2e29b402a056596a749ee122bc73b17d62b2e
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript5Code/WeakMap.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS WeakMap</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ function TerpObject() {
+ this.data = new Array(300000);
+ }
+
+ window.obj = new TerpObject();
+ let map = new Map(); /* Using Map. Change to WeakMap to see memory effect */
+ // let map = new WeakMap(); /* Using WeakMap */
+ map.set(window.obj, 1);
+ delete window.obj;
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/ConstructorFunction.html b/lectureCodeExamples/Week3/JavaScript6Code/ConstructorFunction.html
new file mode 100755
index 0000000000000000000000000000000000000000..c928e0c9a615257a4f4178cf337862e775987617
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/ConstructorFunction.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<html>
+
+<body>
+ <script>
+ main();
+
+ /* Constructor function */
+ function Computer(modelIn, memoryIn) {
+ this.model = modelIn;
+ this.memory = memoryIn;
+ this.getMemory = function () {
+ return this.memory; /* We need this.memory */
+ };
+ this.setMemory = function (memoryValue) {
+ this.memory = memoryValue;
+ }
+ }
+
+ function main() {
+ Computer("Mac", 100); /* Not using new; window is the conext object */
+ document.writeln("window.model: " + window.model + "<br>");
+ document.writeln("window.memory: " + window.memory + "<br>");
+
+ let comp1 = new Computer("PC", 30);
+ document.writeln("Comp1 model: " + comp1.model + "<br>");
+ document.writeln("Comp1 memory: " + comp1.getMemory() + "<br>");
+ comp1.setMemory(100);
+ document.writeln("Comp1 memory: " + comp1.memory + "<br>");
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/ConstructorPattern.html b/lectureCodeExamples/Week3/JavaScript6Code/ConstructorPattern.html
new file mode 100755
index 0000000000000000000000000000000000000000..f26f3051030fbc68396fa6dcdc181f3c48a119ae
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/ConstructorPattern.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ main();
+
+ function Singer(name, mainLocation) { // Convention to use capital S
+ this.name = name;
+ this.mainLocation = mainLocation;
+
+ this.info = function() {
+ document.writeln("Name: " + this.name);
+ document.writeln(", Main Location: " + this.mainLocation + "<br />");
+ };
+ }
+
+ function main() {
+ let singer1 = new Singer("BTS", "South Korea");
+ singer1.info();
+ document.writeln("Name: " + singer1.name + "<br>");
+
+ let singer2 = new Singer("Lizzo", "US");
+ singer2.info();
+
+ // Calling Singer() (not using new)
+ // window.name, window.mainLocation, and window.info will be initialized
+ document.writeln("<br>Not using new<br>");
+ Singer("Eric", "US");
+ info(); // window.info();
+ document.writeln("window.name: " + window.name + "<br>");
+ document.writeln("window.mainLocation: " + window.mainLocation + "<br>");
+ document.writeln("name: " + name + "<br>");
+ document.writeln("mainLocation: " + mainLocation + "<br>");
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/DefaultPattern.html b/lectureCodeExamples/Week3/JavaScript6Code/DefaultPattern.html
new file mode 100755
index 0000000000000000000000000000000000000000..fce3c4b00ff600ef63e3804c2b9929fec933a823
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/DefaultPattern.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ /* constructor function */
+ function Student(name, credits, courses) {
+ this.name = name;
+ this.credits = credits;
+ this.courses = [...courses];
+ }
+
+ /* Prototype for all objects created by the Student constructor function */
+ Student.prototype = {
+ constructor: Student,
+ /* Student is the constructor function that creates the object's prototype */
+ college: "UMCP",
+
+ info: function () {
+ document.writeln(`Name: ${this.name}, Credits: ${this.credits}
+ Courses: ${this.courses}, College: ${this.college} <br>`);
+ }
+ };
+
+ main();
+
+ function main() {
+ let student1 = new Student("Kelly", 15, [414, 420]);
+ document.writeln("**** student1<br>");
+ student1.info();
+
+ document.writeln("**** student1 after adding a course<br>")
+ student1.courses.push(830);
+ student1.info();
+
+ document.writeln("<br>**** student2<br>");
+ let student2 = new Student("Peter", 12, [314, 320]);
+ student2.info();
+
+ // Even if instances for an object has been created, adding a
+ // property/method to the prototype will make it immediately
+ // available.
+ Student.prototype.collegeLocation = "College Park";
+
+ document.writeln("<br>Accessing property added to prototype from both students<br>");
+ document.writeln(`student1.collegeLocation: ${student1.collegeLocation}<br>`);
+ document.writeln(`student2.collegeLocation: ${student2.collegeLocation}<br>`);
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/FuncApplyCallBind.html b/lectureCodeExamples/Week3/JavaScript6Code/FuncApplyCallBind.html
new file mode 100755
index 0000000000000000000000000000000000000000..0ccff798eb521d5e2c5474678eec3350b74b59a2
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/FuncApplyCallBind.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ window.terpConstant = 100;
+
+ main();
+
+ function main() {
+ document.writeln("product(1, 2): " + product(1, 2) + "<br>"); // window, 1*2*100
+ document.writeln("applyArguments(3, 4): " + applyArguments(3, 4) + "<br>"); // window, 3*4*100
+ document.writeln("applyArray(2, 3): " + applyArray(2, 3) + "<br>"); // window, 2*3*100
+ document.writeln("applyAndObject(3, 5): " + applyAndObject(3, 5) + "<br>"); // obj, 3*5*1000
+ document.writeln("callExample(6, 5): " + callExample(6, 5) + "<br>"); // obj, 6*5*1000
+ document.writeln("callExample2(6, 5): " + callExample2(6, 5) + "<br>"); // window, 6*5*100
+ document.writeln("bindExample(): "); // obj, 2*5*9
+ bindExample();
+ }
+
+ function product(x, y) {
+ return x * y * this.terpConstant;
+ }
+
+ function applyArguments(x, y) {
+ return product.apply(this, arguments);
+ }
+
+ function applyArray(x, y) {
+ return product.apply(this, [x, y]);
+ }
+
+ function applyAndObject(x, y) {
+ let obj = new Object();
+ obj.terpConstant = 1000;
+ // Note that 1000 is multiplied
+ return product.apply(obj, [x, y]);
+ }
+
+ function callExample(x, y) {
+ let obj = new Object();
+ obj.terpConstant = 1000;
+ return product.call(obj, x, y);
+ }
+
+ function callExample2(x, y) {
+ return product.call(this, x, y);
+ }
+
+ function bindExample() {
+ let obj = new Object();
+ obj.terpConstant = 9;
+
+ var productObj = product.bind(obj); // Returns a function
+ document.writeln(productObj(2, 5)); // Executes the returned function
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/FuncArguments.html b/lectureCodeExamples/Week3/JavaScript6Code/FuncArguments.html
new file mode 100755
index 0000000000000000000000000000000000000000..07283c1706e6edd253b9c3e7cb68c04402b3fe10
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/FuncArguments.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+
+ <head>
+ <meta charset="utf-8"/>
+ <title>JS Example</title>
+ </head>
+
+ <body>
+ <script>
+ main();
+
+ function processData(x, y) {
+ /* Arguments is not array */
+ document.writeln("arguments.length: " + arguments.length);
+ document.writeln(", arguments[0]: " + arguments[0]);
+ document.writeln(", arguments[1]: " + arguments[1] + "<hr>");
+ }
+
+ function processDataRecursive(x, y) {
+ /* Arguments is not array */
+ document.writeln("arguments.length: " + arguments.length);
+ document.writeln(", arguments[0]: " + arguments[0]);
+ document.writeln(", arguments[1]: " + arguments[1] + "<hr>");
+
+ if (x !== 0) {
+ arguments.callee(--x, --y); /* recursive call */
+ }
+ }
+
+
+ function main() {
+ document.writeln("processData call<br>");
+ processData(3, 4);
+
+ document.writeln("processData call<br>");
+ processData(10);
+
+ document.writeln("processData call<br>");
+ processData();
+
+ document.writeln("processDataRecursive call<br>");
+ processDataRecursive(2, 3);
+ }
+ </script>
+ </body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/FuncLength.html b/lectureCodeExamples/Week3/JavaScript6Code/FuncLength.html
new file mode 100755
index 0000000000000000000000000000000000000000..f3e38d90360256ce26a89199a6e2e103c3268328
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/FuncLength.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ document.writeln("generateResults.length: " + generateResults.length + "<br>");
+ document.writeln("moreResults.length: " + moreResults.length + "<br>");
+ document.writeln("generateResults.toString(): " + generateResults.toString() + "<br>");
+ document.writeln("generateResults.valueOf(): " + generateResults.valueOf() + "<br>");
+
+ function generateResults(x) {
+ document.writeln(x);
+ }
+
+ function moreResults(x, y) {
+ document.writeln(x, y);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/FuncThis.html b/lectureCodeExamples/Week3/JavaScript6Code/FuncThis.html
new file mode 100755
index 0000000000000000000000000000000000000000..fb4a0fe58994f0b782cfa22cfdbf06f253fda98a
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/FuncThis.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ function printInfo() {
+ document.writeln(this.singer + "<br />");
+ }
+
+ window.singer = "Lionel";
+
+ main();
+
+ function main() {
+ printInfo(); /* Relying on global object (window) */
+
+ let obj = new Object();
+ obj.singer = "Elvis";
+ obj.singerInfo = printInfo;
+ obj.singerInfo();
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/Inheritance.html b/lectureCodeExamples/Week3/JavaScript6Code/Inheritance.html
new file mode 100755
index 0000000000000000000000000000000000000000..1a2a6087166896f60664c6772dbc8c95a0c1cd79
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/Inheritance.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ /* Constructor function */
+ function Student(name, credits, courses) {
+ console.log("Student constructor fn: " + this.__proto__.constructor.name);
+
+ this.name = name;
+ this.credits = credits;
+ this.courses = courses;
+ }
+
+ Student.prototype = {
+ constructor: Student,
+ college: "UMCP",
+
+ info: function() {
+ document.writeln("Name: " + this.name);
+ document.writeln(", Credits: " + this.credits);
+ document.writeln(", Courses: " + this.courses + " ");
+ document.writeln(", College: " + this.college + "<br />");
+ }
+ };
+
+ function GradStudent(name, credits, courses, advisor) {
+ console.log("GradStudent constructor fn: " + this.__proto__.constructor.name);
+
+ /* Calls super class constructor */
+ Student.call(this, name, credits, courses);
+
+ /* Try without "call" */
+ // Student(name, credits, courses);
+
+ this.advisor = advisor;
+ }
+
+ /* What are the differences between the next new Student() and Object.create(Student.prototype)? */
+ GradStudent.prototype = new Student();
+ //GradStudent.prototype = Object.create(Student.prototype);
+ GradStudent.prototype.constructor = GradStudent;
+ GradStudent.prototype.getAdvisor = function() {
+ return this.advisor;
+ }
+
+ main();
+
+ function main() {
+ let graduateStudent1 = new GradStudent("Kelly", 15, [414, 420], "Dr. Smith");
+
+ document.writeln("***** graduateStudent1<br>");
+ graduateStudent1.info();
+
+
+ document.writeln("Advisor: " + graduateStudent1.getAdvisor() + "<br>");
+ document.writeln("Name: " + graduateStudent1.name + "<br>");
+ document.writeln("College: " + graduateStudent1.college + "<br>");
+
+ document.writeln("<br>***** graduateStudent2<br>");
+ let graduateStudent2 = new GradStudent("Wiley", 15, [631, 632], "Dr. Will");
+ graduateStudent2.info();
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/IsPrototypeOf.html b/lectureCodeExamples/Week3/JavaScript6Code/IsPrototypeOf.html
new file mode 100755
index 0000000000000000000000000000000000000000..88087ac90ddfdab93cbd1a20b0059cde58cdefd1
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/IsPrototypeOf.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>Prototypes</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ function MyNumberType(n) {
+ this.number = n;
+ }
+
+ function Student() {}
+
+ let s = new Student();
+ console.log(Object.prototype.isPrototypeOf(s)); // true
+
+ let anonymous = new function () {}
+ console.log(Object.prototype.isPrototypeOf(anonymous)); // true
+
+ function StudentAthlete() {}
+ StudentAthlete.prototype = Object.create(Student.prototype);
+ let sa = new StudentAthlete();
+
+ console.log(Object.prototype.isPrototypeOf(sa)); // true
+ console.log(Student.prototype.isPrototypeOf(sa)); // true
+ console.log(StudentAthlete.prototype.isPrototypeOf(sa)); // true
+ console.log(MyNumberType.prototype.isPrototypeOf(sa)); // false
+
+ let arr1 = new Array(2);
+ console.log(arr1.hasOwnProperty('length'));
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/ObjectCreation1.html b/lectureCodeExamples/Week3/JavaScript6Code/ObjectCreation1.html
new file mode 100755
index 0000000000000000000000000000000000000000..f7c247d159ac522d2841e733f202f98a8af5dd5c
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/ObjectCreation1.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>JS Object Creation Example</title>
+</head>
+
+<body>
+ <script>
+ /***** object1 *****/
+ let object1 = new Object();
+ let object2 = new Object();
+ let object3 = {};
+ let message;
+
+ if (object1.__proto__ == object2.__proto__) {
+ message = "<strong>same (1 and 2)</strong><br>";
+ } else {
+ message = "<strong>different</strong><br>";
+ }
+ document.writeln(message);
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/ObjectCreation2.html b/lectureCodeExamples/Week3/JavaScript6Code/ObjectCreation2.html
new file mode 100755
index 0000000000000000000000000000000000000000..15b469e7887f37afbdd480aed95606bcf95a5c9b
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/ObjectCreation2.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>JS Object Creation Example</title>
+</head>
+
+<body>
+ <script>
+ /***** object1 *****/
+ let object1 = {};
+ document.writeln("<h2>Properties of object1</h2>");
+ getAllProperties(object1);
+ if (Object.prototype.isPrototypeOf(object1)) {
+ document.writeln("<br><strong>Object.prototype is prototype of object1</strong>");
+ }
+ document.writeln("<hr>");
+
+
+ /***** dessert *****/
+ let dessert = {
+ minimumCalories: 100,
+ displayDessert: function() {
+ document.writeln(this.name + ", " + this.calories + "<br>");
+ },
+
+ showDessert() {
+ document.writeln(this.name + ", " + this.calories + "<br>");
+ }
+
+ };
+ document.writeln("<h2>dessert properties</h2>");
+ let propertiesArray = getAllProperties(dessert);
+ for (let i = 0; i < propertiesArray.length; i++) {
+ document.writeln(propertiesArray[i] + "<br>");
+ }
+ if (Object.prototype.isPrototypeOf(dessert)) {
+ document.writeln("<strong>Object.prototype is prototype of dessert</strong><br>");
+ } else {
+ document.writeln("<strong>Object.prototype is NOT prototype of dessert</strong><br>");
+ }
+ document.writeln("<hr>");
+
+
+ /***** cheesecake *****/
+ // Creating new type (cheesecake)
+ let cheesecake = Object.create(dessert);
+ cheesecake.name = "cheesecake"; // add property
+ cheesecake.calories = 750; // add property
+
+ document.writeln("<h2>Cheesecake Properties</h2>");
+ propertiesArray = getAllProperties(cheesecake);
+ for (var i = 0; i < propertiesArray.length; i++) {
+ document.writeln(propertiesArray[i] + "<br>");
+ }
+ if (dessert.isPrototypeOf(cheesecake)) {
+ document.writeln("<strong>dessert is prototype of cheesecake</strong><br>");
+ }
+ if (Object.prototype.isPrototypeOf(cheesecake)) {
+ document.writeln("<strong>Object.prototype is prototype of cheesecake</strong><br>");
+ }
+ document.writeln("<hr><br>");
+
+ /* Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects */
+ function getAllProperties(src) {
+ var currObj,
+ answer = [];
+
+ /* Traversing the prototype chain */
+ currObj = src;
+ while (currObj !== null) {
+ let currObjProperties = Object.getOwnPropertyNames(currObj);
+ document.writeln("Adding: " + currObjProperties + "<br>");
+ answer = answer
+ .concat(currObjProperties)
+ .concat('');
+ currObj = Object.getPrototypeOf(currObj);
+ }
+ document.writeln("<strong>***** Done adding properties</strong><br>");
+
+ return answer;
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript6Code/PrototypePattern.html b/lectureCodeExamples/Week3/JavaScript6Code/PrototypePattern.html
new file mode 100755
index 0000000000000000000000000000000000000000..bceee684e5d482aa7432a0bf1d93ce3dfafc7306
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript6Code/PrototypePattern.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ /* Constructor function */
+ function Student() {}
+
+ Student.prototype.name = "Laura";
+ Student.prototype.courses = ['psyc101', '424', '430'];
+ Student.prototype.info = function() {
+ document.writeln("<strong>Name:</strong> " + this.name);
+ document.writeln(", <strong>Courses:</strong> " + this.courses + "<br />");
+ };
+
+ main();
+
+ function main() {
+ let student1 = new Student();
+ document.writeln("***** student1 after creation:<br>");
+ student1.info();
+ document.writeln("student1 after changing courses:<br>");
+ student1.courses[2] = '414';
+ student1.courses.push('451');
+ student1.info();
+
+ document.writeln("<br><br>***** student2 after creation:<br>");
+ let student2 = new Student();
+ student2.info();
+
+ document.writeln("<br><br>***** changing student2's name and one course");
+ student2.name = "Jenny";
+ student2.courses[2] = '777';
+
+ document.writeln("<br>***** after changes:<br>");
+ document.writeln("***** student1 <br>");
+ student1.info();
+
+ document.writeln("***** student2 <br>");
+ student2.info();
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/README.txt b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/README.txt
new file mode 100755
index 0000000000000000000000000000000000000000..6c93f78c375a708924cb064c3981abfebc377b74
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/README.txt
@@ -0,0 +1 @@
+You need to run these examples on a web server (place files in htdocs).
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/directory.php b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/directory.php
new file mode 100755
index 0000000000000000000000000000000000000000..df5dd805690e767c3535e3a947bb077f8af8d2d5
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/directory.php
@@ -0,0 +1,16 @@
+<?php
+ $firstname = $_GET['name'];
+ sleep(5); // time in seconds, to introduce query processing delay
+ switch ($_GET['name']) {
+ case "Mary":
+ echo "Mary|";
+ echo "Biology|";
+ echo "AV1434";
+ break;
+ case "Peter":
+ echo "Peter|Music|CP4578";
+ break;
+ default:
+ echo $_POST['name'],"|UNKNOWN|UNKNOWN";
+ }
+?>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/processMemo.php b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/processMemo.php
new file mode 100755
index 0000000000000000000000000000000000000000..9a19b32be3c6c9fda098967abc233f243db665d9
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/processMemo.php
@@ -0,0 +1,11 @@
+<?php
+ require_once("support.php");
+ $body = "";
+ $body .= "<h1>Memo Processing Script</h1>";
+ $body .= "Memo sent to {$_POST['name']} <br />";
+ $body .= "from the {$_POST['department']} Deparment <br />";
+ $body .= "and office {$_POST['office']} <br />";
+ $body .= "Memo Body<br />";
+ $body .= nl2br($_POST['message']);
+ echo generatePage($body);
+?>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/support.php b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/support.php
new file mode 100755
index 0000000000000000000000000000000000000000..9aceba38a9a43fbf40a0f9ba332dfa6c268ee822
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/support.php
@@ -0,0 +1,22 @@
+<?php
+
+function generatePage($body) {
+$page = <<<EOPAGE
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+ <title>Example</title>
+ </head>
+ <body>
+
+ $body
+
+ </body>
+</html>
+EOPAGE;
+
+return $page;
+}
+?>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/synchDirectoryLookup.html b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/synchDirectoryLookup.html
new file mode 100755
index 0000000000000000000000000000000000000000..bd482e0040389139d409b0217a6c70faa8a8ed46
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/Synchronous/synchDirectoryLookup.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>AJAX Example</title>
+
+ <script>
+ "use strict";
+
+ /* Global variables */
+ let requestObj = new XMLHttpRequest();
+ let firstFeedbackMessage = true;
+
+ function lookUpDirectory() {
+ let scriptURL = "directory.php";
+
+ /* Adding name to url */
+ let name = document.getElementById("name").value;
+ scriptURL += "?name=" + name;
+
+ /* Adding random value to url to avoid caching */
+ let randomValueToAvoidCache = (new Date()).getTime();
+ scriptURL += "&randomValue=" + randomValueToAvoidCache;
+
+ let asynch = false; // SYNCHRONOUS
+ requestObj.open("GET", scriptURL, asynch); // (will wait for response)
+
+ /* Notice that this time we are NOT setting */
+ /* the function that takes care of the request */
+ /* as we will wait for the response */
+
+ /* Sending request (WILL BLOCK) */
+ requestObj.send(null);
+
+ /* Processing response */
+ if (requestObj.status === 200) {
+ /* Retrieving response */
+ let results = requestObj.responseText;
+
+ /* Parsing string response */
+ let arrayWithResults = results.split("|");
+
+ /* Updating form elements */
+ document.getElementById("department").value = arrayWithResults[1];
+ document.getElementById("office").value = arrayWithResults[2];
+ feedbackArea.value = "Found";
+ } else {
+ alert("Request Failed. " + requestObj.status);
+ }
+ }
+
+ </script>
+</head>
+
+<body>
+ <form action="processMemo.php" method="post">
+ <h3>Using Ajax to submit a synchronous request</h3>
+ <h3>After typing name (e.g. Mary), press tab to move to next field</h3>
+ <h3>In this example, the form will freeze as we are waiting for the response</h3>
+ <h3>from the server (5 second delay)</h3>
+ <p>
+ Name: <input type="text" id="name" name="name" onblur="lookUpDirectory()" /><br /><br />
+ Department: <input type="text" id="department" name="department" /><br /><br />
+ Office: <input type="text" id="office" name="office" /><br /><br />
+ Memo Message: <br /><textarea name="message" rows="8" cols="50"></textarea><br />
+ <input type="submit" value="Submit" />
+ <input type="reset" name="Clear" />
+ </p>
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/directory.php b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/directory.php
new file mode 100755
index 0000000000000000000000000000000000000000..301a357372ccc144619047360c263a4de376cc54
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/directory.php
@@ -0,0 +1,16 @@
+<?php
+ $firstname = $_GET['name'];
+ // sleep(3); // time in seconds, to introduce query processing delay
+ switch ($_GET['name']) {
+ case "Mary":
+ echo "Mary|";
+ echo "Biology|";
+ echo "AV1434";
+ break;
+ case "Peter":
+ echo "Peter|Music|CP4578";
+ break;
+ default:
+ echo $_POST['name'],"|UNKNOWN|UNKNOWN";
+ }
+?>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/directoryLookup.html b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/directoryLookup.html
new file mode 100755
index 0000000000000000000000000000000000000000..d13074a68eb296ecbc96e25a16e4a59f6597f3f2
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/directoryLookup.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>AJAX Example</title>
+
+ <script>
+ "use strict";
+
+ /* Global variables */
+ let requestObj = new XMLHttpRequest();
+ let firstFeedbackMessage = true;
+
+ function lookUpDirectory() {
+ let scriptURL = "directory.php";
+
+ /* Adding name to url */
+ let name = document.getElementById("name").value;
+ scriptURL += "?name=" + name;
+
+ /* Adding random value to url to avoid caching */
+ let randomValueToAvoidCache = (new Date()).getTime();
+ scriptURL += "&randomValue=" + randomValueToAvoidCache;
+
+ let asynch = true; // Asynchronous
+ requestObj.open("GET", scriptURL, asynch);
+
+ /* Setting the function that takes care of the request */
+ requestObj.onreadystatechange = processProgress;
+
+ /* Sending request */
+ requestObj.send(null);
+ }
+
+ /* Callback function */
+ function processProgress() {
+ let feedbackArea = document.getElementById("feedbackArea");
+
+ if (requestObj.readyState === 4) {
+ if (requestObj.status === 200) {
+ /* Retrieving response */
+ let results = requestObj.responseText;
+
+ /* Parsing string response */
+ let arrayWithResults = results.split("|");
+
+ /* Updating form elements */
+ document.getElementById("department").value = arrayWithResults[1];
+ document.getElementById("office").value = arrayWithResults[2];
+ feedbackArea.value = "Found";
+ } else {
+ alert("Request Failed.");
+ }
+ }
+ }
+
+ </script>
+</head>
+
+<body>
+ <form action="processMemo.php" method="post">
+ <h3>After typing name (e.g., Mary), press tab to move to next field</h3>
+ <p>
+ Name: <input type="text" id="name" name="name" onblur="lookUpDirectory()" /><br /><br />
+ Department: <input type="text" id="department" name="department" /><br /><br />
+ Office: <input type="text" id="office" name="office" /><br /><br />
+ Memo Message: <br /><textarea name="message" rows="8" cols="50"></textarea><br />
+ <input type="submit" value="Submit" />
+ <input type="reset" name="Clear" />
+ </p>
+ </form>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/processMemo.php b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/processMemo.php
new file mode 100755
index 0000000000000000000000000000000000000000..9a19b32be3c6c9fda098967abc233f243db665d9
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/processMemo.php
@@ -0,0 +1,11 @@
+<?php
+ require_once("support.php");
+ $body = "";
+ $body .= "<h1>Memo Processing Script</h1>";
+ $body .= "Memo sent to {$_POST['name']} <br />";
+ $body .= "from the {$_POST['department']} Deparment <br />";
+ $body .= "and office {$_POST['office']} <br />";
+ $body .= "Memo Body<br />";
+ $body .= nl2br($_POST['message']);
+ echo generatePage($body);
+?>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/support.php b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/support.php
new file mode 100755
index 0000000000000000000000000000000000000000..9aceba38a9a43fbf40a0f9ba332dfa6c268ee822
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/AjaxExamples/TypicalASynchronous/support.php
@@ -0,0 +1,22 @@
+<?php
+
+function generatePage($body) {
+$page = <<<EOPAGE
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+ <title>Example</title>
+ </head>
+ <body>
+
+ $body
+
+ </body>
+</html>
+EOPAGE;
+
+return $page;
+}
+?>
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors1.html b/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors1.html
new file mode 100755
index 0000000000000000000000000000000000000000..5e0c09a26f03c2fe96d6ceef98e34880e1f631d5
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors1.html
@@ -0,0 +1,26 @@
+<!doctype html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ main();
+
+ function main() {
+ try {
+ alert("About to access method");
+ window.terps();
+ } catch (error) {
+ alert("Problem: " + error.message);
+ }
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors2.html b/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors2.html
new file mode 100755
index 0000000000000000000000000000000000000000..983bc7860486839153229d7984266807725e49ba
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors2.html
@@ -0,0 +1,50 @@
+<!doctype html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+ main();
+
+ function main() {
+ try {
+ let option = prompt("Enter 1, 2, 3 for error case");
+ let x;
+
+ switch (option) {
+ case "1":
+ x = new Array(-4);
+ break;
+ case "2":
+ x = y;
+ break;
+ case "3":
+ x = 234;
+ alert(x.charAt(0));
+ break;
+ }
+ } catch (error) {
+ let message;
+
+ if (error instanceof RangeError) {
+ message = "Range: ";
+ } else if (error instanceof ReferenceError) {
+ message = "Reference: ";
+ } else if (error instanceof TypeError) {
+ message = "Type: "
+ } else {
+ message = "Other: ";
+ }
+
+ alert(message + error.message);
+ }
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors3.html b/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors3.html
new file mode 100755
index 0000000000000000000000000000000000000000..9b631ac994669fb45acbaddc11c65d46f79d6ba6
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/Errors/Errors3.html
@@ -0,0 +1,38 @@
+<!doctype html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ "use strict";
+
+ function InvalidDataError(message) {
+ this.name = "InvalidDataError";
+ this.message = message;
+ }
+ InvalidDataError.prototype = new Error();
+
+ main();
+
+ function main() {
+ try {
+ var value = Number(prompt("Enter positive value (try 0 and negative)"));
+ if (value === 0) {
+ throw "Error: No zeros!!!";
+ } else if (value < 0) {
+ throw new InvalidDataError("Positive value expected");
+ } else {
+ alert("Square Root: " + Math.sqrt(value));
+ }
+ } catch (error) {
+ alert("Error message is: " + error.message);
+ }
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingImage.html b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingImage.html
new file mode 100755
index 0000000000000000000000000000000000000000..3f7ad1db3e138b11d031758e765242ddf0eb6920
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingImage.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>File Loading</title>
+</head>
+
+<body onload="main()">
+ <div>
+ Choose file to upload <input type="file" id="fileElement">
+ <pre id="displayArea">
+ </pre>
+ </div>
+
+ <script>
+ "use strict";
+
+ function main() {
+ document.getElementById("fileElement").onchange = loadData;
+ }
+
+ function loadData(e) {
+ let file = document.getElementById("fileElement").files[0];
+ let reader = new FileReader();
+
+ reader.onload = function(event) {
+ let img = new Image();
+
+ img.src = reader.result;
+ document.getElementById("displayArea").appendChild(img);
+ };
+
+ reader.readAsDataURL(file);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingJSON.html b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingJSON.html
new file mode 100755
index 0000000000000000000000000000000000000000..aaf6a36b58a320217a11bdb765e6bc0aefc4cae7
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingJSON.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>File Reading</title>
+</head>
+
+<body onload="main()">
+ <div>
+ Choose file to upload <input type="file" id="fileElement" value="data.txt">
+ </div>
+
+ <script>
+ "use strict";
+
+ function main() {
+ document.getElementById("fileElement").onchange = loadData;
+ }
+
+ function loadData(e) {
+ let file = document.getElementById("fileElement").files[0];
+ let reader = new FileReader();
+
+ reader.onload = function(event) {
+ let person = JSON.parse(reader.result);
+ console.log("person's information displayed using console.dir");
+ console.dir(person);
+ console.log("person's information displayed using console.log");
+ console.log(person);
+ alert("Check console for results");
+ };
+
+ reader.readAsText(file);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingText.html b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingText.html
new file mode 100755
index 0000000000000000000000000000000000000000..d498bb3e27833206b844ba540a5acc1991454b5e
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/FileReadingText.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>File Reading</title>
+</head>
+
+<body onload="main()">
+ <div>
+ Choose file to upload <input type="file" id="fileElement" value="data.txt">
+ <h2>File Contents Below</h2>
+ <pre id="displayArea">
+ </pre>
+ </div>
+
+ <script>
+ "use strict";
+
+ function main() {
+ document.getElementById("fileElement").onchange = loadData;
+ }
+
+ function loadData(e) {
+ let file = document.getElementById("fileElement").files[0];
+ let reader = new FileReader();
+
+ reader.onload = function(event) {
+ document.getElementById("displayArea").innerHTML = reader.result;
+ };
+
+ reader.readAsText(file);
+ }
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/data.txt b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/data.txt
new file mode 100755
index 0000000000000000000000000000000000000000..6ca778393277bf2808b3a2bfafabe7b7ab438be7
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/data.txt
@@ -0,0 +1,3 @@
+This is a file
+with some
+sample data.
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/img1.jpg b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/img1.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..133ec7c46373afcaa14d4d4fc659094429643a96
Binary files /dev/null and b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/img1.jpg differ
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/img2.jpg b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/img2.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..b26f15d22966eeb998be7c879e5df15e0e0bc008
Binary files /dev/null and b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/img2.jpg differ
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/FileReading/person.json b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/person.json
new file mode 100755
index 0000000000000000000000000000000000000000..a0cc211635d65d7553bc55ddafe5e284317ce349
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/FileReading/person.json
@@ -0,0 +1 @@
+{"name":"Mary","age":45,"salary":20000,"employed":true,"boss":null,"cars":["toyota","honda"],"friends":[{"fname":"Peter"},{"fname":"Luisa"}]}
\ No newline at end of file
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/Checkboxes.html b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/Checkboxes.html
new file mode 100755
index 0000000000000000000000000000000000000000..71e0e3d3914d090857764d75aa7788dee4f3cef7
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/Checkboxes.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Checkboxes</title>
+</head>
+
+<body>
+
+ Indicate what kinds of computers you have.<br />
+ <form>
+ <input type="checkbox" id="laptop" />Laptop<br />
+ <input type="checkbox" id="desktop" checked="checked" />Desktop<br />
+ <input type="button" id="processDataButton" value="Process" onclick="processData()" />
+ <input type="reset" value="Clear" />
+ </form>
+
+ <script>
+ function processData() {
+ /* Retrieving the values */
+ let laptopCheckbox = document.getElementById("laptop");
+ let desktopCheckbox = document.getElementById("desktop");
+
+ let message = "";
+ if (laptopCheckbox.checked) {
+ message += "Laptop was selected.\n";
+ } else {
+ message += "Laptop was NOT selected.\n";
+ }
+
+ if (desktopCheckbox.checked) {
+ message += "Desktop was selected.\n";
+ } else {
+ message += "Desktop was NOT selected.\n";
+ }
+
+ alert(message);
+ }
+ </script>
+</body></html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/DropDownList.html b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/DropDownList.html
new file mode 100755
index 0000000000000000000000000000000000000000..d153d46135f94580d863633198e8a66c4c2402e3
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/DropDownList.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Drow-Down List</title>
+</head>
+
+<body>
+ <h2>Programming Language Preference</h2>
+
+ <form>
+ <select id="preference">
+ <option value="JavaScript">JavaScript</option>
+ <option value="Ruby" selected="selected">Ruby</option>
+ <option value="Python">Python</option>
+ </select>
+
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let id = "preference";
+ let answer = getSelection(id);
+ alert("Option selected: " + answer);
+ }
+
+ function getSelection(id) {
+ let preference = document.getElementById(id);
+ let optionSelected = preference[preference.selectedIndex].value;
+
+ return optionSelected;
+ }
+ </script>
+</body></html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/NumberRangeTime.html b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/NumberRangeTime.html
new file mode 100755
index 0000000000000000000000000000000000000000..b6b7f5632392ff16dd94df3fe69f8907b71085b5
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/NumberRangeTime.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Text Area</title>
+</head>
+
+<body>
+ <h2>Form Elements (Number/Range/Time)</h2>
+ <form>
+ Enter a number: <input type="number" value="21" min="1" max="120" step="5" id="request">
+ <input type="button" id="process" value="Process Number" onclick="processNumber()"><br><br>
+
+ Enter number in range: <input type="range" id="rangeElem" min="10" max="50">
+ <input type="button" id="processRange" value="Process Range" onclick="processRange1()"><br><br>
+
+ Enter time <input type="time" id="timeElem" >
+ <input type="button" id="processTime" value="Process Time" onclick="processTime1()"><br><br>
+
+ <input type="reset">
+
+ </form>
+ <div id="display"></div>
+
+ <script>
+ function processNumber() {
+ var age = document.getElementById("request").value;
+ document.getElementById("display").innerHTML = "Age is " + age;
+ }
+
+ function processRange1() {
+ var value = document.getElementById("rangeElem").value;
+ document.getElementById("display").innerHTML = "Range value is " + value;
+ }
+
+ function processTime1() {
+ var value = document.getElementById("timeElem").value;
+ document.getElementById("display").innerHTML = "Time is " + value;
+ }
+ </script>
+</body></html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/RadioButtons.html b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/RadioButtons.html
new file mode 100755
index 0000000000000000000000000000000000000000..3ee8baf4bb2156496249460d9f24d0da14a039bb
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/RadioButtons.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Radio Buttons</title>
+</head>
+
+<body>
+ <h2>Category</h2>
+ <form>
+ <!-- Notice: using same name but different ids -->
+ <input type="radio" id="radioHS" name="category" value="hs" />HS<br>
+ <input type="radio" id="radioUndergraduate" name="category" value="undergraduate" />Undergraduate<br>
+ <input type="radio" id="radioGraduate" name="category" value="graduate" checked="checked" />Graduate<br />
+ <input type="button" id="processDataButton" value="Process" onclick="processData()" />
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let radioButtonsName = "category";
+ let answer = getSelection(radioButtonsName);
+ alert("Selection was: " + answer);
+ }
+
+ function getSelection(radioButtonsName) {
+ let category = document.getElementsByName("category");
+
+ for (let idx = 0; idx < category.length; idx++) {
+ if (category[idx].checked) {
+ return category[idx].value;
+ }
+ }
+ }
+ </script>
+</body></html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/ScrollableList.html b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/ScrollableList.html
new file mode 100755
index 0000000000000000000000000000000000000000..e4ca4af0acaa12d092ad45c629464ca5d3be64da
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/ScrollableList.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Scrollable List</title>
+</head>
+
+<body>
+ <h2>Programming Language Preferences</h2>
+ <h2>Use CTRL KEY To Select Multiple Entries</h2>
+ <form>
+ <select id="preference" multiple="multiple" size="5">
+ <option value="JavaScript">JavaScript</option>
+ <option value="Ruby" selected="selected">Ruby</option> <!-- default selection -->
+ <option value="PHP">PHP</option>
+ <option value="C++" selected="selected">C++</option> <!-- default selection -->
+ <option value="Pascal">Pascal</option>
+ <option value="Fortran">Fortran</option>
+ <option value="Basic">Basic</option>
+ <option value="Assembly">Assembly</option>
+ <option value="C#">C#</option>
+ </select>
+ <br />
+
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ let answer = getSelection();
+ alert("Selection: " + answer);
+ }
+
+ function getSelection() {
+ var preference = document.getElementById("preference");
+ var optionsArray = preference.options;
+ var i, answer = "";
+
+ for (i = 0; i < optionsArray.length; i++) {
+ if (optionsArray[i].selected) {
+ answer += optionsArray[i].value + " ";
+ }
+ }
+ return answer;
+ }
+ </script>
+</body></html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/Textarea.html b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/Textarea.html
new file mode 100755
index 0000000000000000000000000000000000000000..21a9182809ce7c911854dc6d186a217237354323
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/RetrievingFormDataJS/Textarea.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>Text Area</title>
+</head>
+
+<body>
+ <h2>Regrade Request Form</h2>
+ <form>
+ <!-- Notice the default text -->
+ <textarea id="request" rows="8" cols="50">Please check my last assignment.</textarea>
+ <br />
+ <input type="button" id="processDataButton" value="Process" onclick="processData()">
+ <input type="reset">
+ </form>
+
+ <script>
+ function processData() {
+ var information = document.getElementById("request");
+ alert("The submitted request is: \n" + information.value);
+ }
+ </script>
+</body></html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/Sound.html b/lectureCodeExamples/Week3/JavaScript7Code/Sound.html
new file mode 100755
index 0000000000000000000000000000000000000000..e26bd36d71ebc92800feaf0553bd9ef0dcc3c913
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript7Code/Sound.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Playing Sound</title>
+</head>
+
+<body>
+ <h2>Sound Player</h2>
+ <!-- audio files available online (e.g., https://www.soundhelix.com/audio-examples) -->
+ <audio id="player">
+ <source type="audio/mpeg">
+ </audio>
+
+ <strong>Enter mp3 file url </strong>
+ <input size="60" id="audioSource" type="text" value="sounds/DropBallSound.mp3"><br><br>
+ <input type="button" value="Play" onclick="playSound()">
+ <input type="button" value="Stop" onclick="stop()">
+ <script>
+ "use strict";
+
+ let player = document.getElementById("player");
+
+ function playSound() {
+ player.src = document.getElementById("audioSource").value;
+ player.play();
+ }
+
+ function stop() {
+ player.pause();
+ player.currentTime = 0;
+ }
+ </script>
+</body>
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript7Code/sounds/DropBallSound.mp3 b/lectureCodeExamples/Week3/JavaScript7Code/sounds/DropBallSound.mp3
new file mode 100755
index 0000000000000000000000000000000000000000..d91fc0fc1e3c5ae44188771a866ed1f45f4229d1
Binary files /dev/null and b/lectureCodeExamples/Week3/JavaScript7Code/sounds/DropBallSound.mp3 differ
diff --git a/lectureCodeExamples/Week3/JavaScript8Code/Accessors.html b/lectureCodeExamples/Week3/JavaScript8Code/Accessors.html
new file mode 100755
index 0000000000000000000000000000000000000000..0888aa994fe011360297e91ecb761319c81e3647
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript8Code/Accessors.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>ES6 Class Example</title>
+</head>
+
+<body>
+ <script>
+ class StoreBranch {
+ /* Public field */
+ size;
+
+ constructor(name, location, established) {
+ this.size = 4000;
+ this._name = name;
+ this._location = location;
+ }
+
+ displayInfo() {
+ console.log(this._name + " located in " + this._location);
+ }
+
+ /* getter example */
+ get name() {
+ document.writeln("get name call<br>");
+ return this._name;
+ }
+
+ /* setter example */
+ set name(v) {
+ document.writeln("set name call<br>");
+ this._name = v;
+ }
+
+ getLocation() {
+ return this._location;
+ }
+
+ setLocation(v) {
+ this._location = v;
+ }
+
+ /* Computed property */
+ ["get" + "Name" + "Location"]() {
+ document.writeln("<strong>this.size:</strong> " + this.size + "<br>");
+ return `ComputedProperty: ${this._name} in ${this._location}`;
+ }
+ }
+
+ let sb = new StoreBranch("Wendy's", "Greenbelt", 1980);
+ document.writeln("<strong>sb.name:</strong> " + sb.name + "<br>");
+ sb.name = "McDonald";
+ document.writeln("<strong>sb.name:</strong> " + sb.name + "<br>");
+ document.writeln("<hr>");
+
+ document.writeln("<strong>sb.getLocation():</strong> " + sb.getLocation() + "<br>");
+ sb.setLocation("Bethesda");
+ document.writeln("<strong>sb.getLocation():</strong> " + sb.getLocation() + "<br>");
+ document.writeln("<strong>sb.getNameLocation():</strong> " + sb.getNameLocation());
+ document.writeln("<hr>");
+
+ document.writeln("<strong>sb.size:</strong> " + sb.size + "<br>");
+ document.writeln("<strong>StoreBranch.size:</strong> " + StoreBranch.size + "<br>");
+ document.writeln("<hr>");
+
+ let sb2 = new StoreBranch("Burger King", "Greenbelt", 2000);
+ sb2.size = 5000;
+ sb2._name = "Still can be changed outside the class!";
+ sb2._location = "Anywhere";
+ document.writeln("<strong>sb2.size: </strong>" + sb2.size + "<br>");
+ document.writeln("<strong>sb2._name: </strong>" + sb2._name + "<br>");
+ document.writeln("<strong>sb2._location: </strong>" + sb2._location + "<br>");
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript8Code/Car.html b/lectureCodeExamples/Week3/JavaScript8Code/Car.html
new file mode 100755
index 0000000000000000000000000000000000000000..82ec156046f2735d493e8ea821c4f41b2b338fc3
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript8Code/Car.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>Class Example</title>
+</head>
+
+<body>
+ <script>
+ class Car {
+ static dealership = "Terp Cars"; /* static public */
+ static #instances = 0; /* static private */
+
+ passengers = ["Driver"]; /* public */
+
+ #tag; /* private */
+ #mileage; /* private */
+
+ constructor(tag, mileage) {
+ this.#tag = tag;
+ this.#mileage = mileage;
+ Car.#instances++;
+ }
+
+ get tag() {
+ return this.#tag;
+ }
+
+ set tag(newTag) {
+ this.#tag = newTag;
+ }
+
+ displayInfo() {
+ document.writeln(this.#tag + ", " + this.#mileage + "<br>");
+ }
+
+ static getInstances() {
+ return Car.#instances;
+ }
+
+ [Symbol.toPrimitive]() { /* Java's toString() */
+ return `${this.#tag} ${this.#mileage} Passengers: ${this.passengers}`;
+ }
+ }
+
+ document.writeln("Before change<br>");
+ let car1 = new Car("abc", 22000);
+ car1.displayInfo();
+
+ document.writeln("<br>After change<br>");
+ document.writeln("car1.tag: " + car1.tag);
+ car1.tag = "changed";
+ car1.displayInfo();
+
+ let car2 = new Car("core1", 40000);
+ document.writeln("Dealership: " + Car.dealership + "<br>");
+ document.writeln("Instances: " + Car.getInstances() + "<br>");
+
+ document.writeln("<hr>");
+ document.writeln(car1 + "<br>");
+ document.writeln(car2 + "<br>");
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript8Code/ClassDeclaration.html b/lectureCodeExamples/Week3/JavaScript8Code/ClassDeclaration.html
new file mode 100755
index 0000000000000000000000000000000000000000..cabb2fae9640fd3ae71fedc33984f595d029bbc6
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript8Code/ClassDeclaration.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>ES6 Class Example</title>
+</head>
+
+<body>
+ <script>
+ class StoreBranch {
+ constructor(name, location) {
+ this.name = name;
+ this.location = location;
+ }
+
+ displayInfo() {
+ document.writeln("<br><strong>displayInfo(): </strong>");
+ document.writeln(this.name + " located in " + this.location + "<br>");
+ }
+ }
+
+ let sb = new StoreBranch("Wendy's", "Greenbelt");
+ sb.displayInfo();
+
+ // Structure behind class declaration
+ let answer = "<strong>typeof StoreBranch: </strong>" + typeof StoreBranch; // class is a function
+ answer += "<br><strong>StoreBranch === StoreBranch.prototype.constructor: </strong>" + (StoreBranch === StoreBranch.prototype.constructor);
+
+ // Will see two functions
+ answer += "<br><strong>Object.getOwnPropertyNames(StoreBranch.prototype): </strong>" + Object.getOwnPropertyNames(StoreBranch.prototype);
+ document.writeln(answer);
+
+ StoreBranch.prototype.displayInfo(); // this is in fact a function in prototype
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript8Code/ClassExpression.html b/lectureCodeExamples/Week3/JavaScript8Code/ClassExpression.html
new file mode 100755
index 0000000000000000000000000000000000000000..1571a68ca5d1c6a45766e64117525c1a751e37d1
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript8Code/ClassExpression.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>Class Expression</title>
+</head>
+
+<body>
+ <script>
+ /* Approach #1 */
+ let StoreBranchAnonymous = class {
+ constructor(name, location) {
+ this.name = name;
+ this.location = location;
+ }
+
+ displayInfo() {
+ document.writeln(this.name + " located in " + this.location + "<br>");
+ }
+ };
+
+
+ /* Approach #2 (Providing name) */
+ let StoreBranchNamed = class SBNamed { /* name provided */
+ constructor(name, location) {
+ this.name = name;
+ this.location = location;
+ }
+
+ displayInfo() {
+ document.writeln(
+ StoreBranchNamed.name +
+ ": " +
+ this.name +
+ " located in " +
+ this.location + "<br>"
+ );
+ }
+ };
+
+
+ /* Approach #3 (Returning class) */
+ function getStoreBranchClass() {
+ // Declare a class and return it
+ return class StoreBranchReturned {
+ constructor(name, location) {
+ this.name = name;
+ this.location = location;
+ }
+
+ displayInfo() {
+ document.writeln(
+ StoreBranchReturned.name + ": " + this.name + " located in " + this.location + "<br>"
+ );
+ }
+ };
+ }
+
+ let sb1 = new StoreBranchAnonymous("Wendy's", "Greenbelt");
+ sb1.displayInfo();
+ document.writeln("<hr>");
+
+ let sb2 = new StoreBranchNamed("Wendy's", "College Park");
+ sb2.displayInfo();
+ document.writeln("<hr>");
+
+ let ReturnedClass = getStoreBranchClass();
+ document.writeln("ReturnedClass.name: " + ReturnedClass.name + "<br>");
+
+ /* Creating object with returned class */
+ let returnedClassObj = new ReturnedClass("Wendy's", "Rockville");
+ returnedClassObj.displayInfo();
+ document.writeln("<hr>");
+
+ document.writeln("StoreBranchAnonymous.name: " + StoreBranchAnonymous.name + "<br>");
+ document.writeln("StoreBranchNamed.name: " + StoreBranchNamed.name + "<br>");
+
+ document.writeln("<hr>");
+ // document.writeln("SBNamed.name: " + SBNamed.name); // try uncomment this line
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript8Code/Inheritance.html b/lectureCodeExamples/Week3/JavaScript8Code/Inheritance.html
new file mode 100755
index 0000000000000000000000000000000000000000..1a7e573c5b1d2e747995959d3a04b25f8366a348
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript8Code/Inheritance.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="utf-8" />
+ <title>JS Example</title>
+</head>
+
+<body>
+ <script>
+ /* Base class */
+ class Student {
+ static campus = "College Park"; /* Static variable */
+
+ constructor(name, credits, courses) {
+ this.name = name;
+ this.credits = credits;
+ this.courses = [...courses];
+ }
+
+ info() {
+ document.writeln("Name: " + this.name);
+ document.writeln(", Credits: " + this.credits);
+ document.writeln(", Courses: " + this.courses);
+ }
+
+ static compareStudents(student1, student2) { /* Static method */
+ return student1.name === student2.name;
+ }
+ }
+
+ /* Derived class */
+ class GradStudent extends Student { // Using extends
+ constructor(name, credits, courses, advisor) {
+ super(name, credits, courses);
+ this.advisor = advisor;
+ }
+
+ getAdvisor() {
+ return this.advisor;
+ }
+
+ /* Method overriding */
+ info() {
+ super.info();
+ // this.__proto__.__proto__.info.call(this);
+ document.writeln(", Advisor: " + this.advisor + "<br>");
+ console.log(this.getAdvisor());
+ }
+ }
+
+ /* key points!
+ GradStudent function prototypically inherits from Student function.
+ GradStudent.prototype prototypically inherits from Student.prototype.
+ */
+
+ let student1 = new Student("Kelly", 15, [414, 420]);
+ student1.info();
+ document.writeln("<br>");
+
+ student1.courses.push(830);
+ student1.info();
+ document.writeln("<br>");
+ student1.courses[4] = 890;
+ student1.info();
+ document.writeln("<br><br>");
+
+ let student2 = new Student("Peter", 12, [314, 320]);
+ student2.info();
+ document.writeln("<br><br>");
+
+ /* Creating a new GradStudent object graduateStudent
+ graduateStudent's prototype is GradStudent.prototype
+ GradStudent.prototype's prototype is Student.prototype
+ */
+
+ let graduateStudent = new GradStudent("Kelly", 15, [651, 720], "Dr. Khuller");
+ graduateStudent.info();
+ document.writeln("<br>");
+ document.writeln(`${graduateStudent.name}'s advisor is ${graduateStudent.getAdvisor()}<br>`);
+
+ document.writeln("<hr>");
+ document.writeln("Campus: " + Student.campus + "<br>");
+
+ let student4 = new Student("Mike", 20, [101]);
+ let student5 = new Student("Laura", 30, [201]);
+ let student6 = new Student("Mike", 20, [101]);
+ document.writeln("Comparison #1: " + Student.compareStudents(student4, student5) + "<br>");
+ document.writeln("Comparison #2: " + Student.compareStudents(student4, student6) + "<br>");
+ </script>
+</body>
+
+</html>
diff --git a/lectureCodeExamples/Week3/JavaScript8Code/SportsCar.html b/lectureCodeExamples/Week3/JavaScript8Code/SportsCar.html
new file mode 100755
index 0000000000000000000000000000000000000000..c9a8440d9c66d5e95a14a1c00a54fd4fe15c5a01
--- /dev/null
+++ b/lectureCodeExamples/Week3/JavaScript8Code/SportsCar.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+ <title>Class Example</title>
+</head>
+
+<body>
+ <script>
+ class Car {
+ static dealership = "Terp Cars"; /* static public */
+ static #instances = 0; /* static private */
+
+ passengers = ["Driver"]; /* public */
+
+ #tag; /* private */
+ #mileage; /* private */
+
+ constructor(tag, mileage) {
+ this.#tag = tag;
+ this.#mileage = mileage;
+ Car.#instances++;
+ }
+
+ get tag() {
+ return this.#tag;
+ }
+
+ set tag(newTag) {
+ this.#tag = newTag;
+ }
+
+ displayInfo() {
+ document.writeln(this.#tag + ", " + this.#mileage + "<br>");
+ }
+
+ static getInstances() {
+ return Car.#instances;
+ }
+
+ [Symbol.toPrimitive]() {
+ /* Java's toString() */
+ return `${this.#tag} ${this.#mileage} Passengers: ${this.passengers}`;
+ }
+ }
+
+ class SportsCar extends Car {
+ #engine;
+ constructor(tag, mileage, engine) {
+ super(tag, mileage);
+ this.#engine = engine;
+ }
+
+ get engine() {
+ return this.#engine;
+ }
+
+ displayInfo() {
+ super.displayInfo();
+ document.writeln(this.#engine + "<br>");
+ }
+ }
+
+ document.writeln("Sports car<br>");
+ let car1 = new SportsCar("abc", 22000, "turbo");
+ car1.displayInfo();
+ document.writeln("Engine: " + car1.engine);
+ document.writeln("<hr>");
+
+ </script>
+</body>
+
+</html>
diff --git a/lectureSlides/Week03/JavaScript5.pdf b/lectureSlides/Week03/JavaScript5.pdf
new file mode 100755
index 0000000000000000000000000000000000000000..da47f8bf5ea5d8cd057aa0ffe33f750a3c2783d6
Binary files /dev/null and b/lectureSlides/Week03/JavaScript5.pdf differ
diff --git a/lectureSlides/Week03/JavaScript6.pdf b/lectureSlides/Week03/JavaScript6.pdf
new file mode 100755
index 0000000000000000000000000000000000000000..5e02b58bbb7cd3670e804d5e52eef3e2d41effa0
Binary files /dev/null and b/lectureSlides/Week03/JavaScript6.pdf differ
diff --git a/lectureSlides/Week03/JavaScript7.pdf b/lectureSlides/Week03/JavaScript7.pdf
new file mode 100755
index 0000000000000000000000000000000000000000..467b62477150153f37d736e4950f41ba16646c0e
Binary files /dev/null and b/lectureSlides/Week03/JavaScript7.pdf differ
diff --git a/lectureSlides/Week03/JavaScript8.pdf b/lectureSlides/Week03/JavaScript8.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..42e539ebe408abb193328a1e8eb0a2ed4a4becd3
Binary files /dev/null and b/lectureSlides/Week03/JavaScript8.pdf differ