SlideShare a Scribd company logo
1 of 108
javascript
bootcamp
by amy hoy, www.slash7.com
Javascript is a real
boy language
avascript 1.3 Javasc
                              J




                        1.2
                                                     ript



                      t
                                                          1.4


                  rip
       5
     99



                  asc
         1.1
    .1



               Jav
   est
       t
   rip



                   ECMAScript, edition 1
   asc
Jav




                                  est. 1997
1.5
                 t        Javascript 1.6
           rip
        sc
   va
 Ja




                                    far
                                  so
                                 nly
                                o
                            fox
                           fire
ECMAScript, edition 3
                    est. 1999
Follow Along
www.squarefree.com/shell/shell.html
Syntax & Style
whirlwind tour
look ma, no primitives!
data types are fun!

* Number      * null
* String      * undefined
* Boolean     * RegExp
creating numbers
yes, they’re all numbers
creating strings
creatin’ em
creating regexps
booleans - dead simple
null and undefined are special
doin’ stuff with basic types
creating arrays
this deserves repeating
creating simple functions
creating simple objects
this deserves repeating
if... or else!
gonna have to make a switch()
while()
do..while() while() while()
for(), our old friend
for..in(), a new trick!
strings
strings act like arrays
concatenation & auto type conversion
breakin’ up is not hard to do
the great escape. and unescape.
RegExps
a bit more on regexps
functions
closures & callbacks
function handles
the arguments object
objects
JavaScript Object Notation (JSON)
using a JSON object
turning strings into code (more JSON!)
don’t forget your commas
creating an object constructor
creating a better object constructor
Javascript has a prototype-
based inheritance model
using prototype to extend objects
creating an object hierarchy

           SweetLiquid



Molasses      Soda       KoolAid
creating the parent object
creating the children
creating the relationship
mucking about with your new objects
further extending objects
extending specific instances
exceptions
try..catch
fancier try..catch
throwing custom exceptions
throwing custom exceptions
throwing custom exception objects
catching custom exceptions
the browser
“Javascript”

   ECMAScript W3C DOM
                 Document Object Model




the split-personality language
Javascript the language is
mostly compatible
the DOM is the problem area
IE is the problem, but not as bad as
you’d think
Don’t hate the
language, hate the
runtime
environment
the DOM
document


      head                          body

                      div#sidebar               div#main

       div.block       div.block    div.block

           p

textNode
           b
           textNode
window
                   document


      head                          body

                      div#sidebar               div#main

       div.block       div.block    div.block

           p

textNode
           b
           textNode
iterating through the DOM tree
DOM element attributes
DOM element attributes
DOM element attributes
DOM element attributes
DOM element attributes & methods
DOM element attributes & methods
DOM element attributes & methods
node.childNodes
node.innerHTML
finding DOM elements by id
finding DOM elements by tagName
creating new DOM nodes
embedding javascript
Prototype
Development
& Debugging
FireFox
your long-term best bud
FireBug
your new soulmate
inspecting DOM elements: source
inspecting DOM elements: style
inspecting DOM elements: live events
console: errors and filtering things to show
console: logging / inspecting AJAX requests
console: logging / inspecting AJAX requests
the step-thru debugger: new in FireBug .4
breakpoints
step-through debugging
flexible console logging
built-in profiling & testing functionality
live DOM inspector / editor
the ability to send email
Javascript Shell
    no snazzy logo
www.squarefree.com/shell/shell.html
Other Tools & Libraries
         JSUnit MochiKit
         jQuery moo.ajax
                       moo.fx
        TrimPath
Behavior & event:Selectors
    Scriptaculous (fx)
          moo.fx
Links for You
 http://www.slash7.com/
look for the list of presentations under the
             “Goodies” sidebar

More Related Content

What's hot

Let's Learn Ruby - Basic
Let's Learn Ruby - BasicLet's Learn Ruby - Basic
Let's Learn Ruby - Basic
Eddie Kao
 
CoffeeScript presentation
CoffeeScript presentationCoffeeScript presentation
CoffeeScript presentation
John Lynch
 
Happy Programming with CoffeeScript
Happy Programming with CoffeeScriptHappy Programming with CoffeeScript
Happy Programming with CoffeeScript
Eddie Kao
 
Ruby tutorial
Ruby tutorialRuby tutorial
Ruby tutorial
knoppix
 

What's hot (19)

Ruby on Rails for beginners
Ruby on Rails for beginnersRuby on Rails for beginners
Ruby on Rails for beginners
 
[Day16] ydkjs (scope) lexical scope review
[Day16] ydkjs (scope)   lexical scope review [Day16] ydkjs (scope)   lexical scope review
[Day16] ydkjs (scope) lexical scope review
 
Let's Learn Ruby - Basic
Let's Learn Ruby - BasicLet's Learn Ruby - Basic
Let's Learn Ruby - Basic
 
CoffeeScript presentation
CoffeeScript presentationCoffeeScript presentation
CoffeeScript presentation
 
Happy Programming with CoffeeScript
Happy Programming with CoffeeScriptHappy Programming with CoffeeScript
Happy Programming with CoffeeScript
 
Smalltalk on rubinius
Smalltalk on rubiniusSmalltalk on rubinius
Smalltalk on rubinius
 
Ruby tutorial
Ruby tutorialRuby tutorial
Ruby tutorial
 
Intro to java
Intro to javaIntro to java
Intro to java
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Slide Test
Slide TestSlide Test
Slide Test
 
Mongo
MongoMongo
Mongo
 
Ruby Loves Dot Net
Ruby Loves Dot NetRuby Loves Dot Net
Ruby Loves Dot Net
 
When To Use Ruby On Rails
When To Use Ruby On RailsWhen To Use Ruby On Rails
When To Use Ruby On Rails
 
CoffeeScript - An Introduction
CoffeeScript - An IntroductionCoffeeScript - An Introduction
CoffeeScript - An Introduction
 
Calabash automated test
Calabash automated testCalabash automated test
Calabash automated test
 
Into The Box 2018 Automate Your Test
Into The Box 2018 Automate Your Test Into The Box 2018 Automate Your Test
Into The Box 2018 Automate Your Test
 
Dear JavaScript... - Alessandro Cinelli - Codemotion Amsterdam 2018
Dear JavaScript...  - Alessandro Cinelli - Codemotion Amsterdam 2018Dear JavaScript...  - Alessandro Cinelli - Codemotion Amsterdam 2018
Dear JavaScript... - Alessandro Cinelli - Codemotion Amsterdam 2018
 
My month with Ruby
My month with RubyMy month with Ruby
My month with Ruby
 
Developing cross platform desktop application with Ruby
Developing cross platform desktop application with RubyDeveloping cross platform desktop application with Ruby
Developing cross platform desktop application with Ruby
 

Viewers also liked

Viewers also liked (6)

Os Vanlindberg
Os VanlindbergOs Vanlindberg
Os Vanlindberg
 
Beneficiosdelsexo
BeneficiosdelsexoBeneficiosdelsexo
Beneficiosdelsexo
 
EL MUNDO DE LOS COPLEROS II
EL MUNDO DE LOS COPLEROS IIEL MUNDO DE LOS COPLEROS II
EL MUNDO DE LOS COPLEROS II
 
Cyber Recomendaciones
Cyber RecomendacionesCyber Recomendaciones
Cyber Recomendaciones
 
態度
態度態度
態度
 
Data Mining Open Ap Is
Data Mining Open Ap IsData Mining Open Ap Is
Data Mining Open Ap Is
 

Similar to Javascriptbootcamp

javascript teach
javascript teachjavascript teach
javascript teach
guest3732fa
 
JSBootcamp_White
JSBootcamp_WhiteJSBootcamp_White
JSBootcamp_White
guest3732fa
 
A tour on ruby and friends
A tour on ruby and friendsA tour on ruby and friends
A tour on ruby and friends
旻琦 潘
 
CoffeeScript-Ruby-Tuesday
CoffeeScript-Ruby-TuesdayCoffeeScript-Ruby-Tuesday
CoffeeScript-Ruby-Tuesday
Eddie Kao
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison
 

Similar to Javascriptbootcamp (20)

javascript teach
javascript teachjavascript teach
javascript teach
 
JSBootcamp_White
JSBootcamp_WhiteJSBootcamp_White
JSBootcamp_White
 
DSLs in JavaScript
DSLs in JavaScriptDSLs in JavaScript
DSLs in JavaScript
 
Groovy a Scripting Language for Java
Groovy a Scripting Language for JavaGroovy a Scripting Language for Java
Groovy a Scripting Language for Java
 
Efficient JavaScript Development
Efficient JavaScript DevelopmentEfficient JavaScript Development
Efficient JavaScript Development
 
Ruby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developerRuby on Rails survival guide of an aged Java developer
Ruby on Rails survival guide of an aged Java developer
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript Workshop
 
All of Javascript
All of JavascriptAll of Javascript
All of Javascript
 
A tour on ruby and friends
A tour on ruby and friendsA tour on ruby and friends
A tour on ruby and friends
 
Huge web apps web expo 2013
Huge web apps web expo 2013Huge web apps web expo 2013
Huge web apps web expo 2013
 
All of javascript
All of javascriptAll of javascript
All of javascript
 
Ruby for .NET developers
Ruby for .NET developersRuby for .NET developers
Ruby for .NET developers
 
JavaScript Basics - GameCraft Training
JavaScript Basics - GameCraft TrainingJavaScript Basics - GameCraft Training
JavaScript Basics - GameCraft Training
 
Java script unleashed
Java script unleashedJava script unleashed
Java script unleashed
 
CoffeeScript-Ruby-Tuesday
CoffeeScript-Ruby-TuesdayCoffeeScript-Ruby-Tuesday
CoffeeScript-Ruby-Tuesday
 
Agile JavaScript Testing
Agile JavaScript TestingAgile JavaScript Testing
Agile JavaScript Testing
 
Java script core
Java script coreJava script core
Java script core
 
JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4JavaScript 2.0 in Dreamweaver CS4
JavaScript 2.0 in Dreamweaver CS4
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
Ruby Xml Mapping
Ruby Xml MappingRuby Xml Mapping
Ruby Xml Mapping
 

More from oscon2007

J Ruby Whirlwind Tour
J Ruby Whirlwind TourJ Ruby Whirlwind Tour
J Ruby Whirlwind Tour
oscon2007
 
Solr Presentation5
Solr Presentation5Solr Presentation5
Solr Presentation5
oscon2007
 
Os Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman WiifmOs Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman Wiifm
oscon2007
 
Performance Whack A Mole
Performance Whack A MolePerformance Whack A Mole
Performance Whack A Mole
oscon2007
 
Os Lanphier Brashears
Os Lanphier BrashearsOs Lanphier Brashears
Os Lanphier Brashears
oscon2007
 
Os Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman SwpOs Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman Swp
oscon2007
 
Os Berlin Dispelling Myths
Os Berlin Dispelling MythsOs Berlin Dispelling Myths
Os Berlin Dispelling Myths
oscon2007
 
Os Keysholistic
Os KeysholisticOs Keysholistic
Os Keysholistic
oscon2007
 
Os Jonphillips
Os JonphillipsOs Jonphillips
Os Jonphillips
oscon2007
 
Os Urnerupdated
Os UrnerupdatedOs Urnerupdated
Os Urnerupdated
oscon2007
 

More from oscon2007 (20)

J Ruby Whirlwind Tour
J Ruby Whirlwind TourJ Ruby Whirlwind Tour
J Ruby Whirlwind Tour
 
Solr Presentation5
Solr Presentation5Solr Presentation5
Solr Presentation5
 
Os Borger
Os BorgerOs Borger
Os Borger
 
Os Harkins
Os HarkinsOs Harkins
Os Harkins
 
Os Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman WiifmOs Fitzpatrick Sussman Wiifm
Os Fitzpatrick Sussman Wiifm
 
Os Bunce
Os BunceOs Bunce
Os Bunce
 
Yuicss R7
Yuicss R7Yuicss R7
Yuicss R7
 
Performance Whack A Mole
Performance Whack A MolePerformance Whack A Mole
Performance Whack A Mole
 
Os Fogel
Os FogelOs Fogel
Os Fogel
 
Os Lanphier Brashears
Os Lanphier BrashearsOs Lanphier Brashears
Os Lanphier Brashears
 
Os Tucker
Os TuckerOs Tucker
Os Tucker
 
Os Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman SwpOs Fitzpatrick Sussman Swp
Os Fitzpatrick Sussman Swp
 
Os Furlong
Os FurlongOs Furlong
Os Furlong
 
Os Berlin Dispelling Myths
Os Berlin Dispelling MythsOs Berlin Dispelling Myths
Os Berlin Dispelling Myths
 
Os Kimsal
Os KimsalOs Kimsal
Os Kimsal
 
Os Pruett
Os PruettOs Pruett
Os Pruett
 
Os Alrubaie
Os AlrubaieOs Alrubaie
Os Alrubaie
 
Os Keysholistic
Os KeysholisticOs Keysholistic
Os Keysholistic
 
Os Jonphillips
Os JonphillipsOs Jonphillips
Os Jonphillips
 
Os Urnerupdated
Os UrnerupdatedOs Urnerupdated
Os Urnerupdated
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Recently uploaded (20)

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 

Javascriptbootcamp