0% found this document useful (0 votes)
23 views32 pages

WT Unit-3

Uploaded by

reddynanda426
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
23 views32 pages

WT Unit-3

Uploaded by

reddynanda426
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

What is a Scripting Language?

When building an online application or simply adding some additional dynamics to a


website, there is a special resource you need: scripting languages.

"A scripting language is a type of programming language which does not require explicit
compilation step, and it is designed for a runtime system to automate the execution of
tasks.

All scripting languages are programming languages. The scripting language is basically a
language where instructions are written for a run time environment. They do not require the
compilation step and are rather interpreted.

Scripting languages are types of programming languages where the instructions are written
for a run-time environment, to bring new functions to applications, and integrate or
communicate complex systems and other programming languages.

A scripting language is used to write scripts. These contain a series of commands that are
interpreted one by one at runtime.

Nowadays, scripts are generally associated with web development where they are widely
used to make dynamic web applications. Scripting languages can be divided into two
categories:

 Server Side Scripting Languages


 Client Side Scripting Languages

 Server-side scripting languages create the scripts that run on the server and hence
minimize the workload of a browser. The functionality of your website is written in
those scripting languages. The most commonly used server-side scripting languages
are Perl, Ruby, Python, PHP, etc.
 Client-side scripting languages create the scripts that run on the client side (i.e. your
browser). These are sent from the server by server-side scripts. Some good examples
are JavaScript, jQuery, CSS etc.

Scripting languages support "script," which is small program written for a specific runtime
environment. These are interpreted at runtime rather than compiled. It means, to convert the
source code to machine code, scripting languages use an interpreter, not the compiler. As
scripting language is not compiled so as we write something meaningful, we can run it
immediately.
he scripting language refers to dynamic high-level, general-purpose interpreted languages
such as Python, Perl, etc. Thus, a scripting language can automate different environments
such as application softwares, webpages, text editors, operating system shells, computer
games, etc.

A programming language is a computer language which is used to communicate with


computers using a set of instructions.
A scripting language is a type of programming language that supports scripts, which are
small programs mainly used to automate the execution of a specific function in a specific
runtime environment.

While all scripting languages are programming languages, not all programming
languages are scripting languages.

What are scripting languages?

A scripting language is a programming language that executes tasks within a special run-time
environment by an interpreter instead of a compiler. They are usually short, fast, and
interpreted from source code or bytecode.

Such environments include software applications, web pages, and even embedded systems in
operating system shells and games. Most modern structures support these languages, which
gives them a wide support while also being developed through an open-source process.

Using a scripting language is preferable depending on your goals and environment. As they
are a series of commands executed with no need for a compiler, they are cross-platform and
do not require special software to be installed in order to run — except for a web
browser, of course.

There are two main types: server-side and client-side. They differ on where the code is run
from, which affects not only the actual languages chosen but also the performance and their
capabilities.

Below, you will learn more about each of these types of scripting languages and some
examples.

Server-side scripting language


The term server-side scripting language refers to those that run off a web server. Since it
performs from the back-end side, the script is not visible to the visitor. Because of that, it is a
more secure approach.

They are often used to create dynamic websites and platforms, handle user queries, and
generate and provide data and others. A famous example of server-side scripting is the use
of PHP in WordPress.

Examples: PHP, Python, Node.js, Perl, and Ruby.

Client-side scripting language


Unlike the above, client-side scripting languages run off the user’s browser. It is usually
performed at the front-end, which makes it visible to visitors and makes it less vulnerable to
exploits and leaks. As such, it is often used to build user interfaces and lighter functionality
such as that.
Since it runs locally, they usually provide better performance and, therefore, do not strain
your server.

Examples: HTML, CSS, jQuery, and JavaScript.

Scripting Laguages
Scripting languages are like programming languages that allow us to write programs in form
of script. These scripts are interpreted not compiled and executed line by line.
Two types of Scripting languages:

1.Client-side Scripting: Client-side scripts run in the web browser.


2.Server-side Scripting: Server-side scripts run on the web server.

Examples of Popular Client-side Scripting


 JavaScript
 ActionScript
 VBScript
 Dart
 TypeScript
 HTML
 CSS

Examples of Server-side Scripting


 PHP
 ASP
 JSP
 Python
 Pearl
 Ruby
 Node.js

Differences between Client-side Scripting and Server-side Scripting


Client-side scripting Server-side scripting

1)Client-side script is executed by a browser. 1)Server-side script is executed by a web


server
2) Works at the front end and script are visible 2) Works in the back end which could not
to the users. be visible at the client end.

3)Interact with temporary storage 3)Interaction with servers/storages and


with databases.

4)It Sends requests to the server and Retrieval 4)It processes the user input and Displays
of data from Server the requested pages.

5)Does not need interaction with the server. 5)Requires server interaction.
6)Cannot connect to the databases on the web 6) Connect to the databases that is on web
server. server.
7)Response from a client-side script is faster 7)Response from a server-side script is
because the scripts are processed on the local slower because the scripts are processed
computer remotely.

8)Client side scripting can’t access the file 8)Server side scripting can access the file
system that resides at the web server. system residing at the web server.

9)Client side scripting languages: 9)Server side scripting languages: PHP,


HTML,CSS,Javascript, VB script, etc. JSP, ASP, Asp. Net, Ruby, Perl etc.

Features of JAVA Script

 Light Weight Scripting language

 Dynamic Typing

 Object-oriented programming support

 Functional Style

 Platform Independent

 Prototype-based

 Interpreted Language

 Async Processing

 Object-Centered Script Language

 Client edge Technology

 Validation of User’s Input

 Else and If Statement

 Interpreter Centered

 Ability to perform In Built Function

 Case Sensitive format

 Light Weight and delicate


 Statements Looping

 Handling Events

Features Of JavaScript

JavaScript is divided into two main features, they are as follows –

General JavaScript Features

JavaScript language consists of several different features. Some of the general JavaScript
features are as follows –

1. Validating User’s Input

JavaScript is very useful while using forms. It has the capability to validate user input for
errors and also saves time. If the user leaves a required field empty or the information is
incorrect, JavaScript checks for them before sending the data over to the server.

2. Simple Client-side Calculations

Since JavaScript is a client-side technology, it can perform basic calculations on the browser.
The browser does not need to ask server time for every task. This is especially helpful when a
user needs to perform these calculations repeatedly. In these cases, connecting to the server
would take a lot more time than performing the actual calculations.

3. Greater Control

JavaScript provides greater control to the browser rather than being completely dependent on
the web servers. JavaScript provides various browsers with additional functionalities that help
reduce server load and network traffic.

4. Platform Independent

Since browsers interpret JavaScript, it solves the problem of compilation and compatibility.
Thus it can run on Windows, Macintosh, and other Netscape-supported systems. Also, it is
possible to embed them in any other script like HTML that keeps JavaScript into use.
5. Handling Dates and Time

Unlike other programming languages, JavaScript has built-in functions to determine the date
and time. Thus it is very easy to code only by using methods like .getDate().
6. Generating HTML Content

JavaScript has very handy features to dynamically generate HTML content for the web. It
allows us to add text, links, images, tables, etc after an event occurrence (eg – mouse click).
7. Detecting the User’s Browser and OS

JavaScript is very capable in the detection of the user’s browser and OS information. Though
JavaScript runs on every platform, there may occur a situation where we need the user’s
browser before processing. This can be helpful for writing code that results in different
outputs in different browsers.
Do you know How to Declare and Initialize a JavaScript Variable?
Modern JavaScript Features

If we dive into some more recently added features of JavaScript that makes it unique from
other programming languages. There are a lot more modern features of JavaScript invented
after some general features. Some of them are as follows –

1. Let/Const

JavaScript has introduced the keywords ‘let’ and ‘const’ that are available to replace ‘var’.
Unlike ‘var’, they are important due to their blocked scope i.e we can only access them in the
block we defined them in. Whereas ‘var’, even if we initialize it inside a function, we can
access it outside of the function.
2. Arrow Functions

These functions are very useful in simplifying the syntax and tamp down the lines of codes
for the web page or web application. Since these are light-weight in syntax, they can be very
easily used in anonymous functions in JavaScript.
3. Template Literal

This is a common feature in other programming languages that allows you to save variables
directly into strings. This proves to be an important tool for developers as it permits them to
focus more on the development of the application rather than spending the time on syntax.

4. New Array Functions

Though array functions are not necessary for any programming language, they do simplify
things for the developer. This also compacts the code and makes it much easier to understand.
A regular array and an associative array, JavaScript supports them both. While a regular array
contains integer values for its index, indexes can be strings for an associative array.

5. Default Parameters

This JavaScript feature helps to avoid collapsing the whole code for a simple mistake. It is
very useful when the developer needs to check the working of a function without any
parameters.

6. Property Shorthand

Built-in methods like .get() are available for the developer’s use. These methods help avoid
writing the same code every time and cut back on various lines of code. These inborn
methods are really supportive of cutting back the developing time and cost.

Features of JavaScript

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it
is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS,
etc.
8. It provides good control to the users over the web browsers.

<html>
<head>
<script>
function fun(a,b)
{
document.write("value of a: " +a);
document.write("<br>");
document.write("value of b: " +b);

}
</script>
</head>
<body>
<input type="button" onclick="fun(3,5)" value="click"/>
</body>
</html>

<html>
<head>
<script>
function fun()
{
document.write("welcome");
}
</script>
</head>
<body>
<input type="button" onclick="fun()" value="click"/>
</body>
</html>

<html>
<head>
<script>
function add(a,b)
{
document.write(a+b);
}
</script>
</head>
<body>
<input type="button" onclick="add(5,5)" value="click"/>
</body>
</html>

<html>
<head>
<script>
function fun(a,b)
{
alert(a+b);
}
</script>
</head>
<body>
<input type="button" onclick="fun(5,5)" value="click"/>
</body>
</html>

<html>
<head>
<script>
function fun(a,b)
{
return(a+b);
}
document.write(fun(23,5));
</script>
</head>
<body>
<p> funcrions with return value</p>
</body>
</html>

<html>
<body>
<p> funcrions with return value</p>
<script>
function fun(a,b)
{
return(a+b);
}
document.write(fun(23,5));
</script>
</body>
</html>

<html>
<body>
<p> funcrions with return value</p>
<script>
function fact(n)
{

if(n==0)
return(1);
else
return(n*fact(n-1));
}
document.write(fact(5));
</script>
</body>
</html>

<html>
<body>
<p> funcrions with return value</p>
<script>
function fact(n)
{

if(n==0)
return(1);
else
return(n*fact(n-1));
}
var a=Number(prompt('enter a number'));
// var a=parseInt(prompt('enter a number')); also used

document.write("factorial:" + fact(a));
</script>
</body>
</html>

Arrays:
<html>

<body>
<script>
arr=[1,2,3,4,5,6,7];
for(i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>

</body>
</html>

<html>
<body>
<script>
arr=Array(1,2,3,4,5);
for(i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>
</body>
</html>

<html>
<body>
<script>
arr=Array("mohan","Hani","Rihan");
for(i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>
</body>
</html>

<html>
<body>
<p id="mn"></p>
<script>
arr=Array("mohan","Hani","Rihan");
for(i = 0; i < arr.length; i++)
{
document.getElementById("mn").innerHTML=arr;
}
</script>
</body>
</html>

Example-2:
<html>

<body>
<script>
arr1 = ["ABCd", 24, 18000];
arr2 = ["EFGd", 30, 30000];
arr3 = ["IJKd", 28, 41000];
arr4 = ["EFGd", 31, 28000];
arr5 = ["EFGd", 29, 35000];
salary = [arr1, arr2, arr3, arr4, arr5];
for(i = 0; i < salary.length; i++)
{
document.write(salary[i] + "<br>");
}
</script>

</body>
</html>

The Math Object


Unlike other objects, the Math object has no constructor.

The Math object is static.


All methods and properties can be used without creating a Math object first.

The JavaScript Math object allows you to perform mathematical tasks on


numbers.

<html>
<body>

<h2>JavaScript Math.PI</h2>

<p>Math.PI returns the ratio of a circle's circumference to its diameter:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.PI;
</script>

</body>
</html>

Math Properties (Constants)


The syntax for any Math property is : Math.property.

JavaScript provides 8 mathematical constants that can be accessed as Math


properties:

Example
Math.E // returns Euler's number
Math.PI // returns PI
Math.SQRT2 // returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E // returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E

Math Methods
The syntax for Math any methods is : Math.method(number)
Number to Integer
There are 4 common methods to round a number to an integer:

Math.round(x) Returns x rounded to its nearest integer

Math.ceil(x) Returns x rounded up to its nearest integer

Math.floor(x) Returns x rounded down to its nearest integer

Math.trunc(x) Returns the integer part of x (new in ES6)

<html>
<body>
<script>
document.write(Math.floor(19.6) + "<br>");
document.write(Math.ceil(19.6) + "<br>");
document.write(Math.round(19.6) + "<br>");
document.write(Math.trunc(19.6) + "<br>");
</script>
</body>
</html>

JavaScript Math Methods


Method Description
abs(x) Returns the absolute value of x

cbrt(x) Returns the cubic root of x

ceil(x) Returns x, rounded upwards to the nearest integer

cos(x) Returns the cosine of x (x is in radians)

cosh(x) Returns the hyperbolic cosine of x


exp(x) Returns the value of Ex

floor(x) Returns x, rounded downwards to the nearest integer

log(x) Returns the natural logarithm (base E) of x

max(x, y, z, ..., Returns the number with the highest value


n)

min(x, y, z, ..., n) Returns the number with the lowest value

pow(x, y) Returns the value of x to the power of y

random() Returns a random number between 0 and 1

round(x) Rounds x to the nearest integer

sign(x) Returns if x is negative, null or positive (-1, 0, 1)

sin(x) Returns the sine of x (x is in radians)

sinh(x) Returns the hyperbolic sine of x

sqrt(x) Returns the square root of x


tan(x) Returns the tangent of an angle

tanh(x) Returns the hyperbolic tangent of a number

trunc(x) Returns the integer part of a number (x)

<html>
<body>
<script>
document.write(Math.max(3,1,23,45) + "<br>");
document.write(Math.min(3,1,23,45) + "<br>");
document.write(Math.sqrt(81) + "<br>");
document.write(Math.pow(3,3) + "<br>");
document.write(Math.abs(-1) + "<br>");
document.write(Math.sin(45) + "<br>");
document.write(Math.cos(45) + "<br>");
document.write(Math.tan(45) + "<br>");
</script>
</body>
</html>

JavaScript Date Objects


By default, JavaScript will use the browser's time zone and display a date as
a full text string:

Fri May 20 2022 22:15:22 GMT+0530 (India Standard Time)

JavaScript Date Object


The JavaScript date object can be used to get year, month and day. You can display
a timer on the webpage by the help of JavaScript date object.
You can use different Date constructors to create date object. It provides methods to
get and set day, month, year, hour, minute and seconds.

Constructor
You can use 4 variant of Date constructor to create date object.

1. Date()
2. Date(milliseconds)
3. Date(dateString)
4. Date(year, month, day, hours, minutes, seconds, milliseconds)

JavaScript Date Methods

Methods Description

getDate() It returns the integer value between 1 and 31 that represents the day for the specified
date on the basis of local time.

getDay() It returns the integer value between 0 and 6 that represents the day of the week on
the basis of local time.

getFullYear() It returns the integer value that represents the year on the basis of local time.

getHours() It returns the integer value between 0 and 23 that represents the hours on the basis of
local time.

getMilliseconds() It returns the integer value between 0 and 999 that represents the milliseconds on the
basis of local time.

getMinutes() It returns the integer value between 0 and 59 that represents the minutes on the basis
of local time.

getMonth() It returns the integer value between 0 and 11 that represents the month on the basis
of local time.

getSeconds() It returns the integer value between 0 and 60 that represents the seconds on the basis
of local time.

setDate() It sets the day value for the specified date on the basis of local time.

setDay() It sets the particular day of the week on the basis of local time.

setFullYears() It sets the year value for the specified date on the basis of local time.

setHours() It sets the hour value for the specified date on the basis of local time.

setMilliseconds() It sets the millisecond value for the specified date on the basis of local time.

setMinutes() It sets the minute value for the specified date on the basis of local time.

setMonth() It sets the month value for the specified date on the basis of local time.

setSeconds() It sets the second value for the specified date on the basis of local time.
toDateString() It returns the date portion of a Date object.

toISOString() It returns the date in the form ISO format string.

toJSON() It returns a string representing the Date object. It also serializes the Date object
during JSON serialization.

toString() It returns the date in the form of string.

toTimeString() It returns the time portion of a Date object.

valueOf() It returns the primitive value of a Date object.

<html>
<body>
<script>
obj=new Date();

document.write(Date() + "<br>");
document.write(obj.getDate() + "<br>");
document.write(obj.getMonth()+1 + "<br>");
document.write(obj.getFullYear() + "<br>");
document.write(obj.getDay() + "<br>");
document.write(obj.getHours() + "<br>");
document.write(obj.getMinutes() + "<br>");
document.write(obj.getSeconds() + "<br>");
document.write(obj.getMilliseconds() + "<br>");
</script>
</body>
</html>

JavaScript String
The JavaScript string is an object that represents a sequence of characters.

There are 2 ways to create string in JavaScript

1. By string literal
2. By string object (using new keyword)

1) By string literal
The string literal is created using double quotes. The syntax of creating string using
string literal is given below:

1. var stringname="string value";

2) By string object (using new keyword)


The syntax of creating string object using new keyword is given below:

1. var stringname=new String("string literal");

Here, new keyword is used to create instance of string.

JavaScript String Methods


Let's see the list of JavaScript string methods with examples.
Methods Description
charAt() It provides the char value present at the specified index.

charCodeAt() It provides the Unicode value of a character present at the specified index.

concat() It provides a combination of two or more strings.

indexOf() It provides the position of a char value present in the given string.

lastIndexOf() It provides the position of a char value present in the given string by searching a
character from the last position.

search() It searches a specified regular expression in a given string and returns its position
if a match occurs.

match() It searches a specified regular expression in a given string and returns that regular
expression if a match occurs.

replace() It replaces a given string with the specified replacement.

substr() It is used to fetch the part of the given string on the basis of the specified starting
position and length.

substring() It is used to fetch the part of the given string on the basis of the specified index.

slice() It is used to fetch the part of the given string. It allows us to assign positive as well
negative index.

toLowerCase() It converts the given string into lowercase letter.

toLocaleLowerCase() It converts the given string into lowercase letter on the basis of host?s current
locale.

toUpperCase() It converts the given string into uppercase letter.

toLocaleUpperCase( It converts the given string into uppercase letter on the basis of host?s current
) locale.

toString() It provides a string representing the particular object.

valueOf() It provides the primitive value of string object.


split() It splits a string into substring array, then returns that newly created array.

trim() It trims the white space from the left and right side of the string.

<html>
<body>
<script>
s1 = "JAVA SCRIPT IS NOT JAVA ";
s2=new String("mohan");
document.write(s1 + "<br>");
document.write(s2 + "<br>");
document.write(s1.charAt(2) + "<br>");
document.write(s1.concat(s2) + "<br>");
document.write(s2.substr(2,2) + "<br>");
document.write(s1.toLowerCase() + "<br>");
document.write(s2.toUpperCase() + "<br>");
document.write(s1.indexOf('JAVA') + "<br>");
document.write(s1.lastIndexOf('JAVA') + "<br>");
</script>
</body>
</html>

JavaScript Number Object


The JavaScript number object enables you to represent a numeric value. It may be
integer or floating-point. JavaScript number object follows IEEE standard to represent
the floating-point numbers.

By the help of Number() constructor, you can create number object in JavaScript. For
example:

1. var n=new Number(value);


Examples:
1. var x=102;//integer value
2. var y=102.7;//floating point value
3. var z=13e4;//exponent value, output: 130000
4. var n=new Number(16);//integer value by number object
JavaScript Number Methods
Let's see the list of JavaScript number methods with their description.

Methods Description

isFinite() It determines whether the given value is a finite number.

isInteger() It determines whether the given value is an integer.

parseFloat() It converts the given string into a floating point number.

parseInt() It converts the given string into an integer number.

toExponential() It returns the string that represents exponential notation of the given number.

toFixed() It returns the string that represents a number with exact digits after a decimal point.

toPrecision() It returns the string representing a number of specified precision.

toString() It returns the given number in the form of string.

JavaScript Boolean
JavaScript Boolean is an object that represents value in two states: true or false. You
can create the JavaScript Boolean object by Boolean() constructor as given below.

1. Boolean b=new Boolean(value);


EX:
<script>
document.write(10<20);//true
document.write(10<5);//false
</script>

JavaScript Boolean Methods


Method Description

toSource() returns the source of Boolean object as a string.

toString() converts Boolean into String.

valueOf() converts other type into Boolean.

JavaScript Events
The change in the state of an object is known as an Event. In html, there are various
events which represents that some activity is performed by the user or by the
browser. When javascript code is included in HTML, js react over these events and
allow the execution. This process of reacting over the events is called Event
Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute the
task to be performed on the event.

Some of the HTML events and their event handlers are:

Mouse events:

Event Performed Event Handler Description

Click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

Mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

Mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.


Keyboard events:

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Event Handler Description


Performed

Focus When the user focuses on an element


onfocus
Submit When the user submits the form
onsubmit
Blur When the focus is away from a form element
onblur
Change When the user modifies or changes the value of a form
onchange element

Window/Document events

Event Event Handler Description


Performed

Load When the browser finishes the loading of the page


onload
Unload When the visitor leaves the current webpage, the browser
onunloa unloads it

d
Resize When the visitor resizes the window of the browser
onresize

Click event:

<html>
<body>
<script>
function fun()
{
alert("click event");
}

</script>
<input type="button" onClick="fun()" value="click"/>
</body>
</html>

Mouseover event:
<html>
<body>
<script>
function fun()
{
alert("mouseover event");
}

</script>
<input type="button" onmouseover="fun()" value="keep cursor over me"/>

<P onmouseover="fun()"> I AM P ELEMENT keep cursor over me</P>


</body>
</html>

Example with Images:


<html>
<body>
<img id="mn" onmouseover="fun1()" onmouseout="fun2()"
src="D:\Images\Images\Flower1.jpg">

<script>
function fun1()
{

document.getElementById("mn").src = "Flower.jpg";

}
function fun2()
{

document.getElementById("mn").src = "Flower2.jpg";

</script>

</body>
</html>
Focus Event:
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="mn" onfocus="fun()"/>
<script>

function fun()
{
document.getElementById("mn").style.background="red";
}

</script>
</body>
</html>
KeyDown event:
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="mn" onkeydown="fun()"/>
<script>

function fun()
{
document.getElementById("mn");
alert("key pressed");
}

</script>
</body>
</html>
Onload event:
<html>
<head> Javascript Events</head>
<body onload="alert('page Loaded SUCCESSFULLY')">
<script>
document.write("<br>Page loaded successfully");
</script>
</body>
</html>

Form handling:
<HTML>
<SCRIPT>
function FUN(form)
{
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="inputbox" ><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="FUN(this.form)">
</FORM>
</BODY>
</HTML>

Form Validfation: Username and password

<html>
<body>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;

if (name=='mohan' && password=='mohan')


{
alert("You have successfully logged in");
return true;
}
else
{
alert("user name or password is invalid.");
return true;
}
}
</script>
<body>
<form name="myform" method="post" onsubmit="validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

Form Validfation2:

<html>
<body>
<script>
function validateform()
{
var name=document.myform.name.value;
var password=document.myform.password.value;

if (name==null || name=="")
{
alert("Name can't be blank");
return false;
}
else if(password.length<6)
{
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="fv.html" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>

fv.html:
<html>
<body>
<h1>form sumitted successfully</h1>
</body>
</html>

Getting form value and displaying:

<HTML>
<SCRIPT>
function FUN(form)
{
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="inputbox" ><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="FUN(this.form)">
</FORM>
</BODY>
</HTML>

Form Validation: JavaScript Retype Password Validation

<html>
<body>
<script>
function matchpass()
{
var firstpassword=document.f1.password1.value;
var secondpassword=document.f1.password2.value;

if(firstpassword==secondpassword)
{
return true;
}
else
{
alert("password must be same!");
return false;
}
}
</script>

<form name="f1" action="reg.html" onsubmit="return matchpass()">


Password:<input type="password" name="password1" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
</body>
</html>

Reg,html:
<html>
<body>
<h1>You are a valid user.</h1>
<h2>Thank you for visiting our site</h2>
</body>
</html>

You might also like