JavaScript Lecture 3

1. JavaScript Lecture 3 • Form Validation part 2 • Events • Advanced Rollovers • String Handling • Cookies 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 (JBS 6.4) • 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. Event mini-spec • Add two checkboxes to an existing form • Add validation to check that at least one of the checkboxes has been checked. • BJS ch6_examp4eventRaw.html JavaScript Lecture 3

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

11. 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

12. 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

13. 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

14. All State Saving TechniquesRequire Familiarity withStrings JavaScript Lecture 3

15. 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

16. The String Object (Cont.) Methods: see Gosselin, pp. 396-397 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

17. 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

18. Parsing a 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 JavaScript Lecture 3

19. Parsing a 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

20. 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

21. 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

22. Cookies (3) • Cookie values are stored as “a string of semicolon delimited attribute value pairs” • Example: “name=Fred;age=21;lastpick=pink” • Most non-programmers will rely on pre-written functions to determine cookie values • To understand the example you’ll need to know  JavaScript Lecture 3

23. 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

24. 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

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

26. Saving State Information with Hidden Form Fields (Cont.) • Is created 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

27. 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

28. The String Object For next class read Chapter 8 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

29. 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