Manual do Leone/Módulo 7

É possível estilizar como você vê a Wikipédia, adicionando botões, mudando a cor, criando botões para realizar diversas funções. Para fazer isso, você precisa fazer as alterações apropriadas em sua página de personalização de JavaScript, que é composta do prefixo do domínio de usuário (user), que pode ser "Usuário:", "Usuária:" ou "Usuário(a):" (dependendo do gênero escolhido). Depois vem o nome que você escolheu, seguido de uma barra inclinada e por fim "common.js". Por exemplo, a minha é Usuário:Leone Melo/common.js.

Logo, para entender a lógica por trás dessas mudanças, é necessário entendermos a linguagem de programação JavaScript. Esse é o objetivo desse módulo.

Introdução

Uma página Web é construída a partir do uso de três tecnologias: HTML, CSS e JavaScript.

Nome	Tipo	Função	Dependência
HTML	Linguagem de marcação	Estrutura do conteúdo	Base de qualquer página web
CSS	Linguagem de estilo	Estilo e design visual	Precisa de HTML para aplicar estilos
JavaScript	Linguagem de programação	Interatividade e funcionalidade	Precisa de HTML para manipular elementos

Relação com o HTML

Para fazer com que o JavaScript trabalhe em conjunto com o HTML, podemos colocar o código em JavaScript dentro do arquivo HTML ou criar um arquivo js externo (js é o formato dos arquivos em JavaScript) e referenciá-lo no arquivo html.

Assim, para usarmos o código em JavaScript dentro do arquivo html, precisamos colocar o código entre as tags <script> </script>, que por sua vez devem ser colocados entre as tags <head> </head> ou <body> </body>.

<!DOCTYPE html>
  <head>
    <script>
      código em JavaScript
    </script>
  </head>
  
  <body>
  </body>
</html>

<!DOCTYPE html>
  <head>
  </head>
  
  <body>
    <script>
      código em JavaScript
    </script>
  </body>
</html>

Para chamar um arquivo externo, temos que fazer uso do atributo src (em referência a source, que significa "fonte" em inglês), que é colocado dentro da tag <script>. Se o arquivo js estiver na mesma pasta (mesmo diretório) do arquivo html, só precisamos colocar o nome do arquivo (exemplo: wiki.js). Se existir uma pasta (que vamos chamar de "javascript") no mesmo diretório do arquivo html, e dentro dessa pasta tiver o arquivo js (que chamaremos de wiki.js), aí teremos que colocar o nome da pasta antes do nome do arquivo, separando por uma barra inclinada (exemplo: javascript/wiki.js).

Arquivo html

<!DOCTYPE html>
  <head>
  </head>
  
  <body>
    <script src="wiki.js"></script>
  </body>
</html>

Arquivo js (wiki.js)

código em JavaScript

Variáveis

As variáveis servem para armazenar informações, que podem ser manipuladas para se obter diversos resultados. Há três tipos de palavras-chaves que nos permitem declará-las: var, let e const.

Declaração

Uma declaração é constituída de uma palavra-chave (var, let ou const) seguida do nome da variável. O nome da variável pode conter palavras, números e os símbolos $ e _. No entanto, o primeiro caractere não pode ser um número.

Para atribuir algum valor para uma variável, usamos o operador =. É uma boa prática colocar um ponto e vírgula (;) no fim de uma declaração na linha, embora funcione sem ele.

Declaração	Funciona?	Explicação
`let envelope;`	Sim	Declaração sem atribuição.
`var mensagem2 = "Gol do Brasil";`	Sim	Declaração com atribuição de uma string.
`const diaNatal = 25;`	Sim	É recomendado o uso do CamelCase para mais de uma palavra.
`let 79a = 'checkuser';`	Não	Não é permitido iniciar com número.
`var US$ = 6.02`	Sim	O símbolo `$` é permitido e `;` é recomendado mas não obrigatório.
`const meu-nome = "Tiririca";`	Não	Nenhum tipo de traço é permitido. A exceção é o subtraço `_`.

Reatribuição e redeclaração

A reatribuição ocorre quando atribuímos outro valor a uma variável que possui um valor atribuído. Podemos reatribuir valores usando var e let, mas nunca com const. Já a redeclaração ocorre quando uma variável já declarada em um determinado escopo é novamente declarada usando o mesmo nome.

Declaração	Funciona?	Descrição
var pontos = 72; var pontos = 75;	Sim	Reatribuição feita com uma redeclaração.
var pontos = 72; pontos = 75;	Não	Reatribuição feita sem uma redeclaração.
let pontos = 72; let pontos = 75;	Não	Reatribuição feita com uma redeclaração.
let pontos = 72; pontos = 75;	Sim	Reatribuição feita sem uma redeclaração.
const pontos = 72; const pontos = 75;	Não	Reatribuição feita com uma redeclaração.
const pontos = 72; pontos = 75;	Não	Reatribuição feita sem uma redeclaração.

Tipos primitivos

Os dados armazenados podem ser dois tipos: primitivo ou objeto. Agora vamos focar nos tipos primitivos, que podem ser:

Nome	Descrição	Exemplo
`Number`	Representam números inteiros (integer) e decimais (float).	`277`, `1.71`, `-8.5`
`String`	Representa uma sequência caracteres, normalmente usada para guardar texto.	`'Olá'`, `"Tudo bem?"`, `Estou no Brasil`
`Boolean`	Também conhecido como booleano, representa um valor lógico (verdadeiro ou falso).	`true`, `false`
`Undefined`	Representa uma variável declarada, mas sem valor atribuído (indefinido).	`let emprego;`
`Null`	Representa a ausência intencional de qualquer valor.	`let dinheiro = null;`
`BigInt`	Números inteiros maiores que o limite do tipo `Number`, que é ±(2⁵³−1).	`123456789012345678901234567890n`

Alterações

A partir do id

Nome do arquivo

Armazenamento

Modificação

aula1.js

let compra = document.querySelector("#carro");

compra.textContent = "Compro um Fiat Mobi seminovo";
compra.style.backgroundColor = "red";
compra.style.color = "yellow";
compra.style.fontWeight = "bold";

let compra = document.getElementById("carro");

As atribuições do JavaScript se sobrepõem as do HTML.

HTML

Resultado

<body>
  <div id="carro" style="background:blue; color:white">
     Vendo um Corsa velho.
  </div>
</body>

Vendo um Corsa velho.

<body>
  <div id="carro" style="background:blue; color:white">
     Vendo um Corsa velho.
  </div>
  <script src="aula1.js"></script>
</body>

Compro um Fiat Mobi seminovo.

Ver também