310 likes | 412 Views
CS-3432 Electronic Commerce. Lecture – 13 Sikandar Shujah Toor https://sites.google.com/site/uolcsecom. onmouseover & onmouseout. <HTML> <HEAD><title>Onmouseover event</title></head> <BODY> <IMG SRC=moon.jpg WIDTH=200 HEIGHT=100 BORDER=0 NAME=picture
E N D
CS-3432Electronic Commerce Lecture – 13 SikandarShujahToor https://sites.google.com/site/uolcsecom
onmouseover & onmouseout <HTML> <HEAD><title>Onmouseover event</title></head> <BODY> <IMG SRC=moon.jpg WIDTH=200 HEIGHT=100 BORDER=0 NAME=picture onmouseover="picture.src='moon.jpg';picture.width=500; picture.height=350" onmouseout="picture.src='leopard.jpg';picture.width=600; picture.height=450"> </BODY> </HTML>
Anchor <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=2 NAME=picture> </A> </BODY> </HTML>
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
Java Script Example <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>
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 follows function 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>
Simple Calculator <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>
Loops • Loops executes a block of code repeatedly until a condition is met • Following types of loops present in JS • For loopfor(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();
Some Predefined JS Objects • Global • Array • String • Math • Date … etc.
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>