javascript levado a serio
DESCRIPTION
Palestra sobre Javascript que ministrei na III Mostra Científica do Senac-RS.A palestra conta um pouco da história do Javascript e o porque da imcompreensão da linguagem. Também mostra o que é possível fazer e como desenvolver um código um profissional e levado a sério com Javascript.TRANSCRIPT
![Page 1: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/1.jpg)
![Page 2: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/2.jpg)
Jaydson Gomes
Formado pela Faculdade Senac em 2008
Analista e Desenvolvedor de Sistemas
4 anos na FGV
Empresa atual Ag2
Entusiasta em Javascript e em tecnologias livres
Apresentação
![Page 3: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/3.jpg)
O que é Javascript?
• Linguagem de script
• Linguagem de programação
• Linguagem interpretada
Linguagem de programação:
“É um conjunto de regras sintáticas
e semânticas usadas para definir
um programa de computador.”
Wikipedia
![Page 4: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/4.jpg)
O que é Javascript?
• Linguagem de script
• Linguagem de programação
• Linguagem interpretada
Linguagem de Script:
“É uma linguagem de programação
executada do interior de
um programa e/ou de outra
linguagem de programação.”
Wikipedia
![Page 5: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/5.jpg)
O que é Javascript?
• Linguagem de script
• Linguagem de programação
• Linguagem interpretada
Linguagem de Interpretada :
“É uma linguagem de programação,
onde o código fonte é executado
por um interpretador e em
seguida é executado pelo sistema
operacional ou processador.”
Wikipedia
“JavaScript is the most popular scripting language on the internet” W3Schools
![Page 6: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/6.jpg)
O que é Javascript?
JavaScript é uma linguagem de script orientada a objetos
JavaScript permite criar interfaces web ricas
JavaScript é baseado no padrão ECMAScript
JavaScript é uma linguagem dinâmica, fracamente tipada e Prototype-based
![Page 7: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/7.jpg)
História - O “culpado”
Brendan Eich
Inventor do Javascript
![Page 8: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/8.jpg)
História - Origem
O Javascript foi criado por Brendan Eich em Dezembro de 1995 na Netscape.
Originalmente se chamava Mocha. Logo após renomeado para LiveScript, e por fim em Dezembro do mesmo ano veio o nome Javascript.
O nome “Javascript” veio de um acordo entre a Netscape e a Sun. A idéia era fazer o Javascript ser uma linguagem complementar ao JAVA.
A idéia inicial da linguagem era fazer algo que Web-Designers e pessoas que não tinham muito conhecimento de programação conseguissem tornar as suas páginas web mais dinâmicas.
![Page 9: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/9.jpg)
A linguagem incompreendida
Apesar de Javascript ser uma linguagem popular,poucos sabem de sua capacidade.
Alguns fatores contribuem para incompreensão da linguagem:
O nome Java como prefixo sugere algo relacionado ao JAVA, que é umsubconjunto ou uma versão mais simples e incapaz.
O sufixo Script sugere que Javascript não é uma linguagem real de programação.
As primeiras versões de Javascript eram muito fracas. Não existiamException Handling, Inner Functions e Herança.
Atualmente Javascript é uma linguagem de programação completa.
![Page 10: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/10.jpg)
A linguagem incompreendida
A maioria dos livros sobre Javascript são ruins. Contendo erros, exemplos pobrese más práticas. Recursos importantes são mal explicados, ou simplesmente deixados de lado.
A especificação oficial da linguagem é extremamente pobre e difícil de entender.
Muitos amadores e não programadores utilizando Javascript.
![Page 11: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/11.jpg)
O que pode ser feito
Animações 2D & 3D
Quase tudo!
Manipular HTML dinamicamente
Adicionar interatividade a sites estáticos
Jogos
Aplicações RIA
Validações de formulários
Desenhos
![Page 12: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/12.jpg)
O que não pode ser feito
Javascript não pode acessar banco de dados
Javascript não pode ler e gravar arquivos no lado cliente, exceto cookies
Javascript não pode fechar uma janela que ele mesmo não tenha aberto
Javascript não pode gravar arquivos no servidor sem ajuda de um script server-side
Javascript não pode acessar páginas que não estejam no mesmo domínio
Javascript não protege o código fonte e nem imagens
Javascript não tem acesso ao Hardware
![Page 13: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/13.jpg)
Aplicações
![Page 14: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/14.jpg)
Ajax
Asynchronous Javascript And XML
Premissa: Requisições são feitas do cliente ao servidor mesmo após a página ter sido completamente carregada.
Ajax não é somente um novo modelo, é também uma iniciativa na construção deaplicações Web mais dinâmicas e criativas.
Ajax também não é uma tecnologia, são várias tecnologias conhecidas trabalhando juntas, oferecendo novas funcionalidades.
Ajax permite ao desenvolvedor criar interações adicionais aomodelo tradicional.
![Page 15: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/15.jpg)
JSON
JSON é uma alternativa para XML, ele também exerce omesmo papel que o XML como formato para transporte de dados.
É uma formatação leve de troca de dados.Para seres humanos, é fácil de ler e escrever. Para máquinas, é fácil de interpretar e gerar.
![Page 16: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/16.jpg)
RIA
![Page 17: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/17.jpg)
RIA
RIA é mais um passo no processo evolutivo da internet
Rich Internet Applications
É o uso da Internet e das tecnologias disponíveis para criar uma experiência mais intuitiva e eficientepara o usuário
“RIA é a combinação da interatividade e funcionalidades do Desktop com a abrangência e flexibilidade da Web
![Page 18: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/18.jpg)
Javascript Profissional
“programador” Javascript ontem
Programador Javascript hoje
![Page 19: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/19.jpg)
Programação orientada a objetos
Javascript Profissional
![Page 20: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/20.jpg)
Javascript Profissional
Construtor
Construtor
Método
![Page 21: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/21.jpg)
Método
![Page 22: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/22.jpg)
Testes
Javascript Profissional
![Page 23: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/23.jpg)
Javascript Profissional
Debugador default IE
![Page 24: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/24.jpg)
Javascript Profissional
![Page 25: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/25.jpg)
BreakPoints
![Page 26: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/26.jpg)
Variáveis e objetos
![Page 27: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/27.jpg)
Código reutilizável
Javascript Profissional
![Page 28: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/28.jpg)
Javascript Profissional
Namespaces
![Page 29: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/29.jpg)
Javascript Profissional
Unobtrusive JavaScript
JavascriptHTML
![Page 30: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/30.jpg)
Javascript Profissional
Tem que ter o DOM (Document Object Model)
É uma API para representação de documentos XML e HTML
Nos provê uma estrutura que possibilita a modificação destes documentos
![Page 31: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/31.jpg)
![Page 32: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/32.jpg)
Frameworks Javascript
![Page 33: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/33.jpg)
Frameworks Javascript
![Page 34: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/34.jpg)
jQuery
Uma biblioteca Javascript open-sourceque simplifica a interação entre o HTMLe o Javascript
![Page 35: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/35.jpg)
• Inicio em Agosto de 2005 (http://ejohn.org/blog/selectors-in-javascript)• Primeiro Release em Janeiro de 2006• Alpha Release da versão 1.0 em Junho de 2006• Anuncio do jQuery UI em Julho de 2007• 3° aniversário e versão 1.3 lançada em janeiro de 2009
• Outubro de 2009
jQuery
Histórico
![Page 36: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/36.jpg)
Porque usar jQuery
jQuery
![Page 37: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/37.jpg)
Porque usar jQuery
jQuery
The jQuery Team at the 2009 jQuery Conference
Profissionais qualificados envolvidos no core da
biblioteca
![Page 38: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/38.jpg)
Porque usar jQuery
jQuery
Ariel FleslerGame Developer
John ResigJavaScript Tool Developer
at Mozilla Corporation
Brandon AaronSenior Technologist
at NokiaJorn Zaefferer
Consultant at maxence integration technologies
![Page 39: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/39.jpg)
Porque usar jQuery
jQuery
42%
Uso do jQuery no mundo
![Page 40: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/40.jpg)
jQuery
Selectors
![Page 41: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/41.jpg)
jQuery
Selectors
![Page 42: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/42.jpg)
jQuery
Selectors
![Page 43: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/43.jpg)
jQuery
Ajax
![Page 44: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/44.jpg)
jQuery
Plugins
São bibliotecas/extensões para o jQuery que fornecem novas funcionalidades ae ou ferramentas para os desenvolvedores.
• Thickbox • Form plugin (with AJAX) • Validation • Treeview • Tabs • Tablesorter
![Page 45: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/45.jpg)
Estudos de caso O poder do Javascript
![Page 46: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/46.jpg)
O poder do Javascript
Dragon http://raphaeljs.com/dragon.html
StarField http://www.chiptune.com/starfield/starfield.html
Solar Systemhttp://www.willjessup.com/sandbox/jquery/solar_system/rotator.html
Springshttp://www.mrspeaker.net/dev/canvas/springs.html
Mario Karthttp://www.nihilogic.dk/labs/mariokart/
IDEhttp://www.coderun.com/ide/
![Page 47: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/47.jpg)
O poder do Javascript
Berts Breakdownhttp://www.paulbrunt.co.uk/bert/
Chrome Experimentshttp://www.chromeexperiments.com/
TheWebMindhttp://thewebmind.org/2.0/
RichBlockshttp://jaydson.org/code/richblocks/
![Page 49: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/49.jpg)
Referências - Links
http://javascript.crockford.com/
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide
http://www.slideshare.net/simon/a-reintroduction-to-javascript
http://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o
http://pt.wikipedia.org/wiki/Linguagem_de_script
http://pt.wikipedia.org/wiki/Linguagem_interpretada
https://developer.mozilla.org/presentations/xtech2006/javascript/
http://en.wikipedia.org/wiki/JavaScript
http://inventors.about.com/od/jstartinventions/a/JavaScript.htm
![Page 50: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/50.jpg)
Zdnet - Entrevista com Brendan Eich, CTO da Mozillahttp://news.zdnet.com/2422-12794_22-335005.html
Imagem do Rhino Warriorhttp://notallowed2laff.blogspot.com/2007/12/power-to-people-neccessity-of-second.html
Tutorial Javascript W3Schoolshttp://www.w3schools.com/JS/js_intro.asp
ECMAScripthttp://en.wikipedia.org/wiki/ECMAScript
ECMA Internationalhttp://en.wikipedia.org/wiki/Ecma_International
Referências - Links
![Page 51: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/51.jpg)
Linguagem baseada em prototypehttp://en.wikipedia.org/wiki/Prototype-based_programming
Linguagem dinâmicahttp://en.wikipedia.org/wiki/Dynamic_language
Entrevista InfoWorld com Brendan Eichhttp://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704
Especificação Oficialhttp://www.ecma-international.org/publications/standards/Ecma-262.htm
O que não podemos fazer com Javascripthttp://javascript.about.com/od/reference/a/cannot.htm
RichBlocks - Um Framework para Implantar Interfaces RIA em Sistemas Webhttp://jaydson.org/docs/richblocks.pdf
Referências - Links
![Page 52: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/52.jpg)
Private members in Javascripthttp://www.crockford.com/javascript/private.html
Classical Inheritance in Javascripthttp://javascript.crockford.com/inheritance.html
RichBlocks - Framework RIA em Javascripthttp://code.google.com/p/richblocks/
DOMhttps://developer.mozilla.org/en/DOM
Referências - Links
http://www.slideshare.net/simon/a-reintroduction-to-javascript
![Page 53: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/53.jpg)
Douglas Crockford The JavaScript Programming Language 1 of 4http://video.yahoo.com/watch/111593/1710507
Douglas Crockford The JavaScript Programming Language 2 of 4http://video.yahoo.com/watch/6085575/15813360
Douglas Crockford The JavaScript Programming Language 3 of 4http://video.yahoo.com/watch/6090130/15825675
Douglas Crockford The JavaScript Programming Language 4 of 4http://video.yahoo.com/watch/6090389/15826154
Referências - Links
![Page 54: Javascript levado a serio](https://reader035.vdocuments.mx/reader035/viewer/2022062405/555e2397d8b42a6a4c8b4d61/html5/thumbnails/54.jpg)
Javascript - The definitive guidehttp://www.amazon.com/exec/obidos/ASIN/0596101996/wrrrldwideweb
Livros
Pro JavaScript Techniqueshttp://jspro.org/