Objective
JavaScript
- Script is a short code.
- In Web, there are 2 types of script :
1. Client Side Script (Browser)
2. Server Side Script (Web Server)
Client Side Script
- Client Side Scripting is used for validation, calculation, events/dynamism.
- Examples of Client Side Script are VBSript, MSScript, JavaScript.
- JavaScript is the standard scripting for client side.
- JavaScript was introduced by Netscape.
- It is a subset of Java.
- It is a language for non programmers.
- It is an object based language.
Implementation
- There are 2 ways to write JavaScript code within Web Page
1. <script> ... </script>
Write JavaScript within <script> ... </script> and <script> ... </script> should within head part.
attributes:
1. language: specifies the scripting language being used. JavaScript is the default scripting language
* Example :
<script language="JavaScript">
// Java Script Code
</script>
2. Create an external .js file and call it within the Web Page
- to call an extrenal .js file within web page
<script type="text/javascript" src="[Link]"></script>
Pre-Defined Objects
1. document: refers to the contents of web page (DOM)
a. getElementById("Id")
b. [Link]
c. [Link][0].elements[1].value
d. [Link](id1).innerHTML= "contents:
2. window: refers to the browser window
a. print()
b. open(url,id,properties)
3. history: refers to back and forward button
a. go( pageno)
4. location: refers to address bar
a. href : to specify contents of address bar (redirect)
b. reload(true) : reloads the current page
Java Module II : Web and Enterprise Technologies
Types of dialog boxes in JavaScript
1. alert("Message");
2. confirm("to take confirmation"); (yes/no)
3. prompt("Message","default value"); (to take input)
Events/handlers :
1. onclick
2. onfocus
3. onblur
4. onload
Function
setTimeOut(<Task>,<Pause Time>);
Example 1:
<html>
<head> <title> Java Script Example 1 </title>
<script>
function abc() {
var a, b, c;
a = [Link]; <!-- Name -->
b = [Link][0].elements[1].value; <!-- Index -->
c = parseInt(a) + parseInt(b);
[Link]("result").value = c; <!-- Id-->
}
function xyz() {
var a, b, c;
a = [Link]; <!-- Name -->
b = [Link][0].elements[1].value; <!-- Index -->
c = a - b;
[Link]("result").value = c; <!-- Id-->
}
</script>
</head>
<body>
<h1> Calculation Form </h1>
<form name="myform" action="ServerSide" method="post">
Number 1 : <input type="text" name="num1" id="num1" /> <br/><br/>
Number 2 : <input type="text" name="num2" id="num2"/> <br/><br/>
<input type="button" value="Sum" />
<input type="button" value="Difference" /> <br/><br/>
Result : <input type="text" name="result" id="result"/> <br/><br/>
</form>
</body>
</html>
Java Module II : Web and Enterprise Technologies
Example 2:
<html>
<head> <title> Java Script Example 1 </title>
<script>
function a() {
alert("Welcome to Java Script");
}
function b() {
var x = confirm("Do you want to continue ? ");
if(x) {
alert("He wants to continue.");
}
else {
alert("He does not want to continue.");
}
}
function c() {
var name = prompt("What is your name ? ", "Name");
if(name != null && [Link]().length > 0) {
alert("Hello !!! " + name);
}
}
</script>
<body>
<input type="button" value="Alert" />
<input type="button" value="Confirm" ><input type="button" value="Prompt" ></body>
</html>
Example 3:
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script>
function callMe()
{
alert("hello !");
}
</script>
</head>
<body>
<div align="center">
<h1>Javascript Simple Example</h1>
Java Module II : Web and Enterprise Technologies
<input type="submit" value="Click Me" > </div>
<br/><br/>
<a href="JavaScript:[Link]();">Print this page</a>
<br/><br/>
</body>
</html>
Example 4 :
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script>
function add(){
var a=[Link]("num1").value;
var b=[Link]("num2").value;
var c= parseInt(a)+parseInt(b);
[Link]("result").value=c;
//alert(c);
}
function subtract(){
var a=[Link]("num1").value;
var b=[Link]("num2").value;
var c= a-b;
[Link]("result").value=c;
//alert(c);
}
</script>
</head>
<body>
<h1 align="center">Javascript Function Example</h1>
<div align="center">
<table>
<tr><td>Enter First Number:</td>
<td><input type="text" name="num1" id="num1"></td></tr>
<tr><td>Enter Second Number:</td>
<td><input type="text" name="num2" id="num2"></td></tr>
<tr><td>Result:</td>
<td><input type="text" name="result" id="result"
> ></td></tr>
Java Module II : Web and Enterprise Technologies
<tr><td><input type="submit" value="add" > <td><input type="submit" value="subtract" > </table>
</div>
<br><br><br>
</body>
</html>
Example 5:
----- [Link]
function validEmail(thefield,therlength,themessage,id1)
{
var ctr=0;
var theinput=[Link];
var thelength=[Link];
var goodzip=true;
if(thelength<therlength)
{
goodzip=false;
}
if([Link]("@")==-1)
{
goodzip=false;
}
for(var i=0;i<thelength;i++)
{
var thechar=[Link](i,i+1);
if(thechar=="@") {
ctr++;
}
}
if(ctr>1) {
goodzip=false;
}
if(goodzip==false)
{
[Link](id1).innerHTML=themessage
}
return goodzip;
}
function validString(thefield,therlength,themessage,id1)
{
var theinput=[Link];
Java Module II : Web and Enterprise Technologies
var thelength=[Link];
var goodzip=true;
if(thelength<therlength)
{
goodzip=false;
}
if(thelength>=therlength)
{
for(var i=0;i<thelength;i++)
{
var thechar=[Link](i,i+1);
if(!(thechar>="a" && thechar<="z"
|| thechar>="A" && thechar<="Z" || thechar==" "))
{
goodzip=false;
}
}
}
if(goodzip==false)
{
[Link](id1).innerHTML=themessage
}
return goodzip;
}
function validNum(thefield,therlength,themessage,id1)
{
var theinput=[Link];
var thelength=[Link];
var goodzip=true;
if(thelength<therlength)
{
goodzip=false;
}
if(thelength>=therlength)
{
for(var i=0;i<thelength;i++)
{
var thechar=[Link](i,i+1);
if(!((thechar>="0" && thechar<="9") || thechar=="."))
{
goodzip=false;
}
}
Java Module II : Web and Enterprise Technologies
}
if(goodzip==false)
{
[Link](id1).innerHTML=themessage
}
return goodzip;
}
-- HTML File
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/javascript" src="js/[Link]"></script>
<script type="text/javascript">
function validate()
{
if(!validString([Link],1,"Please Enter Valid Name",1))
return false;
if(!validEmail([Link],1,"Please Enter Valid Email",2))
return false;
if(!validNum([Link],10,"Please Enter Valid Phone number",3))
return false;
[Link]("<p>This is another paragraph.</p>");
return true;
}
</script>
</head>
<body>
<h1 align="center">Javascripts Validation Example</h1>
<div align="center">
<form name="thisform">
<table>
<tr>
<td> Name*</td>
<td><input type="text" name="name" > <td><span id="1" style="color: red"></span></td></tr>
<tr>
<td>Email*</td>
<td> <input type="text" name="email" > <td><span id="2" style="color: red"></span></td></tr>
<tr><td>Phone Number*</td><td> <input type="text" name="phone"
id="3" style="color:
red"></span></td></tr>
Java Module II : Web and Enterprise Technologies
<tr><td colspan="2">
<input type="submit"
value="Add"
validate()"/>
<input type="button" value="Cancel"
/></td></tr></table>
</form>
</div>
</body>
</html>
Example 6:
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/javascript">
function abc(url) {
popupWindow1 = [Link](
url,'popUpWindow1','height=70,width=80,left=100,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,loc
ation=no,directories=no,status=yes')
popupWindow2 = [Link](
url,'popUpWindow2','height=70,width=80,left=200,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,loc
ation=no,directories=no,status=yes')
popupWindow3 = [Link](
url,'popUpWindow3','height=70,width=80,left=300,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,loc
ation=no,directories=no,status=yes')
}
function newPopup(url) {
popupWindow = [Link](
url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,loc
ation=no,directories=no,status=yes')
}
</script>
</head>
<body >
<a href="JavaScript:newPopup('[Link]
Get your HTML codes here!</a>
<br/><br/>
<img src="images/[Link]" alt="Vedisoft" width="1024" height="200" />
Java Module II : Web and Enterprise Technologies
</body>
</html>
Example 7 :
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/javascript">
function confirmHappy()
{
var happiness=confirm("Are you sure you're happy?");
if (happiness==true)
{
alert("Wow! You seem really happy!");
}
else
{
alert("You should get out more!");
}
}
</script>
</head>
<body>
<input type="button" > value="If you're happy and you know it, click me..." />
<br><br><br>
</body>
</html>
Example 8 :
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/javascript">
function displayPrompt()
{
var name=prompt("What's your name?","Manish");
if (name!=null && name!="")
{
alert("Well " + name + ". You seem very daring!");
}
else
Java Module II : Web and Enterprise Technologies
{
alert("Hey, I asked you your name!");
}
}
</script>
</head>
<body>
<input type="button" > value="I dare you to click me!" />
<br/><br/>
<img src="images/[Link]" alt="Vedisoft" width="1024" height="200" />
</body>
</html>
Example 9 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/javascript">
if ([Link]) {
smile = new Image
nosmile = new Image
[Link] = "images/[Link]"
[Link] = "images/[Link]"
}
function swapImage(thisImage,newImage) {
if ([Link]) {
document[thisImage].src = eval(newImage + ".src")
}
}
</script>
</head>
<body>
<a href="[Link]
> > <img src="images/[Link]"
width="100"
height="100"
border="0"
alt="Picture of Jack"
name="jack">
</a>
Java Module II : Web and Enterprise Technologies
<br/><br/>
</body>
</html>
Example 10 :
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/JavaScript">
function timedRedirect(redirectTo, timeoutPeriod) {
setTimeout("[Link] = redirectTo;",timeoutPeriod);
}
</script>
</head>
<body>
<a href="JavaScript:void(0);" > timeoutPeriod='1000')">Redirect in 1 seconds...</a>
<br/><br/>
</body>
</html>
Example 11 :
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/JavaScript">
function timedRefresh(timeoutPeriod) {
setTimeout("[Link](true);",timeoutPeriod);
}
</script>
</head>
<body >
<p><a href="javascript:timedRefresh(3000)">
Refresh this page in 3 seconds...</a></p>
<br/><br/>
</body>
</html>
Java Module II : Web and Enterprise Technologies
