javascript - principais conceitos

JavaScriptPrincipais conceitos

Prof: Sérgio Souza Costa

Sobre mim

Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)

[email protected]

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


Estrutura


Estrutura

Apresentação


Estrutura

Apresentação

Comportamento


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


Smalltalk, ...● Linguagem de script

○ similar a diversas linguagens, como Lua, Python, PHP ...

JavaScript




● Linguagem dinâmica, como as maioria das linguagens de script○ Lua, Python, PHP ...

JavaScript




● 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


● Netscape usa o projeto em seu Browser, nomeando como LiveScript e depois JavaScript.

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


1. Problema


1. Problema 2. Google



3. Encontra



3. Encontra4. Control-C e Control-V



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.




Ou .. precisará esperar a Google fazer, e alguem copiar, e você usar.




Se precisa focar no negocio, use bibliotecas e seja produtivos.




Se precisa focar no negocio, use bibliotecas e seja produtivos.

Fiquem atento, usar plugins você não inova.

Já ouviram falar em HTML 5 ?


É em grande parte novas APIs Java Script



GeoLocation



GeoLocation Canvas



GeoLocation Canvas

WebGL



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


Microsoft adotou o Java Script no Windows 8

Windows 8 – Metro



Uma alternativa para o desenvolvimento de aplicativos para dispositivos móveis

Com a vantagem de ter um app compativel com o Android e IOS



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


Sintaxe Semântica Pragmática

3. Conhecer suas APIs

1. Saber Programar


Sintaxe Semântica Pragmática

3. Conhecer suas APISDOM BOM

1. Saber Programar


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

http://www.w3schools.com/jsref/default.asp

http://www.w3schools.com/jsref/default.asp

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

● 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

http://www.w3.org/TR/DOM-Level-2-Core/core.html



http://www.howtocreate.co.uk/tutorials/javascript/domstructure



1. Saber Programar



1. Saber Programar



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



● 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


Variáveis


Variáveis Valores


Variáveis Valores

Atribuição


Variáveis Valores

Atribuição

Estado


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

Tipo

●Dinamicamente tipada

Tipo

●Dinamicamente tipada○Os tipos das variaveis são definidos em tempo

de execução.○Dependendo dos seus valores

Tipo



A variável se “ajusta“ ao seu conteúdo

Tipo



A variável se “ajusta“ ao seu conteúdo

Não era assim as linguagens que

conhecia.

Tipos Dinâmicos - Vantagens


Códigos menores + Funções aplicadas a diferentes

valores


Códigos menores + Funções aplicadas a

diferentes valores



valores

= +Produtivade



valores

= +Produtivade

=+Manutenabilidade



valores

= +Produtivade

=+Manutenabilidade

=+Legibilidade

Tipos Dinâmicos - Desvantagens


Códigos poucos seguros


Códigos poucos seguros Baixa

eficiência



Baixa eficiência

Mais disciplina nos testes



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


Nome Valor

Tipo de uma váriavel é tipo de seu valor corrente

Declarando

●Muito fácil


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




Conversões automáticas são conhecidas como coerção

Conversão




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


●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()


function f (arg) { if (arguments.length != 0) console.log (arg) else console.log ("ola mundo")}f("oi") f()



function f (arg) { if (arg) console.log (arg) else console.log (“ola mundo“)}f("oi") f()


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.



function f (arg) {if (arg) console.log (arg)elseconsole.log (“ola mundo“)}f("oi") f()


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



chave

valor


Objeto são como vetores que podem ter chave diferente de inteiro

Tipos Compostos



chave

valor


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



person.sayName = function(){ Console.log(this.name);};

person.sayName()

Sempre que criar um novo „person“, terei que escrever a função sayName ?

Object



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




Prototype permite extender as funcionalidades de um objeto, ex: plugins do Jquery

Prototype




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


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;


Variáveis globais


Modularize

Modularize

●Modularizar sempre é uma boa prática. Dividir para conquistar.

○Bom exemplo: JQuery


Variáveis globais


Modularize


Variáveis globais


ModularizeValide http://www.jslint.com/

Validar

●Códigos válidos são codigos que atendem a um consenso.


Variáveis globais




Variáveis globais


ModularizeValide http://www.jslint.com/ Use ponto e

virgula


Variáveis globais



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)


Variáveis globais



virgula

Escopo

Use blocos

Blocos

●Uso de blocos evita erros, use sempre mesmo onde não é obrigatório.

if (condicao) {..}else {

}


Variáveis globais



virgula

Escopo

Use blocos


Variáveis globais



virgula

Escopo

Use blocos

Comprima


Variáveis globais



virgula

Escopo

Use blocos

ComprimaEval is Evil


Variáveis globais



virgula

Escopo

Use blocos

Comprima

Consultem o jslint

Eval is Evil

javascript - principais conceitos

Education