Gabriel Medina
Sou front-end developer. Formado em Tecnologia em Análise e Desenvolvimento de Sistemas, pelo Instituto Federal de Mato Grosso do Sul.
JavaScript é a linguagem de programação mais popular no desenvolvimento Web. Suportada por todos os navegadores, a linguagem é responsável por fornecer dinamismo para nossas páginas.
Se usarmos todo o poder que ela tem para oferecer, podemos chegar a resultados impressionantes. Excelentes exemplos disso são aplicações Web complexas como Gmail, Google Maps e Google Docs.
Uma linguagem de scripting é comumente definida como uma linguagem de programação que permite ao programador controlar uma ou mais aplicações de terceiros. No caso do JavaScript, podemos controlar alguns comportamentos dos navegadores.
Não depende de compilação para ser executada. O código é interpretado e executado conforme é lido pelo navegador, linha a linha, assim como o HTML.
O script do programador é enviado com o HTML para o navegador, que diferencia o código script por meio da tag <script>.
// Incorporado no HTML
<script>
alert("Olá, Mundo!");
</script>
// Importando um arquivo .js
<script src="meu-javascript.js"></script>
Alguns navegadores dão suporte a entrada de comandos pelo que chamamos de console. O console nos permite testar códigos diretamente no navegador, sem termos que colocar uma tag <script> na página.
Podemos somar (+), subtrair (-), multiplicar (*) e dividir (/) ou (%), como em qualquer linguagem.
Para armazenarmos um valor para uso posterior, podemos criar uma variável.
var curso = "Introdução a JavaScript";
alert(curso); // Pop-Up: Introdução a JavaScript
Também podemos alterar o valor de uma variável usando essas operações com uma sintaxe bem compacta.
var idade = 10;
idade += 5; // 15
idade *= 2; // 30
Os principais tipos de dados em JavaScript são: string, number e boolean. Há também um tipo complexo chamado object.
Uma string em JavaScript é utilizada para armazenar trechos de texto.
var nome = "Gabriel Medina";
console.log(nome); // Gabriel Medina
Uma variável que armazena um string faz muito mais que isso! Ela permite, por exemplo, consultar o seu tamanho e realizar transformações em seu valor.
var nome = "Gabriel";
console.log(nome.length); // 7
nome.replace("Gabriel", "Medina"); // Medina
String é imutável. Se a variável nome for impressa após a chamada da função replace, o valor continuará sendo “Gabriel”.
nome.replace("Gabriel", "Medina");
console.log(nome); // Gabriel
nome = nome.replace("Gabriel", "Medina");
console.log(nome); // Medina
O JavaScript tem um tipo para tratar de todos os número, o Number.
var vinte = 20;
var pi = 3.14159;
// Conversões
var texto = "10";
var numero = parseInt(texto); // 10
texto = "10.22";
numero = parseFloat(texto); // 10.22
O tipo boolean não traz funções especiais e guarda apenas os valores true e false.
var status = true;
console.log(status); // true
status = false;
console.log(status); // false
Podemos concatenar tipos diferentes de dados. O JavaScript se encarregará de realizar a conversão entre os tipos. Contudo, o resultado pode não sair como esperado.
var nome = "Gabriel";
var sobrenome = "Medina";
console.log(nome + sobrenome); // GabrielMedina
var num1 = 2;
var num2 = 3;
var curso = "JavaScript";
console.log(num1 + curso + num2); // 2JavaScript3
console.log(num1 + num2 + curso); // 5JavaScript
console.log(curso + num1 + num2); // JavaScript23
console.log(curso + (num1 + num2)); // JavaScript5
console.log(10 + "10"); // 20 ou “1010”?
console.log(10 - "Medina"); // E agora José?
O valor NaN ainda possui uma peculiaridade, definida em sua especificação.
var resultado = 10 - "Gabriel"; // retorna NaN
resultado == NaN; // false
NaN == NaN; // false
Não é possível comparar uma variável com NaN, nem mesmo NaN com NaN! Para saber se uma variável é NaN, deve ser usada a função isNaN.
isNaN(resultado); // true
var num1 = 10;
var num2 = 10;
console.log(num1 == num2); // true
console.log(num1 != num2); // false
Ambas retornam um valor booleano. Podemos ainda usar <, <=, >, >=.
console.log(10 >=5); // true
console.log(10 > 10); // false
console.log(10 >= 10); // true
console.log(1 == "1"); // true
O JavaScript também realiza conversões automáticas em comparações. Quando a comparação envolve uma String e um number, ele converte a String em número.
Nem sempre esse é o comportamento desejado, por isso existe o operador ===, que verifica se um objeto é exatamente igual ao outro, isto é, se o seu valor e o tipo são os mesmos.
console.log(1 === "1"); // false
console.log(1 !== "1"); // true
O bloco condicional mais comum é o if que recebe um valor booleano como parâmetro.
var idade = 18;
if(idade >= 18) {
console.log("Pode dirigir!");
} else {
console.log("Vai da merda!");
}
Ainda é possível utilizar os operadores && (E) e o || (OU).
var idade = 18;
var carteira = true;
if(idade >= 18 && carteira) {
console.log("Pode dirigir!");
} else {
console.log("Vai da merda!");
}
O Array é um tipo de objeto do JavaScript que nos permite armazenar diferentes tipos de dados em sua lista.
var carros = ["Uno", "Gol", "Saveiro"];
Um detalhe importante dos arrays é que o primeiro valor recebe o índice 0, o segundo 1 e assim por diante. Sendo assim, se quisermos exibir o nome do primeiro carro da lista, devemos acionar o índice 0.
var carros = ["Uno", "Gol", "Saveiro"];
console.log(carros[0]); // Uno
O object em JavaScript possui uma lista desordenada de tipos de dados primitivos. Cada item da lista é chamado de propriedade e funções são chamadas de métodos.
var carro = {
nome: "Fusca",
ano: "15",
modelo: "16",
cor: "Vermelho"
}
console.log(carro.nome + ' ' + carro.ano + '/' + carro.modelo); // Fusca 15/16
A execução do JavaScript, quando interpretado pelo navegador, é imediata. Ele é executado assim que uma tag <script> é encontrada no documento. No entanto, muitas vezes desejamos definir um comportamento para ser executado em outro momento, inclusive para que possa ser reaproveitado depois. Para isso existem as funções.
A função criada desta forma é chamada de Function Declaration.
function avisaQueEuCheguei(nome) {
return "Vai " + nome;
}
console.log(avisaQueEuCheguei("Safadão!")); // Vai Safadão
Podemos declarar funções como conteúdo de variáveis, numa forma chamada Function Expression.
var avisaQueEuCheguei = function(nome) {
return "Vai " + nome;
};
console.log(avisaQueEuCheguei("Safadão!")); // Vai Safadão
Function Declarations são "içadas" até o topo do script pelo JavaScript. A mesma coisa são feitas com variáveis, mas a diferença é que apenas as declarações são ‘içadas’ até o topo do script e recebem o valor undefined até que a declaração seja interpretada.
var avisaQueEuCheguei;
console.log(avisaQueEuCheguei("Safadão!"));
// Console error: Uncaught TypeError: avisaQueEuCheguei is not a function(…)
var avisaQueEuCheguei = function(nome) {
return "Vai " + nome;
};
Voltando a falar de objetos, podemos adicionar funções (ou tradicionalmente chamado de métodos) aos objetos:
var carro = {
nome: "Fusca"
acelerar: function() {
return "Aí vamos nós!"
},
freiar: function() {
return "Opa, quase lá!"
}
}
console.log(carro.acelerar()); // Aí vamos nós
A única informação necessária para que o bloco for execute é a condição, mas quase sempre utilizamos todas as informações.
for (/* variável de controle */; /* condição */; /* pós execução */) {
// código a ser repetido
}
for (var i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
O bloco while executa determinado código repetitivamente enquanto uma condição for verdadeira. Diferente do bloco for, a variável de controle, bem como sua manipulação, não são responsabilidades do bloco em si.
var contador = 1;
while (contador >= 5) {
console.log(contador); // 1, 2, 3, 4, 5
contador++;
}
var carros = [
{
id: 1,
nome: "Celta"
},
{
id: 2,
nome: "Gol"
},
{
id: 3,
nome: "Corola"
}
];
var id = 2;
carros.forEach(function(carro) {
if(carro.id === id) {
console.log("O carro com id: " + id + " é o " + carro.nome);
// O carro com id: 2 é o Gol
}
});
carros.forEach(function(carro) {
if(carro.id === id) {
console.log("O carro com id: " + id + " é o " + carro.nome);
// O carro com id: 2 é o Gol
break;
}
});
Você consegue identificar um problema no código anterior?
Sim, o bloco de repetição será executado até o final do Array. Seria interessante finalizar essa operação assim que encontrarmos o carro, correto? Para isso, utilizamos a função break.
// JavaScript
var titulo = document.querySelector("#titulo");
console.log(titulo); // <h1 id="titulo">Título da página</h1>
console.log(titulo.textContent); // Título da página
titulo.textContent = "Trocamos o texto do elemento!";
O uso do JavaScript como a principal linguagem de programação da Web só é possível por conta da integração que o navegador oferece para o programador, a maneira com que conseguimos encontrar um elemento da página e alterar alguma característica dele pelo código JavaScript:
<!-- HTML -->
<h1 id="titulo">Título da página</h1>
// JavaScript
var titulos = document.querySelector(".titulo");
console.log(titulo); // <h1 class="titulo">Título da seção</h1>
E se quisermos selecionar um elemento através de sua classe? Sim, a função querySelector recebe como argumento um seletor CSS!
<!-- HTML -->
<h1 class="titulo">Título da seção</h1>
…
<h1 class="titulo">Título da seção</h1>
// JavaScript
var titulos = document.querySelectorAll(".titulo");
console.log(titulos);
// [
// <h1 class="titulo">Título da seção</h1>,
// <h1 class="titulo">Título da seção</h1>
// ]
Parece que só selecionamos o primeiro elemento cujo a classe é igual a "titulo". Para solucionar esse problema existe a função querySelectorAll que retorna uma lista de elementos compatíveis com o seletor CSS passado como argumento.
<!-- HTML -->
<h1 class="titulo">Título da seção</h1>
…
<h1 class="titulo">Título da seção</h1>
var titulo = document.querySelector(".titulo");
titulo.onclick = function() {
this.textContent = "Opa, troquei!";
};
Já sabemos como selecionar elementos da página e manipular suas características. Mas e se nós quisermos alterar o valor de um elemento somente quando o mesmo for clicado?
document
.querySelector(".titulo")
.addEventListener('click', function() {
this.textContent = "Opa, troquei!";
});
A maneira mais recomendada de se associar uma função a eventos é com o uso de addEventListener.
Dessa maneira, conseguimos adicionar vários listeners ao mesmo evento, deixando o código mais flexível. Só há um porém: embora seja o modo oficial de se trabalhar com eventos, o addEventListener não é suportado do IE8 pra baixo.
Paramos por aqui?
O JavaScript esta evoluindo e as novidades são fantásticas.
Quer continuar aprendendo mais?
De uma olhada nas novidades da nova versão do JavaScript (ES6)!
By Gabriel Medina
História que o povo conta; Características da linguagem; Operadores; Variáveis; Tipos de dados; Concatenações; Comparações; Blocos Condicionais; Funções; Blocos de Repetições; Interatividade na Web;
Sou front-end developer. Formado em Tecnologia em Análise e Desenvolvimento de Sistemas, pelo Instituto Federal de Mato Grosso do Sul.