Your SlideShare is downloading. ×
  • Like
JavaScript and jQuery Basics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaScript and jQuery Basics

  • 1,521 views
Published

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

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

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,521
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
74
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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