JavaScript

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Desenvolvida por Brendan Eich em 1995, então funcionário da Netscape
Objetivo: prover características "dinâmicas" ao browser
Linguagem de Programação client-side voltada para navegadores web
Atualmente, utilizada para os mais diversos propósitos (web, mobile, server-side, client-side)

Introdução

Principais características:

Linguagem interpretada
Tipagem dinâmica
Sintaxe similar ao Java
Executada por qualquer browser atualmente

Introdução - Exemplos

Seu nome é:

JavaScript - Sintaxe

Similar a linguagem Java
Inclui as principais estruturas de programação (if-else, while, do-while, for, ...)
Ponto-e-vírgula não é obrigatório, porém altamente recomendado

JavaScript - Valores

JavaScript reconhece 5 tipos de valores primitivos:

Tipo	Exemplo
Numbers	`3.14`
Boolean	`true \| false`
Strings	`"Qualquer frase"`
`null`	`null`, duh!?
`undefined`	Valor indefinido

JavaScript - Variáveis

Em JavaScript, as variáveis são dinamicamente tipadas

Isto é, você declara uma variável com tipo var, e então o programa infere seu tipo durante a execução

JavaScript - Variáveis

              
var a = 42;
console.log("a= " + a);
a = "teste";
console.log("a= " + a);

              
var input;
if(input === undefined){
  alert("undefined");
} else {
  alert("defined");
}

Variáveis - Escopo

As variáveis possuem escopo global e local.

Local: Quando definidas dentro de qualquer função
Global: Quando definidas fora de uma função

JavaScript não possui escopo de bloco. Uma variável declarada em um bloco local é visível para a função que contém este bloco.

Variáveis - Escopo

              
if (true) {
  var x = 5;
}
console.log(x);

              
var x = 7;
console.log("Antes da funcao: " + x);
function myFunction() {
  var y = 21;
  console.log("Na Funcao:" + x);
  console.log("Na Funcao:" + y);
}
myFunction();
console.log("Depois da Funcao" + y);

Variáveis - Constantes

Variáveis read-only. Devem ser criadas utilizando a palavra reservada const.

              
const c = 5.15;
console.log(c);

              
function f() {};
const f = 5;
console.log(f);

              
const f = 5;
console.log(f);
f = 3.14;
console.log(f);

Variáveis - Vetores

Os vetores podem ter elementos de vários tipos. Caso não seja declarado um valor para uma determinada posição, o elemento assumirá o valor undefined

          
var nomes = ["Joao", "Maria", "Jose"];
var idade = [25, , 34];
var id = [1223, "RG25632", 19827];

for(i = 0; i < nomes.length; i++) {
  console.log(nomes[i] + " " + idade[i] + " " + id[i]);
}

JavaScript - Operadores

Basicamente, utilizam-se os mesmos operadores que são utilizados em Java e C/C++.
Detalhe para o comportamento dos operadores de comparação, como pode ser visto na tabela abaixo:

Operador	Função	Exemplos verdadeiros
==	Igual	"3" == 3
!=	Diferente	var != 3
===	Estritamente Igual (tipo e valor)	3 === 3
!==	Estritamente Diferente	"3" !== 3

JavaScript - Estruturas de Controle

JavaScript possui as duas estruturas de controle convencionais: if's e switch's

Nota: switch pode ser feito com qualquer tipo primitivo

JavaScript - Estruturas de Controle

              
var login = prompt("Digite seu login");
if(login == "admin") {
  alert("login realizado com sucesso");
} else {
  alert("Falha na autenticação. Deseja tentar novamente?");
}

              
var role = prompt("Digite seu cargo");
switch(role) {
  case "admin":
  alert("Administrador");
  break;
  case "dev":
  alert("Desenvolvedor");
  break;
  case "test":
  alert("Tester");
  break;
  default:
  alert("Não disponível");
}

JavaScript - Estruturas de Repetição

JavaScript posssui as principais estruturas de repetição: while, do-while, e for.

              
var i = 0;
while(true) {
  console.log(i);
  i++;
}

              
var i = 0;
do {
  console.log(i % 10);
  i++;
}while(i%10 != 9);

              
for(i = 0; i < 30; i++) {
  console.log(i);
}

JavaScript: Funções

Funções

Um dos recursos mais poderosos da linguagem
Sintaxe básica: function funcao(arg1, arg2, ..., argN)
Uso de return é opcional
Podem ser atribuída a variáveis

Funções - Declaração

Funções podem ser declaradas de duas formas:

              
function square(number) {
  return number * number;
}
console.log(square(4));

              
var square = function(number) {
  return number * number;
}
console.log(square(4));

Funções - Parâmetros

Não é necessário especificar o tipo do parâmetro (var)
Tipos primitivos: Passagem por valor
Objetos: Passagem por referência
Caso sejam passados mais argumentos que o necessário, os demais são desconsiderados

Funções - Parâmetros

              
var square = function(number) {
  return number * number
};
var x = square(4);

              
function transform(vetor) {
  for(i = 0; i < vetor.length; i++) {
    vetor[i] = vetor[i].toUpperCase();
  }
};
var vetor = ["a", "B", "c"];
console.log(vetor);
transform(vetor, "5");
console.log(vetor);

Funções - Escopo

Como já dito anteriormente, JavaScript delimita escopo por funções (não por blocos)
Variáveis locais: variáveis recebidas como parâmetro ou declaradas por meio de var

Funções - Escopo

            
var x = "outside";

var f1 = function() {
  var x = "inside f1";
};
f1();
console.log(x);

            
var x = "outside";

var f2 = function() {
  x = "inside f2";
};
f2();
console.log(x);

Funções - Escopo Aninhado

JavaScript permite a criação de funções aninhadas

Neste caso, o escopo da função se limita ao nível em que ela foi declarada

Funções - Escopo Aninhado

          
var landscape = function() {
  var result = "";
  var flat = function(size) {
    for (var count = 0; count < size; count++)
    result += "_";
  };
  var mountain = function(size) {
    result += "/";
    for (var count = 0; count < size; count++)
    result += "'";
    result += "\\";
  };

              
  flat(3);
  mountain(4);
  flat(6);
  mountain(1);
  flat(1);
  return result;
};
console.log(landscape());

Funções como valores

Uma das formas de declarar funções é através da forma anônima:

var fac = function (n) { return n < 2 ? 1 : n*fac(n-1) }

Se uma função pode ser armazenada em uma variável, então podemos manipulá-la como uma variável

Funções como valores

            
function map(f,a) {
  var result = [], i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
var mapping = function(x) {
  return x * x * x
};
map(mapping, [0, 1, 2, 5, 10]);

Funções built-in

Nome	Funcionalidade
`eval(str)`	Interpreta uma string como trecho de código JavaScript
`isFinite(number)`	Verifica se um número é finito
`isNaN(testValue)`	Verifica se o valor é NaN
`parseFloat(str)`	Converte uma String para float
`parseInt(str)`	Converte uma String para Int
`Number(objRef)`	Converte um Objeto para Número
`String(objRef)`	Converte um Objeto para String

JavaScript

Estrutura de Dados: Objetos e Arrays

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Numbers, booleans, e strings representam simples tipos de dados

Como representar tipos mais complexos?

Vetores

Opção 01: usar um vetor para armazenar as propriedades do objeto

Vetores: Estrutura de dados que permite armazenar uma coleção de valores

Pode-se armazenar valores de qualquer tipo

Objetos podem ser recuperados por meio de seu índice

Vetores

Declaração: var meuArray = [0, 10, "vinte"]
Uso: console.log(meuArray[2])

                var carro = [];
carro[0] = "Fiat";
carro[1] = "Uno";
carro[2] = 2015;

                console.log("Marca: " + carro[0]);
console.log("\nModelo: " + carro[1]);
console.log("\nAno: " + carro[2]);

Vetores - Funções & Propriedades

Os vetores tem uma série de funções e propriedades

Função/Propriedade	Descrição
`length`	Acessa tamanho do array
`push(var)`	empilha um elemento no array
`pop()`	Desempilha um elemento do array
`join("str")`	Concatena os elementos do array

Vetores - Funções & Propriedades

              
var mack = [];
mack.push("Mack");
mack.push("the", "Knife");
console.log(mack);
// ["Mack", "the", "Knife"]

              
console.log(mack.join(" "));
// Mack the Knife
console.log(mack.pop());
// Knife
console.log(mack);
// ["Mack", "the"]

Objetos

Opção 02: Utilizar um object para armazenar seus valores

object: estrutura de dados que permite manipular uma coleção arbitrária de valores

Os valores são inseridos, lidos e excluídos por meio do nome que lhe é dado

Objetos

Declaração: var meuObjeto = { ... }
Uso: console.log(meuObjeto.minhaPropriedade)

              var meuCarro = {
  marca: "Fiat",
  modelo: "Uno",
  ano: [2014, 2015],
  usado: false
};

              console.log(meuCarro.marca);
console.log(meuCarro.modelo);
meuCarro.usado = true;
console.log(meuCarro.usado);

Objetos - Propriedades

Leitura de propriedades inexistentes retornam undefined

Novas propriedades podem ser adicionadas dinamicamente: obj.novaPropriedade = novoValor

Objetos - Operadores unários

Os objetos possuem alguns operadores unários para lidar com suas propriedades

Operador	Descrição
`delete obj.prop`	Deleta uma determinada propriedade prop
`"prop" in obj`	Verifica se um objeto possui uma propriedade "prop"

Objetos - Mutabilidade

Diferentemente dos tipos primitivos, objetos são mutáveis

Para se mudar, basta mudar uma de suas propriedades

Para se comparar objetos, utilizamos o operador ==

Objetos - Mutabilidade

          var object1 = {value: 10};
var object2 = object1;
var object3 = {value: 10};

console.log(object1 == object2); // true
console.log(object1 == object3); // false

object1.value = 15;
console.log(object2.value); // 15
console.log(object3.value); // 10

JavaScript

Funções de Alta Ordem

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Uma das grandes vantagens das linguagens estruturadas é a capacidade de abstração

Abstração: capacidade de "mostrar" apenas o suficiente ao desenvolvedor

Introdução

As linguagens Estruturadas e Orientadas a Objeto nos dá a possibilidade de abstrair dados

Mas, algumas vezes essas linguagens falham miseralvemente em prover certas abstrações...

Introdução - Exemplo

          function logEach(array) {
for (var i = 0; i < array.length; i++)
  console.log(array[i]);
}
logEach(["Wampeter", "Foma", "Granfalloon"]);

Mas e se eu quiser fazer algo diferente de logging??

Introdução - Exemplo: The JS way

          function forEach(array, action) {
  for (var i = 0; i < array.length; i++)
    action(array[i]);
}

forEach(["Wampeter", "Foma", "Granfalloon"], console.log);

Funções de Alta Ordem

São funções que "trafegam" outras funções em suas chamadas, seja por parâmetro ou retorno

Em outras palavras... capacidade de lidar com funções como valores

Principal Benefício: Permitir abstrações sobre ações, não apenas valores

Funções de Alta Ordem - Exemplo

          function greaterThan(n) {
  return function(m) { return m > n; };
}

var greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));

Funções de Alta Ordem - Exemplo

            function unless(test, then) {
  if (!test) then();
}
function repeat(times, body) {
  for (var i = 0; i < times; i++) body(i);
}

repeat(3, function(n) {
  unless(n % 2, function() {
    console.log(n, "is even");
  });
});

Funções de Alta Ordem

Funções de alta ordem são especialmente úteis em situações onde há transformação de dados

Filtragem de elementos
Transformação de elementos
Sumarização de valores
Composição

Filtragem de Elementos

Tem como objetivo filtrar elementos de uma coleção com base em um critério

Parâmetros devem ser a coleção e o próprio critério

Se elemento não for aprovado no criétio, então é descartado

          function filter(array, test) {
  var passed = [];
  for (var i = 0; i < array.length; i++) {
    if (test(array[i]))
      passed.push(array[i]);
  }
  return passed;
}

var vet = [2, 4, "6", 8, 10, "Nome", undefined];
var result = filter(vet, function(elem) {
  return elem % 2 == 0;
});
console.log(result);

Transformação de Elementos

Transforma os elementos de um array em outro array por meio de uma função de transformação

Parâmetros devem ser a coleção e a função de transformação

          function map(array, transform) {
  var mapped = [];
  for (var i = 0; i < array.length; i++)
    mapped.push(transform(array[i]));
  return mapped;
}

var vet = [
            {nome: "João", idade: 28}, 
            {nome: "Vanessa", idade: 35}, 
            {nome: "Carlos", idade: 15}
          ];
console.log(map(vet, function(person) {
  return person.nome;
}));

Sumarização de Elementos

Sumariza os valores de uma coleção de modo a obter uma informação relevante

Parâmetros devem ser a coleção e a função de sumarização

          function reduce(array, combine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++)
    current = combine(current, array[i]);
  return current;
}

var vet = [1, 2, 3, 4];
var result = reduce(vet, function(a, b) {
                return a + b;
              }, 0);
console.log(result / vet.length);

Composição

Funções de alta ordem permitem a composição de funções

Dessa forma, você pode combinar as funções pré-existentes para criar processamentos totalmente customizados com mínimo esforço

          function average(array) {
  function plus(a, b) { return a + b; }
  return array.reduce(plus) / array.length;
}
function idade(p) { return p.idade; }
function homem(p) { return p.sexo == "M"; }
function mulher(p) { return p.sexo == "F"; }

var vet = [
            {nome: "João", idade: 28, sexo: "M"}, 
            {nome: "Vanessa", idade: 35, sexo: "F"}, 
            {nome: "Carlos", idade: 15, sexo: "M"}
          ];
console.log(average(vet.filter(homem).map(idade)));
console.log(average(vet.filter(mulher).map(idade)));

Custo

A flexibilidade e elegância das funções de alta ordem vêm a custo da eficiência do programa

Tais soluções são menos eficientes em termos de tempo e espaço

Motivo: adiciona-se camadas (chamadas de funções) desnecessárias para a manipulação direta do elemento

Custo

Contudo, geralmente tal perda não é percebida em uma aplicação web

Quantidade de dados controlados
Otimizações dos compiladores existentes
Implementação em outras linguagens

JavaScript & DOM

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

DOM: Document Object Model

Padrão para representar os objetos de um documento XML
Documento é representado por meio de uma árvore
Cada nó da árvore representa um elemento do documento
Permite visualizar toda estrutura do documento (organização, hierarquização, etc.)

DOM: Documento Object Model

            
<!doctype html>
<html>
  <head>
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>
      I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>
    .</p>
  </body>
</html>

JavaScript & DOM

JavaScript fornece meios para que alteremos o DOM
Dessa forma é possível implementar uma página com comportamento dinâmico e fluído.
DOM pode ser acessado por meio da variável document

          
var link = document.body.getElementsByTagName("a")[0];
console.log(link.href);

JS & DOM: Navegando pela Estrutura

Todo nó existente no DOM possui uma série de atributos que ajudam na navegação da árvore
Por meio desses atributos, podemos acessar os nós que são, filhos, pai, e vizinhos de um determinado nó

JS & DOM: Navegando pela Estrutura

            
function talksAbout(node, string) {
  var count = 0;
  for (var i = 0; i < node.childNodes.length; i++) {
    var childNode = node.childNodes[i];
    if(childNode.childNodes.length > 0)
      count += talksAbout(childNode, string);
    else if(childNode.nodeValue != null &&
            childNode.nodeValue.indexOf(string) > -1)
      count ++;
  }
  return count;
}

JS & DOM: Encontrando Elementos

Também é possível recuperar elementos diretamente, sem que seja necessário percorrer toda a árvore do DOM:

Me dê todos os nós que são links da página
Recupere o elemento que possui id="footer"
Liste os elementos que possuem class="lead"

JS & DOM: Encontrando Elementos

            
var links = document.body.getElementsByTagName("a");

var header = document.getElementById("header");

var slides = document.getElementsByClassName("slide");

JS & DOM: Alterando Elementos

Quase toda estrutura do DOM pode ser alterada dinamicamente
JavaScript provê algumas funções para tal:

removeChild(child)
appendChild(child)
insertBefore(elem1, elem2)

JS & DOM: Alterando Elementos

            
<p>One</p>
<p>Two</p>
<p>Three</p>

<script>
var paragraphs = document.body.getElementsByTagName("p");
document.body.insertBefore(paragraphs[2], paragraphs[0]);
</script>

One

Two

Three

JS & DOM: Criando Novos Elementos

Existem 5 tipos de nós no HTML DOM:

Element
Attribute
Text
Comment
Document

Para se criar um elemento HTML novo, deve-se criar o respectivo nó para este elemento (Element), junto de suas propriedades (Attribute, Text)

JS & DOM: Criando Novos Elementos

Funções
`createElement(elem)`
`createAttribute(attr)`
`createTextNode(text)`
`createComment(comm)`
`createDocumentFragment()`

            
var p = document.createElement("p");
var node = document.createTextNode("This is new.");
var attr = document.createAttribute("style");
attr.value = "background-color:red;";
p.setAttributeNode(attr);
p.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(p);

JS & DOM: Query Selectors

Também é possível selecionar elementos no DOM utilizando o selector syntax (CSS)
Os elementos podem ser recuperados por meio de duas funções:

querySelector(selector): Seleciona o primeiro elemento que se encaixa na descrição de selector
querySelectorAll(selector): Seleciona todos os elementos que se encaixam na descrição de selector

JS & DOM: Query Selectors

            
function count(selector) {
  return document.querySelectorAll(selector).length;
}
console.log(count("p"));
console.log(count(".slide"));
console.log(count("div ul"));
console.log(count("div > ul"));

JS & DOM pt.2: Eventos

HTML DOM fornece meios para executar trechos de código JavaScript em determinadas condições
Dessa forma, podemos implementar funções JavaScript que respondam a determinadas ações do usuário

JS & DOM pt.2: Eventos

            
<div id="example_box" onclick="toggleColor();">
Click me!!
</div>
<script charset="utf-8">
var color = "red";
function toggleColor() {
  var newColor = color == "red" ? "blue" : "red";
  color = newColor;
  document.getElementById("example_box").style.backgroundColor = newColor;
}
</script>

Click me!!

JS & DOM pt.2: Eventos

Os eventos podem ser customizados de duas formas: (a) atributos HTML; (b) HTML DOM;

          
<button onclick="displayDate()">Try it</button>
<script>
document.getElementById("myBtn").onclick = function(){ displayDate() };
</script>

Eventos: onclick

Habilitado quando o usuário clica sobre o elemento

              
<button name="btn_onclick_example"
  onclick="onclickExample();">Click me!!</button>

<script>
function onclickExample() {
  alert("BOOOOOMMMM!!!");
}
</script>

Eventos: onload & onunload

Disparado no momento em que o usuário entra e sai da página, respectivamente.

              
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>

Carregando...

Eventos: onchange

Executado quando o valor de um elemento é modificado. Ideal para validação de campos.

              
Digite seu nome:<br>
<input type="text" id="fname" onchange="upperCase()">
<script>
function upperCase() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

Digite seu nome:

Eventos: onmouseover & onmouseout

Disparado quando o mouse passa sobre o objeto.

              
<img src="images/chaves.jpg" alt=""
    onmouseover="mOver(this)" onmouseout="mOut(this)" />
<script>
function mOver(obj) {
  obj.property.src = "images/pao_presunto.jpg";
}
function mOut(obj) {
  obj.property.src = "images/chaves.jpg";
}
</script>

Eventos: onmousedown & onmouseup

Disparado quando o usuário pressiona/solta o mouse em um determinado elemento.

              
<div onmousedown="mDown(this)" onmouseup="mUp(this)">Click Me</div>
<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "Solte Me";
}
function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="AEWW!!";
}
</script>

Click Me

Referências

Eloquent JavaScript, Marjin Haverbeke

JavaScript Guide - Mozilla Developer Network

JavaScript Reference - Mozilla Developer Network

JavaScript Tutorial - w3schools