0
Introduction to the
 wonderful world of JS.
• JavaScript - pitfalls and gotchas
• jQuery - a JavaScript library
• Examples...
Jakob Torp

• @googletorp
• Work in Reveal IT - mostly Drupal
  developer/consultant.
• Drupal 1.3 years
JavaScript
pitfalls and gotchas
JavaScript OO
   programming language
• Object oriented.
• No relations to Java. (LiveScript)
• Purpose is to make the bro...
JavaScript happens in
    the browser.
Boolean
type conversions
Object declarations.



Last comma causes syntax error in IE
Function declarations.
Functions can be
passed as variables.
Functional scope
Closure.
jQuery
a JavaScript library
Why use a library?

• Development framework like Drupal.
• Reuse code - faster development.
• Good documentation.
• Help s...
jQuery motto
  “write less do more”
• DOM - Document Object Model.
• CSS selection - fast and easy (Sizzle)
• Event handle...
DOM
CSS selection




     VS:
Events & eventhandlers

• Events - user interaction:
  click, focus, blur ect.
• Event-handlers - Execute code for specific...
jQuery chaining
jQuery returns jQuery
Ajax simplified
jQuery plugins


Flot module
drupal_add_js()

• Add your own js file on a given page.
• Add PHP variables to the global Drupal
  variable.
• Possible to...
Examples & questions
Upcoming SlideShare
Loading in...5
×

Introduction to the wonderful world of JavaScript

1,080

Published on

An introduction to the world of JavaScript, covering some of the pitfalls and ending with a overview of jQuery, the js lib that ships with Drupal.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,080
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide






















  • Transcript of "Introduction to the wonderful world of JavaScript"

    1. 1. Introduction to the wonderful world of JS. • JavaScript - pitfalls and gotchas • jQuery - a JavaScript library • Examples and questions
    2. 2. Jakob Torp • @googletorp • Work in Reveal IT - mostly Drupal developer/consultant. • Drupal 1.3 years
    3. 3. JavaScript pitfalls and gotchas
    4. 4. JavaScript OO programming language • Object oriented. • No relations to Java. (LiveScript) • Purpose is to make the browser interactive. • Created by NetScape in 2 weeks! • Reverse engineered by Microsoft. (browser war) • Official name: ECMAScript.
    5. 5. JavaScript happens in the browser.
    6. 6. Boolean type conversions
    7. 7. Object declarations. Last comma causes syntax error in IE
    8. 8. Function declarations.
    9. 9. Functions can be passed as variables.
    10. 10. Functional scope
    11. 11. Closure.
    12. 12. jQuery a JavaScript library
    13. 13. Why use a library? • Development framework like Drupal. • Reuse code - faster development. • Good documentation. • Help solve browser issues. • Help optimising your code.
    14. 14. jQuery motto “write less do more” • DOM - Document Object Model. • CSS selection - fast and easy (Sizzle) • Event handlers - click, focus etc. • AJAX & animations • Plugins - works like a Drupal module.
    15. 15. DOM
    16. 16. CSS selection VS:
    17. 17. Events & eventhandlers • Events - user interaction: click, focus, blur ect. • Event-handlers - Execute code for specific events. (function).
    18. 18. jQuery chaining jQuery returns jQuery
    19. 19. Ajax simplified
    20. 20. jQuery plugins Flot module
    21. 21. drupal_add_js() • Add your own js file on a given page. • Add PHP variables to the global Drupal variable. • Possible to set scope and other options. • Edge case, drupal_get_js()
    22. 22. Examples & questions
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×