var variavel = (...);

• Define uma variável e atribui a ela um valor;
• Cria as variáveis que serão usadas no processamento do código JavaScript;

document.write('mensagem');

• Escreve diretamente no documento e apresenta mensagens personalizadas.

for (i = 0; i <= expoente; i++) {

• Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (i) for menor oi iugal ao expoente (8);;
• Esse laço de repetição atende ao item 2: apresentar passo a passo os cálculos a partir do expoente ZERO.

document.write("2^{" + i + "} (...)");

• Apresenta no navegador a base e o expoente no formato solicitado no item 4 ( aⁿ ).

document.write(Math.pow(base, i) + "<br>");

• Apresenta o resultado da exponenciação utilizando a função matemática Math.pow(base, i) (i = expoente).

Resultado no navegador:

Base: 2
Expoente: 8

20 = 1
21 = 2
22 = 4
23 = 8
24 = 16
25 = 32
26 = 64
27 = 128
28 = 256

código

• Explica 01

código

• Explica 02

Resultado no navegador:

var meuArray = []; meuArray[0] = ' ( ... );

• Define um array e em seguida atribui valores aos seus índices/elementos;
• Foram criados 20 elementos com índice a partir do ZERO até o 19^o;

document.write( 'mensagem');

• Escreve expressões é códigos HTML diretamente no documento.

for (i = 0; i < meuArray.length; i++) { 'instruções' };

• Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (i) for menor que o total de elementos do array (20);
• Esse laço de repetição tem por objetivo processar cada linha do array definido, a partir do índice ZERO (i = 0), até o último índice definido (i=19).

var arrLinha = meuArray[i].split('');

• Atribui o conteúdo de uma linha do array, representado pelo índice i, a um NOVO array denominado arrLinha[];
• O novo array (arrLinha[]) terá 50 elementos com índice a partir do ZERO até o 49^o;
• O método split('argumento'):
  • Esse método é usado para dividir uma cadeia de caracteres e retornar o resultado em um array;
  • O argumento é opicional, mas se ele for omitido ou não ocorrer na string, o array retornado conterá um único elemento consistindo da cadeia inteira.
  • Se o argumento for informado ele será removido da cadeia de caracteres e em seu lugar será inserido uma vírgula, separando os elementos do array;
  
  
  • Exemplo:
  • 
    

  • var nomeCompleto = "Marcio Guillardi da Silva";
    var arr = nomeCompleto.split(" ");
    document.write(arr);
    
    Resultado: ["Marcio", "Guillardi", "da", "Silva"]
    

  
  
  • Se for passado como argumento uma string vazia ( "" ), cada um dos caracteres será processado e serão separados por vírgulas, inclusive os espaços, se existirem;
  
  
  • Exemplo:
  • 
    

  • var linguagens = "Java Delphi MySql";
    var arr = linguagens.split("");
    document.write(arr);
    
    Resultado: ["J","a","v","a"," ","D","e","l","p","h","i"," ","M","y","S","q","l"]
    

for (x = 0; x < arrLinha.length; x++) { ... };

• Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (x) for menor que o total de elementos do array (50);
• Esse laço de repetição tem por objetivo processar cada elemento do array definido, a partir do índice ZERO (x = 0), até o último índice definido (x = 49).

arrLinha[x] % 2 == 0 ? somatorio+= parseInt(arrLinha[x]) : false;

• Operador Condicional Ternário (condição ? instrução (true) : instrução (false));
• Se o resto da divisão do elemento do array por 2 for igual a ZERO indicará que se trata de um número par, logo a condição será verdadeira e será somado à variável somatorio o valor do elemento.

document.write(arrLinha.join('') + ' = Soma: ' + somatorio);

• Escreve diretamente no documento o array arrLinha;
• O método join('argumento')
  • Esse método é usado para juntar um array em uma cadeia de caracteres e retornar o resultado;
  • O argumento é opcional, mas quando informado ele será inserido para separar os elementos;
  • Se for passado como argumento uma string vazia ( "" ), cada um dos caracteres será processado concatenados na cadeia sem espaçamento entre eles;
  • Se nada for passado como argumento cada um dos caracteres será processado e entre eles será inserido uma vírgula.

Resultado no navegador:

Exercício 18
Somando os números pares de cada linha

73167176531330624919225119674426574742355349194934 = Soma: 72
96983520312774506326239578318016984801869478851843 = Soma: 126
85861560789112949495459501737958331952853208805511 = Soma: 86
( ... )
Exercício 18

Ordenação Bubble Sort:

O objetivo é ordenar os valores de um array de forma decrescente (do menor para o maior).

Serão utilizados dois laços de repetição. O primeiro percorrerá o array a partir do primeiro até o penúltimo elemento, enquanto o segundo laço percorrerá até o último elemento.

O valor na posição indicada pelo primeiro laço será comparada com a próxima posição indicada pelo segundo laço e, se o valor na posição do primeiro for maior que a posição do segundo, será realizada a troca dos elementos dessas posições. Caso contrário, não será realizada a troca, e o próximo par de posições será comparado até que o segundo laço alcance o último elemento.

Quando o segundo laço alcançar o último elemento o programa voltará para o primeiro laço, incrementará o contador para que o próximo elemento seja processado até que todos os elementos tenham sido processados.

Nesse algorítimo o elemento maior é deslocado uma posição para a direita a cada iteração.

function minhaFuncao() { ... };

• Cria uma função JavaScript (também chamada de método);
• A função definida no exemplo dado, ao ser executada, colocará em ordem crescente um texto qualquer obtido a partir do valor de um elementos da página.

var variável = ( ... )

• Define uma variável e atribui a ela um valor;
• Os valores atribuídos às variáveis definidas serão as informações de elementos da página identificados através do método getElementById('identificador'), onde .value retornará o valor a ser atribuído.

document.getElementById("ID").value

• Esse método/função retorna o elemento que possui o atributo ID com o valor especificado;
• É usado quase toda vez em que se desejar manipular ou obter informações de um elemento em seu documento;
• O atributo .value retorna o conteúdo do elemento.

var arr = document.getElementById("texto").value.split('');

• Define uma variável arr a partir do conteúdo de um elemento da página identificado por id="texto";
• O método split('') foi encadeado para converter o valor retornado em um array;
• Finalmente será atribuído o resultado à variável arr.
• O método: split('')
  
  
  • Esse método é usado para criar uma matriz (array) a partir de uma cadeia de caracteres;
  • O par de aspas, sem espaço entre elas como argumento do método split(''), indica que deve ser retornado cada um dos caracteres separados por vírgula, inclusive os espaços, se houver;
    
    

    Exemplo:

    var nome = 'marcio guillardi';
    var arrNome = nome.split('');

    O conteúdo do array arrNome será: [m,a,r,c,i,o, ,g,u,i,l,l,a,r,d,i]

var resultadoHTML = document.getElementById("resultado");

• Define uma variável resultadoHTML;
• Nessa variável será armazenado uma referência a um elemento da página (<div>), identificado por id="resultado";
• Qualquer alteração feita nessa variável será refletido no elemento na página.

resultadoHTML.innerHTML = 'Não ordenado:<br>' + arr.join(' ') + '<br><br>';

• Essa instrução está alterando o conteúdo HTML do elemento referenciado por resultadoHTML, atribuindo-lhe um novo conteúdo;
• Essa instrução está apresentando para o usuário o valor original do elemento da página, antes do processamento de ordenação de seus valores;
• O novo conteúdo está sendo concatenado com algumas TAGs HTML e com o conteúdo do array arr encadeado com o método join(' ');
• O Método join('')
  
  
  • Esse método junta todos os elementos de um array em uma sequencia de caracteres;
  • O argumento entre aspas indicará o que deve ser inserido entre os elementos, ou seja, na cadeia de caracteres o que estará separando os elementos;
    
  • Se o argumento for uma string vazia os elementos estarão juntos e sem espaço entre eles.
    
    

    Exemplo:

    var arrNome = ['M','a','r','c','i','o',' ','G','u','i','l','l','a','r','d','i'];
    var novaVariavel = arrNome.join(' ');

    O conteúdo da varíavel novaVariavel será: 'M a r c i o G u i l l a r d i'

resultadoHTML.innerHTML += 'Ordenado:<br>' + arr.join(' ');

• Finalmente apresenta o resultado no elemento referenciado por resultadoHTML;
• O Operador += indica que o NOVO conteúdo deverá ser inserido (concatenado) com o conteúdo já existente;
• O resultado é o conteúdo do array arr após a execução do método join(' ') sobre o seu valor.

for (var i = 0; i < arr.length - 1; i++) { ... };

• Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (i) for menor que o total de elementos do array;
• Esse laço de repetição tem por objetivo processar cada elemento do array, a partir do primeiro elemento (índice ZERO, i = 0) até o penúltimo elemento armazenado (i < arr.length-1);
• Atenção! Se esse laço de repetição processasse até o último elemento o laço seguinte geraria um erro ao tentar acessar o próximo elemento (j = i + 1).

for (var j = i + 1; j < arr.length; j++) { ... };

• Laço de repetição que fará a iteração (repetição sucessiva) do bloco de instruções entre as chaves enquanto o contador (j) for menor que o total de elementos do array;
• Esse laço de repetição tem por objetivo processar cada elemento do array, a partir do elemento seguinte ao elemento representado por i (j = i + 1) até o último elemento armazenado (j < arr.length).

Realizando a ordenação:

• if (arr[ i ] > arr[ j ]) {
  • tmp = arr[ i ];
  • arr[ i ] = arr[ j ];
  • arr[ j ] = tmp;

• Verificará se o elemento do array na posição representado pelo contador i é maior que o elemento representado por j;
• Caso seja maior eles serão trocados de lugar usando a variável tmp para armazenar temporariamente um dos elementos enquanto as suas posições são trocadas;
• Com isso o elemento maior será levado para o final do array.

Resultado no navegador:

Exercício 19
Informe um texto qualquer: 

    
Ordenar

function minhaFuncao() { ... };

• Cria uma função JavaScript (também chamada de método);
• Essa função, ao ser executada, inverterá a sequência de caracteres obtido a partir do valor de um elementos da página.

document.getElementById("nome").value;

• Esse método/função retorna o elemento que possui o atributo id="nome";
• É usado quase toda vez em que se desejar manipular, ou obter informações, de um elemento do documento/página;
• .value retorna o valor/conteúdo do campo/elemento.

return ( ... );

• Após executar as instruções a função, ao final, retornará (return) um resultado para o local de onde a rotina foi chamada.

nome.split('').reverse().join('');

• Esse é um encadeamento de métodos, onde chamamos múltiplos métodos no mesmo elemento (nome), sem ter que procurar o mesmo elemento mais de uma vez.
  
  
• Funciona assim: Nós pegamos a variável nome e transformamos o seu conteúdo em um array. Nesse array invertemos os seus elementos. Por último transformamos esse array em uma cadeia de caracteres que agora estará invertido.

• split('')
  
  
  • Esse método é usado para criar uma matriz (array) a partir de uma cadeia de caracteres;
  • O par de aspas simples, sem espaço entre elas, como argumento do método split('') indica que deve ser retornado cada um dos caracteres separados por vírgula, inclusive os espaços, se houver;
    
    

    Exemplo:

    var nome = 'marcio guillardi';
    var arrNome = nome.split('');

    O conteúdo da variável arrNome será: m,a,r,c,i,o, ,g,u,i,l,l,a,r,d,i

• reverse()
  
  
  • Esse método inverte a ordem dos elementos de uma matriz;
    
    

    Exemplo:

    var nome = 'marcio guillardi';
    var arrNome = nome.split('');
    var arrInvertido = arrNome.inverse();

    O conteúdo da varíavel arrInvertido será: i,d,r,a,l,l,i,u,g, ,o,i,c,r,a,m

  
  
• join('')
  
  
  • Esse método junta todos os elementos de um array em uma sequencia de caracteres;
  • O par de aspas simples, sem espaço entre elas, como argumento do método join('') indica que deve ser retornado cada um dos elementos, sem espaços entre eles e sem as vírgulas;
  • Vamos pegar a variável arrInvertido do exemplo acima:
    
    

    var novaVariavel = arrInvertido.join('');

    O conteúdo da varíavel novaVariavel será: idralliug oicram

<label for="ID">

• Essa TAG define um rótulo para um elemento <input>;
• Esse elemento não apresenta nada de especial para o usuário. No entanto, ele fornece uma melhoria de usabilidade para os usuários do mouse, porque, se o usuário clica sobre o texto dentro desse elemento o elemento <input> receberá o foco/controle.

<button onclick="minhaFuncao()">Clique aqui!</button>

• Cria um botão e atribui a ele uma chamada de função para o evento onclick;
• O evento onclick ocorre quando o usuário clica em um elemento;
• No exemplo dado o evento onclick apresentará uma janela de alerta (alert('mensagem')) onde a 'mensagem' será o valor retornado pela função definida (function inverter() { ... }).

Resultado no navegador:

Exercício 20
Informe um nome qualquer: 


Retrevni (Inverter)