Upload
ryder-larson
View
18
Download
0
Embed Size (px)
DESCRIPTION
CS-3432 Electronic Commerce. Lecture – 13 Sikandar Shujah Toor https://sites.google.com/site/uolcsecom. onmouseover & onmouseout. Onmouseover event
Citation preview
onmouseover & onmouseout<HTML><HEAD><title>Onmouseover event</title></head><BODY><IMG SRC=moon.jpg WIDTH=200 HEIGHT=100 BORDER=0 NAME=pictureonmouseover="picture.src='moon.jpg';picture.width=500;picture.height=350"onmouseout="picture.src='leopard.jpg';picture.width=600;picture.height=450"></BODY></HTML>
<HTML><BODY><A href=leopard.jpg
onmouseover="picture.src='moon.jpg';picture.width=500;picture.height=300"onmouseout="picture.src='moon.jpg';picture.width=170;picture.height=50"><IMG SRC=moon.jpg WIDTH=200 HEIGHT=100 BORDER=2NAME=picture></A></BODY></HTML>
Anchor
Operators in JavaScript
• + For addition of two numbers and concatenation of two strings• - for subtraction of two numbers• * for multiplication of two numbers• / for division of two numbers• % modulus (calculating the remainder)• ++ increment in number• -- decrement in number
Logical Operators
• && logical and • || logical or• ! logical not• if(x<y&&x<z) { any statement }• if(!false){ statement }
Comparison Operators• == Equal• != not equal• < Less than• <= less than equal• > Greater than• >= Greater than equal
<HTML><HEAD><TITLE>Javascript Example</TITLE><SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
alert("Thank you for visiting our web site!")</SCRIPT></HEAD><BODY></BODY></HTML>
Java Script Example
Writing on a Page<HTML><HEAD><TITLE>example-writing on the page</TITLE></HEAD><BODY><SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--document.write("Hello! Thank you for visiting our site.")//--></SCRIPT></BODY></HTML>
Functions Definition• Function is a block of code which is
executed when someone calls it• Defined as followsfunction my1stfunction(arg1, arg2, arg3)
{// some code
}•When called, variables and arguments must
be in expected order
Displaying System Date<!DOCTYPE html><html><head><script>function displayDate(){document.getElementById(“systemdt”).innerHTML=Date(); }</script></head><body><h1>My First JavaScript</h1><p id=“systemdt">This is a paragraph.</p><button type="button" onclick="displayDate()">Display Date </button></body></html>
<HTML><script language="JavaScript"><!--function Addit(){
var num1=document.Calform.fst.value;var num2=document.Calform.scnd.value;alert(parseFloat(num1)+parseFloat(num2));
}
function minus(){var num1=document.Calform.fst.value;var num2=document.Calform.scnd.value;alert(parseFloat(num1)-parseFloat(num2));
}//--></script><BODY>Add and Subtract Calculator<FORM name="Calform"><P>1st Number:<INPUT TYPE="TEXT" NAME="fst" maxlength="3"><P>2nd Number:<INPUT TYPE="TEXT" NAME="scnd" maxlength="3"><P><INPUT TYPE="button" NAME="Add" VALUE="Add" onclick="Addit()"><INPUT TYPE="button" NAME="Minus" VALUE="Subtract" onclick="minus()"><INPUT TYPE="RESET" VALUE="Reset"></FORM> </BODY></HTML>
Simple Calculator
Loops• Loops executes a block of code repeatedly
until a condition is met• Following types of loops present in JS• For loop
for(intialization;condition;increment){statements}• While loop while(codition){statements}• Do while loop do{statements}while(condition)• Do-while loop executes at least once
For Loop<HTML><HEAD><TITLE>Using the For Loop</TITLE></HEAD><BODY><SCRIPT>for(i=1;i<7;i++)
document.write("<H"+i+">For Loop Example "+i+“ !! </H“+i+“>");
</SCRIPT></BODY></HTML>
While Loop<HTML><HEAD><TITLE>Using the While Loop</TITLE></HEAD><BODY><SCRIPT><!--var i = 1;while (i < 7){
document.write("<H"+i+">While Loop Example "+i+"!!</H"+i+">"); ++i;}//--></SCRIPT>
</BODY></HTML>
Do-while Loop<HTML><HEAD><TITLE>Using the While Loop</TITLE></HEAD><BODY><SCRIPT><!--var i = 1; do {
document.write("<H"+i+">Do-While Loop Example "+i+"!!</H"+i+">"); ++i; } while (i < 1);//--></SCRIPT></BODY></HTML>
• Loop executed once although the condition is false from the beginning
Java Script Objects• Everything in Java Script is an Object which is a combination
of data, properties and methods• Properties are the values associated with the object• Methods are the actions which can be performed on the
object• New objects can be inherited with “new” key word• person = new Object()
• Object Properties can be set / retrieved by using “.” after object name• person.name=“Uzair”;
• Methods can be called by the same “.” after object name• var name = persone.getName();
Example of Math object<HTML><HEAD><TITLE>Using the Math object</TITLE></HEAD><BODY><H1>Using the Math object </H1><SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--document.write("Math.PI :" +Math.PI +"<P>");document.write("Math.LN2 :"+Math.LN2+"<P>");document.write("Math.sin(90) :"+Math.sin(90)+"<P>");document.write("Math.random() :"+Math.random()+"<P>");document.write("Math.pow(2,3) :"+Math.pow(2,3)+"<P>");document.write("Math.min(123,133): "+Math.min(123,133)+"<P>");//--></SCRIPT></BODY></HTML>
Array Object
<HTML><HEAD><TITLE>Using Arrays </TITLE></HEAD><BODY><H1>Using Arrays </H1><SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--myArray=[0,1,2,3,4,5,6,7,8,9,10];document.write("myArray: first element " +myArray[0]+"<P>");document.write("myArray.toString(): "+myArray.toString()+"<P>");document.write("myArray.join(':'): "+myArray.join(':')+"<P>");document.write("myArray.reverse(): "+myArray.reverse()+"<P>");document.write("myArray.sort(): "+myArray.sort()+"<P>");//--></SCRIPT></BODY></HTML>