+ All Categories
Home > Documents > CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Date post: 04-Jan-2016
Category:
Upload: ariel-benson
View: 213 times
Download: 0 times
Share this document with a friend
31
CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor https://sites.google.com/site/uolcsecom
Transcript
Page 1: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

CS-3432Electronic Commerce

Lecture – 13Sikandar Shujah Toorhttps://sites.google.com/site/uolcsecom

Page 2: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 3: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

onmouseover & onmouseout

Page 4: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

<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

Page 5: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .
Page 6: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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

Page 7: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Logical Operators

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

Page 8: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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

Page 9: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

<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

Page 10: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .
Page 11: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 12: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Writing on a Page

Page 13: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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

Page 14: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 15: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .
Page 16: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

<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

Page 17: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Simple Calculator – Add

Page 18: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Simple Calculator – Minus

Page 19: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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

Page 20: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 21: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

For Loop Example

Page 22: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 23: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

While Loop Example

Page 24: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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

Page 25: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Do-while Loop Example

Page 26: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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

Page 27: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Some Predefined JS Objects

• Global• Array • String •Math• Date… etc.

Page 28: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 29: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Math Object Example

Page 30: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

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>

Page 31: CS-3432 Electronic Commerce Lecture – 13 Sikandar Shujah Toor .

Array Object


Recommended