JavaScript

Prof. Alan Ferreira dos Santos

Introdução ao JavaScript

O JavaScript

  • Linguagem Client Side
  • Interpretada pelo navegador do usuário
  • Interage com elementos HTML
  • Interage com CSS
  • Torna os sites dinâmicos
  • Tem recursos como toda linguagem
  • Compacto e flexível

O JavaScript

Interfaces de apps no navegador

Funcionalidades de apps de terceiros

Bibliotecas de terceiros e Frameworks de Desenvolvimento

Javascript não é Java

JavaScript Interno

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        alert('Meu primeiro código em Javascript');
    </script>
</head>
<body>
    
</body>
</html>

JavaScript Externo

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script type="text/javascript" src="js/javascript-externo.js"></script>
  </head>
  <body>
  </body>
</html>

alert('Meu primeiro código em Javascript');

Conteúdos Dinâmicos

//Retorna o primeiro elemento descendente do elemento em que a função foi invocada e que corresponde aos seletores especificado. 
var square = document.querySelector('#resultMessage');

square.innerHTML = 'Conteúdo <em>carregado</em> dinâmicamente';

CSS Dinâmico

var square = document.querySelector('#resultMessage');

/*
 * backgroundColor corresponde à propriedade CSS background-color
 * 
 * JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele 
 */

square.style.backgroundColor = '#777';
square.style.border = '2px solid #999';

Atributos Dinâmicos

var button = document.querySelector('.btn');

// o método setAttribute atribui um valor (2º parâmetro) para o atributo desejado (1º parâmetro)
button.setAttribute('disabled', true);

// o método removeAttribute remove o atributo desejado
button.removeAttribute('disabled');

Classes Dinâmicas

var button = document.querySelector('.btn');

/*
 * classList é uma propriedade somente leitura que retorna uma coleção de classes definidas em um elemento
 * 
 * https://developer.mozilla.org/pt-BR/docs/Web/API/Element/classList
 */
var classList = button.classList;

// adicionar uma classe
classList.add('btn-danger');

// remover uma classe
classList.remove('btn-danger');

// verificar se a classe está definida
classList.contains('btn-danger');

Eventos

/*
 * Utilizados para detectar determinadas ações durante a navegação do usuário
 * 
 * https://developer.mozilla.org/pt-BR/docs/Web/Events
 */ 
document.querySelector('#btnCarregar').onclick = function (e) {
  var square = document.querySelector('#resultMessage');

  square.innerHTML = 'Conteúdo carregado dinâmicamente';
};

Funções

// Função é um fragmento de código que pode ser invocado por outro código, por si mesmo ou uma variável que se refere à função
function carregarConteudo() {
  var square = document.querySelector('#resultMessage');

  square.innerHTML = 'Conteúdo carregado dinâmicamente';
}

document.querySelector('#btnCarregar').onclick = function (e) {
  carregarConteudo();
};

Sintaxe

Sintaxe

// Pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.

// É case-sensitive e usa o conjunto de caracteres Unicode;
var Variável = 'Variável';

// Por isso as variáveis abaixo são diferentes Variável é diferente de variável;

//Instruções são separadas por um ponto e vírgula (;)
var car = 'Fusca'; 
console.log(car);

Comentários

// Comentário de única linha

/*
Comentários de 
múltiplas linhas
*/

Declarações de Variáveis

// Declara uma variável, podendo ou não inicializá-la
var variavelComum = 'valor';

// Declara uma variável de escopo de bloco, podendo ou não inicializá-la
let variavelDeBloco = 'valor';

// Declara uma constante de escopo de bloco, apenas para leitura
const constanteDeBloco = 'valor';

// Possibilidades de declaração
let _exemploNomeVariavel;
let $exemploNomeVariavel;
let ExemploNomeVariavel;
let exemploNomeVariavel123;

Estrutura de Dados e Tipos

// Boolean
let ativo = true || false;

// Null
let nome = null;

// Undefined
let sobrenome;

// Number
let idade = 18 || 18.123;

// String
let cidade = "Campo Mourão";

// Object
let pessoa = {
    nome: "Fulano",
    sobrenome: "de Tal",
    idade: 18,
    cidade: "Campo Mourão"
}
pessoa['peso'] = 80.5;
pessoa = { ...pessoa, altura: 175 }

// Array
let numeros = [1, 2];
numeros.push(3);
numeros = [ ...numeros, 4 ];
let animais = ["Cachorro", "Gato", "Potó"];
let pessoas = [pessoa];

Conversão de Dados

// Converte uma string em inteiro
parseInt("1");

// Converte uma string em float
parseFloat("1.2");

// Conversões dinâmicas:
// Converte um número em texto por atribuição
var resposta = 42;
resposta = "Texto da resposta";

// Converte um número em texto por concatenação (+)
var resposta = "A resposta é " + 42;

Operadores de Atribuição

var a = 1;

// Atribuição de adição
a += 1;

// Atribuição de subtração
a -= 1;

// Atribuição de multiplicação
a *= 1;

// Atribuição de divisão
a /= 1;

Operadores de Comparação

var a = 1;

// Igual
a == 1;

// Não igual
a != 1;

// Estritamente igual
a === 1;

// Estritamente diferente
a !=== 1;

// Maior
a > 1;

// Maior que ou igual
a >= 1;

Operadores de Aritiméticos

var a = 1;

// Adição
a + 1;

// Subtração
a - 1;

// Multiplicação
a * 1;

// Divisão
a / 1;

// Módulo
a = 5 % 2;

// Incremento
a++;

// Decremento
a--;

Operadores Lógicos

var a;

// E lógico
a = true && true;

// Ou lógico
a = true || false;

// Negação lógica
a = !true;

Operadores de String

var a = "Meu" + " " + "Texto";

Operadores Ternários

var idade = 18
var status = idade >= 18 ? "adulto" : "menor de idade";

Condicionais

Condicionais

  • Permitem a tomadas de decisão na linguagem de programação

if...else

if (condicao) {
  //codigo para executar caso a condição seja verdadeira
}

if (condicao) {
  //codigo para executar caso a condição seja verdadeira
} else {
  //senão, executar este código
}

else if

if (condicao) {
  //codigo para executar caso a condição seja verdadeira
} else if (outraCondicao) {
  //codigo para executar caso a outra condição seja verdadeira
}

if (condicao) {
  //codigo para executar caso a condição seja verdadeira
} else if (outraCondicao)  {
  //codigo para executar caso a outra condição seja verdadeira
} else {
  //senão, executar este código
}

Regra sobre true/false

// Variáveis com os valores abaixo sempre serão falsas
false
undefined
null
0
NaN

// Qualquer outro valor será verdadeiro
true
"texto"
1
[]
{}

switch

  • Ótima para pequenos trechos de código;
  • Código limpo; 

switch

let numero1 = 1;
let numero2 = 1;
let operacao;
let resultado;

switch (operacao) {
  case 'adicao':
    resultado = numero1 + numero2;
    break;
  case 'subtracao':
    resultado = numero1 - numero2;
    break;
  case 'divisao':
    resultado = numero1 / numero2;
    break;
  case 'multiplicacao':
    resultado = numero1 * numero2;
    break;
  default:
    // Opcional
    resultado = ''; 
    break;
}

Laços e Iterações

Laços e Iterações

  • Permitem repetir ações
  • Permitem percorrer coleções

for

var repeticoes = 5;

for (var i = 1; i <= repeticoes; i++) {
  console.log("Repetindo pela " + i + "º vez");
}

while

var repeticoes = 5;
var i = 0;

while (i <= repeticoes) {
  i++;
  console.log("Repetindo pela " + i + "º vez");
}

for...of

var carros = [
  {
    modelo: "Cruze",
    ano: 2012
  },
  {
    modelo: "Fusca",
    ano: 1987
  }
];

for (let carro of carros) {
  console.log(carro.modelo);
}
// Cruze, Fusca

for...in

var carros = [
  {
    modelo: "Cruze",
    ano: 2012
  },
  {
    modelo: "Fusca",
    ano: 1987
  }
];

for (let index in carros) {
  console.log(index);
  
  let carro = carros[index];
  
  carro = {
    ...carro,
    vendido: true
  };
  
  carros[index] = carro;
}

console.log(carros);