1 / 30

JavaScript Lecture 3

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). More Form Handling (BJS 6.6shoVal). The value of a Check Box

hashim
Download Presentation

JavaScript Lecture 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related