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="ExternalFile.js"></script>
Pre-Defined Objects
1. document: refers to the contents of web page (DOM)
a. getElementById("Id")
b. document.form1.element1.value
c. document.forms[0].elements[1].value
d. document.getElementById(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 = document.myform.num1.value; <!-- Name -->
b = document.forms[0].elements[1].value; <!-- Index -->
c = parseInt(a) + parseInt(b);
document.getElementById("result").value = c; <!-- Id-->
}
function xyz() {
var a, b, c;
a = document.myform.num1.value; <!-- Name -->
b = document.forms[0].elements[1].value; <!-- Index -->
c = a - b;
document.getElementById("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" onclick="abc();" />
<input type="button" value="Difference" onclick="xyz();" /> <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 && name.trim().length > 0) {
alert("Hello !!! " + name);
}
}
</script>
<body>
<input type="button" value="Alert" onclick = "a();" />
<input type="button" value="Confirm" onclick = "b();"/>
<input type="button" value="Prompt" onclick = "c();"/>
</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" onclick="callMe();">
</div>
<br/><br/>
<a href="JavaScript:window.print();">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=document.getElementById("num1").value;
var b=document.getElementById("num2").value;
var c= parseInt(a)+parseInt(b);
document.getElementById("result").value=c;
//alert(c);
}
function subtract(){
var a=document.getElementById("num1").value;
var b=document.getElementById("num2").value;
var c= a-b;
document.getElementById("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"
onfocus="this.blur();"
></td></tr>
Java Module II : Web and Enterprise Technologies
<tr><td><input type="submit" value="add" onclick="add();"></td>
<td><input type="submit" value="subtract" onclick="subtract();"></td></tr>
</table>
</div>
<br><br><br>
</body>
</html>
Example 5:
----- Validation.js
function validEmail(thefield,therlength,themessage,id1)
{
var ctr=0;
var theinput=thefield.value;
var thelength=theinput.length;
var goodzip=true;
if(thelength<therlength)
{
goodzip=false;
}
if(theinput.indexOf("@")==-1)
{
goodzip=false;
}
for(var i=0;i<thelength;i++)
{
var thechar=theinput.substring(i,i+1);
if(thechar=="@") {
ctr++;
}
}
if(ctr>1) {
goodzip=false;
}
if(goodzip==false)
{
document.getElementById(id1).innerHTML=themessage
}
return goodzip;
}
function validString(thefield,therlength,themessage,id1)
{
var theinput=thefield.value;
Java Module II : Web and Enterprise Technologies
var thelength=theinput.length;
var goodzip=true;
if(thelength<therlength)
{
goodzip=false;
}
if(thelength>=therlength)
{
for(var i=0;i<thelength;i++)
{
var thechar=theinput.substring(i,i+1);
if(!(thechar>="a" && thechar<="z"
|| thechar>="A" && thechar<="Z" || thechar==" "))
{
goodzip=false;
}
}
}
if(goodzip==false)
{
document.getElementById(id1).innerHTML=themessage
}
return goodzip;
}
function validNum(thefield,therlength,themessage,id1)
{
var theinput=thefield.value;
var thelength=theinput.length;
var goodzip=true;
if(thelength<therlength)
{
goodzip=false;
}
if(thelength>=therlength)
{
for(var i=0;i<thelength;i++)
{
var thechar=theinput.substring(i,i+1);
if(!((thechar>="0" && thechar<="9") || thechar=="."))
{
goodzip=false;
}
}
Java Module II : Web and Enterprise Technologies
}
if(goodzip==false)
{
document.getElementById(id1).innerHTML=themessage
}
return goodzip;
}
-- HTML File
<html>
<head>
<title>Vedisoft: Java Web and Enterprise Technologies</title>
<script type="text/javascript" src="js/Validation.js"></script>
<script type="text/javascript">
function validate()
{
if(!validString(document.thisform.name,1,"Please Enter Valid Name",1))
return false;
if(!validEmail(document.thisform.email,1,"Please Enter Valid Email",2))
return false;
if(!validNum(document.thisform.phone,10,"Please Enter Valid Phone number",3))
return false;
document.write("<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" onclick="document.getElementById('1').innerHTML='';"/></td>
<td><span id="1" style="color: red"></span></td></tr>
<tr>
<td>Email*</td>
<td> <input type="text" name="email" onclick="document.getElementById('2').innerHTML='';"/></td>
<td><span id="2" style="color: red"></span></td></tr>
<tr><td>Phone Number*</td><td> <input type="text" name="phone"
onclick="document.getElementById('3').innerHTML='';"/></td><td><span id="3" style="color:
red"></span></td></tr>
Java Module II : Web and Enterprise Technologies
<tr><td colspan="2">
<input type="submit"
value="Add"
onClick="return validate()"/>
<input type="button" value="Cancel"
onclick="history.go(-1)" /></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 = window.open(
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 = window.open(
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 = window.open(
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 = window.open(
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 onload="abc('http://www.vedisoft.com');">
<a href="JavaScript:newPopup('http://www.vedisoft.com');">
Get your HTML codes here!</a>
<br/><br/>
<img src="images/1-1.jpg" 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" onclick="confirmHappy()"
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" onclick="displayPrompt()"
value="I dare you to click me!" />
<br/><br/>
<img src="images/1-1.jpg" 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 (document.images) {
smile = new Image
nosmile = new Image
smile.src = "images/Winter.jpg"
nosmile.src = "images/Sunset.jpg"
}
function swapImage(thisImage,newImage) {
if (document.images) {
document[thisImage].src = eval(newImage + ".src")
}
}
</script>
</head>
<body>
<a href="http://www.vedisoft.com"
onMouseOver="swapImage('jack','smile')"
onMouseOut="swapImage('jack','nosmile')">
<img src="images/nosmile.gif"
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("location.href = redirectTo;",timeoutPeriod);
}
</script>
</head>
<body>
<a href="JavaScript:void(0);" onclick="JavaScript:timedRedirect(redirectTo='http://www.vedisoft.com',
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("location.reload(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
