HTML CSS JavaScript jQuery Training

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

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

3

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

4

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

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

6

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
7

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

8

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

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

10

Web Applications

Static Page
Request

11

Web Applications

Dymamic Page
Request

12

The Structure of a HTML Document
<?xml ?>
<!DOCTYPE/>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>

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>
</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

15

Core Elements
Headings
ID, class, title
BR, HR, P, SPAN, DIV
Blockquote, Pre
Lists – OL, UL

16

CSS
Positioning
Display
Pseudo Classes
Pseudo Elements

18

The Three Layers

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

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.

22

DOM Access & Manipulation
getElementById
getElementsByTagName

23

Events
Event Handlers
this
Event Listeners
The event Object - Prevent Default
Event Propagation – Capturing & Bubbling

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

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

27

AJAX

28

XMLHttpRequest
IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);
Open(Type, Url)
Send(data)
XMLHttpRequest object is non-reusable
responseXML and responseText

29

jQuery Overview
What is jQuery actually?
How browsers see HTML
JSON Overview
Downloading jQuery
Including jQuery in your pages
Hello World

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”)

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

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

34

DOM Traversal
.filter()
.siblings()
.parent(), .children(), .parents()
.next(), .nextAll(), .prev(), .prevAll(), .andSelf()
.find()

Manipulating Styles
.addClass()
.removeClass()
.css(“height”, “35px”)

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!
36

Effects & Animations
Hide, Show
fadeIn, fadeOut
Toggle
slideUp, slideDown
slideToggle
.animate()

37

Working with Forms
Form Selectors
:text
:checkbox
:radio
:image
:submit
:reset
:password
:file
:input
:button
:enabled
:disabled
:checked
:selected

38

DOM Manipulation
.text()
.html()
.val()
.append(), prepend()
.remove()
.empty()
.attr(), .removeAttr()
addClass(), removeClass()
Creating DOM Nodes
insertAfter, after, insertBefore, before
prependTo, appendTo
.wrap()

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){
}
})

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})

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

42

OOJ – Object Oriented JavaScript
JavaScript is a Prototype based Language
Closures
JSON
Extending Native Objects
Getter/Setter
Arrays & Objects – Library -> Books -> Authors

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.

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);

45

AJAX

46

XMLHttpRequest
IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);
Open(Type, Url)
Send(data)
XMLHttpRequest object is non-reusable
responseXML and responseText

47

Design Patterns in JavaScript
Singleton
Module
Module Syntax
Accesing Globals
Module Export
Factory

48

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

50

HTML CSS JavaScript jQuery Training

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to HTML CSS JavaScript jQuery Training

Similar to HTML CSS JavaScript jQuery Training (20)

Recently uploaded

Recently uploaded (20)

HTML CSS JavaScript jQuery Training