Enviar pesquisa
Carregar
Bottom Up
•
3 gostaram
•
2,128 visualizações
Brian Moschel
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 23
Baixar agora
Baixar para ler offline
Recomendados
Headless Js Testing
Headless Js Testing
Brian Moschel
Singletons in PHP - Why they are bad and how you can eliminate them from your...
Singletons in PHP - Why they are bad and how you can eliminate them from your...
go_oh
Design Patterns Reconsidered
Design Patterns Reconsidered
Alex Miller
Anonymous functions in JavaScript
Anonymous functions in JavaScript
Mohammed Sazid Al Rashid
Min-Maxing Software Costs
Min-Maxing Software Costs
Konstantin Kudryashov
PHPSpec - the only Design Tool you need - 4Developers
PHPSpec - the only Design Tool you need - 4Developers
Kacper Gunia
Clean Code Development
Clean Code Development
Peter Gfader
Design Patterns in PHP5
Design Patterns in PHP5
Wildan Maulana
Recomendados
Headless Js Testing
Headless Js Testing
Brian Moschel
Singletons in PHP - Why they are bad and how you can eliminate them from your...
Singletons in PHP - Why they are bad and how you can eliminate them from your...
go_oh
Design Patterns Reconsidered
Design Patterns Reconsidered
Alex Miller
Anonymous functions in JavaScript
Anonymous functions in JavaScript
Mohammed Sazid Al Rashid
Min-Maxing Software Costs
Min-Maxing Software Costs
Konstantin Kudryashov
PHPSpec - the only Design Tool you need - 4Developers
PHPSpec - the only Design Tool you need - 4Developers
Kacper Gunia
Clean Code Development
Clean Code Development
Peter Gfader
Design Patterns in PHP5
Design Patterns in PHP5
Wildan Maulana
A Re-Introduction to JavaScript
A Re-Introduction to JavaScript
Simon Willison
Object Oriented JavaScript
Object Oriented JavaScript
Michael Girouard
Clean code in JavaScript
Clean code in JavaScript
Mathieu Breton
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Kacper Gunia
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
Rich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 Application
Kirill Chebunin
PHPCon 2016: PHP7 by Witek Adamus / XSolve
PHPCon 2016: PHP7 by Witek Adamus / XSolve
XSolve
Impact of the New ORM on Your Modules
Impact of the New ORM on Your Modules
Odoo
Система рендеринга в Magento
Система рендеринга в Magento
Magecom Ukraine
Crafting beautiful software
Crafting beautiful software
Jorn Oomen
Writing clean code
Writing clean code
Angel Garcia Olloqui
The IoC Hydra
The IoC Hydra
Kacper Gunia
The IoC Hydra - Dutch PHP Conference 2016
The IoC Hydra - Dutch PHP Conference 2016
Kacper Gunia
Javascript Experiment
Javascript Experiment
wgamboa
PhpSpec 2.0 ilustrated by examples
PhpSpec 2.0 ilustrated by examples
Marcello Duarte
Lisp Macros in 20 Minutes (Featuring Clojure)
Lisp Macros in 20 Minutes (Featuring Clojure)
Phil Calçado
Java script -23jan2015
Java script -23jan2015
Sasidhar Kothuru
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
smueller_sandsmedia
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
Denis Ristic
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Paulo Silveira
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
JavaScript Misunderstood
JavaScript Misunderstood
Bhavya Siddappa
Mais conteúdo relacionado
Mais procurados
A Re-Introduction to JavaScript
A Re-Introduction to JavaScript
Simon Willison
Object Oriented JavaScript
Object Oriented JavaScript
Michael Girouard
Clean code in JavaScript
Clean code in JavaScript
Mathieu Breton
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Kacper Gunia
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
Konstantin Kudryashov
Rich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 Application
Kirill Chebunin
PHPCon 2016: PHP7 by Witek Adamus / XSolve
PHPCon 2016: PHP7 by Witek Adamus / XSolve
XSolve
Impact of the New ORM on Your Modules
Impact of the New ORM on Your Modules
Odoo
Система рендеринга в Magento
Система рендеринга в Magento
Magecom Ukraine
Crafting beautiful software
Crafting beautiful software
Jorn Oomen
Writing clean code
Writing clean code
Angel Garcia Olloqui
The IoC Hydra
The IoC Hydra
Kacper Gunia
The IoC Hydra - Dutch PHP Conference 2016
The IoC Hydra - Dutch PHP Conference 2016
Kacper Gunia
Javascript Experiment
Javascript Experiment
wgamboa
PhpSpec 2.0 ilustrated by examples
PhpSpec 2.0 ilustrated by examples
Marcello Duarte
Lisp Macros in 20 Minutes (Featuring Clojure)
Lisp Macros in 20 Minutes (Featuring Clojure)
Phil Calçado
Java script -23jan2015
Java script -23jan2015
Sasidhar Kothuru
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
smueller_sandsmedia
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
Denis Ristic
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Paulo Silveira
Mais procurados
(20)
A Re-Introduction to JavaScript
A Re-Introduction to JavaScript
Object Oriented JavaScript
Object Oriented JavaScript
Clean code in JavaScript
Clean code in JavaScript
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
Rich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 Application
PHPCon 2016: PHP7 by Witek Adamus / XSolve
PHPCon 2016: PHP7 by Witek Adamus / XSolve
Impact of the New ORM on Your Modules
Impact of the New ORM on Your Modules
Система рендеринга в Magento
Система рендеринга в Magento
Crafting beautiful software
Crafting beautiful software
Writing clean code
Writing clean code
The IoC Hydra
The IoC Hydra
The IoC Hydra - Dutch PHP Conference 2016
The IoC Hydra - Dutch PHP Conference 2016
Javascript Experiment
Javascript Experiment
PhpSpec 2.0 ilustrated by examples
PhpSpec 2.0 ilustrated by examples
Lisp Macros in 20 Minutes (Featuring Clojure)
Lisp Macros in 20 Minutes (Featuring Clojure)
Java script -23jan2015
Java script -23jan2015
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Justjava 2007 Arquitetura Java EE Paulo Silveira, Phillip Calçado
Semelhante a Bottom Up
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
Hoat Le
JavaScript Misunderstood
JavaScript Misunderstood
Bhavya Siddappa
Lab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
Java Script ppt
Java Script ppt
Priya Goyal
Secrets of JavaScript Libraries
Secrets of JavaScript Libraries
jeresig
Introduction to Javascript
Introduction to Javascript
Amit Tyagi
JavaScript Core
JavaScript Core
François Sarradin
Oojs 1.1
Oojs 1.1
Rodica Dada
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Jeff Durta
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Jeff Durta
Javascript quiz. Questions to ask when recruiting developers.
Javascript quiz. Questions to ask when recruiting developers.
Alberto Naranjo
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Luke Summerfield
Java scriptforjavadev part2a
Java scriptforjavadev part2a
Makarand Bhatambarekar
JavaScript Basics
JavaScript Basics
Mats Bryntse
droidQuery: The Android port of jQuery
droidQuery: The Android port of jQuery
PhDBrown
What's new in DWR version 3
What's new in DWR version 3
Joe Walker
J Query The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Library
rsnarayanan
"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
Núcleo de Electrónica e Informática da Universidade do Algarve
Intro to Javascript
Intro to Javascript
Anjan Banda
Javascript Everywhere
Javascript Everywhere
Pascal Rettig
Semelhante a Bottom Up
(20)
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
JavaScript Misunderstood
JavaScript Misunderstood
Lab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Java Script ppt
Java Script ppt
Secrets of JavaScript Libraries
Secrets of JavaScript Libraries
Introduction to Javascript
Introduction to Javascript
JavaScript Core
JavaScript Core
Oojs 1.1
Oojs 1.1
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
Javascript quiz. Questions to ask when recruiting developers.
Javascript quiz. Questions to ask when recruiting developers.
Javascript Frameworks for Joomla
Javascript Frameworks for Joomla
Java scriptforjavadev part2a
Java scriptforjavadev part2a
JavaScript Basics
JavaScript Basics
droidQuery: The Android port of jQuery
droidQuery: The Android port of jQuery
What's new in DWR version 3
What's new in DWR version 3
J Query The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Library
"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
Intro to Javascript
Intro to Javascript
Javascript Everywhere
Javascript Everywhere
Mais de Brian Moschel
A Very Biased Comparison of MVC Libraries
A Very Biased Comparison of MVC Libraries
Brian Moschel
FuncUnit
FuncUnit
Brian Moschel
Comet: an Overview and a New Solution Called Jabbify
Comet: an Overview and a New Solution Called Jabbify
Brian Moschel
Web 2.0 Expo Notes
Web 2.0 Expo Notes
Brian Moschel
Comet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet Service
Brian Moschel
Building an App with jQuery and JAXER
Building an App with jQuery and JAXER
Brian Moschel
JavaScript Functions
JavaScript Functions
Brian Moschel
Ajax3
Ajax3
Brian Moschel
Basic inheritance in JavaScript
Basic inheritance in JavaScript
Brian Moschel
Things to avoid in JavaScript
Things to avoid in JavaScript
Brian Moschel
Javascript and DOM
Javascript and DOM
Brian Moschel
Mais de Brian Moschel
(11)
A Very Biased Comparison of MVC Libraries
A Very Biased Comparison of MVC Libraries
FuncUnit
FuncUnit
Comet: an Overview and a New Solution Called Jabbify
Comet: an Overview and a New Solution Called Jabbify
Web 2.0 Expo Notes
Web 2.0 Expo Notes
Comet, Simplified, with Jabbify Comet Service
Comet, Simplified, with Jabbify Comet Service
Building an App with jQuery and JAXER
Building an App with jQuery and JAXER
JavaScript Functions
JavaScript Functions
Ajax3
Ajax3
Basic inheritance in JavaScript
Basic inheritance in JavaScript
Things to avoid in JavaScript
Things to avoid in JavaScript
Javascript and DOM
Javascript and DOM
Último
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
rafiqahmad00786416
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Zilliz
Elevate Developer Efficiency & build GenAI Application with Amazon Q
Elevate Developer Efficiency & build GenAI Application with Amazon Q
Bhuvaneswari Subramani
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
apidays
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Orbitshub
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Último
(20)
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Elevate Developer Efficiency & build GenAI Application with Amazon Q
Elevate Developer Efficiency & build GenAI Application with Amazon Q
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Bottom Up
1.
Bottom Up JavaScript Bottom
Up JavaScript Provide a JavaScript development foundation. The only 3 things you ever do with JavaScript: 0. Load Scripts 1. Attach Event Listener 2. Get or modify Data 3. Update the page Extra burdens: Unusual Language Features Multiple Environments and Languages Divergent and Competing Libraries Unusual Performance Considerations Scattered Resources and Development Tools ©Jupiter IT JavaScriptMVC
2.
Bottom Up JavaScript What
We Will Learn We will learn 'OF' just about everything: The JavaScript (JS) Language The Document Object Model (DOM) How JS and the DOM cooperate Libraries Development Tools Resources ©Jupiter IT JavaScriptMVC
3.
Bottom Up JavaScript What
We Will Learn We will learn 'OF' just about everything: The JavaScript (JS) Language The Document Object Model (DOM) How JS and the DOM cooperate Libraries Development Tools Resources ©Jupiter IT JavaScriptMVC
4.
Bottom Up JavaScript JavaScript
JavaScript is a dynamic, weakly typed, prototype- based language with first-class functions. JavaScript != Java JavaScript == A real programming language JavaScript == ECMAScript == Jscript JavaScript != Document Object Model JavaScript is typically used in browsers to power dynamic websites. JS code is loaded and ran with script tags: <script type='text/javascript'>alert('hi')</script> <script type='text/javascript' src='myjs.js'></script> ©Jupiter IT JavaScriptMVC
5.
Bottom Up JavaScript JavaScript:
Dynamic Compilation and execution happen together. a = function(){ return 'a' }; b = function(){ return 'b' }; if(Math.random() < 0.5) c = a; else c = b; a() -> 'a' b() -> 'b' c() -> ??? Use these techniques to remove boilerplate code. ©Jupiter IT JavaScriptMVC
6.
Bottom Up JavaScript JavaScript:
Weakly Typed Type associated with value, not variable. var a = 1; a = “one”; a = [1]; a = {one: 1}; Use typeof, instanceof, or other duck typing techniques to determine type. typeof “abc” -> “string” typeof 1 -> “number” typeof [] -> “object” ©Jupiter IT JavaScriptMVC
7.
Bottom Up JavaScript JavaScript:
Prototype-based Prototype looks up inherited and shared properties. Animal = function(name) { this.name = name } Animal.prototype.toString = function(){ return this.name+" has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; Mammal = function(name){ this.name = name; } Mammal.prototype = new Chordate(); Mammal.prototype.has_hair = true; has_hair has_spine Chrdate Mmml Chrdate Animal Animal toString Object p proto Object p proto p prototype prototype prototype Mmml Chrdate Animal ©Jupiter IT JavaScriptMVC
8.
Bottom Up JavaScript JavaScript:
First Class Functions Functions are just like objects, except you can put a () after them. //create square1 = new Function(“x”,”return x*x”); square2 = function(x){ return x*x}; mult = function(f1, f2){ return function(n){ //return return f1(n) * f2(n) } } bigF = mult(square1, square2) //pass bigF(2) -> 16; ©Jupiter IT JavaScriptMVC
9.
Bottom Up JavaScript JavaScript:
First Class Functions Functions are just like objects, except you can put a () after them. //create square1 = new Function(“x”,”return x*x”); square2 = function(x){ return x*x}; mult = function(f1, f2){ return function(n){ //return return f1(n) * f2(n) } } bigF = mult(square1, square2) //pass bigF(2) -> 16; ©Jupiter IT JavaScriptMVC
10.
Bottom Up JavaScript JavaScript:
Data Types Basic data types: ● Undefined -> undefined ● Null -> null ● Boolean -> true, false ● String -> “hello” ● Number -> 2, 0.2 ● Object -> {name: “value”} ● Function -> function(){} ● Array -> [1,2,3] ● Date -> new Date() ● RegExp -> /.*/g, new RegExp(“.*”,”g”) ©Jupiter IT JavaScriptMVC
11.
Bottom Up JavaScript Document
Object Model JS Representation of HTML and browser. <html> <head></head> <body> <h1>hi</h1> </body> </html> document = { documentElement: { nodeName: “HTML” childNodes: [ {nodeName: “HEAD”, childNodes: []}, { nodeName : “BODY” childNodes: [{nodeName: 'h1', innerHTML: "hi"}] } ] }, getElementById : function(id){ ... } } ©Jupiter IT JavaScriptMVC
12.
Bottom Up JavaScript Document
Object Model JS Representation of HTML and browser. Browser navigator.userAgent Page location Document var el=document.getElementById('eid') Ajax new XMLHttpRequest() Events el.attachEventListener('click',f,false) Elements el.style.backgroundColor = “blue” Source: Wikipedia ©Jupiter IT JavaScriptMVC
13.
Bottom Up JavaScript Three
Things 1. Respond to an event Find Element -> Document / Element Attach Event Listener -> Element ... 2. Get or Modify Data ... From Server -> XMLHttpRequest / Ajax From HTML -> Document / Element From Location -> Location ... 3. Update the Page ... Change Element -> Element Change Location -> Location ©Jupiter IT JavaScriptMVC
14.
Bottom Up JavaScript Three
Things Use the DOM for each part, stitch it together with JS. <a id='find_price'>Find Price</a> <div id='price'></div> 1. Attach Event Listener var el = FindElement('find_price') el.AttachFunctionToRunOn('click',getAndSetPrice) 2. Get or Modify Data function getAndSetPrice(){ price = GetDataFrom('/getPrice') ... 3. Update the Page ... var pel = FindElement('price') pel.InsertText(price) } ©Jupiter IT JavaScriptMVC
15.
Bottom Up JavaScript Three
Things <a id='find_price'>Find Price</a> <div id='price'></div> 1. Attach Event Listener var el=document.getElementById('find_price') //FindElement el.attachEventListener('click', getAndSetPrice, false); //attach 2. Get or Modify Data getAndSetPrice = function(event){ var xhr = new XMLHttpRequest() //GetDataFrom xhr.open("GET", "/getPrice", false); //don't do this! xhr.send(); var price = xhr.responseText; ... 3. Update the Page ... document.getElementById('price').innerHTML = price; } ©Jupiter IT JavaScriptMVC
16.
Bottom Up JavaScript Libraries
Exist to make things easier: Browser inconsistencies attachEvent vs addEventListener XMLHttpRequest vs ActiveXObject DOM API weaknesses $('#sidebar .ul').height() document.getElementById('sidebar'). childNodes[2].offsetHeight Common tasks Drag/drop, AutoComplete, Slider, Sortable Tables Language improvements [].each(), “isRed”.startsWith(“is”) Do you need a library -> YES!!! ©Jupiter IT JavaScriptMVC
17.
Bottom Up JavaScript Library
Selection ©Jupiter IT JavaScriptMVC
18.
Bottom Up JavaScript Tools
Debugging Firebug (FF) MS Visual Web Developer (IE) DragonFly (Opera) Chrome Drosera / Web Inspector (Safari) Compression Dojo Shrink Safe YUI Dean Edwards Packer / Compress.js Performance Yslow Firebug Chrome's development tools ©Jupiter IT JavaScriptMVC
19.
Bottom Up JavaScript Tools
Continued ... Testing In browser (easy) - JSUnit Browser Control (comprehensive) - Selenium Simulated (fast) – Env.js Documentation JSDoc – Understands JavaScript, hard to document complex features Natural Docs – Can document anything MVCDoc – Can document anything, understands some JS. ©Jupiter IT JavaScriptMVC
20.
Bottom Up JavaScript Resources
Documentation Mozilla Development Center MSDN Internet Explorer Development Center Quirksmode Books JavaScript - the Definitive Guide. David Flanagan JavaScript – the Good Parts. Douglas Crockford News Ajaxian Ejohn.org ©Jupiter IT JavaScriptMVC
21.
Bottom Up JavaScript Three
Things Revisited 0. Load Script <!-- Use a compressor to load a single script. --> <script type='text/javascript' src='production.js'></script> 1. Respond to an event //Attach event handlers when you know the document is ready $(function(){ $(“#find_price”).click(function(event){ ... 2. Get or Modify Data ... $.get('/getPrice',function(price){ ... 3. Update the Page ... $(“#price”).text(price); }); }) ©Jupiter IT JavaScriptMVC
22.
Bottom Up JavaScript Three
Things Revisited Cont... MyCo.updatePrice = function(price){ $(“#price”).text(price); } MyCo.getAndUpdatePrice = function(){ $.get('/getPrice',MyCo.updatePrice) } $(function(){ $(“#find_price”).click(MyCo.getAndUpdatePrice) }) OR Maybe ... $.Controller.extend('MyCo.Controllers.FindPrice',{ click : function(){ MyCo.Price.get(this.callback('updatePrice')) }, updatePrice : function(price){ $(“#price).html({view: 'price',data: {price: price}); } }) <!-- in views/find_price/price.ejs --> Your price is <span class='highlight'><%= price %></span> ©Jupiter IT JavaScriptMVC
23.
Bottom Up JavaScript What
we've learned The JavaScript (JS) Language The Document Object Model (DOM) How JS and the DOM cooperate Libraries Development Tools Resources ©Jupiter IT JavaScriptMVC
Baixar agora