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 Code

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”.

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);
    
    

React JS

È uma biblioteca JavaScript de código aberto para construção de interfaces de usuário interativas e reutilizáveis.

Principais características

As principais características do React JS são:

1. Utiliza como base as linguagens HTML, CSS e JavaScript
2. Utiliza o conceito de componentes para criar as páginas
3. Cria Single Page Applications (SPAs)

A seguir vemos que o React JS utiliza como base as linguagens HTML, CSS e JavaScript para criar as páginas:

Criando aplicação React JS

Comando usado para criar app JS: npx create-react-app minha-pagina

Comando para startar o Projeto npm start

Hello World

Alterar o arquivo App.js dentro da pasta src para criar o Hello World:

Entendo a Sintaxe

Exercício Construindo Essa Pagina

Veja no Código 2 o conteúdo do arquivo App.css.

    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100vh;
    }
    
    /* TOPO */
    header {
      background-color: #20232a;
      color: #61dafb;
      padding: 0 15px;
    }
    
    header p {
      font-weight: bold;
    }
    
    /* CONTEÚDO */
    main {
      height: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    
    /* SEÇÃO TÍTULO */
    .box-titulo {
      background-color: #282c34;
      padding-bottom: 50px;
    }
    
    h1 {
      color: #61dafb;
    }
    
    .box-titulo p{
      font-size: 24px;
      color: #fff;
      margin-bottom: 50px;
    }
    
    .box-titulo a{
      text-decoration: none;
      background-color: #61dafb;
      color: #000;
      padding: 10px 20px;
    }
    
    /* SEÇÃO REQUISITOS */
    .box-requisitos {
      padding: 30px 10px;
    }
    
    .box-cards {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      margin-top: 80px;
    }
    
    .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #282c34;
      width: calc((100% / 3) - 10px);
      max-width: 300px;
      margin: 5px;
      padding: 20px 15px;
      border-radius: 5px;
      box-shadow: 5px 5px rgb(145, 145, 145);
    }
    
    .card h3{
      margin: 0 0 10px;
      color: #edc854;
    } 
    
    .card p {
      margin: 0;
      color: #fff;
    }
    
    /* SEÇÃO RODAPÉ */
    footer {
      background-color: #f2f3f6;
      text-align: center;
    }