Python  foi criado em 1989, e tem se popularizado como uma excelente linguagem de propósito geral para elaboração de programas simples até outros mais complexos. Python é usado em algumas grandes empresas do planeta, tais como o Google, Dropbox, Mozilla, IBM, Facebook, Yahoo, e muito mais.

Python é extremamento fácil de ser aprender - provavelmente é a linguagem mais fácil entendimento para os iniciantes no mundo da programação de computadores. Seguindo este tutorial você poderá comprovar isso.

Python também pode ser usadas desenvolvimento de páginas WEB com DJango ou Flask (não trataremos desses ambientes/frameworks neste tutorial).

Esse curso fará uma introdução com uma visão geral do que é possível fazer e como começar a usar Python.

Python é uma linguagem de alto nível (mais próxima do entendimento humano), é interpretada (não precisa ser compilada) e de código aberto (open source programming language).

Para acompanhar este curso você não precisa saber sobre lógica de programação ou ter conhecimento prévio de outra linguagem de programação. Iniciaremos com princípios os básicos da linguagem e a medida em que evoluirmos nos exemplos você também aprenderá um pouco de lógica (de programação).

Uma das coisas mais difíceis de aprender na programação não é só a sintaxe da linguagem, mas como aplicá-la para resolver problemas do mundo real. Isso não se aprende somente lendo, devemos PRATICAR.

Para se tornar "fluente" em qualquer linguagem (na verdade em qualquer área da vida), deve-se praticar, tentar, experimentar, errar!

Caso queira aprender mais e ir fundo em Python (ou qualquer outro tópico relacionado), sugerimos fortemente que você pesquise na internet e procure por essas informações.

Para acompanhar os exemplos que serão apresentados sugerimos que você instale em seu computador a última versão disponível do Python. A versão que utilizaremos foi baixada em abril de 2021: Versão 3.9.4 - Python.org/download.


 você pode testar todos os exemplos apresentados sem realizar NENHUMA INSTALAÇÃO em seu computador. Basta copiar o código Python e colar no seguinte endereço: www.python.org/shell/

Existem duas formas de incluir um script em uma página WEB. A primeira com a TAGs <script>...</script> e dentro dos limites dessas TAGs o código JavaScript. A segunda forma seria usando essas mesmas TAGs indicando entre elas o arquivo externo que deverá ser carregado: <script scr="meuArquivo.js"></script>, no segundo caso nada deve ser incluído entre as TAGs.

Uma boa prática, para manter o projeto organizado, é criar uma pasta para os scripts JavaScript, assim como pastas para as imagens e folhas de estilos. Para carregar o script (folha de estilo ou imagem) você deve indicar o nome da pasta a partir de onde o arquivo será carregado: <script type="text/javascript" scr="js/meuArquivo.js"></script>

Observe que usamos o atributo type para definir o tipo de script que será carregado. No HTML5 esse atributo não é necessário pois ele assume que o script é JavaScript.

Em muitos casos você poderá programar o script para 'rodar' automaticamente no carregamento da página ou a partir de um evento ou ação do usuário (clicar com o mouse, por exemplo). Abaixo um exemplo de script que aguarda uma ação (clique do mouse) do usuário sobre o elemento <p>:

Primeiro Exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Exemplo<title>
    <style type="text/css">
      .pMouseHover:hover {
        cursor: pointer;
        background:#ffEE00;
      }
    </style>
    <script>
      function minhaFuncao() {
        alert("Você clicou sobre parágrafo!");
      };
    </script>
  </head>
  <body>
    <h1>JavaScript</h1>
    <p class='pMouseHover' onclick='minhaFuncao()'>Clique sobre este texto e a mágica acontecerá!</p>
  </body>
</html>
 você pode testar todos os exemplos apresentados copiando o código HTML e colando no seguinte endereço: www.quakit.com/html
Para que o código funcione copie o conteúdo a partir da TAG <body>, incluindo tudo que estiver entre as TAGs <script> ... </script>!

Vamos analisar esse código mais de perto?

<style type="text/css"> .pMouseHover:hover { ... } </style>

  • Define que o ponteiro do mouse a cor mudará quando o mouse estiver sobre o elemento;
  • Não sabe o que são estilos? Veja o item 9. CSS - Folhas de Estilo no curso de HTML: Curso WEB.

<script>function minhaFuncao() { ... };</script>

  • Definimos uma função que apresentará uma mensagem de alerta para o usuário. Essa mensagem aparecerá sobre a página atual;
  • A função executará as instruções que estão entre as chaves ( { } ).

<p class='pMouseHover' onclick="minhaFuncao()"> ( ... )</p>

  • Definimos um parágrafo e atribuimos a ele o evento onclick que chamará/executará a função minhaFuncao() quando o usuário clicar sobre ele.

Teste o JavaScript em Ação:

JavaScript


Clique sobre este texto e a mágica acontecerá!

Algumas definições importantes!

O que é uma função?

Funções são blocos de instruções (comandos) JavaScript identificados por um nome qualquer (definido pelo programador). Uma função executa uma tarefa específica como, por exemplo, calcular um valor.

Para usar uma função, você deve defini-la em algum lugar no documento (escopo) onde você quiser executá-la ou carregar de um arquivo externo conforme já explicado.

A definição da função (ou declaração de uma função) consiste no uso da palavra chave function, seguida por:

  • Nome da Função;
  • Lista de argumentos para a função, entre parênteses e separados por vírgulas; e
  • Instruções/comandos JavaScript que definem o que a função faz. Esses comandos devem estar entre chaves { }.

No nosso exemplo nos definimos uma função chamada minhaFuncao() e ela está programada para ser executada quando o usuário disparar o evento do clique do mouse (onclick()) e apresentar uma janela/caixa de alerta sobre a página atual.

O que é são eventos?

Os eventos são ações do usuário (ou da página) que podem ser detectadas pelo JavaScript. Todo elemento em uma página web certamente possui eventos que podem ser detectados pelo JavaScript.

Os eventos são normalmente utilizados combinados com as funções, e a função não será executada enquanto o evento não ocorrer.

No nosso exemplo utilizamos o evento onClick() em um “parágrafo” e indicamos a função que deverá ser executada quando da ocorrência do evento.

São exemplos de eventos:

  • Um clique no mouse;
  • O carregamento de uma página ou imagem;
  • Quando o mouse passa sobre um elemento;
  • Selecionar um campo de um formulário;
  • Pressionar uma tecla.

Onde posicionar o script?

Normalmente as tags <script> são carregadas no cabeçalho da página <head>. Isso ajuda a organizar o código, por colocar junto todos os apontamentos para arquivos (os scripts e os estilos) em um só lugar.

Mas isso pode criar um problema! A página WEB ao chegar em uma TAG script para o carregamento até que o código seja baixado e interpretado. Se o código for muito grande, ou muito complexo, a página pode demorar para começar a apresentar o conteúdo.

Se o conteúdo demorar demais para aparecer o usuário poderá abandonar a página. Pode até existir outras causas, mas uma delas poderá ser o código JavaScript sendo baixado e processado.

Por isso muitas vezes vamos encontrar a recomendação de carregar o JavaScript no final do arquivo HTML, antes do fechamento da TAG </body>.

O que é uma variável? Pense numa variável como uma caixa para armazernar/guardar um valor. Essa variável pode ser mudada a qualquer momento por uma operação do script, assumindo ou recebendo valores.

Você poder criar suas variáveis dando-lhes nomes simbólicos que, normalmente, devem corresponder ao conteúdo que elas guardarão.

Existem algumas regras para definição do nome de uma variável:

  • Não pode ser uma palavra reservada da linguagem (comandos), tais como: true, var, while, for etc;
  • Deve começar com uma letra, underline (_) ou cifrão ($);
  • Os caracteres subsequentes podem ser números ou letras sem espaço entre eles;
  • JavaScript é case-sensitive, ou seja, os caracteres de "A" a "Z" (maiúsculos) e os caracteres de "a" a "z" (minúsculos) são interpretados de forma diferente.

Alguns exemplos de nomes legais/válidos:

  • numeros_visitas
  • temp99
  • notaFinal
  • _nome
  • _Nome (não é o mesmo que a variável _nome)

Uma variável não precisa ser criada ou que se defina o seu tipo previamente como na linguagem PASCAL, por exemplo, na qual é necessário definir todas as variáveis que serão usadas no programa e o seus tipos (númerico, texto, booleano etc).

Declaração e uso de variáveis:

<script>
  var i;         /* Criação da variável 'i' */
  i = 10;        /* Guarda o valor 10 na variável 'i' */
  var x = 5;     /* Cria e armazena 5 na variável 'x' */
  b = 6;         /* Cria e armazena 6 na variável 'b' (var é opcional) */
  t = 'dez';     /* Cria uma variável do tipo texto 't'(string) */
  total = i + x  /* Cria a variável 'total' e armazena o resultado da operação 'i + x' (15) */
</script>

Quando criamos uma variável (seja explicitamente com a instrução var ou não) o seu tipo é definido pelo valor que lhe é atribuído. Se ela for definida sem a atribuição de um valor ele recebe o valor padrão de undefined.

Embora não seja muito recomendável, é possível modificar o tipo de uma variável que já tenha sido criada simplesmente atribuindo um valor de outro tipo. Isso ocorre porque JavaScript, diferente de C, Java, Pascal e de muitas outras é uma linguagem não-tipada (untyped). Ela automaticamente converte valores de um tipo para outro se necessário

Mudando Nossa Página

Todas as páginas HTML são compostas por elementos que fazem parte domínio da página, ou seja, é um grande objeto com diversos elementos organizados hierarquicamente, formando uma grande árvore (DOM) e suas folhas (TAGs/elementos).

Dito isso podemos encontrar um elemento (ou vários) referenciando o seu tipo, o seu 'id', sua classe ou por outra característica desse elemento.

No exemplo abaixo o script armazenará/guardará em variáveis a referência para o parágrafo (<p>) e para o botão (<button>), e em seguida mudará o conteúdo (texto) deles quando o usuário clicar no botão apresentado:

Um pouco mais fundo no JavaScript:

JavaScript


Vamos mudar o conteúdo desse parágrafo!

Observe o código HTML/JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <p>Vamos mudar o conteúdo desse parágrafo!</p>
    <button>Clique em mim!</button>
    <script>
      var contador = 0;
      var meuBotao = document.querySelector('button');
      var meuParagrafo = document.querySelector('p');
      meuButton.onclick = function() {
        contador = contador + 1;
        meuParagrafo.innerHTML = 'Quantidade de cliques: ' + contador;
        meuBotao.innerHTML = 'Cliques: ' + contador;
      }
    </script>
  </body>
</html>

Vamos analisar esse código mais de perto?

<p> e <button>

  • Criamos dois elementos para mudarmos o conteúdo (texto) deles durante a execução do script.

var contador = 0

  • Criamos uma varíavel e atribuímos a ela o valor ZERO ('0'). O propósito dessa variável e contar a quantidade de cliques do usuário no botão.

var meuBotao = ( ...); var meuParagrafo = ( ...) ;

  • Criamos duas variáveis onde serão armazenadas as referências (localização e atributos) do elemento <p> e do elemento <button>.

document.querySelector('seletor')

  • Essa instrução foi utilizada para encontrar a primeira referência a um elemento HTML na página WEB e armazenar essa referência;
  • O 'seletor' pode ser uma TAG, uma Classe, um identificador ou qualquer outro atributo;
  • Em nossa página de exemplo temos apenas um elemento <p> e um elemento <button>, logo a instrução encontrará esses elementos nos quais faremos algumas modificações;
  • Importante! Se em uma página houver mais de um elemento de um mesmo tipo deve-se atribuir um id a ele para que o 'seletor' seja esse id e somente esse elemento específico seja encontrado e sofra a alteração necessária;
  • Acesse este link e veja uma referência completa dos possíveis valores para um seletor: Lista de Seletores (W3Schools).

meuButton.onclick = function() { ... };

  • Essa instrução define uma função para o evento onClick() do botão criado ('Clique em mim!').

contador = contador + 1;

  • Toda vez que o usuário clicar sobre o botão a função que foi definida será executada;
  • A variável contador (que foi criada/iniciada com ZERO) será incrementada em UMA unidade em cada clique do mouse sobre o botão.

'element'.innerHTML = ' ( ... ) '

  • Essa instrução fornece uma forma simples de trocar completamente o conteúdo de um elemento;
  • Nesse script a instrução altera o conteúdo do elemento <p> e do elemento <button> , referenciados pelas variáveis que criamos, e terão seu conteúdo (texto) alterados;
  • O conteúdo de cada um desses elementos será um texto literal concatenado (juntado) com o conteúdo da variável 'contador'.

Sobre o Operador de Atribuição '='

O JavaScript possui alguns tipos de operadores que veremos no tópico '5. Operadores'.

Nós usamos até aqui o operador de atribuição = . Um operador de atribuição é usado para atribuir um valor a um operando (variável). Ou seja, atribui o valor à direita ao operando à esquerda.

Fazendo atribuições:

<script>
  /* atribui o valor da variável y à variável x */
  x = y;

  /* atribui um texto literal à variável txt */
  txt = 'Média Final: ';

  /* atribui um valor a variável mediaN */
  media = 18 / 3;

  /* atribui à variável mediaTxT uma variável concatenada a outra variável */
  mediaTxT = txt + media;

  /* JavaScript converte um valor numérico em texto para poder fazer uma concatenação */
  /* Resultado da última atribuição: a variável mediaTxT será igual a 'Média Final: 6' */

</script>

Os tipos de dados são aspectos mais fundamentais de uma linguagem. JavaScript tem três tipos primitivos de dados: números, textos e lógicos, nulos e indefinidos. O que são esses tipos em JavaScript?

  • Números: como 32 ou 3,14159
  • Textos: (strings): tais como "Marcio" ou "Visitante"
  • Lógicos (boolean): true oufalse, que indicam uma condição verdadeira ou falsa
  • Nulos (null): uma palavra reservada denotando um valor nulo
  • Indefinido (undefined): significa que o valor de uma variável não foi definido apesar de essa ter sido declarada (ex: var indefinida)

Um valor primitivo é representado através do mais baixo nível da implementação de uma linguagem.

Número é o tipo mais básico possível. JavaScript não faz distinção entre valores inteiros ou reais (ponto flutuante). Todos os tipos numéricos são representados como valores de ponto flutuante em 8 bytes.

A linguagem tem alguns valores numéricos especiais. Quando um ponto flutuante se torna maior que o valor máximo representável, o resultado é um valor especial que JavaScript imprime como Infinity. De maneira semelhante quando um valor negativo se torna mais negativo que o maior negativo possível de ser representado, o resultado impresso é -Infinity.

Outro valor numérico especial aparece quando uma operação matemática resulta um valor indefinido (por exemplo em uma divisão de zero por zero). Neste caso, o resultado é um valor especial denominado "not-a-number" que é impresso como NaN. Este valor tem uma propriedade especial: em uma operação de comparação (veremos estas operações mais adiante) não é igual a nenhum número nem a ele próprio. Por este motivo existe uma função especial isNaN() para testar este valor e fazer ou não alguma operação com ele de modo que não ocorra um erro.

O tipo 'texto' (string) é uma sequência de letras, dígitos, caracteres de pontuação e outros, que são representados na linguagem JavaScript delimitados por pares de aspas simples/plicas (') ou por aspas duplas (").

Assim é possível criar strings entre aspas ou entre plicas. A utilização de um ou de outro caracter como delimitador da string é uma questão de conveniência do programador. Mas caso seja necessário incluir uma plica em uma string, deve-se utilizar aspas duplas como delimitador, e vice-versa.

Declarando uma variável e atribuindo um texto a ela:

<script>
  var mensagem = "Atenção: 'var' é uma palavra reservada";
  alert(mensagem);
</script>

O código acima apresenta uma caixa de mensagem para o usuário com o texto da variável 'mensagem'. Copie e cole em www.quakit.com/html para testar o código!

O tipo lógico (boolean) de pode ter apenas 2 valores: true (verdadeiro) ou false (falso). Valores booleanos são geralmente o resultado de comparações feitas no programa em uma estrutura de controle com uma instrução condicional. Veremos mais sobre isso no próximo tópico!

Os operadores em JavaScript são usados para executar operações aritméticas, lógicas, de atribuição, de comparação e operações com textos (string).

Não se preocupe se você não entender alguns (ou todos) nessa fase do aprendizado. Você poderá voltar nesse tópico sempre que necessário.

Operadores Descrição Exemplo
+ Adição b + c
- Subtração b - c
* Multiplicação b * c
/ Divisão b / c
% Resto ou Módulo b % c
++ Incremento a++ ou ++a
-- Decremento a-- ou --a

Operadores Descrição Exemplo
= Atribuição b = c
+= Adiciona e atribui a +=b (o mesmo que a = a + b)
-= Subtrai e atribui a -=b (o mesmo que a = a - b)
*= Multiplica e atribui a *= b (o mesmo que a = a * b)
/= Divide a atribui a /= b (o mesmo que a = a / b)
%= Acha o resto e atribui a %= b (o mesmo que a = a % b)

Os operadores de comparação normalmente serão utilizados em instruções condicionais (if ... else) e retornarão true ou false, indicando que um bloco de código será (ou não) executado.

Operadores Descrição Exemplo
== é igual a b == c
=== É idêntico (é igual e do mesmo tipo) a === b
!= Não é igual a != b
!== Não é idêntico a !== b
> Maior que a < b
<= Maior que ou igual a <= b
> Menor que a > b
>= Menor que ou igual a >= b

Operadores Descrição Exemplo
= Atribuição variavelTexto = "Um texto qualquer"
+ Concatenação email = "mguilla@" + "yahoo.com"
+= Concatena e atribui a += " Guillardi" (o mesmo que a = a + " Guillardi")

Os operadores lógicos são usados ​​para determinar a lógica entre as variáveis ​​ou valores.

Dado que x = 6 e y = 3, a tabela a seguir explica os operadores lógicos:

Operadores Descrição Exemplo
&& e ( and) (x < 10 && y > 1) é verdadeiro (true)
|| ou ( or ) (x == 5 || y == 5) é falso (false)
! não (not) !(x == y) é verdadeoro (true)
Observe que (x == y) será falso, pois 'x' não é igual a 'y'. O operador not está invertendo o resultado: retornará falso e inverterá para verdadeiro.
Referência MDN WEB Docs - Operadores Lógicos.

Um array é um tipo especial objeto em JavaScript. Ele pode ser criado reservando explicitamente um espaço de memória para ele, ou seja, instanciá-lo com a palavra chave (reservada) new, ou de forma literal (item 6.4).

Array é uma variável que pode armazenar vários valores de diferentes tipos. Imagine um array como uma lista de itens que podem ser recuperados (acessados) através de um índice.

Observe a tabela abaixo: ela tem um nome único e vários valores armazenados em posições distintas e identificadas por um índice:

Nome da Variável: listaMateriais
Posição: 1 2 3 4 5
Índice: 0 1 2 3 4
Valores: Computador Mouse Teclado Monitor Disco Rígido

Nesse exemplo nosso array foi definido com o nome listaMateriais (nossa variável do tipo array) e com uma dimensão de 5 elementos (valores).

Todo array tem seu primeiro índice igual a ZERO (0) logo seu último elemento (índice) pode ser encontrado com dimensão_do_array - 1.

6.1. Definindo (criando) um array:

<script>

  /* Construção simples sem dimensionamento/vazio */
  var meuVetor1 = new Array();
  
  /* Construção simples com dimensionamento. O número informado é o seu tamanho (dimensão) */
  var meuVetor2 = new Array(5);
  
  /* Construção com a definição dos valores de cada posição/índice */
  var meuVetor3 = new Array('Computador', 'Mouse', 'Teclado', 'Monitor', 'Disco Rígido');

</script>

6.2. Criando variáveis ao invés de um array:

<script>
  var meuItem1 = 'Computador';
  var meuItem2 = 'Mouse';
  var meuItem3 = 'Teclado';
  var meuItem4 = 'Monitor';
  var meuItem5 = 'Disco Rígido';
</script>

6.3. Recuperando (acessando) um valor de um array:

<script>
 
  /* Construção do array */
  var meuVetor = new Array('Computador', 'Mouse', 'Teclado', 'Monitor', 'Disco Rígido');
 
  /* Acessando um elemento e guardando em uma variável qualquer */
  var meuItemArray = meuVetor[3]; 
 
  /* RESULTADO: meuItemArray = 'Monitor' */
  document.write(meuItemArray);

</script>
 a instrução document.write(meuItemArray);) imprime (apresenta) na tela a informação passada pelo argumento (parâmetro) meuItemArray.

6.4. Array literal

Quando um array é criado de forma literal ele é inicializado com os valores especificados entre os colchetes ( [ ] ) e os seus elementos são os valores informados. Use preferencialmente uma definição literal para o array.

O seu tamanho (dimensão) será a quantidade de elementos informados e seu último elemento (índice) pode ser encontrado com dimensão_do_array - 1.

Criando array de forma literal:

<script>

  /* Criando um array vazio */
  var meuVetor1 = [];

  /* Atribuindo um valor ao array meuVetor1 na QUARTA posição (índice 3)*/
  meuVetor1[3] = 'Teste';

  /* Criando um array com UM elemento: o número 5 na PRIMEIRA posição (índice 0) */
  var meuVetor2 = [5];

  /* Criando um array com CINCO elementos */
  var meuVetor3 = ['Computador', 'Mouse', 'Teclado', 'Monitor', 'Disco Rígido'];

</script>
Atenção! Criando um array de forma literal a instrução var meuVetor2 = [5]; cria um vetor com UM elemento (o número 5) e não um vetor com CINCO posições.

6.5. Médotos de um Array

Métodos em JavaScript são funções invocadas por objetos. O array é um tipo especial de objeto logo ele também possui métodos (funções) que podem ser chamadas (executadas) para um determinado fim.

Para mais informações sobre os métodos disponíveis para um array consulte em www.w3schools.com.

I. Método fill

Preenche um array com um valor especificado.

Sintaxe:

nomeArray.fill(valor [ início [ , final ] ] );

É assim que funciona:

  • nomeArray: O nome do array no qual será executado a operação de preenchimento é obrigatório;
  • valor: Deve-se informar o valor que será atribuído às posições do array;
  • início: Não é necessário informar o início. Caso seja informado indicará o elemento inicial (ÍNDICE) a partir do qual será preenchido (ou substitúido) com o valor informado. Caso seja omitido serão preenchidos com o valor informado a partir do primeiro elemento;
  • final: Opcional! Deve-se informar a POSIÇÃO final até onde será preenchido. Caso seja omitido todas as posições, a partir do início informado, serão preenchidos.

Código HTML/JavaScript:

<script>

  /* Criando um array com 10 posições */
  var meuVetor = new Array(10);
  
  /* Preenchendo TODO o array com 0 (ZERO) */
  meuVetor.fill('0');

  /* Substituindo a partir do ÍNDICE 1 até a QUARTA posição com o valor '1' */
  meuVetor.fill('1', 1, 4);

  /* Substituindo a partir do ÍNDICE 6 ATÉ a OITAVA posição com o valor '3' */
  meuVetor.fill('3', 6, 8);
  
  /* Exibindo o resultado na tela */
  document.write(meuVetor);

</script>

Resultado no navegador:

0, 1, 1, 1, 0, 0, 3, 3, 0, 0

II. Método pop

Remove o último elemento de um array e retorna esse elemento. Se o seu código JavaScript precisar saber e utilizar esse elemento use uma variável qualquer para armazenar o seu valor.

Sintaxe:

nomeArray.pop();

Código HTML/JavaScript:

<script>
  /* Construção do array */
  var meuVetor = new Array('Computador', 'Mouse', 'Teclado', 'Monitor', 'Disco Rígido');
  
  /* Remove o último elemento e guarda-o em uma variável */
  var ultimoElemento = meuVetor.pop();
  
  /* Exibindo o conteúdo da variável na tela */
  document.write(ultimoElemento);

  /* Apresenta na tela a variável ultimoElemento: 'Disco Rígido'  */
  /* A dimensão do array agora é 4 (4 elementos/valores) */

</script>

III. Método push

Adiciona um elemento (ou vários) no final de um array e retorna o novo tamanho (dimensão) do array.

Sintaxe:

nomeArray.push( item1 [, item2, item3 ... itemN]);

Código HTML/JavaScript:

<script>
  /* Construção do array */
  var meuVetor = new Array('Computador', 'Mouse' );
  
  /* Inclui novos elementos e armazena o novo tamanha do array em uma variável */
  var tamanhoArray = meuVetor.push('Teclado', 'Monitor', 'Disco Rígido');
  
  /* Exibindo o tamanho do array na tela */
  document.write(tamanhoArray);

  /* A dimensão do array agora é 5 */

</script>

IV. Método shift

Remove o primeiro elemento de um array e retorna esse elemento. Se o seu código JavaScript precisar saber e utilizar esse elemento use uma variável qualquer para armazenar o seu valor.

Sintaxe:

nomeArray.shift();

Código HTML/JavaScript:

<script>
  /* Construção do array */
  var meuVetor = new Array('Computador', 'Mouse', 'Teclado', 'Monitor', 'Disco Rígido');
  
  /* Remove o primeiro elemento e guarda-o em uma variável */
  var primeiroElemento = meuVetor.shift();
  
  /* Exibindo o conteúdo da variável na tela */
  document.write(primeiroElemento);

  /* Apresenta na tela a variável primeiroElemento: 'Computador'  */
  /* A dimensão do array agora é 4 (4 elementos/valores) */

</script>

V. Método every

Verifica se TODOS os elemento de um array satisfazem uma condição qualquer retornando verdadeiro (true) ou falso (false). Se UM dos elementos não satisfazer a condição será retornado falso e os elementos restantes não serão testados.

Sintaxe:

nomeArray.every(função, this.Value);

É assim que funciona:

  • nomeArray: O nome do array no qual será testada a condição é obrigatório;
  • função: A função que será executada para testar a condição em cada elemento do array;
  • this.Value: Opcional! Caso não seja informado o valor (conteúdo) da posição atual será passada para a função fazer os tetes necessário (testar a condição).

Testando no Navegador:

Clique no botão para verificar se todos os elementos do array são iguais a ou maiores que 18.

Resultado:

Código HTML/JavaScript:

<!DOCTYPE html>
  <body>
  <html>
    <p>Clique no botão para verificar se todos os elementos do <em>array</em> são iguais a ou maiores que 18.</p>
    <span>Resultado: </span><span id="resultadoEvery" style="color: red;"></span><br>
    <button onclick="minhaFuncao()">Iniciar Testes</button>
    <script>
      var idades = [32, 33, 16, 40];
      var mensagem = "";
      function ehAdulto(idade) {
        return idade >= 18;
      }
      function minhaFuncao() {
        if (idades.every(ehAdulto)) {
            mensagem = "Todos os valor são maiores ou iguais a 18!"
          } else {
            mensagem = "Pelo menos um valor é menor que 18!"
          }
        document.getElementById("resultadoEvery").innerHTML = mensagem;
      }
    </script>
  </body>
</html>

Vamos analisar esse código mais de perto?

<span id="resultadoEvery" style="color: red;"></span>

  • Definimos um identificador (id) para o elemento;
  • O identificar será utilizado para termos acesso ao elemento para alterar seu conteúdo/texto, apresentando uma mensagem personalizada;
  • A cor do texto será vermelha.

<button onclick="minhaFuncao()">Iniciar Testes</button>

  • Criamos um botão e atribuimos a ele o evento onclick que chamará/executará nossa função minhaFuncao() quando o usuário clicar nele.

var idades = [32, 33(...)]; var mensagem = "";

  • Criamos literalmente nosso array e uma variável para o texto personalizado de mensagem.

function ehAdulto(idade) { return idade >= 18;}

  • Criamos uma função quer será executada para cada elemento do array;
  • Ao testar cada valor de cada elemento, retornará verdadeiro ou falso dependendo da condição: o elemento é maior ou igual a 18?

function minhaFuncao() { (...) };

  • Criamos a função principal que será executada no clique do mouse sobre o botão;
  • Essa função testará o valor de cada elemento do array e apresentará uma mensagem adequada.

if (idades.every(ehAdulto)) {(...) };

  • É uma estrutura de controle de seleção condicional. Veja o item 8.2.;
  • idades.every(ehAdulto): executa a função ehAdulto para cada um dos elementos do array idades;
  • Para cada item verificado retornará verdadeiro ou falso dependendo da condição lógica testada: se maior ou igual a 18 retornará verdadeiro, caso contrário, retornará falso;
  • Ao encontrar uma condição que retorne falso a instrução interromperá sua execução e retornará para a função principal apresentando a mensagem correspondente;
  • Enquanto uma condição falsa não for retornada todos os elementos serão testados e ao final retornará como sendo verdadeira a condição, ou seja, todos os elementos são maiores que 18!.

document.getElementById("demo").innerHTML = mensagem;

  • Essa instrução encontra o elemento cujo identificador (id) seja "resultadoEvery" (<span;gt;);
  • Atribui um novo texto ao elemento a partir da variável 'mensagem' que foi transformada na execução do programa.

VI. Método forEach

Esse método disponibiliza um outro jeito de percorrer (iterar) sobre um array e ter acesso ao seu conteúdo (valores).

Para demonstrar essa instrução vamos acrescenter algumas TAgs HTML para formatar nossa saída na tela ;-).

Sintaxe:

nomeArray.forEach(função(item, indice, array));

Acessando todos os valores de um array:

<script>
 
  /* Construção do array */
  var meuArray = new Array('Computador', 'Mouse', 'Teclado', 'Monitor', 'Disco Rígido');
 
  /* Criando uma lista não numerada */
  document.write('<ul>');

  /* Acessando os valores do array e apresentando na tela concatenados com <li> */
  meuArray.forEach(function(nomeItem, indice) {
    document.write('<li>' + nomeItem + ' (' + indice + ')' + '</li>');
  });
 
</script>

Resultado no navegador:

O argumento nomeItem passado para a função (function(...) {...};) será o valor corrente do array.

Normalmente o fluxo de execução de um programa JavaScript é sequencial, ou seja, as instruções (comandos) são executados um após um outro.

Algumas vezes em nosso código (programa) será necessário transferir o fluxo para outra parte do script de forma que algumas instruções não sejam executadas. Essa rota alternativa é seguida com base em uma decisão lógica, baseada em uma condição (expressão lógica) verdadeira ou falsa.

Existem quatro estruturas de seleção disponíveis em JavaScript:

  • Estrutura de seleção única: if
  • Estrutura de seleção múltipla: if/else ou if/else if
  • Operador ternário: ? :
  • Estrutura de Seleção Múltipla: switch

Em outras ocasiões será necessário repetir um bloco de instruções enquanto certa condição permacecer verdadeira ou falsa. Quando as condições de controle forem atendidas (normalmente após um número de certo de iterações/repetições), o controle será transferido para a instrução imediata e seguinte ao final do bloco de repetição.

São quatro estruturas de repetição em JavaScript:

  • A expressão/condição é testada no início: while
  • A expressão/condição é testada no final: do/while
  • Estrutura de operação nas propriedades de um objeto for...in/for...of
  • Uma expressão controlada por um contador: for

Nesse curso abordaremos o uso prático das estruturas de controle enumeradas. Para uma referência completa acesse https://developer.mozilla.org.

Para definir um fluxo alternativo de execução de um programa JavaScript baseado em uma decisão lógica podemos usar quatro estruturas de seleção disponíveis em JavaScript:

  • Estrutura de seleção única: if
  • Estrutura de seleção múltipla: if/else ou if/else if
  • Operador ternário: ? :
  • Estrutura de Seleção Múltipla: switch

Uma estrutura condicional executa uma parte de código JavaScript (instruções) se determinada expressão for verdadeira (true).

Sintaxe:

if (condição) { instrução }; (...)

É assim que funciona:

  • A condição é avaliada como verdadeira (true) ou falsa (false).
  • Caso o valor retornado seja verdadeiro a(s) instrução(ões) entre as chaves será(ão) executada(s);
  • Se o valor retornado for falso nada será executado e o programa continua após o bloco de instruções (continuará a execução das instruções após os chaves).

Página HTML - Escolha uma cor:

A cor desse título mudará!

Código HTML/JavaScripit:

<!DOCTYPE html>
<html>
  <head>
    <title>Teste de Expressão condicional <strong>'if'</strong></title>
  </head>
  <body>
    <script>
      function analisarCor(minhaCor) {
        if (minhaCor == "Azul") {
          document.querySelector('h3').style.color = 'blue';
        };
        if (minhaCor == "Vermelho") {
          document.querySelector('h3').style.color = 'red';
        };
        if (minhaCor == "Verde") {
          document.querySelector('h3').style.color = 'green';
        };
      }
    </script>
    <h3>A cor desse título mudará!</h3>
    <label><input type="radio" name="_cor1" value="Azul" onclick="analisarCor(this.value);"> Azul
    </label>
    <label><input type="radio" name="_cor1" value="Vermelho" onclick="analisarCor(this.value);"> Vermelho
    </label>
    <label><input type="radio" name="_cor1" value="Verde" onclick="analisarCor(this.value);"> Verde
    </label>
  </body>
</html>

Vamos analisar esse código mais de perto?

function analisarCor() {...};

  • Definimos uma função que verifica um parâmetro e dependendo do valor desse parâmetro alterará a cor de um elemento.

if (minhaCor == "Azul") {...} if (minhaCor == "Vermelho") {...} (...) ;

  • Início da esturura de seleção condicional. Será verificado o parâmetro enviado para a função: minhaCor.
  • Seleção condicional verifica, através de uma comparação, se a expressão retorna verdadeiro (true) ou falso (false).
  • Caso essa comparação retorne um valor booleano verdadeiro o código entre chaves {...} será executado.

<input type="radio" (...) onclick="analisarCor(this.value);">

  • O evento onclick="..." define qual a função será chamada/executada;
  • Relembrando: Um evento pode ser uma ação do usuário sobre um elemento que dará origem a uma reação do programa em resposta ao evento! Nesse caso estamos aguardando o clique do mouse sobre um elemento para dar uma resposta adequada.
  • Na definição dos elementos <input type="radio"...> o conteúdo do atributo value será passado para uma função que realizará uma sequência de verificações lógicas nesse conteúdo, determinando qual a cor que será aplicada ao título;
  • A instrução this identifica o elemento que iniciou o evento, ou seja, o elemento que recebeu o clique do mouse; desta forma a função poderá identificar o atributo value do elemento e agir em conformidade.

Podemos traduzir o que aconteceu na função da seguinte forma:

se (minhaCor == 'Azul') {
  atribua 'blue' ao estilo_de_cor_do_título_h3;
};

Uma estrutura condicional multipla também avalia uma expressão para verificar se ela é verdadeira (true). Se a expressão avaliada for falsa (false) as próximas expressões condicionais serão avaliadas até que alguma seja verdadeira ou a palavra reservada else (senão, de outro modo) seja encontrada.

Sintaxe:

if (condição1) {
  instrução1
} else if (condição2) {
  instrução2
} else if (condição3) {
  instrução3
}
...
else {
  instruçãoN
}

Alterando nosso código HTML do exemplo anterior:

<!DOCTYPE html>
<html>
    (...)
    <script>
      function analisarCor(minhaCor) {
        if (minhaCor == "Azul") {
          document.querySelector('h3').style.color = 'blue';
        } else if (minhaCor == "Vermelho") {
          document.querySelector('h3').style.color = 'red';
        } else {
          document.querySelector('h3').style.color = 'green';
        };
      }
    </script>
(...)

No primeiro exemplo (8.1) todas as expressões são testadas, ou seja, caso a cor escolhida seja a primeira (o primeiro if), a cor do título será alterada e as outras expressões também serão testadas. Isso demanda recurso de máquina e tempo.

Já no segundo exemplo (8.2) se a primeira expressão for verdadeira (true) as outras expressões não serão testadas. E se a cor escolhida não for azul nem vermelha certamente será verde, logo a última instrução após o else será executada.

Você é um programadores avançado?

As instruções apresentadas estão sendo usadas de forma didática para apresentar a linguagem para programadores iniciantes. No script não é necessário usar expressões lógicas para testar os valores, basta passar para a função o valor/cor que deverá ser aplicado. Veja abaixo o código somente para fins de curiosidade:

Código HTML/JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Sem Teste de Expressão condicional</title>
  </head>
  <body>
    <script>
      function analisarCor(minhaCor) {
        document.querySelector('h3').style.color = minhaCor;
      }
    </script>
    <h3>A cor desse título mudará!</h3>
    <label><input type="radio" name="_cor1" value="blue" onclick="analisarCor(this.value);"> Azul
    </label>
    <label><input type="radio" name="_cor1" value="red" onclick="analisarCor(this.value);"> Vermelho
    </label>
    <label><input type="radio" name="_cor1" value="green" onclick="analisarCor(this.value);"> Verde
    </label>
  </body>
</html>

Observe que o valor do atributo value foi alterado para o nome da cor em inglês que é o valor que será aplicado ao atributo de estilo style.color do elemento <h3>. Nesse caso não foi necessário testar qual o nome da cor enviada como parâmetro... ;-)

O operador condicional ternário é um atalho para o condicional if. Por se tratar de um operador ele retornará um valor resultante da operação.

Sintaxe:

condição ? expressão1 : expressão2;

É assim que funciona:

  • A condição é avaliada como verdadeiro (true) ou falso (false).
  • Caso o valor retornado seja verdadeiro, a expressão1 será o valor resultante;
  • Caso o valor retornado seja falso, a expressão2 será o valor resultante.

Página HTML:

Informe as notas do aluno:
(Um número inteiro entre 0 e 10)

Resultado Final:

Parte do código: (Operador Condicional Ternário)

<script>
  ( ... )
  resultadoFinal = (media >= 6) ? "Aluno Aprovado!" : "Aluno Reprovado!";
  ( ... )
</script>

Equivalente à:

<script>
  ( ... )

  if (media >= 6) {
    resultadoFinal = "Aluno Aprovado!" 
  } else {
    resultadoFinal = "Aluno Reprovado!" 
  };

  ( ... )
</script>

Código HTML/JavaScript completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Operador Condicional Ternário</title>
  </head>
  <body>
    <span style="font-size: 140%"><strong>Informe as notas do aluno:</strong></span>
    <span style="font-size: 85%">(Um número inteiro entre 0 e 10)</span><br>
    <span>Resultado Final: </span><span id="resultado"></span><br>
    <label>Primeira Nota: <input type="number" min="0" max="10" id="nota1"></label>
    <label>Segunda  Nota: <input type="number" min="0" max="10" id="nota2"></label>
    <button type="button" onclick="calcularResultado()">Calcular Resultado</button>
    <script>
      function calcularResultado() {
        var nota1 = Number(document.getElementById("nota1").value);
        var nota2 = Number(document.getElementById("nota2").value);
        var media = (nota1 + nota2) / 2;
        resultadoFinal = (media >= 6) ? "Aluno Aprovado!" : "Aluno Reprovado!";
        document.getElementById("resultado").innerHTML = resultadoFinal + " - Média Final: " + media;
        return true;
      };
    </script>
  </body>
</html>

A instrução swith é usada para executar ações dierentes com base em determinadas condições. Para cada condição haverá um bloco de instruções a ser executado.

Sintaxe:

<script>
  switch(expressão) {
    case valor1:
      instruções
      break;
    case valor2:
      instruções
      break;
      (...)
    case valorN:
      instruções;
      break;
    default:
      instruções
  }
</script>

É assim que funciona:

  • A expressão é avaliada uma vez;
  • O valor da expressão é comparada com os valores de cada caso (case);
  • Se houver uma correspondência, o bloco associado de código é executado;
  • Se não houver correspondência o programa procura pela cláusula opcional default executando as instruções associadas;
  • A cláusula default não tem que ser o último caso em um bloco switch;
  • A instrução opcional break associada com cada caso garante que o programa saia da estrutura de seleção switch assim que a instrução correspondente for executada;
  • Caso break seja omitido, o programa continuará a execução para o caso seguinte independentemente do critério ter sido correspondido ou não.

Aprendendo com um pouco de lógica de programação:

Para aprender de um modo prático vamos lançar uma situação problema e fazer um código JavaScript resolução desse problema.

Considere o seguinte: Noé contratou sua empresa para selecionar os animais que poderiam ou não entrar na arca. Ele informou quais os animais deveriam ficar de fora pois não haveria lugar para eles no mundo moderno.

Ele enumerou os seguintes animais para ficaram fora da Arca:

  • Dinossauro
  • Unicórnio
  • Mamute
  • Tigre Dente-de-sabre

Como resolver essa questão? Vamos a um passo-a-passo:

  • 1. Escolhemos um dos animais da lista;
  • 2. verificamos se o animal escolhido poderá ou não entrar na Arca;
    • 2.1. Caso o animal possa entrar emitir mensagem: O animal 'X' poderá entrar na Arca;
    • 2.2. Caso o animal NÃO possa entrar emitir mensagem: O animal 'X' NÃO poderá entrar na Arca;
  • 3. Voltar a escolher um dos animais da lista.

Página HTML:

Escolha um animal:
Resultado:

Parte do código: (Estrutura de Seleção Múltipla)

(...)
<script>
    function verificarAnimal() {
      var select      = document.querySelector('select');
      var animal      = select.value;	
      var selecionado = select.options[select.selectedIndex].text;
      var mensagem    = ' pode entrar na Arca de Noé!'
      switch (animal) {
        case 'cachorro':
        case 'girafa':
        case 'porco':
        case 'vaca':
          mensagem = selecionado + mensagem;
          break;
        case 'dino':
        case 'mamute':
        case 'unicornio':
        default:
          mensagem = selecionado + ' NÃO' + mensagem;
      };
      document.getElementById("resultadoAnimais").innerHTML = mensagem;
      return true;
    };
  </script>
( ... )

Código HTML/JavaScript completo:

<!DOCTYPE html>
<html>
<head>
  <title>Teste Seleção SWITCH</title>
</head>
<body>
  <span style="font-size: 140%"><strong>Escolha um animal:</strong></span>
  <span>Resultado: </span><span id="resultadoAnimais" style="color: red;"></span><br>
  <label>Sua escolha:
    <select id="animais">
      <option value="cachorro">Cachorro</option>
      <option value="dino">Dinossauro</option>
      <option value="girafa">Girafa</option>
      <option value="mamute">Mamute</option>
      <option value="porco">Porco</option>
      <option value="tigre">Tigre Dente-de-sabre</option>
      <option value="unicornio">Unicórnio</option>
      <option value="vaca">Vaca</option>
    </select>
  </label><br>
  <button type="button" onclick="verificarAnimal()">Verificar Animal</button>
  <script>
    function verificarAnimal() {
      var select      = document.querySelector('select');
      var animal      = select.value;	
      var selecionado = select.options[select.selectedIndex].text;
      var mensagem    = ' pode entrar na Arca de Noé!'
      switch (animal) {
        case 'cachorro':
        case 'girafa':
        case 'porco':
        case 'vaca':
          mensagem = selecionado + mensagem;
          break;
        case 'dino':
        case 'mamute':
        case 'unicornio':
        default:
          mensagem = selecionado + ' NÃO' + mensagem;
      };
      document.getElementById("resultadoAnimais").innerHTML = mensagem;
      return true;
    };
  </script>
</body>
</html>

Vamos analisar esse código mais de perto?

<span id="resultadoAnimais" style="color: red;"></span>

  • Definimos um identificador (id) para o elemento.
  • O identificar será utilizado para termos acesso ao elemento para alterar seu conteúdo/texto.
  • A cor do texto será vermelho.

<select id="animais">(...)</select>

  • Criamos uma lista drop-down que conterá a lista de animais para verificar se poderão ou não entrar na Arca de Noé.

<option value="cachorro">Cachorro</option>(...)

  • Criamos itens na lista drop-down com os animais que vamos verificar.
  • Cada item da lista tem um atributo value que será passado para a nossa função testar.
  • Esse atributo pode ser qualquer valor definido pelo programador. Poderia ser, por exemplo, uma sequencia numérica (value='1'; value='2'... value='n').

<button type="button" onclick="verificarAnimal()">Verificar Animal</button>

  • Criamos um botão e atribuimos a ele o evento onclick que chamará/executará nossa função verificarAnimal() quando o usuário clicar nele.

<script>function verificarAnimal() { ...};</script>

  • Criamos nossa função que verificará qual o animal da lista foi selecionado. Esse nome é definido pelo programador.

var select = document.querySelector('select');

  • Criamos uma variável 'select' que gardará uma referência ao elemento <select>.
  • Os elementos <option> estão contidos no elemento <select> e uma referência a eles também serão armazenadas nessa variável.

var animal = select.value;

  • A variável select é uma referência ao elemento <select>; essa instrução está obtendo o atributo value do elemento;
  • Equivalente a: var animal = document.querySelector('select').value;
  • Criamos uma variável 'animal' e atribuímos a ela o valor (value) do item selecionado na lista;
  • Essa variável será usada na estrutura de seleção swith e verificará qual a mensagem será exibida, dependendo do seu valor.

var selecionado = select.options[select.selectedIndex].text;

  • Criamos uma variável para guardar o texto (text) do item selecionado (o nome do animal);
  • Esse texto é o que aparece na página para o usuário na lista de itens;
  • Cada item da lista é identificado por um número sequencial;
  • A instrução [select.selectedIndex] retornará um valor sequencial; esse valor indica qual o item que está selecionado (selectedItem).

var mensagem = ' pode entrar na Arca de Noé!';

  • Parte da mensagem que será concatenada (juntada) com um complemento, dependendo da execução da estrutura de seleção switch.

switch (animal) {...}

  • Começa a execução da estrutura de seleção.
  • Verifica primeiramente se o animal selecionado é um dos animais permitidos e em seguida forma a mensagem que será apresentada: mensagem = selecionado + mensagem;.
  • Atenção: 'selecionado' e 'mensagem' são duas variáveis definidas anteriormente. Reveja acima!
  • Caso o animal selecionado não seja um dos animais permitidos será formada a mensagem que será apresentada: mensagem = selecionado + ' NÃO' + mensagem;

document.getElementById("resultadoAnimais").innerHTML = mensagem;

  • Essa instrução encontra o elemento cujo identificador (id) seja "resultadoAnimais" (<span>);
  • Atribui um novo texto ao elemento a partir da variável 'mensagem' que foi transformada na execução do programa;
  • Essa variável foi modificada durante a execução do script, sendo acrescentado ao texto inicial outras informações para então apresentá-la ao usuário.

Em algumas situação será necessário repetir um bloco de instruções enquanto certa condição permacecer verdadeira ou falsa. Quando as condições de controle forem atendidas (normalmente após um número de certo de iterações/repetições), o controle será transferido para a instrução imediata e seguinte ao final do bloco de repetição.

Essas estruturas também podem ser referenciadas como laço, loop ou iteração; e tem como objetivo manter um bloco de instruções em execução repetidamente até que a condição de controle seja alcançada.

Veremos apenas três estruturas de repetição:

  • A expressão/condição é testada no início: while
  • A expressão/condição é testada no final: do/while
  • Uma expressão controlada por um contador: for
  • Estrutura de operação nas propriedades de um objeto for...in/for...of

Ao implementar uma estrutura dessas é importante verificar a condição para que ela não gere laços infinitos. Ou seja, deve-se ter certeza que eventualmente a condição será falsa, caso contrário o laço (repetição) nunca terminará e o sistema poderá travar.

Uma estrutura de repetição condicional while executa o bloco de instruções enquanto determinada expressão for avaliada como verdadeira (true). O bloco de instruções NÃO será executado caso a expressão seja avaliada como falsa logo em sua primeira avaliação.

Sintaxe:

while (condição) { instrução }; (...)

É assim que funciona:

  • A expressão é avaliada como verdadeira (true) ou falsa (false);
  • Caso a expressão seja avalida como verdadeira o bloco de instruções será executado, caso contrário o script continuará sua execução logo após o bloco;
  • Após a execução do bloco de instruções a expressão será avaliada novamente para verificar se ela ainda continua verdadeira. Se a expressão continuar verdadeira as instruções do bloco serão executadas novamente e assim por diante.

Código JavaScript Simples:

<script>
  var i = 0;
  while (i < 10) {
    document.write("O número é " + i + '<br>');
    i++;
  };
</script>

Resultado no Navegador:

O número é 0
O número é 1
O número é 2
O número é 3
( ...)
O número é 9

Um exemplo mais complexo:

Informe um numero inteiro:
(Um número inteiro entre 0 e 10)




Resultado:

Codigo HTML/JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Estrutura de Repetição: While</title>
  </head>
  <body>
    <span style="font-size: 140%"><strong>Informe um numero inteiro:</strong></span>
    <span style="font-size: 85%">(Um número inteiro entre 0 e 10)</span><br>
    <label>Qual o número: <input type="number" min="0" max="10" id="numero_while"></label>
    <button type="button" onclick="iniciarRepeticaoWhile()">Iniciar repetições</button><br>
    <span>Resultado: </span><span id="resultadoWhile"></span><br>
    <script>
      function iniciarRepeticaoWhile() {
        var contador = Number(document.getElementById("numero_while").value);
        var meuSpan = document.getElementById("resultadoWhile");
        meuSpan.innerHTML = "";
        if (contador > 10) {
          meuSpan.innerHTML = "<strong>Atenção!</strong> Informe um número entre 0 e 10!";
          return false;
        };
        while (contador > 0) {
          meuSpan.innerHTML += contador + ' / ';
          contador--;
        };
      };
    </script>
  </body>
</html>

Vamos analisar esse código mais de perto?

<button type="button" onclick="iniciarRepeticaoWhile()">Iniciar repetições</button>

  • Criamos um botão e atribuimos a ele o evento onclick que chamará/executará nossa função iniciarRepeticaoWhile() quando o usuário clicar nele.

<span id="resultadoWhile"></span>

  • Definimos um identificador (id) para o elemento;
  • O identificar será utilizado para termos acesso ao elemento para alterar seu conteúdo/texto, apresentando uma mensagem personalizada;

<script>function iniciarRepeticaoWhile() { ... }</script>

  • Criamos uma função que executará suas instruções JavaScript quando o usuário clicar sobre o botão criado.

var contador = Number(document.getElementById("numero_while").value)

  • Criamos uma variável e atribuímos a ela o valor/número informado pelo usuário;
  • document.getElementById encontra o elemento identificado pelo id para usar o seu valor/conteúdo.

var meuSpan = document.getElementById("resultadoWhile")

  • Criamos uma variável e armazenamos uma referência ao elemento <span> para alterarmos seu conteúdo com uma mensagem personalizada;
  • document.getElementById encontra o elemento identificado pelo id.

if (contador > 10) { ... }

  • Verificamos se o valor informado pelo usuário é maior que 10;
  • Se o valor não for válido uma mensagem é exibida no elemento <span>;
  • Se o valor não for válido a função será interrompida (return false;).

while (contador > 0) { ... }

  • Enquanto a variável contador for maior que ZERO o script executará as instruções entre o par de chaves ( {...} );

meuSpan.innerHTML += contador + ' / '

  • A variável meuSpan é uma referência ao elemento <span>;
  • A instrução innerHTML altera o conteúdo do elemento a que se refere;
  • O operador += concatena (acrescenta) ao texto existente no elemento <span> o valor atual da variável contador;

contador--

  • O operador -- na variável contador faz um decremento de UMA unidade (o mesmo que: contador = contador - 1);
  • O script voltará a testar a condição inicial (while) para continuar a executar o bloco de instruções no caso de nossa variável contador ainda ser maior que ZERO.

Podemos traduzir o que aconteceu na função da seguinte forma:

RECEBA contador;
ENQUANTO (contador é MAIOR que 0)
 EXECUTE
 {
   texto_do_span = contador + ' / ';
   subtraia UM do contador;
 };
teste_novamente_ENQUANTO;

Uma estrutura de repetição condicional do...while executa o código JavaScript (instruções) pelo menos UMA vez e a expressão é avaliada no final do bloco de instruções.

Sintaxe:

do { instrução } while (condição); (...)

É assim que funciona:

  • O bloco de instruções será executado (pelo menos uma vez);
  • Após a execução do bloco de instruções a expressão será avaliada para verificar se ela é verdadeira;
  • Se a expressão for verdadeira o bloco de código será executado novamente até que a expressão seja avaliada como falsa;
  • Caso a expressão NUNCA seja falsa o bloco de código será executado infinitamente e possivelmente travará o sistema.

Código JavaScript simples:

<script>
  var i = 0;
  do {
    document.write("O número é " + i + '<br>');
    i++;
  } while (i < 5);
</script>

Essa estrutura também pode ser utilizada, por exemplo, para executar uma bloco de intruções que receberá uma entrada do usuário. Se a informação não for a informação esperada então será solicitado ao usuário que informe o que é solicitado até que se obtenha a informação correta.

Para testar esse código copie e cole em https://www.quackit.com/ o código JavaScript a partir da TAG <script> até à TAG de fechamento </script>, incluindo essas TAGs.

Código JavaScript mais complexo:

<script>
  var UF = {DF:'Distrito Federal', GO:'Goiás', MG:'Minas Gerais'};
  do {
    var uf = prompt("Por favor entre com uma UF:", "DF");
    if (uf == null) 
      { uf = 'DF' };
    uf = uf.toUpperCase();
  } while (verificarUF(uf));

  document.write(uf + ': ' + UF[uf]);
               
  function verificarUF(entrada) {
    return (entrada in UF) ? false : true;
  };
</script>

Vamos analisar esse código mais de perto?

var UF = {DF:'Distrito Federal', (...)

  • Criamos uma variável UF do tipo objeto array e atribuimos a ela um índice nomeado e um atributo (Veja mais no Tópico 10. Objetos Literais);
  • Lembre-se: as variáveis são case sensitive, ou seja, a linguagem JavaScript faz diferença entre minúsculas e maiúsculas: a variável UF é diferente da variável uf.

var uf = prompt("Por favor entre com uma UF:", "DF");

  • Criamos uma variável uf (em letras minúsculas) que receberá uma informação digitada pelo usuário em uma caixa de diálogo que será apresentada;
  • O segundo parâmetro (DF) é passado como um valor padrão que aparecerá na caixa de diálogo;
  • Se o usuário clicar sobre o botão cancelar na caixa de diálogo o valor da variável uf será null.

if (uf == null) { uf = 'DF' };

  • Se a variável uf for igual a null essa instrução atribuirá o valor DF à ela.

uf = uf.toUpperCase();

  • Essa instrução atribuirá à variável uf o seu próprio conteúdo transformado para caixa alta.

while (verificarUF(uf));

  • while() verifica uma condição para voltar a executar a estrutura de repetição se a condição for verdadeira;
  • A função verificarUF(uf) receberá a variável uf como parâmetro e fará a verificação se a informação prestada pelo usuário será encontrada em nosso array;
  • Se a informação prestada pelo usuário for encontrada a função retornará false e o bloco de repetição condicional será encerrado.

document.write(uf + ': ' + UF[uf]);

  • Apresenta na tela a variável uf seguida do atributo do nosso objeto array que tem o índice nomeado correspondente;
  • O mesmo que: UF['GO'], por exemplo, retornando 'Goiás' para apresentar no navegador.

return (entrada in UF) ? false : true;

  • return: a função retornará um valor/resultado;
  • (entrada in UF): verifica se o parâmetro recebido na variável entrada (que recebeu o conteúdo da variável uf) é um dos índices nomeados em nosso objeto array;
  • condição ? instrução : instrução;: operador condicional ternário (Tópico 8.3).

Uma estrutura de repetição controlada por um contador executa o código JavaScript (instruções) enquanto o contador não atingir o valor determinado na expressão.

Uma estrutura de repetição for é muito utilizada para percorrer um array e recuperar seus valores ou para preenche-lo.

Sintaxe:

for ([inicialização]; [condição]; [incremento]) { instrução }; ( ... )

É assim que funciona:

  • inicialização: Declara uma variável que será usada como contador;
  • condição: uma expressão que será avaliada como verdadeira ou falsa;
  • incremento: faz um incremento no contador;
  • { instrução }: bloco de código será executado tantas vezes quantas forem definidas pelo contador.

Código JavaScript Simples:

<script>
  for (var i = 0; i < 9; i++)
  {
    document.write("O número é " + i + '<br>');
  };
</script>

Preenchendo um array:

<script>
  var meuArray = [];
  for (var i = 0; i < 4; i++)
  {
    meuArray.push(i);
    document.write('[' + meuArray + ']' + '<br>')
  };
</script>

Resultado no Navegador:

Recuperando valores de um array:

<script>
  var meuArray = ['Primeiro','Segundo','Terceiro','Quarto'];
  var maximo   = meuArray.length;
  document.write('Array Original: ' + '[' + meuArray + ']' + '<br><br>')
  for (var i = 0; i < maximo; i++)
  {
    document.write('Sequencia de Iteração:  ' + i + '<br>');
    document.write('Item apagado do Array:  ' + meuArray.pop() + '<br>');
    document.write('Novo Conteúdo do Array: ' + '[' + meuArray + ']' + '<br>')
    document.write('<br>')
  };
</script>

meuArray.length retorna um valor numérico que indica o tamanho do array (quantidade de itens armazenados).

Resultado no Navegador:

Executa um ciclo de repetições através das propriedades enumeradas de um objeto e executa o código JavaScript (instruções).

Sintaxe:

for (variável in objeto) { instrução }; ( ... )

É assim que funciona:

  • variável: Declara uma variável que será usada para armazenar uma propriedade do objeto. A cada iteração uma propriedade diferente do objeto será atribuída à variável;
  • objeto: Objeto com as propriedades enumeradas que vamos recuperar (ler e armazenar).

No exemplo abaixo, após a iteração, serão apresentados os índices do array.

Recuperando o índice de um array com for...in:

<script>
  var meuArray = ['Primeiro','Segundo','Terceiro','Quarto'];
  for (var indice in meuArray)
    {
      document.write(indice + '<br>');
    };
</script>

Resultado no Navegador:

No exemplo abaixo, após a iteração, serão apresentados os valores armazenados no array.

Recuperando os valores armazenados em um array com for...of:

<script>
  var meuArray = ['Primeiro','Segundo','Terceiro','Quarto'];
  for (var valorArmazenado of meuArray)
    {
      document.write(valorArmazenado + '<br>');
    };
</script>

Resultado no Navegador:

Podemos observar que a iteração ocorreu em todos os elementos do array, retornando seus índices ou seus valores dependendo do uso da instrução for...in/of.

Uma diferença importante entre as duas iterações, em relação ao array, é que for...in irá procurar imediatamente pela primeira propriedade enumerável definida, saltando os primeiros índices com valores armazenados indefinidos (undefined), enquanto for...of não fará isso, pois procura imediatamente pelo primeiro índice (ou primeiro elemento da coleção iterável).

Observe o resultado de cada um nos exemplos abaixo:

Saltando os indefinidos com for...in:

<script>
  /* Criando um array vazio */
  var meuArray = [];

  /* Atribuindo um valor ao array na SEXTA posição (índice 5)*/
  meuArray[5] = 'Único valor definido!';

  for (var indice in meuArray)
  {
    document.write(meuArray[indice] + ' (Índice: ' + indice + ')');
  };
</script>

Resultado no Navegador:

Não foram apresentados os elementos do array com um valor indefinido!

Apresentando todos os valores com for...of:

<script>
  /* Criando um array vazio */
  var meuArray = [];

  /* Atribuindo um valor ao array na SEXTA posição (índice 5)*/
  meuArray[5] = 'Único valor definido!';

  for (var valorArmazenado of meuArray)
  {
    document.write(valorArmazenado + '<br>');
  };
</script>

Resultado no Navegador:

Foram apresentados todos os elementos do array com um valor definido ou não.

Objetos Literais são objetos criados utilizando um par de chaves ( { } ) e suas propriedades e métodos são todos públicos.

Todo objeto literal é um objeto único e mesmo que ele seja armazenado em diferentes variáveis, todas apontarão para o mesmo objeto. Caso seja alterada qualquer propriedade em qualquer uma das variáveis criadas as modificações serão refletidas em todas elas.

Objetos literais são coleções de atributos, dados e métodos e o seu uso é recomendado em situações onde não podem existir mais de uma instância do objeto (como configurações de projeto ou coleções de objetos).

Já foi demonstrado que um array é um tipo especial objeto e que normalmente pode-se usar números (índices) para acessar seu conteúdo. Também vimos como percorrer (iterar) o seu conteúdo com laços de repetição for. Considerando que objetos literais são arrays associativos, uma vez que cada atributo (ou propriedade) é associada com um valor de string (seu identificador) que pode ser usado para acessá-lo, vamos aprender a ter acesso aos seus elementos através desses valores associados (identificadores).

Nos próximos exemplos deste tópico demonstraremos algumas formas de acesso aos elementos armazenados em objetos literais.

Considere essa definição de objeto para utilizarmos nos exemplos que seguirão:

Definindo um objeto literal:

<script>

  /* um objeto com índices associados */
  var pessoa = {
    primeiroNome:   "Marcio",
    segundoNome:    "Guillardi",
    eMail:          "mguilla@yahoo.com",
    especialidades: ["JavaScript", "PHP", "HTML", "MySQL"],
    nomeCompleto:   function() {
      return (this.primeiroNome + ' ' + this.segundoNome);
    },
    incluirEspecialidade: function(novaEspecialidade) {
      this.especialidades[this.especialidades.length] = novaEspecialidade;
    }
  };

</script>
this refere-se ao objeto corrente. Para ter acesso às propriedades deste objeto deve-se referencia-las pela palavra reservada this.

10.1. Recuperando um atributo pelo identificador:

<script>
  document.write(pessoa.primeiroNome + '<br>');
  document.write(pessoa['segundoNome'] + '<br>');
  document.write(pessoa.especialidades[3] + '<br>');
  document.write(Object.keys(pessoa)[2] + '<br>');
</script>
Resultado no navegador:

10.2. Os identificadores do objeto:

<script>
  document.write('[' + Object.keys(pessoa) + ']' +'<br>');
</script>
Resultado no navegador:

10.3. Cada identificador do objeto (forEach):

<script>
 
  /* Apresentando os identificadores individualmente */
  Object.keys(pessoa).forEach(function(identificador) {
    document.write(identificador + '<br>');
  });

</script>
Resultado no navegador:

10.4. Percorrendo o conteúdo e apresentando na tela for/in:

<script>
  for (var indice in pessoa) {

    /* O índice nomeado do objeto */
    document.write(indice + ': ');

    /* O conteúdo/atributo/valor referente ao índice*/
    document.write(pessoa[indice] + '<br>');
  };
</script>
Resultado no navegador:

10.5. Percorrendo o array denominado especialidades no objeto

<script>
  pessoa.especialidades.forEach(function(especial) {
    document.write(especial + '<br>');
  });
</script>
Resultado no navegador:

10.6. Executando os métodos do objeto:

<script>
  
  /* Retornando o primeiroNome + segundoNome (concatenados) */
  document.write('<strong>primeiroNome + segundoNome:</strong>' + '<br>');
  document.write(pessoa.nomeCompleto() + '<br><br>');

  /* Exibindo o array de especialidades SEM o novo conteúdo */
  document.write('<strong>especialidades SEM o novo conteúdo:</strong>' + '<br>');
  document.write(pessoa.especialidades + '<br><br>');

  /* Incluindo uma especialidade no array de especialidades */
  pessoa.incluirEspecialidade("Java");

  /* Exibindo novamente o array de especialidades COM o novo conteúdo */
  document.write('<strong>especialidades COM o novo conteúdo:</strong><br>');
  document.write(pessoa.especialidades);

</script>
Resultado no navegador:

Muitas vezes precisamos criar objetos de um mesmo tipo para atribuir-lhes valores e métodos semelhantes, com os mesmos identificadores (índices). Da forma como foi feito no tópico anterior seria inviável realizar essa tarefa, pois teríamos que criar novos objetos idênticos uns aos outros (mesmos atributos, métodos e identificadores) tornando o código difícil e toda vez que criássemos um objeto todos os métodos seriam carregado na memória.

Qual a saída? Criar um objeto com construtores para reutilização do objeto tal qual uma classe em Java.

Nesse tópico apresentaremos como utilizar uma função construtora de objeto (object constructor function):

11.1. Função Construtora Objeto:

<script>

  /* Criando um objeto 'Pessoa' com seus atributos e métodos */
  function Pessoa(pm, sn, em, esp ) {
    this.primeiroNome   = pm,
    this.segundoNome    = sn,
    this.eMail          = em,
    this.especialidades = [esp],

    this.nomeCompleto = function() {
      return (this.primeiroNome + ' ' + this.segundoNome);
    },
    this.incluirEspecialidade = function(novaEspecialidade) {
      this.especialidades[this.especialidades.length] = novaEspecialidade;
    }
  };

</script>
this e uma palavra-chave do JavaScript. Refere-se ao objeto corrente informando ao construtor que as propriedades referenciadas por ela são deste objeto.

11.2. Criando um objeto personalizado com a palavra-chave new

A palavra-chave new é um operador JavaScript usada para criar uma instância de um objeto definido pelo usuário ou a partir de um tipo nativo (próprio do JavaScript) que possua uma função construtura.

<script>

  /* Crian um objeto personalizado a partir do objeto genérico */
  var euMesmo = new Pessoa("Marcio", "Guillardi", "mguilla@yahoo.com", "Java");

</script>

Manipulando nosso novo objeto:

<script>

  /* Executando o método (função) que inclui uma especialidade no novo objeto*/
  euMesmo.incluirEspecialidade("JavaScript");

  /* Apresentando a as especialidades existentes do novo objeto */
  document.write(euMesmo.especialidades + '<br>');

  /* Executanto o método que retorna os primeiro e segundo nomes concatenados */
  document.write(euMesmo.nomeCompleto());

</script>

11.3. Adicionando novas propriedades e métodos a um objeto

É possível adicionar novas propriedades e métodos a objetos criados a partir de construtores. A propriedade ou método adicionado só estará disponível no alvo da instrução, ou seja, somente no objeto para qual foi criado. Veja o exemplo:.

<script>

  /* Crian UM objeto personalizado a partir do objeto genérico */
  var euMesmo = new Pessoa("Marcio", "Guillardi", "mguilla@yahoo.com", "Java");

  /* Crian OUTRO objeto personalizado a partir do objeto genérico */
  var outraPessoa = new Pessoa("Fulado", "de Tal", "fulano@detal.com", "Delphi");

  /* Adicionando uma propriedade 'nacionalidade' ao objeto 'euMesmo'*/
  euMesmo.nacionalidade = "Brasileira"; 

  /* Essa instrução apresentará no navegador o atributo "Brasileira" */
  document.write(euMesmo.nacionalidade);

  /* Essa instrução apresentará no navegador um atributo "undefined" */
  document.write(outraPessoa.nacionalidade);

</script>

11.4. Adicionando propriedades e métodos aos construtores (prototype)

Não é possível adicionar novas propriedades ou métodos diretamente nos construtores. Para isso podemos utilizar a propriedade prototype.

A propriedade prototype permite que sejam adicionados novas propriedades e métodos a objetos construtores e faz com que esses sejam compartilhados com outros objetos criados a partir desses construtores.

Observe que o objeto 'Pessoa' possui dois métodos (funções) que sempre serão criados para cada novo objeto personalizado instanciado — não seria melhor se esses métodos fossem compartilhados com todos os novos objetos criados sem serem criados para cada objeto instanciado?

prototype:

<script>

  /* Criando um objeto 'Pessoa' com seus atributos e métodos */
  function Pessoa(pm, sn, em, esp ) {
    this.primeiroNome   = pm,
    this.segundoNome    = sn,
    this.eMail          = em,
    this.especialidades = [esp]
  };

  /* Criando os métodos compartilhados */
  Pessoa.prototype.nomeCompleto = function() {
    return (this.primeiroNome + ' ' + this.segundoNome);
  },
  Pessoa.prototype.incluirEspecialidade = function(novaEspecialidade) {
      this.especialidades[this.especialidades.length] = novaEspecialidade;
  }

</script>

Pessoa.prototype é um objeto compartilhado por todas as instâncias do objeto 'Pessoa'. Este objeto é parte da cadeia de buscas (cadeia de protótipos ou "prototype chain") e toda a vez que se tentar acessar uma propriedade do objeto 'Pessoa' que não esteja configurada, Javascript irá verificar em Person.prototype para verificar se esta propriedade existe por lá. Como resultado, qualquer coisa atribuída à Person.prototype tornar-se-a disponível para todas as instâncias deste construtor, através do objeto this.

Atenção! quando uma instrução fizer referência a uma propriedade ou método de um objeto o que retornará em primeiro lugar será o que está definido no objeto, somente depois será verificado a existência na lista prototype.

<script>

  /* Crian UM objeto personalizado a partir do objeto genérico */
  var euMesmo = new Pessoa("Marcio", "Guillardi", "mguilla@yahoo.com", "Java");

  /* Crian OUTRO objeto personalizado a partir do objeto genérico */
  var outraPessoa = new Pessoa("Fulado", "de Tal", "fulano@detal.com", "Delphi");

  /* Adicionando uma propriedade 'nacionalidade' ao objeto 'euMesmo'*/
  euMesmo.nacionalidade = "Brasileira"; 

  /* Adicionando uma propriedade 'nacionalidade' ao objeto 'Pessoa'*/
  Pessoa.prototype.nacionalidade = "Americana"; 

  /* Essa instrução apresentará no navegador o atributo "Brasileira" */
  document.write(euMesmo.nacionalidade);

  /* Essa instrução apresentará no navegador um atributo "Americana" */
  document.write(outraPessoa.nacionalidade);

</script>

O mundo do JavaScript é bem extenso. São muitas coisas que podemos aprender e explorar. O que foi apresentado até aqui representa algumas gotas de um vasto oceano. Mas uma coisa é certa: vale a pena se aprofundar pois dominar essa linguagem é essencial para o futuro de qualquer programador.

  • “As competências em JavaScript são talvez as mais importantes que uma programador precisa de desenvolver para o futuro previsível” - Adam Shipley, director regional sénior na Hays.

Agora vamos resolver alguns exercícios de JavaScript? Comecemos...

Exercícios Resolvidos.