12
Presented By: Gurpreet Singh ACET,Amritsar

Javascript & Jquery

Embed Size (px)

Citation preview

Page 1: Javascript & Jquery

Presented By:Gurpreet Singh

ACET,Amritsar

Page 2: Javascript & Jquery

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 fromJava, but the two languages are otherwise unrelated and havevery different semantics.

Page 3: Javascript & Jquery

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

Page 4: Javascript & Jquery

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>

Page 5: Javascript & Jquery

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.

Page 6: Javascript & Jquery

jQuery

• jQuery is a lightweight, "write less, do more", JavaScriptlibrary.

• The purpose of jQuery is to make it much easier to useJavaScript on your website.

• jQuery takes a lot of common tasks that require many lines ofJavaScript code to accomplish, and wraps them into methodsthat you can call with a single line of code.

• jQuery also simplifies a lot of the complicated things fromJavaScript, like AJAX calls and DOM manipulation.

Page 7: Javascript & Jquery

Why jQuery?

• There are lots of other JavaScript frameworks out there, butjQuery seems to be the most popular, and also the mostextendable.

• Many of the biggest companies on the Web use jQuery, suchas:

Google

Microsoft

IBM

Netflix

Page 8: Javascript & Jquery

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>

Page 9: Javascript & Jquery

One big advantage of using the hosted

jQuery from Google or Microsoft:

• Many users already have downloaded jQuery from Google orMicrosoft when visiting another site. As a result, it will beloaded from cache when they visit your site, which leads tofaster loading time. Also, most CDN's will make sure that oncea user requests a file from it, it will be served from the serverclosest to them, which also leads to faster loading time.

Page 10: Javascript & Jquery

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

Page 11: Javascript & Jquery

Callback Function

• A callback is a function that is passed as an argument toanother function and is executed after its parent function hascompleted. Callbacks are special because they patiently waitto execute until their parent finishes. Meanwhile, the browsercan be executing other functions or doing all sorts of otherwork.

Page 12: Javascript & Jquery

Further References

• http://learn.jquery.com/about-jquery/how-jquery-works/