1 / 31

CS-3432 Electronic Commerce

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

ryder-larson
Download Presentation

CS-3432 Electronic Commerce

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS-3432Electronic Commerce Lecture – 13 SikandarShujahToor https://sites.google.com/site/uolcsecom

  2. 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>

  3. onmouseover & onmouseout

  4. 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>

  5. 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

  6. Logical Operators • && logical and • || logical or • ! logical not • if(x<y&&x<z) { any statement } • if(!false){ statement }

  7. Comparison Operators • == Equal • != not equal • < Less than • <= less than equal • > Greater than • >= Greater than equal

  8. 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>

  9. 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>

  10. Writing on a Page

  11. 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

  12. 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>

  13. 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>

  14. Simple Calculator – Add

  15. Simple Calculator – Minus

  16. 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

  17. 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>

  18. For Loop Example

  19. 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>

  20. While Loop Example

  21. 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

  22. Do-while Loop Example

  23. 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();

  24. Some Predefined JS Objects • Global • Array • String • Math • Date … etc.

  25. 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>

  26. Math Object Example

  27. 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>

  28. Array Object

More Related