Pesquisa de site

Escreva seu primeiro código JavaScript

JavaScript foi criado para a web, mas pode fazer muito mais. Aprenda o básico e baixe nossa folha de dicas para ter sempre os detalhes em mãos.

JavaScript é uma linguagem de programação cheia de surpresas agradáveis. Muitas pessoas encontram pela primeira vez o JavaScript como uma linguagem para a web. Há um mecanismo JavaScript em todos os principais navegadores, existem estruturas populares como JQuery, Cash e Bootstrap para ajudar a tornar o design da web mais fácil e existem até ambientes de programação escritos em JavaScript. Parece estar em toda parte na Internet, mas também é uma linguagem útil para projetos como o Electron, um kit de ferramentas de código aberto para a construção de aplicativos de desktop multiplataforma com JavaScript.

JavaScript é uma linguagem surpreendentemente multifuncional, com uma ampla variedade de bibliotecas para muito mais do que apenas criar sites. Aprender o básico do idioma é fácil e é uma porta de entrada para construir tudo o que você imaginar.

Instalar JavaScript

À medida que você avança com JavaScript, você pode querer bibliotecas e tempos de execução avançados de JavaScript. Porém, quando você está apenas começando, não precisa instalar o JavaScript. Todos os principais navegadores incluem um mecanismo JavaScript para executar o código. Você pode escrever JavaScript usando seu editor de texto favorito, carregá-lo em seu navegador e ver o que seu código faz.

Comece com JavaScript

Para escrever seu primeiro código JavaScript, abra seu editor de texto favorito, como Notepad++, Atom ou VSCode. Por ter sido desenvolvido para a web, o JavaScript funciona bem com HTML, então primeiro experimente um pouco de HTML básico:

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>
  </body>
</html>

Salve o arquivo e abra-o em um navegador da web.

(Seth Kenlon, CC BY-SA 4.0)

Para adicionar JavaScript a esta página HTML simples, você pode criar um arquivo JavaScript e consultá-lo no head ou simplesmente incorporar seu código JavaScript no HTML usando <script> etiqueta. Neste exemplo, incorporo o código:

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

Recarregue a página no seu navegador.

(Seth Kenlon, CC BY-SA 4.0)

Como você pode ver, a tag <p> conforme escrita ainda contém a string "Nothing here", mas quando é renderizada, o JavaScript a altera para que contenha "Hello world". Sim, o JavaScript tem o poder de reconstruir (ou apenas ajudar a construir) uma página web.

O JavaScript neste script simples faz duas coisas. Primeiro, ele cria uma variável chamada myvariable e coloca a string "Hello world!" afim disso. Finalmente, ele pesquisa no documento atual (a página da web conforme o navegador a está renderizando) por qualquer elemento HTML com o ID example. Ao localizar example, ele usa a função innerHTML para substituir o conteúdo do elemento HTML pelo conteúdo de myvariable.

Obviamente, não é necessário usar uma variável personalizada. É igualmente fácil preencher o elemento HTML com algo que está sendo criado dinamicamente. Por exemplo, você poderia preenchê-lo com um carimbo de data/hora:

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>
    
  </body>
</html>

Recarregue a página para ver um carimbo de data/hora gerado no momento em que a página é renderizada. Recarregue algumas vezes para observar o incremento dos segundos.

Sintaxe JavaScript

Na programação, sintaxe refere-se às regras de como as sentenças (ou "linhas") são escritas. Em JavaScript, cada linha de código deve terminar com ponto e vírgula (;) para que o mecanismo JavaScript que executa seu código entenda quando parar de ler.

Palavras (ou "strings") devem ser colocadas entre aspas ("), enquanto números (ou "inteiros") ficam sem.

Quase todo o resto é uma convenção da linguagem JavaScript, como variáveis, arrays, instruções condicionais, objetos, funções e assim por diante.

Criando variáveis em JavaScript

Variáveis são contêineres para dados. Você pode pensar em uma variável como uma caixa onde você pode colocar dados para compartilhar com seu programa. A criação de uma variável em JavaScript é feita com duas palavras-chave que você escolhe com base em como pretende usar a variável: let e var. A palavra-chave var denota uma variável destinada a ser usada por todo o programa, enquanto let cria variáveis para propósitos específicos, geralmente dentro de funções ou loops.

A função typeof integrada do JavaScript pode ajudá-lo a identificar que tipo de dados uma variável contém. Usando o primeiro exemplo, você pode descobrir que tipo de dados myvariable contém modificando o texto exibido para:

<string>
let myvariable = "Hello world!";
document.getElementById("example").innerHTML = typeof(myvariable);
</string>

Isso renderiza "string" em seu navegador porque a variável contém "Olá, mundo!" Armazenar diferentes tipos de dados (como um número inteiro) em myvariable faria com que um tipo de dados diferente fosse impresso em sua página da web de exemplo. Tente alterar o conteúdo de myvariable para o seu número favorito e depois recarregue a página.

Criando funções em JavaScript

Funções em programação são processadores de dados independentes. São eles que tornam a programação modular. É porque existem funções que os programadores podem escrever bibliotecas genéricas que, por exemplo, redimensionam imagens ou acompanham a passagem do tempo para outros programadores (como você) usarem em seu próprio código.

Você cria uma função fornecendo um nome personalizado para sua função seguido por qualquer quantidade de código entre colchetes.

Aqui está uma página da web simples com uma imagem redimensionada e um botão que analisa a imagem e retorna as verdadeiras dimensões da imagem. Neste código de exemplo, o elemento HTML <button> usa a função JavaScript integrada onclick para detectar a interação do usuário, o que aciona uma função personalizada chamada get_size:

<html>
  <head>
    <title>Imager</title>
  </head>
  <body>

    <div>
      <button onclick="get_size(document.getElementById('myimg'))">
        Get image size
    </button>
    </div>
    
    <div>
      <img style="width: 15%" id="myimg" src="https://opensource.com/penguin.png" />
    </div>
   
    <script>
      function get_size(i) {
        let w = i.naturalWidth;
        let h = i.naturalHeight;
        alert(w + " by " + h);
      }
    </script>
    
  </body>
</html>

Salve o arquivo e carregue-o em seu navegador para testar o código.

(Seth Kenlon, CC BY-SA 4.0)

Aplicativos multiplataforma com JavaScript

Você pode ver no exemplo de código como JavaScript e HTML trabalham juntos para criar uma experiência de usuário coesa. Este é um dos grandes pontos fortes do JavaScript. Ao escrever código em JavaScript, você herda uma das interfaces de usuário mais comuns da computação moderna, independentemente da plataforma: o navegador da web. Seu código é multiplataforma por natureza, então seu aplicativo, seja apenas um humilde analisador de tamanho de imagem ou um editor de imagens complexo, videogame ou qualquer outra coisa que você imaginar, pode ser usado por qualquer pessoa com um navegador da web (ou um desktop , se você entregar um aplicativo Electron).

Aprender JavaScript é fácil e divertido. Existem muitos sites com tutoriais disponíveis. Existem também mais de um milhão de bibliotecas JavaScript para ajudá-lo a interagir com dispositivos, periféricos, Internet das Coisas, servidores, sistemas de arquivos e muito mais. E enquanto você aprende, mantenha nossa folha de dicas sobre JavaScript por perto para se lembrar dos detalhes de sintaxe e estrutura.

Artigos relacionados: