JavaScript & jQuery
Basics
JavaScript & jQuery | Agenda
JavaScript Capabilities JavaScript Basics & Syntax. Introduction to jQuery jQuery Advantages Why jQuery is So Popular? jQuery Selectors & Methods Live Demo jQuery Events Live Demo Beyond Basics Live Demo Useful Resources Time for Questions
Introduction to JavaScript
Front-end TechnologiesGeneral Overview.
JavaScript | Capabilities
Implementing form validation React to user actions (click, mouse over…) Appearing and disappearing elements Content loading and changing dynamically Performing complex calculations Implementing Custom controls Implementing AJAX functionality … and many more.
JavaScript | Basics.
<script> tag in the head <script> tag in the body <script> tag external source (always empty) Inline, for example:<img src="DevLabs.jpg" onclick="alert('clicked!')" />
JavaScript | Syntax.
Operators (+, *, =, !=, &&, ++, …) Variables (typeless) Conditional statements (if, else) Loops (for, while) Arrays (my_array[]) and associative arrays
(my_array['abc']) Functions
Introduction to jQuery
Write less, do more.
jQuery Advantages
Free, open source software cross-browser JavaScript library simplify the client-side scripting of HTML syntax is designed to make it easier to
navigate the document and select DOM elements
Create animations Handle events Develop advanced applications/effects
Why jQuery is So Popular?
Easy to learn Easy to extend - you create new jQuery
plugins by creating new JavaScript functions Powerful DOM Selection Powered by CSS 3.0 Lightweight Community Support with large community
of developers and geeks
jQuery | Selectors & Methods
as the syntax used in CSS to apply styles html(), css(), text(), show(), hide()…
Live Demo
jQuery | Events
Mouse events: onclick, onmousedown, onmouseup onmouseover, onmouseout, onmousemoveKey events: onkeypress, onkeydown, onkeyupInterface events: onblur, onfocus onscroll
jQuery | Events
Live Demo
jQuery | Beyond Basics
Live Demo
Useful Resources
JavaScript Basics: http://jqfundamentals.com/chapter/javascript-basics
A guide to the basics of jQuery:http://jqfundamentals.com/
Time for Questions.
JavaScript & jQuery
Facebook Group:Software Engineering andManagement - Master Class
http://www.facebook.com/groups/1425392611009770/
Homework: Code the front-end main JavaScript & jQuery functionalities of your projects.
Output + Feedback