Add files via upload

annette-arrigucci · Sep 28, 2017 · 63c7dc3 · 63c7dc3
1 parent daf59e3
commit 63c7dc3
Show file tree

Hide file tree

Showing 13 changed files with 531 additions and 0 deletions.
diff --git a/AMD_example.html b/AMD_example.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script data-main="scripts/main" src="scripts/require.js"></script> 
+</head>
+<body>
+
+</body>
+</html>
diff --git a/ES6-examples.html b/ES6-examples.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script data-main="scripts/main" src="scripts/require.js"></script> 
+    <script src="main_es6.js" type="module"></script>  
+</head>
+<body>
+    <script>
+        var numbers = [1, 5, 10, 15];
+        var numTimesIndex = numbers.map((x, i) => x * i);
+        document.writeln("ES6 numbers function");
+        document.writeln("Array: [1, 5, 10, 15]")
+        document.writeln("Result: " + numTimesIndex);
+
+        document.writeln("New way<br>");
+        var bob = {
+            _name: "Bob",
+            _friends: ["Nancy", "Annette", "John"],
+            printFriends() {
+            this._friends.forEach(f =>
+            document.writeln(this._name + " knows " + f +"<br>"));
+            }
+        }
+        var bob1 = Object.create(bob);
+        bob1.printFriends();
+
+        document.writeln("Old way<br>");
+        var maria = {
+            _name: "Maria",
+            _friends: ["Nancy", "Annette", "John"],
+            printFriends: function() {
+                this._friends.forEach(function (element) {
+                    document.writeln(this._name + " knows " + element + "<br>")
+                }, this);
+            }
+        }
+        var maria1 = Object.create(maria);
+        maria1.printFriends();
+
+        /*
+        var request = new XMLHttpRequest();
+        //onload and onerror are event handlers
+        request.onload = function () {
+            var data = JSON.parse(this.responseText);
+            //do stuff with data
+            document.writeln("Old way<br>");
+            document.writeln("Name: " + data.name);
+        };
+
+        request.onerror = function () {
+            alert('There was a problem with the request');
+        }
+        request.open('get', 'https://swapi.co/api/people/1/', true);
+        request.send();*/
+
+        /*function get(url) {
+            // Return a new promise.
+            return new Promise((resolve, reject) => {
+                // Do the usual XHR stuff
+                var request = new XMLHttpRequest();
+                request.open('GET', url);
+
+                request.onload = () => {
+                    if (request.status == 200) {
+                        // Resolve the promise with the response text
+                        resolve(request.response);
+                    }
+                    else {
+                        // Otherwise reject with the status text
+                        reject(Error(request.statusText));
+                    }
+                };
+
+                // Handle network errors
+                request.onerror = () => {
+                    reject(Error("Network Error"));
+                };
+
+                // Make the request
+                request.send();
+            });
+        }
+
+        get('https://swapi.co/api/people/1/').then((response) => {
+            //console.log("Success!", response);
+            var data = JSON.parse(response);
+            //do stuff with data
+            document.writeln("New way<br>");
+            document.writeln("Name: " + data.name);
+        }, (error) => {
+            alert('There was a problem with the request: ' + error);
+            //console.error("Failed!", error);
+        });*/
+
+
+        function Vehicle(type, color) {
+            this.type = type;
+            this.color = color;
+        }
+
+        //var car = new Vehicle("Honda", "silver");
+        //document.writeln("Old way<br>");
+        //document.writeln("Car type is " + car.type);
+        //document.writeln("Car color is " + car.color);
+
+
+        /*class Vehicle {
+            constructor(type, color) {
+                this.type = type;
+                this.color = color;
+            }
+
+            getColor() {
+                return this.color;
+            }
+        }*/
+
+        //let car = new Vehicle("Honda", "silver");
+        //document.writeln("New way<br>");
+        //document.writeln("Car type is " + car.type);
+        //document.writeln("Car color is " + car.getColor());
+
+        // Extending the Vehicle
+        /*class Car extends Vehicle {
+            constructor(color, maxSpeed) {
+                super("car", color);
+                this.maxSpeed = maxSpeed;
+            }
+
+            getMaxSpeedFormatted() {
+                return this.maxSpeed + "km/h";
+            }
+        }
+
+        let car1 = new Car("blue", 200);
+        document.writeln("New way of inheritance:<br>");
+        document.writeln("We have a " + car1.getColor() + " car with a max speed of " + car1.getMaxSpeedFormatted());
+        */
+
+        // Car constructor function
+        // when called with the "new" operator,
+        // a new Car object is created
+
+        function Car(maxSpeed, type, color) {
+            // the "new" operator sets the reference of "this" to
+            // a new object, the new object is then passed to the
+            // Vehicle constructor function through the use of call,
+            // so the type and color properties can be set
+            this._super.call(this, type, color);
+            this.maxSpeed = maxSpeed;
+        }
+
+        // cars will inherit from a new object
+        // which inherits from the parent
+        Car.prototype = Object.create(Vehicle.prototype);
+
+        // set the constructor property back to the Car
+        // constructor function
+        Car.prototype.constructor = Car;
+
+        // "_super" is NOT part of ES5, its a convention
+        // defined by the developer
+        // set the "_super" to the Vehicle constructor function
+        Car.prototype._super = Vehicle;
+
+        // this will exist on the car's prototype object
+        Car.prototype.getMaxSpeedFormatted = function() {
+            return this.maxSpeed + "km/h";
+        }
+
+        // instantiate a new Car object
+        var car2 = new Car(200, "Corvette", "red");
+
+        // invoking function on parent prototype
+        document.writeln("Car type is " + car2.type +", color is "+ car2.color);
+
+        // invoking function on child prototype
+        // output "1 Smith, Bob"
+        document.writeln("Car max speed is "+ car2.getMaxSpeedFormatted());
+
+
+
+    </script>
+</body>
+</html>
diff --git a/arrow_examples.html b/arrow_examples.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <div id="newWayArrow">
+        <script>
+            var numbers = [1, 5, 10, 15];
+            var numTimesIndex = numbers.map((x, i) => x * i);
+            document.writeln("ES6 numbers function<br>");
+            document.writeln("Array: [1, 5, 10, 15]<br>")
+            document.writeln("Result: " + numTimesIndex);
+        </script>
+    </div>
+</body>
+</html>
diff --git a/class_example.html b/class_example.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <script>
+
+        //ES5
+        function Vehicle(type, color) {
+            this.type = type;
+            this.color = color;
+        }
+
+        var car = new Vehicle("Honda", "silver");
+        document.writeln("ES5 way<br>");
+        document.writeln("Car type is " + car.type +"<br>");
+        document.writeln("Car color is " + car.color);
+
+
+        /*
+          //ES6
+          class Vehicle {
+            constructor(type, color) {
+                this.type = type;
+                this.color = color;
+            }
+
+            getColor() {
+                return this.color;
+            }
+        }
+
+        let car = new Vehicle("Honda", "silver");
+        document.writeln("ES6 way using constructor and getColor()<br>");
+        document.writeln("Car type is " + car.type + "<br>");
+        document.writeln("Car color is " + car.getColor());
+        */
+    </script>
+</body>
+</html>
diff --git a/inheritance_example.html b/inheritance_example.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <script>
+
+        //ES5
+        function Vehicle(type, color) {
+            this.type = type;
+            this.color = color;
+        }
+
+        // Car constructor function
+        // when called with the "new" operator,
+        // a new Car object is created
+
+        function Car(maxSpeed, type, color) {
+            // the "new" operator sets the reference of "this" to
+            // a new object, the new object is then passed to the
+            // Vehicle constructor function through the use of call,
+            // so the type and color properties can be set
+            this._super.call(this, type, color);
+            this.maxSpeed = maxSpeed;
+        }
+
+        // cars will inherit from a new object
+        // which inherits from the parent
+        Car.prototype = Object.create(Vehicle.prototype);
+
+        // set the constructor property back to the Car
+        // constructor function
+        Car.prototype.constructor = Car;
+
+        // "_super" is NOT part of ES5, its a convention
+        // defined by the developer
+        // set the "_super" to the Vehicle constructor function
+        Car.prototype._super = Vehicle;
+
+        // this will exist on the car's prototype object
+        Car.prototype.getMaxSpeedFormatted = function () {
+            return this.maxSpeed + "km/h";
+        }
+
+        // instantiate a new Car object
+        var car2 = new Car(200, "Corvette", "red");
+
+        document.writeln("ES5 way of prototypical inheritance where Car inherits from Vehicle - complicated code<br>")
+
+        // invoking function on parent prototype
+        document.writeln("Car type is " + car2.type + ", color is " + car2.color + "<br>");
+
+        // invoking function on child prototype
+        // output "1 Smith, Bob"
+        document.writeln("Car max speed is " + car2.getMaxSpeedFormatted());
+
+        /*
+        //ES6
+        class Vehicle {
+            constructor(type, color) {
+                this.type = type;
+                this.color = color;
+            }
+
+            getColor() {
+                return this.color;
+            }
+        }
+        class Car extends Vehicle {
+            constructor(type, color, maxSpeed) {
+                super(type, color);
+                this.maxSpeed = maxSpeed;
+            }
+
+            getMaxSpeedFormatted() {
+                return this.maxSpeed + "km/h";
+            }
+        }
+
+        let car1 = new Car("Mazda","blue", 200);
+        document.writeln("ES6 way of inheritance with simpler syntax:<br>");
+        document.writeln("Car type is " + car1.type + ", color is " + car1.getColor() + "<br>");
+        document.writeln("Car max speed is " + car1.getMaxSpeedFormatted());
+        */
+    </script>
+</body>
+</html>
diff --git a/let_example.html b/let_example.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <script>
+        function varTest() {
+            var x = 1;
+            if (true) {
+                var x = 2;  // same variable!
+                document.writeln("Using var, x in if statement is " + x + "<br>");  // 2
+            }
+            document.writeln("Using var, x in function is " + x);  // 2
+        }
+        varTest();
+
+        /*function letTest() {
+            let x = 1;
+            if (true) {
+                let x = 2;  // different variable
+                document.writeln("Using let, x in if statement is " + x + "<br>");  // 2
+            }
+            document.writeln("Using let, x in function is " + x); //1
+        }
+        letTest();*/
+    </script>
+</body>
+</html>