7. HTML | CSS | JS
HTML for content and structure of the web page.
CSS for the fonts, color, alignment, styling, etc.
JavaScript for the interactivity or real-time modifications of
HTML and CSS.
8. JavaScript: Ruler of the World
HTML
CSS
JavaScript
Dojo
Dojo Toolkit
ExtJS
ExtJS UI
jQuery
jQuery UI
…
…
Google Maps
OpenLayers
Leaflet
…
Other JS
Utilities
11. HTML | HEAD SECTION
Typical Usages:
Title of the document or browser tab.
JavaScript files insertion
CSS files insertions
SEO mechanisms (to increase your search engine rankings)
14. HTML | DOM
Document Object Model
Every web page could be viewed like a tree structure, with
elements as nodes
15. HTML | DOM
Treats elements as objects.
Each object has attributes, methods, and associated
events.
16. HTML | DOM
DOM is needed by JavaScript to communicate with the
HTML elements.
DOM supports navigation in any direction (e.g., parent
and previous sibling)
24. jQuery
Released in 2006 by John Resig.
Free and open-source software
Around 30KB only (gzipped version)
simplified the Client-Side Scripting of HTML
Most popular JS library (65% of top 10,000 websites)
26. jQuery | Features
Multi-browser
DOM selection/traversal
DOM Manipulation/modification
Event Handling
Creating Effects/Animations
AJAX processing
Extensibility through plug-ins
27. jQuery | UI Widgets
Autocomplete – Auto-complete boxes based on what the user types
Button – Enhanced button appearance, turn radio buttons and
checkboxes into pushbuttons
Datepicker – Advanced date-picker
Dialog – Show dialog boxes on top of other content, easily and robustly
Menu – Show a Menu
Progressbar – Progress bars, both animated and not
Slider – Fully customizable sliders with various features:
Spinner – Show a Number Spinner
Tabs – Tabbed user interface handling, with both inline and demandloaded content
Tooltip – Show a Tooltip
…
28. jQuery | Effects
Color Animation – Animate the transition from one color to another
Toggle Class, Add Class, Remove Class, Switch Class – Animate the
transition from one set of styles to another
Effect – A variety of effects (appear, slide-down, explode, fade-in,
etc.)
Toggle – Toggle an effect on and off
Hide, Show - Using the effects above
30. jQuery | John Resig | Current
“A free world-class education for anyone anywhere.”
changing education for the better by providing a free
world-class education for anyone anywhere.
over 300 million lessons delivered
32. Leaflet
“Simplicity, performance, and usability.”
Released in 2011 by Vladimir Agafonkin
Consistent and readable source code.
Well-documented API and huge repository of plugins