Scribd
Upload
0 views

web programming lecture 3

The document is a comprehensive lecture sheet on JavaScript, detailing its definition, uses, and differences from Java. It covers key concepts such as JavaScript variables, operators, and how to embed JavaScript in HTML, along with examples. Additionally, it explains the official name ECMAScript and provides insights into JavaScript's syntax and functionality.

Uploaded by

ihhridoy000
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

web programming lecture 3

The document is a comprehensive lecture sheet on JavaScript, detailing its definition, uses, and differences from Java. It covers key concepts such as JavaScript variables, operators, and how to embed JavaScript in HTML, along with examples. Additionally, it explains the official name ECMAScript and provides insights into JavaScript's syntax and functionality.

Uploaded by

ihhridoy000
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

JavaScript Lecture Sheet

Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

What is Javascript?
• JavaScript is the most popular scripting language on the internet, and works in
all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and
Safari.
• JavaScript is used in billions of Web pages to add functionality, validate forms,
communicate with the server, and much more.
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without
preliminary compilation)
• Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the same?

• NO! Java and JavaScript are two completely different languages in both concept
and design!
• Java (developed by Sun Microsystems) is a powerful and much more complex
programming language - in the same category as C and C++.

What can a JavaScript do?

• JavaScript gives HTML designers a programming tool - HTML authors are


normally not programmers, but JavaScript is a scripting language with a very
simple syntax! Almost anyone can put small "snippets" of code into their HTML
pages
• JavaScript can put dynamic text into an HTML page - A JavaScript
statement like this: document.write("<h1>" + name + "</h1>") can write a
variable text into an HTML page
• JavaScript can react to events - A JavaScript can be set to execute when
something happens, like when a page has finished loading or when a user clicks
on an HTML element
• JavaScript can read and write HTML elements - A JavaScript can read and
change the content of an HTML element
• JavaScript can be used to validate data - A JavaScript can be used to
validate form data before it is submitted to a server. This saves the server from
extra processing
• JavaScript can be used to detect the visitor's browser - A JavaScript can
be used to detect the visitor's browser, and - depending on the browser - load
another page specifically designed for that browser
• JavaScript can be used to create cookies - A JavaScript can be used to
store and retrieve information on the visitor's computer
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

The Real Name is ECMAScript


• JavaScript's official name is ECMAScript.
• ECMAScript is developed and maintained by the ECMA organization.
• ECMA-262 is the official JavaScript standard.
• The language was invented by Brendan Eich at Netscape (with Navigator 2.0),
and has appeared in all Netscape and Microsoft browsers since 1996.
• The development of ECMA-262 started in 1996, and the first edition of was
adopted by the ECMA General Assembly in June 1997.
• The standard was approved as an international ISO (ISO/IEC 16262) standard
in 1998.
• The development of the standard is still in progress.

JavaScript How To
• The HTML <script> tag is used to insert a JavaScript into an HTML page.
• Put a JavaScript into an HTML page
• The example below shows how to use JavaSript to write text on a web page:
Example
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

How to Handle Simple Browsers?


• Browsers that do not support JavaScript, will display JavaScript as page
content.
• To prevent them from doing this, and as a part of the JavaScript standard, the
HTML comment tag should be used to "hide" the JavaScript.
• Just add an HTML comment tag <!-- before the first JavaScript statement, and
a --> (end of comment) after the last JavaScript statement, like this:
<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

The two forward slashes at the end of comment line (//) is the JavaScript comment
symbol. This prevents JavaScript from executing the --> tag.

JavaScript Where To
• JavaScripts in the body section will be executed WHILE the page loads.
• JavaScripts in the head section will be executed when CALLED.

Where to Put the JavaScript


• JavaScripts in a page will be executed immediately while the page loads into the
browser. This is not always what we want. Sometimes we want to execute a
script when a page loads, other times when a user triggers an event.

Scripts in <head>
• Scripts to be executed when they are called, or when an event is triggered, go
in the head section.
• If you place a script in the head section, you will ensure that the script is loaded
before anyone uses it.
Example
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Scripts in <body>
• Scripts to be executed when the page loads go in the body section.
• If you place a script in the body section, it generates the content of a page.
Example
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Using an External JavaScript


• If you want to run the same JavaScript on several pages, without having to
write the same script on every page, you can write a JavaScript in an external
file.
• Save the external JavaScript file with a .js file extension.
Note: The external script cannot contain the <script> tag!
• To use the external script, point to the .js file in the "src" attribute of the
<script> tag:
Example
<html>
<head>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
</body>
</html>

JavaScript Statements
• JavaScript is a sequence of statements to be executed by the browser.
• JavaScript is Case Sensitive
• Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization
closely when you write JavaScript statements, create or call variables, objects
and functions.
• JavaScript Statements
• A JavaScript statement is a command to a browser. The purpose of the
command is to tell the browser what to do.
• This JavaScript statement tells the browser to write "Hello Dolly" to the web
page:
document.write("Hello Dolly");
• It is normal to add a semicolon at the end of each executable statement. Most
people think this is a good programming practice, and most often you will see
this in JavaScript examples on the web.

JavaScript Code
• JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
• Each statement is executed by the browser in the sequence they are written.
• This example will write a heading and two paragraphs to a web page:

Example
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

JavaScript Comments
• JavaScript comments can be used to make the code more readable.
• Comments can be added to explain the JavaScript, or to make the code more
readable.
• JavaScript Single-Line Comments
• Single line comments start with //.
• JavaScript Multi-Line Comments
• Multi line comments start with /* and end with */.

JavaScript Variables
 JavaScript variables are used to hold values or expressions.
 A variable can have a short name, like x, or a more descriptive name, like
carname.
Rules for JavaScript variable names:
 Variable names are case sensitive (y and Y are two different variables)
 Variable names must begin with a letter or the underscore character
Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

Example
A variable's value can change during the execution of a script. You can refer to a
variable by its name to display or change its value.

CODE
<html>
<body>
<script type="text/javascript">
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br/>");
firstname="Tove";
document.write(firstname);
</script>
<p>The script above declares a variable,
assigns a value to it, displays the value, changes the value,
and displays the value again.
</p>
</body>
</html>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

OUTPUT:
Hege
Tove
The script above declares a variable, assigns a value to it, displays the value, changes the
value, and displays the value again.

Declaring (Creating) JavaScript Variables

Creating variables in JavaScript is most often referred to as "declaring" variables.


You declare JavaScript variables with the var keyword:
var x;
var carname;
After the declaration shown above, the variables are empty (they have no values yet).
However, you can also assign values to the variables when you declare them:
var x=5;
var carname="Volvo";
After the execution of the statements above, the variable x will hold the value 5, and
carname will hold the value Volvo.
Note: When you assign a text value to a variable, use quotes around the value.
Note: If you redeclare a JavaScript variable, it will not lose its value.

Local JavaScript Variables


 A variable declared within a JavaScript function becomes LOCAL and can only
be accessed within that function. (the variable has local scope).
 You can have local variables with the same name in different functions, because
local variables are only recognized by the function in which they are declared.
 Local variables are destroyed when you exit the function.
 You will learn more about functions in a later chapter of this tutorial.
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Global JavaScript Variables


 Variables declared outside a function become GLOBAL, and all scripts and
functions on the web page can access it.
 Global variables are destroyed when you close the page.
 If you declare a variable, without using "var", the variable always becomes
GLOBAL.

Assigning Values to Undeclared JavaScript Variables


If you assign values to variables that have not yet been declared, the variables will
automatically be declared as global variables.
These statements:
x=5;
carname="Volvo";
will declare the variables x and carname as global variables (if they don't already
exist).

JavaScript Arithmetic
As with algebra, you can do arithmetic operations with JavaScript variables:
y=x-5;
z=y+5;

JavaScript Operators

= is used to assign values.


+ is used to add values.

The assignment operator = is used to assign values to JavaScript variables.


The arithmetic operator + is used to add values together.
y=5;
z=2;
x=y+z;

The value of x, after the execution of the statements above, is 7.


JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:

Operator Description Example Input Result


+ Addition x=y+2 x=7 y=5
- Subtraction x=y-2 x=3 y=5
* Multiplication x=y*2 x=10 y=5
/ Division x=y/2 x=2.5 y=5
% Modulus (division remainder) x=y%2 x=1 y=5
++ Increment x=++y x=6 y=6
x=y++ x=5 y=6
-- Decrement x=--y x=4 y=4
x=y-- x=5 y=4

JavaScript Assignment Operators


Assignment operators are used to assign values to JavaScript variables.

Given that x=10 and y=5, the table below explains the assignment operators:

Operator Example Same As Result


= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

The ‘+’ Operator Used on Strings


The + operator can also be used to add string variables or text values together.
To add two or more string variables together, use the + operator.
txt1="What a very";
txt2="nice day";
txt3=txt1 + txt2;

After the execution of the statements above, the variable txt3 contains "What a very
nice day".

To add a space between the two strings, insert a space into one of the strings:
txt1="What a very ";
txt2="nice day";
txt3=txt1 + txt2;

or insert a space into the expression:


txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

After the execution of the statements above, the variable txt3 contains:

"What a very nice day"

Adding Strings and Numbers


The rule is: If you add a number and a string, the result will be a string!

Example
X = 5 + 5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

OUTPUT
10
55
55
55

The rule is: If you add a number and a string, the result will be a string.

JavaScript Comparison and Logical Operators

Comparison and Logical operators are used to test for true or false.

Comparison Operators
Comparison operators are used in logical statements to determine equality or
difference between variables or values.

Given that x=5, the table below explains the comparison operators:

Operator Description Example


== is equal to x==8 is false
x==5 is true
=== is exactly equal to (value and type) x===5 is true
x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true

How Can it be Used


Comparison operators can be used in conditional statements to compare values and
take action depending on the result:
if (age<18) document.write("Too young");
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

You will learn more about the use of conditional statements in the next chapter of this
tutorial.

Logical Operators
Logical operators are used to determine the logic between variables or values.

Given that x=6 and y=3, the table below explains the logical operators:

Operator Description Example


&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true

Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based
on some condition.

Syntax
variablename=(condition)?value1:value2

Example
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

If the variable visitor has the value of "PRES", then the variable greeting will be
assigned the value "Dear President” else it will be assigned "Dear".
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

JavaScript Conditional Statements

Conditional statements are used to perform different actions based on different


conditions.

Very often when you write code, you want to perform different actions for different
decisions. You can use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:


 if statement - use this statement to execute some code only if a specified
condition is true
 if...else statement - use this statement to execute some code if the condition
is true and another code if the condition is false
 if...else if....else statement - use this statement to select one of many blocks
of code to be executed
 switch statement - use this statement to select one of many blocks of code to
be executed

If Statement
Use the if statement to execute some code only if a specified condition is true.

Syntax
if (condition)
{
code to be executed if condition is true
}

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a
JavaScript error!

Example
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Good morning</b>");
}
</script>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Notice that there is no ..else.. in this syntax. You tell the browser to execute some
code only if the specified condition is true.

If...else Statement
Use the if....else statement to execute some code if a condition is true and another
code if the condition is not true.

Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example
<script type="text/javascript">
//If the time is less than 10, you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date();


var time = d.getHours();

if (time < 10)


{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

Switch Statement

Conditional statements are used to perform different actions based on different


conditions.
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

The JavaScript Switch Statement


Use the switch statement to select one of many blocks of code to be executed.

Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

This is how it works: First we have a single expression n (most often a variable), that
is evaluated once. The value of the expression is then compared with the values for
each case in the structure. If there is a match, the block of code associated with that
case is executed. Use break to prevent the code from running into the next case
automatically.

Example
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
var theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday"); break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

JavaScript Popup Boxes

JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box.

Alert Box
An alert box is often used if you want to make sure information comes through to the
user.
When an alert box pops up, the user will have to click "OK" to proceed.

Syntax
alert("sometext");

Example
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>

JavaScript Functions

A function will be executed by an event or by a call to the function.

To keep the browser from executing a script when the page loads, you can put your
script into a function.
A function contains code that will be executed by an event or by a call to the function.
You may call a function from anywhere within a page (or even from other pages if the
function is embedded in an external .js file).
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Functions can be defined both in the <head> and in the <body> section of a
document. However, to assure that a function is read/loaded by the browser before it
is called, it could be wise to put functions in the <head> section.

How to Define a Function


Syntax
function functionname(var1,var2,...,varX)
{
some code
}

The parameters var1, var2, etc. are variables or values passed into the function. The
{ and the } defines the start and end of the function.

Note: A function with no parameters must include the parentheses () after the
function name.

Note: Do not forget about the importance of capitals in JavaScript! The word function
must be written in lowercase letters, otherwise a JavaScript error occurs! Also note
that you must call a function with the exact same capitals as in the function name.

JavaScript Function Example


<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>

If the line: alert("Hello world!!") in the example above had not been put within a
function, it would have been executed as soon as the page was loaded. Now, the
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

script is not executed before a user hits the input button. The function
displaymessage() will be executed if the input button is clicked.

You will learn more about JavaScript events in the JS Events chapter.

The return Statement


The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
The example below returns the product of two numbers (a and b):

Example
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>

JavaScript Loops
Often when you write code, you want the same block of code to run over and over
again in a row. Instead of adding several almost equal lines in a script we can use
loops to perform a task like this.

In JavaScript, there are two different kind of loops:

 for - loops through a block of code a specified number of times


 while - loops through a block of code while a specified condition is true

The for Loop


JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

The for loop is used when you know in advance how many times the script should run.

Syntax
for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}

Example

The example below defines a loop that starts with i=0. The loop will continue to run as
long as i is less than, or equal to 5. i will increase by 1 each time the loop runs.

Note: The increment parameter could also be negative, and the <= could be any
comparing statement.

Example
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

JavaScript While Loop


Loops execute a block of code a specified number of times, or while a specified
condition is true.

The while Loop


The while loop loops through a block of code while a specified condition is true.

Syntax
while (variable<=endvalue)
{
code to be executed
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Note: The <= could be any comparing operator.

Example

The example below defines a loop that starts with i=0. The loop will continue to run as
long as i is less than, or equal to 5. i will increase by 1 each time the loop runs:

Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

The do...while Loop


The do...while loop is a variant of the while loop. This loop will execute the block of
code ONCE, and then it will repeat the loop as long as the specified condition is true.

Syntax
do
{
code to be executed
}
while (variable<=endvalue);

Example
The example below uses a do...while loop. The do...while loop will always be executed
at least once, even if the condition is false, because the statements are executed
before the condition is tested:
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Example
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>

JavaScript Break and Continue Statements

The break Statement


The break statement will break the loop and continue executing the code that follows
after the loop (if any).

Example
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

The continue Statement


The continue statement will break the current loop and continue with the next value.
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Example
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0; i<=10; i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

JavaScript Events
Events are actions that can be detected by JavaScript.

Acting to an Event
The example below displays the date when a button is clicked:

Example
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

Events
By using JavaScript, we have the ability to create dynamic web pages. Events are
actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a JavaScript. For
example, we can use the onClick event of a button element to indicate that a function
will run when a user clicks on the button. We define the events in the HTML tags.
Examples of events:

 A mouse click
 A web page or an image loading
 Mousing over a hot spot on the web page
 Selecting an input field in an HTML form
 Submitting an HTML form
 A keystroke

Note: Events are normally used in combination with functions, and the function will
not be executed before the event occurs!

onLoad and onUnload


The onLoad and onUnload events are triggered when the user enters or leaves the
page.
The onLoad event is often used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the information.
Both the onLoad and onUnload events are also often used to deal with cookies that
should be set when a user enters or leaves a page. For example, you could have a
popup asking for the user's name upon his first arrival to your page. The name is then
stored in a cookie. Next time the visitor arrives at your page, you could have another
popup saying something like: "Welcome John Doe!".

onFocus, onBlur and onChange


The onFocus, onBlur and onChange events are often used in combination with
validation of form fields.
Below is an example of how to use the onChange event. The checkEmail() function
will be called whenever the user changes the content of the field:
<input type="text" size="30" id="email" onchange="checkEmail()">
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

onSubmit
The onSubmit event is used to validate ALL form fields before submitting it.
Below is an example of how to use the onSubmit event. The checkForm() function will
be called when the user clicks the submit button in the form. If the field values are
not accepted, the submit should be cancelled. The function checkForm() returns either
true or false. If it returns true the form will be submitted, otherwise the submit will be
cancelled:
<form method="post" action="page.html" onsubmit="return checkForm()">

onMouseOver
The onmouseover event can be used to trigger a function when the user mouses over
an HTML element:

JavaScript Form Validation


HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns false, to
prevent the form from being submitted:

JavaScript Example
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

The function can be called when the form is submitted:

HTML Form Example


<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

JavaScript Can Validate Numeric Input


JavaScript is often used to validate numeric input:

Please input a number between 1 and 10

Submit

Automatic HTML Form Validation


HTML form validation can be performed automatically by the browser:
If a form field (fname) is empty, the required attribute prevents this form from being
submitted:

HTML Form Example


<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>

Automatic HTML form validation does not work in Internet Explorer 9 or earlier.

Data Validation
Data validation is the process of ensuring that user input is clean, correct, and useful.
Typical validation tasks are:

 has the user filled in all required fields?


 has the user entered a valid date?
 has the user entered text in a numeric field?

Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many different
ways.
Server side validation is performed by a web server, after input has been sent to
the server.
Client side validation is performed by a web browser, before input is sent to a web
server.
JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

HTML Constraint Validation


HTML5 introduced a new HTML validation concept called constraint validation.
HTML constraint validation is based on:

 Constraint validation HTML Input Attributes


 Constraint validation CSS Pseudo Selectors
 Constraint validation DOM Properties and Methods

Constraint Validation HTML Input Attributes


Attribute Description

disabled Specifies that the input element should be disabled

max Specifies the maximum value of an input element

min Specifies the minimum value of an input element

pattern Specifies the value pattern of an input element

required Specifies that the input field requires an element

type Specifies the type of an input element

Constraint Validation CSS Pseudo Selectors


Selector Description

:disabled Selects input elements with the "disabled" attribute specified

:invalid Selects input elements with invalid values

:optional Selects input elements with no "required" attribute specified

:required Selects input elements with the "required" attribute specified

:valid Selects input elements with valid values


JavaScript Lecture Sheet
Prepared by Dr. Tushar Kanti Saha, CSE, JKKNIU.

JavaScript Validation API


Constraint Validation DOM Methods
Property Description

checkValidity() Returns true if an input element contains valid data.

setCustomValidity() Sets the validationMessage property of an input element.

If an input field contains invalid data, display a message:

The checkValidity() Method


<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>

Constraint Validation DOM Properties


Property Description

validity Contains boolean properties related to the validity of an input


element.

validationMessage Contains the message a browser will display when the


validity is false.

willValidate Indicates if an input element will be validated.

You might also like