Suche senden
Hochladen
Bottom Up
âą
3 gefÀllt mir
âą
2,128 views
Brian Moschel
Folgen
Technologie
Melden
Teilen
Melden
Teilen
1 von 23
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
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
Â
Empfohlen
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
Â
Weitere Àhnliche Inhalte
Was ist angesagt?
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
Â
Was ist angesagt?
(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
Â
Ăhnlich wie 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
Â
Ăhnlich wie 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
Â
Mehr von 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
Â
Mehr von 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
Â
KĂŒrzlich hochgeladen
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Â
đŹ The future of MySQL is Postgres đ
đŹ The future of MySQL is Postgres đ
RTylerCroy
Â
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Â
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Â
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Â
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boston Institute of Analytics
Â
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Â
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Â
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Â
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Â
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Â
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Â
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Â
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel AraĂșjo
Â
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Â
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Â
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Â
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Â
KĂŒrzlich hochgeladen
(20)
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Â
đŹ The future of MySQL is Postgres đ
đŹ The future of MySQL is Postgres đ
Â
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Â
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Â
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Â
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Â
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Â
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Â
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Â
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Â
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Â
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Â
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Â
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Â
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Â
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Â
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Â
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Â
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Â
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
Jetzt herunterladen