SreenathH B +91 988 646 5897 [email protected]...
Transcript of SreenathH B +91 988 646 5897 [email protected]...
![Page 2: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/2.jpg)
22
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
![Page 3: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/3.jpg)
33
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
![Page 4: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/4.jpg)
44
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
![Page 5: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/5.jpg)
55
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
![Page 6: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/6.jpg)
66
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
![Page 7: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/7.jpg)
77
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
![Page 8: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/8.jpg)
88
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
![Page 9: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/9.jpg)
99
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
![Page 10: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/10.jpg)
1010
Components of the Web
Computer Networks
Network Addresses
Browsers and Web Servers
Hyper Text Transfer Protocol (HTTP)
Hyper Text Markup Language (HTML)
Web Applications
![Page 11: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/11.jpg)
1111
Web Applications
Static Page Request
![Page 12: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/12.jpg)
1212
Web Applications
Dymamic Page Request
![Page 13: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/13.jpg)
1313
The Structure of a HTML Document
<?xml ?>
<!DOCTYPE/>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
![Page 14: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/14.jpg)
1414
!DOCTYPE
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
![Page 15: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/15.jpg)
1515
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
![Page 16: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/16.jpg)
1616
Core Elements
Headings
ID, class, title
BR, HR, P, SPAN, DIV
Blockquote, Pre
Lists – OL, UL
![Page 17: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/17.jpg)
![Page 18: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/18.jpg)
1818
CSS
Positioning
Display
Pseudo Classes
Pseudo Elements
![Page 19: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/19.jpg)
![Page 20: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/20.jpg)
2020
The Three Layers
![Page 21: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/21.jpg)
2121
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
![Page 22: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/22.jpg)
2222
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.
![Page 23: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/23.jpg)
2323
DOM Access & Manipulation
getElementById
getElementsByTagName
![Page 24: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/24.jpg)
2424
Events
Event Handlers
this
Event Listeners
The event Object - Prevent Default
Event Propagation – Capturing & Bubbling
![Page 25: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/25.jpg)
2525
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 unload
![Page 26: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/26.jpg)
2626
Debugging and Error Handling
How to Debug?
Tools at hand – Firebug!
JavaScript Debugger now supported in IE 8 onwards.
Error Handling with Try-Catch
![Page 27: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/27.jpg)
2727
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
![Page 28: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/28.jpg)
2828
AJAX
![Page 29: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/29.jpg)
2929
XMLHttpRequest
IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);
Open(Type, Url)
Send(data)
XMLHttpRequest object is non-reusable
responseXML and responseText
![Page 30: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/30.jpg)
3030
Design Patterns in JavaScript
Creational Pattern
Constructor Pattern
Singleton Pattern
Module Pattern
Façade Pattern
Factory Pattern
![Page 31: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/31.jpg)
![Page 32: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/32.jpg)
3232
jQuery Overview
What is jQuery actually?
How browsers see HTML
JSON Overview
Downloading jQuery
Including jQuery in your pages
Hello World
![Page 33: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/33.jpg)
3333
Selectors – The Heart of jQuery
Element Selector
$(“element”)
ID Selector
$(“#id”)
Class Selector
$(“.classname”)
Ancestor Descendant$(“E F”)
Parent Child$(“E > F”)
Siblings – Adjacent & GeneralAdjacent Sibling : $(“E + F”)
General Siblings : $(“E ~ F”);
Multiple Selectors$(“E, F, G”)
![Page 34: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/34.jpg)
3434
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 SelectorsHas 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
![Page 35: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/35.jpg)
3535
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
![Page 36: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/36.jpg)
3636
DOM Traversal
.filter()
.siblings()
.parent(), .children(), .parents()
.next(), .nextAll(), .prev(), .prevAll(), .andSelf()
.find()
Manipulating Styles
.addClass()
.removeClass()
.css(“height”, “35px”)
![Page 37: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/37.jpg)
3737
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!
![Page 38: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/38.jpg)
3838
Effects & Animations
Hide, Show
fadeIn, fadeOut
Toggle
slideUp, slideDown
slideToggle
.animate()
![Page 39: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/39.jpg)
3939
Working with Forms
Form Selectors
:text
:checkbox
:radio
:image
:submit
:reset
:password
:file
:input
:button
:enabled
:disabled
:checked
:selected
![Page 40: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/40.jpg)
4040
DOM Manipulation
.text()
.html()
.val()
.append(), prepend()
.remove()
.empty()
.attr(), .removeAttr()
addClass(), removeClass()
Creating DOM Nodes
insertAfter, after, insertBefore, before
prependTo, appendTo
.wrap()
![Page 41: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/41.jpg)
4141
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){
}
})
![Page 42: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/42.jpg)
4242
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})
![Page 43: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/43.jpg)
4343
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
![Page 44: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/44.jpg)
4444
OOJ – Object Oriented JavaScript
JavaScript is a Prototype based Language
Closures
JSON
Extending Native Objects
Getter/Setter
Arrays & Objects – Library -> Books -> Authors
![Page 45: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/45.jpg)
4545
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.
![Page 46: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/46.jpg)
4646
JSON
var myJSONObject = {
“People":
[
{“Name": “Tom", “Age": “25", “Email": “[email protected]"},
{“Name": “Dick", “Age": “24", “Email": “[email protected]"},
{“Name": “Harry", “Age": “26", “Email": “[email protected]"}
]
};
var myObject = JSON.parse(myJSONtext);
var myJSONText = JSON.stringify(myObject, replacer);
![Page 47: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/47.jpg)
4747
AJAX
![Page 48: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/48.jpg)
4848
XMLHttpRequest
IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);
Open(Type, Url)
Send(data)
XMLHttpRequest object is non-reusable
responseXML and responseText
![Page 49: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/49.jpg)
4949
Design Patterns in JavaScript
Singleton
Module
Module Syntax
Accesing Globals
Module Export
Factory
![Page 50: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/50.jpg)
5050
Mobile Web Design
![Page 51: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/51.jpg)
5151
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
High Performance String Concatenation
http://www.sitepoint.com/javascript-fast-string-concatenation/
HTML5 Forms Playground
http://wufoo.com/html5/
Font Kit Generator
http://www.fontsquirrel.com/fontface/generator
Browser Compatibility Docs
http://www.quirksmode.org/
![Page 52: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/52.jpg)
5252
References contd..
14 Days of jQuery
http://jquery14.com/
jQuery | Absolute Beginners Series
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-day-2/
jQuery Best Practices
http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/
Net.Tuts+
http://net.tutsplus.com/
JavaScript Playground Online
http://jsfiddle.net/
CSS3 Fluid Less Framework
http://lessframework.com/
CSS Frameworks
http://960.gs/, http://www.blueprintcss.org/
![Page 53: SreenathH B +91 988 646 5897 mail@sreenath.net …sreenath.net/downloads/HTML_CSS_JS_jQuery.pdfXHTML/HTML Follows a Content Model Elements Should Have Close Tags Unless Empty Unused](https://reader034.fdocuments.in/reader034/viewer/2022050112/5f49736653dd2e747328c829/html5/thumbnails/53.jpg)
5353
References contd..
HTML5 Video for All
http://camendesign.com/code/video_for_everybody
Flowplayer
http://flowplayer.org/
SWFObject
http://code.google.com/p/swfobject/
SWFUpload
http://swfupload.org/
Miro Video Converter
http://www.mirovideoconverter.com/