High performance websites session1

1,282
-1

Published on

Javascript hints and introduction to JQuery

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

  • Be the first to like this

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

No notes for slide

High performance websites session1

  1. 1. High performancewebsites & Best practices<br />Session 1: JavaScript hints and introduction to JQuery<br />
  2. 2. User interface<br />Structure <br />Presentation<br />Behavior<br />: HTML<br />: CSS<br />: JavaScript<br />
  3. 3. Structure : HTML<br />What’s the different parts of the content and how they are related.<br />Presentation : CSS<br />How the content should be displayed and formatted visually.<br />Behavior : JavaScript<br />How the content react based on the user interaction.<br />
  4. 4. Why this separation?<br />Portability<br />Maintainability<br />Better performance<br />Accessibility<br />…..<br />>> ility # 1<br />
  5. 5. JavaScript<br />JavaScript make pages interactive.<br />For example: you can show and hide sections of the page, add client side validations, drag and drop elements on the page, and much more.<br />
  6. 6. How to get JavaScript in my page?<br />Inline script<br />BAD<br /><ul><li>Embedded script</li></ul>Ok<br /><ul><li>External script</li></ul>Perfect<br />
  7. 7. How does JavaScript interact with the page?<br />Through Dom<br />Dom is a tree of objects<br /><html><br /> <body><br /> <p id=“first”></p><br /> <p id=“second”><br /> <strong>text</strong><br /> </p><br /> <p id=“third”></p><br /> </body><br /></html><br />Window<br /> - document<br /> |-p #first<br /> |-p #second<br /> | -strong<br /> -p #third<br />
  8. 8. Dom terminology<br />HTMLJavaScript<br />Element Node<br />Attribute Property<br />
  9. 9. How can I grab stuff?<br />Get Methods<br />getElementById<br /> Gets one element.<br />JavaScript:<br /> document.getElementById(‘about’);<br />CSS:<br /> #about {}<br />HTML:<br /> <div id=“about”></div><br />
  10. 10. getElementsByTagName<br /> Gets many elements.<br />JavaScript:<br /> document.getElementById(‘about’).getElementsByTagName(‘p’);<br />CSS:<br /> #about p{}<br />HTML:<br /> <div id=“about”><br /> <p id=“first”></p><br /> <p id=“second”></p><br /> </div<br />
  11. 11. By class? By CSS selector?<br />
  12. 12. How else I can grab stuff?<br />p.parent<br />p.childNode<br />p.firstChild<br />p.lastChild<br />s.previousSibiling<br />s.nextSibiling<br />
  13. 13. I have some elements, How do I make them do stuff?<br />Event<br /> Occur whenever actions happen on the page.<br />Most common:<br /><ul><li>click
  14. 14. mouseover
  15. 15. mouseout
  16. 16. load
  17. 17. keypress
  18. 18. focus</li></li></ul><li>You can attach listener functions to an event on an element.<br />
  19. 19. Hint: Object detection<br />Don’t test for browsers, test for capabilities.<br />Don’t use this:<br />If(navigator.appName == “IE”)<br />el.doSomething();<br />Use this:<br />If(el.SomeIeMethod){<br />el.SomeIeMethod();<br />}<br />
  20. 20. Now I have event listeners attached.What can I do with them?<br />ANYTHING<br />
  21. 21. You can change the style<br />
  22. 22. What is “this”?<br />Reference to the object owns the function.<br />So you can attach the same event listener to multiple elements.<br />
  23. 23. But now we’re mixing presentation and behavior! Oh No<br />You can use classes<br />
  24. 24.
  25. 25. What if my elements already have some classes?<br /><p class=“special”></p><br />this.className = ‘inactive’;<br /><p class=“inactive”></p><br />Whoops!<br />hasClass / addClass / removeClass<br />
  26. 26. How hard is JavaScript to learn?<br />…..<br />
  27. 27. Fast hints:<br />Case sensitivity<br />Optional semi columns<br /> a=3;<br /> b=3;<br /> a=3; b=4;<br /> return<br /> true;<br /> return true;<br />JSLint.com<br />
  28. 28. Main data types<br />Number<br />Strings<br />Boolean values<br />null<br />“undefined” : has not been declared or has not given a value.<br />Variable typing:<br />untyped<br />
  29. 29. Declaring variables:<br />var<br />Without are declared global variables.<br />var a = 1;<br />a = 1;<br />
  30. 30. JQuery<br />
  31. 31. What does JQuery do for me? And why to use it?<br />Write less do more<br />Cross browser<br />Simplifies HTML document traversing<br />Simplifies event handling<br />Simplifies animating<br />Simplifies Ajax interactions<br />
  32. 32. How to install JQuery?<br />http://jquery.com/<br />Visual Studio Documentation.<br />
  33. 33. Simple example<br />….<br />

×