JavaScript and jQuery Basics
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JavaScript and jQuery Basics

  • 1,720 views
Uploaded on

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

More 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,720
On Slideshare
1,718
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
63
Comments
0
Likes
1

Embeds 2

http://192.168.6.179 2

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.