New JavaScript & jQuery Tutorials.

JavaScript is one of the greatest and powerful client side scripting language which is used massively these days in web applications. Whether you want to create html site or to create dynamic site using php all you’ll need to use JavaScript in some or many parts of your projects. JavaScript does many jobs which other languages including PHP & ASP even can’t do. This language changes your static site to a dynamic site within milliseconds using few line of codes. We’ll be sharing a series of video tutorials with you to learn JS & jQuery from scratch. However, you can wait for our upcoming advance tutorials on this subject, where we’ll be able to push you towards some projects.

What does really JavaScript & jQuery do?

javascript can validate HTML forms before they are submitted to a web server(it saves extra server requests), JavaScript can be used to react on a page when a visitor clicks an HTML element, when a visitor enters to a page, when a visitor leaves a page and so on. JavaScript can also be used to save visitors’ information in your server, it can detect the visitor’s information such as the IP address, the browser, the location etc. In JS we can create pop up boxes and pop up windows. There are many things more we can do using JS.

While jQuery is very beautiful library of JS, which is used to do the big tasks with less codes, you can create image sliders using jQuery, you can create image galleries in jquery, you can make video galleries in jQuery and there are many things you can do using jQuery.

other similar language to javascript'

json (a web language for structuring text data)
ajax(asynchronus javascript and html)
dom (document object model)
bom (browser object model)
dhtml (dynamic hyper text markup language)

JavaScript - Page Printing

Many times you would like to place a button on your webpage to print the content of that web page via an actual printer. JavaScript helps you to implement this functionality using the print function of window object.

The JavaScript print function window.print() prints the current web page when executed. You can call this function directly using the onclick event as shown in the following example.

Example

Try the following example.

<html>
   <head>
      
      <script type="text/javascript">
         <!--
         //-->
      </script>
   
   </head>
   
   <body>
      
      <form>
         <input type="button" value="Print" onclick="window.print()" />
      </form>
   
   </body>
<html>

Output

Although it serves the purpose of getting a printout, it is not a recommended way. A printer friendly page is really just a page with text, no images, graphics, or advertising.

You can make a page printer friendly in the following ways −

Make a copy of the page and leave out unwanted text and graphics, then link to that printer friendly page from the original. Check Example.
If you do not want to keep an extra copy of a page, then you can mark your printable text using proper comments like .....  and then you can use PERL or any other script in the background to purge printable text and display for final printing. We at Tutorialspoint use this method to provide print facility to our site visitors. CheckExample.

How to Print a Page

If you don’t find the above facilities on a web page, then you can use the browser's standard toolbar to get print the web page. then click this code

file-print-click ok button

JavaScript - Document Object Model or DOM

Every web page resides inside a browser window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.

Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
Form object − Everything enclosed in the <form>...</form> tags sets the form object.
Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of a few important objects −

There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.

The Legacy DOM − This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.
The W3C DOM − This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.
The IE4 DOM − This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.

DOM compatibility

If you want to write a script with the flexibility to use either W3C DOM or IE 4 DOM depending on their availability, then you can use a capability-testing approach that first checks for the existence of a method or property to determine whether the browser has the capability you desire. For example −

if (document.getElementById) {
   // If the W3C method exists, use it
}

else if (document.all) {
   // If the all[] array exists, use it
}

else {
   // Otherwise use the legacy DOM
}

jQuery - DOM Manipulation

JQuery provides methods to manipulate DOM in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.

JQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving information from DOM elements for later use.

Content Manipulation

The html( ) method gets the html contents (innerHTML) of the first matched element.

Here is the syntax for the method −

selector.html( )

Example

Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content from the object and then .text( val ) method sets value of the object using passed parameter −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
  
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
  
   </head>
 
   <body>
 
      <p>Click on the square below:</p>
      <span id="result"> </span>
  
      <div id="division" style="background-color:blue;">
         This is Blue Square!!
      </div>
  
   </body>
 
</html>

DOM Element Replacement

You can replace a complete DOM element with the specified HTML or DOM elements. The replaceWith( content ) method serves this purpose very well.

Here is the syntax for the method −

selector.replaceWith( content )

Here content is what you want to have instead of original element. This could be HTML or simple text.

Example

Following is an example which would replace division element with "<h1>JQuery is Great</h1>" −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
  
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
  
   </head>
 
   <body>
 
      <p>Click on the square below:</p>
      <span id="result"> </span>
  
      <div id="division" style="background-color:blue;">
         This is Blue Square!!
      </div>
  
   </body>
</html>

Removing DOM Elements

There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation.

The empty( ) method remove all child nodes from the set of matched elements where as the method remove( expr ) method removes all matched elements from the DOM.

Here is the syntax for the method −

selector.remove( [ expr ])

or 

selector.empty( )

You can pass optional paramter expr to filter the set of elements to be removed.

Example

Following is an example where elements are being removed as soon as they are clicked −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
  
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
  
   </head>
 
   <body>
 
      <p>Click on any square below:</p>
      <span id="result"> </span>
  
      <div class="div" style="background-color:blue;"></div>
      <div class="div" style="background-color:green;"></div>
      <div class="div" style="background-color:red;"></div>
  
   </body>
 
</html>

This will produce following result:

Inserting DOM elements

There may be a situation when you would like to insert new one or more DOM elements in your existing document. JQuery provides various methods to insert elements at various locations.

The after( content ) method insert content after each of the matched elements where as the method before( content ) method inserts content before each of the matched elements.

Here is the syntax for the method −

selector.after( content )

or

selector.before( content )

Here content is what you want to insert. This could be HTML or simple text.

Example

Following is an example where <div> elements are being inserted just before the clicked element −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
  
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
  
   </head>
 
   <body>
 
      <p>Click on any square below:</p>
      <span id="result"> </span>
  
      <div class="div" style="background-color:blue;"></div>
      <div class="div" style="background-color:green;"></div>
      <div class="div" style="background-color:red;"></div>
  
   </body>
 
</html>

This will produce following result:

DOM Manipulation Methods

Following table lists down all the methods which you can use to manipulate DOM elements −

S.No.	Method & Description
1	after( content ) Insert content after each of the matched elements.
2	append( content ) Append content to the inside of every matched element.
3	appendTo( selector ) Append all of the matched elements to another, specified, set of elements.
4	before( content ) Insert content before each of the matched elements.
5	clone( bool ) Clone matched DOM Elements, and all their event handlers, and select the clones.
6	clone( ) Clone matched DOM Elements and select the clones.
7	empty( ) Remove all child nodes from the set of matched elements.
8	html( val ) Set the html contents of every matched element.
9	html( ) Get the html contents (innerHTML) of the first matched element.
10	insertAfter( selector ) Insert all of the matched elements after another, specified, set of elements.
11	insertBefore( selector ) Insert all of the matched elements before another, specified, set of elements.
12	prepend( content ) Prepend content to the inside of every matched element.
13	prependTo( selector ) Prepend all of the matched elements to another, specified, set of elements.
14	remove( expr ) Removes all matched elements from the DOM.
15	replaceAll( selector ) Replaces the elements matched by the specified selector with the matched elements.
16	replaceWith( content ) Replaces all matched elements with the specified HTML or DOM elements.
17	text( val ) Set the text contents of all matched elements.
18	text( ) Get the combined text contents of all matched elements.
19	wrap( elem ) Wrap each matched element with the specified element.
20	wrap( html ) Wrap each matched element with the specified HTML content.
21	wrapAll( elem ) Wrap all the elements in the matched set into a single wrapper element.
22	wrapAll( html ) Wrap all the elements in the matched set into a single wrapper element.
23	wrapInner( elem ) Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
24	wrapInner( html ) Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

web development

Tuesday, July 21, 2015