JavaScript and jQuery Basics

2,531 views
2,331 views

Published on

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

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,531
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
106
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript and jQuery Basics

  1. 1. JavaScript & jQuery Basics
  2. 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. 3. Introduction to JavaScript Front-end Technologies General Overview.
  4. 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. 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. 6. JavaScript | Syntax.  Operators (+, *, =, !=, &&, ++, …)  Variables (typeless)  Conditional statements (if, else)  Loops (for, while)  Arrays (my_array[]) and associative arrays (my_array['abc'])  Functions
  7. 7. Introduction to jQuery Write less, do more.
  8. 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. 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. 10. jQuery | Selectors & Methods  as the syntax used in CSS to apply styles  html(), css(), text(), show(), hide()… Live Demo
  11. 11. jQuery | Events Mouse events:  onclick, onmousedown, onmouseup  onmouseover, onmouseout, onmousemove Key events:  onkeypress, onkeydown, onkeyup Interface events:  onblur, onfocus  onscroll
  12. 12. jQuery | Events Live Demo
  13. 13. jQuery | Beyond Basics Live Demo
  14. 14. Useful Resources JavaScript Basics: http://jqfundamentals.com/chapter/javascriptbasics A guide to the basics of jQuery: http://jqfundamentals.com/
  15. 15. Kaloyan Kosev, Web Developer superkalo@devlabs.bg LinkedIn/superKalo Facebook/superKalo
  16. 16. JavaScript & jQuery Time for Questions.
  17. 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.

×