Existem dois tipos de aplicativos para Internet, aplicativos de celular com versões para Android e iOS, e aplicativos-web que rodam sites em Html, Css e JavaScript em navegadores da Internet, como o Google Chrome, Apple Safari, Firefox e Microsoft Edge.

Embora os aplicativos para celulares tenham adquirido enorme popularidade, tornando um pouco secundária a utilização dos navegadores e dos sites, ainda é grande a importância dos sites e dos navegadores, principalmente com aplicações que exigem maior poder de processamento do equipamento utilizado ou tela grande na apresentação visual.

O navegador que consideraremos o principal, no curso, será o Google Chrome, por ter versões para computadores com sistemas operacionais diversos (Windows, Linux, macOS), e celulares ou tablets com Android e iOS, além de ser amplamente conhecido e utilizado.

Padrão Html

Os sites da internet acessados, carregados e manipulados pelos navegadores utilizam o padrão Html.

O padrão Html incorpora a linguagem Html (linguagem estática dos objetos carregados pelo navegador), a linguagem Css (linguagem estática de estilos aplicados automaticamente, pelo navegador, aos objetos Html carregados), e a linguagem JavaScript (linguagem dinâmica que permite a manipulação dos objetos em geral (Html e Css) carregados.

JavaScript é uma linguagem bastante abrangente, fácil de aprender e de programar.

Os Navegadores da Web

Os navegadores da Web surgiram no final do século 20 com a explosão do uso de Internet que, hoje, conta com uma grande infraestrutura mundial estabelecida, permitindo seu uso amplo.

Neste contexto surgiram diversos navegadores da Internet, seguindo os padrões estabelecidos e mantendo, assim, grande compatibilidade na interpretação e execução das linguagens dos navegadores: Html, Css, JavaScript.

A explosão da Internet foi em 1995 e naquela época surgiu o Netscape, que iniciou a linguagem JavaScript e a corrida da Internet.

Ao longo de mais de 25 anos, surgiram diversos navegadores de diferentes fabricantes: Google, Apple, Firefox, Microsoft, Avast.

Consideraremos como principal em nosso curso o Google Chrome, por sua popularidade que colabora no entendimento das questões aqui apresentadas.

HTML

HTML (Hiper Text Markup Language) é a linguagem declarativa de blocos através da utilização de tags que define o conjunto de objetos visuais e não visuais da página Html no navegador.

Tags são os rótulos - etiquetas - que, no html, iniciam e encerram os blocos funcionais de declarações, com a sintaxe geral <tag></tag>, com o nome do tag correspondente entre os delimitadores.

Os tags mais primários são:

  • <html></html>
  • <head></head>
  • <body></body>

CSS

CSS (content style sheet) é a linguagem declarativa de blocos de estilos utilizados pelos objetos da página Html carregada pelo navegador.

Os arquivos .css contém folhas de estilo utilizados no carregamento dos recursos interpretados pelo navegador durante o carregamento da página e formatação da apresentação visual da página.

JavaScript

O JavaScript é a linguagem de programação que proporciona dinamismo aos objetos das páginas Html.

Por que JavaScript?

JavaScript é um dos três dialetos de programação que todos os desenvolvedores da Web devem aprender:

  1. HTML para definir o conteúdo das páginas da web.
  2. CSS para especificar o layout das páginas da web.
  3. JavaScript para programar o comportamento das páginas da web.

As páginas da Web não são o único local em que o JavaScript é usado. Muitos programas de desktop e servidor usam JavaScript.

O Node.js é um aplicativo servidor de páginas-web bastante popular e utilizado, escrito com JavaScript.

Alguns bancos de dados, como MongoDB e CouchDB, também usam JavaScript como sua linguagem de programação.

Você sabia?

JavaScript e Java são linguagens completamente diferentes, tanto em conceito quanto em design.

O JavaScript foi inventado por Brendan Eich em 1995 e tornou-se um padrão da ECMA em 1997.

ECMA-262 é o nome oficial do padrão. ECMAScript é o nome oficial do idioma.

Você pode ler mais sobre as diferentes versões do JavaScript no capítulo Versões JS.

Velocidade de aprendizagem

Neste tutorial, a velocidade de aprendizado é sua escolha. Os capítulos não são longos, estão objetivos e acreditamos bem explicativos.

Aqui o negócio depende de você, se estiver com dificuldades, faça uma pausa ou releia o material, entre em contato conosco.

 

O script html, ao ser carregado pelos navegadores da web, é interpretado, instanciando, na memória do computador, os objetos-html dos elementos do script.

Após carregar os objetos do script na memória, o navegador aplica os estilos, das folhas de estilo carregadas também como objetos-css, dando aos objetos-html suas características de conteúdo e apresentação.

Após estes processos o código javascript da página, carregado junto com o html, é interpretado e executado.

Html Básico

Os elementos do html são as declarações de tags (etiquetas) e atributos que são interpretados e carregados como objetos na memória, pelo navegador, ao acessar a página para carregamento.

Os elementos mais primitivos do html são <html>, <head> e <body> e os objetos correspondentes podem ser referidos pelo JavaScript como html, head e body, sendo objetos globais e tornando-se palavras-chave do javascript.

Os tags <html></html> estabelecem e delimitam a página.

Os tags <head></head> e <body></body> são internos a <html></html> e definem o cabeçalho o corpo da página, respectivamente.

<html>
   <head></head>
   <body></body>
</html>

 Os elementos do html podem conter outros elementos. Por exemplo, <body> pode conter <div> e <div> pode conter outros <div>.

<html>
   <head></head>
   <body>
      <div></div>
      <div>
         <div>
         </div>
      </div>
   </body>
</html>

Os tags podem declarar atributos como id, identificador do objeto, class, a sua classe, e style, o estilo.

<html>
   <head></head>
   <body>
      <div id="meuDiv" 
           class="minhaClasse" 
           style="background-color: white">
      </div>
   </body>
</html>

As folhas de estilo  podem ser declaradas no próprio corpo do script-html com <style>, ou carregadas a partir de um arquivo externo com terminação .css (não obrigatoriamente) com <link>.

<html>
   <head>
      <title>Meu Título</title>
   </head>
   <body>
      <div id="meuDiv" 
           class="minhaClasse" 
           style="background-color: white">
      </div>
      <link rel="stylesheet" href="/meu-estilo.css">
      <style>
         .minhaClasse {
            font-family: Verdana, Arial, Times New Roman;
            font-size: 0.8em;
         }
      <style>
   </body>
</html>

Existem diversos tags de scripts-html e de estilos.

Neste curso focaremos no javascript e na criação de programas de uso geral, inclusive acessando e manipulando os objetos-html instanciados do script pelo navegador.

 

O JavaScript pode apresentar dados de diferentes maneiras:

  • Escrevendo em um elemento com a propriedade innerHTML.
  • Escrevendo na saída Html com document.write().
  • Escrevendo em uma caixa de alerta com window.alert().
  • Escrevendo no console do navegador com console.log().

Propriedade innerHTML

A propriedade innerHTML do elemento encontrado com document.getElementById() atribui e altera o seu conteúdo.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <p id="demo"></p>
      <script>
         document.getElementById("demo").innerHTML = 5 + 6;
      </script>
   </body>
</html>

É uma maneira bastante comum de exibir dados em html, pois aceita scripts-html, que são interpretados e tornados elementos.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <p id="demo"></p>
      <script>
         document.getElementById("demo").innerHTML =
            "<div><p></p><p></p></div>";
      </script>
   </body>
</html>

Método document.write()

O método document.write() é usualmente utilizado para testes, pois limpa todo conteúdo existente ao ser invocado pela primeira vez no código.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <script>
          document.write(5 + 6);
      </script>
   </body>
</html>

No exemplo a seguir tem cabeçalho, parágrafo e botão. Ao ser clicado o botão o evento onclick é disparado e todo o conteúdo é apagado antes de ser incluído o novo.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <button type="button" onclick="document.write(5 + 6)">Clique-me</button>
   </body>
</html>

Método window.alert ()

Você pode usar uma caixa de alerta para exibir dados.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <script>
         window.alert(5 + 6);
      </script>
   </body>
</html>

Método console.log ()

Para fins de depuração, você pode usar o método log()  do objeto-global console para exibir dados.

Futuramente apresentaremos mais sobre depuração.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <script>
         console.log(5 + 6);
      </script>
   </body>
</html>

 

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>

 

 

 

Um programa de computador é uma sequência de instruções a serem executadas por um computador.

Os elementos-html que compõe a apresentação visual do aplicativo-html podem ser manipulados pelo programa javascript.

Um programa javascript é uma lista de instruções de programação vinculada à página-html carregada pelo navegador, sendo inserido diretamente no script-html ou carregando arquivos contendo as instruções.

Os programas javascript executados nas páginas-html são interpretadas e executadas pelo próprio navegador da web responsável pelo carregamento da página.

Instruções do JavaScript

As instruções JavaScript são compostas por:

  • Palavras-chave.
  • Identificadores.
  • Expressões.
  • Comentários.

A declaração a seguir comanda ao navegador escrever "Olá Mundo!", dentro do objeto Html com id = "demo".

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

Os programas e instruções são frequentemente chamados de código. As instruções são executadas, uma a uma, na mesma ordem em que são declaradas. A maioria dos programas JavaScript incluem muitas instruções para realização das tarefas desejadas.

Ponto e Vírgula ;

O ponto e vírgula ; separa as instruções do programa. Adicione o ponto e vírgula no final de cada instrução executável para a separar da próxima.

var a, b, c;     // Declara 3 variáveis
a = 5;           // Atribui o valor 5 para 'a'
b = 6;           // Atribui o valor 6 para 'b'
c = a + b;       // Atribui o valor da soma de 'a' e 'b' para 'c'

Quando separadas por ponto e vírgula, são permitidas várias instruções em uma linha.

a = 5; b = 6; c = a + b;

Na web, você pode ver exemplos sem ponto e vírgula, separadas por quebra de linha no texto, mas esta é uma separação de instruções muito sutil. Finalizar as instruções com ponto e vírgula não é obrigatório, mas é algo bastante recomendado.

Espaço em Branco

JavaScript ignora vários espaços. Você pode adicionar espaço em branco ao seu script para torná-lo mais legível.

As seguintes linhas são equivalentes:

var pessoa = "Hege";
var pessoa =    "Hege";

Uma boa prática é colocar espaços ao redor dos operadores (= + - * /):

var x = y + z;

Comprimento e Quebra de Linha

Para melhor legibilidade geralmente o código fica com até 80 caracteres no máximo.

Não cabendo em uma única linha uma instrução pode ser quebrada, geralmente após um operador.

document.getElementById("demo").innerHTML = "Hello Dolly!";

As instruções JavaScript podem ser agrupadas em blocos de código, dentro de colchetes {...}.

Blocos de Código

O objetivo dos blocos de código é agrupar instruções para serem executadas em conjunto, do início ao fim do bloco.

Por exemplos utilizamos blocos de código no corpo das funções do JavaScript.

function minhaFuncao() {
   document.getElementById("demo1").innerHTML = "Olá Mundo!";
   document.getElementById("demo2").innerHTML = "Como está?";
}

Futuramente aprofundaremos sobre funções.

Neste tutorial são usados 3 espaços de recuo para blocos de código.

Palavras-Chave

As instruções geralmente começam com uma palavra-chave para identificar a ação a ser executada.

Visite a referência de palavras reservadas para ver uma lista completa de palavras-chave JavaScript.

A seguir são relacionadas palavras-chave do JavaScript utilizadas neste tutorial.

  • pause: Encerra um comutador ou um loop
  • continue: Salta de um loop e começa no topo
  • depurador: Interrompe a execução do JavaScript e chama (se disponível) a função de depuração
  • do while: Executa um bloco de instruções e repete o bloco, enquanto uma condição é verdadeira
  • for: Marca um bloco de instruções a serem executadas, desde que uma condição seja verdadeira
  • function: Declara uma função
  • if... else: Marca um bloco de instruções a serem executadas, dependendo de uma condição
  • return: Sai de uma função
  • interrupt: Marca um bloco de instruções a serem executadas, dependendo dos diferentes casos
  • try... catch: Implementa o tratamento de erros em um bloco de instruções
  • var: Declara uma variável

Palavras-chave JavaScript são palavras reservadas. Palavras reservadas não podem ser usadas como nomes para variáveis.

Identificadores

Identificadores são nomes associados às variáveis, objetos e funções declarados em um programa.

Os identificadores são utilizados na atribuição de valores a variáveis.

var x = 123;         // o identificador x se refere ao valor inteiro 123
var y = 456.78       // o identificador y se refere ao valor real 456.78
var z = "javascript" // o identificador z se refere ao valor string "javascript"
var k = true;        // o identificador k se refere ao valor lógico true

Os identificadores são utilizados na declaração de funções.

function somar(a,b) { // o identificador somar se refere à função que soma dois valores
   return a+b;
}

function concatenar(a,b) { // o identificador concaternar se refere à função 
   a + " " + b;            // que junta dois valores separados por branco
}

Os identificadores são utilizados na declaração das propriedades e métodos de objetos. As variáveis de um objeto são referidos como propriedades. As funções  de um objetv são referidos como métodos.

var carro = {             // carro: identificador de variável
   marca: "fiat",         // marca: identificador de propriedade
   modelo: "uno",         // modelo: identificador de propriedade
   ano: 2000,             // ano: identificador de propriedade
   numPortas: 2,          // numPortas: identificador de propriedade
   ligar: function() {    // identificador de método
      // instruções do método
   }
   acelerar: function() { // identificador de método
      // instruções do método
   }

Expressões

Temos diferentes tipos de expressões: aritméticas, lógicas, caractér.

2 + 2          // operação aritmética de soma
6 - 3          // operação aritmética de subtração
6 * 3          // operação aritmética de multiplicação
10 / 3         // operação aritmética de divisão
false || false // operação lógica ou
true  || false // operação lógica ou
true  && false // operação lógica e
true  && true  // operação lógica e

Comentários

Comentários são partes do código que não são interpretados pelo navegador.

// comentário de linha
/*
comentário de bloco
*/
  1. Sintaxe
  2. Comentários
  3. Variáveis e Constantes
  4. Operadores