High performance websites session1
•
0 gostou•529 visualizações
Javascript hints and introduction to JQuery
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a High performance websites session1
Semelhante a High performance websites session1 (20)
Último
Último (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.