Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 12.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

The Web Wizards Guide To JavaScript Chapter 3 Working with Forms.
Cookies, Sessions. Server Side Includes You can insert the content of one file into another file before the server executes it, with the require() function.
The Web Warrior Guide to Web Design Technologies
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
CHAPTER 30 THE HTML 5 FORMS PROCESSING. LEARNING OBJECTIVES What the three form elements are How to use the HTML 5 tag to specify a list of words’ form.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Introduction to Scripting.
JavaScript Forms Form Validation Cookies CGI Programs.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
HTML Comprehensive Concepts and Techniques Second Edition Project 8 Integrating JavaScript with HTML.
XP Tutorial 9 New Perspectives on JavaScript, Comprehensive1 Working with Cookies Managing Data in a Web Site Using JavaScript Cookies.
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
1 CS101 Introduction to Computing Lecture 29 Functions & Variable Scope (Web Development Lecture 10)
Lesson 8 Creating Forms with JavaScript
CST JavaScript Validating Form Data with JavaScript.
JavaScript Events and Event Handlers 1 An event is an action that occurs within a Web browser or Web document. An event handler is a statement that tells.
JavaScript Form Validation
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
Department of Information Technology e-Michigan Web Development 0 HTML Form Creation in the Vignette Content Management Application.
The Web Wizard’s Guide To JavaScript Chapter 1 JavaScript Basics.
Review and Practice for Final exam. Final exam Date: December 20, 3:15 – 5:15pm Format: Two parts: First part: multiple-choice questions (15 questions.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
JavaScript Part 1.
1 CLIENT-SIDE SCRIPTS. Objectives 2 Learn how to reference objects in HTML documents using the HTML DOM and dot syntax Learn how to create client-side.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
The Web Wizard’s Guide To JavaScript Chapter 6 Working with Dates and Times.
The Web Wizard’s Guide To JavaScript Chapter 6 Working with Dates and Times.
Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Chapter 8 Cookies And Security JavaScript, Third Edition.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Adobe GoLive Edit and FTP your web pages to a web server.
Using Client-Side Scripts to Enhance Web Applications 1.
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
JavaScript, Fourth Edition Chapter 5 Validating Form Data with JavaScript.
Regular Expression (continue) and Cookies. Quick Review What letter values would be included for the following variable, which will be used for validation.
Cookies Web Browser and Server use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website it is required to maintain.
Microsoft FrontPage 2003 Illustrated Complete Creating a Form.
The Web Wizard’s Guide To JavaScript Chapter 7 Cookies: Maintaining State.
The Web Wizard’s Guide To JavaScript Chapter 3 Working with Forms.
The Web Wizard’s Guide To JavaScript Chapter 3 Working with Forms.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Event Handling. Objectives Using event handlers Simulating events Using event-related methods.
Lesson 16. Practical Application 1 We can take advantage of JavaScript and the DOM, to set up a form so that the first text box of a form automatically.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 13.
IS2802 Introduction to Multimedia Applications for Business Lecture 8: JavaScript and Cookies Rob Gleasure
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 9.
Microsoft Office 2008 for Mac – Illustrated Unit D: Getting Started with Safari.
Learning Aim C.  In this section we will look at how text, tables, forms and frames can be used in web pages.
Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.
JavaScript, Sixth Edition
In this session, you will learn to:
Web Development & Design Foundations with HTML5
Web Programming– UFCFB Lecture 17
WEB PROGRAMMING JavaScript.
Integrating JavaScript and HTML
The Web Wizard’s Guide To JavaScript
Introduction to Programming the WWW I
JavaScript: Introduction to Scripting
The Web Wizard’s Guide To JavaScript
Presentation transcript:

Introduction to Programming the WWW I CMSC Summer 2003 Lecture 12

2 Topics Today More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies

3 Reminder Final project presentation this Friday

4 More JavaScript Code Libraries Code library not only support code reuse, but can help with Web site maintenance  How? Separate the code from Web pages! Three more complicated code examples you might want to put into your code libraries

5 Code 1: Browser Detection Tool number 1 in your code library Detect browsers by feature support var theDOM1 = (document.getElementById) ? true : false; Detect browsers by name var UA = navigator.userAgent.toLowerCase(); Detect the platform in use var isMAC = (UA.indexOf('mac') >= 0) ? true : false; var isWIN = (UA.indexOf('win') >= 0) ? true : false; Example Web page:  listing4-2.html listing4-2.html

6 Code 2: Object Positioning Create a getObj() function Create a shiftTo() function Create functions to find x, y, and z Create a function to empty a node Example Web page:  listing4-3.html listing4-3.html

7 Code 3: Change Window Size A function to get the available width A function to get the available height A function to set the window size A function to maximize the window Example Web page:  listing4-4.html listing4-4.html

8 Topics Today More JavaScript Code Libraries Working with Forms (validation) Working with Dates and Times Cookies

9 Form Validation HTML forms contain fields, select menus, radio buttons, and check boxes Form validation procedures:  Check the data the visitor enters on the form  Reminds the visitor to enter missing data  Reformats the visitor’s data as needed

10 Text Fields: Bad or Missing Data The tag - single line of text The tag - multiple lines of text Always include name and value attributes The onSubmit event handler calls the validate() function The validate() function checks for bad or missing data If the function returns false then the form is not submitted Example: listing3.2.htmllisting3.2.html

11 Text Fields: Reformatting Data U.S. telephone numbers require specific format (555) A visitor types a phone number into a text field then types the tab key An onChange event handler calls the formatNumber() function The formatNumber() function finds the first ten numbers in the text field and adds the necessary parentheses and spaces The reformatted number is displayed in the field Example: listing3.3.htmllisting3.3.html

12 Validating Text Fields To validate a text field, you first determine whether a value has been entered. For example, to determine whether the visitor neglected to enter information into a required field, you may test the expression (!document.survey.visitor.value). If that expression is true then the visitor failed to enter required information into the visitor field.You can also check to make sure the information is in the correct format in terms of numbers and punctuation

13 Radio Buttons Radio buttons are used for questions like gender which have a limited number of possible responses The getRadioValue() function finds the value of the checked radio button The showRadioValue() function checks the desired radio button Place these functions in your code library

14 Validating Radio Buttons Browsers automatically store a set of radio buttons, all bearing the same name, in an array. For example, if you have two radio buttons called gender, the first one, gender[0], might have a value of male and the second one, gender[1], might have a value of female. You can use JavaScript expressions to see which button is checked and to find its value Example: listing3.4.htmllisting3.4.html

15 Check Boxes Check boxes for “check all that apply” questions. When form is submitted, names and values of checked boxes are sent Test for the checked property Often it is helpful to use sequential names for check boxes (q1, q2, q3).

16 Selection Menus tag creates a popup selection menu with options set in the tag Select and go navigation The getSelectValue() function finds the value of the selected option The showSelectValue() function changes to the display of a to a given value Store these functions in your code library

17 Validating Selection Menus A common technique for obtaining the value of a selected item in a SELECT menu is to store the SELECT object in a variable, find the number of the selected option (the selectedIndex property), and then find the value of the selected option Example: listing3.7.htmllisting3.7.html

18 Topics Today More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies

19 The Date Object JavaScript contains a set of core objects, including the Date object, that exist independently of any host environment such as a Web browserthe Date object To use the Date object, you first create an instance of it and then apply a method to obtain date and time information

20 Date Examples A simple clock  Using the toLocaleString() method of the Date object  Example Web page: listing6.1.htmllisting6.1.html A better clock  Obtaining the current hour, minute, and seconds and then concatenating them to create a new format  Example Web page: listing6.2.htmllisting6.2.html

21 Date Examples (cont’d) Creating dynamic Greetings  It is possible to vary the information displayed on your Web page according to the time or date  Example Web page: listing6.4.htmllisting6.4.html

22 Date Mathematics JavaScript’s Math object is a built-in calculator  Math methods summary: To perform math operations on information obtained from text fields, you first convert the values to numbers using the top-level parseInt() or parseFloat() function parseInt() parseFloat() Date mathematics allows you to create countdown pages to important events

23 Topics Today More JavaScript Code Libraries Working with Forms Working with Dates and Times Cookies

24 What are Cookies? Cookies are small pieces of information stored on the visitor’s hard drive Cookies are mostly harmless, but valid privacy concerns exist about the use of cookies in conjunction with invasive marketing techniques You can create as many as 20 cookies per domain

25 Creating Cookies Cookies are set when a JavaScript statement in a Web page assigns content to the cookie property of the document object. By default, the content includes information about the domain and directory location of the page that created it

26 Retrieving A Cookie When a Web page attempts to retrieve a cookie, the location of the Web page is compared to the domain and directory of the page that created the cookie. If the two locations do not match, the cookie cannot be retrieved

27 Deleting Cookies You can set an expiration date for your cookies. The form of the expiration date is always GMT You can eliminate a cookie by setting its expiration date to a date in the past

28 Public Domain Cookie Code Bill Dortch’s cookie code is widely used on the Internet and has been placed in the public domain  Source code Several key functions defined  SetCookie()  GetCookie()  GetCookieVal()  DeleteCookie()

29 Example 1: First Cookie A simple program to store visitor’s name and favorite color information in cookies Example Web page: listing7.2.htmllisting7.2.html

30 Example 2: Storing Preferences One popular use of cookies is to store visitor preferences, such as background color and login information When a Web page retrieves information from a cookie, the page can act on that information by changing the page appearance to suit the expressed preferences of the visitor Example Web page: listing7.3.htmllisting7.3.html