javascript - principais conceitos
TRANSCRIPT
JavaScriptPrincipais conceitos
Prof: Sérgio Souza Costa
Sobre mim
Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)
https://sites.google.com/site/profsergiocosta/home
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta
http://www.slideshare.net/skosta/presentations?order=popular
Interfaces de usuário
Interfaces de usuário
Estrutura
Interfaces de usuário
Estrutura
Apresentação
Interfaces de usuário
Estrutura
Apresentação
Comportamento
Interfaces de usuário
Estrutura: HTML
Apresentação: CSS
Comportamento: JavaScript
Interfaces de usuário
Estrutura: HTML
Apresentação: CSS
Comportamento: JavaScript
Vantagens
Acessibilidade
Portabilidade
Manutenabilidade
JavaScript
JavaScript
● Linguagem imperativa:○ similar a 90% das linguagens, Java, C++, Ruby,
Smalltalk, ...
JavaScript
● Linguagem imperativa:○ similar a 90% das linguagens, Java, C++, Ruby,
Smalltalk, ...● Linguagem de script
○ similar a diversas linguagens, como Lua, Python, PHP ...
JavaScript
● Linguagem imperativa:○ similar a 90% das linguagens, Java, C++, Ruby,
Smalltalk, ...● Linguagem de script
○ similar a diversas linguagens, como Lua, Python, PHP ...
● Linguagem dinâmica, como as maioria das linguagens de script○ Lua, Python, PHP ...
JavaScript
● Linguagem imperativa:○ similar a 90% das linguagens, Java, C++, Ruby,
Smalltalk, ...● Linguagem de script
○ similar a diversas linguagens, como Lua, Python, PHP ...
● Linguagem dinâmica, como as maioria das linguagens de script○ Lua, Python, PHP ...
● Linguagem integrada aos browser, usada para manipular os "objetos html"
JavaScript
Como surgiu ??
JavaScript
● Inicialmente com o nome de Cmm (C menos menos) e depois ScriptEase.
JavaScript
● Inicialmente com o nome de Cmm (C menos menos) e depois ScriptEase.
● Netscape usa o projeto em seu Browser, nomeando como LiveScript e depois JavaScript.
JavaScript
● Inicialmente com o nome de Cmm (C menos menos) e depois ScriptEase.
● Netscape usa o projeto em seu Browser, nomeando como LiveScript e depois JavaScript.
● Não é derivada do Java, o nome pode ter sido usado como estratégia de marketing.○ Microsoft incorpora no teu browser com outro nome
- JScript.
JavaScript - 1996
● Falta de padronizações entre os browser● Uso excessivo de animações com JavaScript
○ Os desenvolvedores ainda não sabiam utilizar este novo recurso
● Principal uso do JavaScript era na validação de formulários e para enviar alertas ao usuários
JavaScript - 1996
● Falta de padronizações entre os browser● Uso excessivo de animações com JavaScript
○ Os desenvolvedores ainda não sabiam utilizar este novo recurso
● Principal uso do JavaScript era na validação de formulários e para enviar alertas ao usuários
Tempos depois ...Netscape apresentou o JavaScript para ECMA
International para a padronização resultando na versão padronizada chamado ECMAScript.
JavaScript - 1996
Um "hello world" a la decada de 90
<html><body>
<script type="text/javascript">document.write("<p>Hello World!</p>");</script>
</body></html>
JavaScript - 1996
Um "hello world" a la decada de 90
<html><body>
<script type="text/javascript">document.write("<p>Hello World!</p>");</script>
</body></html>
A forma de usar JavaScript evolui muito desde a decada de 90.
Unido com a evolução de outras tecnologias, por exemplo, DOM, CSS ...
Modelo de programação JavaScript
Modelo de programação JavaScript
1. Problema
Modelo de programação JavaScript
1. Problema 2. Google
Modelo de programação JavaScript
1. Problema 2. Google
3. Encontra
Modelo de programação JavaScript
1. Problema 2. Google
3. Encontra4. Control-C e Control-V
Modelo de programação JavaScript
1. Problema 2. Google
3. Encontra4. Control-C e Control-V
Modelo de programação JavaScript
1. Problema 2. Google
3. Encontra4. Control-C e Control-V
Copy, paste e run
Não preciso saber programar, eu uso plugins, bibliotecas.... Detalhes de programação é coisa de Nerd … Se bem ….
Que tal este código ? é so JavaScript
$(document).ready(function(){$("#p1").mouseenter(function(){
$.ajax({ url: "endereco_web", success: function(html){ $("#a1").html(html); }})})
})
Conseguem entender ? ou copy and paste
Que tal este código ? é so JavaScript
$(document).ready(function(){$("#p1").mouseenter(function(){
$.ajax({ url: "endereco_web", success: function(html){ $("#a1").html(html); }})})
})
Conseguem entender ? ou copy and paste
Isto não é uma sintaxe
específica do Jquery, é apenas
JavaScript
Saber Java Script facilitará o uso das bibliotecas e APIs emJava Script.
Saber Java Script permitira INOVAR sua interface com o usuário.
Saber Java Script facilitará o uso das bibliotecas e APIs emJava Script.
Saber Java Script permitira INOVAR sua interface com o usuário.
Saber Java Script facilitará o uso das bibliotecas e APIs emJava Script.
Ou .. precisará esperar a Google fazer, e alguem copiar, e você usar.
Saber Java Script permitira INOVAR sua interface com o usuário.
Saber Java Script facilitará o uso das bibliotecas e APIs emJava Script.
Ou .. precisará esperar a Google fazer, e alguem copiar, e você usar.
Se precisa focar no negocio, use bibliotecas e seja produtivos.
Saber Java Script permitira INOVAR sua interface com o usuário.
Saber Java Script facilitará o uso das bibliotecas e APIs emJava Script.
Ou .. precisará esperar a Google fazer, e alguem copiar, e você usar.
Se precisa focar no negocio, use bibliotecas e seja produtivos.
Fiquem atento, usar plugins você não inova.
Já ouviram falar em HTML 5 ?
Já ouviram falar em HTML 5 ?
É em grande parte novas APIs Java Script
Já ouviram falar em HTML 5 ?
É em grande parte novas APIs Java Script
GeoLocation
Já ouviram falar em HTML 5 ?
É em grande parte novas APIs Java Script
GeoLocation Canvas
Já ouviram falar em HTML 5 ?
É em grande parte novas APIs Java Script
GeoLocation Canvas
WebGL
Já ouviram falar em HTML 5 ?
É em grande parte novas APIs Java Script
GeoLocation Canvas
WebGLStorage
APIS google são escritas em Java Script
var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737) ];
bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#FF0000", fillOpacity: 0.35 });
bermudaTriangle.setMap(map);
Google Maps API
APIS google são escritas em Java Script
Microsoft adotou o Java Script no Windows 8
Windows 8 – Metro
APIS google são escritas em Java Script
Microsoft adotou o Java Script no Windows 8
Uma alternativa para o desenvolvimento de aplicativos para dispositivos móveis
Com a vantagem de ter um app compativel com o Android e IOS
APIS google são escritas em Java Script
Microsoft adotou o Java Script no Windows 8
Uma alternativa para o desenvolvimento de aplicativos para dispositivos móveis
Alicerce para a "nova" Web - AJAX
"Considered a “toy” language by serious web developers for most of its lifetime, Java-Script has regained its prestige in the past few years as a result of the renewed interest in Rich Internet Applications and Ajax technologies".
John Resig - jQuery in Action
"Combining a functional style with prototypal inheritance JavaScript is arguably the most widely deployed language of either type. Considering that virtually every computer user has an interpreter capable of running it, JavaScript serves to be one of the best languages to learn."
John Resig - Criador do JQuery
"Considered a “toy” language by serious web developers for most of its lifetime, Java-Script has regained its prestige in the past few years as a result of the renewed interest in Rich Internet Applications and Ajax technologies".
John Resig - jQuery in Action
Modelo control-c e control-v não é suficiente, precisamos saber usar e dominar a linguagem.
Modelo control-c e control-v não é suficiente, precisamos saber usar e dominar a linguagem.
Vamos ver alguns conceitos que nos preparam para usar e entender o JQuery
1. Saber Programar
1. Saber Programar
2. Conhecer a LINGUAGEM
1. Saber Programar
2. Conhecer a LINGUAGEMSintaxe
1. Saber Programar
2. Conhecer a LINGUAGEMSintaxe Semântica
1. Saber Programar
2. Conhecer a LINGUAGEMSintaxe Semântica Pragmática
1. Saber Programar
2. Conhecer a LINGUAGEM
Sintaxe Semântica Pragmática
3. Conhecer suas APIs
1. Saber Programar
2. Conhecer a LINGUAGEM
Sintaxe Semântica Pragmática
3. Conhecer suas APISDOM BOM
1. Saber Programar
2. Conhecer a LINGUAGEM
3. Conhecer suas APIS
1. Saber Programar
2. Conhecer a LINGUAGEM
3. Conhecer suas APIS
1. Saber Programar
2. Conhecer a LINGUAGEM
3. Conhecer suas APIS
1. Saber Programar
2. Conhecer a LINGUAGEM
3. Conhecer suas APIS
Como uso o Java Script nas minhas páginas ?
Baixem o template - HTML
Opção 1: Inline Javascript – Bad
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body>
<a href="javascript:alert('BOO Bad way')"> Click</a></body></html>
Opção 2: Embedded Javascript – Good
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title>
<script type="text/javascript" >function faca_algo(){
alert ("OK")}</script>
</head><body><a href="#" onclick ="faca_algo()" > Click</a></body></html>
Opção 2: Embedded Javascript – Good
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title>
<script type="text/javascript" >function faca_algo(){
alert ("OK")}</script>
</head><body><a href="#" onclick ="faca_algo()" > Click</a></body></html>
Opção 3: Embedded Javascript – Best
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="fool.js" ></script></head><body><a href="#" onclick ="faca_algo()" > Click</a></body></html>
function faca_algo(){alert ("OK")
}
Firebug: A principal ferramenta
Chrome e Safari possuem recursos nativos similares.
● Funções javascript para recuperar objetos do browser
● Não é padronizado
● API DOM x API BOM○ http://www.w3schools.com/jsref/default.asp
BOM – Browser Object Model
BOM – Browser Object Model
● Screen● Width● Height
● Histórico● Back● Forward● Go
● Localização● Href● Protocol
● Janelas:● Alert● Confirm● Prompt
● Navegador● Plataform● userAgent
DOM
DOM CORE
DOM HTML DOM XML DOM JAVA
DOM
DOM CORE
DOM HTML DOM XML DOM JAVA
● O DOM apresenta documentos como uma hierarquia de objetos Nós que também implementam outras interfaces mais especializadas.
● Alguns tipos de nós pode ter nós filhos de vários tipos, e outros são nós folha que não tem nada abaixo deles na estrutura do documento.
DOM Core
DOM Core
TABLE Nó raiz
Nó filho de table
Nó● filho de <TR>● neto de table
Nó folha
● A interface nó é o tipo primário para todo DOM.
● Ele representa um nó na árvore de documento.
DOM Core
DOM Core
○ parentNode○ hasChildNodes○ firstChild○ lastChild○ previousSibling○ nextSibling○ hasAttributes○ attributes
DOM Core
○ cloneNode○ createTextNode○ removeChild○ insertBefore○ replaceChild○ appendChild
○ parentNode○ hasChildNodes○ firstChild○ lastChild○ previousSibling○ nextSibling○ hasAttributes○ attributes
DOM Core
○ cloneNode○ createTextNode○ removeChild○ insertBefore○ replaceChild○ appendChild
Apenas informativo, usaremos uma
biblioteca sobre o DOM (Jquery)
● Além de acessar os nós pela estrutura da árvore, é possível fazer esse acesso também utilizando as funções abaixo:○ getElementById();○ getElementsByName();○ getElementsByTagName();
Interface - Element
Usaremos apenas estes métodos nos exercicios mais a
frente.
● http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1312295772
● http://www.howtocreate.co.uk/tutorials/javascript/domstructure
Saber Mais
1. Saber Programar
2. Conhecer a LINGUAGEM
3. Conhecer suas APIS
1. Saber Programar
2. Conhecer a LINGUAGEM
3. Conhecer suas APIS
Conhecer a linguagem facilita
entender e usar as APIS
Conhecendo JavaScript....
JavaScript é uma linguagem de programação
JavaScript é uma linguagem de programação
JavaScript ≠ Java
JavaScript
● Inicialmente com o nome de Cmm (C menos menos) e depois ScriptEase.
● Netscape usa o projeto em seu Browser, nomeando como LiveScript e depois JavaScript.
● Não é derivada do Java, o nome pode ter sido usado como estratégia de marketing.
● Microsoft incorpora no teu browser com outro nome - JScript.
Ranking das Linguagens do lado do cliente
Java Script
Principais características exploradas nas aplicações ricas da internet.
Os tipos são dinâmicos, polimorfismo “gratuito”. Não preciso de herança e nem templates.
Funções são valores de primeira classe, tratadas como qualquer outro valor.
Linguagem Imperativa
Linguagem Imperativa
Variáveis
Linguagem Imperativa
Variáveis Valores
Linguagem Imperativa
Variáveis Valores
Atribuição
Linguagem Imperativa
Variáveis Valores
Atribuição
Estado
Linguagem Imperativa
VariáveisValores
Atribuição
Estado
É igual a todas as outras linguagens
que conheço
Sintaxe
●Inspirada em C, como Java e C++
for (var i = 0; i < 10; i++) {if (algumaCoisa) {
break;}
}
Sintaxe
●Inspirada em C, como Java e C++
for (var i = 0; i < 10; i++) {if (algumaCoisa) {
break;}
}
É igual a todas as outras linguagens
que conheço
Principais Elementos
●Variáveis
Variáveis
●Nome●Tipo●Valor
Variáveis
●Nome●Tipo●Valor
Variáveis
●Nome●Tipo●Valor
Tipo
Tipo
●Dinamicamente tipada
Tipo
●Dinamicamente tipada○Os tipos das variaveis são definidos em tempo
de execução.○Dependendo dos seus valores
Tipo
●Dinamicamente tipada○Os tipos das variaveis são definidos em tempo
de execução.○Dependendo dos seus valores
A variável se “ajusta“ ao seu conteúdo
Tipo
●Dinamicamente tipada○Os tipos das variaveis são definidos em tempo
de execução.○Dependendo dos seus valores
A variável se “ajusta“ ao seu conteúdo
Não era assim as linguagens que
conhecia.
Tipos Dinâmicos - Vantagens
Tipos Dinâmicos - Vantagens
Códigos menores + Funções aplicadas a diferentes
valores
Tipos Dinâmicos - Vantagens
Códigos menores + Funções aplicadas a
diferentes valores
Tipos Dinâmicos - Vantagens
Códigos menores + Funções aplicadas a diferentes
valores
= +Produtivade
Tipos Dinâmicos - Vantagens
Códigos menores + Funções aplicadas a diferentes
valores
= +Produtivade
=+Manutenabilidade
Tipos Dinâmicos - Vantagens
Códigos menores + Funções aplicadas a diferentes
valores
= +Produtivade
=+Manutenabilidade
=+Legibilidade
Tipos Dinâmicos - Vantagens
Códigos menores + Funções aplicadas a diferentes
valores
= +Produtivade
=+Manutenabilidade
=+Legibilidade
Tipos Dinâmicos - Desvantagens
Tipos Dinâmicos - Desvantagens
Códigos poucos seguros
Tipos Dinâmicos - Desvantagens
Códigos poucos seguros Baixa
eficiência
Tipos Dinâmicos - Desvantagens
Códigos poucos seguros
Baixa eficiência
Mais disciplina nos testes
Tipos Dinâmicos - Desvantagens
Códigos poucos seguros
Baixa eficiência
Mais disciplina nos testesSaiba o que está fazendo. O compilador nao poderá te ajudar muito.
Tipos Dinâmicos - Desvantagens
Códigos poucos seguros
Baixa eficiência
Mais disciplina nos testesSaiba o que está fazendo. O compilador nao poderá te ajudar muito.
Declarando
Muito fácil
var a = 12;var b = {animal:”cat”,age:10};var c = true;...
Nome Valor
Declarando
Muito fácil
var a = 12;var b = {animal:”cat”,age:10};var c = true;...
Nome Valor
Tipo de uma váriavel é tipo de seu valor corrente
Declarando
●Muito fácil
var a = 12;var b = {animal:”cat”,age:10};var c = true;...
Nome Valor
Tipo de uma váriavel é tipo de seu valor corrente
Qual a função do “var“
Vamos ver ....
<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" >function teste (){
a = 20b = 10
}teste()console.log (a, b)</script><title></title></head><body>
</body></html>
Tipos - JavaScript
Tipos - JavaScript
Sim. Uma variável pode ser do tipo função... very nice...
Primitivo X Referência
Primitivo X Referência
PONTEIROSSSNÂOOOOO....
Cópia X Referencia
Vamos verificar ....
<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" >var p1 = {x:10, y: 20};var p2 = p1;p2.x = 50;p2.y = 80;console.log (p1, p2)</script><title></title></head><body></body></html>
Relax .. Veremos sobre objetos mais a frente …
Cópia X Referencia
●Tipos primitivos○cópia
●Tipos compostos○referência
Referência
Referência
Similar a diversas outras linguagens como Java, Lua, Ruby ...
typeof
●As vezes é necessário saber qual o tipo de uma determinada variavel
○Identificação de erros
Tipos primitivos
●Numéricos → inteiro ou real○10, 10.5, 12.1, 0
●Booleanos ○False, True
●null and undefined
Tipos primitivos
●Numéricos → inteiro ou real○10, 10.5, 12.1, 0
●Booleanos ○False, True
●null and undefined
Nada muito diferente das linguagens que ja conhecem.
type casting – Conversão explícita
●parseFloat()●parseInt()●Object.toString()
Exercício – “Somadora”Jogo dos X erros, ☺ tentem encontrar
Conversão
●Conhecendo as regras de coerção
var myPi = “3.1415”;var result = myPi - 1.1;
var myPi = “3.1415”;var result = myPi + 1.1;
Conversão
●Conhecendo as regras de coerção
var myPi = “3.1415”;var result = myPi - 1.1;
var myPi = “3.1415”;var result = myPi + 1.1;
Conversões automáticas são conhecidas como coerção
Conversão
●Conhecendo as regras de coerção
var myPi = “3.1415”;var result = myPi - 1.1;
var myPi = “3.1415”;var result = myPi + 1.1;
Conversões automáticas são conhecidas como coerção
È um tipo de polimorfimos adhoc
Conversão
●Outros exemplos
var result1 = 1 + true;var result2 = 1 + false;var result3 = “true” + true;var result4 = null + true;var result5 = undefined + 0;var result6 = undefined + “0“ ;
String
●Primitivo ○Não é um array de caracter○Imutável
●Métodos e propriedades como objeto○length, substring, toLowerCase, charAt, concat
var a = “alo“var b = a[0]a[0] ='o'
String Funções
●charAt(x) Retorna o character da posicao "x" dentro da string.
●charCodeAt(x) Retorna o valor Unicode do caractere na posicao “x" dentro da string.
●concat(v1, v2,...) Combina uma ou mais strings (argumentos v1, v2 etc) dentro de outra sem modificar a string original.
●indexOf(substr, [start]) Procura e se encontrar retorna o indice do caractere procurado. Se não for encontrado nada, -1 será retornado. "Start" até um argumento opcional que especifica a posição inicial dentro da string que será feita a pesquisa. O valor padrão até 0.
●lastIndexOf(substr, [start]) Procura e se encontrar retorna o índice do caractere procurado, a pesquisa começa do fim para o início. Se não for encontrado nada, -1 será retornado. "Start" até um argumento opcional que especifica a posição inicial dentro da string que será feita a pesquisa. O valor padrão até -1.
●string.length - retorna o tamanho da string (quantidade de bytes)
●substring(index1, index2) - retorna o conteúdo da string que corresponde ao intervalo especificado. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.
Funções
Funções
function nome(args){códigos;}
function dobro(x){return 2*x;}
nome =function (args){códigos;}
dobro = function (x){return 2*x;}
Funções
function nome(args]){códigos;}
function dobro(x){return 2*x;}
nome =function (args]){códigos;}
dobro = function (x){return 2*x;}
Não é muito diferente do que eu
já fazia.
O que é diferente ?
O que é diferente ?
Funções são valores de primeira ordem.
E dái ?
E dái ?
Vamos ver ...
Parâmetro de função
function twice (f, a) { return f (f (a))}
function dobra (a) {return 2* a}
console.log (twice (dobra, 4))
Funções anônimas
function twice (f, a) { return f (f (a))}console.log (twice(function (x) {return 2*x;}, 4 ))
Funções anonimas como parametros
●Exemplo JQuery
Retorno de função - Closures
●Exemplo
function add (x) {return function (y) {return y+x}}
add1 = add (1)console.log (add1(10))
Retorno de função - Closures
●Exemplo
function add (x) { return function (y) { return y+x }}
add1 = add (1)console.log (add1(10))
Esses recursos é encontrado na maioria das linguagens modernas: python, ruby, lua ...
Funções – Número de argumentos indefinido
function f () { for (i in arguments ) { console.log (i) }} f (1,2)
Sobrecarga de funções
Sobrecarga é um tipo de polimorfismo muito útil e existente em diversas linguagens, mas não existe nativamente em JavaScript
Sobrecarga de funções
Sobrecarga é um tipo de polimorfismo muito útil e existente em diversas linguagens, mas não existe nativamente em JavaScript
○Pode ser simulada
Simulando sobrecarga
●Sobrecarga é um tipo de polimorfismo muito útil e existente em diversas linguagens, mas não existe nativamente em JavaScript
○Pode ser simulada■Verificando quais argumentos que foram realmente
passados■Se argumento é nulo ou verificando o numero de
argumentos (arguments.length)■Verificando os tipos dos argumentos
Simulando sobrecarga
●Não existe checagem de argumentos passados a uma função, então todos argumentos são opcionais.
function f (arg) { if (arg) console.log (arg) else console.log (“ola mundo“)}f("oi") f()
Simulando sobrecarga
function f (arg) { if (arguments.length != 0) console.log (arg) else console.log ("ola mundo")}f("oi") f()
Simulando sobrecarga
●Não existe checagem de argumentos passados a uma função, então todos argumentos são opcionais.
function f (arg) { if (arg) console.log (arg) else console.log (“ola mundo“)}f("oi") f()
Simulando sobrecarga
function f (arg) { if (arguments.length != 0) console.log (arg) else console.log ("ola mundo")}f("oi") f()
É possivel ainda checar os tipos para decidir qual função usar.
Simulando sobrecarga
●Não existe checagem de argumentos passados a uma função, então todos argumentos são opcionais.
function f (arg) {if (arg) console.log (arg)elseconsole.log (“ola mundo“)}f("oi") f()
Simulando sobrecarga
function f (arg) {if (arguments.length != 0) console.log (arg)elseconsole.log ("ola mundo")}f("oi") f()
É possivel ainda checar os tipos para decidir qual função usar.
Parametros padrão
function f(par) { par = par || 1 console.log(par)}
Não sei para que tanto conceito inútil ....
O Criador do Jquery (veremos logo) não pensou assim, sua biblioteca faz exausto uso de:
Closures
Funções de primeira Ordem
“Sobrecarga”
Funções anônimas
Tipos Compostos
●Arrayvar a = [1,2,3]
●Objectvar o = {nome: “joao“, idade:25}
chave
valor
Não tem muitas diferenças
Tipos Compostos
●Arrayvar a = [1,2,3]
●Objectvar o = {nome: “joao“, idade:25}
chave
valor
Não tem muitas diferenças
Objeto são como vetores que podem ter chave diferente de inteiro
Tipos Compostos
●Arrayvar a = [1,2,3]
●Objectvar o = {nome: “joao“, idade:25}
chave
valor
Não tem muitas diferenças
Objeto são como vetores que podem ter chave diferente de inteiro
Em Lua, por exemplo, não existe essa distinção.
Array
var a = [1,2,3,4]for (v in a) { console.log (v)}
Funções sobre Array
●concat() Joins two or more arrays, and returns a copy of the joined arrays
●join() Joins all elements of an array into a string
●pop() Removes the last element of an array, and returns that element
●push() Adds new elements to the end of an array, and returns the new length
reverse() Reverses the order of the elements in an array
●shift() Removes the first element of an array, and returns that element
●slice() Selects a part of an array, and returns the new array
●sort() Sorts the elements of an array
●splice() Adds/Removes elements from an array
Object - Valor
var o = {chave1 : valor1, chave2 : valor2 }
Valores podem ser de qualquer dos valores existentes em JavaScript: numericos, string, funções, arrays ou objetos
Object
●Simular orientação a objetos
var person = new Object();person.name = “Nicholas”;person.age = 29;person.job = “Software Engineer”;
person.sayName = function(){ Console.log(this.name);};
person.sayName()
Object
●Simular orientação a objetos
var person = new Object();person.name = “Nicholas”;person.age = 29;person.job = “Software Engineer”;
person.sayName = function(){ Console.log(this.name);};
person.sayName()
Sempre que criar um novo „person“, terei que escrever a função sayName ?
Object
●Simular orientação a objetos
var person = new Object();person.name = “Nicholas”;person.age = 29;person.job = “Software Engineer”;
person.sayName = function(){Console.log(this.name);};
person.sayName()
Sempre que criar um novo „person“, terei que escrever a função sayName ?Crie uma
função para fazer isso.
Object
●Melhorando o modelo anteriorfunction createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o;}var person1 = createPerson(“Nicholas”, 29, “Software Engineer”);var person2 = createPerson(“Greg”, 27, “Doctor”);
Object
●Melhorando o modelo anteriorfunction createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;}var person1 = createPerson(“Nicholas”, 29, “Software Engineer”);var person2 = createPerson(“Greg”, 27, “Doctor”);
Linguagens orientadas a objeto ja deram uma solução melhor para isso. QUAL ?
Object
●Melhorando o modelo anteriorfunction createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;}var person1 = createPerson(“Nicholas”, 29, “Software Engineer”);var person2 = createPerson(“Greg”, 27, “Doctor”);
Linguagens orientadas a objeto ja deram uma solução melhor para isso. QUAL ?Funções
Construtoras
Construindo Objetos
function Person(name, age, job){this.name = name;this.age = age;this.job = job;this.sayName = function(){alert(this.name);};}
var person1 = new Person(“Nicholas”, 29, “Software Engineer”);var person2 = new Person(“Greg”, 27, “Doctor”);
Construindo Objetos
function Person(name, age, job){this.name = name;this.age = age;this.job = job;this.sayName = function(){alert(this.name);};}
var person1 = new Person(“Nicholas”, 29, “Software Engineer”);var person2 = new Person(“Greg”, 27, “Doctor”);
Tem algo que não me parece está ok. O que vocês acham ?
Prototype
function Person(name, age, job){this.name = name;this.age = age;this.job = job;}
Person.prototype.sayName = function(){alert(this.name);};
var person1 = new Person("Nicholas", 29,"Software Engineer");var person2 = new Person("Greg", 27, "Doctor");Console.log (person1.sayName == person2.sayName )
Prototype
function Person(name, age, job){this.name = name;this.age = age;this.job = job;}
Person.prototype.sayName = function(){alert(this.name);};
var person1 = new Person("Nicholas", 29,"Software Engineer");var person2 = new Person("Greg", 27, "Doctor");Console.log (person1.sayName == person2.sayName )
Prototype permite extender as funcionalidades de um objeto, ex: plugins do Jquery
Prototype
function Person(name, age, job){this.name = name;this.age = age;this.job = job;}
Person.prototype.sayName = function(){alert(this.name);};
var person1 = new Person("Nicholas", 29,"Software Engineer");var person2 = new Person("Greg", 27, "Doctor");Console.log (person1.sayName == person2.sayName )
E se eu tiver varios métodos para este objeto ? Vou ter que repetir Person.prototype.x = ...
Prototype – Notação compacta
●Como está construindo um novo objeto, precisamos definir o „constructor“
Person.prototype = {constructor: Person,sayName: function(){alert(this.name);}}
Getters e Setters
function Pessoa (name) { this._name = name; } Pessoa.prototype = {constructor: Pessoa, getName : function(){ return (this._name); }, setName : function(name){this._name = name; }}
var p = new Pessoa ("sergio")console.log (p.getName())p.setName ("joao")console.log (p.getName())
Getters e Setters
function Pessoa (name) { this._name = name; } Pessoa.prototype = {constructor: Pessoa, getName : function(){ return (this._name); }, setName : function(name){this._name = name; }}
var p = new Pessoa ("sergio")console.log (p.getName())p.setName ("joao")console.log (p.getName())
Como sobrecarga pode ajudar ?
Getters e Setters
function Pessoa (name) { this._name = name; } Pessoa.prototype = {constructor: Pessoa, getName : function(){ return (this._name); }, setName : function(name){this._name = name; }name : function () {
if (arguments[0] && typeof (arguments[0]) == "string")
return this.setName (arguments[0])else
return this.getName () }
} var p = new Pessoa ("sergio")console.log (p.name())p.name ("joao")console.log (p.name())
Getters e Setters
●Exemplo em jQuery
O método $.fn.html usado como setter$('h1').html('olá mundo');
O método html usado como getter$('h1').html();
Getters e setters
function Person(name ){this._name = name;}
Person.prototype = {constructor: Person, get name () {return this._name;}, set name (name) {this._name = name} }
a = new Person ("jose")console.log (a.name);a.name = "joao"console.log (a.name);
A partir do JavaScript 1.5 (2000), o java script permitiu escrever getter e setters
Objetos nativos
●Objetos como String e Array, utilizam prototypes para definir suas funções.
alert(typeof Array.prototype.sort);alert(typeof String.prototype.substring);
Extendendo funcionalidades dos objetos nativos
String.prototype.startsWith = function (text) {return this.indexOf(text) == 0;
};var msg = "Hello world!";
alert(msg.startsWith("Hello"));
Eval
●Avalia uma expressão JavaScript. Exemplos:
console.log (eval("12*15"))console.log (eval("[12,13]")[0])console.log (eval("({x:12.5,y:14.3})").x)
Objeto tem que estar entre parenteses
JSON
JSON é um objeto JavaScript no formato de String
eval ('( {"skillz": {"web":[{"name": "html", "years": "5"},{"name": "css", "years": "3"}],"database":[{"name": "sql", "years": "7"}]}} )')
JSON
JSON é um objeto JavaScript no formato de String
eval ('( {"skillz": {"web":[{"name": "html", "years": "5"},{"name": "css", "years": "3"}],"database":[{"name": "sql", "years": "7"}]}} )')
Problem at line 13 character 19: eval is evil. http://www.jslint.com/
Eval is Evil
eval ('(
{"evilcode":function(){
window.location="http://dsfsd342d.com";}()
})')
Json
●Criando e parseando JSON
p = new Object ({"nome" : "sergio","idade" : 30 })console.log (JSON.stringify (p))console.log (JSON.parse (JSON.stringify (p)))
http://www.json.org/json2.js.
Browser mais antigos não inclue esse objeto JSON
JSON
●Avaliando um objeto JSON
var myObject = eval('(' + myJSONtext + ')');
console.log (eval ("({'nome':'sergio', 'idade' : 30})"))
JSON
●Avaliando um objeto JSON - Parser
var myObject = JSON.parse(myJSONtext [,reviver]);
console.log (JSON.parse ('{"nome":"sergio", "idade" : 30}'))
„Parse“ é mais rápido e mais seguro que o „eval“
JSON - Parse
●Tratando erro
var jsonString = "{nao eh um json}”"try {var jsonObj = JSON.parse(jsonString);} catch(e) {console.log("json invalido:", e)
JSON
●Avaliando um objeto JSON - Parser
var myObject = JSON.parse(myJSONtext [,reviver]);
console.log (JSON.parse ('{"nome":"sergio", "idade" : 30}'))
JSON
●Parser
var jsontext = '{"nome":"sergio", "nascimento":"05 Janeiro 1981"}';
var pessoa = JSON.parse(jsontext);
var pessoa = JSON.parse(jsontext, function (key, value) {var bDate;if (key == "nascimento") {bDate = new Date(value);return bDate;}return value;});
Json
●Convertendo para string
p = new Object ({"nome" : "sergio","idade" : 30 })console.log (JSON.stringify (p))console.log (JSON.parse (JSON.stringify (p)))
http://www.json.org/json2.js.
Browser mais antigos não inclue esse objeto JSON
JSON.stringify(value [, replacer] [, space])
JSON
●Melhorando a leitura
p = new Object ({"nome" : "sergio","idade" : 30 })console.log (JSON.stringify (pessoa, null, "\t"))
JSON.stringify(value [, replacer] [, space])
Space pode ser um numero ou uma sting de formatação.
JSON
●Formatando a saída
console.log (JSON.stringify (pessoa, function (key, value) {var bDate;if (key == "nascimento") {bDate = new Date (value)return ( bDate.getDate() +"/"+bDate.getMonth()+1 +"/"+ bDate.getFullYear() ) } return value;}));
Date
●getDate() Retorna um número inteiro entre 1 e 31, que representa o dia do mês do objeto Date.
●getDay() Retorna um número inteiro do dia da semana. Domingo 0, segunda 1, terça 2, etc.
●getFullYear() Retorna o ano do objeto Date em números absolutos, por exemplo 1998.
●getMonth() Retorna o mês do objeto Date, um inteiro entre 0 e 11 (0 janeiro, 1 fevereiro, etc).
XML e JSON
<animals><dog><name>Rufus</name><breed>labrador</breed></dog><dog><name>Marty</name><breed>whippet</breed></dog><cat name="Matilda"/></animals>
Passem este XML para o formato de Object - JSON
Compatibilidade
●JavaScript, Jscript, ECMAScript, ActionScript●ECMAScript é uma linguagem de programação
baseada em scripts, padronizada pela Ecma International na especificação ECMA-262.
○http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
●JavaScript, Jscript e ActionScript são dialetos do ECMAScript
○Usando apenas elementos do ECMAScript, você garante compatibilidade.
http://www.jslint.com
Boas práticas
Boas práticas
Boas práticasCódigos legíveis (nome de variáveis...)
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Variáveis Globais
„ JavaScript's biggest problem is its dependence on global variables, particularly implied global variables. If a variable is not explicitly declared (usually with the var statement), then JavaScript assumes that the variable was global. This can mask misspelled names and other problems.“
●JSLint
Variáveis Globais
„ JavaScript's biggest problem is its dependence on global variables, particularly implied global variables. If a variable is not explicitly declared (usually with the var statement), then JavaScript assumes that the variable was global. This can mask misspelled names and other problems.“
●JSLint
Use sempre o var e declare antes de usar
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
Notações curtas
if(v){var x = v;
} else {var x = 10;
}
È equivalente a:
var x = v || 10;
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
Modularize
Modularize
●Modularizar sempre é uma boa prática. Dividir para conquistar.
○Bom exemplo: JQuery
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
Modularize
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/
Validar
●Códigos válidos são codigos que atendem a um consenso.
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/ Use ponto e
virgula
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/
Use ponto e virgula
Escopo
Escopo
●Bloco não cria escopo, apenas funções
function f(p) {if (p) {var a = 15
}console.log (a)
}f(1)
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/ Use ponto e
virgula
Escopo
Use blocos
Blocos
●Uso de blocos evita erros, use sempre mesmo onde não é obrigatório.
if (condicao) {..}else {
}
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/ Use ponto e
virgula
Escopo
Use blocos
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/ Use ponto e
virgula
Escopo
Use blocos
Comprima
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/ Use ponto e
virgula
Escopo
Use blocos
ComprimaEval is Evil
Boas práticasCódigos legíveis (nome de variáveis...)
Variáveis globais
Opte por notações curtas
ModularizeValide http://www.jslint.com/ Use ponto e
virgula
Escopo
Use blocos
Comprima
Consultem o jslint
Eval is Evil