1 JavaScript E-Commerce Prof. Sheizaf Rafaeli sheizaf/ecommerce/javascript.examples.html.
-
Upload
arthur-tate -
Category
Documents
-
view
214 -
download
0
Transcript of 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
2E-Business, Sheizaf Rafaeli
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
3E-Business, Sheizaf Rafaeli
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?
4E-Business, Sheizaf Rafaeli
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
5E-Business, Sheizaf Rafaeli
Very Simple ExampleVery Simple Example
<script language="JavaScript”><script language="JavaScript”>
document.write(“shalom!")document.write(“shalom!")
</script></script>
6E-Business, Sheizaf Rafaeli
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
7E-Business, Sheizaf Rafaeli
Javascript Javascript hiding scripts from incompatible browsershiding scripts from incompatible browsers
<html> <head> <title> Whatever </title>
<script language="JavaScript">
<!-- hide stuff from other browsers
YOUR SCRIPT HERE
// end the hiding comment -->
</script>
</head> <body>
8E-Business, Sheizaf Rafaeli
Main conceptsMain concepts
9E-Business, Sheizaf Rafaeli
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
10E-Business, Sheizaf Rafaeli
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
11E-Business, Sheizaf Rafaeli
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.
12E-Business, Sheizaf Rafaeli
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
13E-Business, Sheizaf Rafaeli
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
14E-Business, Sheizaf Rafaeli
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/
15E-Business, Sheizaf Rafaeli
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>
16E-Business, Sheizaf Rafaeli
Simple examples (2)Simple examples (2)
<html><body> <script language="JavaScript"> <html><body> <script language="JavaScript">
<!-- hide from old browsers<!-- hide from old browsers
document.write(“document.write(“Hail to the Victors Valiant<br>Hail to the Victors Valiant<br>");");
document.write(“document.write(“Hail to the Conquering Heroes<br>Hail to the Conquering Heroes<br>");");
document.write(“document.write(“Hail to the Victors Valiant<br>Hail to the Victors Valiant<br>");");
document.write(“document.write(“Hail to the Conquering Heroes<br>Hail to the Conquering Heroes<br>");");
document.write(“document.write(“Hail to the Victors Valiant<br>Hail to the Victors Valiant<br>");");
document.write(“document.write(“Hail to the Conquering Heroes<br>Hail to the Conquering Heroes<br>");");
// --> </script></body></html>// --> </script></body></html>
17E-Business, Sheizaf Rafaeli
Simple examples (3)Simple examples (3)
<html><body><html><body>
<script language="JavaScript"><!-- hide<script language="JavaScript"><!-- hide
function myFunction()function myFunction()
{document.write(“{document.write(“Hail to the Victors Valiant<br>Hail to the Victors Valiant<br>");");
document.write(“document.write(“Hail to the Conquering Heroes<br>Hail to the Conquering Heroes<br>");");
}}
myFunction();myFunction();myFunction();myFunction();myFunction();myFunction();
// --></script></body></html>// --></script></body></html>
18E-Business, Sheizaf Rafaeli
Simple examples (4)Simple examples (4)
<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>
19E-Business, Sheizaf Rafaeli
Simple examples (5)Simple examples (5)
<html><head><html><head>
<script language="JavaScript"><!-- hide<script language="JavaScript"><!-- hide
function openWin() { myWin= open("l6.htm");}function openWin() { myWin= open("l6.htm");}
// -->// -->
</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>
20E-Business, Sheizaf Rafaeli
Simple examples (6)Simple examples (6)
<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>
21E-Business, Sheizaf Rafaeli
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.
22E-Business, Sheizaf Rafaeli
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.
23E-Business, Sheizaf Rafaeli
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
24E-Business, Sheizaf Rafaeli
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/
25E-Business, Sheizaf Rafaeli
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