JavaScript

Resumo javascript (conceitos, operadores, chamada de funções, loops, estruturas condicionais etc.) - Publicado em Abril/2020.

Usamos Javascript para "adicionar comportamentos" no HTML, acrescentando lógica para produzir páginas dinâmicas, sendo que existem maneiras distintas de carregar um script:

1. Através de um arquivo externo com o script (carregado via tag "SCRIPT"):
   

   <script type="text/javascript" src="script.js"></script>

2. Diretamente no HTML da página:

   <script type="text/javascript">
    Script........
   </script>

3. Diretamente no elemento HTML para acrescentar alguma funcionalidade em resposta a um evento:

   <button onclick='javascript:alert("Bem Vindo")'> Alerta </button>

Importante:
- Usar ";" ao final de cada instrução;
- Observar que a página é renderizada sequencialmente e os scripts são executados a cada renderização, a menos para as funções que somente serão executadas através de chamadas específicas;

Operadores

Atribuição: x = y;
Adição: x += y ou x = x + y;
Subtração: x -= y ou x = x - y;
Multiplicação: x *= y ou x = x * y;
Divisão: x /= y ou x = x / y;
Resto: x %= y ou x = x % y;
Exponencial: x **= y ou x = x ** y;
Bit-a-bit (deslocamento á esquerda): x <<= y ou x = x << y;
Bit-a-bit (deslocamento á direita): x >>= y ou x = x >> y;
Bit-a-bit (deslocamento á direita não assinado): x >>>= y ou x = x >>> y;
And: x &= y ou x = x & y;
Xor: x ^= y ou x = x ^ y;
Or: bit-a-bit: x |= y ou x = x | y;
Not: ~ x;
Igual: == ;
Não igual: != ;
Estritamente igual: === (operandos sejam iguais e do mesmo tipo);
Estritamente não igual: !== (operandos não sejam iguais e/ou não sejam do mesmo tipo);
Maior que: > ;
Maior que ou igual: >= ;
Menor que: < ;
Menor que ou igual: <= ;
Módulo: %;
Incremento: ++;
Decremento: --;

Contatenação de strings e números

Textos concatenados com números convertidos para string:

var texto2="......" + texto + 2 + texto;
texto2: ......um texto qualquer.....2um texto qualquer.....

Textos concatenados com números primeiramente somados e depois convertidos para strings:

var texto2="......" + texto + (2 + 1) + texto;
texto2: ......um texto qualquer.....3um texto qualquer.....

Vetores

var letra1="a";
var letras = [letra1, "b", "c"]
for(var i=0; i<letras.length; i++){
    alert (letras[i]);
}

If, else if

var num1=0;
if(num1<10) {
  texto="menor que 10...";
} else if(num1>10 & num1<=20 ) {
  texto="entre 11 e 20...";
} else {
  texto="maior que 20";
}

Switch case

var resposta="K";
var letra="j"
switch(letra){
    case "A":
        resposta="A";
        break;
    case "B":
        resposta="B";
        break;
    default:
        resposta="N";
        break;
}

While

num=0;
while (num<2){
    alert(num);
    num += 1;
}

For

num=0;
//i=i+1 ou i+=1
for(var i=0; i<2; i++){
    alert(i);
}

Funções

function mensagem(msg,msg1){
    alert(msg + " " + msg1);
}
mensagem("mensagem qquer!","msg1");

var numero = prompt("Digite um número:", "");
alert(numero)

function soma(a,b){
    return a+b;
}
c=soma(2,3);
alert(c);

Interação javascript com HTML e CSS

O objeto "document" representa a nossa página na sua totalidade.

1. Procurando elementos:
   document.getElementById(id), document.getElementsByTagName(name), document.getElementsByClassName(name);
2. Modificando elementos:
   element.innerHTML, element.attribute, element.style.property, element.setAttribute(attribute, value);
3. Adicionando e removendo elementos:
   document.createElement(element), document.removeChild(element), document.appendChild(element), document.replaceChild(new, old), document.write(text);
4. Adicionando manipulador de eventos:
   document.getElementById(id).onclick = function(){code}

Muito importante observar a possição do script no HTML para não procurarmos por um um elemento antes de ser renderizado, por exemplo, com um script no HEAD (ou mesmo em um arquivo externo carregado no HEAD). Abaixo exemplo de utilização para alterar um estilo e inserir conteúdo no HTML:

<script type="text/javascript">
var a = document.getElementsByTagName("button");
alert(a.length);
a[2].addEventListener("click",mudarCorDeFundo);
a[2].addEventListener("click",adicionarConteudo);
function mudarCorDeFundo() {
    document.getElementsByTagName("body")[0].style.backgroundColor = "#FF5555";
}
function adicionarConteudo() {
    document.getElementById("divConteudo").innerHTML = "Conteúdo a adicionar.....";
}
</script>

OBSERVAÇÕES:

1. Quando buscamos um elemento pelo nome da tag, é criado um vetor com os elementos encontrados, logo precisamos saber exatamente qual dos elementos queremos manipular e passar o índice do mesmo;
2. Atentar que existe uma pequena diferença quando usamos o "addEventListener", onde passamos o "nome do evento" (click no exemplo), e não "on_evento";