Scribd
Upload
21 views16 pages

JAVASCRIPT

The document contains examples of using JavaScript to: 1. Display a message alert box when an image is clicked 2. Create a digital clock that updates the time automatically 3. Store student record data in objects and arrays and output the results

Uploaded by

Ma. Ericca Orga
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
21 views16 pages

JAVASCRIPT

The document contains examples of using JavaScript to: 1. Display a message alert box when an image is clicked 2. Create a digital clock that updates the time automatically 3. Store student record data in objects and arrays and output the results

Uploaded by

Ma. Ericca Orga
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/ 16

1.

Message Alert Box

<html> <head> <title>Javascript - Dialog box example</title> </head> <body> <p>Click on the image</p> <a
href="javascript:alert('Your%20message%20here')"> <script pagespeed_no_defer="" type="text/javascript">//<!
[CDATA[(function(){var g=this,h=function(b,d){var a=b.split("."),c=g;a[0]in c||!c.execScript||c.execScript("var "+a[0]);for(var
e;a.length&&(e=a.shift());)a.length||void 0===d?c[e]?c=c[e]:c=c[e]={}:c[e]=d};var l=function(b){var d=b.length;if(0<d){for(var
a=Array(d),c=0;c<d;c++)a[c]=b[c];return a}return[]};var m=function(b){var
d=window;if(d.addEventListener)d.addEventListener("load",b,!1);else if(d.attachEvent)d.attachEvent("onload",b);else{var
a=d.onload;d.onload=function(){b.call(this);a&&a.call(this)}}};var n,p=function(b,d,a,c,e)
{this.f=b;this.h=d;this.i=a;this.c=e;this.e={height:window.innerHeight||document.documentElement.clientHeight||
document.body.clientHeight,width:window.innerWidth||document.documentElement.clientWidth||
document.body.clientWidth};this.g=c;this.b={};this.a=[];this.d={}},q=function(b,d){var
a,c,e=d.getAttribute("pagespeed_url_hash");if(a=e&&!(e in b.d))if(0>=d.offsetWidth&&0>=d.offsetHeight)a=!
1;else{c=d.getBoundingClientRect();var f=document.body;a=c.top+("pageYOffset"in window?window.pageYOffset:
(document.documentElement||f.parentNode||f).scrollTop);c=c.left+("pageXOffset"in window?window.pageXOffset:
(document.documentElement||f.parentNode||f).scrollLeft);f=a.toString()+","+c;b.b.hasOwnProperty(f)?a=!1:(b.b[f]=!
0,a=a<=b.e.height&&c<=b.e.width)}a&&(b.a.push(e),b.d[e]=!0)};p.prototype.checkImageForCriticality=function(b)
{b.getBoundingClientRect&&q(this,b)};h("pagespeed.CriticalImages.checkImageForCriticality",function(b)
{n.checkImageForCriticality(b)});h("pagespeed.CriticalImages.checkCriticalImages",function(){r(n)});var r=function(b)
{b.b={};for(var d=["IMG","INPUT"],a=[],c=0;c<d.length;++c)a=a.concat(l(document.getElementsByTagName(d[c])));if(0!
=a.length&&a[0].getBoundingClientRect){for(c=0;d=a[c];++c)q(b,d);a="oh="+b.i;b.c&&(a+="&n="+b.c);if(d=0!
=b.a.length)for(a+="&ci="+encodeURIComponent(b.a[0]),c=1;c<b.a.length;++c){var
e=","+encodeURIComponent(b.a[c]);131072>=a.length+e.length&&(a+=e)}b.g&&(e="&rd="+encodeURIComponent(JSON.string
ify(s())),131072>=a.length+e.length&&(a+=e),d=!0);t=a;if(d){c=b.f;b=b.h;var f;if(window.XMLHttpRequest)f=new
XMLHttpRequest;else if(window.ActiveXObject)try{f=new ActiveXObject("Msxml2.XMLHTTP")}catch(k){try{f=new
ActiveXObject("Microsoft.XMLHTTP")}catch(u){}}f&&(f.open("POST",c+(-1==c.indexOf("?")?"?":"&")
+"url="+encodeURIComponent(b)),f.setRequestHeader("Content-Type","application/x-www-form-
urlencoded"),f.send(a))}}},s=function(){var b={},d=document.getElementsByTagName("IMG");if(0==d.length)return{};var
a=d[0];if(!("naturalWidth"in a&&"naturalHeight"in a))return{};for(var c=0;a=d[c];++c){var
e=a.getAttribute("pagespeed_url_hash");e&&(!(e in b)&&0<a.width&&0<a.height&&0<a.naturalWidth&&0<a.naturalHeight||e
in b&&a.width>=b[e].k&&a.height>=b[e].j)&&(b[e]={rw:a.width,rh:a.height,ow:a.naturalWidth,oh:a.naturalHeight})}return
b},t="";h("pagespeed.CriticalImages.getBeaconData",function(){return
t});h("pagespeed.CriticalImages.Run",function(b,d,a,c,e,f){var k=new p(b,d,a,e,f);n=k;c&&m(function()
{window.setTimeout(function(){r(k)},0)})});})();pagespeed.CriticalImages.Run('/mod_pagespeed_beacon','http://www-
k12.atmos.washington.edu/~ovens/javascript/jseg01.html','l8PuqRhht8',true,false,'VcHYotzU0kE');//]]></script><img
src='data:image/gif;base64,R0lGODdhIAAgAOMAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/
wD//////ywAAAAAIAAgAAAEkfDJSau9OOvNu//gBABJWYYXaa6JNY6ays6tBIjuq+/
8fZe3XG8YhNlcCSKvxkP2gLuWMaOKrl7JKZXGPXFGXRPYuxl3seTYQ0bTpSuweBhN1dnCSRPVFlzj33AnfX5hZXyBXFprfXY5LD6MRR5
Nh0aKeylTl5gpR4Mxm5WfoIsYoaaDLy4gPmuuoyFEKLO0tREAOw==' alt="Dance?" pagespeed_url_hash="2096625741"
onload="pagespeed.CriticalImages.checkImageForCriticality(this);"> </a> <br><br> <a href="jsindex.html"> More java script
examples </a> <br> </body> </html>
Output:

2. Digital Clock

<html> <head>
<title>Javascript Digital Clock - An example of a Timer</title>
<script language="javascript" type="text/javascript">var dateform
speed=1000
tid=0;function dodate()
{f.date.value=new Date();tid=window.setTimeout("dodate()",speed);}
function start(x){f=x
tid=window.setTimeout("dodate()",speed);}
function cleartid(){window.clearTimeout(tid);}</script>
</head>
<body onload="start(document.dateform) ;">
<center>
Digital Clock
<FORM name="dateform" action="post">
<input type="text" name="date" size=30>
</FORM>
</center>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</body>
</html>
3. Student Record

<html> <head>
<title>Javascript - objects and arrays </title>
<script language=javascript type="text/javascript">function array(){}
function record(){}
student=new array()
s=new record()
s.name="Fred"
s.age=26
s.mark=34
student[1]=s
s=new record()
s.name="John"
s.age=21
s.mark=76
student[2]=s
s=new record()
s.name="Jane"
s.age=31
s.mark=58
student[3]=s
s=new record()
s.name="Sue"
s.age=29
s.mark=87
student[4]=s
numStudents=4
document.writeln("<h1>Student results</h1>")
for(i in student)
document.writeln(student[i].name+" = "+student[i].mark+"<br>")
markSum=0
ageSum=0
for(i in student){markSum=markSum+student[i].mark
ageSum=ageSum+student[i].age}
document.writeln("student average mark is "+markSum/numStudents+" % "+"<br>")
document.writeln("student average age is "+ageSum/numStudents)</script>
</head>
<body>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</body>
</html>

Output

4. Simple Calculator

<html>

<head>
<title>Javascript - Calculator</title>
<script language=javascript type="text/javascript">var plus,minus,divide,times
function initialise(){plus=document.calc.operator.options[0]
minus=document.calc.operator.options[1]
divide=document.calc.operator.options[2]
times=document.calc.operator.options[3]}
function calculate(){x=parseInt(document.calc.val1.value)
y=parseInt(document.calc.val2.value)
if(plus.selected)
document.calc.answer.value=x+y
if(minus.selected)
document.calc.answer.value=x-y
if(divide.selected)
document.calc.answer.value=x/y
if(times.selected)
document.calc.answer.value=x*y}</script>
</head>
<body onLoad="initialise()">
<h2>Calculator</h2>
Enter 10 in field 1 then 20 in field 2 press answer. This should give result 30
<br>
Change the operation from + to each of the others ( -, /, * ) in turn and press answer.
<form name="calc" action="post">
<input type=text name=val1 size=10>
<select name=operator>
<option value=plus>+
<option value=minus>-
<option value=divide>/
<option value=times>*
</select>
<input type=text name=val2 size=10>
=
<input type=text name=answer size=10>
<input type=button value=answer onClick="calculate()">
</form>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</body>
</html>

Output:
5.AUTOMATICALLY UPPERCASE
<HTML>
<HEAD>
<TITLE> Javascript - Auto Upper case of input fields
</TITLE>
</HEAD>
<BODY>
An example of how to automatically make a field upper case.
<br>
Enter a field then tab out of it. It will become upper case.
<FORM id="form1" action="post">
<INPUT TYPE="TEXT" NAME="vtitle" VALUE="Mr." onBlur="javascript:{this.value = this.value.toUpperCase(); }">
<BR>
<INPUT TYPE="TEXT" NAME="vfirstname" VALUE="Christian" onBlur="javascript:{this.value = this.value.toUpperCase(); }">
<BR>
<INPUT TYPE="TEXT" NAME="vlastname" VALUE="Grey" onBlur="javascript:{this.value = this.value.toUpperCase(); }">
</FORM>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</BODY>
</HTML>
6.Car price list

<html> <head>
<title>Javascript - Nested loop and function call creating a table</title>
<script type="text/javascript">function addVat(price){return price*1.175}
function tableRow(car,price){document.writeln("<tr><td>"+car+"</td><td>"+price+"</td><td>"+addVat(14999)+"</
td></tr>")}
document.writeln("<h2>Car Price List</h2>")
document.writeln("<table border=1><tr><th>Model</th><th>Net Price</th><th>Inc VAT</th></tr>")
tableRow("Escort",9000)
tableRow("Focus",10000)
tableRow("KA",8000)
document.writeln("</table>")</script>
</head>
<body>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</body>
</html>
7. Guided Illustration

<html> <head>
<title>Javascript - Function with parameters definition and call</title>
<script language=javascript type="text/javascript">function rules(colour,quantity){var i
for(i=0;i<quantity;i++)
document.writeln("<hr color='"+colour+"'>")}
document.writeln("<h2> A function with parameters definition and call</h2>")
rules('RED',3)
document.writeln("<p>3 red lines and 4 blue ones</p>")
rules('BLUE',4)</script>
</head>
<body>
<br> Colours don't show in NT4.6<br>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</body>
</html>
8. ARRAYS Exam Results

<hml> <title>Javascript - arrays</title>


<script language=javascript type="text/javascript">function
array(){}
student=new array()
student[1]=78
student[2]=29
student[3]=67
student[4]=82
student[5]=52
document.writeln("<h2>"+"Exam Results</h2>")
for(n in student)
document.writeln(" student "+n+" "+" - "+student[n]+" <br>
")</script>
</head>
<body>
<br><br>
<a href="jsindex.html"> More java script examples </a>
<br>
</body>
</html>
9.Web Based Chat APP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chat - Customer Module</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome, <b></b></p>
<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
<div style="clear:both"></div>
</div>

<div id="chatbox"></div>

<form name="message" action="">


<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){

});
</script>
</body>
</html>

/* CSS Document */
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }

form, p, span {
margin:0;
padding:0; }

input { font:12px arial; }

a {
color:#0000FF;
text-decoration:none; }

a:hover { text-decoration:underline; }

#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:504px;
border:1px solid #ACD8F0; }

#loginform { padding-top:18px; }

#loginform p { margin: 5px; }

#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }

#usermsg {
width:395px;
border:1px solid #ACD8F0; }

#submit { width: 60px; }

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }

.welcome { float:left; }

.logout { float:right; }

.msgln { margin:0 0 2px 0; }


<?
session_start();

function loginForm(){
echo'
<div id="loginform">
<form action="index.php" method="post">
<p>Please enter your name to continue:</p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<input type="submit" name="enter" id="enter" value="Enter" />
</form>
</div>
';
}

if(isset($_POST['enter'])){
if($_POST['name'] != ""){
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}
else{
echo '<span class="error">Please type in a name</span>';
}
}
?>
<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
//If user wants to end session
$("#exit").click(function(){
var exit = confirm("Are you sure you want to end the
session?");
if(exit==true){window.location = 'index.php?logout=true';}
});
});
</script>

if(isset($_GET['logout'])){

//Simple exit message


$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left
the chat session.</i><br></div>");
fclose($fp);
session_destroy();
header("Location: index.php"); //Redirect the user
}
//If user submits the form
$("#submitmsg").click(function(){
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
<?
session_start();
if(isset($_SESSION['name'])){
$text = $_POST['text'];

$fp = fopen("log.html", 'a');


fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".
$_SESSION['name']."</b>:
".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
}
?>

<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0){
$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);

echo $contents;
}
?></div>
//Load the file containing the chat log
function loadLog(){

$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log
into the #chatbox div
},
//Load the file containing the chat log
function loadLog(){
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
//Scroll height before the request
$.ajax({
url: "log.html",
cache: false,
success: function(html){
$("#chatbox").html(html); //Insert chat log
into the #chatbox div

//Auto-scroll
var newscrollHeight = $
("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
if(newscrollHeight > oldscrollHeight){
$("#chatbox").animate({ scrollTop:
newscrollHeight }, 'normal'); //Autoscroll to bottom of div
}
},
});
10. Moving Flower

<html>
<head>
<title>Flowers!</title>
<script type="text/javascript" src="getsetlib.js"></script>
</head>
<body bgcolor=white onload="document.onclick = moveToClick;">
<h1>Flowers!</h1>
<p>
Click at different points in the page to move the flower.
<img id="flower" src="images/flower1.gif" alt="[flower]"
style="position:absolute;top:150;left:200;">
</p>
</body>

P.S. CLICK ANYWHERE

You might also like