1 javascript e-commerce prof. sheizaf rafaeli sheizaf/ecommerce/javascript.examples.html

1E-Business, Sheizaf Rafaeli

JavaScriptJavaScript

E-CommerceE-Commerce

Prof. Sheizaf RafaeliProf. Sheizaf Rafaeli

http://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.examples.htmlhttp://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.examples.html


JavaScript introJavaScript intro

Javascript is a programming languageJavascript is a programming language It is a It is a simplesimple, , object-based object-based interpretedinterpreted scripting scripting

languagelanguage Code is usually embedded in the HTMLCode is usually embedded in the HTML Javascript is Javascript is NOTNOT Java Java Javascript is not Jscript or Active-X, but Jscript Javascript is not Jscript or Active-X, but Jscript

tries to be compatibletries to be compatible Created by NetscapeCreated by Netscape


Strengths and weaknessesStrengths and weaknesses

Easy to learnEasy to learn Quick developmentQuick development Easy to debugEasy to debug Platform independentPlatform independent Small overheadSmall overhead

Limited range of built-Limited range of built-in methodsin methods

No code hidingNo code hiding Debugging and Debugging and

development tools are development tools are still lackingstill lacking

Unstable, Unstable, compatibility?compatibility?


Javascript Javascript

JavaScript usually goes between the </title> tag and the </head> tag, but can go elsewhere too.

JavaScript begins with

– <script language="JavaScript">

JavaScripts end with the </script> tag. Use <NOSCRIPT> and </NOSCRIPT> Comments use the // and /* -- */ pair.

Worry about hiding scriptsWorry about hiding scripts


Very Simple ExampleVery Simple Example

<script language="JavaScript”><script language="JavaScript”>

document.write(“shalom!")document.write(“shalom!")

</script></script>


Javascript (2)Javascript (2)

Javascript Javascript isis case sensitive case sensitive Is flexible about statements and white spaceIs flexible about statements and white space Scripts are evaluated as soon as the code is Scripts are evaluated as soon as the code is

encounteredencountered Functions can be defined anywhere.Functions can be defined anywhere. However they only get executed when However they only get executed when

calledcalled

Javascript Javascript hiding scripts from incompatible browsershiding scripts from incompatible browsers

<html> <head> <title> Whatever </title>

<script language="JavaScript">



</script>

</head> <body>


Main conceptsMain concepts


Topical OutlineTopical Outline

VariablesVariables alert, prompt, document.writelnalert, prompt, document.writeln Strings as objects Strings as objects If-then branchingIf-then branching Link events (onClick, OnMouseover)Link events (onClick, OnMouseover) Opening new windows (“targeting”)Opening new windows (“targeting”) Object oriented programming, and esp. the Document Object Object oriented programming, and esp. the Document Object

ModelModel Loops, arrays and functionsLoops, arrays and functions Forms, OnChange, OnLoadForms, OnChange, OnLoad


Brief overview of object-oriented programming

Built-in library of objects– Window, Math, String, Document, Form, Navigator, etc.

Objects have properties and methodsObjects have properties and methods See Javascript cheatsheet for summaries and tables, See Javascript cheatsheet for summaries and tables,

at:at:– http://mis.huji.ac.il/ttt/javascript.cheatsheet.htmlhttp://mis.huji.ac.il/ttt/javascript.cheatsheet.html

– http://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.cheatsheet.htmlhttp://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.cheatsheet.html


Object Oriented programming (2)Object Oriented programming (2)

An object's property is set like this: »window.status = ”Look at this!";

An object is called the same way that a property is accessed: the object name, a period, and then the method.

Later versions have more objects, properties, and methods.


Javascript variablesJavascript variables Variables can be declared using var (but not Variables can be declared using var (but not

required).required). Variable names must start with either a letter or the

underscore character. Variable names are case-sensitive in most, but not

all, versions Statements end with a semicolon. Spaces and line breaks are ignored by the JavaScript

interpreter


Javascript examplesJavascript examples Stroke the squaresStroke the squares

– http://www.hotwired.com/webmonkey/98/03/image_swap.htmlhttp://www.hotwired.com/webmonkey/98/03/image_swap.html

Favorite Animal (forms)Favorite Animal (forms)– http://www.hotwired.com/webmonkey/98/03/form_fun.htmlhttp://www.hotwired.com/webmonkey/98/03/form_fun.html

Simple calculationsSimple calculations– http://www.hotwired.com/webmonkey/98/03/calculations.htmlhttp://www.hotwired.com/webmonkey/98/03/calculations.html

Intranets (Montana)Intranets (Montana)– http://www.montana.edu/wwwdb/MessageCenter/Mesframs.htmlhttp://www.montana.edu/wwwdb/MessageCenter/Mesframs.html

Validate a formValidate a form– http://mis.huji.ac.il/ttt/validate.htmlhttp://mis.huji.ac.il/ttt/validate.html

– http://gsb.haifa.ac.il/~sheizaf/ecommerce/validate.htmlhttp://gsb.haifa.ac.il/~sheizaf/ecommerce/validate.html ““Has E” validationHas E” validation

– http://mis.huji.ac.il/ttt/hase.validate.html http://mis.huji.ac.il/ttt/hase.validate.html http://gsb.haifa.ac.il/~sheizaf/ecommerce/hase.validate.htmlhttp://gsb.haifa.ac.il/~sheizaf/ecommerce/hase.validate.html


Javascript examples (2)Javascript examples (2)

See collections, at:See collections, at:– http://mis.huji.ac.il/ttt/javascript.examples.htmlhttp://mis.huji.ac.il/ttt/javascript.examples.html

http://gsb.haifa.ac.il/~sheizaf/ecommerce/http://gsb.haifa.ac.il/~sheizaf/ecommerce/javascript.examples.htmljavascript.examples.html

» Calculator, Calendar, Rotating menu, Multiplication Calculator, Calendar, Rotating menu, Multiplication table, Using cookies, Decision support, Encryptiontable, Using cookies, Decision support, Encryption

– http://tanega.com/java/java.htmlhttp://tanega.com/java/java.html– http://www.developer.com/http://www.developer.com/


Simple examples (1)Simple examples (1)

Click event: Click event: <<form>form>

<input type="button" value="Click me" <input type="button" value="Click me" onClick="alert(“YO”)”>onClick="alert(“YO”)”>

</form></form>

<html><body> <script language="JavaScript"> <html><body> <script language="JavaScript">

 </script></body></html>// --> </script></body></html>

<html><body><html><body>

<script language="JavaScript"></script></body></html>// --></script></body></html>

<html><head><html><head><script language="JavaScript"><!-- hide<script language="JavaScript"><!-- hidefunction calculation() {function calculation() { var x= 12; var y= 5; var result= x + y;var x= 12; var y= 5; var result= x + y; alert(result);} // -- > </script>alert(result);} // -- > </script></head></head><body><form><body><form><input type="button" value="example - Calculate" <input type="button" value="example - Calculate"

onClick="calculation()">onClick="calculation()"></form></body></html></form></body></html>

<html><head><html><head>

<script language="JavaScript">// -->

</script></script>

</head><body><form></head><body><form>

<input type="button" value="example - Open new window" <input type="button" value="example - Open new window" onClick="openWin()">onClick="openWin()">

</form> </body></html></form> </body></html>

<html><head> <script <html><head> <script language="JavaScript"> language="JavaScript">

<!-- Hide<!-- Hide

function test1(form) { if (form.text1.value function test1(form) { if (form.text1.value == "") alert('Please enter a string!');== "") alert('Please enter a string!');

else { alert("Hi "+form.text1.value+"! Form else { alert("Hi "+form.text1.value+"! Form input ok!"); }}input ok!"); }}

function test2(form) { if (form.text2.value function test2(form) { if (form.text2.value == "" || == "" ||

form.text2.value.indexOf('@', 0) == -1) form.text2.value.indexOf('@', 0) == -1)

alert("No valid e-mail address!");alert("No valid e-mail address!");

else alert("OK!");}else alert("OK!");}

// -- >// -- >

</script> </head></script> </head>

<body><form name="first"><body><form name="first">example 12:<br>Enter your example 12:<br>Enter your

name:<br>name:<br><input type="text" name="text1"><input type="text" name="text1"><input type="button" name="button1" <input type="button" name="button1"

value="Test Input" value="Test Input" onClick="test1(this.form)"> <P>onClick="test1(this.form)"> <P>

Enter your e-mail address:<br>Enter your e-mail address:<br><input type="text" name="text2"><input type="text" name="text2"><input type="button" name="button2" <input type="button" name="button2"

value="Test Input" value="Test Input" onClick="test2(this.form)">onClick="test2(this.form)">

</body></html></body></html>


Error messages?Error messages?

Why do I get JavaScript errors when using IE 3.0?When viewing a JavaScript-enabled Web site with Microsoft Internet Explorer 3.0, it's not uncommon to receive an error message in an Internet Explorer Script Error window. Microsoft released Internet Explorer 3.0 before Netscape published its proprietary JavaScript 1.1 specification. For this reason, Microsoft refers to Internet Explorer's JavaScript implementation as "Jscript", which isn't completely compatible with Netscape's JavaScript. Internet Explorer 4.0, the latest release of the browser, is compatible with the specification. If you use Internet Explorer 4.0 to view the Web site in question, you shouldn't receive an error message.


DebuggingDebugging

Beginning JavaScript authors can easily debug single lines of code in Navigator. In the Location box, enter either MOCHA: or JAVASCRIPT: (including the colon) and the debugging window opens.


Online resourcesOnline resources Netscape’s JavaScript guideNetscape’s JavaScript guide

– http://developer.netscape.com/library/http://developer.netscape.com/library/documentation/communicator/jsguide4/documentation/communicator/jsguide4/index.htmindex.htm

Netscape’s Sample form validation scripts, Netscape’s Sample form validation scripts, at:at:– http://developer.netscape.com/library/examples/javascript/formval/overview.html


Online resources (2)Online resources (2)

Javascript 411:Javascript 411:– http://www.freqgrafx.com/411/

Javascript “Tip of the Week”Javascript “Tip of the Week”– http://www.webreference.com/javascript/http://www.webreference.com/javascript/

The Javascript resource centerThe Javascript resource center– http://jrc.livesoftware.com/http://jrc.livesoftware.com/


Online resources (3)Online resources (3)

Danny Goodman’s pagesDanny Goodman’s pages– http://www/dannyg.com/javascript

Gordon McComb’s pages– http://gmccomb.com/javascript/

Usenet’s comp.lang.javascript

1 javascript e-commerce prof. sheizaf rafaeli sheizaf/ecommerce/javascript.examples.html

Documents