Aprenda Javascript

Tudo sobre Javascript Parte 2

Trabalhando com Páginas

Se quisermos trabalhar com abertura de páginas no Javascript, usamos o location seguido do link, ele redirecionará automaticamente (ou dentro de uma função ou condicional), dessa forma:


function voltar() {
    history.go(-1);
}
function ir() {
    location = "https://www.google.com.br";
}
function inicio() {
    location = "index.html";
}

Para recarregar uma página, podemos usar o location.reload(), assim:


function recarregar() {
    location.reload();
}

Para criarmos janelas pop-ups em Javascript, usamos o open, dessa forma:


function abrir() {
    open("https://www.google.com.br/", "teste", "resizable = no, scrollbars = no, width = 250, height = 350");
}
// Parâmetros do open ("link", "nome da janela", "parâmetros (tipo CSS)")

Os parâmetros do open, são o link, seguido do nome da janela e do estilo (parecido com CSS, só que com atribuições de = e separados por vírgulas. Se colocar apenas o link sem parâmetros, ele apenas abrirá a página numa nova guia.

PS: Se quiser colocar um parâmetro pra fechar, podemos criar outra função, colocando o open numa variável, assim:


var popSite;
    
function abrir() {
    popSite = open("https://www.google.com.br/", "teste", "resizable = no, scrollbars = no, width = 250, height = 350");
}
function fechar() {
    popSite.close();
}

Esse código serve pra pegar o sistema operacional do usuário:


var plataforma = navigator.platform;
var dados = navigator.oscpu;

alert(`Sistema operacional: ${plataforma}\n${dados}`);

Código Javascript no Console do Navegador

Podemos por exemplo, abrir o site do Google na página inicial, ir no inspencionar elemento do navegador e ir em console, clique para limpar o excesso de código e digite esses comandos:


alert("Olá Mundo!")

document.body.style.background = "black"

O primeiro comando mostra um alerta e o segundo muda o fundo da página para preto.

Clique na setinha e nela clique na imagem do logo para ver o nome da tag e ID/Class dela (no caso é img#hplogo), e digite isso no console:


document.querySelector("img#hplogo").style.filter = "grayscale(100%)"

Esse comando acima deixa o logo em preto e branco.

Esse comando aqui some com o logo do Google:


document.querySelector("img#hplogo").style.visibility = "hidden"

Podemos entrar num site qualquer, como o G1 e ir num título de uma matéria, pegue o nome da tag e ID/Class dele (com a seta) e coloque esse código:


document.querySelector("span.bstn-h1-title").innerText = "O melhor curso de Javascript do Youtube!"

Manipulando objetos HTML pelo ID - Parte 1

Para manipular objetos, usamos o método document.getElementById(). Dentro dos parênteses, colocamos o ID do objeto entre aspas (por exemplo, uma imagem).

Veja um exemplo de semáforo em Javascript:


function vermelho() {
    document.getElementById("farol").src = "imagens/sinal-vermelho.png";
}
function amarelo() {
    document.getElementById("farol").src = "imagens/sinal-amarelo.png";
}
function verde() {
    document.getElementById("farol").src = "imagens/sinal-verde.png";
}

Links de chamadas dos códigos acima:


<input type="button" onclick="vermelho()" id="vermelho" class="semaforo" value="Pare"/>
<input type="button" onclick="amarelo()" id="amarelo" class="semaforo" value="Atenção"/>
<input type="button" onclick="verde()" id="verde" class="semaforo" value="Siga"/>

Ou simplificando, com um parâmetro:


function sinal(estado) {
    document.getElementById("farol").src = "imagens/" + estado + ".png";
}

E com os botões apenas assim:


<input type="button" onclick="sinal('sinal-vermelho')" id="vermelho" value="Pare"/>
<input type="button" onclick="sinal('sinal-amarelo')" id="amarelo" value="Atenção"/>
<input type="button" onclick="sinal('sinal-verde')" id="verde" value="Siga"/>

PS: Após o método, se coloca "src" para trabalhar com arquivos ou links. E "value" para valores (como os passados por um formulário). Outros dados de uma tag, como href, title e outros também podem ser trabalhados.

Manipulando objetos HTML pelo ID - Parte 2

Continuando, vamos escrever esse código, que nesse caso, trabalhará com o value:


function custoGas() {
    var precoGas = document.getElementById("cPreG").value;
    var totalGas = document.getElementById("cTotG").value;
    var litroGas = parseFloat(totalGas) / parseFloat(precoGas);
    document.getElementById("cLitG").value = litroGas.toFixed(3);
}

HTML do código acima:


<form method="get" oninput="custoGas()">
    <p>Total a Pagar: R$<input type="number" name="tTotG" id="cTotG" min="0" step="0.01" value="0"/></p>
    <p>Litros <input type="number" name="tLitG" id="cLitG" min="0" step="0.001" value="0"/></p>
    <p>Preço p/ Litro: R$<input type="number" name="tPreG" id="cPreG" step="0.001" value="3.099" readonly/></p>
</form>

Você pode passar parâmetros dentro das funções também, veja nesse exemplo, que usamos eventos pra acender, apagar e quebrar uma lâmpada (nesse caso os caminhos dos arquivos ficam sendo parte dos parâmetros):


var quebrada = false;
function mudaLampada(tipo) {
    if(!quebrada) {
        document.getElementById("luz").src = "imagens/" + tipo + ".jpg" ;
        if(tipo == "lampada-quebrada") {
            quebrada = true;
        }
    }
}

No código HTML, ficaria assim:


<img src="imagens/lampada-apagada.jpg" onmouseover="mudaLampada('lampada-acesa')" onmouseout="mudaLampada('lampada-apagada')"
onclick="mudaLampada('lampada-quebrada')" id="luz"/>

Também podemos usar variáveis nos parâmetros getElementById, nas atribuições dos mesmos.

Também podemos usar isso para validar formulários em HTML, veja um exemplo:


function validar() {
    // Use let ao invés de var em funções
    let nome = document.getElementById("cNome").value;
    let mail = document.getElementById("cMail").value;
    let mens = document.getElementById("cMsg").value;
    
    if(nome == "") {
        alert("Você deve preencher o campo 'Nome Completo'!");
        document.getElementById("cNome").focus();
        return false;
    }
    else if(mail == "") {
        alert("Você deve preencher o campo 'E-mail'!");
        document.getElementById("cMail").focus();
        return false;
    }
    else if(mens == "") {
        alert("Você deve preencher o campo 'Sua Mensagem'!");
        document.getElementById("cMsg").focus();
        return false;
    }   
}

PS: O Método focus() pode ser usado normalmente no getElementById().

Para isso basta invocar a função colocando um onclick no botão "Enviar", ou mesmo colocar cada função num onblur em cada input.

O mesmo método acima pode ser usado usando os names ao invés das ids dos inputs, dessa forma:


function validar() {
    let nome = document.nameFormulario.nameInputNome.value;
    let mail = document.nameFormulario.nameInputMail.value;
    let mens = document.nameFormulario.nameTextareaMsg.value;
    
    if(nome == "") {
        alert("Você deve preencher o campo 'Nome Completo'!");
        document.nameFormulario.nameInputNome.focus();
        return false;
    }
    else if(mail == "") {
        alert("Você deve preencher o campo 'E-mail'!");
        document.nameFormulario.nameInputMail.focus();
        return false;
    }
    else if(mens == "") {
        alert("Você deve preencher o campo 'Sua Mensagem'!");
        document.nameFormulario.nameTextareaMsg.focus();
        return false;
    }   
}

PS: Podemos colocar, logo após o value, o método trim() para remover espaços desnecessários.

Podemos também pegar elementos pelo nome da tag usando o document.getElementsByTagName() (atenção que o Elements tá no plural), dessa forma:


var tags = document.getElementsByTagName("title"); // Isso recebe todos os elementos das tags especificadas, que serão colocados num vetor.

document.write(tags[0].innerHTML); // Isso exibe tudo que tiver na tag especificada, contada a partir do zero.

Podemos também pegar pelo name dos conteúdos HTML usando document.getElementByName().

O innerHTML pode ser utilizado para pegar ou alterar o que estiver dentro de duas tags (por exemplo, tudo que está dentro de uma tag p ou h2). Por exemplo:


var pegaElemento = document.getElementById("texto").innerHTML;

alert(pegaElemento);

PS: Podemos colocar, no lugar do nome da tag, o asterisco (*), para pegar elementos de todas as tags da página. E lembre-se também que o código Javascript nesse caso, deve vir depois das tags especificadas senão não funciona.

Outro exemplo de uso de innerHTML para alterar conteúdos das tags:


document.getElementsByTagName("h1")[0].innerHTML = "Novo";

Isso é usado principalmente para mudar elementos de tags que não aceitam elementos value como a tag p, e podemos usar isso para mudar elementos de textos utilizando um evento, por exemplo.

Existem outras opções para pegar dados como o da classe (document.getElementsByClassName()).

Veja um exemplo de Olá Mundo usando esse recurso:


<h1 id="saida"></h1>

<script>
document.getElementById("saida").textContent = "Olá, Mundo!";
</script>

Identificando e convertendo dados

O operador typeof é usado pra identificar tipos de dados e variáveis, por exemplo:


document.write(typeof "Música" + "<br/>");
document.write(typeof 395.21 + "<br/>");
document.write(typeof 14 + "<br/>");
document.write(typeof true + "<br/>");

Para converter números em strings usamos o método String(), por exemplo:


var n = 40;
document.write("A variável n é do tipo " + typeof n + ".<br/>");
n = String(n);
document.write("A variável n agora é do tipo " + typeof n + ".<br/>");
document.write("Valor de n: " + n + "<br/>");

O método String() também pode ser usado pra converter valores lógicos para string, por exemplo:


var b = false;
document.write("A variável b é do tipo " + typeof b + ".<br/>");
b = String(b);
document.write("A variável b agora é do tipo " + typeof b + ".<br/>");
document.write("Valor de b: " + b + "<br/>");

Podemos também usar o método toString() do objeto, exemplo:


var n = 40;
document.write("A variável n é do tipo " + typeof n + ".<br/>");
n = n.toString();
document.write("A variável n agora é do tipo " + typeof n + ".<br/>");
document.write("Valor de n: " + n + "<br/>");

Para converter strings em números, usamos o método Number(), por exemplo:


var a = "15";
var b = "21.6";
document.write("A variável a é do tipo " + typeof a + ".<br/>");
document.write("A variável b é do tipo " + typeof b + ".<br/>");
a = Number(a);
b = Number(b);
document.write("A variável a agora é do tipo " + typeof a + ".<br/>");
document.write("A variável b agora é do tipo " + typeof b + ".<br/>");
document.write("Valor de a: " + a + ".<br/>");
document.write("Valor de b: " + b + ".<br/>");

Pode se converter uma string específica para um número inteiro usando o método parseInt() (que só converte os números inteiros) e o parseFloat() (que mantém as casas decimais, e pode ser usada com inteiros também), como já visto acima, exemplo:


var a = "20";
document.write("A variável a é do tipo " + typeof a + ".<br/>");
a = parseInt(a);
document.write("A variável a agora é do tipo " + typeof a + ".<br/>");
document.write("Valor de a: " + a + ".<br/>");
var b = "14.85";
document.write("A variável b é do tipo " + typeof b + ".<br/>");
b = parseFloat(b);
document.write("A variável b agora é do tipo " + typeof b + ".<br/>");
document.write("Valor de b: " + b + ".<br/>");

Quando usamos números de ponto flutuante, podemos controlar a exibição de casas decimais com o método toFixed(), com o número de casas desejadas entre os parênteses, por exemplo:


var a = 25.3;
alert("O valor é de " + a.toFixed(2));

Podemos também controlar o número máximo de casas com o método toPrecision() (só que esse limita todos os números, não apenas os decimais), usando da mesma forma do toFixed() por exemplo:


var a = 13.4;
alert("O valor é de " + a.toPrecision(4));

PS: Temos também o método charAt(), que retorna o caractere da posição específica da string (do índice especificado). Veja um exemplo:


var frase = "Uma frase qualquer!";
document.write(frase);
document.write("<br/>Primeiro caractere: " + frase.charAt(0));
document.write("<br/>Último caractere: " + frase.charAt(frase.length - 1));

PS: Observe que o atributo length do objeto string retorna a quantidade de caracteres do mesmo.

Podemos usar a função substring() para pegar partes desejadas de uma string, por exemplo:


var frase = "Uma frase qualquer!";
var cont = 0;
alert(frase.substring(0, 9));
alert(frase.substring(10, frase.length));

Temos também o replace para substituir partes de uma string, por exemplo:


var dinheiro = "R$ 125,94";

var grana = parseFloat(dinheiro.replace(",", ".").replace("R$", "").trim());

alert(typeof grana);

document.write(grana);

PS: Esse método só substitui apenas uma ocorrência. Para substituir todas as ocorrências, use replaceAll(), da mesma forma.

E este pode ser aplicado também assim, para remover, por exemplo, caracteres não-numéricos:


var entrada = prompt("Digite o CPF:");

var strCpf = entrada.replace(/[^\d]+/g, "").trim();

alert(strCpf);

O eval() é uma função que avalia ou executa um argumento. Se o argumento for uma expressão, ele avalia a expressão. Se o argumento for uma ou mais declarações JS, ele executa as instruções. Veja um exemplo:


var x = eval(prompt("Digite um número:")) + eval(prompt("Digite outro número:"));
alert(x);

A grosso modo, ele serve pra pegar números (por exemplo, de um input ou prompt) em strings e tratar como numbers, se for passado outro caractere, ele não executará (mas é bom não exagerar no uso disso).

Para formatar moedas, podemos fazer assim:


var money = 96848.50;
alert(money.toLocaleString("pt-BR", {style: "currency", currency: "BRL"})); // Pra Dólar é USD e pra Euro é EUR

Podemos verificar também se um número é nulo, usando isNaN(), assim:


var res = Math.sqrt(-1);

if(isNaN(res)) {
    alert("Não é possível tirar raiz de número negativo!");
}
else {
    alert("A raiz é " + res + ".");
}

Podemos também usar os métodos toLowerCase() e toUpperCase() para converter as letras para minúsculas e maiúsculas, respectivamente, dessa forma:


var minus = "abc";

document.write(minus.toUpperCase());

document.write("<br/>");

var maius = "DEF";

document.write(maius.toLowerCase());

Temos vários outros métodos para manipular strings, como podem ver:


var frase = "Isso é uma String";

document.write(`${frase.split("").reverse().join("")}<br/>`); // Inverte a frase, o split separa em caracteres (com delimitador definido entre aspas) e joga num array, o reverse inverte e o join junta tudo de novo numa string

document.write(`${frase.concat(" e ela foi concatenada!")}<br/>`); // Concatena com mais algo

document.write(`${frase.split("")}<br/>`); // O argumento é o divisor da string, ele joga num array, podemos dividir letras e palavras

document.write(`${frase.includes("String")}<br/>`); // Verifica se existe uma palavra na string