Jquery By – Hussain Fakhruddin Manish Singh
What is Jquery? <ul><li>jQuery is a fast and concise JavaScript Library. </li></ul><ul><li>Simplifies HTML document traver...
Features <ul><li>Free and Open Source. </li></ul><ul><li>Support for CSS3. </li></ul><ul><li>Cross-browser support. </li><...
JavaScript and jQuery <ul><li>Jquery is a library bult on top of javascript. </li></ul><ul><li>jQuery simplifies coding fo...
Why Jquery Over JavaScript <ul><li>There are much more functions and plugins for developers. </li></ul><ul><li>Even bigger...
Downloading Jquery <ul><li>jQuery can be downloaded either in minified form or uncompressed form. </li></ul><ul><li>Downlo...
Getting Started <ul><li>Put the downloaded jquery.js file after unzipping ( if needed) inside your application directory. ...
Hello World Code using jQuery <ul><li><html> <head> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;j...
Explanation of Code <ul><li>$(document).ready = window.onload of plain javascript. </li></ul><ul><li>$(&quot;a&quot;) stan...
$ Sign in jQuery or JavaScript <ul><li>A beginner, or even a seasoned JavaScript programmer may be slightly intimidated on...
Making jQuery Simpler <ul><li>Jquery is all about making things simple for developers. </li></ul><ul><li>So we can replace...
Types in jQuery <ul><li>JavaScript provides several built-in types.All of them are supported in jquery </li></ul><ul><li>I...
String Type <ul><li>A string in JavaScript is an immutable object that contains none, one or many characters.  </li></ul><...
String Quoting <ul><li>A string can be defined using single or double quotes.  </li></ul><ul><li>You can nest single quote...
String Functions <ul><li>A string in JavaScript has some built-in methods to manipulate the string . </li></ul><ul><li>The...
String Properties <ul><li>All strings have a length property.  </li></ul><ul><li>Ex : &quot;Hello&quot;.length // 5  </li>...
Numbers <ul><li>Numbers are double-precision 64-bit format IEEE 754 values.  </li></ul><ul><li>They are immutable, just as...
More on Numbers <ul><li>JavaScript provides utilities to work with numbers in the Math object. </li></ul><ul><li>Ex : Math...
Continued… <ul><li>Parsing Numbers :  parseInt and parseFloat help parsing strings into numbers. Both do some implicit con...
Continued… <ul><li>Numbers to Strings :  When appending numbers to string, the result is always a string.  </li></ul><ul><...
NaN and Infinity <ul><li>Parsing something that isn't a number results in NaN.  </li></ul><ul><li>Division by zero results...
Objects <ul><li>Javascript supports Object Orientation. </li></ul><ul><li>Object can be crated in following way : var x = ...
Arrays <ul><li>Collection of data into a single variable. </li></ul><ul><li>Ex : x = [1,2,3]; </li></ul><ul><li>The type o...
Continued <ul><li>An array, no matter if it has elements or not, never defaults to false . </li></ul><ul><li>Ex : var oper...
Iteration  <ul><li>Apart from normal javascript loops jquery support many advanced iterations. </li></ul><ul><li>jQuery pr...
Function <ul><li>A function in JavaScript can be either named or anonymous. </li></ul><ul><li>An anonymous function can be...
More on Functions <ul><li>Inside a function a special variable &quot;arguments&quot; is always available.  </li></ul><ul><...
Examples <ul><li>function log(x) {  console.log(typeof x,arguments.length);  }  log(); // &quot;undefined&quot;, 0  log(1)...
Scope and Closures <ul><li>In JavaScript, all variables defined inside a function are only visible inside that function sc...
Example <ul><li>// global  </li></ul><ul><li>var x = 0;  </li></ul><ul><li>(function() { // private  </li></ul><ul><li>var...
<ul><li>function create(){  var counter = 0;  return { increment: function() { counter++;  }, print: function() { console....
Callback <ul><li>A callback is a plain JavaScript function passed to some method as an argument or option.  </li></ul><ul>...
Example of callback <ul><li>$(&quot;body&quot;).click(function(event) { console.log(&quot;clicked: &quot; + event.target);...
References <ul><li>http://www.tutsdeck.com/tutorial/2/jquery-tutorial-beginners/ </li></ul><ul><li>http://my123web.blogspo...
Thank You
Upcoming SlideShare
Loading in …5
×

Jquery 1

1,770 views

Published on

The basic introduction to jQuery

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

No Downloads
Views
Total views
1,770
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Jquery 1

  1. 1. Jquery By – Hussain Fakhruddin Manish Singh
  2. 2. What is Jquery? <ul><li>jQuery is a fast and concise JavaScript Library. </li></ul><ul><li>Simplifies HTML document traversing, event handling, animating, and ajax interactions for rapid web development. </li></ul><ul><li>Designed to change the way that you write JavaScript. </li></ul><ul><li>Lightweight tool. </li></ul>
  3. 3. Features <ul><li>Free and Open Source. </li></ul><ul><li>Support for CSS3. </li></ul><ul><li>Cross-browser support. </li></ul><ul><li>Lots of inbuilt functions and plugins. </li></ul><ul><li>Support for creating own plugins for users. </li></ul>
  4. 4. JavaScript and jQuery <ul><li>Jquery is a library bult on top of javascript. </li></ul><ul><li>jQuery simplifies coding for developers. </li></ul><ul><li>jQuery is NOT faster then javascript but makes the code look much elegent. </li></ul><ul><li>Once you have done some work with jQuery coming back to JavaScript mght look painful. </li></ul>
  5. 5. Why Jquery Over JavaScript <ul><li>There are much more functions and plugins for developers. </li></ul><ul><li>Even bigger functionalities can be achieved in less amount of coding. </li></ul><ul><li>Provides better compatibility with different browsers. </li></ul><ul><li>Ajax is made very easy with jquery. </li></ul><ul><li>Easy to provide effects, animation, designs to the pages </li></ul>
  6. 6. Downloading Jquery <ul><li>jQuery can be downloaded either in minified form or uncompressed form. </li></ul><ul><li>Download jQuery in minified form in below link : http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js . </li></ul><ul><li>jQuery resources can be found at http://docs.jquery.com . </li></ul>
  7. 7. Getting Started <ul><li>Put the downloaded jquery.js file after unzipping ( if needed) inside your application directory. </li></ul><ul><li>Insert the following <script> tag in the <head> section of your HTMl file: <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> </li></ul><ul><li>Now write the HTML code given in next slide and run it through any browser </li></ul>
  8. 8. Hello World Code using jQuery <ul><li><html> <head> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> <script type=&quot;text/javascript&quot;> </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><li>$(&quot;a&quot;).click(function() { </li></ul><ul><li>alert(&quot;Hello World!&quot;); </li></ul><ul><li>}); </li></ul><ul><li>}); </script> </head> </li></ul><ul><li><body> <a href=&quot;&quot;>Link</a> </li></ul><ul><li></body> </html> </li></ul>
  9. 9. Explanation of Code <ul><li>$(document).ready = window.onload of plain javascript. </li></ul><ul><li>$(&quot;a&quot;) stands for <a> element of html. </li></ul><ul><li>In the web page the word “Link” is displayed with a link. </li></ul><ul><li>On clicking that link the jquery function will get called and an alert message is displayed. </li></ul>
  10. 10. $ Sign in jQuery or JavaScript <ul><li>A beginner, or even a seasoned JavaScript programmer may be slightly intimidated once spotting something as ambiguous as the  dollar sign  ($). </li></ul><ul><li>Well,there is nothing mysterious about the $ sign, for it is just a variable (or an identifier) name and legal in Javascript. </li></ul><ul><li>In JavaScript, the dollar sign commonly appears in variable definitions and function calls. </li></ul>
  11. 11. Making jQuery Simpler <ul><li>Jquery is all about making things simple for developers. </li></ul><ul><li>So we can replace the $(document).ready part like below in the Hello World Example : $(function() { </li></ul><ul><li>$(&quot;a&quot;).click(function() { </li></ul><ul><li>alert(&quot;Hello world!&quot;); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
  12. 12. Types in jQuery <ul><li>JavaScript provides several built-in types.All of them are supported in jquery </li></ul><ul><li>In addition to those, there are virtual types like Selectors, enhanced pseudo-types like Events and Functions. </li></ul><ul><li>By default any variable is initialized with false. </li></ul>
  13. 13. String Type <ul><li>A string in JavaScript is an immutable object that contains none, one or many characters. </li></ul><ul><li>Immutable means, once created they cannot be changed. </li></ul><ul><li>Ex : - “ I am a string.” </li></ul><ul><li>- typeof “Any String”; //o/p string </li></ul>
  14. 14. String Quoting <ul><li>A string can be defined using single or double quotes. </li></ul><ul><li>You can nest single quotes inside of double quotes, and vice versa. </li></ul><ul><li>To mix double quotes with double quotes, the nested ones have to be escaped with a backslash. </li></ul><ul><li>Ex : &quot;You make 'me' sad.“ </li></ul><ul><li>'Holy &quot;cranking&quot; moses!‘ </li></ul><ul><li>&quot;<a href=&quot;home&quot;>Home</a>&quot; </li></ul>
  15. 15. String Functions <ul><li>A string in JavaScript has some built-in methods to manipulate the string . </li></ul><ul><li>The result might be new string - or something else, eg. split returns an array. </li></ul><ul><li>Ex : &quot;hello&quot;.charAt(0) // &quot;h&quot; </li></ul><ul><li>&quot;hello&quot;.toUpperCase() // &quot;HELLO&quot; </li></ul><ul><li>&quot;Hello&quot;.toLowerCase() // &quot;hello“ </li></ul><ul><li>&quot;hello&quot;.replace(/e|o/g, &quot;x&quot;) // &quot;hxllx&quot; </li></ul><ul><li>&quot;1,2,3&quot;.split(&quot;,&quot;) // [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;] </li></ul>
  16. 16. String Properties <ul><li>All strings have a length property. </li></ul><ul><li>Ex : &quot;Hello&quot;.length // 5 </li></ul><ul><li>An empty string defaults to false: </li></ul><ul><li>Ex : !&quot;&quot; // true   </li></ul><ul><li>!&quot;hello&quot; // false </li></ul><ul><li>!&quot;true&quot; // false   </li></ul><ul><li>!new Boolean(false) // false </li></ul>
  17. 17. Numbers <ul><li>Numbers are double-precision 64-bit format IEEE 754 values. </li></ul><ul><li>They are immutable, just as strings. </li></ul><ul><li>All operators common in c-based languages are available to work with numbers (+, -, *, /, %, =, +=, -=, *=, /=, ++, --). </li></ul><ul><li>Ex : typeof 12 // &quot;number&quot; </li></ul>
  18. 18. More on Numbers <ul><li>JavaScript provides utilities to work with numbers in the Math object. </li></ul><ul><li>Ex : Math.PI // 3.141592653589793 </li></ul><ul><li>Math.cos(Math.PI) // -1 </li></ul><ul><li>If a number is zero, it defaults to false. </li></ul><ul><li>Ex :  !0 // true   </li></ul><ul><li>!1 // false </li></ul>
  19. 19. Continued… <ul><li>Parsing Numbers : parseInt and parseFloat help parsing strings into numbers. Both do some implicit conversion if the base isn't specified. </li></ul><ul><li>Ex : parseInt(&quot;123&quot;) = 123 (implicit decimal) </li></ul><ul><li>parseInt(&quot;010&quot;) = 8 (implicit octal) </li></ul><ul><li>parseInt(&quot;0xCAFE&quot;) = 51966(implicit hex) </li></ul><ul><li>parseInt(&quot;010&quot;, 10) = 10 (explicit decimal) </li></ul><ul><li>parseInt(&quot;11&quot;, 2) = 3 (explicit binary) </li></ul>
  20. 20. Continued… <ul><li>Numbers to Strings : When appending numbers to string, the result is always a string. </li></ul><ul><li> If you want to add numbers and then append them to a string, put parentheses around them. </li></ul><ul><li>Ex : &quot;&quot; + 1 + 2; // &quot;12“ </li></ul><ul><li>&quot;&quot; + (1 + 2); // &quot;3&quot; </li></ul>
  21. 21. NaN and Infinity <ul><li>Parsing something that isn't a number results in NaN. </li></ul><ul><li>Division by zero results in Infinity. </li></ul><ul><li>Both NaN and Infinity are of type &quot;number“. </li></ul><ul><li>Ex : parseInt(&quot;hello&quot;, 10) // NaN </li></ul><ul><li>isNaN(parseInt(&quot;hello&quot;, 10)) // true </li></ul><ul><li>1 / 0 // Infinity </li></ul><ul><li>NaN == NaN // false </li></ul><ul><li>Infinity == Infinity // true </li></ul>
  22. 22. Objects <ul><li>Javascript supports Object Orientation. </li></ul><ul><li>Object can be crated in following way : var x = { }; var y = { name: “Manish&quot;, age: 24 }; </li></ul><ul><li>You can write and read properties of an object using the dot notation. </li></ul><ul><li>Ex : x.name = y.name + &quot; Singh&quot; // “Manish Singh&quot; </li></ul>
  23. 23. Arrays <ul><li>Collection of data into a single variable. </li></ul><ul><li>Ex : x = [1,2,3]; </li></ul><ul><li>The type of an array is &quot;object&quot; . </li></ul><ul><li>You write and read object properties using the array notation also. </li></ul><ul><li>It allows you to dynamically choose the property. </li></ul>
  24. 24. Continued <ul><li>An array, no matter if it has elements or not, never defaults to false . </li></ul><ul><li>Ex : var operations = { </li></ul><ul><li>increase: &quot;++&quot;, </li></ul><ul><li>decrease: &quot;--&quot; } </li></ul><ul><li>var operation = &quot;increase&quot;; operations[operation] // &quot;++&quot;; operations[&quot;multiply&quot;] = &quot;*&quot;; // &quot;*&quot; </li></ul>
  25. 25. Iteration <ul><li>Apart from normal javascript loops jquery support many advanced iterations. </li></ul><ul><li>jQuery provides a generic each-function to iterate over properties of objects, as well as elements of arrays </li></ul><ul><li>Ex : jQuery.each(obj, function(key, value) { </li></ul><ul><li>console.log(&quot;key&quot;, key, &quot;value&quot;, value); }); </li></ul>
  26. 26. Function <ul><li>A function in JavaScript can be either named or anonymous. </li></ul><ul><li>An anonymous function can be assigned to a variable or passed to a method. </li></ul><ul><li>The type of a function is &quot;function&quot;. </li></ul><ul><li>Ex : function named() { } </li></ul><ul><li>var handler = function() { } </li></ul>
  27. 27. More on Functions <ul><li>Inside a function a special variable &quot;arguments&quot; is always available. </li></ul><ul><li>It's similar to an array in that it has a length property, but it lacks the built-in methods of an array. </li></ul><ul><li>The arguments object also has a callee property, which refers to the function you're inside of. </li></ul>
  28. 28. Examples <ul><li>function log(x) { console.log(typeof x,arguments.length); } log(); // &quot;undefined&quot;, 0 log(1); // &quot;number&quot;, 1 log(&quot;1&quot;, &quot;2&quot;, &quot;3&quot;); // &quot;string&quot;, 3 </li></ul><ul><li>var awesome = function() { return arguments.callee } awesome() == awesome // true </li></ul>
  29. 29. Scope and Closures <ul><li>In JavaScript, all variables defined inside a function are only visible inside that function scope.  </li></ul><ul><li>Closures are created whenever a variable that is defined outside the current scope is accessed from within some inner scope. </li></ul>
  30. 30. Example <ul><li>// global </li></ul><ul><li>var x = 0; </li></ul><ul><li>(function() { // private </li></ul><ul><li>var x = 1; console.log(x); // 1 })(); console.log(x); // 0 </li></ul>
  31. 31. <ul><li>function create(){ var counter = 0; return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment(); c.print(); // 1 </li></ul>
  32. 32. Callback <ul><li>A callback is a plain JavaScript function passed to some method as an argument or option. </li></ul><ul><li>Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.  </li></ul><ul><li>jQuery's event system uses such callbacks everywhere. </li></ul>
  33. 33. Example of callback <ul><li>$(&quot;body&quot;).click(function(event) { console.log(&quot;clicked: &quot; + event.target); }); </li></ul><ul><li>$(&quot;#myform&quot;).submit(function() { return false; }); </li></ul>
  34. 34. References <ul><li>http://www.tutsdeck.com/tutorial/2/jquery-tutorial-beginners/ </li></ul><ul><li>http://my123web.blogspot.com/search/label/jQuery </li></ul><ul><li>http://jquery-howto.blogspot.com/2009/06/jquery-beginner-tutorials.html </li></ul><ul><li>http://docs.jquery.com </li></ul><ul><li>http://www.authenticsociety.com/blog/JavaScript_DollarSign </li></ul>
  35. 35. Thank You

×