3. WWW
Computer Networks
Network Addresses
Browsers and Web Servers
Hyper Text Transfer Protocol (HTTP)
Hyper Text Markup Language (HTML)
Web Applications
6. HTML
Basic Structure
DTD
Elements, Tags, Nodes
Attributes, Properties, Values
Forms
GET, POST …
7. The Rules of HTML
HTML Attribute Values May Be Case Sensitive
HTML Is Sensitive to a Single White Space Character
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
8. Core Elements & Attributes
Headings
ID, name, class, title, alt
BR, HR,
P, SPAN, DIV
Blockquote, Pre
Lists – OL, UL
9. HTML Forms
Input
Text
Password
Hidden
Submit
Button
Checkbox
Radio
Reset
File
Image
Select
Textarea
10. HTML5
New Input Types
Color, Date, Datetime, Email, Month, Number, Range, Search, Tel, Url,
Week
New Attributes
autocomplete, autofocus, autosave, inputmode, list, max, min, multiple,
pattern, placeholder, readonly, required, step
New Semantic Elements
section, nav, article, aside, hgroup, header, footer, time, mark, main, data,
math, datalist, progress, meter, menu
Canvas, SVG
Video, Audio
Geolocation API, Local Storage API & Offline Apps
Full Screen, Vibration, Media, Web Sockets API
http://diveintohtml5.info/
16. JavaScript
History: http://youtu.be/v2ifWcnQs6M (First 13.5 min only)
Where to add scripts?
How to debug JavaScript?
Waiting for the page to finish loading
Unobtrusive Programming
Selection of DOM Elements
You can change HTML using JavaScript
You can change CSS using JavaScript
Hello DHTML
You can traverse the DOM too!
17. JavaScript Data
Data Types – Number, String, Boolean
Date
Arrays, Associative Arrays
If Statement, Truthy & Falsy Values
Loops – While, Do-While, For, For-In
Functions
Scope of Variables
Objects & JSON
Regular Expressions
=== & !==, !!
JavaScript Closures
Functions with arbitrary params
21. Ajax
XMLHttpRequest
Open(Type, Url)
Send(data)
readyState & readystatechange – 0,1,2,3,4
status - 200
responseXML and responseText
IE 5 & 6 – new ActiveXObject(“Microsoft.XMLHTTP”);
XMLHttpRequest object is non-reusable
XSS & CORS
22. jQuery
Its just JavaScript!
CDN, Minification, Local fallback
DOMReady vs Window Load
The jQuery Object
Looping with each();
this
Chaining
Accessing DOM Objects
Array Subscript – Unsafe
.get(n)
Making peace with other libraries – noConflict()
Caching for performance
23. 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”)
28. Events
Bubbling using Live, Die & Delegate and On
Bind, Once
Shorthand Events
Passing additional parameters to event listeners
Compound Events
Toggle, Hover
31. Ajax Contd..
Calling a 3rd Party REST API / Web Service using jQuery Ajax
(http://openweathermap.org/API)
JSONP & XSS
JSON to HTML using a for-in loop
32. 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})
35. About Author
Sreenath H B is the Product Owner for
eIntern LLC in the DC Metro Area.
He specializes in Cloud Infrastructure
Management, Web Front End Development
and programming using the Micrososft Tech
Stack
He is an avid traveler and blogger.
Twitter: @ubshreenath
Website: http://sreenath.net
Hinweis der Redaktion
Attribute values may be case sensitive depending on server systems
XHTML became a W3C Recommendation in Jan 2000
XHTML – Tags and attributes need to be lowercase, Empty Tags must self close
Var sandwich = function(){};
getAttribute(); getAttribute(); accessing attributes directly
Changing styles – spl. Case for hyphen seperated styles
Create a sample with few paragraphs of text. The paragraphs are preceeded by a header and an elipsis link the clicking of the elipsis must show/hide the paragraph text.
Activity: Create a Style Switcher to change font size of a page based on the selection of 3 div elements
Activity: Create a plug`in $().shadow that applies a shadow to the selected elements