es6/ES6-examples.html at master · JavascriptAugusta/es6 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
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>