WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação de sites

Guia básico de javascript sem jquery

Publicidade

Com o surgimento de cada vez mais frameworks de javascript como Jquery, Angular e Vue, o javascript ja faz parte da maioria esmagadora dos sites e sistemas online hoje em dia.

Só que alguns dos problemas que surgem com todas esses novos scripts, é o aumento do tempo de carregamento e quantidade de arquivos ao abrir um site, e nesse ponto o javascript puro (também conhecido como Vanilla javascript) é uma ótima opção para aqueles que precisam de scripts leves, que funcionem em qualquer navegador e, principalmente, sem depender de nenhum framework ou arquivo externo.

Conheça nesta páginas algumas das principais funções que o javascript puro tem a oferecer.

Observação: Todas as funções são compatíveis com todos os navegadores, independente da versão.

Selecionar elementos

Uma das funções mais importantes e utilizadas no javascript, pode ser utilizada para selecionar um ou mais elementos através do Id, Classe ou Tag.

EXEMPLO

// Selecionar pelo ID// Retorna o primeiro item que encontrar com a ID informadadocument.getElementById('id');// Selecionar pela classe// Gera uma lista com todos os itens com a classe informada (veja NodeList no final)document.getElementsByClassName('classe');// Selecionar pela tagdocument.getElementsByTagName('tag (div, por exemplo)');// Esta função pode ser utilizada tanto para ID quanto classe (é necessário determinar qual// utilizando '#' para ID e '.' para classes) e retorna o // primeiro item que encontrar que bate com o elemento especificadodocument.querySelector("#id");// Igual a função acima, mas retorna uma lista com todos os elementos encontrados (veja NodeList no final)document.querySelectorAll(".classe");

Manipulando Classes

Durante muito tempo o javascript não possuia funções que conseguissem reconhecer e muito menos manipular classes, mas com tempo perceberam a importância e a necessidade de se trabalhar utilizando estes seletores, e com isso foram criadas as seguintes funções.

EXEMPLO:

// Adicionar classevar ele = document.querySelector('.bloco');ele.classList.add('nova-classe');// Remover uma classevar ele = document.querySelector('.bloco');ele.classList.remove('classe');// Alternar uma classe específicavar ele = document.querySelector('.bloco');ele.classList.toggle('classe');// Verifica se o elemento possui uma classe específicaif (document.querySelector(".bloco").classList.contains("classe")) {  // Chamar código aqui...}

Manipular CSS

Uma das maiores facilidades de se utilizar javascript é a possibilidade de alterar as configurações CSS de um elemento mesmo após o carregamento da página. Veja abaixo alguns exemplos de como utilizar.

EXEMPLO

// Alterar configurações específicas, como cor e brackgroundvar ele = document.querySelector(".bloco");ele.style.color = "#ff0000";ele.style.backgroundColor = "#ffffff";// Exemplo: mostrar ou esconder um elementovar ele = document.querySelector(".bloco");ele.style.display = "none";    // Esconderele.style.display = "block";   // Mostrar// Alterar todos os estilos de uma só vezvar ele = document.querySelector(".bloco");ele.style.cssText = "color: #000; background-color: red";

Criar Elementos

Se você precisa criar elementos dinamicamente em sua página, as funções abaixo permitem que você determine qual elemento será gerado sem a necessidade de códigos complexos.

EXEMPLO

// Criar uma div e adicionar uma classe e um texto dentro delavar ele = document.createElement("div");ele.classList.add("box");ele.textContent = "Text inside box";

Manipulando Eventos

Além de todas as funções citadas acima, uma das mais utilizadas são aquelas que permitem manipular os eventos de qualquer elemento da página, como por exemplo ao clicar em uma div ou escolher uma opção de um select. 

EXEMPLO

// Mostra um alerta ao clicar em um elementodocument.querySelector(".bloco").addEventListener("click", (e) => {    alert('Você clicou neste bloco');});// Mostra um alerta com o valor da opção selecionada do selectdocument.querySelector("#select").addEventListener("change", (e) => {    alert('Opção selecionada: '+ this.value);});

Manipulando Listas (NodeList)

Algumas funções, como getElementsByClassName() e querySelectorAll() selecionam diversos items ao invés de um único, gerando uma lista conhecida como NodeList, e para poder modificar / selecionar todos os itens destas listas, é necessário um método diferente.
Veja abaixo como utilizar este método. 

EXEMPLO

// Adiciona uma classe a todos os itens do NodeListvar someElem = document.querySelectorAll('.bloco');for ( var i = 0; i < someElem.length; i++ ) {    someElem[i].classList.add('classe');}
Publicidade
Postado por: Arthur P. Saborido
Programador Web

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]