JavaScript and jQuery Basics | Software Engineering and Management Master Class at Varna Free University

1. JavaScript
& jQuery
Basics

2. 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

3. Introduction to JavaScript
Front-end Technologies
General Overview.

4. 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.

5. 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!')" />

6. JavaScript | Syntax.
 Operators (+, *, =, !=, &&, ++, …)
 Variables (typeless)
 Conditional statements (if, else)
 Loops (for, while)
 Arrays (my_array[]) and associative arrays
(my_array['abc'])
 Functions

7. Introduction to jQuery
Write less, do more.

8. 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

9. 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

10. jQuery | Selectors & Methods
 as the syntax used in CSS to apply styles
 html(), css(), text(), show(), hide()…
Live Demo

11. jQuery | Events
Mouse events:
 onclick, onmousedown, onmouseup
 onmouseover, onmouseout, onmousemove
Key events:
 onkeypress, onkeydown, onkeyup
Interface events:
 onblur, onfocus
 onscroll

12. jQuery | Events
Live Demo

13. jQuery | Beyond Basics
Live Demo

14. Useful Resources
JavaScript Basics:
http://jqfundamentals.com/chapter/javascriptbasics
A guide to the basics of jQuery:
http://jqfundamentals.com/

15. Kaloyan Kosev,
Web Developer
superkalo@devlabs.bg
LinkedIn/superKalo
Facebook/superKalo

16. JavaScript & jQuery
Time for Questions.

17. Output + Feedback
Facebook Group:
Software Engineering and
Management - Master Class
http://www.facebook.com/groups/1425392611009770/
Homework: Code the front-end main JavaScript &
jQuery functionalities of your projects.