HTML CSS JavaScript & jQuery Prez
Transcript of HTML CSS JavaScript & jQuery Prez
![Page 2: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/11.jpg)
1111
Web Applications
Static Page Request
![Page 12: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/12.jpg)
1212
Web Applications
Dymamic Page Request
![Page 13: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/13.jpg)
1313
The Structure of a HTML Document
<?xml ?>
<!DOCTYPE/>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
![Page 14: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/16.jpg)
1616
Core Elements
Headings
ID, class, title
BR, HR, P, SPAN, DIV
Blockquote, Pre
Lists – OL, UL
![Page 17: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/17.jpg)
![Page 18: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/18.jpg)
1818
CSS
Positioning
Display
Pseudo Classes
Pseudo Elements
![Page 19: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/19.jpg)
![Page 20: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/20.jpg)
2020
The Three Layers
![Page 21: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/23.jpg)
2323
DOM Access & Manipulation
getElementById
getElementsByTagName
![Page 24: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/24.jpg)
2424
Events
Event Handlers
this
Event Listeners
The event Object - Prevent Default
Event Propagation – Capturing & Bubbling
![Page 25: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/28.jpg)
2828
AJAX
![Page 29: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/30.jpg)
3030
Design Patterns in JavaScript
Creational Pattern
Constructor Pattern
Singleton Pattern
Module Pattern
Façade Pattern
Factory Pattern
![Page 31: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/31.jpg)
![Page 32: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/38.jpg)
3838
Effects & Animations
Hide, Show
fadeIn, fadeOut
Toggle
slideUp, slideDown
slideToggle
.animate()
![Page 39: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/47.jpg)
4747
AJAX
![Page 48: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/49.jpg)
4949
Design Patterns in JavaScript
Singleton
Module
Module Syntax
Accesing Globals
Module Export
Factory
![Page 50: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/html5/thumbnails/50.jpg)
5050
Mobile Web Design
![Page 51: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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: HTML CSS JavaScript & jQuery Prez](https://reader030.fdocument.pub/reader030/viewer/2022021022/6204ec434c89d3190e0c91c6/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/