Javascript: No Navegador e Além

Javascript : no navegador e alémJavascript : no navegador e alémPHP Conference 2010PHP Conference 2010

PHPConference Brasil 2010 - Duodraco

Duodraco...Duodraco...

● Desenvolvimento web desde 2002● Análise, desenvolvimento, arquitetura

● Zend Certified Engineer '07● Certified Scrum Master● Analista no TiqueImóveis● Evangelista PHP


ObjetivosObjetivos


Falaremos hoje sobreFalaremos hoje sobre

● Javascript● História● Boas práticas● Importantes Desconhecidos● JS sem navegador● PHP


HistóriaHistória

● Criado para a Netscape em 1995● LiveScript● Colaboração da Sun

● Java: nome e sintaxe parecidos● Gerou o ECMAScript

● Tornando-se um padrão● Este é base do ActionScript


VersõesVersões

● 1.0 – Março de 1996● 1.1 – Agosto de 1996● 1.2 – Junho de 1997● 1.3 – Outubro de 1998

● Ecma-262 – 1ª e 2ª edições

● 1.5 – Novembro/2000 – ECMA-262 3ªed.● Subset da linguagem futuramente torna-se JSON


VersõesVersões

● 1.6 – Nov/05 – 1.5 + Array Extras + E4X …● 1.7 – Out/06 – 1.6 + Generators + Iterators …● 1.8 – Jun/08 – 1.7+Gen. Expressions/Closures …● 1.8+(1.9)

● Firefox4● JSON encode/decode nativo● Function bind● ...


DHTMLDHTML

● Dynamic HTML● HTML + CSS + Javascript

● Ações e eventos JS● HTML não “estático”● Animações● Elementos GUI

● … muito besteirol


AjaxAjax

● Asynchronous Javascript And XML● XMLHttpRequest assíncrono

● ActiveX no Internet Explorer

● Requisição HTTP● Processamento de XML – DOM● Processamento de XSL

● Deveria ser usado com Webservices


FrameworksFrameworks



● Simplifica o desenvolvimento● Implementam funcionalidades complexas

● Com interfaces simples

● Introduzem facilitadores na sintaxe

● Interface com o Usuário● Gráficos● HTML5



● jQuery● Prototype● ExtJS● Dojo● GWT● Mootools

● RaphaëlJS (SVG)

● jQueryUI● jQueryMobile

● script.aculo.us● YUI● moo.fx● qooxdoo


Estilo de CodificaçãoEstilo de Codificação

● Organização● Legibilidade● Manutenabilidade● Evita erros por má codificação

● Sintaxe principalmente



● Endentação - tabulação com espaços (quatro)● Limite de 80 caracteres● Chaves de blocos lógicos

● Quebra de linha após abertura

● Nomenclatura compreensível● Variáveis, atributos, métodos, funções

● Utilizar formatação uniforme nas declarações● OFormatoCamelizadoÉMuitoBom



● Terminar os comando com ;● Codificar de maneira autodescritiva● Evitar eval e with● Utilizar-se de JSON


OOPOOP

● Javascript é uma linguagem oo● Baseado em prototipação

● Classes com visibilidade● Public● Private● Privileged

– WTF?


Atributos Privados Atributos Privados

● Não têm acesso externo diretamente

● Declarados como parâmetro ou● Com var dentro da “Classe”


Métodos privadosMétodos privados

● Não têm acesso direto externamente● Declarados como function dentro da “Classe”


Atributos PúblicosAtributos Públicos

● Acesso externo e interno

● Criado com ● this.atributo● Classe.prototype.atributo

– Pode ser um Function (Método Público)


Métodos PrevilegiadosMétodos Previlegiados

● Métodos Públicos com acesso a itens privados

● this.metodo = function(){...}


Um ExemploUm Exemplo


HerançaHerança

● Sim, existe

● prototype● apply|call


E4XE4X

● EcmaScript for (4) Xml● Interpretação de XML nativa ao Javascript● Atualmente só funciona com Firefox


JSONJSON

● Javascript Object Notation● Objetivo: legível para humanos● Douglas Crockford

● Baseado em um Subset do JS – 1999

● Adoção do Yahoo e Google em 2005~06


JSON NativoJSON Nativo

● Encode e decode● Firefox 3.5+, Webkit, Opera 10.5+, Webkit

● JSON.stringify({name:”Duodraco”,year:1981})● JSON.parse('{teste:”Uma string JSON”}')


JSON-RPCJSON-RPC

● Remote Procedure Call● HTTP ou Sockets● Bidirecional

● Request:● { "method": "helloWord", "params": ["PHPConf"], "id": 1}

● Response:● { "result": "Olá PHPConf", "error": null, "id": 1}


XULXUL

● Xml UserInterface Language● Mozilla

● Firefox,Thunderbird,Seabird,Flock, etc

● XML+JS


NoSQLNoSQL

● Trabalham com documentos JSON● Internamente com Javascript● MongoDB

● MapReduce

● CouchDB● MapReduce, Validações, transformações internas


NoSQLNoSQL

● Requisição:● localhost/php_conf/palestrantes/?limit=1

● Resposta:{“ok”:1,”results”:[{“name”:”Duodraco”,”_id”:“$oid”:”4b7ee0731d41c8137e000002”}}],”id”:1}


Embedded - WidgetsEmbedded - Widgets

● Apple● Dashboard Widgets● Extensões Safari5

● Microsoft Gadgets● Yahoo Widgets● Google Desktop


EmbeddedEmbedded

● Adobe● PDF com suporte a Javascript● Photoshop, Illustrator, InDesign, Dreamweaver

● OpenOffice● Google Docs - Spreadsheets● Phillips – Pronto Script● Sphere


ServerSideServerSideJavaScriptJavaScript

● Netscape – 1996 - LiveWire● Como nosso PHP: script no servidor

● Aptana Jaxer● Opera – Unite● IIS+ASP

● JScript


ScriptingScripting

● Java 1.6● javax.script

● Qt● QtScript


LinguagensLinguagens

● Objective-J● CoffeeScript● JSON


AplicaçãoAplicação

● Flash● ActionScript

● AIR – Adobe Integrated Runtime● XUL● GJS

● GnomeShell

● Kjsembed | Kross● plasmoid


PlasmoidPlasmoid

● “Widgets” para a plataforma desktop KDE● Podem ser escritos em diversas linguagens

● Python, C++, Ruby, Java … e Javascript

● Tem uma estrutura simples● Podem acessar dados do sistema


PHPPHP

● JSON● Arquivos de Configuração

● XML, INI, YAML,etc...

● Transporte de Informação● Leve e simples


PHP – Parsers JSONPHP – Parsers JSON

● Zend_JSON● PEAR\Json● XmlRpc Json● PHP


json_encodejson_encodejson_decodejson_decode

● json_encode($valorPHP,$options = 0);● json_decode(“String JSON”);

● http://php.net/json_encode● http://php.net/json_decode

ConclusãoConclusão

Dúvidas???Dúvidas???


● http://duodra.co● [email protected]

● @duodraco [twitter e identi.ca]

● facebook.com/duodraco● linkedin.com/in/andersoncasimiro● slideshare.net/duodraco

ContatoContato

mailto:[email protected]

Javascript: No Navegador e Além

Technology

Transcript of Javascript: No Navegador e Além