O html é uma linguagem estática que, ao ser carregada, tem os elementos em seu script interpretados, ocasionando na instanciação dos objetos desses elementos para que possam ser manipulados e apresentados pelo navegador.

Como o html não pode ser alterado pelo navegador após ser carregado, sendo uma linguagem declarativa e estática, e mantendo os objetos com as características iniciais declaradas no script, o javascript foi elaborado visando interagir com os objetos instanciados pelo navegador ao carregar a página.

O javascript é uma linguagem de programação que permite a leitura, processamento e saída de dados utilizando os objetos globais do navegador e outros pertencentes ao código sendo interpretado.

Dados são as porções de memória alocadas pelo Interpretador para o armazenamento de dados, e que podem ser unitários (literais) ou estruturados (objetos).

Literais são dados atômicos, unitários, que representam um único valor de texto, de número ou de booleano (variáveis binárias e lógicas, com valores verdadeiro ou falso).

Objetos são dados estruturados que podem conter propriedades e métodos.

Variáveis são apontadores para os literais e objetos carregados na memória.

JavaScript Básico

Após a página ser carregada, o javascript está pronto para ser executado.

O javascript é uma linguagem de instruções separadas por ponto-e-vírgula, executadas sequencialmente na ordem em que aparecem.

As instruções podem ser literais, palavras-chave, operações, objetos globais ou instanciados pelo próprio código do aplicativo rodando.

Os Literais

Literais são dados atômicos, ou sejam unitários, com valor único. Não são objetos - objetos estruturam múltiplos valores - e os valores únicos são strings, números e booleanos.

Segue exemplo de literais.

"este é um texto"
123
456.789
true
false

Palavras-Chave

Palavras-chave são todas aquelas reservadas do javascript que modificam uma determinada condição.

Por exemplo a palavra-chave var declara uma variável, modifica um identificador para que seja utilizado como variável e receber valores.

No exemplo a seguir é declarada a variável x.

var x;

Variáveis podem receber valores literais.

var x =  12345;
var t = "nome";
var c = false;

Variáveis podem receber o resultado de uma expressão.

var dez = 10;
var cem = dez * dez;
var mil = cem * dez;

Os Objetos

O interpretador tem ao seu dispor o acesso a diversos objetos globais disponibilizados pelo navegador após o carregamento da página.

O objeto document contém dados do documento aberto.

O objeto window contém dados da janela do documento aberto. Corresponde ao componente visual do documento.

Os objetos dos tags <html>, <head> e <body> carregados pelo navegador estão disponíveis ao interpretador sendo referidos pelos identificadores html, head e body, sendo objetos globais e palavras-chave do javascript.

Comandos

Comandos são execuções de blocos que podem estar presentes em funções, repetições, etc.

Manipulação de Objetos Html

O objeto-global document contém o método getElementById() que permite a localização de um objeto pelo seu atributo id de identificação.

<html>
   <head></head>
   <body>
      <div id="meuDiv"></div>
   </body>
</html>

A instrução a seguir atribui à variável x endereço do objeto meuDiv na memória.

var x = document.getElementById("demo");

Alterar o Conteúdo HTML

A propriedade innerHTML do objeto - encontrado com document.getElementById() - permite a alteração do conteúdo.

document.getElementById("demo").innerHTML = "Olá JavaScript";

Strings aceitam a combinação de aspas duplas com aspas simples, desde que a string se inicie e se finalize com o mesmo símbolo.

document.getElementById('demo').innerHTML = "Olá JavaScript!";

No exemplo a seguir o corpo da página tem um cabeçalho, um parágrafo e um botão. Ao ser pressionado o botão pelo usuário, é disparado o evento onClick e o conteúdo no parágrafo é alterado.

<html>
   <body>
      <h2>O que o JavaScript faz?</h2>
      <p id="demo">JavaScript pode mudar o conteúdo HTML content.</p>
      <button type="button" onclick='document.getElementById("demo").innerHTML = 
         "Olá JavaScript!"'>
         Clique-me!
      </button>
   </body>
</html>

Alteração de Atributos

No exemplo, o JavaScript altera o valor do atributo src de uma etiqueta-html <img>.

Abaixo as imagens dos arquivos "lampada-ligada.jpg" e "lampada-desligada.jpg".

Ligar-Desligar:

<html>
   <body>
      <h2>O que o Javascript faz?</h2>
      <p>O JavaScript muda os valores de atributos HTML.</p>
      <p>Neste caso o JavaScript altera o valor do atributo src de uma imagem.</p>
      <img id="minhaImagem" src="/lampada-desligada.jpg" style="width:100px">
      <button
         onclick="document.getElementById('minhaImagem').src =
            'lampada-ligada.jpg'">
         Ligar a luz
      </button>
      <button
         onclick="document.getElementById('minhaImagem').src =
            'lampada-desligada.jpg'">
         Desligar a luz
      </button>
   </body>
</html>

Alterar Estilos (CSS)

Os atributos de estilo podem ser alterados.

document.getElementById("demo").style.fontSize = "35px";

No exemplo a seguir o corpo da página tem um cabeçalho, um parágrafo e um botão. Ao ser pressionado pelo usuário, o evento onClick do botão é disparado e o tamanho de fonte do objeto "demo" é alterado.

<html>
   <body>
      <h2>O que o Javascript faz?</h2>
      <p id="demo">O JavaScript muda os estilos dos elementos HTML.</p>
      <button
         type="button"
         onclick="document.getElementById('demo').style.fontSize='35px'">
         Clique-me!
      </button>
   </body>
</html>

Ocultar Objetos-HTML

Os objetos-html são escondidos com o atributo de de estilo display com valor "none".

document.getElementById("demo").style.display = "none";

No exemplo a seguir o corpo da página tem um cabeçalho, um parágrafo e um botão. Ao ser pressionado pelo usuário, o evento onClick do botão é disparado e o objeto "demo" é escondido.

<html>
   <body>
      <h2>O que o Javascript faz?</h2>
      <p id="demo">O JavaScript pode esconder elementos HTML.</p>
      <button
         type="button"
         onclick="document.getElementById('demo').style.display = 'none'">
         Clique-me!
      </button>
      </body>
</html>

Mostrar Elementos HTML

A exibição de elementos HTML ocultos também pode ser feita alterando o estilo display:

document.getElementById("demo").style.display = "block";

No exemplo a seguir o corpo da página tem um cabeçalho, dois parágrafos, um com nome "demo", e um botão. Ao ser pressionado pelo usuário, o evento onClick do botão é disparado e o objeto "demo" é mostrado.

<html>
   <body>
      <h2>O que o Javascript faz?</h2>
      <p>O JavaScript pode mostrar elementos HTML.</p>
      <p id="demo" style="display:none">Olá JavaScript!</p>
      <button
         type="button"
         onclick="document.getElementById('demo').style.display='block'">
         Clique-me!
      </button>
   </body>
</html>

Javascript