Insights on JavaScript and JQuery for web development - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Insights on JavaScript and JQuery for web development

Description:

This presentation covers information about JavaScript and JQuery technology for web development companies. – PowerPoint PPT presentation

Number of Views:358

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com