Javascript - Curso Javascript.txt

Curso de Javascript
-------------------

https://www.javascripttutorial.net/
https://learn-js.org/

https://javascript.info/

https://www.java5cript.com/
https://github.com/trekhleb/javascrip...
https://www.jsv9000.app/

# Criando uma web com html, javascript e css
https://www.youtube.com/watch?v=-0e-mLEn_ck&list=PLMbclvogjXZWgHgQcY5H4MvKtEW8q53cC

Fundamentos
-----------


1. Instalações
--------------

    . Instalação do Nodejs

        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | $SHELL
        nvm --version

        # Para instalar a versão lts mais recente
        nvm install --lts

        # Se quiser instalar uma versão especifica, utilize:
        # nvm install 18.20.4

        # Se quiser listar as versões do node disponivel no repositorio remoto
        # nvm ls-remote

        # Se quiser listar as versões instalada na máquina atual
        # nvm ls

        # Para usar uma versão instalada na máquina atual
        # nvm use 20.17.0

        # Para desinstalar uma versão do node js
        # nvm uninstall 18.20.4

        nvm use 18.20.4
        node -v
        npm -v

    . Instalação do Angular:

        . Acesse a URL https://angular.io/cli para ter acesso a documentação do Angular.

        . Para instalar o Angular na sua máquina execute o comando abaixo:

            # Utilize a linha abaixo para manter compatibilidade com o curso
            npm install -g @angular/cli@15

            # Se usarmos o comando com o parâmetro @angular/cli sem identificar a versão "@15"
            # o angular a ser instalado será a versão atual
            # npm install -g @angular/cli

        . Para desinstalar o Angular

            # npm uninstall -g @angular/cli

            # npm cache clean --force

        . Para atualizar:

            # npm install --save-dev @angular/cli@latest    

        . Para saber a versão instalada

            ng version

    . Instalação do VSCode:

        . Acessar a pagina de download da microsoft:

            https://code.visualstudio.com/download

        . Baixar o arquivo .deb 

        . Abrir o terminal e acessar a pasta Downloads

        . Executar o comando abaixo:

            sudo dpkg -i code_1.37.1-1565886362_amd64.deb

        . Atalhos

            Alt + 1, 2, 3, 4, ...	Posiona na aba no.
            Ctrl + b				Ativar o menu lateral esquerdo 
            Ctrl + Alt + P			Para ativar a linha de comandos 
            Ctrl + P 				Localiza um determinado arquivo
            Ctrl + W				Fecha a aba corrente
            Ctrl + Shift + W		Fecha todas as abas abertas

            Ctrl + Rolagem do Mouse	
                    sobre as abas 
                    abertas			Faz a rolagem das abas.

            Ctrl + K + C ou 
            Ctrl + /				Comenta linha atual, ou bloco selecionado

            Ctrl + K + U ou
            Ctrl + /				Descomenta linha, ou bloco selecionado.

            Ctrl + Shift + 
                    Acento Agudo	Abre o terminal na parte inferior

            Ctrl + X				Apaga linha
            Ctrl + H				Localiza e atualiza uma expressão
            Ctrl + F2				Selecione um texto e pressionando Ctrl + F2 
                                    muda todos os textos equivalente a medida
                                    que vai se digitando
            Alt + Arrow(up/Down)    Move a linha para cima, ou para baixo.
            Ctrl + Shift + O		Abre a lista de funções/métodos da classe atual
            Ctrl + G				Posicionar na linha No. que for digitado
            Alt + Backspace			Apaga palavra inteira a esquerda
            Ctrl + Shift + .		Mostra os métodos da classe
            Ctrl + Shift + L		Altera dinamicamente em todo o arquivo a palavra que está sendo alterada
            Ctrl + M				Para cercar um conjunto de tags numa página HTML ( Precisa de configurar, verifique como fazer em "Configurações" logo abaixo)
            cTRL + Ctrl + -			Para apagar uma tag que abraça um conjunto de tags HTML ( Precisa de configurar, verifique como fazer em "Configurações" logo abaixo)

        . Instale as seguinte Extensões:

            open-in-browser			- Shortcut Ctrl+Alt+O, Alt + B
            Material Icon Theme
            Numbered Bookmarks		- Shortcut Ctrl+Shit+1,2,3... , Ctrl+1,2,3...
            HTML CSS Support		- Ctrl + Space mostra as opções
            Intellisense for CSS Class
            JS-CSS-HTML Formatter	- Ctrl + Shift + I
            Live Server				- File -> Open Folder, Alt + L + O / Click no simbolo na barra do rodapé
                                    - Extensao que exibe online as alteraçoes feitas a página 
                                        no navegador.
                                    - Acesse o setting e inclua  "liveServer.settings.CustomBrowser": "chrome"
                                    - Para colocar o VSCode do lado do navegador clique Super + Left no VSCode
                                        e Super + Left no navegador
            Rainbow Brackets		- Ajuda identificar a abertura e fechamentos dos parenteses
            JQuery Code Snippets	- Basta digitar algo que comece com "jq"
            tslint - Plugin para apontar ausências no padrão de programação, deixando em vermelhos os pontos que não estão
                        em conformidade. 

                . Quando for trabalhar numa pasta de projeto, digite Ctrl + Shift + P e digitar "tslint", 
                    surge vários comandos especificos do plugin, escolha "Enable Workspace Library Execution"

                . Acrescente o trecho abaixo no arquivo launch.json para habilitar o plugin:

                    // Dentro do array "configurations"
                    "editor.codeActionsOnSave": {
                        "source.fixAll.tslint": true
                    }

            
        . Configurações:

            . Digite Ctrl K+S, localize o item "Delete Line" e configure Ctrl + D
            . Acesse View / Minimap para retirar o scroll de código da direita
            . Acessar configurações, ir em "Settings", Text editors, Sugestions:
                . Na opção "Accept Suggestion On Enter" deixar como off
                . Na opção "Suggest: Insert Mode" deixar como replace
                . Na opção "Quick Suggestions Delay" deixar como 1000
            . Acesse "Keyboard Shortcuts" em configurações:
                . Digite "Emmet: Wrap..." e altere o "Keybinding" para "Alt + M"
                    . De agora em diante, ao editar uma página HTML e quiser cercar um bloco de tags com uma outra, 
                        basta:
                        . Selecionar o bloco
                        . Digitar "Alt + M"
                        . Informar a tag que deseja colocar, somente a identificação sem "<>", por exemplo: "div"
                . Digite "Emmet: Remove Tag" e altere o "Keybinding" para "Alt+Shift+-", o "-" deve ser do bloco numerico
                    . De agora em diante, se precisar apagar uma tag HTML que cerca um conjunto de outras tags, basta posicioinar
                        o cursor sobre a "TAg" que deseja apagar e pressionar "Ctrl+Shift+-"
            . Digite "Ctrl+Shift+P" e digite "Preference: Open User Settings (JSON)"
                . Digite a configuração abaixo:

                    ...
                    "editor.linkedEditing": true,
                    "html.format.unformatted": "input",
                    "workbench.tree.indent": 20,
                    "workbench.tree.renderIndentGuides": "always",
                    "workbench.colorCustomizations": {
                        "tree.indentGuidesStroke": "#c8e0be"
                    }
            . Acesse Configurações -> Profile -> Import Profile 
                . Informe o link "https://vscode.dev/profile/github/12bd0215e34ffe344361b7dcf767842b" para resgatar as configurações para desenvolvimento em .NET

    . Instalação do JSon Server

        # Instalação do JSon Server
        npm install json-server

        # Crie o arquivo json abaixo com o nome de db.json
        {
            "posts": [
                { "id": "1", "title": "a title", "views": 100 },
                { "id": "2", "title": "another title", "views": 200 }
            ],
            "comments": [
                { "id": "1", "text": "a comment about post 1", "postId": "1" },
                { "id": "2", "text": "another comment about post 1", "postId": "1" }
            ],
            "profile": {
                "name": "typicode"
            }
        }


        # Execute o comando abaixo
        npx json-server db.json

        # Testando as rotas
        curl http://localhost:3000/posts/1

        curl http://localhost:3000/posts

2. Começando
------------

    . DevTools do Browser

        . Recurso disponível nos navegadores, acessível através da tecla F12.

        . Fornece recursos para os desenvolvedores verificar a execução dos componentes da página, visualizar e editar o HTML, CSS e JavaScript.

            . Inspeção de elementos - a capacidade de editar o código HTML e CSS em tempo real, na guia "Elements"
            . Depuração de JavaScript  - Nas guias Console e Sources.
            . Emulação de dispositivos
            . Análise de desempenho - medir a performance do site, incluindo tempo de carregamento, uso de recursos e consumo de memória.

        . Demo

            . Crie a página abaixo:

                <!DOCTYPE html>
                <html lang="en">

                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                </head>

                <body>

                    <script>
                        console.log('Hello, devtools!');

                        // the following code causes an error
                        let greeting = msg;
                    </script>

                </body>

                </html>

            . Execute ela no navegador

            . Acione a tecla F12

                . Depuração de código
                    
                    . Acesse a guia "Sources" 

                    . Coloque um breakpoint na linha do "console.log('Hello, devtools!');"

                    . Recarregue a página e faça o debugger através da barra de ferramentas passo a passo

                        . Observe que podemos, durante o debugger, verificar conteúdo de variáveis na tela do "Console"

                        . Podemos dar prosseguimento ao debugger através das teclas:

                            F10 - Vai para a próxima linha
                            F11 - Se for uma subrotina, vai para a linha dessa sub
                            Shift + F11 - Se for uma subrotina, volta para a rotina chamadora
                            F8 - Continua a execução, indo para o próximo BreakPoint se houver.

                    . Observe que na linha "let greeting = msg;" ocorrerá um erro devido a variável "msg" não ter sido declarada.

                . Inpeção de Elementos

                    . Acesse a guia "Elements"

                    . Consulte as tags do HTML, no lado esquerdo

    . Exemplo "Hello World"

        . Existem diversas formas de inserir um bloco javascript na sua página, como por exemplo:

            . Embutido na própria página:

                <script>
                    ...
                </script>

            . Através de um arquivo externo:

                <script src="js/app.js"></script>

        . Existem dois atributos que podemos definir para carregar os scripts:

            . async - instrui o navegador para executar o script de forma assíncrona

                <script async src="service.js"></script>
                <script async src="app.js"></script>

            . defer - instrui o navegador executar o script depois que a página for carregada

                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>JavaScript defer demonstration</title>
                        <script defer src="defer-script.js"></script>
                    </head>
                    <body>
                    </body>
                </html>

3. Fundamentos
--------------

    . Ponto e virgula ";"

        . Colocado ao termino de cada linha de execução, porém não obrigatório

            let message = "Welcome to JavaScript";

            console.log(message);         

    . Chaves "{}" 

        . Delimita um bloco de linhas de comandos:

            if (window.localStorage) {
                console.log('The local storage is supported');
            }

    . Comentários

        "//"    Comenta uma linha
        "/* */" Comenta um bloco de linhas

    . Palavras reservadas

        . Definidas no ECMA-262

            break	    case	        catch
            continue	debugger	    default
            else	    export	        extends
            function	if	            import
            new	        return	        super
            throw	    try	            null
            void	    while	        with
            class	    delete	        finally
            in	        switch	        typeof
            yield	    const	        do
            for	        instanceof	    this
            var		        

        . Definidas no ECMA-252

            enum	    implements	    let
            protected	private	        public
            await	    interface	    package
            implements	public

    . Variáveis

        . Podemos utilizar três formas para declarar variáveis:

            . "let" Tem escopo de bloco, o que significa que uma variável declarada com let é visível apenas 
                    dentro do bloco em que foi declarada (por exemplo, dentro de chaves {}).

                    Hoisting: Variáveis declaradas com let também são içadas, mas não podem ser acessadas antes 
                    de sua declaração no código. Isso resulta em um erro de referência se você tentar usá-las 
                    antes da declaração.

                    Reatribuição: Pode ser reatribuída, mas não pode ser redeclarada no mesmo escopo.

                    Exemplo:

                        function example() {
                        // console.log(a); // ReferenceError: Cannot access 'a' before initialization
                        let a = 10;
                        console.log(a); // 10
                        }

                        example();

                        let b = 20;
                        // let b = 30; // SyntaxError: Identifier 'b' has already been declared
                        b = 30; // Reatribuição permitida
                        console.log(b); // 30

            . "var" tem escopo de função, o que significa que uma variável declarada com var é visível 
                    em toda a função em que foi declarada.
                    
                    Hoisting: Variáveis declaradas com var são "içadas" (hoisted) para o topo do seu escopo, 
                    mas a inicialização não é içada. Isso significa que você pode usar a variável antes de sua declaração, 
                    mas ela terá o valor undefined até que a linha de declaração seja executada.

                    Reatribuição: Pode ser reatribuída e redeclarada dentro do mesmo escopo.

                    Exemplo:

                        function example() {
                            console.log(x); // undefined (hoisting)
                            var x = 10;
                            console.log(x); // 10
                        }

                        example();

                        var y = 20;
                        var y = 30; // Redeclaração permitida
                        console.log(y); // 30


            . "const"   Também tem escopo de bloco, assim como let.

                        Hoisting: Variáveis declaradas com const são içadas, mas não podem ser acessadas antes de sua declaração 
                        no código, resultando em um erro de referência.

                        Reatribuição: Não pode ser reatribuída nem redeclarada. Uma vez que uma variável é atribuída com const, 
                        seu valor não pode ser alterado. No entanto, se a variável for um objeto ou um array, suas propriedades 
                        ou elementos podem ser modificados.

                        Exemplo:

                            function example() {
                                // console.log(c); // ReferenceError: Cannot access 'c' before initialization
                                const c = 10;
                                console.log(c); // 10
                            }

                            example();

                            const d = 20;
                            // const d = 30; // SyntaxError: Identifier 'd' has already been declared
                            // d = 30; // TypeError: Assignment to constant variable

                            const obj = { name: "Alice" };
                            obj.name = "Bob"; // Modificação permitida
                            console.log(obj.name); // Bob

                            const arr = [1, 2, 3];
                            arr.push(4); // Modificação permitida
                            console.log(arr); // [1, 2, 3, 4]

        . Resumo

            var:    Escopo de função, içamento com inicialização undefined, permite reatribuição e redeclaração.
            let:    Escopo de bloco, içamento sem inicialização, permite reatribuição, mas não redeclaração.
            const:  Escopo de bloco, içamento sem inicialização, não permite reatribuição nem redeclaração, 
                    mas permite a modificação de objetos e arrays.
            
            Escolher entre let, var e const depende do comportamento desejado para a variável. Em geral, let e const 
            são preferidos sobre var devido ao seu escopo de bloco e comportamento mais previsível.

    . Tipos de dados

        . O valor da variável define o tipo de dado.

            Exemplo:

                let counter = 120; // counter is a number
                counter = false;   // counter is now a boolean
                counter = "foo";   // counter is now a string

        . Para saber o tipo atual da variável podemos usar a função "typeof":

            Exemplo:

                let counter = 120;
                console.log(typeof(counter)); // "number"

                counter = false; 
                console.log(typeof(counter)); // "boolean"

                counter = "Hi";
                console.log(typeof(counter)); // "string"

        . "undefined" são variáveis declaradas, mas não iniciadas. 

            Exemplo:

                let counter;
                console.log(counter);        // undefined
                console.log(typeof counter); // undefined

        . Os tipos de dados (data types) podem ser classificados em dois grandes grupos: tipos primitivos e tipos de referência (objetos). 
            Aqui está uma visão geral dos tipos de dados disponíveis na linguagem:
        
        . Tipos Primitivos:

            Number
          
                . Representa números inteiros e de ponto flutuante.

                    . Exemplo:

                        let age = 25;
                        let price = 19.99;

                        let numero = 10.5;
                        console.log(numero.toFixed(2)); // Saída: "10.50"

                        let stringNumero = "10.5";
                        console.log(parseFloat(stringNumero)); // Saída: 10.5

                        console.log(Number(stringNumero)); // Saída: 10.5                


                . Se você precisar de uma precisão maior, pode considerar usar uma biblioteca de aritmética de precisão, como a decimal.js.

                    . Exemplo:

                        ...
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/10.2.1/decimal.min.js"></script>

                        <script>
                            // Criando um objeto Decimal
                            let decimal1 = new Decimal(1.2345);
                            let decimal2 = new Decimal("6.7890");

                            // Adição
                            let resultado = decimal1.plus(decimal2);
                            console.log(resultado.toString()); // Saída: "7.0235"

                            // Subtração
                            let diferenca = decimal1.minus(decimal2);
                            console.log(diferenca.toString()); // Saída: "-5.5545"

                            // Multiplicação
                            let produto = decimal1.times(decimal2);
                            console.log(produto.toString()); // Saída: "7.86392"

                            // Divisão
                            let quociente = decimal1.dividedBy(decimal2);
                            console.log(quociente.toString()); // Saída: "0.177346842105263157894736842105263"

                            // Potenciação
                            let exponenciacao = decimal1.pow(2);
                            console.log(exponenciacao.toString()); // Saída: "1.5237313432835820753283582075328"

                            // Arredondamento
                            let arredondado = decimal1.toDecimalPlaces(2);
                            console.log(arredondado.toString()); // Saída: "1.23"
                        </script>
            String

                . Representa uma sequência de caracteres.

                . Utilizamos "+" para concatenar dois valores strings, ou "`" acento craseado, ou +=

                . Backslash para representar caracteres especiais:

                    Windows line break: '\r\n'
                    Unix line break: '\n'
                    Tab: '\t'
                    Backslash '\'

                . The following example uses the backslash character to escape the single quote character in a string:

                . Para comparar duas string utilize os operadores >, >=, <, <=, == 

                . Exemplo:

                    let name = "Alice";
                    let greeting = 'Hello, world!';

                    let msg = greeting + " " + name;    // Hello, World! Alice

                    // Acento craseado, só funciona assim
                    let msg2 = `${greeting} ${name}`;   // Hello, World! Alice 

                    let msg3 = 'Hello, World";

                    msg3 += " ";
                    msg3 += "Alice";        // Hello, World Alice


                    name[0] = "a";
                    console.log(name); // "Alice"   Podemos pegar o conteúdo como array, mas não altera-lo

                    let str = 'I\'m a string!';         // I´m a string

            Boolean

                . Representa um valor verdadeiro (true) ou falso (false).

                . Exemplo:

                    let isActive = true;
                    let isComplete = false;

            Undefined
            
                . Representa uma variável que foi declarada, mas não inicializada.

                . Exemplo:

                    let x;
                    console.log(x); // undefined

            Null

                . Representa a ausência intencional de qualquer valor de objeto.

                . Exemplo:

                    let y = null;

                    console.log(y);     // object

            Symbol (Introduzido no ES6)

                . Representa um valor único e imutável, frequentemente usado como identificador único para propriedades de objetos.

                . Veremos mais detalhes deste tipo mais a frente.

                . Exemplo:

                    let sym = Symbol('description');



            NaN (Not a Number)

                . Indica um número inválido

                . Exemplo:

                    console.log('a'/2); // NaN;

            BigInt (Introduzido no ES11)

                . Representa números inteiros de precisão arbitrária.

                . Exemplo:
            
                    let bigInt = 1234567890123456789012345678901234567890n;        


        . Além dos tipos de variáveis apresentados, podemos precisar trabalhar com variáveis do tipo data.

            . Existem várias bibliotecas JavaScript populares para trabalhar com datas. Aqui estão algumas 
                das principais:

                . Moment.js:    É uma das bibliotecas mais populares e amplamente utilizadas para trabalhar 
                                com datas em JavaScript. Oferece uma variedade de funcionalidades, incluindo 
                                formatação de datas, cálculos de datas, manipulação de fusos horários, etc.

                    . Exemplos de uso da biblioteca Moment.js:

                        <!-- Importar a biblioteca moment.js em uma página HTML -->
                        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

                        <script>
                            // Criar um momento atual
                            let now = moment();

                            // Criar um momento com base em uma string
                            let date = moment('1995-12-25');

                            // Criar um momento com base em um objeto Date
                            let date2 = moment(new Date(1995, 11, 25));

                            // Adicionar 7 dias ao momento atual
                            let afterSevenDays = moment().add(7, 'days');

                            // Subtrair 3 meses do momento atual
                            let beforeThreeMonths = moment().subtract(3, 'months');

                            // Calcular a diferença de tempo entre dois momentos
                            let duration = moment.duration(afterSevenDays.diff(beforeThreeMonths));

                            // Formatando um momento com um padrão
                            let formattedDate = moment().format('DD/MM/YYYY');
                        </script>

                . Day.js:       É uma biblioteca mais leve e moderna que oferece funcionalidades semelhantes 
                                à Moment.js, mas com uma sintaxe mais simples e uma pegada menor.

                    <script src="https://unpkg.com/dayjs"></script>
                    <script>
                        const data = dayjs();
                        console.log(data.toString()); // Saída: "2023-02-20T14:30:00.000Z"

                        const data2 = dayjs();
                        console.log(data2.format('DD/MM/YYYY')); // Saída: "2024-09-22"

                        const data3 = dayjs();
                        console.log(data3.add(3, 'days').toString()); // Saída: "2023-02-23T14:30:00.000Z"
                        console.log(data3.subtract(2, 'hours').toString()); // Saída: "2023-02-20T12:30:00.000Z"
                    </script>

                . Luxon:        É uma biblioteca de datas moderna e poderosa que oferece uma variedade de 
                                funcionalidades, incluindo formatação de datas, cálculos de datas, manipulação 
                                de fusos horários, etc.

                . Date-fns:     É uma biblioteca de funções de datas que oferece uma variedade de funcionalidades, 
                                incluindo formatação de datas, cálculos de datas, manipulação de fusos horários, etc.

                . js-joda:      É uma implementação JavaScript da biblioteca Joda-Time, que é uma biblioteca de 
                                datas popular em Java.

        . Tipos de Referência
        
            Object

                . Representa uma coleção de propriedades, onde cada propriedade é uma associação entre um nome (ou chave) e um valor.

                . Exemplo:

                    let contact = {
                        firstName: 'John',
                        lastName: 'Doe',
                        email: 'john.doe@example.com',
                        phone: '(408)-555-9999',
                        address: {
                            building: '4000',
                            street: 'North 1st street',
                            city: 'San Jose',
                            state: 'CA',
                            country: 'USA'
                        }
                    }

                    console.log( contact.phone);
                    console.log( contact["phone"]);
                    console.log( contact.address.street );

                . "bind" -  É uma função que cria uma nova função que tem o mesmo comportamento que a função original, 
                            mas com um contexto (this) específico.

                                    +---------------------->     é o objeto que será usado como contexto (this) dentro da função
                                    |
                    função.bind(thisArg, arg1, arg2, ...)
                                            |   |
                                            +---+---------->     são argumentos opcionais que serão passados para a função  

                    Exemplo:

                        const pessoa = {
                            nome: 'João',
                            idade: 30
                        };

                        function apresentar(titulo, cidade) {
                            console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos. Sou ${titulo} de ${cidade}.`);
                        }

                        const apresentarJoao = apresentar.bind(pessoa); // É possivel passar parâmetros além do "thisArg", porém nesse caso
                                                                        // os parâmetros passados pela chamada "apresentarJoao( 'Engenheiro', 'São Paulo')
                                                                        // terão que trocar de lugar indo para o método "bind" "
                                                                        // apresentar.bind(pessoa, 'Engenheiro', 'São Paulo')"

                        apresentarJoao('Engenheiro', 'São Paulo');
                        // Saída: "Olá, meu nome é João e tenho 30 anos. Sou Engenheiro de São Paulo."

                    . Quando o método "bind" é chamado, ele cria uma nova função que tem o mesmo comportamento que a função original, 
                        mas com o contexto (this) definido por thisArg. Além disso, os argumentos arg1, arg2, ... são passados para 
                        a função como argumentos adicionais


            Array

                . Um tipo especial de objeto usado para armazenar listas ordenadas de valores.
        
                . Exemplo:

                    let arr = new Array();
                    let arr = [];
                    let athletes = new Array(3); 

                    let numbers = [1, 2, 3, 4, 5];

                    console.log( numbers[0] );  // 1

                    let scores = new Array(9,10,8,7,6);


                . Observe se usarmos a criação do array com o construtor Array(1,2,...), precisamos do operador "new".

                . Podemos adicionar um novo item diretamente no array sem fazer uso de funções/métodos:

                    let fruits = ["Apple", "Orange", "Plum"];

                    fruits[3] = "Banana";
                    fruits[4] = "Pear";
                    fruits[5] = "Peach";

                    console.log(fruits);    // ['Apple', 'Orange', 'Plum', 'Banana', 'Pear', 'Peach']
                    console.log(fruits[3]); // "Banana"

                . Um array pode adicionar outros tipos de objetos:

                    // mix of values
                    let arr = [ 'Apple', { name: 'John' }, true, function() { console.log('hello'); } ];

                    console.log(arr[0]); // Apple

                    // get the object at index 1 and then show its name
                    console.log( arr[1].name ); // John

                    // get the function at index 3 and run it
                    arr[3](); // hello


                . Métodos de um objeto Array:

                    . "length" - Retorna o total de elementos do array:

                        let fruits = ["Apple", "Orange", "Plum"];

                        console.log( fruits.length ); // 3

                    . "push" e "unshift" - Para adicionar um elemento ao array utilizamos o método "push", ou "unshift" para adicionar o item no inicio:

                        let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
                        seas.push('Red Sea');   // Adiciona no final do array

                        console.log(seas);  // [ 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]

                        seas.unshift('Blue Sea');   // Adiciona no inicio do array

                        console.log(seas);  // [ 'Blue Sea', 'Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea', 'Red Sea' ]

                    . "pop" e "shift" - Para eliminar um elemento ao array utilizamos "pop", ou "shift"

                        let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
                        const lastElement = seas.pop();         // Remove o item no final do array
                        console.log(lastElement); 

                        const firstElement = seas.shift();

                        console.log(firstElement);              // Remove o item do inicio do array

                    . "indexOf" - Para localizar um item no array utilizamos o método "indexOf":

                        let seas = ['Black Sea', 'Caribbean Sea', 'North Sea', 'Baltic Sea'];
                        let index = seas.indexOf('North Sea');

                        console.log(index); // 2

                    . "isArray" - Para verificar se um objeto é array utilizamos o metodo "isArray":

                        console.log(Array.isArray(seas)); // true

                    . "filter" -  função de array que cria um novo array com todos os elementos que passam no teste implementado pela função 
                                    fornecida.

                        // arr      é o array original
                        // callback é a função de teste que é chamada para cada elemento do array
                        // thisArg  é o valor que é usado como this dentro da função de teste
                        var novoArray = arr.filter(callback[, thisArg])                                    

                        . A função de teste callback é chamada com os seguintes argumentos:

                            element: o elemento atual do array
                            index: o índice do elemento atual no array
                            array: o array original

                        .Se a função de teste retornar true, o elemento é incluído no novo array. Se retornar false, o elemento é ignorado.

                            var numeros = [1, 2, 3, 4, 5, 6];

                            var pares = numeros.filter(function(element) {
                                return element % 2 === 0;
                            });

                            console.log(pares); // [2, 4, 6]

                        . Podemos usar arrow functions para tornar o código mais conciso:

                            var numeros = [1, 2, 3, 4, 5, 6];

                            var pares = numeros.filter(element => element % 2 == 0 );

                            console.log(pares); // [2, 4, 6]

                    . "find" - Função de array que retorna o primeiro elemento do array que passa no teste implementado pela função fornecida.

                        // Os parâmetros segue a mesma lógica do método "filter"
                        var encontrado = arr.find(callback[, thisArg])

                        Exemplo:

                            var frutas = ['maçã', 'banana', 'laranja', 'uva'];

                            var encontrada = frutas.find(function(fruta) {
                                return fruta === 'banana';
                            });

                            console.log(encontrada); // 'banana'



                            ou

                            var frutas = ['maçã', 'banana', 'laranja', 'uva'];

                            var encontrada = frutas.find(fruta => fruta === 'banana');                            

                            console.log(encontrada); // 'banana'

                    . "reduce" -  é usado para aplicar uma função a cada elemento de um array e reduzi-los a um único valor

                        const numbers = [1, 2, 3, 4, 5];

                        //                                  +----------------> A função de callback (accumulator, current) é chamada para cada elemento do array
                        //                                  |
                        const sum = numbers.reduce((accumulator, current) => {
                            return accumulator + current;
                        }, 0);  //      |           |
                        // |            |           +------------------------> O current é o elemento atual do array
                        // |            +------------------------------------> O accumulator é o valor retornado pela função de callback na iteração anterior
                        // +-------------------------------------------------> Valor utilizado para iniciar a variável "accumalator"
                        //
                        // No primeiro passo, o accumulator é iniciado com o valor 0 (o segundo argumento da função reduce) e o 
                        // current é o primeiro elemento do array (1). A função de callback retorna 0 + 1 = 1.
                        //
                        // No segundo passo, o accumulator é 1 e o current é o segundo elemento do array (2). A função de callback retorna 1 + 2 = 3


                        console.log(sum); // imprime 15


                        // Outro Exemplo

                        const names = ['John', 'Jane', 'Bob', 'Alice'];

                        const fullName = names.reduce((accumulator, current) => {
                            return accumulator + ', ' + current;
                        }, '');

                        console.log(fullName); // imprime 'John, Jane, Bob, Alice'

                    . "apply" ou "call" - É um método que permite chamar uma função em um contexto específico, definido pelo objeto "this". 
                                            Ela é usada para definir o valor de "this" dentro da função e passar argumentos para a função.

                        //              +------------------>    é o objeto que será usado como contexto (this) dentro da função 
                        //              |
                        função.apply(thisArg, argsArray)
                        //       |                |
                        //       |                +-------->     é um array de argumentos que serão passados para a função
                        //       +------------------------->     poderia ter sido usado a função "call" ao invés de "apply"

                        . Quando a função "apply()" é chamada, a função é executada com o contexto (this) definido por "thisArg" e os 
                            argumentos passados em "argsArray".

                            const pessoa = {
                                nome: 'João',
                                idade: 30
                            };

                            function apresentar() {
                                console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
                            }

                            apresentar.apply(pessoa); // Saída: "Olá, meu nome é João e tenho 30 anos."

                        . Diferença entre "apply" e "call":

                            . "apply" - Os argumentos são passados em um array.

                                função.apply(thisArg, argsArray)

                            . "call" - Os argumentos são passados individualmente, separados por vírgulas.

                                função.call(thisArg, arg1, arg2, ...)

                . Formas de iterar um array:

                    const scores = [22, 54, 76, 92, 43, 33];

                    // Com método "map"
                    scores.map( (elemento, indice ) => 
                    { 
                        console.log( "Score " + elemento + " Indíce " + indice );
                    });

                    // Com "for..in"
                    for (i in scores) {
                        console.log(scores[i]);
                    }

                    // Com "forEach"
                    scores.forEach((score) => {
                        console.log(score);
                    });

                    scores.forEach((score) => console.log(score));

                    // Com "while"
                    let i = 0;

                    while (i < scores.length) {
                        console.log(scores[i]);
                        i++;
                    }

                    // Com "do"
                    let i = 0;

                    do {
                        console.log(scores[i]);
                        i++;
                    } while (i < scores.length);


                    // Com "for"
                    for (let i = 0; i < scores.length; i++) {
                        console.log(scores[i]);
                    }

                    // Com "for..of"
                    for (score of scores) {
                        console.log(score);
                    }

            Function

                . Um objeto que pode ser chamado (invocado) para executar um bloco de código.

                . Exemplo:

                    const showMessage = () => {
                      console.log("Hello World!");
                    }

                    showMessage();

            Date
            
                . Um objeto que representa uma data e hora.

                . Exemplo:
            
                    let now = new Date();

            RegExp
            
                . Um objeto que representa uma expressão regular, usada para correspondência de padrões em strings.
            
                . Exemplo:
            
                    let pattern = /ab+c/;

            Map
            
                . Um objeto que armazena pares chave-valor e lembra a ordem original das chaves.
            
                . Exemplo:

                    let map = new Map();

                    map.set('key1', 'value1');

                    for (item of map) {
                        console.log(item);  // [ 'key1', 'value1' ]
                    }

                    for (let item of map.values()) {
                        console.log(item);  // 'value1'
                    }

                    console.log(map.get('key1'));   // 'value1'

            Set

                . Um objeto que armazena valores únicos de qualquer tipo, seja primitivo ou de referência.

                . Exemplo:
            
                    // Criando um novo Set
                    const mySet = new Set();

                    // Adicionando valores ao Set
                    mySet.add(1);
                    mySet.add('hello');
                    mySet.add({ name: 'John' });

                    // Verificando se um valor está presente no Set
                    console.log(mySet.has(1)); // true
                    console.log(mySet.has('hello')); // true
                    console.log(mySet.has({ name: 'John' })); // true

                    // Obtenendo o tamanho do Set
                    console.log(mySet.size); // 3

                    // Iterando sobre os valores do Set
                    mySet.forEach(value => {
                        console.log(value);
                    });

                    // Removendo um valor do Set
                    mySet.delete('hello');

                    // Verificando se um valor está ausente do Set
                    console.log(mySet.has('hello')); // false


        . Exemplo de Uso
        
            . Aqui está um exemplo que demonstra o uso de vários tipos de dados em JavaScript:

                // Tipos Primitivos
                let age = 25; // Number
                let name = "Alice"; // String
                let isActive = true; // Boolean
                let x; // Undefined
                let y = null; // Null
                let sym = Symbol('description'); // Symbol
                let bigInt = 1234567890123456789012345678901234567890n; // BigInt

                // Tipos de Referência
                let person = { name: "Alice", age: 30 }; // Object
                let numbers = [1, 2, 3, 4, 5]; // Array
                function greet() { console.log("Hello, world!"); } // Function
                let now = new Date(); // Date
                let pattern = /ab+c/; // RegExp
                let map = new Map(); // Map
                map.set('key1', 'value1');
                let set = new Set(); // Set
                set.add(1);
                set.add(2);

                console.log(age, name, isActive, x, y, sym, bigInt);
                console.log(person, numbers, greet, now, pattern, map, set);

    . Objetos

        . Objetos em javascript assemelha-se um pouco com uma estrutura json:

            let person = {
                firstName: 'John',
                lastName: 'Doe'
            };

        . Podemos incluir métodos:

            let apple = {
                valueOf: function () {
                    return 10;
                },
            };

            let orange = {
                toString: function () {
                    return '20';
                },
            };

            console.log( apple.valueOf() );
            console.log( orange.toString() );

        . Exemplos de como obter as informações dos objetos javascript:

            console.log(person.firstName);
            console.log(person.lastName);

            console.log(person['firstName']);
            console.log(person['lastName']);

        . O nome das propriedades podem conter espaços, porém não é uma boa prática:

            let address = {
                'building no': 3960,
                street: 'North 1st street',
                state: 'CA',
                country: 'USA'
            };

            console.log( address['building no'] );
            console.log( address.'building no' );   // Neste caso ocorrerá um erro

        . Para adicionar dinamicamente uma nova propriedade, basta atribuir um valor a nova propriedade:

            address.zipCode = "02423100";   // Adiciona dinamicamente a nova propriedade

            console.log( address.zipCode );

4. Operadores
-------------

    . Aritiméticos

        Operator	    Sign
        --------        ----
        Addition	    +
        Subtraction	    -
        Multiplication	*
        Division	    /
        Resto           %

    . Atribuição

        Operator	Meaning	    Description
        --------    -------     -----------
        a = b	    a = b	    Assigns the value of b to a.
        a += b	    a = a + b	Assigns the result of a plus b to a.
        a -= b	    a = a - b	Assigns the result of a minus b to a.
        a *= b	    a = a * b	Assigns the result of a times b to a.
        a /= b	    a = a / b	Assigns the result of a divided by b to a.
        a %= b	    a = a % b	Assigns the result of a modulo b to a.
        a &=b	    a = a & b	Assigns the result of a AND b to a.
        a |=b	    a = a | b	Assigns the result of a OR b to a.
        a ^=b	    a = a ^ b	Assigns the result of a XOR b to a.
        a <<= b	    a = a << b	Assigns the result of a shifted left by b to a.
        a >>= b	    a = a >> b	Assigns the result of a shifted right (sign preserved) by b to a.
        a >>>= b	a = a >>> b	Assigns the result of a shifted right by b to a.    

    . Unários

        Unary Operators	    Name	                        
        ---------------     ----                            
        ++x	                Incrementa o valor 1 primeiro no x
        –-x	                Decrementa o valor 1 primeiro no x
        x++	                Utiliza o valor do x na operação para depois fazer a adição de 1 ao x
        x–-	                Utiliza o valor do x na operação para depois fazer a subtração de 1 ao x

    . Comparação

        Operator	Meaning
        --------    -------
        <	        less than
        >	        greater than
        <=	        less than or equal to
        >=	        greater than or equal to
        ==	        equal to
        !=	        not equal to
        ===	        strict equal
        !==	        not strict equal

        . Diferença entre "==" e "==="

            . "==" quando utilizado para uma condição o operador irá converter o tipo da segunda parte da comparação para o tipo 
                da primeira. Caso o conteúdo encontrado forem iguais a condição é verdadeira "true"

            . "===" quando utilizado não faz nenhuma conversão e se os tipos forem diferentes dará falso.

            . Exemplo:

                console.log( 1 == "1" );        // true
                console.log( 1 === "1" );       // false

    . Operadores lógicos

        ! (Logical NOT)
        || (Logical OR)
        && (Logical AND)

    . Operador (nullish coalescing) "IFNULL"

        . Importante, esse operador só funciona no ambiente do navegador. No ambiente do nodejs não executou.

        . Representado pelo simbolo "??", retorna o segundo valor se o primeiro for null/undefined:

            const name = null ?? 'John';

            console.log(name); // 'John'

            const age = undefined ?? 28;

            console.log(age);   // 28

            const city = ( null || undefined ) ?? "SAO PAULO";

            console.log( city );        // SAO PAULO

    . Exponenciação

        . Utilizamos o simbolo "**", equivalente a função "Math.pow( value1, value2 )". São forma de obter um número levado a uma determinada potência.

        . Exemplo:

            console.log( Math.pow( 2,2 ) );         // 4

            console.log( 2 ** 2 );                  // 4

        . Se o primeiro número for negativo ele deve vir entre parenteses. Já o segundo não há restrição.

            console.log( (-2) ** 2 );                  // 4

5. Controle de Fluxo
--------------------

    . "if"

        . Exemplos:

            // Exemplo de um simple "if"
            let age = 18;

            if (age >= 18) {
                console.log('You can sign up');
            }


            // Exemplo de um "if/else"
            let age = 18;

            if (age >= 18) {
                console.log('You can sign up.');
            } else {
                console.log('You must be at least 18 to sign up.');
            }

            // Exemplo de um "if/else if"
            let month = 6;
            let monthName;

            if (month == 1) {
                monthName = 'Jan';
            } else if (month == 2) {
                monthName = 'Feb';
            } else if (month == 3) {
                monthName = 'Mar';
            } else if (month == 4) {
                monthName = 'Apr';
            } else if (month == 5) {
                monthName = 'May';
            } else if (month == 6) {
                monthName = 'Jun';
            } else if (month == 7) {
                monthName = 'Jul';
            } else if (month == 8) {
                monthName = 'Aug';
            } else if (month == 9) {
                monthName = 'Sep';
            } else if (month == 10) {
                monthName = 'Oct';
            } else if (month == 11) {
                monthName = 'Nov';
            } else if (month == 12) {
                monthName = 'Dec';
            } else {
                monthName = 'Invalid month';
            }

            console.log(monthName);

    . Operador Ternário "?:"

        let age = 18;
        let message;

        age >= 16 ? (message = 'You can drive.') : (message = 'You cannot drive.');

        console.log(message);

        message = age<18 ? "de menor" : "de maior";

        console.log(message);

    . "switch case"

        let day = 3;
        let dayName;

        switch (day) {
            case 1:
                dayName = 'Sunday';
                break;                  
            case 2:
                dayName = 'Monday';
                break;
            case 3:
                dayName = 'Tuesday';
                break;                      // O "break" é obrigatório para sair do case, 
            case 4:                         // caso contrário a execução irá para o próximo case, até encontrar um outro "break"
                dayName = 'Wednesday';
                break;
            case 5:
                dayName = 'Thursday';
                break;
            case 6:
                dayName = 'Friday';
                break;
            case 7:
                dayName = 'Saturday';
                break;
            default:
                dayName = 'Invalid day';
        }

        console.log(dayName); // Tuesday

    . "while"

        let count = 1;
        while (count < 10) {
            console.log(count);
            count +=2;
        }

    . "do while"

        let count = 0;
        do {
            console.log(count);
            count++;
        } while (count < 5)

    . "for"

        for (let i = 1; i < 5; i++) {
            console.log(i);
        }

    . "break" - Pode ser usado para "for", "while" e "do while"

        for (let i = 0; i < 5; i++) {
            console.log(i);

            if (i == 2) {
                break;
            }
        }

    . "continue" - Pode ser usado para "for", "while" e "do while"

        for (let i = 0; i < 10; i++) {
            if (i % 2 === 0) {
                continue;
            }

            console.log(i);
        }

6. Funções
----------

    . Declaração de forma simples:

        function say(message) {
            console.log(message);
        }

    . Armazenando funções em variáveis:

        function add(a, b) {
            return a + b;
        }

        let sum = add;

        console.log(sum(5, 7)); // 12        

    . Definindo número infinito de parâmetros (...):

        // "..." representa o número indefinido de parâmetros
        function sum(...args) {
            let total = 0;

            for (const a of args) {
                total += a;
            }

            return total;
        }

        console.log(sum(1, 2, 3));  // 6

    . Definindo número infinito de parâmetros (...), porém com tipos de parâmetros diferentes:

        function sum(...args) {
            return args
                .filter(function (e) {
                    return typeof e === 'number';
                })
                .reduce(function (prev, curr, index, arr) {

                    // prev: o valor anterior (ou o valor inicial, se for o primeiro elemento).
                    // curr: o elemento atual.
                    // index: o índice do elemento atual. Na prática, o index iniciará não pela indíce "0" e sim pelo "1"
                    // array: o array original.

                    console.log(index);
                    console.log(arr);
                    console.log(prev, curr);
                    
                    
                    return prev + curr;
                });
        }

        let result = sum(10, 'Hi', null, undefined, 20, 30, 40);

        console.log(result);
 
    . Passando uma função como parâmetro:

        function add(a, b) {
            return a + b;
        }

        let sum = add;

        function average(a, b, fn) {
            return fn(a, b) / 2;
        }

        let result = average(10, 20, sum);

        console.log(result);

    . Retornando um função de dentro de uma função:

        // Crie a função
        function compareBy(propertyName) {
            return function (a, b) {
                let x = a[propertyName],
                y = b[propertyName];

                if (x > y) {
                    return 1;
                } else if (x < y) {
                    return -1;
                } else {
                    return 0;
                }
            };
        }


        // Crie o objeto abaixo
        let products = [
            {name: 'Xiomi', price: 900},
            {name: 'Samsung Galaxy', price: 850},
            {name: 'Sony Xperia', price: 700}
        ];


        // Execute o código abaixo:
        console.log('Products sorted by name:');
        products.sort(compareBy('name'));

        console.table(products);

        ┌─────────┬──────────────────┬───────┐
        │ (index) │       name       │ price │
        ├─────────┼──────────────────┼───────┤
        │    0    │ 'Samsung Galaxy' │  850  │
        │    1    │  'Sony Xperia'   │  700  │
        │    2    │     'Xiomi'      │  900  │
        └─────────┴──────────────────┴───────┘

    . Funções anônimas:

        // Forma simples de declarar uma função anônima
        let show = function() {
            console.log('Anonymous function');
        }

        show();


        // Arrow function com blocos de código
        let show2 = () => {
            console.log('Arrow function');
        }

        // Arrow function resumida
        let show3 = () => console.log('Arrow function resumida');


        // Outro exemplo, passando a função anônima parâmetro
        setTimeout(function() {
            console.log('Execute later after 1 second')
        }, 1000);



        // Invocando imediatamente a função
        (function add(a,b) {
            console.log("O valor de a + b é: " + (a + b) );     // O valor a + b é: 3
            
            return a + b;                                       // 3
        })(1,2);

        // Utilizando um objeto com funções
        const calculator = (function () {
            function add(a, b) {
                return a + b;
            }

            function multiply(a, b) {
                return a * b;
            }

            return {
                add: add,
                multiply: multiply
            }
        })();

        console.log(calculator.add(1, 2));
        console.log(calculator.multiply(1, 2));

        // Retornando vários valores numa função
        function getNames() {
            // get names from the database or API
            let firstName = 'John',
                lastName = 'Doe';

            // return as an array
            return [firstName, lastName];
        }

        console.log(getNames());

        // Retornando um objeto com varios valores numa função
        function getNames() {
            // get names from the database or API
            let firstName = 'John',
                lastName = 'Doe';

            // return values
            return {
                'firstName': firstName,
                'lastName': lastName
            };
        }

        let firstName = getNames().firstName;
        let lastName = getNames().lastName;

        console.log(firstName + ' ' + lastName);

        let name = getNames();

        console.log(name.firstName + ' ' + name.lastName);

    . Passagem de parâmetros por valor e por referência:


        . ByVal

            function square(x) {
                x = x * x;
                return x;
            }

            let y = 10;
            let result = square(y);     // Devido a variavel "y" ser primitiva ela será passada por valor

            console.log(result); // 100 
            console.log(y);             // Neste caso "y" não altera o valor, permanecendo com valor 10

        . ByRef

            let person = {
                name: 'John',
                age: 25,
            };

            function increaseAge(obj) {
                obj.age += 1;
            }

            increaseAge(person);        // "person" Por ser um objeto será passado por referência

            console.log(person);        // Neste caso a propriedade "age" passará de 25 para 26

    . Parâmetros Default

        function say(message='Hi') {
            console.log(message);
        }

        say(); // 'Hi'
        say('Hello') // 'Hello'

    . Funções de "callback"

        . Funções de callback em JavaScript são funções que são passadas como argumentos para outras funções e são 
            executadas dentro da função que as recebe. Exemplo:

            function saudar(nome) {
                console.log(`Olá, ${nome}!`);
            }

            function chamarSaudar(nome, callback) {
                callback(nome);
            }

            chamarSaudar("João", saudar); // imprime "Olá, João!"

        . Nesse exemplo, a função dobrar é uma função de callback que é passada como argumento para a função map(). A função 
            map() chama a função dobrar para cada elemento do array e retorna um novo array com os resultados.

            const numeros = [1, 2, 3, 4, 5];

            const dobrar = (numero) => {
                return numero * 2;
            };

            const resultado = numeros.map(dobrar);

            console.log(resultado); // imprime [2, 4, 6, 8, 10]

7. Objetos
----------

    . Como dito anteriormente, objetos em javascript assemelha-se um pouco com uma estrutura json:

        let person = {
            firstName: 'John',
            lastName: 'Doe'
        };

    . Porém, a diferença inicia com a possibilidade que temos de inserir métodos. Os métodos podem ser inseridos nos 
        objetos de diversas formas:

        . Forma No. 1:

            let person = {
                firstName: 'John',
                lastName: 'Doe'
            };

            person.greet = function () {
                console.log('Hello!');
            }

            person.greet();

        . Forma No. 2:

            let person = {
                firstName: 'John',
                lastName: 'Doe'
            };

            function greet() {
                console.log('Hello, World!');
            }

            person.greet = greet;

            person.greet();

        . Forma No. 3:

            let person = {
                firstName: 'John',
                lastName: 'Doe',
                greet: function () {
                    console.log('Hello, World!');
                },
                getFullName: function () {
                    return this.firstName + ' ' + this.lastName;
                }
            };


            console.log(person.getFullName());

        . Forma 4

            let person = {
                firstName: 'John',
                lastName: 'Doe',
                greet() {
                    console.log('Hello, World!');
                },
                getFullName() {
                    return this.firstName + ' ' + this.lastName;
                }
            };


            console.log(person.getFullName());

    . Fabrica de funções:

        function createPerson(firstName, lastName) {
            return {
                firstName: firstName,
                lastName: lastName,
                getFullName() {
                return firstName + ' ' + lastName;
                },
            };
        }

        let person1 = createPerson('John', 'Doe');
        let person2 = createPerson('Jane', 'Doe');

        console.log(person1.getFullName());
        console.log(person2.getFullName());


    . Obtendo valores das propriedades do objeto:

        var person = {
            firstName: 'John',
            lastName: 'Doe',
            ssn: '299-24-2351',
            getFullName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        };

        for (var prop in person) {
            if (typeof person[prop] === 'function') continue;   // Para imprimir somente o valor das propriedades

            console.log(prop + ':' + person[prop]);
        }

    . Construtor

        . A forma para se criar um objeto com um método construtor é criar uma função:

            function Person(firstName, lastName) {
                // add properties to this
                this.firstName = firstName;
                this.lastName = lastName;

                // return this;
            }


            let person = new Person('John','Doe');

        . Importante, as propriedades do objetos são criadas automaticamente durante a atribuição dos valores.

        . Os parâmetros do construtor podem ser feitos com valores "defaults":

            // Valor defaults   ----------+     ----------------+
            //                            |                     |
            //                            v                     V
            function Person(firstName = "Mark", lastName = "Silva") {
                ...
            }


        . Podemos construir métodos dentro desses objetos:

            // Método construtor
            function Person(firstName, lastName) {
                this.firstName = firstName;
                this.lastName = lastName;

                this.getFullName = function () {
                    return this.firstName + " " + this.lastName;
                };
            }

            let person = new Person("John", "Doe");

            console.log(person.getFullName());

        . A criação de classe com construtor obedece duas regras:

            . O nome da função deve começar com letra maiuscula, embora essa seja mais uma convenção porque nos testes
                o nome com letra minuscula também funcionou perfeitamente.

            . A criação do objeto deve sempre ser feito através do operador "new"

    . Object.Create

        var personActions = {
            getFullName() {
                return this.firstName + ' ' + this.lastName;
            },
        };

        function createPerson(firstName, lastName) {
            let person = Object.create(personActions);  // Cria um objeto com o objeto "Object", envia o objeto "personActions" no construtor.
            person.firstName = firstName;               // O retorno será um objeto com o "personActions" na estrutura.
            person.lastName = lastName;                 
            return person;                              // Incrementa as propriedades no objeto criado, formando um único.
        }

        let person1 = createPerson('John', 'Doe');
        let person2 = createPerson('Jane', 'Doe');

        console.log(person1.getFullName());
        console.log(person2.getFullName());

    . Initializer shorthand

        Exemplo 1:

            let name = 'Computer',
                status = 'On';

            let machine = {
                name,
                status
            };

            console.log(machine);   // {name: 'Computer', status: 'On'}

        Exemplo 2

            function createMachine(name, status) {
                return {
                    name,
                    status
                };
            }

            let machine1 = createMachine('Computer', 'On');

            console.log(machine);   // {name: 'Computer', status: 'On'}

    . This

        .  É uma palavra-chave que se refere ao objeto atual que está sendo executado. Em outras palavras, é o contexto 
            em que uma função é chamada.

        .  Referência ao objeto corrente:

            . Exemplo 1:

                let counter = {
                    count: 0,
                    next: function () {
                        return ++this.count;        // Aqui
                    },
                };

                counter.next();

            . Exemplo 2:

                function Pessoa(nome) {
                    this.nome = nome;
                }

                const joao = new Pessoa('João');

                console.log(joao.nome); // João

        . Contexto global - Fora de um objeto, this referencia a "window"

            this.color= 'Red';
            console.log(window.color); // 'Red'

        . Diferenças do uso do this em function e object:

            . Function - O uso do "this" é obrigatório quando criamos funções/métodos dentro de funções:

                function Person(firstName = "Marco", lastName = "Silva") {
                    this.firstName = firstName;
                    this.lastName = lastName;

                    // Aqui
                    this.getFullName = function () {
                        return this.firstName + " " + this.lastName;
                    };

                    // Aqui
                    this.showFullName = function () {
                        console.log(this.getFullName());
                    };
                }

                const p = new Person("Jose", "Maria");

                p.showFullName();

            . Object - O uso não é necessário:

                const pessoa = {
                    nome: 'João',

                    falar: function () {       //                      Function
                        console.log(this.nome); // João
                    }
                };

                pessoa.falar(); 

        . Atenção - Em função de seta (arrow function), this não é redefinido e não herda o contexto do objeto e sim do pai

            . Exemplos de como não usar o "this":

                . Exemplo 1:

                    const pessoa = {
                        nome: 'João',
                        falar: () => {              //                      Arrow function
                            console.log(this.nome); // undefined
                        },

                        falar2: function () {       //                      Function
                            console.log(this.nome); // João
                        }
                    };

                    pessoa.falar(); // undefined

                    pessoa.falar2();    // João

                . Exemplo 2:

                    ...
                    <input type="text" name="username" id="username" placeholder="Enter a username">
                    <div id="greeting"></div>
                    ...

                    <script>
                        const greeting = document.querySelector('#greeting');
                        const username = document.querySelector('#username');

                        username.addEventListener('keyup', () => {
                            greeting.textContent = 'Hello ' + this.value;       // Ao invés de usar o this, use "greeting.textContent = `Hello, ${userName.value}`;"
                        });                             //      |
                                                        //      +------> O resultado aqui é um "undefined", porque o this representa a variável global "window"
                    </script>                   

8 . Prototype
-------------

    . Em JavaScript, prototype é uma propriedade de funções e objetos.

    . Em JavaScript, todas as funções são objetos. E cada função tem uma propriedade prototype que é um objeto. 
        Esse objeto contém propriedades e métodos que são compartilhados por todas as instâncias da função.

    . Quando você cria uma instância de uma função usando a palavra-chave new, a instância recebe todas as 
        propriedades e métodos do objeto prototype da função. Isso significa que você pode acessar essas 
        propriedades e métodos diretamente na instância.

        Por exemplo:

            function Pessoa(nome) {
                this.nome = nome;
            }

            Pessoa.prototype.falar = function() {
                console.log('Olá, meu nome é ' + this.nome);
            }

            const joao = new Pessoa('João');

            joao.falar(); // Olá, meu nome é João

    . Se quisermos fazer um "override" do método/função "falar" na classe concreta, a chamada desse método será da classe concreta:

            function Pessoa(nome) {
                this.nome = nome;

                this.falar = function(){
                    console.log("Meu nome é " + this.nome );
                }
            }

            Pessoa.prototype.falar = function() {
                console.log('Olá, meu nome é ' + this.nome);
            }

            const joao = new Pessoa('João');

            joao.falar(); // Meu nome é João

9. Classes
----------

    . Existem várias maneiras de declarar uma classe em JavaScript. Aqui estão algumas delas:

        . Declarando uma classe com a palavra-chave class

            class Pessoa {
                constructor(nome, idade) {
                    this.nome = nome;
                    this.idade = idade;
                }

                falar() {
                    console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
                }
            }
        
            const pessoa = new Pessoa("Marco", 57 );

            pessoa.falar();

        . Declarando uma classe com a função function

            function Pessoa(nome, idade) {
                this.nome = nome;
                this.idade = idade;
            }

            // Se criar um método dentro da classe com o "falar" e chamá-lo, a execução será sempre do método "prototype"
            Pessoa.prototype.falar = function() {
                console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
            };

            const pessoa = new Pessoa("Marco", 57 );

            pessoa.falar();


        . Declarando uma classe com a sintaxe de objeto

            const Pessoa = {
                constructor: function(nome, idade) {
                    this.nome = nome;
                    this.idade = idade;
                },
                falar: function() {
                    console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
                }
            };

            Pessoa.falar();         // Neste caso não é preciso criar o objeto, já pode usá-lo


        .  Declarando uma classe com a sintaxe de classe de ES6

            class Pessoa {
                constructor(nome, idade) {
                    this.nome = nome;
                    this.idade = idade;
                }

                falar() {
                    console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
                }

                static criarPessoa(nome, idade) {
                    return new Pessoa(nome, idade);
                }
            }

            const pessoa = Pessoa.criarPessoa('Marco', 57 );

            pessoa.falar();

        . Declarando uma classe com a sintaxe de classe de ES6 com herança

            class Pessoa {
                constructor(nome, idade) {
                    this.nome = nome;
                    this.idade = idade;
                }

                falar() {
                    console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
                }
            }

            class Aluno extends Pessoa {
                constructor(nome, idade, matricula) {
                    super(nome, idade);
                    this.matricula = matricula;
                }

                estudar() {
                    console.log(`Estou estudando...`);
                }
            }

            const pessoa = new Pessoa('Marco', 57);

            pessoa.falar();

            const aluno = new Aluno('Marco', 57, '123456');

            aluno.estudar();
            aluno.falar();

        . Declarando uma classe como expressão:

            let Person = class {
                constructor(name) {
                    this.name = name;
                }
                getName() {
                    return this.name;
                }
            }

            const marco = new Person('Marco');
            console.log(marco.name);

    . Getter and Setters

        class Person {
            constructor(name) {
                this._name = name;
            }
            get name() {
                return this._name;
            }
            set name(newName) {
                if (typeof newName !== 'string') {
                    throw 'The name must be a string';
                }

                newName = newName.trim();
                if (newName === '') {
                    throw 'The name cannot be empty';
                }
                this._name = newName;
            }
        }

        const marco = new Person('Marco');

        console.log(marco.name);

        marco.name = 'Antonio';

        console.log(marco.name);

    . Propriedades privadas - Utiliza-se o caracter "#" para identificar que a propriedade é privada

        class Pessoa {
            #nome;
            #idade;

            constructor(nome, idade) {
                this.#nome = nome;
                this.#idade = idade;
            }

            get nome() {
                return this.#nome;
            }
        }

        class Funcionario extends Pessoa {
            constructor(nome, idade, cargo) {
                super(nome, idade);
                this.cargo = cargo;
            }
        }

        const marco = new Funcionario('Marco', 57, 'Programador');

        console.log(marco.nome);

        // Esta linha levantará uma exception. Propriedades com identificação de "#" não podem ser
        // acessadas diretamente. É preciso que se construa um método dentro da classe pai para acessá-la
        console.log(marco.#nome);

    . Métodos Privados - O funcionamento de métodos privados segue a mesma lógica das propriedades privadas

        class Pessoa {
            #nome;
            #idade;

            constructor(nome, idade) {
                this.#nome = nome;
                this.#idade = idade;
            }

            #getNomePrivado() {
                return this.#nome;
            }
        }

        class Funcionario extends Pessoa {
            constructor(nome, idade, cargo) {
                super(nome, idade);
                this.cargo = cargo;
            }

            getNome() {
                return this.#getNomePrivado(); // Erro: SyntaxError: Private method '#getNomePrivado' must be declared in an enclosing class
            }
        }


    . new.target    - É uma propriedade que retorna o construtor que foi chamado com o operador new. 
                        Ela é usada para determinar se uma função foi chamada como um construtor ou como uma função regular.

                        Quando uma função é chamada com o operador new, o valor de new.target é o próprio construtor

        function Pessoa(nome) {
            if (new.target === Pessoa) {
                this.nome = nome;
            } else {
                throw new Error('Pessoa deve ser chamada com o operador new');
            }
        }

        // Neste caso o construtor não levantará uma exception
        const pessoa = new Pessoa('Marco');
        //              ^
        //              |
        //              +-------------- Se retirar o operador "new" da expressão "const pessoa = Pessoa('Marco');" a execução 
        //                              desse código levantará uma exceção
        //
        //                              Para que o "new.target" retorne o nome do construtor é necessário o uso de "new"


        // Aqui será levantado uma exception
        Pessoa('Marco');

        console.log( pessoa.nome );

    . Métodos Estáticos

        class Person {
            constructor(name) {
                this.name = name;
            }
            getName() {
                return this.name;
            }
            static createAnonymous() {
                return "createAnonymous";
            }
        }


        console.log(Person.createAnonymous());

    . Propriedades Estáticas

        class Item {
            constructor(name, quantity) {
                this.name = name;
                this.quantity = quantity;
                this.constructor.count++;
            }
            static count = 0;
            static getCount() {
                return Item.count;
            }
        }


        const parafuso = new Item('Parafuso', 10);

        console.log(Item.getCount());   // 1


        const tijolo = new Item('Tijolo', 5);

        console.log(Item.getCount());   // 2

    . instanceof - É utilizado para conferir se um objeto é derivado de uma determinada classe:

        function Person(name) {
            this.name = name;
        }

        let p1 = new Person('John');

        console.log(p1 instanceof Person); // true    

10. Promisses
-------------

    . Promises são um recurso do JavaScript que permitem lidar com operações assíncronas de forma mais elegante e 
        fácil de gerenciar. Uma promise é um objeto que representa um valor que pode estar disponível agora, no 
        futuro ou nunca.

    . De forma semelhante, uma promise em JavaScript é como um "pedido" que você faz a um código que pode levar algum 
        tempo para ser executado. Em vez de bloquear a execução do código até que o resultado esteja disponível, você 
        pode continuar executando outras tarefas e, quando o resultado estiver pronto, você pode lidar com ele.

    . Aqui estão os principais conceitos relacionados a promises:

        Pending: O estado inicial da promise, quando o resultado ainda não está disponível.

        Fulfilled: O estado em que a promise foi resolvida com sucesso e o resultado está disponível.

        Rejected: O estado em que a promise foi rejeitada e um erro ocorreu.

        Resolved: O estado em que a promise foi resolvida, seja com sucesso ou com erro.  

    . Para consumir uma promise temos três métodos:

        . then      O método then é usado para lidar com o resultado de uma promise quando ela é resolvida com sucesso. 
                    Ele recebe uma função de callback que é executada quando a promise é resolvida. 

            const promise = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("Olá, mundo!");
                }, 2000);
            });

            promise.then((resultado) => {
                console.log(resultado); // imprime "Olá, mundo!" após 2 segundos
            });

        . catch     O método catch é usado para lidar com o resultado de uma promise quando ela é rejeitada com um erro. 
                    Ele recebe uma função de callback que é executada quando a promise é rejeitada.

            const promise = new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject("Erro ocorreu!");
                }, 2000);
            });

            promise.catch((erro) => {
                console.log(erro); // imprime "Erro ocorreu!" após 2 segundos
            });

        . finally   O método finally é usado para executar uma ação independente do resultado da promise. 
                    Ele recebe uma função de callback que é executada quando a promise é resolvida ou rejeitada.

            const promise = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("Olá, mundo!");
                }, 2000);
            });

            promise.finally(() => {
                console.log("Promise finalizada!"); // imprime "Promise finalizada!" após 2 segundos
            });

    . Exemplo do funcionamento 

        // Declaração da função que retornará uma Promise
        function getUsers() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                resolve([   // -------------------------------------------+
                    { username: 'john', email: 'john@test.com' }, //      |
                    { username: 'jane', email: 'jane@test.com' }, //      |
                ]);                                               //      |
                }, 1000);                                         //      |
        });                                                       //      |
        }   //                                            +---------------+
            //                                            |
            //                                            V
        // Função que será executada caso houver um "resolve" no cenário
        function onFulfilled(users) {
            console.log(users);
        }

        const promise = getUsers();
        promise.then(onFulfilled);  // Aqui é feito o disparo da ação assincronica que retorna um "resolve" e 
                                    // automaticamente executará a função onFullfilled

    . No exemplo abaixo, a função de callback do then é executada quando a promise é resolvida, e a função de 
        callback do finally é executada independente do resultado da promise.

        const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject("Olá, mundo!");
                // resolve("Olá, mundo!");
            }, 2000);
        });

        promise
            .then((result) => {
                console.log(result);
        })
        .catch((error) => {
            console.log(error);
        })
        .finally(() => {
            console.log("Promise finalizada!");
        });

    . async/await

        . Sempre que uma função for precedida da palavra "async" o retorno será uma promise:

            async function f() {
                return 1;           // Seria a mesma coisa que "return Promise.resolve(1);"
            }        

            f().then(console.log); // 1

        . Sempre que for usado a palavra "await" na chamada de uma função, o javascript aguardará o 
            retorno dela para ir a próxima linha


            async function f() {

                let promise = new Promise((resolve, reject) => {
                    setTimeout(() => resolve("done!"), 10000)
                });
            
                let result = await promise; // wait until the promise resolves (*)
            
                console.log(result);
                
            }
            
            f();        

11. ES6 Modules
---------------

    . Módulos em ECMAScript 6, é uma forma de organizar e estruturar o código JavaScript em pequenas unidades reutilizáveis, 
        chamadas de módulos. Esses módulos podem ser carregados e usados em outros arquivos JavaScript, permitindo que 
        você crie aplicações mais complexas e escaláveis.

    . Características dos módulos ES6:

        . Declarativos: Os módulos ES6 são declarativos, o que significa que você define o que o módulo exporta e importa, 
                        em vez de ter que escrever código para carregar e vincular os módulos.

        . Independentes: Os módulos ES6 são independentes, o que significa que eles não compartilham variáveis ou funções 
                        com outros módulos, a menos que sejam explicitamente exportadas ou importadas.

        . Reutilizáveis: Os módulos ES6 são reutilizáveis, o que significa que você pode usar o mesmo módulo em diferentes partes 
                         da sua aplicação.

        . Caching:      Os módulos ES6 são cacheados, o que significa que o navegador ou ambiente de execução pode armazenar em 
                        cache os módulos carregados e reutilizá-los em vez de carregá-los novamente.        

    . Exportando funções:

        . Crie uma pasta na raiz do projeto com o nome "js".

        . Dentro da pasta "js" crie o arquivo fornecedora das funções, com o nome de "site.js", utilize uma das duas formas:

            . Utilizando "export" como atributo da função

                export function display(message) {
                    const el = document.createElement('div');
                    el.innerText = message;
                    document.body.appendChild(el);
                }

                export function showMessage(message) {
                    alert(message);
                }

            . Utilizando o "export" como linha de comando:

                function display(message) {
                    const el = document.createElement('div');
                    el.innerText = message;
                    document.body.appendChild(el);
                }

                function showMessage(message) {
                    alert(message);
                }

                export { display, showMessage };

        . Na pasta "js" crie outro o arquivo, "index.js", que consumirá as funções do arquivo "site.js":

            import { display, showMessage } from './site.js';

            display('Hello World');
            showMessage('Hello, World!');

        . Crie a página "index.html" abaixo:

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>
            <body>

            <!-- IMPORTANTE: Observe o "type=module", na declaração do script que                -->
            <!--             consumirá as funções é obrigatório a identificação do "type=module" -->
            <script src="js/index.js" type="module"></script>  
            </body>
            </html>

        . Execute a página "index.html" e veja se os resultado foram exibidos com sucesso.

    . Exportando variáveis:

        . Inclua as linhas do arquivo "site.js" a linha abaixo:

            // Linha inserida
            let count = 0;

            ...

            function showMessage(message) {
                alert(message);
            }

            // Linha alterada, inserido o export da variável "count"
            export { display, showMessage, count };

        . Inclua na última linha do arquivo "index.js" a linha abaixo:

            // Linha alterada, inserido o import da variável "count"
            import { display, showMessage, count } from './site.js';

            ...
            // linha inserida
            console.log(count);


        . Execute a página "index.html" e veja se o resultado da variável "count" foi exibido com sucesso.

    . Outra forma de fazer import de funções:

        . Acesse o arquivo "index.js" e faça as alterações abaixo:

            // Retire a função display do import
            import { showMessage, count } from './site.js';

            // Insira a linha abaixo
            let site = await import('./site.js');

            // Alere a linha abaixo, no lugar de "display(...)", altere pelo "site.display(...)"
            site.display('Hello, World!');

            showMessage('Hello, World!');

            console.log(count);

        . Execute o arquivo "index.html" e verifique se a função "display" executou com sucesso.

    . Outra forma de fazer export de funções "export default":

        . Quando você usa export default para exportar uma função, você está criando um export padrão. 
            Isso significa que a função é exportada sem um nome específico e pode ser importada por outros 
            módulos sem precisar especificar o nome.

        . Exemplo:

            . Crie o arquivo "user.mjs" com o conteúdo abaixo:

                let users;

                // O export default abaixo, exporta uma promise que quando resolvida, faz com que o valor da variavel "users" seja alterado.
                // Isso é possível pois a variavel "users" é inicializada com o valor "undefined" e a promise   resolvida ap s o fetch.
                // Isso é importante pois quem importa o módulo "user.mjs" pode usar o valor de "users" mesmo antes dele ser realmente carregado.
                // O "export default" faz com que ao ser importado pode ser dado qq nome a função para ser usado.
                export default (async () => {
                    const url = 'https://jsonplaceholder.typicode.com/users';
                    const response = await fetch(url);
                    users = await response.json();
                })();

                export { users };            

            . Crie o arquivo "app.mjs" com o conteúdo abaixo:

                // O nome dado para a função anônima do arquivo "user.mjs" foi "promise". Poderia ser qq nome "mmm", ou "getUsers", ...
                import promise, { users } from './user.mjs';

                function render(users) {
                    if (!users) {
                        throw 'The user list is not available.';
                    }
                    let list = users
                        .map((user) => {
                            return `<li> ${user.name}(<a href="email:${user.email}">${user.email}</a>)</li>`;
                        })
                        .join(' ');

                    return `<ol>${list}</ol>`;
                }

                // Aqui, se o retorno foi um "resolve", ou se a execução foi bem sucedida, então 
                // é executado o método "then"
                promise.then(() => {
                    let container = document.querySelector('.container');
                    try {
                        container.innerHTML = render(users);
                    } catch (error) {
                        container.innerHTML = error;
                    }
                });

            . Crie a página "index.html" com o conteúdo abaixo:

                <!DOCTYPE html>
                <html lang="en">

                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>JavaScript Top-Level Await Demo</title>
                </head>

                <body>
                    <div class="container"></div>
                    <script type="module" src="app.mjs"></script>
                </body>

                </html>

            . Execute a página e veja o resultado.

12. Try..Catch
--------------

        try {
            // Código que pode gerar uma exceção
            int x = 5 / 0;
        } catch (ArithmeticException e) {
            // Lide com a exceção
            System.out.println("Erro: " + e.getMessage());
        } finally {
            // Libere recursos
            System.out.println("Liberando recursos...");
        }

    . Levantando exceção:

        function divide(a, b) {
            if (b === 0) {
                throw new Error("Erro: divisão por zero");
        }
            return a / b;
        }

        try {
            const resultado = divide(10, 0);
            console.log(resultado);
        } catch (error) {
            console.error(error.message);
        }

    . Usando try...catch sem identificar a exceção:

        const isValidJSON = (str) => {
            try {
                JSON.parse(str);
                return true;
            } catch {
                return false;
            }
        };

        let valid = isValidJSON(`{"language":"JavaScript"}`);
        console.log(valid);


    . Existem várias exceções que podem ser utilizadas para lidar com erros e exceções em um programa. 
        Aqui estão algumas das principais exceções utilizadas no JavaScript:

        Error:          É a exceção mais genérica e é utilizada para representar um erro genérico.
        TypeError:      É utilizada para representar um erro de tipo, como quando se tenta executar uma 
                        operação em um valor que não é do tipo correto.
        RangeError:     É utilizada para representar um erro de intervalo, como quando se tenta acessar um 
                        índice de um array que está fora do intervalo válido.
        ReferenceError: É utilizada para representar um erro de referência, como quando se tenta acessar 
                        uma variável que não foi declarada.
        SyntaxError:    É utilizada para representar um erro de sintaxe, como quando se tenta executar um 
                        código que contém erros de sintaxe.
        URIError:       É utilizada para representar um erro de URI, como quando se tenta criar um objeto 
                        URI com um valor inválido.
        EvalError:      É utilizada para representar um erro de avaliação, como quando se tenta executar 
                        um código que contém erros de avaliação.
        InternalError:  É utilizada para representar um erro interno, como quando o motor do JavaScript 
                        encontra um erro interno.
        AggregateError: É utilizada para representar um erro agregado, como quando se tenta executar uma 
                        operação que envolve vários erros.

    . Além disso, também existem algumas exceções específicas para certas APIs e bibliotecas, como:

        DOMException:           É utilizada para representar um erro de DOM, como quando se tenta acessar um 
                                elemento do DOM que não existe.
        WebGLRenderingContext:  É utilizada para representar um erro de WebGL, como quando se tenta executar 
                                uma operação que não é suportada pelo contexto WebGL.


Browser: Document, Eventos e Interfaces
---------------------------------------

13. Document
------------

    . Ambiente e especificação do navegador - Abaixo a estrutura do que o javascript enxerga quando é executado no navegador:


                                                          Window
                                                          ------
                                                            | 
         +----------------------------------------------------------------------------------+           
         |                                                  |                               |
         v                                                  v                               v
        DOM (Document Object Model)             BOM (Browser Object Model)              Javascript
        ---------------------------             --------------------------              ----------
        document                                navigator                               Object
        ...                                     screen                                  Array
                                                location                                Function
                                                frames                                  ...
                                                history
                                                XMLHttpRequest


        . Por exemplo:

            <!DOCTYPE html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>JavaScript Top-Level Await Demo</title>
            </head>

            <body>
                <div class="container"></div>
                <script>
                    function sayHi() {
                        alert("Hello");
                    }

                    // global functions are methods of the global object:
                    window.sayHi();
                    alert(window.innerHeight); 

                </script>
            </body>

            </html>

    . Comandos para apresentar valores dos objetos na console:

        . console.log(): Exibe uma mensagem no console.

        . console.debug(): Exibe uma mensagem de depuração no console.

        . console.info(): Exibe uma mensagem de informação no console.

        . console.warn(): Exibe um aviso no console.

        . console.error(): Exibe um erro no console.

        . console.dir(): Exibe informações detalhadas sobre um objeto no console.

        . console.table(): Exibe um objeto como uma tabela no console.

        . console.time() e console.timeEnd(): Usados para medir o tempo de execução de um trecho de código.

        . console.count(): Exibe uma contagem de quantas vezes o método console.count() foi chamado com o mesmo nome.

        . console.group() e console.groupEnd(): Usados para agrupar mensagens relacionadas no console.

        . console.clear(): Limpa o console.

    . BOM - Usado para interagir com o navegador e realizar ações relacionadas ao navegador

    . DOM - Usado para manipular e interagir com os elementos HTML em uma página web.

        . Em DOM, qualquer nô da arvore do HTML abaixo é considerado um objeto.

            <!DOCTYPE HTML>
            <html>
                <head>
                    <title>About elk</title>
                </head>

                <body>
                    <h1>The truth about elk.</h1>
                </body>
            </html>

        . Equivalência dos nôs do DOM vs Tags HTML:

            <html> = document.documentElement 
            <body> = document.body
            <head> = document.head

        . Acesse a página via navegador, acione o devTools e na console execute os comandos abaixo:

            console.log( document.documentElement )

            console.log( document.body )

            console.log( document.head )

    . childNodes, firstChild, lastChild

        . childNodes - propriedade que retorna uma coleção de nodos filhos de um elemento.

            . Execute o comando abaixo no console do navegador:

                console.log( document.body.childNodes )                 // Apresentará todos os nôs dentro do body
                console.log(document.body.childNodes[1].textContent)    // Apresenta o conteúdo da tag <h1>
                
            . firstChild - Apresenta o primeiro Nô da tag

            . lastChild - Apresenta o último.

            . Execute os comandos abaixo no console do navegador:

                console.log(document.body.firstNode );
                console.log(documento.body.lastNode );

        . Iterando os nôs dos filhos:

            // for..of é a maneira mais indicada para iterar os nôs, 
            // evite usar for..in, ele itera todos os itens da coleção além dos filhos

            for (let node of document.body.childNodes) {
                alert(node.textContent); // shows all nodes from the collection
            }

        . Inclua as linhas abaixo no arquivo HTML:

            <!DOCTYPE HTML>
            <html>
                <head>
                    <title>About elk</title>
                </head>

                <body>
                    <h1>The truth about elk.</h1>

                    <!-- Script incluido -->
                    <script>
                        for (let node of document.body.childNodes) {
                            alert(node.textContent); // shows all nodes from the collection
                        }
                    </script>
                </body>
            </html>

    . children  - É uma propriedade que retorna uma coleção de elementos filhos de um elemento. Essa coleção é 
                    uma lista de elementos que são filhos diretos do elemento atual.

        . A propriedade "children" é semelhante à propriedade childNodes, mas com uma diferença importante: 
            children só inclui elementos, enquanto "childNodes" inclui todos os tipos de nodos, incluindo texto, 
            comentários e outros.

        . Exemplo:

            <html>
                <body>
                    <div>Begin</div>

                    <ul>
                        <li>Information</li>
                    </ul>

                    <div>End</div>

                    <script>
                        for (let elem of document.body.children) {
                            alert(elem); // DIV, UL, DIV, SCRIPT
                        }
                    </script>
                </body>
            </html>

    . tables    - O DOM fornece propriedades adicionais a alguns tipos de tags HTML, como por exemplo <table>

        <html>
            <body>
                <table id="myTable" border="1">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>

                    <tr>
                        <td>1</td>
                        <td>Marco</td>
                        <td>marco.gmail.com</td>
                    </tr>

                    <tr>
                        <td>2</td>
                        <td>Lucas</td>
                        <td>lucas.gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Lucas</td>
                        <td>lucas.gmail.com</td>
                    </tr>
                </table>

                <script>
                    
                    // Para acessar as propriedades da tag "table" basta referenciar ao "id" da tag html
                    //
                    //          +---> <table id="myTable" border="1">
                    //          |
                    let td = myTable.rows[0].cells[1];

                    td.style.backgroundColor = "red";         
                </script>
            </body>
        </html>

    . getElement*, querySelector*

        . document.querySelectorAll - O método querySelectorAll é uma função do JavaScript que retorna uma coleção 
                                        de elementos HTML que correspondem a um seletor que pode ser:

            . Seletor de classe:    .nome-da-classe - seleciona todos os elementos que têm a 
                                    classe nome-da-classe.

                document.querySelectorAll('.nome-da-classe')

            . Seletor de ID:        #id-do-elemento - seleciona o elemento que tem o ID id-do-elemento.

                document.querySelectorAll('#id-do-elemento')

            . Seletor de tag:       nome-da-tag - seleciona todos os elementos que têm a tag nome-da-tag.

                document.querySelectorAll('table')

            . Seletor de pseudoclasse: :pseudo-classe - seleciona todos os elementos que correspondam à 
                                        pseudoclasse pseudo-classe.

                document.querySelectorAll('td:first-child') // Retorna todas as primeiras TDs de todas as TRs da tag <table> 
                document.querySelectorAll('td:last-child')  // Retorna todos os últimos TDs de todas as TRs da tag <table> 
                
                document.querySelectorAll('td:first-child')[0].textContent  // Retorna o conteúdo da primeira TD devido ao indice 0 

            . Seletor de atributo:  [nome-do-atributo] - seleciona todos os elementos que têm o atributo nome-do-atributo.
            
                <!-- Exemplo de uso do método querySelectorAll em uma página HTML -->

                <!-- HTML -->
                <div id="container">
                    <p data-id="1">Parágrafo 1</p>
                    <p data-id="2">Parágrafo 2</p>
                    <p>Parágrafo 3</p>
                    <p data-id="4">Parágrafo 4</p>
                </div>

                <!-- JavaScript -->
                <script>
                    // Seleciona todos os elementos com o atributo "data-id"
                    const elementos = document.querySelectorAll('[data-id]');

                    // Exibe a lista de elementos selecionados
                    console.log(elementos);

                    // Altera o estilo dos elementos selecionados
                    elementos.forEach((elemento) => {
                        elemento.style.color = 'blue';
                    });
                </script>

            . Seletor de combinação: seletor1, seletor2 - seleciona todos os elementos que correspondam a 
                                        qualquer um dos seletores seletor1 ou seletor2.

                <!-- Exemplo de uso do método querySelectorAll com combinação de seletores em uma página HTML -->

                <!-- HTML -->
                <div id="container">
                    <h2>Título</h2>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                    <p>Parágrafo</p>
                    <div class="destaque">
                        <h3>Destaque</h3>
                        <p>Este é um destaque</p>
                    </div>
                </div>

                <!-- JavaScript -->
                <script>
                    // Seleciona todos os elementos que são filhos diretos do elemento com id "container"
                    // e que são elementos h2 ou ul
                    const elementos = document.querySelectorAll('#container>h2, #container>ul');

                    // Exibe a lista de elementos selecionados
                    console.log(elementos);

                    // Altera o estilo dos elementos selecionados
                    elementos.forEach((elemento) => {
                        elemento.style.color = 'red';
                    });
                </script>

            . Seletor de descendente: seletor1 seletor2 - seleciona todos os elementos que correspondam ao 
                                        seletor seletor2 e que sejam descendentes do elemento que corresponde ao 
                                        seletor seletor1.

                <!-- Exemplo de uso do método querySelectorAll com seletores descendentes em uma página HTML -->

                <!-- HTML -->
                <div id="container">
                    <h2>Título</h2>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                    <div class="destaque">
                        <h3>Destaque</h3>
                        <p>Este é um destaque</p>
                        <ul>
                        <li>Item 4</li>
                        <li>Item 5</li>
                        </ul>
                    </div>
                </div>

                <!-- JavaScript -->
                <script>
                    // Seleciona todos os elementos ul que são descendentes do elemento com id "container"
                    const elementos = document.querySelectorAll('#container ul');

                    // Exibe a lista de elementos selecionados
                    console.log(elementos);

                    // Altera o estilo dos elementos selecionados
                    elementos.forEach((elemento) => {
                        elemento.style.backgroundColor = 'lightblue';
                    });
                </script>

            . Seletor de filho: seletor1 > seletor2 - seleciona todos os elementos que correspondam 
                                ao seletor seletor2 e que sejam filhos diretos do elemento que corresponde ao seletor seletor1.


                <!-- Exemplo de uso do método querySelectorAll com seletores de filho em uma página HTML -->

                <!-- HTML -->
                <div id="container">
                    <h2>Título</h2>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                    <div class="destaque">
                        <h3>Destaque</h3>
                        <p>Este é um destaque</p>
                        <ul>
                        <li>Item 4</li>
                        <li>Item 5</li>
                        </ul>
                    </div>
                </div>

                <!-- JavaScript -->
                <script>
                    // Seleciona todos os elementos li que são filhos diretos do primeiro elemento ul
                    const elementos = document.querySelectorAll('#container > ul > li');

                    // Exibe a lista de elementos selecionados
                    console.log(elementos);

                    // Altera o estilo dos elementos selecionados
                    elementos.forEach((elemento) => {
                        elemento.style.backgroundColor = 'lightblue';
                    });
                </script>

        . document.querySelector    - é uma função do DOM (Document Object Model) que permite selecionar um elemento HTML 
                                        baseado em uma expressão de seleção CSS. Ele retorna o primeiro elemento que corresponde 
                                        à expressão de seleção especificada, ou null se não for encontrado nenhum elemento.

                                        O querySelector retorna apenas o primeiro elemento que corresponde à expressão de seleção. 
                                        Se precisar selecionar todos os elementos que correspondem à expressão, use o método 
                                        querySelectorAll em vez disso.

            . Exemplo:

                <!DOCTYPE html>
                <html>
                    <head>
                        <title>Exemplo querySelector</title>
                    </head>

                    <body>
                        <h1 id="titulo1" class="titulo">Título 1 da página</h1>
                        <h1 id="titulo2" class="titulo">Título 2 da página</h1>

                        <p class="paragrafo">Este é um parágrafo.</p>
                        <button class="botao">Clique aqui</button>

                        <script>
                            const titulo = document.querySelector('.titulo');
                            console.log(titulo.textContent); // Saída: "Título 1 da página"
                        </script>
                    </body>
                </html>

        . document.getElementById   - O método document.getElementById é uma função do JavaScript que retorna um 
                                        elemento HTML com o ID especificado. Se o elemento não for encontrado, o 
                                        método retorna null.

            . Exemplo:

                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                    </head>

                    <body>
                        <h1 id="titulo1" class="titulo">Título 1 da página</h1>
                        <h1 id="titulo2" class="titulo">Título 2 da página</h1>

                        <p class="paragrafo">Este é um parágrafo.</p>
                        <button class="botao">Clique aqui</button>

                        <script>
                            const titulo = document.getElementById('titulo2');
                            console.log(titulo.textContent); // Saída: "Título da página"
                        </script>
                    </body>

                </html>

        . document.getElementsByTagName - O método getElementsByTagName do DOM é um método que retorna uma coleção de 
                                        elementos que correspondem ao nome de tag especificado.

                                        Em outras palavras, ele permite que você selecione todos os elementos de uma página 
                                        HTML que têm um determinado nome de tag, como p, div, span, img, etc.

            Exemplo:

                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                    </head>

                    <body>
                        <table id="table">
                            <tr>
                                <td>Your age:</td>

                                <td>
                                    <label>
                                        <input type="radio" name="age" value="young" checked> less than 18
                                    </label>
                                    <label>
                                        <input type="radio" name="age" value="mature"> from 18 to 50
                                    </label>
                                    <label>
                                        <input type="radio" name="age" value="senior"> more than 60
                                    </label>
                                </td>
                            </tr>
                        </table>

                        <script>
                            let inputs = table.getElementsByTagName('input');

                            for (let input of inputs) {
                                alert(input.value + ': ' + input.checked);
                            }
                        </script>
                    </body>
                </html>

        . document.getElementsByName - É um método que retorna uma coleção de elementos que correspondem ao atributo name 
                                        especificado.

                                        Ele permite que você selecione todos os elementos de uma página HTML que têm um 
                                        determinado valor no atributo name.

            Exemplo: 

                <!DOCTYPE html>
                <html>
                    <head>
                        <title>Exemplo de getElementsByName</title>
                    </head>
                    <body>
                        <form>
                            <input type="text" name="nome" value="Nome" placeholder="Digite seu nome">
                            <input type="email" name="email" placeholder="Digite seu e-mail">
                            <input type="text" name="nome" value="Sobrenome" placeholder="Digite sobrenome">
                        </form>

                        <script>
                            const elementosNome = document.getElementsByName('nome');
                            console.log(elementosNome); // retorna uma coleção de elementos com name="nome"

                            for( const elemento of elementosNome){
                                console.log( elemento );
                            }
                        </script>
                    </body>
                </html>

        . document.getElementsByClassName -  É um método que retorna uma coleção de elementos que correspondem ao nome da 
                                            classe especificado.

                                            Ele permite que você selecione todos os elementos de uma página HTML que têm 
                                            uma determinada classe.

            Exemplo:

                <!DOCTYPE html>
                <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                    </head>

                    <body>
                        <form>
                            <input type="text" name="nome" value="Nome" class="form-control" placeholder="Digite seu nome">
                            <input type="email" name="email" class="form-control-sm" placeholder="Digite seu e-mail">
                            <input type="text" name="nome" class="form-control" value="Sobrenome" placeholder="Digite sobrenome">
                        </form>

                        <script>
                            const elementosNome = document.getElementsByClassName('form-control');
                            console.log(elementosNome); // retorna uma coleção de elementos com name="nome"

                            for( const elemento of elementosNome){
                                console.log( elemento );
                            }
                        </script>
                    </body>
                </html>

        . Comparação entre os métodos para nôs do DOM:

            Method	                Searches by...	        Can call on an element?	    run "forEach" in collection?
            ------                  --------------          -----------------------     ----------------------------

            querySelector	        CSS-selector	        ✔	                        ✔
            querySelectorAll	    CSS-selector	        ✔	                        ✔
            getElementById	        id	                    -	                        -
            getElementsByName	    name	                -	                        -
            getElementsByTagName	tag or '*'	            ✔	                        - 
            getElementsByClassName	class	                ✔	                        -

        . Importante: Cuidado, os métodos: getElementsByTagName, getElementsByName e getElementsByClassName retornam uma coleção, por isso seus nomes estão no plural.
                                                     -                     -                   -
                                                     |                     |                   |
                                                     +---------------------+-------------------+
                                                                           |
                                                                           V

                                                        Cuidado para não esquecer o "s", pois retornam 
                                                        uma coleção, diferente do "getElementById" que
                                                        retorna um único elemento.         

    . innerHTML e innerText - É uma propriedade de leitura e escrita que permite acessar ou modificar o conteúdo HTML interno de um elemento HTML.

        . Diferença entre innerHTML e innerText:

            . Tanto innerHTML, quanto innerText, se for atualizar o conteúdo realizam o mesmo procedimento, alteram o conteúdo. Porém:

                innerHtml respeita as tags de formatação (bold, tamanho, etc) e apresenta o texto formatado.
                innerText não respeita as tags e apresenta o texto com as tags na página, por exemplo: "Olá, <span>mundo!</span>"

            . Se for para consultar o conteúdo:

                innerHTML obtém o conteúdo com as tags HTML 
                innerText obtém somente o conteúdo se as tags

        . Exemplo 1: Acessando o conteúdo HTML interno

            <!-- HTML -->
            <div id="meu-div">Olá, <span>mundo!</span></div>

            // Código Javascript
            const div = document.getElementById('meu-div');
            console.log(div.innerHTML);                         // Saída: "Olá, <span>mundo!</span>"
            console.log(div.innerText);                         // Saída: "Olá, mundo!"

        . Exemplo 2: Modificando o conteúdo HTML interno

            <!-- HTML -->
            <div id="meu-div">Olá, mundo!</div>

            // Código Javascript
            const div = document.getElementById('meu-div');

            // Na página o conteúdo ficará 
            div.innerHTML = 'Olá, <strong>mundo!</strong>';
            console.log(div.innerHTML); // Saída: "Olá, <strong>mundo!</strong>"

            div.i

    . outerHTML - É uma propriedade de leitura e escrita que permite acessar ou modificar todo o conteúdo HTML de um elemento, 
                    incluindo o próprio elemento.

                    . Retorna não somente o conteúdo interno, mas também o conteúdo do elemento da tag pai.

        . Exemplo:

            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                </head>

                <body>
                    <div id="container">
                        <input type="text" name="nome" id="nome">
                    </div>

                    <script>
                        let divContainer = document.getElementById('container');

                        console.log( divContainer.outerHTML );
                        console.log( divContainer.innerHTML );

                        divContainer.outerHTML = 'Hello, World!';

                        console.log( divContainer.outerHTML ); 
                        // Saída
                        //
                        // <div id="container"> <!-- Tag Responsável pelo conteúdo interno -->
                        //     <input type="text" name="nome" id="nome">
                        // </div>

                        console.log( divContainer.innerHTML );
                        // Saída
                        //
                        // <input type="text" name="nome" id="nome">

                    </script>
                </body>
            </html>

        . Assemelha-se muito com o "innerHTML", porém existem diferenças grandes:

            . Ao acessar a propriedade "outerHTML", retorna o conteúdo completo da tag.

            . Se utilizarmos o "outerHTML" para alterar o conteúdo da página, a página exibida é alterada, 
                mas o conteúdo dela não. Se consultarmos o conteúdo da página após o "outerHTML" veremos
                que não mudou, porém a exibição sim.

                Exemplo: 

                    <!DOCTYPE html>
                    <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Document</title>
                        </head>

                        <body>
                            <div id="container">
                                <input type="text" name="nome" id="nome">
                            </div>

                            <script>
                                let divContainer = document.getElementById('container');

                                console.log( divContainer.outerHTML );
                                console.log( divContainer.innerHTML );

                                divContainer.outerHTML = 'Hello, World!';

                                console.log( divContainer.outerHTML );  // Continuará o input type text na página
                                console.log( divContainer.innerHTML );  // Idem
                            </script>
                        </body>
                    </html>

    . HTML Attributes -  são informações adicionais que podem ser adicionadas a uma tag HTML para fornecer mais contexto e significado ao 
                        elemento. Eles são escritos na forma de pares de nome-valor, separados por um sinal de igual (=), e são colocados 
                        dentro da tag de abertura do elemento.  

        Exemplo:

            <!DOCTYPE html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>

            <body>

                <div id="elem" about="Elephant"></div>
                <!--  |           |                 -->
                <!--  |           V                 -->
                <!--  +-> HTML Attributes           -->

            </body>

            </html>

        . Podemos acessar esses attributes através das funções abaixo:

            . elem.hasAttribute(name) –         Verifica a existência do atributo.
            . elem.getAttribute(name) –         Obtêm o valor.
            . elem.setAttribute(name, value) –  Configura o valor, se o atributo existir ele atualiza; caso contrário cria o atributo.
            . elem.removeAttribute(name) –      removes the attribute.

        . Exemplo:

            <!DOCTYPE html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>

            <body>
                <div id="elem" about="Elephant"></div>
                <input type="text" name="name" id="name" value="John">

                <script>
                    console.log(elem.getAttribute('About')); // (1) 'Elephant', reading

                    elem.setAttribute('Test', 123); // (2), writing

                    console.log(elem.outerHTML); // (3), <div id="elem" about="Elephant" test="123"></div>

                    for (let attr of elem.attributes) { // (4) list all
                        console.log(`${attr.name} = ${attr.value}`);
                    }

                    elem.setAttribute('Test', 456);

                    console.log( elem.outerHTML );   // <div id="elem" about="Elephant" test="456"></div>


                    let name = document.getElementById('name'); 

                    console.log(name.value);        // John

                    name.value = 'Jane';

                    console.log(name.value);        // Jane

                </script>
            </body>

            </html>

        . IMPORTANTE: Nem sempre o retorno de um atributo é uma string:

            . Exemplo 1 - Retornando valor em branco

                <input id="input" type="checkbox" checked> checkbox

                <script>
                    alert(input.getAttribute('checked'));   // the attribute value is: empty string
                    alert(input.checked);                   // the property value is: true
                </script>

            . Exemplo 2 - Retorno de um objeto

                <div id="div" style="color:red;font-size:120%">Hello</div>

                <script>
                    // string
                    alert(div.getAttribute('style'));       // color:red;font-size:120%

                    // object
                    alert(div.style);                       // [object CSSStyleDeclaration]
                    alert(div.style.color);                 // red
                </script>

            . Exemplo 3 - Retornando a URL completa, ou resumida

                <a id="a" href="#hello">link</a>

                <script>
                    // attribute
                    alert(a.getAttribute('href'));          // #hello

                    // property
                    alert(a.href );                         // full URL in the form http://site.com/page#hello
                </script>

        . Atributos despadrozinados

            . As tags HTML tem atributos padronizados, como: id, width, name, value, etc. Porém existem situações
                que podemos adicionar tags fora desses padrões:

                <!-- mark the div to show "name" here -->
                <div show-info="name"></div>
                        |
                        +-----> atributo fora dos padrões

            . Exemplo 1

                <!-- mark the div to show "name" here -->
                <div show-info="name"></div>

                <!-- and age here -->
                <div show-info="age"></div>

                <script>
                    // the code finds an element with the mark and shows what's requested
                    let user = {
                        name: "Pete",
                        age: 25
                    };

                    for(let div of document.querySelectorAll('[show-info]')) {
                        // insert the corresponding info into the field
                        let field = div.getAttribute('show-info');
                
                        div.innerHTML = user[field]; // first Pete into "name", then 25 into "age"
                    }
                </script>

            . Exemplo 2

                <div class="order" order-state="new">
                    A new order.
                </div>

                <div class="order" order-state="pending">
                    A pending order.
                </div>

                <div class="order" order-state="canceled">
                    A canceled order.
                </div>

                <style>
                    /* styles rely on the custom attribute "order-state" */
                    .order[order-state="new"] {
                        color: green;
                    }

                    .order[order-state="pending"] {
                        color: blue;
                    }

                    .order[order-state="canceled"] {
                        color: red;
                    }
                </style>

    . Modificando HTML

        . Criando um elemento na página

            . createElement     - O método createElement é um método do objeto document em JavaScript, que permite criar um novo elemento HTML.

                let div = document.createElement('div');

            . appendChild       - O método appendChild é usado para adicionar um novo elemento HTML a um elemento existente no documento HTML.

                document.getElementById("btnForm").addEventListener("click", () => {
                    const container = document.getElementById('container');

                    
                    const newDiv = document.createElement('div');
                    newDiv.innerHTML = 'Hello World';

                    document.getElementById('container').appendChild(newDiv);
                });


            . append            - permite adicionar um ou mais nós (elementos ou texto) ao final de uma lista de nós existente.

                document.getElementById("btnForm").addEventListener("click", () => {
                    const container = document.getElementById('container');
            
                    const newDiv = document.createElement('div');
                    newDiv.innerHTML = 'Hello World';
            
                    container.append(newDiv);
                });

            . replaceWith       - permite substituir um elemento por outro.

                div.innerHTML = "<h1>Hello, World!</h1>";

                document.getElementById('container').replaceWith( div );

            . remove       - permite remover um elemento da página

                const container = document.getElementById("container");

                container.remove();

            . cloneNode         - permite clonar um nó (elemento ou texto) em um documento HTML.

                document.getElementById("btnForm").addEventListener("click", () => {

                    const container = document.getElementById('container');
            
                    //                      +------->  nó que você deseja clonar.
                    //                      |               
                    //                      |                   +---->  true, o clone incluirá todos os filhos do nó original. 
                    //                      |                   |       false, o clone será feito apenas do nó original, sem incluir seus filhos
                    const novoContainer = container.cloneNode(true);
            
                    document.body.appendChild(novoContainer);
                });


            . Exemplo:

                <html>

                <body>
                    <div id="container"></div>

                    <script>

                        // 1. Create <div> element
                        let div = document.createElement('div');

                        // 2. Set its class to "alert"
                        div.className = "alert";

                        // 3. Fill it with the content
                        div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
                        // div.textContent = "<strong>Hi there!</strong> You've read an important message.";

                        // 4. Insert element created in the page
                        document.getElementById('container').appendChild(div);
                        // document.body.appendChild(div);
                        // document.getElementById('container').replaceWith(div);
                    </script>
                </body>

                </html>

        .

    . Estilos e classes

        . Podemos acessar o valor do atributo "class" de duas formas:

            . Exemplo - Através do nó do DOM "document.body.className":

                <body class="velha-classe">
                    <input type="button" value="Click" id="btnForm">

                    <script>

                        document.getElementById("btnForm").addEventListener("click", () => {
                            alert( document.body.className );                                   // Através do nó
                        });
                    </script>
                </body>

            . Exemplo - Através do elemento especifico:

                <body class="velha-classe">
                    <input type="button" value="Click" id="btnForm">

                    <script>

                        document.getElementById("btnForm").addEventListener("click", () => {
                            const elemento = document.querySelector('body');

                            alert( elemento.className );                                        // Através do elemento
                        });
                    </script>
                </body>

        . classList         - permite modificar as classes CSS de um elemento.

            . Exemplo:

                <body class="velha-classe">
                    <input type="button" value="Click" id="btnForm">

                    <script>

                        document.getElementById("btnForm").addEventListener("click", () => {
                            const elemento = document.querySelector('body');

                            alert( elemento.className );                                        

                            elemento.classList.remove("velha-classe");

                            alert( elemento.className );                                        

                            elemento.classList.add("nova-classe");

                            alert( elemento.className );                                        
                        });
                    </script>
                </body>

            . Métodos do "classList":

                . elemento.classList.add/remove("class")  – adds/removes the class.

                . elemento.classList.toggle("class")      – adds the class if it doesn’t exist, otherwise removes it.

                . elemento.classList.contains("class")    – checks for the given class, returns true/false.

        . style             - permite modificar os estilos CSS de um elemento.

            . Exemplo:

                const elemento = document.getElementById('meuElemento');

                elemento.style.color = 'azul';

                elemento.style.fontSize = '20px';

            . Métodos do "style":

                elemento.style.removeProperty("color");

                document.body.removeProperty("display");

            . style.cssText - Ao invés de alterar estilo por estilo, podemos usar essa propriedade para alterar um conjunto de estilos:

                <body>
                    <input type="button" value="Click" id="btnForm">

                    <script>

                        document.getElementById("btnForm").addEventListener("click", () => {
                            const documentoBody = document.querySelector("body");

                            documentoBody.style.cssText = `color: red !important;
                                                            background-color: yellow;
                                                            width: 100px;
                                                            text-align: center;
                                                        `;
                        });


                    </script>
                </body>

        . Unidades de medida:

            . Unidades mais comuns:

                . px (pixels): unidade absoluta, representa o tamanho em pixels.
                
                . em: unidade relativa, representa o tamanho em relação ao tamanho da fonte do elemento pai.
                
                . rem: unidade relativa, representa o tamanho em relação ao tamanho da fonte do elemento raiz (html).

                . %: unidade relativa, representa o tamanho em relação ao tamanho do elemento pai.

                . vw (viewport width): unidade relativa, representa o tamanho em relação à largura da viewport (área visível da página).

                . vh (viewport height): unidade relativa, representa o tamanho em relação à altura da viewport (área visível da página).

                . vmin (viewport minimum): unidade relativa, representa o tamanho em relação ao menor valor entre a largura e a altura da viewport.

                . vmax (viewport maximum): unidade relativa, representa o tamanho em relação ao maior valor entre a largura e a altura da viewport.

                . cm (centímetros): unidade absoluta, representa o tamanho em centímetros.

                . mm (milímetros): unidade absoluta, representa o tamanho em milímetros.

                . in (polegadas): unidade absoluta, representa o tamanho em polegadas.

                . pt (pontos): unidade absoluta, representa o tamanho em pontos.

                . pc (picas): unidade absoluta, representa o tamanho em picas.

            . Exemplo:

                elemento.style.width = '500px';

                elemento.style.height = '300px';

                elemento.style.fontSize = '18px';

                elemento.style.padding = '20px';

                elemento.style.margin = '10px';

                elemento.style.border = '1px solid #000';

            . Alguns cuidados a serem tomados:

                . Use unidades relativas: Em vez de usar unidades absolutas como px, use unidades relativas como em, rem, % ou vw. 
                    Isso permite que os elementos se adaptem melhor ao tamanho da tela e ao dispositivo.

                . Entenda a diferença entre em e rem: em é relativo ao tamanho da fonte do elemento pai, enquanto rem é relativo ao 
                    tamanho da fonte do elemento raiz (html). Use rem para definir tamanhos que precisam ser consistentes em toda a página.

                . Use % com cuidado: % é relativo ao tamanho do elemento pai, mas pode causar problemas se o pai tiver um tamanho fixo. 
                    Além disso, % pode ser afetado por outros estilos, como padding e border.

                . Evite usar px para tamanhos de fonte: Embora px seja uma unidade comum para tamanhos de fonte, é melhor usar em ou rem 
                    para permitir que os usuários ajustem o tamanho da fonte de acordo com suas preferências.

                . Use vw e vh com cuidado: vw e vh são unidades relativas ao tamanho da viewport (área visível da página). No entanto, 
                    podem causar problemas se a página tiver um layout complexo ou se o usuário tiver um dispositivo com uma resolução 
                    não padrão.

                . Teste em diferentes dispositivos e tamanhos de tela: É fundamental testar seu layout em diferentes dispositivos e 
                    tamanhos de tela para garantir que as unidades de medida estejam funcionando corretamente.

                . Use ferramentas de desenvolvimento para ajudar: Ferramentas como o Chrome DevTools ou o Firefox Developer Edition 
                    podem ajudar a identificar problemas de layout e unidades de medida.

                . Documente suas escolhas: Se você estiver trabalhando em um projeto com outros desenvolvedores, é importante documentar 
                    as escolhas de unidades de medida para evitar confusões e garantir a consistência do layout.

        . getComputedStyle  - É uma função do JavaScript que retorna o estilo computado de um elemento HTML. Ela é usada para obter o valor 
                                de uma propriedade de estilo de um elemento, levando em consideração as regras de estilo aplicadas a ele, 
                                incluindo as regras de estilo definidas em folhas de estilo externas, internas e inline.

                            IMPORTANTE: Algumas vezes as propriedades do style ficam em branco, exemplo: quando são definidas num bloco <style>...</style>,
                                        nesse caso o uso da função "getComputedStyle" é a solução:

            . Exemplo:

                <html>
                    <style>
                        body {
                            background-color: red;
                            margin: 5px
                        }
                    </style>

                    <body>
                        <input type="button" value="Click" id="btnForm">

                        <script>

                            document.getElementById("btnForm").addEventListener("click", () => {
                                const documentoBody = document.querySelector("body");
                                const documentoBody2 = getComputedStyle(documentoBody);

                                console.log(documentoBody.style.backgroundColor);       // Saída: Empty
                                console.log(documentoBody2.backgroundColor);            // Saída: 'rgb(255, 0, 0)'
                                
                            });


                        </script>
                    </body>
                </html>

    . Tamanho dos elementos e rolagem

        . O tamanho do elemento se refere às dimensões de um elemento HTML, incluindo sua largura e altura. Existem várias 
            propriedades que podem ser usadas para obter ou definir o tamanho de um elemento:

            . offsetWidth e offsetHeight: essas propriedades retornam a largura e altura de um elemento, incluindo padding, bordas e margens.

            . clientWidth e clientHeight: essas propriedades retornam a largura e altura de um elemento, excluindo bordas e margens.

            . scrollWidth e scrollHeight: essas propriedades retornam a largura e altura de um elemento, incluindo o conteúdo 
                que está fora da visão.

            . width e height: essas propriedades podem ser usadas para definir a largura e altura de um elemento. Só podem ser usadas para
                                definir, para obter a informação não funciona, temos que usar a função "getComputedStyle(elemento).width"

            . clientTop/Left: É o tamanho da borda

            . clientWidth/Height:  É definida como a largura do conteúdo de um elemento, incluindo o padding, mas excluindo as bordas e 
                                    margens. Ela é calculada como a soma da largura do conteúdo e do padding esquerdo e direito.

        . Exemplo:

            <!DOCTYPE html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <style>
                    #example {
                        width: 100px;
                        height: 110px;
                        border: 1px solid #E8C48F;
                        padding: 20px;
                        overflow: auto;
                    }
                </style>
            </head>

            <body>
                <div id="example">
                    Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. Praesent malesuada urna nisi, quis
                    volutpat erat hendrerit non. Nam vulputate dapibus. Si u mundo tá muito paradis? Toma um mé que o mundo vai
                    girarzis! Nulla id gravida magna, ut semper sapien.
                </div>

                <!--
                    +-------------------------------------------+           ^
                    | border: 1px                               |           |
                    |   +-----------------------------------+   |           |
                    |   | padding: 20px                     |   |           |
                    |   |   +---------------------------+   |   |           |
                    | 1 | 20| width: 100px height: 110px|   |   |   --------+
                    | p | px+---------------------------+   |   |
                    | x |                                   |   |
                    |   +-----------------------------------+   |
                    |                                           |
                    +-------------------------------------------+
                -->

                <br>

                <div>
                    <input type="button" value="ClickMe" id="btnForm">
                </div>
                <script>
                    document.getElementById("btnForm").addEventListener("click", () => {
                        const elemento = document.getElementById("example");

                        console.log(elemento.offsetWidth); //   142 = largura do elemento, incluindo padding, bordas e margens
                        console.log(elemento.clientHeight); //  152 = altura do elemento, excluindo padding, bordas e margens
                        console.log(elemento.scrollWidth); //   121 = largura do elemento, incluindo o conteúdo que está fora da visão
                        console.log(elemento.scrollHeight); //  588 =altura do elemento, incluindo o conteúdo que está fora da visão    
                        console.log(elemento.clientTop);    //  1 = tamanho da borda     
                        console.log(elemento.clientWidth);  //  121 = tamanho da borda     
                        console.log(elemento.clientHeight);  // 150 = tamanho da borda     
                           
                    });
                </script>
            </body>

            </html>

14. Introdução a eventos
------------------------

    . Um evento no browser é uma ação ou ocorrência que é disparada pelo usuário ou pelo próprio browser, e que pode 
        ser capturada e tratada por um script JavaScript.

    . Exemplos de eventos

        . click: disparado quando o usuário clica em um elemento.

        . mouseover/mouseout: disparado quando o usuário move o mouse sobre um elemento.

        . keydown/keyup: disparado quando o usuário pressiona uma tecla.

        . scroll: disparado quando o usuário rola a página ou um elemento.

        . load: disparado quando uma página ou um recurso é carregado.

        . error: disparado quando ocorre um erro no carregamento de uma página ou recurso.

        . change: disparado quando o valor de um elemento é alterado.

        . contextmenu: Quando o click direito do mouse é acionado.

        . mousedown / mouseup – when the mouse button is pressed / released over an element.

        . mousemove – when the mouse is moved.

        . submit – when the visitor submits a <form>.

        . focus – when the visitor focuses on an element, e.g. on an <input>.

        . blur - Evento ocorre quando um elemento perde o foco

    . addEventListener - Captura eventos do navegador:

        Sintaxe: element.addEventListener(event, handler, [options]);

            event: Event name, e.g. "click".

            handler: The handler function.

            options: An additional optional object with properties:
            
                once:       if true, then the listener is automatically removed after it triggers.

                capture:    the phase where to handle the event. For historical reasons, options can also be false/true, 
                            that’s the same as {capture: false/true}.

                passive:    if true, then the handler will not call preventDefault(), 

        Exemplo:

            // Capturando um evento de clique
            document.getElementById('meuBotao').addEventListener('click', function() {
                console.log('O usuário clicou no botão!');
            });

            // Capturando um evento de teclado
            document.addEventListener('keydown', function(event) {
                console.log('O usuário pressionou a tecla ' + event.key);
            });

    . Evento do objeto:

        <input type="button" value="Click me" id="elem">

        <script>
            elem.onclick = function(event) {
                // show event type, element and coordinates of the click
                alert(event.type + " at " + event.currentTarget);
                alert("Coordinates: " + event.clientX + ":" + event.clientY);
        };
        </script>


    . handleEvent

        . Exemplo 1

            <button id="elem">Click me</button>

            <script>
                const elemento = document.getElementById('btnForm');

                let obj = {
                    handleEvent(event) {
                        alert(event.type + " at " + event.currentTarget);
                    }
                };

                elemento.addEventListener('click', obj);
            </script>

        . Exemplo 2

            <input type="button" value="ClickMe" id="btnForm">

            <script>
                const elemento = document.getElementById('btnForm');

                class Menu {
                    handleEvent(event) {
                        // mousedown -> onMousedown
                        let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
                        this[method](event);
                    }

                    onMousedown() {
                        console.log("Mouse button pressed");
                    }

                    onMouseup() {
                        console.log("...and released.");
                    }

                    onClick() {
                        console.log("Mouse button clicked");
                    }

                    onFocus() {
                        console.log("Focus");
                    }
                }

                let menu = new Menu();

                elemento.addEventListener('mousedown', menu);
                elemento.addEventListener('mouseup', menu);    
                elemento.addEventListener('click', menu);    
                elemento.addEventListener('focus', menu);    
            </script>

15 . Ações Padrões do Navegador
-------------------------------

    . event.preventDefault() -  é uma função que pode ser chamada em um evento para prevenir o comportamento padrão do navegador. 
                                Em outras palavras, ele impede que o navegador execute a ação que normalmente seria executada 
                                quando um evento é disparado.

        . O método event.preventDefault() é útil em situações onde você deseja:

            . Prevenir que um link seja seguido e, em vez disso, executar uma ação personalizada.

            . Impedir que um formulário seja enviado e, em vez disso, validar os dados ou executar uma ação personalizada.

            . Prevenir que um botão de envio seja ativado e, em vez disso, executar uma ação personalizada.

        . Quando um evento é disparado, o navegador executa a ação padrão associada a esse evento. No entanto, se você 
            chamar o método event.preventDefault() dentro da função de tratamento de eventos, o navegador não executará a ação padrão.
            Em vez disso, o navegador continuará a executar a função de tratamento de eventos, permitindo que você execute ações personalizadas.

        . Exemplos:

            . Prevenir que um link seja seguido:

                document.getElementById('meuLink').addEventListener('click', function(event) {
                    event.preventDefault();
                    console.log('O link não foi seguido!');
                });

            . Impedir que um formulário seja enviado:

                document.getElementById('meuFormulario').addEventListener('submit', function(event) {
                    event.preventDefault();
                    console.log('O formulário não foi enviado!');
                });

            . Prevenir que um botão de envio seja ativado:

                document.getElementById('meuBotao').addEventListener('click', function(event) {
                    event.preventDefault();
                    console.log('O botão não foi ativado!');
                });

16. Page: DOMContentLoaded, load, beforeunload, unload
------------------------------------------------------

    . Ciclo de vida das páginas HTML:

        Fase 1: Carregamento (Loading)

            O usuário solicita a página HTML digitando a URL no navegador ou clicando em um link.
            O navegador envia uma solicitação HTTP para o servidor web que hospeda a página.
            O servidor web responde com a página HTML, que é enviada para o navegador.

        Fase 2: Parseamento (Parsing)

            O navegador recebe a página HTML e começa a parseá-la, ou seja, a analisar a estrutura da página e identificar os elementos HTML.
            O navegador cria um modelo de objeto de documento (DOM) da página, que é uma representação da estrutura da página em forma de árvore.

        Fase 3: Renderização (Rendering)

            O navegador usa o DOM para renderizar a página, ou seja, para criar a representação visual da página.
            O navegador aplica os estilos CSS e as folhas de estilo para definir a aparência da página.
            O navegador carrega os scripts JavaScript para adicionar interatividade à página.

        Fase 4: Carregamento de Recursos (Resource Loading)

            O navegador carrega os recursos necessários para a página, como imagens, vídeos, áudio e fontes.
            O navegador pode carregar recursos em paralelo ou em sequência, dependendo da configuração do navegador.

        Fase 5: Execução de Scripts (Script Execution)

            O navegador executa os scripts JavaScript que foram carregados durante a fase de renderização.
            Os scripts podem ser executados em ordem sequencial ou em paralelo, dependendo da configuração do navegador.

        Fase 6: Atualização (Update)

            O navegador atualiza a página em resposta a eventos, como cliques, digitação e rolagem.
            O navegador pode atualizar a página inteira ou apenas partes dela, dependendo da natureza do evento.

        Fase 7: Descarregamento (Unloading)

            O usuário fecha a página ou navega para outra página.
            O navegador descarrega a página e libera os recursos associados a ela.

    . Evento DOMContentLoaded   -  é um evento do DOM (Document Object Model) que é disparado quando "quase todo" o conteúdo 
                                    de uma página HTML é completamente carregado e o DOM é construído:

        . É disparado quando:

            . O conteúdo da página HTML é completamente carregado.

            . O DOM é construído e está pronto para ser manipulado.

            . Os scripts JavaScript são carregados e executados.

            . As imagens e outros recursos são carregados, mas não necessariamente completamente renderizados        


        . Exemplo


            <!-- Crie o arquivo style.css na raiz com o conteúdo -->
            <!-- body {     margin-top: 50px;  }                 -->
            <link rel="stylesheet" type="text/css" href="style.css">

            <script>
                document.addEventListener("DOMContentLoaded", () => {
                    alert("DOMContentLoaded: " + getComputedStyle(document.body).marginTop);
                });
            </script>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

            <script>
                alert("Library loaded, inline script executed");
            </script>

        . É importante notar que o evento DOMContentLoaded é disparado antes do evento "load". Isso significa que se você 
            precisar executar um script que depende da carga de recursos, como imagens e vídeos, você deve usar o evento 
            "load" em vez de "DOMContentLoaded".

            . Além disso, o evento "DOMContentLoaded" é disparado apenas uma vez, quando o conteúdo da página é completamente 
                carregado. Se você precisar executar um script em resposta a mudanças no conteúdo da página, você deve usar 
                outros eventos, como "mutation" ou "resize".

    . Evento "load" -  é um evento do objeto window que é disparado quando todos os recursos da página, incluindo imagens, 
                        vídeos e scripts, foram completamente carregados.

        . Exemplo

            <body>
                <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

                <script>
                    // Mensagem 1
                    document.addEventListener("DOMContentLoaded", () => {
                        alert(`DOMContentLoaded -> Image size: ${img.offsetWidth}x${img.offsetHeight}`);
                    });
                    
                    // Mensagem 2
                    window.addEventListener("load", () => {
                        alert(`Load -> Image size: ${img.offsetWidth}x${img.offsetHeight}`);
                    });
                </script>
            </body>

    . readystate    - É uma propriedade do objeto document que indica o estado atual do documento HTML. Ele é usado para determinar 
                        se o documento está pronto para ser manipulado ou se ainda está sendo carregado.

        . O readyState pode ter os seguintes valores:

            . loading:      O documento está sendo carregado e não está pronto para ser manipulado.

            . interactive:  O documento está sendo carregado, mas já está pronto para ser manipulado. 
                            Isso significa que o DOM está disponível, mas as imagens e outros recursos ainda podem estar sendo carregados.

            . complete:     O documento está completamente carregado e pronto para ser manipulado.

        . Exemplo

            <body>
                <img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

                <script>
                    // Mensagem 1
                    document.addEventListener("DOMContentLoaded", () => {
                        alert(`DOMContentLoaded -> Image size: ${img.offsetWidth}x${img.offsetHeight}`);
                    });
                    
                    // Mensagem 2
                    window.addEventListener("load", () => {
                        alert(`Load -> Image size: ${img.offsetWidth}x${img.offsetHeight}`);
                    });

                    document.addEventListener('readystatechange', function () {
                        if (document.readyState === 'interactive' || document.readyState === 'complete') {
                            alert('O documento está pronto para ser manipulado! *** ' + document.readyState + ' ***');
                            // Código a ser executado quando o documento está pronto para ser manipulado
                        }
                    });
                </script>
            </body>

17. Popups e métodos Window
---------------------------

    . window.open   - É um método do objeto window que permite abrir uma nova janela ou aba no navegador.

        . Sintaxe:

            window.open(url, name, params);

            url: é a URL da página que será aberta na nova janela ou aba.

            name: é o nome da janela ou aba que será aberta. Se o nome for omitido, o navegador usará um nome padrão.

            params: são as especificações da janela ou aba que será aberta, como largura, altura, localização, etc.

        . Exemplos

            //  Abrir uma nova aba com uma URL
            window.open('https://www.google.com', '_blank');

            //  Abrir a URL na aba atual
            window.open('https://www.google.com', '_self');

            //  Abrir uma nova janela com especificações
            window.open('https://www.google.com', 'minha_janela', 'width=400,height=300');

            //   Abrir uma nova janela sem barra de ferramenta
            window.open('https://www.google.com', 'minha_janela', 'toolbar=no');

        . Configurações dos parâmetros:

            . Position

                left/top (numeric)      – coordinates of the window top-left corner on the screen. There is a limitation: 
                                            a new window cannot be positioned offscreen.
                width/height (numeric)  – width and height of a new window. There is a limit on minimal width/height, so it’s 
                                            impossible to create an invisible window.

            . Window features

                menubar (yes/no)        – shows or hides the browser menu on the new window.

                toolbar (yes/no)        – shows or hides the browser navigation bar (back, forward, reload etc) on the new window.

                location (yes/no)       – shows or hides the URL field in the new window. FF and IE don’t allow to hide it by default.

                status (yes/no)         – shows or hides the status bar. Again, most browsers force it to show.

                resizable (yes/no)      – allows to disable the resize for the new window. Not recommended.

                scrollbars (yes/no)     – allows to disable the scrollbars for the new window. Not recommended.

        . Importante notar que o window.open() pode ser bloqueado por alguns navegadores ou extensões de segurança, especialmente se a 
            janela for aberta sem a interação do usuário. Além disso, o window.open() pode ter comportamentos diferentes em diferentes 
            navegadores e dispositivos.

    . Manipulando o Popup

        Exemplo 1: Abrir e fechar o popup

            // Abrir o popup
            const popup = window.open('https://www.example.com/popup', 'popup', 'width=400,height=300');
            
            // Fechar o popup
            popup.close();

        Exemplo 2: Redimensionar o popup

            // Redimensionar o popup para 500x400
            popup.resizeTo(500, 400);
            
            // Redimensionar o popup em 100x100 pixels
            popup.resizeBy(100, 100);

        Exemplo 3: Mover o popup

            // Mover o popup para a posição (100, 100)
            popup.moveTo(100, 100);
            
            // Mover o popup em 50x50 pixels
            popup.moveBy(50, 50);

        Exemplo 4:  Definir o foco do popup

            // Definir o foco do popup
            popup.focus();

        Exemplo 5: Fechar o popup automaticamente

            // Fechar o popup após 5 segundos
            setTimeout(() => {
                popup.close();
            }, 5000);

        Exemplo 6: Manipular o conteúdo do popup

            // Escrever conteúdo no popup
            popup.document.write('Olá, mundo!');
            
            // Definir o conteúdo do corpo do popup
            popup.document.body.innerHTML = 'Olá, mundo!';

        Exemplo 7: Manipulando os elementos do popup

            <script>
                document.getElementById('btnForm').addEventListener('click', () => {
                    let win = window.open('', '_blank', 'left=300,top=100,width=400,height=300');


                    win.document.write("<label for=nome>Nome</label><input type=text id=nome value='PALMEIRAS'>");

                    const elemento = win.document.getElementById('nome');

                    elemento.value = 'PALESTRA ITÁLIA';
                    elemento.select();
                    elemento.focus();

                    // win.document.body.childNodes[1].value = 'MARCO ANTONIO DA SILVA';
                    // win.document.body.childNodes[1].select();
                    // win.document.body.childNodes[1].focus();

                    setTimeout(() => {
                        win.close();
                    }, 5000);
                });

            </script>

18. Cookies
-----------

    . IMPORTANTE: Para acessar os cookies no navegador, acesse:

        1. DevTools do navegador

        2. Na barra de ferramentas, vá até "Application"

        3. Na barra lateral, vá em "Storage -> Cookies"

    . Cookies são pequenos arquivos de texto que são armazenados no navegador do usuário e são usados para armazenar 
        informações sobre o usuário, como preferências, sessões de login, etc. No JavaScript, os cookies são usados 
        para armazenar e recuperar essas informações.

        . São enviados para o servidor a cada requisição

        . Têm um tamanho limite de 4KB

        . São armazenados no navegador do usuário

        . Podem ser configurados para expirar após um período de tempo

    . Como funciona:

        1. O servidor envia um cookie: Quando um usuário visita um site, o servidor pode enviar um cookie para o navegador 
            do usuário. O cookie é um arquivo de texto que contém informações como o nome do cookie, o valor do cookie e a 
            data de expiração.

            Exemplo:

                using Microsoft.AspNetCore.Mvc;
                using Microsoft.AspNetCore.Http;

                namespace MeuProjeto.Controllers
                {
                    [ApiController]
                    [Route("api/[controller]")]
                    public class CookieController : ControllerBase
                    {
                        [HttpGet]
                        public IActionResult GetCookie()
                        {
                            // Defina o nome e o valor do cookie
                            string cookieName = "meuCookie";
                            string cookieValue = "Valor do meu cookie";

                            // Defina a data de expiração do cookie
                            DateTime expires = DateTime.Now.AddDays(30);

                            // Crie o cookie
                            CookieOptions options = new CookieOptions
                            {
                                Expires = expires,
                                SameSite = SameSiteMode.Strict,
                                Secure = true,
                                HttpOnly = true
                            };

                            // Adicione o cookie à resposta
                            Response.Cookies.Append(cookieName, cookieValue, options);

                            // Retorne uma resposta HTTP 200 (OK)
                            return Ok("Cookie adicionado com sucesso!");
                        }
                    }
                }


        2. O navegador armazena o cookie: O navegador do usuário armazena o cookie em um arquivo de texto no disco rígido 
            do usuário.

            Exemplo: 

            // Função para fazer uma requisição à API
            function fazerRequisicaoApi() {
                const url = 'https://api.meusite.com/meuendpoint';

                const headers = {
                    'Content-Type': 'application/json'
                };

                fetch(url, {
                    method: 'GET',
                    headers: headers
                })
                .then(response => {
                    // Lê o cookie da resposta
                    const cookie = response.headers.get('Set-Cookie');
                    
                    if (cookie) {
                        const cookieNome = cookie.split(';')[0].split('=')[0];
                        const cookieValor = cookie.split(';')[0].split('=')[1];
                        console.log(`Cookie ${cookieNome} = ${cookieValor}`);
                    } else {
                        console.log('Nenhum cookie foi devolvido');
                    }
                })
                .catch(error => {
                        console.error('Erro ao fazer requisição à API:', error);
                });
            }

            // Chama a função para fazer a requisição à API
            fazerRequisicaoApi();

        3. O navegador envia o cookie de volta para o servidor: Quando o usuário visita o site novamente, o navegador envia 
            o cookie de volta para o servidor.

            Exemplo:

                // Função para fazer uma requisição à API
                function fazerRequisicaoApi() {
                    const url = 'https://api.meusite.com/meuendpoint';

                    const headers = {
                        'Content-Type': 'application/json',
                        'Cookie': 'meuCookie=meuValor' // envia o cookie para o servidor
                    };

                    fetch(url, {
                        method: 'GET',
                        headers: headers
                    })
                    .then(response => {
                        console.log('Resposta da API:', response);
                    })
                    .catch(error => {
                        console.error('Erro ao fazer requisição à API:', error);
                    });
                }

                // Chama a função para fazer a requisição à API
                fazerRequisicaoApi();

        4. O servidor lê o cookie: O servidor lê o cookie e usa as informações armazenadas para personalizar a experiência 
            do usuário.

            Exemplo:

                using Microsoft.AspNetCore.Mvc;

                namespace MeuProjeto.Controllers
                {
                    [ApiController]
                    [Route("api/[controller]")]
                    public class MeuController : ControllerBase
                    {
                        [HttpGet]
                        public IActionResult Get()
                        {
                            // Lê o cookie enviado
                            var cookie = Request.Cookies["meuCookie"];

                            if (cookie != null)
                            {
                                Console.WriteLine($"Cookie: {cookie}");
                                // Faça algo com o valor do cookie
                            }
                            else
                            {
                                Console.WriteLine("Nenhum cookie foi enviado");
                            }

                            return Ok();
                        }
                    }
                }

    . Existem dois tipos principais de cookies:

        1. Cookies de sessão: Esses cookies são armazenados apenas na memória do navegador e são excluídos quando o usuário 
            fecha o navegador.

        2. Cookies persistentes: Esses cookies são armazenados no disco rígido do usuário e permanecem lá até que expirem 
            ou sejam excluídos.

    . Os Cookies possuem atributos, que são informações armazenadas nele e que são usadas para controlar o seu comportamento:

        Name:       É o nome do cookie, que é usado para identificá-lo.

        Value:      É o valor do cookie, que pode ser uma string, um número ou um objeto.

        Expires:    É a data e hora em que o cookie expira. Se o cookie não tiver uma data de expiração definida, ele será 
                    considerado um cookie de sessão e será apagado quando o navegador for fechado.

        Path:       É o caminho do cookie, que define a URL para a qual o cookie é válido. Se o caminho for definido como "/", 
                    o cookie será válido para todas as URLs do site.

        Domain:     É o domínio do cookie, que define o domínio para o qual o cookie é válido. Se o domínio for definido 
                    como "example.com", o cookie será válido para todas as URLs do site "example.com".

        Secure:     É um atributo que define se o cookie deve ser enviado apenas sobre conexões seguras (HTTPS). Se o 
                    atributo for definido como "true", o cookie será enviado apenas sobre conexões seguras.

        HttpOnly:   É um atributo que define se o cookie pode ser acessado apenas pelo servidor ou também pelo cliente 
                    (JavaScript). Se o atributo for definido como "true", o cookie não poderá ser acessado pelo cliente.

        SameSite:   É um atributo que define se o cookie deve ser enviado apenas em requisições do mesmo site ou também em 
                    requisições de outros sites. Se o atributo for definido como "Lax", o cookie será enviado apenas em 
                    requisições do mesmo site, exceto em requisições GET que sejam feitas a partir de um link ou um formulário.

        Exemplo:

            "Set-Cookie: nome=valor; Expires=Wed, 21-Jan-2026 07:28:00 GMT; Path=/; Domain=example.com; Secure; HttpOnly; SameSite=Lax"

    . Aqui estão algumas funções de cookie que podemos usar no JavaScript:

        // Criar um cookie sem expiração, nesse caso um cookie de sessão
        document.cookie = 'firstName=Marco';

        // Criar um cookie com expiração, nesse caso um cookie persistente
        document.cookie = 'middleName=Antonio; Expires=' + new Date(2030, 0, 1).toUTCString();

        // Para ler todos os cookies armazenados no navegador
        console.log( document.cookie );

        document.cookie.split('; ').forEach(cookie => {
            const [nome, valor] = cookie.split('=');
            console.log(nome + '=' + valor);                            
        });

        // Para apagar um cookie, basta definir o seu valor como vazio e colocar uma data de expiração abaixo da data atual
        document.cookie = "firstName=; " + new Date( 2000, 0, 1 ).toUTCString();


        . Observações:

            . É importante notar que a data de expiração deve ser especificada como uma data no passado para que o cookie seja apagado.

            . Se o cookie tiver um caminho ou domínio especificado, é importante incluir esses parâmetros ao apagar o cookie.

                document.cookie = "nome_do_cookie=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com";

            . A função document.cookie pode ser usada para apagar cookies, mas também pode ser usada para criar ou atualizar cookies.


19. Local Storage e Session Storage
-----------------------------------

    . Local Storage é uma tecnologia que permite armazenar dados no navegador do usuário de forma persistente. Os dados são armazenados 
        em um objeto chamado localStorage e podem ser acessados usando JavaScript.

        . Os dados são armazenados no navegador do usuário

        . Não são enviados para o servidor a cada requisição

        . Têm um tamanho limite de 5MB (varia de acordo com o navegador)

        . São armazenados de forma persistente, ou seja, não expiram após um período de tempo

    . Funções para utilizar "local storage" no navegador:

        // Criando um dado
        localStorage.setItem("nome", "João");

        // Criando um objeto
        const usuario = {
          nome: "João",
          idade: 30,
          cidade: "São Paulo"
        };
        
        localStorage.setItem("usuario", JSON.stringify(usuario));

        // Criando um array
        const frutas = ["maçã", "banana", "laranja"];
        
        localStorage.setItem("frutas", JSON.stringify(frutas));

        // Para acessar um dado
        localStorage.getItem("usuario");

        // Para remover um dado
        localStorage.removeItem("usuario");

        // Para remover todos os dados da local storage
        localStorage.clear();

        // Usando um loop para iterar sobre os índices da Local Storage e 
        // recuperar os nomes e valores dos dados usando as funções key() e getItem().
        for (let i = 0; i < localStorage.length; i++) {
          const nome = localStorage.key(i);
          const valor = localStorage.getItem(nome);
          console.log(`Nome: ${nome}, Valor: ${valor}`);
        }

        // Usamos a função Object.keys() para recuperar os nomes dos dados da Local Storage e, em seguida, 
        // usamos a função map() para criar um array de objetos com os nomes e valores dos dados
        const dados = Object.keys(localStorage).map(nome => ({
          nome,
          valor: localStorage.getItem(nome)
        }));
        console.log(dados);


20. Session Storage
-------------------

    . Session Storage é uma tecnologia que permite armazenar dados no navegador do usuário de forma temporária. Os dados são 
        armazenados em um objeto chamado sessionStorage e podem ser acessados usando JavaScript.

        . Os dados são armazenados no navegador do usuário

        . Não são enviados para o servidor a cada requisição

        . Têm um tamanho limite de 5MB (varia de acordo com o navegador)

        . São armazenados de forma temporária, ou seja, expiram quando o usuário fecha o navegador ou a sessão é encerrada

    . As Funções para utilizar "session storage" no navegador são as mesmas utilizadas na "local storage":

        . sessionStorage.setItem(nome, valor): cria um dado com o nome e valor especificados.

        . sessionStorage.getItem(nome): recupera o valor do dado com o nome especificado.

        . sessionStorage.removeItem(nome): remove o dado com o nome especificado.

        . sessionStorage.clear(): remove todos os dados da Session Storage.


21. Diferenças entre Cookies, Local Storage e Session Storage:
--------------------------------------------------------------


                            Cookies                     Local Storage                   Session Storage
                            -------                     -------------                   ---------------

            Capacidade      4KB                         10Mb                            5Mb

            Navegadores     HTML4 / HTML5               HTML5                           HTML5

            Acessível de    Qualquer Window             Qualquer Window                 Mesma Tab

            Expira          Definido manualmente        nunca                           Ao fechar a Tab 

            Local           No navegador e no           Somente no navegador            Somente no navegador
            Armazenamento   Servidor

            Enviado c/a     Sim                         Não                             Não
            Requisição

22. IndexedDB - Banco de dados dentro do navegador
-------------------------------------------------


    https://javascript.info/indexeddb



Requisições de Rede
-------------------

24. XMLHttpRequest
------------------

    . É uma API nativa do JavaScript que permite fazer requisições HTTP assíncronas. Ele é uma das primeiras 
        APIs de requisição HTTP disponíveis no JavaScript e é suportado pela maioria dos navegadores.

    . O objeto XMLHttpRequest é usado para fazer requisições HTTP para um servidor, como GET, POST, PUT, DELETE, 
        entre outros. Ele permite que você envie dados para o servidor e receba uma resposta.

    . O objeto XMLHttpRequest é assíncrono, o que significa que a execução do código não é bloqueada enquanto a 
        requisição é processada.

    . Métodos úteis

        open(method, url, async): abre uma conexão para a URL especificada.

            xhr.open(method, URL, [async, user, password])
                                    |
                                    +--->   false = synchronously   \___ É o que define se o comando aguardará a resposta, ou não, do servidor
                                            true = assynchronously  /

        send(data): envia a requisição com o corpo da requisição especificado.

            xhr.send([body])
                        |
                        +----> The optional body parameter contains the request body.


        setRequestHeader(header, value): define um cabeçalho para a requisição.

        getResponseHeader(header): obtém o valor de um cabeçalho da resposta.

        getAllResponseHeaders(): obtém todos os cabeçalhos da resposta.

    . Propriedades úteis

        readyState: o estado atual da requisição (0: não inicializado, 1: carregando, 2: carregado, 3: interativo, 4: completo).

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 3) {
                    // loading
                }
                if (xhr.readyState == 4) {
                    // request finished
                }
            };

        status: o código de status da resposta.

        statusText: o texto do código de status da resposta.

        responseText: o corpo da resposta como uma string.

        responseXML: o corpo da resposta como um objeto XML.

    . Eventos Úteis

        . load – Disparado quando a requisição é concluída com sucesso e o servidor retorna uma resposta.

            xhr.onload = function() {
                alert(`Loaded: ${xhr.status} ${xhr.response}`);
            };

        . error – Disparado quando ocorre um erro durante a requisição.

            xhr.onerror = function() { // only triggers if the request couldn't be made at all
                alert(`Network Error`);
            };

        . progress – Disparado periodicamente durante o carregamento da requisição, permitindo que você monitore o progresso.

            xhr.onprogress = function(event) { // triggers periodically
                // event.loaded - how many bytes downloaded
                // event.lengthComputable = true if the server sent Content-Length header
                // event.total - total number of bytes (if lengthComputable)
                alert(`Received ${event.loaded} of ${event.total}`);
            };

        . readystatechange: Disparado quando o estado da requisição muda. O estado é representado pela propriedade readyState, 
                            que pode ter os seguintes valores: 
                            * 0: não inicializado * 1: carregando * 2: carregado * 3: interativo * 4: completo

        . abort: Disparado quando a requisição é cancelada.

        . timeout: Disparado quando a requisição excede o tempo limite estabelecido.

        . loadstart: Disparado quando a requisição começa a ser carregada.

        . loadend: Disparado quando a requisição é concluída, independentemente do resultado.

    . Para esse tutorial precisaremos que o JSon Server esteja devidamente instalado. Vide aula "1. Instalações"

    . Exemplos
    
        . Utilizando o metodo GET

            <body>
                <div>
                    <button type="button" id="btnForm" value="ClickMe">ClickMe</button>
                    <br>
                    <div id="resultado"></div>
                </div>

                <script>
                    document.getElementById('btnForm').addEventListener('click', () => {
                        const xhr = new XMLHttpRequest();

                        xhr.open('GET', 'http://localhost:3000/posts/1', true);

                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                console.log(xhr.responseText);
                                
                                const responseText = xhr.responseText;
                                const jsonData = JSON.parse(responseText);

                                for ( const key in jsonData ){
                                    console.log(key, jsonData[key]);
                                }
                                
                                document.getElementById('resultado').innerHTML = xhr.responseText
                            }
                        };

                        xhr.send();
                    });
                </script>

            </body>

        . Utilizando o método POST ( Inclusão de um novo item )

            <body>
                <div>
                    <button type="button" id="btnForm" value="ClickMe">ClickMe</button>
                    <br>
                    <div id="resultado"></div>
                </div>

                <script>
                    document.getElementById('btnForm').addEventListener('click', () => {
                        const xhr = new XMLHttpRequest();

                        xhr.open('POST', 'http://localhost:3000/posts/', true);

                        xhr.setRequestHeader('Content-Type', 'application/json');

                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                console.log(xhr.responseText);
                                
                                const responseText = xhr.responseText;
                                const jsonData = JSON.parse(responseText);

                                for ( const key in jsonData ){
                                    console.log(key, jsonData[key]);
                                }
                                
                                document.getElementById('resultado').innerHTML = xhr.responseText
                            }
                        };

                        const post = {
                            id: 3,
                            title: 'Test Title',
                            views: 100
                        };

                        xhr.send(JSON.stringify(post));
                    });
                </script>

            </body>

        . Mais um exemplo do método POST, pegando o conteúdo dos campos do formulário com "FormData"

            <!DOCTYPE html>
            <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <style>
                    /* Add some basic styling to make the form look decent */
                    body {
                        font-family: Arial, sans-serif;
                    }

                    form {
                        width: 50%;
                        margin: 40px auto;
                        padding: 20px;
                        border: 1px solid #ccc;
                        border-radius: 10px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    }

                    label {
                        display: block;
                        margin-bottom: 10px;
                    }

                    input,
                    select {
                        width: 90%;
                        margin-bottom: 20px;
                        padding: 10px;
                        border: 1px solid #ccc;
                    }

                    button {
                        background-color: #4CAF50;
                        color: #fff;
                        padding: 10px 20px;
                        border: none;
                        border-radius: 5px;
                        cursor: pointer;
                    }

                    button:hover {
                        background-color: #3e8e41;
                    }
                </style>

            </head>

            <body>
                <form name="formTitle" id="formTitle">
                    <label for="id">Id</label>
                    <input type="text" id="id" name="id" value="9">
                    <br>
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title" value="Testando Title">
                    <br>
                    <label for="views">Views</label>
                    <input type="text" id="views" name="views" value="100">
                    <br>
                    <button type="button" id="btnForm" value="ClickMe">ClickMe</button>
                    <br>
                    <div id="resultado"></div>
                </form>

                <script>
                    document.getElementById('btnForm').addEventListener('click', () => {
                        const xhr = new XMLHttpRequest();

                        xhr.open('POST', 'http://localhost:3000/posts/', true);

                        xhr.setRequestHeader('Content-Type', 'application/json');


                        const formDataPost = document.getElementById("formTitle");

                        let postData = new FormData(formDataPost);

                        // const form = document.getElementById("formTitle");
                        // const formData = new FormData(form);

                        // for (const [key, value] of formData) {
                        //     console.log(`${key}: ${value}`);
                        // }


                        const dados = {};
                        for (const pair of postData.entries()) {
                            dados[pair[0]] = pair[1];
                        }

                        xhr.send(JSON.stringify(dados));

                        xhr.onload = function () {
                            if ( (xhr.status === 200) || ( xhr.status === 201)) {
                                console.log(xhr.responseText);

                                const responseText = xhr.responseText;
                                const jsonData = JSON.parse(responseText);

                                for (const key in jsonData) {
                                    console.log(key, jsonData[key]);
                                }

                                document.getElementById('resultado').innerHTML = xhr.responseText
                            } else {
                                console.log( xhr.responseText);
                                
                            }
                        };
                    });

                </script>

            </body>

            </html>




        . Utilizando o método PUT ( Atualização )

            <body>
                <div>
                    <button type="button" id="btnForm" value="ClickMe">ClickMe</button>
                    <br>
                    <div id="resultado"></div>
                </div>

                <script>
                    document.getElementById('btnForm').addEventListener('click', () => {
                        const xhr = new XMLHttpRequest();

                        xhr.open('PUT', 'http://localhost:3000/posts/3', true);

                        xhr.setRequestHeader('Content-Type', 'application/json');

                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                console.log(xhr.responseText);
                                
                                const responseText = xhr.responseText;
                                const jsonData = JSON.parse(responseText);

                                for ( const key in jsonData ){
                                    console.log(key, jsonData[key]);
                                }
                                
                                document.getElementById('resultado').innerHTML = xhr.responseText
                            }
                        };

                        const post = {
                            title: 'Titulo Teste',
                            views: 1000
                        };

                        // xhr.send();
                        xhr.send(JSON.stringify(post));
                    });
                </script>

            </body>

        . Utilizando o método DELETE

            <body>
                <div>
                    <button type="button" id="btnForm" value="ClickMe">ClickMe</button>
                    <br>
                    <div id="resultado"></div>
                </div>

                <script>
                    document.getElementById('btnForm').addEventListener('click', () => {
                        const xhr = new XMLHttpRequest();

                        xhr.open('DELETE', 'http://localhost:3000/posts/3', true);
                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                console.log(xhr.responseText);
                                
                                const responseText = xhr.responseText;
                                const jsonData = JSON.parse(responseText);

                                for ( const key in jsonData ){
                                    console.log(key, jsonData[key]);
                                }
                                
                                document.getElementById('resultado').innerHTML = xhr.responseText
                            }
                        };

                        xhr.send();
                    });
                </script>

            </body>

        . 


23. Fetch
---------

    . É uma API do JavaScript que permite fazer requisições HTTP de forma assíncrona e fácil de usar. 
        Ele é uma alternativa ao XMLHttpRequest e é suportado pela maioria dos navegadores modernos.

        . Sintaxe básica:

            // Usando "await"
            let response = await fetch(url, [options]);

            // Sem o uso do "await"
            fetch(url, [options])
                .then(resposta => {
                    // processar a resposta
                })
                .catch(erro => {
                    // tratar o erro
                });

        . Parâmetros

            . url: a URL da requisição

            . options: um objeto que contém as opções da requisição, como método, cabeçalhos, corpo, etc.
                        Sem as informações de "options" o método padrão invocado será o GET

        Opções

            . method: o método da requisição (GET, POST, PUT, DELETE, etc.)

            . headers: um objeto que contém os cabeçalhos da requisição

            . body: o corpo da requisição (opcional)

            . mode: o modo da requisição (cors, no-cors, etc.)

    . A resposta é obtida em duas fases:

        document.getElementById("btnForm").addEventListener("click", async () => {
            let response = await fetch('http://localhost:3000/comments');

            console.log(response);

            if (response.ok) { // if HTTP-status is 200-299
                // get the response body (the method explained below)
                let json = await response.json();
                
                console.log(json);

                // let text = await response.text();
                
                // console.log(text);

            } else {
                alert("HTTP-Error: " + response.status);
            }
        });


        1. O fetch retorna uma promise "let response = await fetch('http://localhost:3000/comments');".
            Podemos conferir se a promise foi resolvida com sucesso através do HTTP Status "if (response.ok)", 
            ou "if ( (response.status === 200) || (response.status === 201) )"

            . Observe o uso do async/await, é obrigatório o seu uso porque são retornados "promises"

        2. Para obter o body da resposta podemos fazer através "let json = await response.json()", se quisessemos
            poderiamos utilizar ao invés "response.json()" o "response.text()" para pegar a resposta como texto e 
            não como um objeto json.

    . Até aqui os exemplo utilizados foram com o uso do "async/wait", porém existe a outra forma que é a mais usada sem 
        o uso do "async/await":

        fetch('http://localhost:3000/comments')
            .then(resposta => resposta.json())          // Se quisessemos retorna um texto, ao invés de um objeto, 
            .then(result => {                           // podemos usar "response.text()"
                console.log(result);
            })
            .catch(erro => {
                console.error(erro);
            });
            
        . O "then" ocorre quando a promise é resolvida. Equivalente ao "response.ok" visto anteriormente.

        . O "catch" quando a promise dá erro, ou um "reject".

        . O primeiro "then" retorna uma promise para o segundo "then". Nesse último é que teremos a responsta final que 
            desejamos.

    . Exemplos:

        Exemplo 1 - Com await

            let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';

            let response = await fetch(url);

            let commits = await response.json(); // read response body and parse as JSON

            alert(commits[0].author.login);

        Exemplo 2 - Sem await

            fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
                .then(response => response.json())
                .then(commits => alert(commits[0].author.login));


        Exemplo 3 - Utilizando blob

            let response = await fetch('/article/fetch/logo-fetch.svg');

            let blob = await response.blob(); // download as Blob object

            // create <img> for it
            let img = document.createElement('img');
            
            img.style = 'position:fixed;top:10px;left:10px;width:100px';

            document.body.append(img);

            // show it
            img.src = URL.createObjectURL(blob);

            setTimeout(() => { // hide after three seconds
                img.remove();
                URL.revokeObjectURL(img.src);
            }, 3000);

        Exemplo 4 - Lendo o Response Header

            let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

            // get one header
            alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

            // iterate over all headers
            for (let [key, value] of response.headers) {
                alert(`${key} = ${value}`);
            }

        Exemplo 5 - Request Header

            let promise = fetch(url, {
                method: "GET", // POST, PUT, DELETE, etc.
                headers: {
                    // the content type header value is usually auto-set
                    // depending on the request body
                    "Content-Type": "text/plain;charset=UTF-8"
                },
                body: undefined, // string, FormData, Blob, BufferSource, or URLSearchParams
                referrer: "about:client", // or "" to send no Referer header,
                // or an url from the current origin
                referrerPolicy: "strict-origin-when-cross-origin", // no-referrer-when-downgrade, no-referrer, origin, same-origin...
                mode: "cors", // same-origin, no-cors
                credentials: "same-origin", // omit, include
                cache: "default", // no-store, reload, no-cache, force-cache, or only-if-cached
                redirect: "follow", // manual, error
                integrity: "", // a hash, like "sha256-abcdef1234567890"
                keepalive: false, // true
                signal: undefined, // AbortController to abort request
                window: window // null
            });

            /*  Lista de "forbidden HTTP headers"

                Accept-Charset, Accept-Encoding
                Access-Control-Request-Headers
                Access-Control-Request-Method
                Connection
                Content-Length
                Cookie, Cookie2
                Date
                DNT
                Expect
                Host
                Keep-Alive
                Origin
                Referer
                TE
                Trailer
                Transfer-Encoding
                Upgrade
                Via
                Proxy-*
                Sec-*
            */

        Exemplo 6 - Post Request

            let user = {
                name: 'John',
                surname: 'Smith'
            };

            let response = await fetch('/article/fetch/post/user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(user)
            });

            let result = await response.json();

            alert(result.message);

    . Parâmetros utilizados no "options" - fetch(url, [options])

        . referrer               URL de referência é a URL da página que fez a requisição ao servidor.

            fetch('http://localhost:3000/comments', {
                referrer: 'http://localhost:3000/'
            })

        . referrerPolicy        utilizado para especificar a política de referência que deve ser utilizada. 
                                A política de referência define como o navegador deve lidar com a URL de 
                                referência. São eles:

            O uso de referrer e referrerPolicy é importante para controlar como as informações de referência 
            são enviadas para o servidor e proteger a privacidade e a segurança dos usuários.

            no-referrer:                não enviar a URL de referência.

            no-referrer-when-downgrade: não enviar a URL de referência se a requisição for feita para um 
                                        servidor com um protocolo de segurança inferior 
                                        (por exemplo, de HTTPS para HTTP).

            same-origin:                enviar a URL de referência apenas se a requisição for feita para o 
                                        mesmo domínio.

            origin:                     enviar a URL de referência, mas sem incluir o caminho ou a consulta.
            
            strict-origin:              enviar a URL de referência, mas sem incluir o caminho ou a consulta, 
                                        e apenas se a requisição for feita para o mesmo domínio.
            
            strict-origin-when-cross-origin: enviar a URL de referência, mas sem incluir o caminho ou a consulta, 
                                             e apenas se a requisição for feita para um domínio diferente.


            fetch('https://api.example.com/dados', {
                referrerPolicy: 'same-origin'
            })

        . mode           define como o navegador deve lidar com a requisição. São eles:

            cors:           habilita o modo CORS (Cross-Origin Resource Sharing) para a requisição. Isso permite que a 
                            requisição seja feita para um servidor que não é o mesmo domínio da página que fez a requisição.

            no-cors:        desabilita o modo CORS para a requisição. Isso significa que a requisição só pode ser feita 
                            para o mesmo domínio da página que fez a requisição.

            same-origin:    habilita o modo de requisição para o mesmo domínio. Isso significa que a requisição só pode 
                            ser feita para o mesmo domínio da página que fez a requisição.

            navigate:       habilita o modo de navegação para a requisição. Isso significa que a requisição pode ser feita 
                            para um servidor que não é o mesmo domínio da página que fez a requisição, mas o navegador 
                            irá navegar para a URL da resposta.


            fetch('https://api.example.com/dados', {
                mode: 'no-cors'
            })

        . credentials       Utilizado para especificar como as credenciais de autenticação devem ser enviadas com a requisição. 
                            As credenciais de autenticação incluem cookies, tokens de autenticação e outros dados de autenticação


            omit: não enviar credenciais de autenticação.

            same-origin: enviar credenciais de autenticação apenas se a requisição for feita para o mesmo domínio.

            include: enviar credenciais de autenticação para todos os domínios.


            fetch('https://api.example.com/dados', {
                credentials: 'include'
            })

        . cache             Utilizado para especificar como o navegador deve lidar com o cache para a requisição. O cache é 
                            um mecanismo que armazena cópias de recursos solicitados anteriormente, para que possam ser 
                            recuperados mais rapidamente em requisições subsequente

            default: o navegador usa o cache padrão, que é definido pelo servidor.

            no-store: o navegador não armazena a resposta no cache.

            reload: o navegador sempre recarrega a resposta do servidor, ignorando o cache.

            no-cache: o navegador sempre verifica se a resposta está atualizada no servidor, antes de usar o cache.

            force-cache: o navegador sempre usa o cache, mesmo que a resposta esteja desatualizada.

            only-if-cached: o navegador só usa o cache se a resposta estiver disponível no cache.


            fetch('https://api.example.com/dados', {
                cache: 'no-cache'
            })



        . redirect          utilizado para especificar como o navegador deve lidar com redirecionamentos de URL 
                            durante uma requisição fetch.

            follow: o navegador segue o redirecionamento de URL e faz uma nova requisição para o URL redirecionado.

            error:  o navegador retorna um erro se um redirecionamento de URL for detectado.

            manual: o navegador não segue o redirecionamento de URL e retorna a resposta original, permitindo que 
                    o aplicativo lidere com o redirecionamento manualmente.


            fetch('https://api.example.com/dados', {
                redirect: 'error'
            })

        . integrity         Utilizado para especificar uma soma de verificação (hash) para a resposta da requisição fetch. 
                            Isso permite que o navegador verifique se a resposta recebida é autêntica e não foi modificada 
                            durante a transmissão.

            . O valor de integrity é uma string que contém a soma de verificação da resposta, geralmente no formato de um 
                hash SHA-256 ou SHA-384.    

                fetch('https://api.example.com/dados', {
                    integrity: 'sha256-abc123def456ghi789jkl012'
                })

            . Tipos de somas

                sha256: soma de verificação SHA-256.
                sha384: soma de verificação SHA-384.
                sha512: soma de verificação SHA-512.

            . A soma de verificação pode ser gerada usando ferramentas como openssl ou hashlib. Por exemplo:

                # Isso gerará a soma de verificação SHA-256 do arquivo dados.txt usando a chave secreta segredo.
                openssl dgst -sha256 -hmac "segredo" dados.txt

        . keepalive         Utilizado para especificar se a conexão HTTP deve ser mantida ativa após a requisição 
                            fetch ser concluída.

            fetch('https://api.example.com/dados', {
                keepalive: true
            })


Bibliotecas para Desenvolvimento Web
------------------------------------

24. JQuery Mask
---------------

    . Mais detalhes no link abaixo:

        https://igorescobar.github.io/jQuery-Mask-Plugin/
        https://blog.igorescobar.com/2012/03/13/mascaras-com-jquery-mask-plugin/

    . É uma biblioteca JavaScript que permite aplicar máscaras a campos de formulário, como inputs text, para 
        formatar a entrada de dados de acordo com um padrão específico.

    . Podemos formatar a entrada de dados em campos de formulário, como:

        Números: 999.999.999-99
        Telefones: (99) 9999-9999
        CPF: 999.999.999-99
        Data: dd/mm/yyyy
        Hora: hh:mm:ss
        Etc.

    . Declarações obrigatórias para o funcionamento da biblioteca:

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

    . Outras integrações que podemos fazer:

        . Estilizações

            Bootstrap:      A jQuery Mask pode ser usada em conjunto com o Bootstrap para criar formulários responsivos e personalizados.

            Materialize:    A jQuery Mask pode ser usada em conjunto com o Materialize para criar formulários com um estilo material design.
            
            Foundation:     A jQuery Mask pode ser usada em conjunto com o Foundation para criar formulários responsivos e personalizados.
            
            Semantic UI:    A jQuery Mask pode ser usada em conjunto com o Semantic UI para criar formulários com um estilo mais minimalista 
                            e responsivo.

        . Bibliotecas Javascript

            . jQuery Validate: a jQuery Mask pode ser usada em conjunto com a jQuery Validate para criar formulários com validação de dados.
            
            . jQuery Form: a jQuery Mask pode ser usada em conjunto com a jQuery Form para criar formulários com envio de dados via AJAX.
            
            . jQuery UI Datepicker: a jQuery Mask pode ser usada em conjunto com o jQuery UI Datepicker para criar formulários com seleção de datas.

    . Exemplo

        <!DOCTYPE html>
        <html>

            <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>JQuery Mask Plugin</title>
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $("#cpf").mask("000.000.000-00")
                        $("#cnpj").mask("00.000.000/0000-00")
                        $("#telefone").mask("(00) 0000-0000")
                        $("#salario").mask("999.999.990,00", {
                            reverse: true
                        })
                        $("#cep").mask("00.000-000")
                        $("#dataNascimento").mask("00/00/0000")

                        $("#rg").mask("999.999.999-W", {
                            translation: {
                                'W': {
                                    pattern: /[X0-9]/
                                }
                            },
                            reverse: true
                        })

                        var options = {
                            translation: {
                                'A': {
                                    pattern: /[A-Z]/
                                },
                                'a': {
                                    pattern: /[a-zA-Z]/
                                },
                                'S': {
                                    pattern: /[a-zA-Z0-9]/
                                },
                                'L': {
                                    pattern: /[a-z]/
                                },
                            }
                        }

                        $("#placa").mask("AAA-0000", options)

                        $("#codigo").mask("AA.LLL.0000", options)

                        $("#celular").mask("(00) 0000-00009")

                        $("#celular").blur(function(event) {
                            if ($(this).val().length == 15) {
                                $("#celular").mask("(00) 00000-0009")
                            } else {
                                $("#celular").mask("(00) 0000-00009")
                            }
                        })
                    })
                </script>
            </head>

            <body>
                <h1>JQuery Mask Plugin</h1>
                <form name="formulario" method="post">
                    <label>CPF</label>
                    <input type="text" name="cpf" id="cpf" />
                    <br />
                    <label>CNPJ</label>
                    <input type="text" name="cnpj" id="cnpj" />
                    <br />
                    <label>RG</label>
                    <input type="text" name="rg" id="rg" />
                    <br />
                    <label>Telefone</label>
                    <input type="text" name="telefone" id="telefone" />
                    <br />
                    <label>Celular</label>
                    <input type="text" name="celular" id="celular" />
                    <br />
                    <label>Salário</label>
                    <input type="text" name="salario" id="salario" />
                    <br />
                    <label>CEP</label>
                    <input type="text" name="cep" id="cep" />
                    <br />
                    <label>Data de Nascimento</label>
                    <input type="text" name="dataNascimento" id="dataNascimento" />
                    <br />
                    <label>Placa</label>
                    <input type="text" name="placa" id="placa" />
                    <br />
                    <label>Código AA.aaa.9000</label>
                    <input type="text" name="codigo" id="codigo" />
                    <br />
                    <input type="submit" name="enviar" value="Enviar" />
                </form>
            </body>

        </html>

25. JQuery Mask Money
---------------------

    . Mais detalhes nos links abaixo:

        https://plentz.github.io/jquery-maskmoney/

    . É uma extensão da biblioteca jQuery Mask que fornece uma forma fácil de formatar campos de formulário para entrada de valores monetários.

    . Com a jQuery Mask Money, podemos criar máscaras para formatar a entrada de valores monetários em campos de formulário, como:

        Valores em reais (R$): R$ 1.234,56
        Valores em dólares (US$): $ 1,234.56
        Valores em euros (€): € 1.234,56
        Etc.


        $('#meuInput').maskMoney({
            prefix: 'R$ ',
            thousands: '.',
            decimal: ',',
            affixesStay: true
        });

    . Exemplo

        <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js" type="text/javascript"></script>
        </head>
        <body>
            <form id="formulario" action="teste.html">
                <input type="text" id="currency" placeholder="Informe o Valor" /></br> <!-- onfocus="this.value=''" -->
                <input type="submit" id="enviar" value="Enviar"/>
                <p id="showResult"></p>
            </form>
        </body>
        <script>
            $(function() {
                $('#currency').maskMoney({ prefix: 'R$ ', allowNegative: true, thousands: '.', decimal: ',', affixesStay: false });
            })

            $(document).ready(function(){
                                    $("#enviar").on('click', function(){
                                                                event.preventDefault();

                                                                var id = $("#currency").val();

                                                                $("#showResult").html("Valor do Campo " + id );

                                                                $("#currency").value = '';
                                                                $("#currency").focus();

                                                            }
                                    )
                                }
                        )
        </script>

26. Notify.js ( Biblioteca de Notificação )
-------------

    . Mais detalhes no link abaixo:

        https://notifyjs.jpillora.com/

    . É uma biblioteca JavaScript que permite exibir alertas de notificação em uma página da web. Com a Notify.js.

    . A biblioteca Notify.js fornece várias opções para personalizar a aparência e o comportamento dos alertas, como:

        . Posição:          Podemos definir a posição em que os alertas são exibidos, como canto superior direito, 
                            canto inferior esquerdo, etc.

        Cor:                Podemos definir a cor do alerta, como vermelho, verde, azul, etc.

        Ícone:              Podemos definir um ícone para o alerta, como um ícone de sucesso, erro, informação, etc.

        Tempo de exibição:  Podemos definir o tempo em que o alerta é exibido antes de ser fechado automaticamente.

        Personalização:     Podemos personalizar o conteúdo e a aparência dos alertas, como adicionar links, imagens, etc.    

    . Exemplo

        <!DOCTYPE html>
        <html>

            <head>
                <title>Notify.js Example</title>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/themes/alertify.min.css" />
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>
            </head>

            <body>
                <h1>Notify.js Example</h1>
                <button id="alert-button">Emitir Alerta</button>
                <button id="success-button">Emitir Sucesso</button>
                <button id="error-button">Emitir Erro</button>

                <script>
                    // Configuração básica da Notify.js
                    $.notify.defaults({
                    position: 'top right',
                    autoHide: true,
                    autoHideDelay: 3000
                    });

                    document.getElementById("alert-button").addEventListener("click", () => {
                    $.notify('Este é um alerta!', 'alert');
                    });

                    document.getElementById("success-button").addEventListener("click", () => {
                    $.notify('Operação realizada com sucesso!', 'success');
                    });

                    document.getElementById("error-button").addEventListener("click", () => {
                    $.notify('Erro ao realizar a operação!', 'error');
                    });
                </script>
            </body>

        </html>

27. Toastr ( Biblioteca de Notificação )
----------------------------------------

    . Mais detalhes no link abaixo:

        https://codeseven.github.io/toastr/

    . É uma biblioteca JavaScript que permite criar alertas de notificação em uma página da web.

    . Exemplo:

        <!DOCTYPE html>
        <html>
            <head>
                <title>Toastr Example</title>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css">
            </head>
            <body>
                <h1>Toastr Example</h1>
                <button id="alert-button">Emitir Alerta</button>
                <button id="success-button">Emitir Sucesso</button>
                <button id="error-button">Emitir Erro</button>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
                <script>
                    // Configuração básica da Toastr
                    toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                    };

                    // Emitir alerta quando o botão for clicado
                    $('#alert-button').on('click', function() {
                    toastr.info('Este é um alerta!');
                    });

                    // Emitir sucesso quando o botão for clicado
                    $('#success-button').on('click', function() {
                    toastr.success('Operação realizada com sucesso!');
                    });

                    // Emitir erro quando o botão for clicado
                    $('#error-button').on('click', function() {
                    toastr.error('Erro ao realizar a operação!');
                    });
                </script>
            </body>
        </html>

28. JQuery Validate
-------------------

    . É uma biblioteca para validar os elementos de entrada de um formulário HTML.

    . Mais informações no link abaixo:

        https://jqueryvalidation.org/

    . Abaixo a relação de atributos para validação na tag HTML:

        Regra	            Validação
        ------              ---------
        email	            Se definido como true, o campo só aceitará e-mails válidos;
        required	        Se definido como true, o campo é de preenchimento obrigatório;
        min	                Define um número ou valor mínimo válido. Por exemplo, se definimos como 4, o usuário só poderá 
                            informar um número maior igual a 4. Abaixo disso a informação é inválida;
        max	                Define um número ou valor máximo válido. Por exemplo, se definimos como 10, o usuário só poderá 
                            informar um número que seja menor ou igual a 10. Acima disso a informação é inválida;
        range	            Determina um intervalo, contendo um valor mínimo e máximo válido. Por exemplo, se definirmos 
                            como [10, 20], o usuário só poderá informar um número que seja maior ou igual a 10 e menor ou 
                            igual a 20;
        minlength	        Determina uma quantidade mínima de caracteres. Por exemplo, se definirmos como 10, o usuário só 
                            poderá informar um valor com no mínimo 10 caracteres. Abaixo disso a informação é inválida;
        maxlength	        Define uma quantidade máxima de caracteres. Por exemplo, se definirmos como 5, o usuário só 
                            poderá informar um valor com no máximo 5 caracteres. Acima disso a informação é inválida;
        rangelength	        Define um intervalo, contendo uma quantidade mínima e máxima de caracteres válidos. Por exemplo, 
                            se definirmos como [2, 6], o usuário só poderá informar um valor com nomínimo 2 e no máximo 6 
                            caracteres;
        url	                Se definido como true, o campo só aceitará URLs válidas;
        date	            Se definido como true, o campo só aceitará datas válidas;
        dateISO	            Caso definido como true, o input só aceitará datas no formato ISO;
        number	            Caso definido como true, o input só aceitará números inteiros ou decimais;
        digits	            Caso definido como true, o input só permitirá dígitos;
        creditcard	        Se definido como true, o input só permitirá número de cartão de crédito válido;
        remote	            Caso defina uma URL de verificação, por exemplo “verificar_se_existe_cpf.php”. Então o Validation 
                            realiza uma verificação remota com a url e com o valor informado no campo, assim, se a resposta para 
                            a requisição de validação for false, então o Validation entende que a informação no campo não é válida, 
                            agora caso a resposta for true então a informação é válida. Por exemplo: verificar se o CFP já existe 
                            na aplicação;
        equalTo	            Verifica se o valor dois campos são iguais. Por exemplo: Verificar se as senhas são iguais, no cenário 
                            de inserir uma senha e repetir a senha novamente.
        accept	            Esta regra é utilizada para o campo “input= file” para upload de arquivo, onde podemos definir quais 
                            mime-types são permitidos. Por exemplo, se definimos esta regra com o valor “audio/*”, então estamos 
                            dizendo ao Validation que só é permitido apenas arquivos de áudio;
        extension	        Nesta regra podemos definir uma certa extensão de arquivo que poderá ser aceito;
        phoneUs	            Se definido como true, o campo só aceitará valor de telefone válido dos EUA
        require_from_group  Garante que pelo o menos um campo deve ser válido dentro de um grupo de campos.

    . Declarações obrigatória:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

    . Exemplo:

        <!DOCTYPE html>
        <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />

                <style>
                    .error {
                        color: red;
                    }
                </style>


                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
                <script
                    src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/localization/messages_pt_BR.min.js"></script>
            </head>

            <body>
                <div class="container">
                    <h1>My Form</h1>
                    <form action="" name="registration">
                        <div class="row">
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="firstname">First Name</label>
                                    <input type="text" 
                                            name="firstname" 
                                            id="firstname" 
                                            class="form-control form-control-sm" 
                                            placeholder="Name">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="middlename">Middle Name</label>
                                    <input type="text" 
                                            name="middlename" 
                                            id="middlename"  
                                            class="form-control form-control-sm" 
                                            placeholder="Middle name">
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label for="lastname">Last Name</label>
                                    <input type="text" 
                                            name="lastname" 
                                            id="lastname"  
                                            class="form-control form-control-sm" 
                                            placeholder="Lastname">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" 
                                            name="email" 
                                            id="email"  
                                            class="form-control form-control-sm" 
                                            placeholder="example@exp.com">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="password">Password</label>
                                    <input type="password" 
                                            name="password" 
                                            id="password"   
                                            class="form-control form-control-sm"  
                                            placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">Register</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <script>
                    $(document).ready(function () {
                        $("form[name='registration']").validate({
                            rules: {
                                firstname: "required",
                                lastname: "required",
                                email: {
                                    required: true,
                                    email: true
                                },
                                password: {
                                    required: true,
                                    minlength: 6
                                }
                            },
                            messages: {
                                firstname: "Favor entrar com o seu primeiro nome",
                                lastname: "Favor entrar com o seu último nome",
                                email: {
                                    required: "Preenchimento obrigatório",
                                    email: "Favor entrar com um email válido"
                                },
                                password: {
                                    required: "Favor fornecer uma senha",
                                    minlength: "A senha não pode ser inferior a 6 dígitos"
                                },
                            },
                            submitHandler: function (form) {
                                form.submit();
                            }
                        });
                    });
                </script>
            </body>

        </html>