Insights on JavaScript and JQuery for web development

1
iFour Consultancy
2
Introduction To JavaScript

• A markup language is a set of markup tags

• A markup language is a set of markup tags

• What is JavaScript?
• JavaScript is the programming language of the
  web.
• All modern HTML pages are using JavaScript.
• JavaScript is easy to learn.
• JavaScript is the most popular programming
  language in the world.
• The HTML DOM (the Document Object Model) is the
  official W3C standard for accessing HTML
  elements.
• JavaScript can manipulate the DOM (change HTML
  contents).
• The method document.getElementById() is one of
  many methods in the HTML DOM.

ASP.NET Software company India
http//www.ifour-consultancy.com
3
Uses of JavaScript

• You can use JavaScript to
• Change HTML Elements.
• Delete HTML Elements.
• Create new HTML Elements.
• Copy and Clone HTML Elements.
• And much more...

ASP.NET Software company India
http//www.ifour-consultancy.com
4
Where to use JavaScript

• In HTML, JavaScripts must be inserted between
  ltscriptgt and lt/scriptgt tags.
• JavaScripts can be put in the ltbodygt and in the
  ltheadgt section of an HTML page.
• To insert a JavaScript into an HTML page, use
  the ltscriptgt tag.
• The ltscriptgt and lt/scriptgt tells where the
  JavaScript starts and ends.
• The lines between ltscriptgt and lt/scriptgt contain
  the JavaScript code.

ASP.NET Software company India
http//www.ifour-consultancy.com
5
JavaScript Functions and Events

• JavaScript code is written to be executed when
  an event occurs, like when the user clicks a
  button.
• JavaScript code inside a function, can be
  invoked later, when an event occurs.
• Invoke a function Call upon a function (ask
  for the code in the function to be executed).

ASP.NET Software company India
http//www.ifour-consultancy.com
6
JavaScript in ltheadgt or ltbodygt

• You can place any number of scripts in an HTML
  document.
• Scripts can be placed in the ltbodygt or in the
  ltheadgt section of HTML, and/or in both.
• Sometimes you will see all JavaScript functions
  in the ltheadgt section.

ASP.NET Software company India
http//www.ifour-consultancy.com
7
External JavaScript

• Scripts can also be placed in external files.
• External scripts are practical when the same
  code is used in many different web pages.
• JavaScript files have the file extension .js.
• To use an external script, put the name of the
  script file in the source (src) attribute of the
  ltscriptgt tag.
• You can place an external script reference in
  ltheadgt or ltbodygt as you like.
• The script will behave as if it was located
  exactly where you put the reference in the HTML
  document.

ASP.NET Software company India
http//www.ifour-consultancy.com
8
JavaScript Output

• JavaScript does not have any print or output
  functions.
• In HTML, JavaScript can only be used to
  manipulate HTML elements.
• To access an HTML element from JavaScript, you
  can use the document.getElementById(id) method.
• Use the "id" attribute to identify the HTML
  element, and innerHTML to refer to the element
  content.
• document.getElementById("demo") is JavaScript
  code for finding an HTML element using the id
  attribute.
• innerHTML "Paragraph changed." is JavaScript
  code for changing an element's HTML content
  (innerHTML).
• If your browser supports debugging, you can use
  the console.log() method to display JavaScript
  values in the browser.

ASP.NET Software company India
http//www.ifour-consultancy.com
9
Introduction to JQuery

• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript
  programming.
• jQuery is a lightweight, "write less, do more",
  JavaScript library.
• jQuery simplifies HTML document traversing,
  event handling, animating, and Ajax interactions
  for rapid web development.
• The purpose of jQuery is to make it much easier
  to use JavaScript on your website.

ASP.NET Software company India
http//www.ifour-consultancy.com
10
Advantages of 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

ASP.NET Software company India
http//www.ifour-consultancy.com
11
jQuery Install

• There are several ways to start using jQuery on
  your web site.
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google
  
• There are two versions of jQuery available for
  downloading
• Production version
• Development version
• If you don't want to download and host jQuery
  yourself, you can include it from a CDN (Content
  Delivery Network).
• Both Google and Microsoft host jQuery.

ASP.NET Software company India
http//www.ifour-consultancy.com
12
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).
• The Document Ready event is used to prevent any
  jQuery code from running before the document is
  finished loading (is ready).
• It is good practice to wait for the document to
  be fully loaded and ready before working with it.

ASP.NET Software company India
http//www.ifour-consultancy.com
13
jQuery Selectors

• jQuery selectors are one of the most important
  parts of the jQuery library.
• jQuery selectors allow you to select and
  manipulate HTML element(s).
• jQuery selectors are used to "find" (or select)
  HTML elements based on their id, classes, types,
  attributes, values of attributes and much more.
• The jQuery element selector selects elements
  based on the element name.
• The jQuery id selector uses the id attribute of
  an HTML tag to find the specific element.
• The jQuery class selector finds elements with a
  specific class.

ASP.NET Software company India
http//www.ifour-consultancy.com
14
References

• www.w3schools.com
• www.tutorialspoint.com

ASP.NET Software company India
http//www.ifour-consultancy.com