FTT-JavaScript/aulajs20.html at master · danielscarvalho/FTT-JavaScript · 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
<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Aula 20</title>
    <script>

    const createLiTagWithText = text => {
        const li = document.createElement("li");
        li.innerHTML = text;
        return li;
    }

    function pageSetup() {
        console.log("Page setup...");
    }

    function newItem() {

        const qElements = [
            'Hydrogen',
            'Helium',
            'Lithium',
            'Beryllium',
            'Oxygen',
            'Carbon'
            ];

        let olTag = document.getElementById("oltag");

        console.log(qElements.map(element => [element.length, element]));

        //Nada de FOR - programação funcional

        /*
        // outra opção...
        qElements.map(element => { let liTag = document.createElement("li");
                                    liTag.innerHTML = element;
                                    olTag.appendChild(litag) });
        */

        qElements.map(element => olTag.appendChild(createLiTagWithText(element)));

    }
    </script>
    <style>
    </style>

</head>

<body onload="pageSetup();">

    <h1>JavaScript Aula 20</h1>
    <h2>Arrow Function</h2>
    <button onclick="newItem();">List Materials</button>
    <hr>
    <ol id="oltag">
    </ol>
    <p>
        https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions
        <br>
        https://www.w3schools.com/js/js_arrow_function.asp
    </p>
</body>

</html>