SlideShare a Scribd company logo
1 of 12
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/

More Related Content

What's hot

Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
KMS Technology
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
Oren Shatken
 

What's hot (20)

Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 
Adobe CQ5 for Developers - Introduction
Adobe CQ5 for Developers - IntroductionAdobe CQ5 for Developers - Introduction
Adobe CQ5 for Developers - Introduction
 
Introduction to JavaScript Full Stack
Introduction to JavaScript Full StackIntroduction to JavaScript Full Stack
Introduction to JavaScript Full Stack
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
 
Building rest services using aspnetwebapi
Building rest services using aspnetwebapiBuilding rest services using aspnetwebapi
Building rest services using aspnetwebapi
 
Codegen2021 blazor mobile
Codegen2021 blazor mobileCodegen2021 blazor mobile
Codegen2021 blazor mobile
 
Overview of DNN Cloud Services
Overview of DNN Cloud ServicesOverview of DNN Cloud Services
Overview of DNN Cloud Services
 
Single page application
Single page applicationSingle page application
Single page application
 
A Gentle Introduction to Blazor
A Gentle Introduction to BlazorA Gentle Introduction to Blazor
A Gentle Introduction to Blazor
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
 
Ui dev@naukri-2011
Ui dev@naukri-2011Ui dev@naukri-2011
Ui dev@naukri-2011
 
Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster Making Single Page Applications (SPA) faster
Making Single Page Applications (SPA) faster
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business Heads
 
Dynamic web pages in java
Dynamic web pages in javaDynamic web pages in java
Dynamic web pages in java
 
Keystone.js 101
Keystone.js 101Keystone.js 101
Keystone.js 101
 
Moving from PHP to a nodejs full stack CMS
Moving from PHP to a nodejs full stack CMSMoving from PHP to a nodejs full stack CMS
Moving from PHP to a nodejs full stack CMS
 

Viewers also liked

Viewers also liked (9)

Lewis Barbe Expert Witness - Guidrey Case
Lewis Barbe Expert Witness -  Guidrey CaseLewis Barbe Expert Witness -  Guidrey Case
Lewis Barbe Expert Witness - Guidrey Case
 
PL/SQL Part 5
PL/SQL Part 5PL/SQL Part 5
PL/SQL Part 5
 
Java ppt2
Java ppt2Java ppt2
Java ppt2
 
Artificial Intelligence Notes- Set4
Artificial Intelligence Notes- Set4Artificial Intelligence Notes- Set4
Artificial Intelligence Notes- Set4
 
Artificial Intelligence Assignment- 1
Artificial Intelligence Assignment- 1Artificial Intelligence Assignment- 1
Artificial Intelligence Assignment- 1
 
Learn Java Part 6
Learn Java Part 6Learn Java Part 6
Learn Java Part 6
 
Artificial Intelligence Notes- Set5
Artificial Intelligence Notes- Set5Artificial Intelligence Notes- Set5
Artificial Intelligence Notes- Set5
 
Artificial Intelligence Notes- Set2
Artificial Intelligence Notes- Set2Artificial Intelligence Notes- Set2
Artificial Intelligence Notes- Set2
 
Computer Graphics Notes
Computer Graphics NotesComputer Graphics Notes
Computer Graphics Notes
 

Similar to Javascript & Jquery

Developpement informatique
Developpement informatiqueDeveloppement informatique
Developpement informatique
brokerslip0
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
Alan Hecht
 

Similar to Javascript & Jquery (20)

Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
 
Javascript 01 (js)
Javascript 01 (js)Javascript 01 (js)
Javascript 01 (js)
 
wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Developpement informatique
Developpement informatiqueDeveloppement informatique
Developpement informatique
 
Project First presentation about introduction to technologies to be used
Project First presentation about introduction to technologies to be usedProject First presentation about introduction to technologies to be used
Project First presentation about introduction to technologies to be used
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
 
WebDev Simplified React.js.pptx
WebDev Simplified React.js.pptxWebDev Simplified React.js.pptx
WebDev Simplified React.js.pptx
 
Evolution of java script libraries
Evolution of java script librariesEvolution of java script libraries
Evolution of java script libraries
 
Sahi Principles and Architecture
Sahi Principles and ArchitectureSahi Principles and Architecture
Sahi Principles and Architecture
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Ppt for Online music store
Ppt for Online music storePpt for Online music store
Ppt for Online music store
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 

More from Gurpreet singh

More from Gurpreet singh (20)

Introduction to Oracle Fusion BIP Reporting
Introduction to Oracle Fusion BIP ReportingIntroduction to Oracle Fusion BIP Reporting
Introduction to Oracle Fusion BIP Reporting
 
Why Messaging system?
Why Messaging system?Why Messaging system?
Why Messaging system?
 
Understanding Flex Fields with Accounting Flexfields(Chart of Accounts) in O...
Understanding Flex Fields with  Accounting Flexfields(Chart of Accounts) in O...Understanding Flex Fields with  Accounting Flexfields(Chart of Accounts) in O...
Understanding Flex Fields with Accounting Flexfields(Chart of Accounts) in O...
 
Oracle Application Developmenr Framework
Oracle Application Developmenr FrameworkOracle Application Developmenr Framework
Oracle Application Developmenr Framework
 
Java Servlet part 3
Java Servlet part 3Java Servlet part 3
Java Servlet part 3
 
Oracle advanced queuing
Oracle advanced queuingOracle advanced queuing
Oracle advanced queuing
 
Oracle SQL Part 3
Oracle SQL Part 3Oracle SQL Part 3
Oracle SQL Part 3
 
Oracle SQL Part 2
Oracle SQL Part 2Oracle SQL Part 2
Oracle SQL Part 2
 
Oracle SQL Part1
Oracle SQL Part1Oracle SQL Part1
Oracle SQL Part1
 
Generics and collections in Java
Generics and collections in JavaGenerics and collections in Java
Generics and collections in Java
 
IO Streams, Serialization, de-serialization, autoboxing
IO Streams, Serialization, de-serialization, autoboxingIO Streams, Serialization, de-serialization, autoboxing
IO Streams, Serialization, de-serialization, autoboxing
 
Java Servlets Part 2
Java Servlets Part 2Java Servlets Part 2
Java Servlets Part 2
 
Creating business group in oracle apps
Creating business group in oracle appsCreating business group in oracle apps
Creating business group in oracle apps
 
Defing locations in Oracle Apps
Defing locations in Oracle AppsDefing locations in Oracle Apps
Defing locations in Oracle Apps
 
Assigning role AME_BUS_ANALYST
Assigning role AME_BUS_ANALYSTAssigning role AME_BUS_ANALYST
Assigning role AME_BUS_ANALYST
 
PL/SQL Part 3
PL/SQL Part 3PL/SQL Part 3
PL/SQL Part 3
 
PL/SQL Part 2
PL/SQL Part 2PL/SQL Part 2
PL/SQL Part 2
 
PL/SQL Part 1
PL/SQL Part 1PL/SQL Part 1
PL/SQL Part 1
 
Introduction to Data Flow Diagram (DFD)
Introduction to Data Flow Diagram (DFD)Introduction to Data Flow Diagram (DFD)
Introduction to Data Flow Diagram (DFD)
 
Ingenium test(Exam Management System) Project Presentation (Full)
Ingenium test(Exam Management System) Project Presentation (Full)Ingenium test(Exam Management System) Project Presentation (Full)
Ingenium test(Exam Management System) Project Presentation (Full)
 

Recently uploaded

VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
ankushspencer015
 

Recently uploaded (20)

Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
 
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced LoadsFEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
 
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
 
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
 
Online banking management system project.pdf
Online banking management system project.pdfOnline banking management system project.pdf
Online banking management system project.pdf
 
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank  Design by Working Stress - IS Method.pdfIntze Overhead Water Tank  Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
 
University management System project report..pdf
University management System project report..pdfUniversity management System project report..pdf
University management System project report..pdf
 
Intro To Electric Vehicles PDF Notes.pdf
Intro To Electric Vehicles PDF Notes.pdfIntro To Electric Vehicles PDF Notes.pdf
Intro To Electric Vehicles PDF Notes.pdf
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
 
NFPA 5000 2024 standard .
NFPA 5000 2024 standard                                  .NFPA 5000 2024 standard                                  .
NFPA 5000 2024 standard .
 
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
 
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
 
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
 
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
 
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
 
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
 
Unit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdfUnit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdf
 

Javascript & Jquery

  • 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 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>
  • 5. 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.
  • 6. 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.
  • 7. 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
  • 8. 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>
  • 9. 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.
  • 10. 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".
  • 11. 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.