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/

Kaloyan Kosev,Web Developer

superkalo@devlabs.bg

LinkedIn/superKaloFacebook/superKalo

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