javascript and jquery basics
Post on 18-Oct-2014
1.581 views
DESCRIPTION
JavaScript and jQuery Basics | Software Engineering and Management Master Class at Varna Free UniversityTRANSCRIPT
![Page 1: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/1.jpg)
JavaScript & jQuery
Basics
![Page 2: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/3.jpg)
Introduction to JavaScript
Front-end TechnologiesGeneral Overview.
![Page 4: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/4.jpg)
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.
![Page 5: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/5.jpg)
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!')" />
![Page 6: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/6.jpg)
JavaScript | Syntax.
Operators (+, *, =, !=, &&, ++, …) Variables (typeless) Conditional statements (if, else) Loops (for, while) Arrays (my_array[]) and associative arrays
(my_array['abc']) Functions
![Page 7: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/7.jpg)
Introduction to jQuery
Write less, do more.
![Page 8: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/8.jpg)
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
![Page 9: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/10.jpg)
jQuery | Selectors & Methods
as the syntax used in CSS to apply styles html(), css(), text(), show(), hide()…
Live Demo
![Page 11: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/11.jpg)
jQuery | Events
Mouse events: onclick, onmousedown, onmouseup onmouseover, onmouseout, onmousemoveKey events: onkeypress, onkeydown, onkeyupInterface events: onblur, onfocus onscroll
![Page 12: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/12.jpg)
jQuery | Events
Live Demo
![Page 13: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/13.jpg)
jQuery | Beyond Basics
Live Demo
![Page 14: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/14.jpg)
Useful Resources
JavaScript Basics: http://jqfundamentals.com/chapter/javascript-basics
A guide to the basics of jQuery:http://jqfundamentals.com/
![Page 16: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/16.jpg)
Time for Questions.
JavaScript & jQuery
![Page 17: JavaScript and jQuery Basics](https://reader035.vdocuments.site/reader035/viewer/2022081412/5442550eb1af9f3d0a8b45f5/html5/thumbnails/17.jpg)
Facebook Group:Software Engineering andManagement - Master Class
http://www.facebook.com/groups/1425392611009770/
Homework: Code the front-end main JavaScript & jQuery functionalities of your projects.
Output + Feedback