Introdução a JavaScript

História que o povo conta

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.

Introdução a JavaScript

Características da linguagem

É uma linguagem de scripts

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.

Introdução a JavaScript

Características da linguagem

É uma linguagem interpretada

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.

Introdução a JavaScript

A tag <script>

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>

Introdução a JavaScript

O console é seu amigo

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.

Introdução a JavaScript

Operadores

Podemos somar (+), subtrair (-), multiplicar (*) e dividir (/) ou (%), como em qualquer linguagem.

Introdução a JavaScript

Variáveis

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

Introdução a JavaScript

Variáveis

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

Introdução a JavaScript

Tipos de dados

Os principais tipos de dados em JavaScript são: string, number e boolean. Há também um tipo complexo chamado object.

Introdução a JavaScript

Tipos de dados

String

Uma string em JavaScript é utilizada para armazenar trechos de texto.

var nome = "Gabriel Medina";
console.log(nome); // Gabriel Medina

Introdução a JavaScript

Tipos de dados

String

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

Introdução a JavaScript

Tipos de dados

String

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

Introdução a JavaScript

Tipos de dados

Number

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

Introdução a JavaScript

Tipos de dados

Boolean

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

Introdução a JavaScript

Concatenações

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

String com String

Introdução a JavaScript

Concatenações

String com outros tipos de dados

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é?

Introdução a JavaScript

Tipos de dados

NaN (not a number)

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

Introdução a JavaScript

Comparações

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

Introdução a JavaScript

Comparações

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

Introdução a JavaScript

Blocos Condicionais

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!");
}

Introdução a JavaScript

Blocos Condicionais

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!");
}

Introdução a JavaScript

Tipos de dados

Array

O Array é um tipo de objeto do JavaScript que nos permite armazenar diferentes tipos de dados em sua lista.

var carros = ["Uno", "Gol", "Saveiro"];

Introdução a JavaScript

Tipos de dados

Array

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

Introdução a JavaScript

Tipos de dados

Object

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

Introdução a JavaScript

Funções

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.

Introdução a JavaScript

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

Introdução a JavaScript

Funções

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

Introdução a JavaScript

Funções

Hoisting

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;
};

Introdução a JavaScript

Tipos de dados

Object

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

Introdução a JavaScript

Blocos de repetições

For

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
}

Introdução a JavaScript

Blocos de repetições

While

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++;
}

Introdução a JavaScript

Cenário

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
  }
});

Introdução a JavaScript

Cenário

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.

Introdução a JavaScript

Interatividade na Web

// 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>

Introdução a JavaScript

Interatividade na Web

// 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>

Introdução a JavaScript

Interatividade na Web

// 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>

Introdução a JavaScript

Interatividade na Web

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?

Introdução a JavaScript

Interatividade na Web

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.

Introdução a JavaScript

Interatividade na Web

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.

Introdução a JavaScript

Isso é tudo pessoal?

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)!

Introdução a JavaScript

Obrigado!