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