Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High performance websites session1

1,506 views

Published on

Javascript hints and introduction to JQuery

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 />

×