Your SlideShare is downloading. ×
0
JavaScript
& jQuery
Basics
JavaScript & jQuery | Agenda











JavaScript Capabilities
JavaScript Basics & Syntax.
Introduction to jQue...
Introduction to JavaScript
Front-end Technologies
General Overview.
JavaScript | Capabilities
 Implementing form validation
 React to user actions (click, mouse over…)
 Appearing and disa...
JavaScript | Basics.
 <script> tag in the head
 <script> tag in the body
 <script> tag external source (always empty)
...
JavaScript | Syntax.
 Operators (+, *, =, !=, &&, ++, …)
 Variables (typeless)
 Conditional statements (if, else)
 Loo...
Introduction to jQuery
Write less, do more.
jQuery Advantages
 Free, open source software
 cross-browser JavaScript library
 simplify the client-side scripting of ...
Why jQuery is So Popular?
 Easy to learn
 Easy to extend - you create new jQuery
plugins by creating new JavaScript func...
jQuery | Selectors & Methods
 as the syntax used in CSS to apply styles
 html(), css(), text(), show(), hide()…

Live De...
jQuery | Events
Mouse events:
 onclick, onmousedown, onmouseup
 onmouseover, onmouseout, onmousemove
Key events:
 onkey...
jQuery | Events

Live Demo
jQuery | Beyond Basics

Live Demo
Useful Resources
JavaScript Basics:

http://jqfundamentals.com/chapter/javascriptbasics
A guide to the basics of jQuery:
h...
Kaloyan Kosev,
Web Developer
superkalo@devlabs.bg
LinkedIn/superKalo
Facebook/superKalo
JavaScript & jQuery
Time for Questions.
Output + Feedback
Facebook Group:
Software Engineering and
Management - Master Class
http://www.facebook.com/groups/142539...
Upcoming SlideShare
Loading in...5
×

JavaScript and jQuery Basics

2,057

Published on

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

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

No Downloads
Views
Total Views
2,057
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
99
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×