![Selectors Contd..
:first-child, :last:child, :only-child :nth-child(n)
$(“li:first-child”);
$(“tr:last-child”);
$(“img:only-child”);
$(“tr:nth-child(2n)”);
Attribute Selectors
Has Attribute: $(“img[alt]”);
Begins With: $(“a[href^=mailto:]”);
Ends With: $(“a[href$=.pdf]”);
Contains: $(“a[href*=microsoft]”);
Equals: $(“:checkbox[checked=true]”)
:not(s), :empty, :eq(n), :contains(s)
:even, :odd
© Copyright SREENATH H B, 2011
33](https://image.slidesharecdn.com/htmlcssjsjquery-110813003621-phpapp01/85/HTML-CSS-JavaScript-jQuery-Training-33-320.jpg)
![JSON
var myJSONObject = {
“People":
[
{“Name": “Tom", “Age": “25", “Email": “tom@abc.com"},
{“Name": “Dick", “Age": “24", “Email": “dick@xyz.com"},
{“Name": “Harry", “Age": “26", “Email": “harry@pqr.com"}
]
};
var myObject = JSON.parse(myJSONtext);
var myJSONText = JSON.stringify(myObject, replacer);
© Copyright SREENATH H B, 2011
45](https://image.slidesharecdn.com/htmlcssjsjquery-110813003621-phpapp01/85/HTML-CSS-JavaScript-jQuery-Training-45-320.jpg)
HTML CSS JavaScript jQuery Training
- 1. Sreenath H B +91 988 646 5897 mail@sreenath.net © Copyright SREENATH H B, 2011 http://sreenath.net
- 2. Training Agenda for HTML, CSS, JavaScript & jQuery Day 1 Session 1: Web Terminologies HTML Basics Lab: Our First HTML Page Session 2: CSS Basics Lab: Creating a 3 Column Layout Page Day 2: Session 1: HTML Forms Working with a Server Side Technology (ASP.NET) Lab: Creating a User Registration Form Session 2: Background Images, Pseudo Classes, Sprites Lab: Styling the User Registration Form © Copyright SREENATH H B, 2011 2
- 3. Training Agenda Contd.. Day 3: Session 1: CSS Menus, Lists and Rounded Corners Lab: Adding a rounded cornered Drop Down menu to the User Registration Form Session 2: Browser Inconsistencies and how to handle them Lab: The Complete User Registration Process Mobile Web Design Overview Day 4: Session 1: JavaScript Overview Lab: JavaScript Programming Basics Session 2: DOM, HTML Forms and JavaScript Lab: User Registration Form Validation © Copyright SREENATH H B, 2011 3
- 4. Training Agenda Contd.. Day 5: Session 1: Events and Event Handlers Error Handling and Debugging JavaScript Lab: Creating a JavaScript Modal Dialog Session 2: AJAX Overview Lab: Loading a remote file asynchronously Day 6 Session 1: jQuery Overview Lab: Alternate Row Styling Session 2: More jQuery Lab: Building a CSS Style Switcher © Copyright SREENATH H B, 2011 4
- 5. Training Agenda Contd.. Day 7: Session 1: XML, JSON and JSONP AJAX in jQuery Lab: Ajaxifying the user registration form Session 2: Authoring Plugins Lab: Creating a Shadow Plugin` Performance Enhancement Techniques in Web Development Accessibility Guidelines and W3C Standards A note about SEO, Caching and Cookies © Copyright SREENATH H B, 2011 5
- 6. Training Agenda for Advanced JavaScript & jQuery Day 1 : JavaScript Basics Session 1: Anatomy of a Web Page JavaScript Basics Types & Special Objects in JavaScript Lab: Basics of JavaScript Programming DOM Access & Manipulation Session 2: Lab: DOM Access & Manipulation JavaScript Events and Event Handlers JavaScript and Forms Errors and Debugging Techniques in JavaScript Lab: A User Registration Form © Copyright SREENATH H B, 2011 6
- 7. Training Agenda Contd.. Day 2: JavaScript Advanced Session 1: Object Oriented JavaScript Functions as First Class Objects Scopes & Closures Objects & JSON Lab: Objects in JavaScript Session 2: JS Prototype Syntax Coding Standards & Design patterns Unobtrusive Programming Namespacing effectively Configuration Objects Private & Public Singleton pattern Module pattern Factory Pattern Lab: Events Unobtrusively, Object Members, Implementing Patterns, Adding methods to existing objects © Copyright SREENATH H B, 2011 7
- 8. Training Agenda Contd.. Day 3: JavaScript & Ajax Session 1: Ajax overview Ajax using JavaScript Content Types & Mime Types Overview Lab: The Ajax Dictionary Session 2: Accessibility & Fallback Techniques Performance & Security Considerations Browser Considerations Lab: Design for Accessibility © Copyright SREENATH H B, 2011 8
- 9. Training Agenda Contd.. Day 4: jQuery Session 1: jQuery Overview Selectors in jQuery The jQuery Context & the jQuery Object Each Lab: Page Load, Selectors & Basic Effects Session 2: Binding Events Ajax using jQuery Lab: Ajax enabled Accordion Post Assessment © Copyright SREENATH H B, 2011 9
- 10. Components of the Web Computer Networks Network Addresses Browsers and Web Servers Hyper Text Transfer Protocol (HTTP) Hyper Text Markup Language (HTML) Web Applications © Copyright SREENATH H B, 2011 10
- 11. Web Applications Static Page Request © Copyright SREENATH H B, 2011 11
- 12. Web Applications Dymamic Page Request © Copyright SREENATH H B, 2011 12
- 13. The Structure of a HTML Document <?xml ?> <!DOCTYPE/> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML> © Copyright SREENATH H B, 2011 13
- 14. !DOCTYPE <?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" <!DOCTYPE html PUBLIC "- encoding="UTF-8"?> //W3C//DTD XHTML 1.0 <!DOCTYPE HTML PUBLIC "- Transitional//EN" //W3C//DTD HTML 4.01 "http://www.w3.org/TR/xhtml1/ Transitional//EN" DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/html4/loo se.dtd"> <html xmlns="http://www.w3.org/199 <html> 9/xhtml" xml:lang="en" <head> lang="en"> <title></title> <head> </head> <title></title> <body </head> </body> <body> </html> </body> © Copyright SREENATH H B, 2011 </html> 14
- 15. The Rules of HTML / XHTML HTML Is Not Case Sensitive, XHTML Is HTML/XHTML Attribute Values May Be Case Sensitive HTML/XHTML Is Sensitive to a Single White Space Character XHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused Elements May Minimize Elements Should Nest In Correct Order Attribute Values Should Be Quoted Browsers Ignore Unknown Attributes and Elements © Copyright SREENATH H B, 2011 15
- 16. Core Elements Headings ID, class, title BR, HR, P, SPAN, DIV Blockquote, Pre Lists – OL, UL © Copyright SREENATH H B, 2011 16
- 17. © Copyright SREENATH H B, 2011
- 18. CSS Positioning Display Pseudo Classes Pseudo Elements © Copyright SREENATH H B, 2011 18
- 19. © Copyright SREENATH H B, 2011
- 20. The Three Layers © Copyright SREENATH H B, 2011 20
- 21. JavaScript Data Data Types – Number, String, Boolean Date Arrays, Associative Arrays If Statement Loops – While, Do-While, For Functions Scope of Variables Objects Regular Expressions © Copyright SREENATH H B, 2011 21
- 22. Lab 1: JavaScript Basics Write a program in which you specify a date and the program outputs the number of days, months, years and weeks between the specified date and today. © Copyright SREENATH H B, 2011 22
- 23. DOM Access & Manipulation getElementById getElementsByTagName © Copyright SREENATH H B, 2011 23
- 24. Events Event Handlers this Event Listeners The event Object - Prevent Default Event Propagation – Capturing & Bubbling © Copyright SREENATH H B, 2011 24
- 25. DOM 0 Event Handler W3C DOM Event Listener onblur blur onfocus focus onchange change onmouseover mouseover onmouseout mouseout onmousemove mousemove onmousedown mousedown onmouseup mouseup onclick click ondblclick dblclick onkeydown keydown onkeyup keyup onkeypress keypress onsubmit submit onload load © onunload B, 2011 Copyright SREENATH H unload 25
- 26. Debugging and Error Handling How to Debug? Tools at hand – Firebug! JavaScript Debugger now supported in IE 8 onwards. Error Handling with Try-Catch © Copyright SREENATH H B, 2011 26
- 27. Object Oriented JavaScript Why objects? Creating Object Definitions Reusing Objects JSON Overview Advanced Concepts Passing Parameters to Event Handlers/Listeners Functions accepting arbitrary number of parameters JavaScript Closures © Copyright SREENATH H B, 2011 27
- 28. AJAX © Copyright SREENATH H B, 2011 28
- 29. XMLHttpRequest IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”); Open(Type, Url) Send(data) XMLHttpRequest object is non-reusable responseXML and responseText © Copyright SREENATH H B, 2011 29
- 30. © Copyright SREENATH H B, 2011
- 31. jQuery Overview What is jQuery actually? How browsers see HTML JSON Overview Downloading jQuery Including jQuery in your pages Hello World © Copyright SREENATH H B, 2011 31
- 32. Selectors – The Heart of jQuery Element Selector $(“element”) ID Selector $(“#id”) Class Selector $(“.classname”) Ancestor Descendant $(“E F”) Parent Child $(“E > F”) Siblings – Adjacent & General Adjacent Sibling : $(“E + F”) General Siblings : $(“E ~ F”); Multiple Selectors $(“E, F, G”) © Copyright SREENATH H B, 2011 32
- 33. Selectors Contd.. :first-child, :last:child, :only-child :nth-child(n) $(“li:first-child”); $(“tr:last-child”); $(“img:only-child”); $(“tr:nth-child(2n)”); Attribute Selectors Has Attribute: $(“img[alt]”); Begins With: $(“a[href^=mailto:]”); Ends With: $(“a[href$=.pdf]”); Contains: $(“a[href*=microsoft]”); Equals: $(“:checkbox[checked=true]”) :not(s), :empty, :eq(n), :contains(s) :even, :odd © Copyright SREENATH H B, 2011 33
- 34. jQuery Tid-Bits The jQuery Object Looping with each(); this Chaining Closures Accessing DOM Objects Array Subscript – Unsafe .get(n) Making peace with other libraries – noConflict() Caching for performance © Copyright SREENATH H B, 2011 34
- 35. DOM Traversal .filter() .siblings() .parent(), .children(), .parents() .next(), .nextAll(), .prev(), .prevAll(), .andSelf() .find() Manipulating Styles .addClass() .removeClass() .css(“height”, “35px”) © Copyright SREENATH H B, 2011 35
- 36. Events Unobtrusive Programming Capturing vs. Bubbling; StopPropagation, preventDefault The Universal Page Load Binding Events to Elements, Triggering Events via Code Shorthands Blur, focus, select Change Click, Dblclick Mousedown, mouseup, mouseover, mouseout, mousemove Keyup, keydown, keypress Select Event Handler Context Passing additional parameters to events Compound Events Toggle, Hover Live, Die & Delegate! © Copyright SREENATH H B, 2011 36
- 37. Effects & Animations Hide, Show fadeIn, fadeOut Toggle slideUp, slideDown slideToggle .animate() © Copyright SREENATH H B, 2011 37
- 38. Working with Forms Form Selectors :text :checkbox :radio :image :submit :reset :password :file :input :button :enabled :disabled :checked :selected © Copyright SREENATH H B, 2011 38
- 39. DOM Manipulation .text() .html() .val() .append(), prepend() .remove() .empty() .attr(), .removeAttr() addClass(), removeClass() Creating DOM Nodes insertAfter, after, insertBefore, before prependTo, appendTo .wrap() © Copyright SREENATH H B, 2011 39
- 40. AJAX .load(“a.html”) .getJSON(“b.json”); .get(“c.xml”); .post(“d.php”); .ajax({ url:””, type:”GET”, dataType: “html”, success: function(data){ }, error: function(xhr){ } }) © Copyright SREENATH H B, 2011 40
- 41. Authoring Plugins (function($){ $.fn.myPlugin = function(options){ var defaults = { }; options = $.extend(defaults, options); return this.each(function(){ //My Code for selected elements }); } })(jQuery); //Calling $(“selector”).myPlugin({options}) © Copyright SREENATH H B, 2011 41
- 42. jQuery Best Practices – Tips & Tricks Select directly using an ID selector where possible Cache objects if using repeatedly Chain as long as possible Reduce Direct DOM Manipulation Be wary of selectors in loops or each() Leverage Event Delegation where possible Defer loading to window.load Don’t use jQuery where its not needed! Conditionally loading jQuery locally © Copyright SREENATH H B, 2011 42
- 43. OOJ – Object Oriented JavaScript JavaScript is a Prototype based Language Closures JSON Extending Native Objects Getter/Setter Arrays & Objects – Library -> Books -> Authors © Copyright SREENATH H B, 2011 43
- 44. Lab Create a class for Cartesian Co-Ordinate System of Points. A Point has 2 properties, Latitude and Longitude. Create 2 point objects, set their co-ordinates using their constructors and provide a member function to find the simple X & Y distance between them. Distance can be represented as another Point object. X distance = x1.Longitude – x2.Longitude Y distance = x1.Latitude – x1.Latitude User interactivity is a bonus. © Copyright SREENATH H B, 2011 44
- 45. JSON var myJSONObject = { “People": [ {“Name": “Tom", “Age": “25", “Email": “tom@abc.com"}, {“Name": “Dick", “Age": “24", “Email": “dick@xyz.com"}, {“Name": “Harry", “Age": “26", “Email": “harry@pqr.com"} ] }; var myObject = JSON.parse(myJSONtext); var myJSONText = JSON.stringify(myObject, replacer); © Copyright SREENATH H B, 2011 45
- 46. AJAX © Copyright SREENATH H B, 2011 46
- 47. XMLHttpRequest IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”); Open(Type, Url) Send(data) XMLHttpRequest object is non-reusable responseXML and responseText © Copyright SREENATH H B, 2011 47
- 48. Design Patterns in JavaScript Singleton Module Module Syntax Accesing Globals Module Export Factory © Copyright SREENATH H B, 2011 48
- 49. References Dive Into Accessibility http://diveintoaccessibility.org/ Dive into HTML5 http://diveintohtml5.org/ Books Pro JavaScript Design Patterns by Dustin Diaz Object Oriented JavaScript by Stoyan Stefanov Advanced JavaScript 3rd Ed by Chuck Easttom Learning jQuery 1.3 © Copyright SREENATH H B, 2011 50