revision new files

Chapter 12/asyncawait.js

@@ -0,0 +1,16 @@
+function saySomething(x) {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve('something' + x);
+        }, 2000);
+    });
+}
+
+async function talk(x) {
+    const words = await saySomething(x);
+    console.log(words);
+}
+
+talk(2);
+talk(4);
+talk(8);

Chapter 12/callbacks.js

@@ -0,0 +1,63 @@
+function doSomething(callback) {  
+    callback();
+}
+
+function sayHi() {
+    console.log("Hi!");
+}
+
+doSomething(sayHi);
+
+
+function judge(grade) {
+    switch (true) {
+        case grade == "A":
+            console.log("You got an", grade, ": amazing!");
+            break;
+        case grade == "B":
+            console.log("You got a", grade, ": well done!");
+            break;
+        case grade == "C":
+            console.log("You got a", grade, ": alright.");
+            break;
+        case grade == "D":
+            console.log("You got a", grade, ": hmmm...");
+            break;
+        default:
+            console.log("An", grade, "! What?!");
+    }
+}
+
+function getGrade(score, callback) {
+    let grade;
+    switch (true) {
+        case score >= 90:
+            grade = "A";
+            break;
+        case score >= 80:
+            console.log(score);
+            grade = "B";
+            break;
+        case score >= 70:
+            grade = "C";
+            break;
+        case score >= 60:
+            grade = "D";
+            break;
+        default:
+            grade = "F";
+    }
+    judge(grade);
+}
+
+getGrade(85, judge);
+
+setInterval(500, encourage);
+
+function encourage() {
+    console.log("You're doing great, keep going!");
+}
+
+setInterval(function () {
+    console.log("You're doing great, keep going!");
+}, 500)

Chapter 12/chainedpromises.js

@@ -0,0 +1,26 @@
+const promise = new Promise((fulfill, reject) => {
+    fulfill('success!');
+    //reject('oops...');
+})
+    .then(value => {
+        console.log(value);
+        return 'we';
+    })
+    .then(value => {
+        console.log(value);
+        return 'can';
+    })
+    .then(value => {
+        console.log(value);
+        return 'chain';
+    })
+    .then(value => {
+        console.log(value);
+        return 'promises';
+    })
+    .then(value => {
+        console.log(value);
+    })
+    .catch(value => {
+        console.log(value);
+    })

Chapter 12/complex.json

@@ -0,0 +1,34 @@
+{
+    "companies": [
+        {
+            "name": "JavaScript Code Dojo",
+            "addresses": [
+                {
+                    "street": "123 Main street",
+                    "zipcode": 12345,
+                    "city" : "Scott"
+                },
+                {
+                    "street": "123 Side street",
+                    "zipcode": 35401,
+                    "city" : "Tuscaloosa"
+                }
+            ]
+        },
+        {
+            "name": "Python Code Dojo",
+            "addresses": [
+                {
+                    "street": "123 Party street",
+                    "zipcode": 68863,
+                    "city" : "Nebraska"
+                },
+                {
+                    "street": "123 Monty street",
+                    "zipcode": 33306,
+                    "city" : "Florida"
+                }
+            ]
+        }
+    ]
+}

Chapter 12/parsing.js

@@ -0,0 +1,12 @@
+let str = "{\"name\": \"Maaike\", \"age\": 30}";
+let obj = JSON.parse(str);
+console.log(obj.name, "is", obj.age);
+
+let dog = {
+    "name": "wiesje",
+    "breed": "dachshund"
+};
+
+let strdog = JSON.stringify(dog);
+console.log(typeof strdog);
+console.log(strdog);

Chapter 12/promises.js

@@ -0,0 +1,19 @@
+let promise = new Promise(function (resolve, reject) {
+    // do something that might take a while
+    // let's just set x instead for this example  
+    let x = 20;
+    if (x > 10) {
+        resolve(x); // on success
+    } else {
+        reject("Too low");  // on error
+    }
+});
+
+promise.then(
+    function (value) {
+        console.log("Success:", value)
+    },
+    function (error) {
+        console.log("Error:", error)
+    }
+);

Chapter 12/storage.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+    <div id="whatname"></div>
+    <button onclick="whatName()">What name?</button>
+    <script>
+        window.localStorage.setItem("name", "That name!");
+        function whatName() {
+            window.localStorage.clear();
+            document.getElementById("whatname").innerText = window.localStorage.getItem("name");
+        }
+    </script>
+</body>
+
+</html>

Chapter 14/exampled3.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        svg {
+            background-color: lightgrey;
+        }
+    </style>
+</head>
+<body>
+    <svg id="drawing-area" height=100 width=500></svg>
+    <script>
+        let svg = d3.select("#drawing-area");
+        svg.append("circle")
+            .attr("cx", 100).attr("cy", 50).attr("r", 20).style("fill", "pink");
+        svg.append("circle")
+            .attr("cx", 200).attr("cy", 20).attr("r", 20).style("fill", "black");
+        svg.append("circle")
+            .attr("cx", 300).attr("cy", 70).attr("r", 20).style("fill", "grey");
+    </script>
+</body>
+
+</html>

Chapter 14/examplereact.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script>
+        let p = React.createElement("p", null, "Hi Emile, what's up?");
+        ReactDOM.render(
+            p,
+            document.getElementById("root")
+        );
+    </script>
+</body>
+
+</html>

Chapter 14/exampleunderscore.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js
+    "></script>
+</head>
+
+<body>
+    <script>
+        _.each([1, 2, 3], alert);
+    </script>
+</body>
+
+</html>