Enviar búsqueda
Cargar
Bottom Up
•
3 recomendaciones
•
2,128 vistas
Brian Moschel
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 23
Descargar ahora
Descargar para leer sin conexión
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
Más contenido relacionado
La actualidad más candente
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
La actualidad más candente
(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
Similar 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
Similar 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
Más 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
Más 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
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Último
(20)
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
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
Descargar ahora