Característica: Tipagem mutável

Significa poder alterar o tipo da variável ao longo do código.

Característica: Case Sensitive

Significa que letras maiúsculas e minúsculas são consideradas diferentes em uma linguagem de programação.

Node.js

Node.js é um interpretador de código JavaScript que permite executar JavaScript no servidor.

Instalando o Node.js

Para começar a usar o Node.js, siga os passos abaixo:

1. Visite o site oficial do Node.js: https://nodejs.org/en/
2. Clique no botão de download para a versão adequada ao seu sistema operacional.
3. Faça o download e execute o instalador, seguindo as instruções na tela.
4. Após a instalação, você poderá criar e executar aplicativos com Node.js.

Agora você está pronto para começar a desenvolver usando o Node.js!

Exemplo de console.log

Criar um arquivo aula1.js no VS Codeno ou Ir para PlayCode

Digitar o código console.log("Aula 1 - Dispositivos Móveis")

Depois Executar o Codigo node aula1.js

Crie um novo arquivo no Visual Studio Code clicando em File > New file e salve-o na área de trabalho com o nome “hello_world_funcao.js”.

Vamos ao código.

Criando uma variável

O primeiro passo é criar uma variável com o valor “Hello World”.

No JavaScript, para criar uma variável usamos a palavra var, seguida do nome da variável, depois um sinal de igual =, para indicar que vamos atribuir um valor para ela, e o valor. Observe a Figura 1.

var texto = "Hello World";

Criando uma função

Em seguida, vamos criar uma função que imprime um texto. Utilizar funções evita repetições de código e o deixa mais organizado.

Para criar uma função utilizamos a palavra function, seguida do nome da função, parênteses ( ) e chaves { }. Veja como vai ficar:

    function imprimirTexto() { }
    

Precisamos enviar o texto que queremos imprimir para a função e, para isso, vamos passar um parâmetro para ela, que deve ser colocado entre os parênteses ( ).

    function imprimirTexto(textoParaImprimir) {}
    

Agora precisamos criar o código que vai ser executado quando chamarmos esta função. Vamos colocar o mesmo código da aula anterior dentro das { }:

    console.log(“Hello World”);
    

Mas no lugar do texto, vamos colocar o parâmetro que a função vai receber. Vai ficar assim:

    function imprimirTexto(textoParaImprimir) {
       console.log(textoParaImprimir);
    }
    

Veja no slide abaixo a explicação detalhada do código:

Chamando a função

Nossa função está pronta, agora só precisamos chamá-la no nosso código. Para isso, precisamos apenas digitar o nome dela, seguido do parâmetro que vamos passar para ela dentro dos parênteses. Vai ficar assim:

    imprimirTexto(texto);
    

Nesse caso, estamos passando para a função imprimirTexto a variável texto, que possui o valor “Hello World”.

Utilizar funções evita repetições de código e o deixa mais organizado.

Tudo pronto. Agora é só executar o comando node hello_world_funcao.js no terminal, como fizemos na aula anterior.

Segue o código completo:

    var texto = "Hello World";
    
    function imprimirTexto(textoParaImprimir) {
       console.log(textoParaImprimir);
    }
    
    imprimirTexto(texto);
    
    

O que é Document Object Model (DOM)?

O Document Object Model (DOM) é uma interface de programação e uma representação estruturada de documentos em formato HTML, XML ou outros formatos similares. Ele permite que programas de linguagens de programação, como JavaScript, interajam com a estrutura, conteúdo e estilo de um documento da web. Basicamente, o DOM modela um documento como uma árvore de objetos, onde cada parte do documento, como elementos HTML, atributos e texto, é representada por um objeto no DOM.

O DOM permite que os desenvolvedores web acessem, manipulem e modifiquem elementos de uma página da web de forma dinâmica, sem a necessidade de recarregar a página inteira. Isso é essencial para criar páginas da web interativas e dinâmicas, onde os elementos podem ser adicionados, removidos, alterados e animados em resposta a ações do usuário ou eventos.

Principais características do DOM:

1. Estrutura em Árvore: O DOM representa um documento como uma estrutura em forma de árvore, com o nó raiz representando o documento inteiro e os nós subsequentes representando elementos, atributos e conteúdo de texto.
2. Acesso e Manipulação: O DOM oferece métodos e propriedades que permitem aos desenvolvedores acessar e manipular elementos, atributos e conteúdo dentro de um documento.
3. Eventos: O DOM também lida com eventos, permitindo que scripts respondam a interações do usuário, como cliques de mouse, pressionamentos de tecla e outros eventos.
4. Interação Dinâmica: Por meio do DOM, os desenvolvedores podem criar páginas da web que respondem dinamicamente às ações do usuário, atualizando apenas partes específicas da página conforme necessário.
5. Acessibilidade: O DOM também é usado para fornecer suporte a tecnologias assistivas, permitindo que leitores de tela e outros dispositivos interpretem e apresentem o conteúdo de uma página de forma acessível para pessoas com deficiências visuais ou outras necessidades.

O DOM não se limita apenas a documentos HTML; ele também é usado para representar e interagir com documentos XML, SVG (Scalable Vector Graphics) e outros formatos. Em essência, o DOM é uma peça fundamental na criação de experiências interativas e dinâmicas na web, permitindo que os desenvolvedores controlem a estrutura e o comportamento de uma página por meio de scripts e linguagens de programação.

Aprenda mais sobre o Document Object Model (DOM) clicando aqui.

Principais Objetos do Document Object Model (DOM)

O Document Object Model (DOM) é composto por uma variedade de objetos que representam diferentes partes de um documento HTML ou XML. Cada objeto tem suas propriedades e métodos que permitem acessar e manipular elementos e conteúdo. Aqui estão alguns dos principais objetos do DOM:

1. document: O objeto document representa o documento inteiro e é a entrada principal para interagir com o DOM. Ele fornece métodos para selecionar elementos, criar novos elementos, modificar conteúdo e muito mais.
2. Element: O objeto Element representa um elemento HTML ou XML. Cada tag (como <div>, <p>, etc.) é representada por um objeto Element. Os elementos têm propriedades para acessar atributos e conteúdo, e métodos para manipular esses elementos.
3. Text: O objeto Text representa o conteúdo textual dentro de um elemento. Por exemplo, o texto entre as tags <p> é representado por um objeto Text.
4. Attribute: O objeto Attribute representa um atributo dentro de um elemento. Cada atributo (como class, id, etc.) é representado por um objeto Attribute.
5. Event: O objeto Event representa um evento que ocorre em um elemento. Ele contém informações sobre o evento, como o tipo de evento, o alvo e os dados associados.
6. HTMLElement: O objeto HTMLElement é uma subclasse de
7. Window: O objeto Window representa a janela do navegador ou o contexto global no qual a página está sendo exibida. Ele fornece métodos para manipular a janela, controlar pop-ups e lidar com eventos.

Esses são apenas alguns dos principais objetos do DOM. Cada objeto tem seu próprio papel no modelo, permitindo que os desenvolvedores acessem, manipulem e interajam com diferentes aspectos dos documentos da web.

Como Usar o document.addEventListener

O document.addEventListener é como um instrutor invisível em JavaScript. Ele permite que você diga ao navegador para prestar atenção a ações, como cliques de mouse, que acontecem em qualquer parte da página.

Imagine que é como dar uma ordem: "Hey navegador, quando alguém clicar em algo na página, me avise!"

Evento DOMContentLoaded

O evento DOMContentLoaded é acionado quando a estrutura do DOM foi totalmente construída e os elementos HTML da página estão prontos para serem manipulados através do JavaScript. Isso assegura que seu código JavaScript interaja com os elementos da página somente quando eles estiverem disponíveis.

Usando o evento DOMContentLoaded

O evento DOMContentLoaded é adicionado ao documento usando document.addEventListener. Quando o evento é disparado (quando o DOM estiver completamente carregado), a função dentro dele é acionada. Dentro da função, você pode realizar ações que envolvem elementos da página, porque agora o DOM está pronto e acessível.

Exercicios

Contagem de Vogais: Crie uma função que conte e retorne o número de vogais em uma string.