Presented By: Gurpreet Singh ACET,Amritsar
What is JavaScript (JS)? • JavaScript is a client –side scripting language for the world wide web, that is similar to the syntax of the Java programming language. • JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics.
Why use JavaScript (JS)? • By executing more web functionality on the user’s machine, webmasters can optimize their servers to serve more pages. • The decrease in traffic from constant interaction with the server can also improve a server’s performance. • Because the local machine is doing the script processing, the user can view web pages much faster
How can we embed JavaScript in HTML? • In head section <SCRIPT language=“javascript” type=“text/javasccript”> //Javascript code </SCRIPT> • In seperate file then link it to HTML <SCRIPT src=“filename.js”> </SCRIPT>
jQuery • jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. • jQuery is a javascript library. • jQuery greatly simplifies javascript programming. • jQuery is easy to learn.
jQuery • jQuery is a lightweight, "write less, do more", JavaScript library. • The purpose of jQuery is to make it much easier to use JavaScript on your website. • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. • jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
Why jQuery? • There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. • Many of the biggest companies on the Web use jQuery, such as:  Google  Microsoft  IBM  Netflix
How to use jQuery? • <head> < script src="jquery-1.11.1.min.js"></script> < /head> • <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ script> < /head> • <head> < script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery- 1.11.1.min.js"></script> < /head>
One big advantage of using the hosted jQuery from Google or Microsoft: • Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
jQuery Syntax • The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). • Basic syntax is: $(selector).action()  A $ sign to define/access jQuery  A (selector) to "query (or find)" HTML elements  A jQuery action() to be performed on the element(s) • Examples:  $(this).hide() - hides the current element.  $("p").hide() - hides all <p> elements.  $(".test").hide() - hides all elements with class="test".  $("#test").hide() - hides the element with id="test".
Callback Function • A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.
Further References • http://learn.jquery.com/about-jquery/how-jquery-works/

Javascript & Jquery

  • 1.
  • 2.
    What is JavaScript(JS)? • JavaScript is a client –side scripting language for the world wide web, that is similar to the syntax of the Java programming language. • JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics.
  • 3.
    Why use JavaScript(JS)? • By executing more web functionality on the user’s machine, webmasters can optimize their servers to serve more pages. • The decrease in traffic from constant interaction with the server can also improve a server’s performance. • Because the local machine is doing the script processing, the user can view web pages much faster
  • 4.
    How can weembed JavaScript in HTML? • In head section <SCRIPT language=“javascript” type=“text/javasccript”> //Javascript code </SCRIPT> • In seperate file then link it to HTML <SCRIPT src=“filename.js”> </SCRIPT>
  • 5.
    jQuery • jQuery isa fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. • jQuery is a javascript library. • jQuery greatly simplifies javascript programming. • jQuery is easy to learn.
  • 6.
    jQuery • jQuery isa lightweight, "write less, do more", JavaScript library. • The purpose of jQuery is to make it much easier to use JavaScript on your website. • jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. • jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
  • 7.
    Why jQuery? • Thereare lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable. • Many of the biggest companies on the Web use jQuery, such as:  Google  Microsoft  IBM  Netflix
  • 8.
    How to usejQuery? • <head> < script src="jquery-1.11.1.min.js"></script> < /head> • <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ script> < /head> • <head> < script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery- 1.11.1.min.js"></script> < /head>
  • 9.
    One big advantageof using the hosted jQuery from Google or Microsoft: • Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
  • 10.
    jQuery Syntax • ThejQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). • Basic syntax is: $(selector).action()  A $ sign to define/access jQuery  A (selector) to "query (or find)" HTML elements  A jQuery action() to be performed on the element(s) • Examples:  $(this).hide() - hides the current element.  $("p").hide() - hides all <p> elements.  $(".test").hide() - hides all elements with class="test".  $("#test").hide() - hides the element with id="test".
  • 11.
    Callback Function • Acallback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.
  • 12.