1 JavaScript E-Commerce Prof. Sheizaf Rafaeli

2 E-Business, Sheizaf Rafaeli JavaScript intro n Javascript is a programming language n It is a simple, object-based interpreted scripting language n Code is usually embedded in the HTML n Javascript is NOT Java n Javascript is not Jscript or Active-X, but Jscript tries to be compatible n Created by Netscape

3 E-Business, Sheizaf Rafaeli Strengths and weaknesses n Easy to learn n Quick development n Easy to debug n Platform independent n Small overhead n Limited range of built- in methods n No code hiding n Debugging and development tools are still lacking n Unstable, compatibility?

4 E-Business, Sheizaf Rafaeli Javascript JavaScript usually goes between the tag and the tag, but can go elsewhere too. n n JavaScript begins with – – JavaScripts end with the tag. Use and Comments use the // and /* -- */ pair. n Worry about hiding scripts

5 E-Business, Sheizaf Rafaeli Very Simple Example document.write(“shalom!")</script>

6 E-Business, Sheizaf Rafaeli Javascript (2) n Javascript is case sensitive n Is flexible about statements and white space n Scripts are evaluated as soon as the code is encountered n Functions can be defined anywhere. n However they only get executed when called

7 E-Business, Sheizaf Rafaeli Javascript hiding scripts from incompatible browsers Whatever <!-- hide stuff from other browsers YOUR SCRIPT HERE // end the hiding comment -->

8 E-Business, Sheizaf Rafaeli Main concepts

9 E-Business, Sheizaf Rafaeli Topical Outline n Variables n alert, prompt, document.writeln n Strings as objects n If-then branching n Link events (onClick, OnMouseover) n Opening new windows (“targeting”) n Object oriented programming, and esp. the Document Object Model n Loops, arrays and functions n Forms, OnChange, OnLoad

10 E-Business, Sheizaf Rafaeli Brief overview of object-oriented programming n n Built-in library of objects – –Window, Math, String, Document, Form, Navigator, etc. n Objects have properties and methods n See Javascript cheatsheet for summaries and tables, at: – –

11 E-Business, Sheizaf Rafaeli 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. n n Later versions have more objects, properties, and methods.

12 E-Business, Sheizaf Rafaeli Javascript variables n Variables can be declared using var (but not required). n n Variable names must start with either a letter or the underscore character. n n Variable names are case-sensitive in most, but not all, versions n n Statements end with a semicolon. n n Spaces and line breaks are ignored by the JavaScript interpreter

13 E-Business, Sheizaf Rafaeli Javascript examples n Stroke the squares – n Favorite Animal (forms) – n Simple calculations – n Intranets (Montana) – n Validate a form – – n “Has E” validation –

14 E-Business, Sheizaf Rafaeli Javascript examples (2) n See collections, at: – ript.examples.html »Calculator, Calendar, Rotating menu, Multiplication table, Using cookies, Decision support, Encryption – –

15 E-Business, Sheizaf Rafaeli Simple examples (1) n Click event: n Click event:

16 E-Business, Sheizaf Rafaeli Simple examples (2) <!-- hide from old browsers <!-- hide from old browsers document.write(“Hail to the Victors Valiant "); document.write(“Hail to the Conquering Heroes "); document.write(“Hail to the Victors Valiant "); document.write(“Hail to the Conquering Heroes "); document.write(“Hail to the Victors Valiant "); document.write(“Hail to the Conquering Heroes "); // --> // -->

17 E-Business, Sheizaf Rafaeli Simple examples (3) <!-- hide function myFunction() {document.write(“Hail to the Victors Valiant "); document.write(“Hail to the Conquering Heroes "); }myFunction();myFunction();myFunction(); // --> // -->

18 E-Business, Sheizaf Rafaeli Simple examples (4) <!-- hide function calculation() { var x= 12; var y= 5; var result= x + y; var x= 12; var y= 5; var result= x + y; alert(result);} // -- > alert(result);} // -- > </head><body><form> </form></body></html>

19 E-Business, Sheizaf Rafaeli Simple examples (5) <!-- hide function openWin() { myWin= open("l6.htm");} // --> </head><body><form>

20 E-Business, Sheizaf Rafaeli Simple examples (6) <!-- Hide function test1(form) { if (form.text1.value == "") alert('Please enter a string!'); else { alert("Hi "+form.text1.value+"! Form input ok!"); }} function test2(form) { if (form.text2.value == "" || 0) == -1) alert("No valid address!"); alert("No valid address!"); else alert("OK!");} else alert("OK!");} // -- > example 12: Enter your name: Enter your address:

21 E-Business, Sheizaf Rafaeli 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.

22 E-Business, Sheizaf Rafaeli Debugging n n 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.

23 E-Business, Sheizaf Rafaeli Online resources n Netscape’s JavaScript guide – ation/communicator/jsguide4/index.htm n Netscape’s Sample form validation scripts, at: – – es/javascript/formval/overview.html

24 E-Business, Sheizaf Rafaeli Online resources (2) n Javascript 411: – – n Javascript “Tip of the Week” – n The Javascript resource center –

25 E-Business, Sheizaf Rafaeli Online resources (3) n Danny Goodman’s pages – – n n Gordon McComb’s pages – – n n Usenet’s comp.lang.javascript