Scribd
Upload
11 views

Web Technologies

Uploaded by

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

Web Technologies

Uploaded by

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

Web Technologies III B.

Tech II Sem (R15)

JavaScript:
What is JavaScript?
Java Script is one popular scripting language over internet. Scripting means a small sneak (piece). It is
always independent on other languages.
JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is
written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent
to the browser and it's up to the browser to do something with it.
Difference between JavaScript and Java
JavaScript Java
Cannot live outside a Web page Can build stand-alone applications or live in a
Web page as an applet.
Doesn‘t need a compiler Requires a compiler
Knows all about your page Applets are dimly aware of your Web page.
Untyped Strongly typed
Somewhat object-oriented Object-oriented
There are no relationship between in java & java script. Java Script is a scripting language that always
dependent in HTML language. It used to css commands. It is mainly used to creating DHTML pages &
validating the data. This is called client side validations.
Why we Use JavaScript?
Using HTML we can only design a web page but you can not run any logic on web browser
like addition of two numbers, check any condition, looping statements (for, while), decision
making statement (if-else) at client side. All these are not possible using HTML So for perform
all these task at client side you need to use JavaScript.
Features of JavaScript

JavaScript is a client side technology, it is mainly used for gives client side validation, but it have lot of
features which are given below;

Dept. of CSE, MRCET Page | 20


Web Technologies III B.Tech II Sem (R15)
 Java script is object based oriented language.

Inheritance is does not support in JavaScript, so it is called object based oriented language.

 JavaScript was developed by Netscape (company name) & initially called live script.

Later Microsoft developed & adds some features live script then it is called “Jscript”.

Jscript is nothing but Java script. We cannot create own classes in java script.

 Java script is designed to add interactivity to HTML pages. It is usually embedded

directly into html pages.

 Java script is mainly useful to improve designs of WebPages, validate form data at

client side, detects (find) visitor‘s browsers, create and use to cookies, and much more.

 Java script is also called light weight programming language , because Java script is

return with very simple syntax. Java script is containing executable code.

 Java script is also called interpreted language , because script code can be executed

without preliminary compilation.

 It Handling dates, ti me, onSubmit, onLoad, onClick, onMouseOver & etc .


 JavaScript is case sensitive.

 Most of the javascript control statements syntax is same as syntax of controlstatements

in C language.

 An important part of JavaScript is the ability to create new functions within scripts.

Declare a function in JavaScript using function keyword.

Creating a java script: - html script tag is used to script code inside the html page.

<script> </script>

The script is containing 2 attributes. They are

1) Language attribute : -

It represents name of scripting language such as JavaScript, VbScript.

<script language=―JavaScript‖>

2) Type attribute : - It indicates MIME (multi purpose internet mail extension) type of scripting code. It
sets to an alpha-numeric MIME type of code.

<script type=―text / JavaScript‖>

Dept. of CSE, MRCET Page | 21


Web Technologies III B.Tech II Sem (R15)
Location of script or placing the script: - Script code can be placed in both head & body section of html
page.

Script in head section Script in body section

<html> <html>
<head> <head>
<script type=―text / JavaScript‖> </head>
Script code here <body>
</script> <script type= ―text / JavaScript‖>
</head> Script code here
<body> </script>
</body> </body>
</html> </html>
Scripting in both head & body section: - we can create unlimited number of scripts inside the same
page. So we can locate multiple scripts in both head & body section of page.
Ex: - <html>
<head>
<script type=―text / JavaScript‖>
Script code here
</script>
</head>
<body>
<script type=―text / JavaScript‖>
Script code here
</script>
</body>
</html>
Program: -
<html>
<head>
<script language="JavaScript">
document.write("hai my name is Kalpana")
</script>
</head>
<body text="red">
<marquee>
<script language="JavaScript">
document.write("hai my name is Sunil Kumar Reddy")
</script> </marquee>
</body>
</html>
O/P: - hai my name is Kalpana

hai my name is Sunil Kumar Reddy

Dept. of CSE, MRCET Page | 22


Web Technologies III B.Tech II Sem (R15)

document. write is the proper name of object.

 There are 2 ways of executing script code


1) direct execute
2) to execute script code dynamically
Reacts to events: - JavaScript can be set to execute when something happens. When the page is finished
loading in browser window (or) when the user clicks on html element dynamically.

Ex: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN">
<HTML>
<HEAD>
<script language="JavaScript">
function myf( )
{
document.write("Hai Kalpana")
}
</script>
</HEAD>
<BODY>
to execute script code:
<input type="button" value="click me" onclick="myf( )">
To execute script code:
<input type="button" value="touch me" onmouseover="myf( )">
</BODY>
</HTML>

O/P: - to execute script code: To execute script code:

Creating external script: - some times you might want to run same script on several pages without
having to write the script on each page. To simplify this, write external script & save .js extension. To use
external script specify .js file in src attribute of script tag.

Note: - external script can not contain script tag.

save: - external.js
document.write("this is external script code 1 "+"<br>");
document.write("this is external script code 2 "+"<br>");
document.write("this is external script code 3 "+"<br>");
document.write("this is external script code 4 ");

<HTML> <BODY>
<script language="JavaScript">
document.write("this is document code 1 "+"<br>");
document.write("this is document code 2 "+"<br>");
</script>
<script src="external.js">
</script>
</BODY>
</HTML>

Dept. of CSE, MRCET Page | 23


Web Technologies III B.Tech II Sem (R15)

JavaScript syntax rules: - JavaScript is case sensitive language. In this upper case lower case letters
are differentiated (not same).

Ex: - a=20;
A=20;
Those the variable name „a‟ is different from the variable named „A‟.
Ex: - myf( ) // correct
myF( ) // incorrect
 ; is optional in general JavaScript.
Ex: - a=20 // valid
b=30 // valid
A=10; b=40; // valid
However it is required when you put multiple statements in the same line.
 JavaScript ignore white space. In java script white space, tag space & empty lines are not preserved.
 To display special symbols we use \.
Comment lines: - comments lines are not executable.

// single line comment


/* this is multi line comment */

Declaring variable: - variable is a memory location where data can be stored. In java script variables
with any type of data are declared by using the keyword ‗var‘. All keywords are small letters only.

var a; a=20;
var str; str= “Sunil”;
var c; c=‟a‟;
var d; d=30.7;
But the keyword is not mandatory when declare of the variable.
c;  not valid. In this solution var keyword must be declared.
 During the script, we can change value of variable as well as type of value of variable.
Ex: -
a=20;
a=30.7;
JavaScript functions: - in java script functions are created with the keyword ‗function‘ as shown below

Syntax: - function funname( )


{
--------
}
Generally we can place script containing function head section of web page. There are 2 ways to call the
function.
1) direct call function
2) Events handlers to call the function dynamically.
1 We can pass data to function as argument but that data will be available inside the function.

Dept. of CSE, MRCET Page | 24


Web Technologies III B.Tech II Sem (R15)

Ex: -

<HTML> </HEAD>
<HEAD> <BODY>
<TITLE> Function direct call</TITLE> <script>
<script language="JavaScript"> var r=add(30,60)
function add(x,y) document.write("addition is :"+r);
{ </script>
z=x+y </BODY>
return z </HTML>
}
</script> O/P: - addition is :90

2 to add dynamical effects, java script provide a list of events that call function dynamically.
Hare each event is one attribute that always specified in html tags.
attrname=”attrval”
eventName=”funname( )”
Ex: -
<HTML> </HEAD>
<HEAD> <BODY> to call function:
<TITLE> Function dynamically</TITLE> <input type="button" value="click hare"
<script language="JavaScript"> onclick="add( )">
function add( ) </script>
{ </BODY>
x=20 </HTML>
y=30
z=x+y
O/P: - to call function:
document.write("addition is :"+z);
addition is :90
}
</script>
EVENT HANDLERS: Events are not case sensitive.
Java script events: -
Attribute The event occurs when…
onclick mouse click an object
ondblclick mouse double clicks
onmouseover a mouse cursor on touch here
onmousedown a mouse button is pressed
onmousemove the mouse is moved
onmouseout the mouse is moved out an element
onmouseup a mouse button is released
onkeydown a keyboard key is pressed
onkeypress a keyboard key is pressed or held down
onkeyup a keyboard key is released
onfocus an elements get focus
onblur an element loses focus
onchange the content of a field change
onselect text is selected
onload a page or an image is finished loading
onunload the user exist the page

Dept. of CSE, MRCET Page | 25


Web Technologies III B.Tech II Sem (R15)

onerror an error occurs when loading a document or an image


onabort loading an image is interrupted
onresize a window or frame is resized
onreset the reset button is pressed
onsubmit the submit button is clicked
Ex: -
<HTML> <br>
<HEAD> <b onmousemove="add( )">
<TITLE> Mouse Events </TITLE> to call function cursor move here :
<script language="JavaScript"> </b>
function add() <br>
{ <b onmouseup="add( )">
a=55 to call function cursor up here :
b=45 </b>
c=a+b <br>
document.write("addition is :"+c) <b onmouseout="add( )">
} to call function cursor out here :
</script> </b>
</HEAD> </BODY>
<BODY> </HTML>
<b onclick="add( )">
to call function click here : O/P: -
</b> to call function click here :
<br> to call function touch here :
<b onmouseover="add( )"> to call function double click here :
to call function touch here : addition is :100
</b> to call function cursor move here :
<br> to call function cursor up here :
<b ondblclick="add( )"> to call function cursor out here :
to call function double click here :
</b>
Program: -
<HTML>
<HEAD>
<TITLE> display student name </TITLE>
<script language="JavaScript">
function disp( )
{
// access from data
var name=window.document.student.sname.value
// (or) var name=window.document.getElementById("snameid").value
//checking name
if(name=""||!isNaN(name)||!isNaN(name.charAt(0)))
window.alert("sname you entered is invalid")
else
document.write("sname you have entered is : "+name);
}

Dept. of CSE, MRCET Page | 26


Web Technologies III B.Tech II Sem (R15)

</script>
</HEAD>
<BODY>
<form name="student">
Enter Student name:
<input type="text" name="sname"id="snameid" value="enter" onblur="disp( )">
</form>
</BODY>
</HTML>

O/P: -
1
Enter Student name:

1
Enter Student name:
sname you have entered is : true

Popup boxes: - popup (arises) box is a small window that always shown before opening the
page. The purpose of popup box is to write message, accept some thing from user. Java script
provides 3 types of popup boxes. They are 1) alert 2) Confirm. 3) Prompt.

1) alert popup box :-


Alert box is a very frequently useful to send or write cautionary messages to end use alert
box is created by alert method of window object as shown below.
Syntax: - window – alert (“message”);
When alert popup, the user has to click ok before continue browsing.
Ex: -
<html> window.alert("This is for addition of 2
<head> no's")
<title> alert box </title> document.write("Result is: "+c)
<script language="JavaScript"> }
function add( ) </script>
{ </head>
a=20 <body onload="add( )">
b=40 </body>
c=a+b </html>

O/P: -

Result is: 60

Dept. of CSE, MRCET Page | 27


Web Technologies III B.Tech II Sem (R15)

2) confirm popup box:-


This is useful to verify or accept some thing from user. It is created by confirm method of
window object as shown below.
Syntax:- window.confirm (“message?”);
When the confirm box pop‘s up, user must click either ok or cancel buttons to proceed. If user
clicks ok button it returns the boolean valve true. If user clicks cancel button, it returns the
boolean value false.
Ex: - document.write("result is :"+c)
<HTML> }
<HEAD> else
<TITLE> Confirm </TITLE> {
<script> document.write("you clicked cancel button")
function sub( ) }
{ }
a=50 </script>
b=45 </HEAD>
c=a-b <BODY onload="sub( )">
x=window.confirm("Do you want to see to see the o/p in pop up box:
subtraction of numbers") </BODY>
if(x==true) </HTML>
{

O/P: -
to see the o/p in pop up box:

result is :5

3) Prompt popup box:- It is useful to accept data from keyboard at runtime. Prompt box is
created by prompt method of window object.
window.prompt (“message”, “default text”);
When prompt dialog box arises user will have to click either ok button or cancel button after
entering input data to proceed. If user click ok button it will return input value. If user click
cancel button the value ―null‖ will be returned.
Ex: -
<HTML> {
<HEAD> a=a*i
<TITLE> Prompt </TITLE> }
<script> window.alert("factorial value :"+a)
function fact( ) }
{ </script>
var b=window.prompt("enter +ve integer </HEAD>
:","enter here") <BODY onload="fact( )">
var c=parseInt(b) </BODY>
a=1 </HTML>
for(i=c;i>=1;i--)

O/P: -

Dept. of CSE, MRCET Page | 28


Web Technologies III B.Tech II Sem (R15)

FORM VALIDATION:
When we create forms, providing form validation is useful to ensure that your customers enter valid and
complete data. For example, you may want to ensure that someone inserts a valid e-mail address into a
text box, or perhaps you want to ensure that someone fills in certain fields.

We can provide custom validation for your forms in two ways: server-side validation and client-side
validation.
SERVER-SIDE VALIDATION
In the server-side validation, information is being sent to the server and validated using one of server-side
languages. If the validation fails, the response is then sent back to the client, page that contains the web
form is refreshed and a feedback is shown. This method is secure because it will work even if JavaScript
is turned off in the browser and it can‘t be easily bypassed by malicious users. On the other hand, users
will have to fill in the information without getting a response until they submit the form. This results in a
slow response from the server.

The exception is validation using Ajax. Ajax calls to the server can validate as you type and provide
immediate feedback. Validation in this context refers to validating rules such as username availability.

Server side validation is performed by a web server, after input has been sent to the server.

CLIENT-SIDE VALIDATION

Server-side validation is enough to have a successful and secure form validation. For better user
experience, however, you might consider using client-side validation. This type of validation is done on
the client using script languages such as JavaScript. By using script languages user‘s input can be
validated as they type. This means a more responsive, visually rich validation.

With client-side validation, form never gets submitted if validation fails. Validation is being handled in
JavaScript methods that you create (or within frameworks/plugins) and users get immediate feedback if
validation fails.

Main drawback of client-side validation is that it relies on JavaScript. If users turn JavaScript off, they
can easily bypass the validation. This is why validation should always be implemented on both the client
and server. By combining server-side and client-side methods we can get the best of the two: fast
response, more secure validation and better user experience.

Client side validation is performed by a web browser, before input is sent to a web server.

Validation can be defined by many different methods, and deployed in many different ways.

Simple Example:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">

Dept. of CSE, MRCET Page | 29


Web Technologies III B.Tech II Sem (R15)

<!--
// Form validation code will come here.
function validate()
{
var n = document.myForm.Name.value;
if( n == "" || (!isNaN(parseInt(n))) || n.length < 3 || n.length >= 8)
{
alert( "Please enter valid name and minimum length 3 characters and maximum length 8
characters !" );
document.myForm.Name.focus();
return false;
}

var emailID = document.myForm.EMail.value;


if( emailID == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}

atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}

var z = document.myForm.Zip.value;
if(z == "" ||isNaN(z) || z.length != 6 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}

var c = document.myForm.Country.value;
if( c == "-1" )
{

Dept. of CSE, MRCET Page | 30


Web Technologies III B.Tech II Sem (R15)

alert( "Please provide your country!" );


return false;
}
return( true );
}

//-->
</script>
</head>
<body bgcolor="bisque">
<h1><p align="center"> <b>Application Form Validation Using JavaScript</b></p></h1>
<form action="reg.html" name="myForm" onsubmit="return(validate());">
<table cellspacing="5" cellpadding="5" align="center" border="5" width="438">
<tr>
<td align="right"><b>Name</b></td>
<td><input type="text" name="Name" size="50" /></td>
</tr>
<tr>
<td align="right"><b>EMail</b></td>
<td><input type="text" name="EMail" size="50" /></td>
</tr>
<tr>
<td align="right"><b>Zip Code</b></td>
<td><input type="text" name="Zip" size="50" /></td>
</tr>
<tr>
<td align="right" ><b>Country</b></td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">INDIA</option>
<option value="2">UK</option>
<option value="3">USA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</font> </table> </form> </body> </html>

Dept. of CSE, MRCET Page | 31


Web Technologies III B.Tech II Sem (R15)

Output:

Dept. of CSE, MRCET Page | 32

You might also like