Movatterモバイル変換

Sreenath H B +91 988 646 5897 mail@sreenath.net© Copyright SREENATH H B, 2011 http://sreenath.net

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

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

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

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

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

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

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

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

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

Web Applications Static Page Request© Copyright SREENATH H B, 2011 11

Web Applications Dymamic Page Request© Copyright SREENATH H B, 2011 12

The Structure of a HTML Document <?xml ?> <!DOCTYPE/> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML>© Copyright SREENATH H B, 2011 13

!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

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

Core Elements Headings ID, class, title BR, HR, P, SPAN, DIV Blockquote, Pre Lists – OL, UL© Copyright SREENATH H B, 2011 16

CSS Positioning Display Pseudo Classes Pseudo Elements© Copyright SREENATH H B, 2011 18

The Three Layers© Copyright SREENATH H B, 2011 20

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

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

DOM Access & Manipulation getElementById getElementsByTagName© Copyright SREENATH H B, 2011 23

Events Event Handlers this Event Listeners The event Object - Prevent Default Event Propagation – Capturing & Bubbling© Copyright SREENATH H B, 2011 24

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

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

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

AJAX© Copyright SREENATH H B, 2011 28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Movatterモバイル変換

Change Language

HTML CSS JavaScript jQuery Training

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to HTML CSS JavaScript jQuery Training

Recently uploaded

HTML CSS JavaScript jQuery Training