Design a form and perform client side validation using Javascript and HTML5. PDF

Preview

Summary

Javascript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementations allow client-side
script to interact with the user and make dynamic pages. It is an interpreted
programming language with object-oriented ca...

Description

Experiment No-4 -(a)

Aim: To design a form and perform client side validation using Javascript and HTML5. Theory: Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities. JavaScript is a lightweight, interpreted programming language. •

Designed for creating network-centric applications.

•

Complementary to and integrated with Java.

•

Complementary to and integrated with HTML.

•

Open and cross-platform.

Syntax: JavaScript can be implemented using JavaScript statements that are placed within the HTML tags in a web page. You can place the

The script tag takes two important attributes: •

Language: This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute.

•

Type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". So your JavaScript syntax will look as follows.

Tags Used: •

Form tags- input,button,submit.

•

Javascipt events.

•

HTML5 tags (wherever applicable)

Result: A sample web page with a form is designed and validated using javascript scripting language.

Experiment No-4 -(b)

Aim: To design a form and perform client side validation using Javascript and jQuery. Theory: 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.

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[3] It is free, open-source software using the permissive MIT License. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.

Syntax: $(selector).action() Examples: $(document).ready( function() { … } ); $(this).hide(); $(“h1”).show(); $(“#someElement”).fadeIn( “slow” ); $(“.someClass”).fadeOut( “fast” );

Similar to CSS $(“*”) $(“p.someClass”) $(“[href]”)

$(“tr:even”) Select by ID (#) and class (.), etc. *By name (attribute): $(‘[name=“someName”]’)





If you click on me, I will disappear. Click me away! Click me too!

Result: jQuery is used for creating dynamic content and also for animations....