JavaScript

Desenvolvimento de Aplicativos Web - COLTEC/MG

JavaScript

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Introdução

Introdução - Exemplos

Seu nome é:

JavaScript - Sintaxe

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.

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

OperadorFunçãoExemplos verdadeiros
==Igual"3" == 3
!=Diferentevar != 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

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

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

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

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

NomeFuncionalidade
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

Desenvolvimento de Aplicativos Web - COLTEC/MG

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

                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

              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

Desenvolvimento de Aplicativos Web - COLTEC/MG

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

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

JavaScript & DOM

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

DOM: Document Object Model

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

          
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

JS & DOM: Encontrando Elementos

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

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

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

JS & DOM: Alterando Elementos

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:
    1. Element
    2. Attribute
    3. Text
    4. Comment
    5. 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

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

JS & DOM pt.2: Eventos

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