JavaScript Lecture 3

1. JavaScript Lecture 3 • Form Validation part 2 (Gosseli4n, Ch. 5) • Events (Gosselin4, Ch. 3) • Advanced Rollovers (Gosselin4, Ch. 4. p. 179) • String Handling (Gosselin4, Ch. 7) • Cookies and state handling (Gosselin4, Ch. 9) JavaScript Lecture 3

2. More Form Handling (BJS 6.6shoVal) • The value of a Check Box • Check Boxes have • (1) A value if programmed as a attribute • (2) An attribute called CHECKED • Both attributes are accessible to JavaScript • For future reference – only CHECKED values are sent to the server for processing JavaScript Lecture 3

3. More Form Handling (2) (BJS 6.6shoVal) • Radio Buttons • Recall – so they can be grouped to work properly, multiple Radio Button elements have the SAME NAME • The browser groups them into an array that has the same name as Radio Button elements. • Typically it is accessed in a loop (see how this stuff all works together – arrays, loops, HTML, JavaScript??) JavaScript Lecture 3

4. More Form Handling (3) (JSV4 6.8) • Drop down lists • Drop down lists in HTML consist of an list of <OPTION> tags inside a <SELECT> container. • One of the options is chosen and has its SELECT property = true • The values are grouped by the browser into an array (what else) • A special value called selectedIndex indicates what element of the array was selected. JavaScript Lecture 3

5. More Form Handling (2) (JSV4 6.8) • Putting it all together – the lab example validation requires: • Check boxes • Radio buttons • Drop down selections • Conditional logic • Boolean logic (ANDs and ORs and NOTs) JavaScript Lecture 3

6. Events (1) • An event is something a user does to a computer system • Hit a key • Move or click a mouse • Change a data value, etc. • JavaScript “knows” when various events occur and let the programmer define code to be executed when the events occur JavaScript Lecture 3

7. Events (2) • Common events are • onClick • onMouseOn • onMouseOff • onLoad • onBlur • Complete list HTMLCR pp. 680 – 688 • Events are defined individually for each object in the BOM. Not all objects support all events. For example, it makes no sense for a button to support the onLoad event. JavaScript Lecture 3

8. Events (3) • Event code can be defined in two places • At the source of the event (such as at the form element tag) called in-line code • In a function with a convention determined name: elementName_eventName() • Script at source example: GOT 14.9 • Function name calling example: BJS 6.4 • JavaScript does NOT support explicit calling of convention-named named subroutines as VB does. JavaScript Lecture 3

9. Rollovers (JSV4 3.5) • Understanding (rather than hacking) rollovers pulls many concepts together. It requires understanding: • Image tags • Events • Functions • Arrays JavaScript Lecture 3

10. Understanding State Information • State Information: • Information about individual visits to a Web site • HTTP was originally designed to be stateless • Web browsers stored no persistent data about a visit to a Web site • Design was efficient, but limiting JavaScript Lecture 3

11. Understanding State Information (Cont.) • Server that maintains state information can: • Customize individual Web pages based on user preferences • Temporarily store information for a user as a browser navigates within a multipart form • Allow a user to create bookmarks for returning to specific locations within a Web site JavaScript Lecture 3

12. Understanding State Information (Cont.) • Provide shopping carts that store order information • Store user IDs and passwords • Use counters to keep track of how many times a user has visited a site JavaScript Lecture 3

13. All State Saving TechniquesRequire Familiarity withStrings (Gosselin4, Ch. 7) JavaScript Lecture 3

14. The String Object • Stringobject: • Represents all literal strings and string variables in JavaScript • Contains methods for manipulating text strings • Length property returns the number of characters in a string JavaScript Lecture 3

15. The String Object (Cont.) Methods: see Gosselin, pp. 338-345 Many are similar to VB indexOf(text, indexTOStartAt) search(pattern) substring(start, end) indexOf() is a function Search() and substring() are methods JavaScript Lecture 3

16. Manipulating Strings • Parsing: • Refers to the act of extracting characters or substrings from a larger string • Essentially the same concept as the parsing (rendering) that occurs in a Web browser JavaScript Lecture 3

17. But before we delve into parsing, lets look at a Cookie (which is a string) JavaScript Lecture 3

18. Cookies • Cookies are small data files stored on your hard disk by the browser • They are the only persistent interaction between your browser and your PC • Cookies can be turned off or the browser can be set to advise you of cookie write attempts • SO … don’t write mission critical software that depends on cookies JavaScript Lecture 3

19. Cookies (2) • Uses for cookies • User preferences • User history • Overcoming ‘statelessness’ of HTML • Cookies are “domain specific” – only the site that wrote a cookie should be able to read it. JavaScript Lecture 3

20. Cookies (3) • Cookie values are stored as “a string of semicolon delimited attribute value pairs” • Same format as form data submission • Example: “name=Fred;age=21;lastpick=pink” • Non-programmers rely on pre-written functions to determine cookie values. We roll our own! • To understand the example you’ll need to know  JavaScript Lecture 3

21. Cookies (4) • Cookies are stringobjects in JavaScript and one of the helpful functions they posses is ‘split(*)’. • Split takes a string – like the cookie value – and splits it into pieces based on what * is set to. JavaScript Lecture 3

22. Cookies (5) • A Cookie is an object in JavaScript • To set its value property use the syntax: • document.cookie = ‘attribute=value’ • Cookies normally ‘go away’ when the browser closes. To make a ‘persistent’ (stored on disk) cookie, change the ‘expires’ property to a future date • And now, the example, 14.10 JavaScript Lecture 3

23. Other State Saving Methods • Hidden Variables • Query strings JavaScript Lecture 3

24. Saving State Information with Query Strings • A query string: • Set of name=value pairs appended to a target URL • Consists of a single text string containing one or more pieces of information • To pass information from one Web page to another using a query string: • Add a question mark (?) immediately after a URL, followed by the query string (in name=value pairs) for the information you want to preserve JavaScript Lecture 3

25. Parsing a Query String • The first parsing task: • Remove question mark at the start of query string • Use substring() method combined with length property • Substring() method takes two arguments: • Starting index number and an ending index number • The first character in a string has an index number of 0 • var mystr = str.substring(1, str.length); JavaScript Lecture 3

26. Parsing a Query String (Cont.) • The next step: • Convert individual pieces of information in queryData variable into array elements using the split() method • Pass to the split() method the character that separates each individual piece of information in a string JavaScript Lecture 3

27. Saving State Information with Hidden Form Fields (Cont.) • Is created on the server using the same syntax used for other fields created with the <input> element: • <input type="hidden"> • Name and value attributes are the only attributes that you can include with it JavaScript Lecture 3

28. Saving state with hidden fields(.net does this transparently for the developer) Form information to server Client page 1 Server Embed form information in page 2 using hidden fields Client page 2 Form information and new page back to client JavaScript Lecture 3

29. The String Object For next class read Chapter 9 in Gosselin4 And become intimately familiar with the programs: CustomerInfo.html FormProcessor.html ProductInfo.html ProductRegistration.html Register.html These are all in lecture10files.zip on my web site JavaScript Lecture 3

30. More string handling (stringExampleClass.html) • Develop a subroutine that will: • Accept 2 parameters • a cookie or query string • The name of an attribute in the string i.e. ‘name’ • Returns the value of the attribute • Uses search() or indexOf() and substring() only • Does not use split JavaScript Lecture 3