CSC4370/6370: Web Programming Event-driven programs and HTML form elements  event-driven programs  onload, onunload  HTML forms & attributes  button,

Slides:



Advertisements
Similar presentations
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Advertisements

JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Forms cs105. More Interactive web-pages So far what we have seen was to present the information. (Ex: tables. Lists,….). But it is not enough. We want.
Chapter 7 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 7 Sebesta: Programming the World Wide Web.
JavaScript Forms Form Validation Cookies CGI Programs.
1 A Balanced Introduction to Computer Science, 2/E David Reed, Creighton University ©2008 Pearson Prentice Hall ISBN Chapter 7 Event-Driven.
Information Technology Center Hany Abdelwahab Computer Specialist.
Computer Science 103 Chapter 4 Advanced JavaScript.
COMP 519: Web Programming Autumn 2014 Event-driven programs and HTML form elements  event-driven programs  onload, onunload  HTML forms & attributes.
CST JavaScript Validating Form Data with JavaScript.
1 Events Lect 8. 2 Event-driven Pages one popular feature of the Web is its interactive nature e.g., you click on buttons to make windows appear e.g.,
CP476 Internet Computing JavaScript and HTML1 1.JavaScript Execution Environment The JavaScript Window object represents the window in which the browser.
Client-Side programming with JavaScript 3
4-Sep-15 HTML Forms Mrs. Goins Web Design Class. Parts of a Web Form A Form is an area that can contain Form Control/Elements. Each piece of information.
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.
Forms and Form Controls Chapter What is a Form?
HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.
Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls.
Chapter 5 Java Script And Forms JavaScript, Third Edition.
1 SEN 910 CSS/HTML Programming Final Exam Review.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Event-driven Programming
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: JavaScript & Forms.
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
© 2000 – All Rights Reserved - Page 1 Introduction to JavaScript Programming Part Two.
JavaScript Part 1.
Chapter 3 : Processing on the Front End JavaScript Technically its name is ECMA-262, which refers to the international standard which defines it. The standard.
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
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.
1 Final Exam Review Web Programming with HTML and Java.
1 Website Development HTML Forms and JavaScript Event-driven programs and HTML form elements  event-driven programs  ONLOAD, ONUNLOAD  HTML forms &
Client side scripting - javascript Pertemuan 4 Matakuliah: Web Programming Tahun: 2009.
Document Objects Forms, Images and Links. The document object model Each element of an HTML document, such as an image, form, link, or button, can be.
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
JavaScript - Basic Concepts Prepared and Presented by Hienvinh Nguyen, Afshin Tiraie.
Fluency with Information Technology INFO100 and CSE100 Katherine Deibel Katherine Deibel, Fluency in Information Technology1.
Client-Side programming with JavaScript 2. Event-driven programs and HTML form elements event-driven programs  onload, onunload  HTML forms & attributes.
Introduction To JavaScript. Putting it Together (page 11) All javascript must go in-between the script tags. All javascript must go in-between the script.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Project 8: Reacting to Events Essentials for Design JavaScript Level One Michael Brooks.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs WDMD.
© 2007 D. J. ForemanJS-1 A Light Introduction for Non-programmers JavaScript for Beginners.
CSC 551: Web Programming Fall 2001 HTML forms & JavaScript events  HTML forms & attributes  button, text box, text area  selection list, radio button,
SEN 910 CSS/HTML Programming HTML Forms and JavaScript Event-driven programs and HTML form elements  event-driven programs  ONLOAD, ONUNLOAD  HTML forms.
1 CSC 551: Web Programming Spring 2004 Event-driven programs and HTML form elements  event-driven programs  ONLOAD, ONUNLOAD  HTML forms & attributes.
JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.
JavaScript Event Handlers. Introduction An event handler executes a segment of a code based on certain events occurring within the application, such as.
CSC 121 Computers and Scientific Thinking Fall Event-Driven Programming.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
HTML Structure II (Form) WEEK 2.2. Contents Table Form.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
XHTML Forms.
Chapter 5 Validating Form Data with JavaScript
Event-Driven Programming
In this session, you will learn to:
How to Write Web Forms By Mimi Opkins.
Web Development & Design Foundations with HTML5 7th Edition
JAVASCRIPTS AND HTML DOCUMENTS
Event-driven programs and HTML form elements
Chapter 6 Event-Driven Pages
COMP 270: Internet Programming Spring 2012
Chapter 7 Event-Driven Pages
Presentation transcript:

CSC4370/6370: Web Programming Event-driven programs and HTML form elements  event-driven programs  onload, onunload  HTML forms & attributes  button, text box, text area  selection list, radio button, check box, password, hidden, …  JavaScript form events  properties: name, type, value, …  methods: blur(), focus(), click(), …  event handlers: onblur(), onfocus(), onchange(), onclick(), …  advanced features & techniques  windows, timeouts, cookies

Event-driven programs with C++ or Java, programs are usually serially executed  start with main function, execute sequentially from first statement  may loop or skip sections of code, but the program generally proceeds step-by-step the programmer specifies the sequence in which execution occurs (with some variability due to input values) there is a beginning and an end to program execution computation within a Web page is rarely serial, instead the page reacts to events such as mouse clicks, buttons, …  much of JavaScript's utility is in specifying actions that are to occur in the page as a result of some event the programmer may have little or no control over when code will (if ever) be executed, e.g., code that reacts to a button click there is no set sequence, the page waits for events and reacts

OnLoad & OnUnload the simplest events are when the page is loaded or unloaded  the onload attribute of the tag specifies JavaScript code that is automatically executed when the page is loaded  the onunload attribute similarly specifies JavaScript code that is automatically executed when the browser leaves the page Hello/Goodbye page function Hello() { globalName=prompt("Welcome to my page. " + "What is your name?",""); } function Goodbye() { alert("So long, " + globalName + " come back real soon."); } Whatever text appears in the page. view page

HTML forms most event-handling in JavaScript is associated with form elements an HTML form is a collection of elements for handling input, output, and events in a page … form elements might include: for input: button, selection list, radio button, check box, password, … for input/output: text box, text area, … we will also encounter forms when we consider CGI programming  a form groups together elements, whose contents are submitted together to a server

document.forms[ ] is an (associative) array that will contain elements for each form on the webpage, using the "name" associated with the form as the array index Using the "dotted" syntax, we can then access other HTML elements of the form (using their names given to those elements). Recall that HTML pages are stored as a hierarchy of parent/child relationships, and this defines the way to access the elements. (More examples to come...) HTML forms (cont.)

Button Element Fun with Buttons <script type="text/javascript" src=" <input type="button" value="Click for Lucky Number" onclick=“var num = RandomInt(1, 100); alert('The lucky number for the day is ' + num);" /> the simplest form element is a button  analogous to a real-world button, a click can be used to trigger events view page

Buttons & Functions Fun with Buttons function Greeting() // Results: displays a time-sensitive greeting { var now = new Date(); if (now.getHours() < 12) { alert("Good morning"); } else if (now.getHours() < 18) { alert("Good afternoon"); } else { alert("Good evening"); } <input type="button" value="Click for Greeting" onclick="Greeting();" /> for complex tasks, we can define function(s) and have the onclick event trigger a function call view page

Buttons & Windows alert boxes are fine for displaying short, infrequent messages  not well-suited for displaying longer, formatted text  not integrated into the page, requires the user to explicitly close the box QUESTION: could we instead use document.write ? NO -- would overwrite the current page, including form elements but could open a new browser window and write there var OutputWindow = window.open(); // open a window and assign // a name to that object // (first arg is an HREF) OutputWindow.document.open();// open that window for // writing OutputWindow.document.write("WHATEVER");// write text to that // window as before OutputWindow.document.close();// close the window

Window Example Fun with Buttons function Help() // Results: displays a help message in a separate window { var OutputWindow = window.open(); OutputWindow.document.open(); OutputWindow.document.write("This might be a context-" + "sensitive help message, depending on the " + "application and state of the page."); OutputWindow.document.close(); } <input type="button" value="Click for Help" onclick="Help();" /> view page

Window Example Refined Fun with Buttons function Help() // Results: displays a help message in a separate window { var OutputWindow = window.open("", "", "status=0,menubar=0,height=200,width=200"); OutputWindow.document.open(); OutputWindow.document.write("This might be a context-" + "sensitive help message, depending on the " + "application and state of the page."); } <input type="button" value="Click for Help" onclick="Help();" /> can have arguments to window.open 1 st arg specifies HREF 2 nd arg specifies internal name 3 rd arg specifies window properties (e.g., size) view page

Text Boxes a text box allows for user input (and could also be used for output)  unlike prompt, user input persists on the page & can be edited optional attributes: size : width of the box (number of characters) value : initial contents of the box JavaScript code can access the contents in the example below as document.forms['BoxForm'].userName.value Fun with Text Boxes Enter your name here: <input type="button" value="Click Me" onclick="alert('Thanks, ' + document.forms['BoxForm'].userName.value + ', I needed that.');" /> view page

Read/Write Text Boxes similarly, can change the contents with an assignment Note: the contents are raw text, no HTML formatting Also: contents are accessed as a string, must parseFloat or parseInt if want a number Fun with Text Boxes Enter a number here: <input type="button" value="Double" onclick="document.forms['BoxForm'].number.value= parseFloat(document.forms['BoxForm'].number.value) * 2;" /> view page

Text Box Events onchange triggered when the contents of the box are changed onfocus triggered when the mouse clicks in the box blur() removes focus Fun with Text Boxes function FahrToCelsius(tempInFahr) // Assumes: tempInFahr is a number (degrees Fahrenheit) // Returns: corresponding temperature in degrees Celsius { return (5/9)*(tempInFahr - 32); } Temperature in Fahrenheit: <input type="text" name="Fahr" id="Fahr" size="10" value="0" onchange="document.forms['BoxForm'].Celsius.value = FahrToCelsius(parseFloat(document.forms[‘BoxForm’].Fahr.value));" /> ----> <input type="text" name="Celsius" id="celsius" size="10" value="" onfocus="blur();" /> in Celsius

Text Box Validation what if the user enters a non-number in the Fahrenheit box? solution: have the text box validate its own contents  start with legal value (or an empty text box)  at onchange, verify that new value is legal (otherwise, reset)  the verify.js library defines several functions for validating text boxes ( function VerifyNum(textBox) // Assumes: textBox is a text box // Returns: true if textBox contains a number, else false + alert { var boxValue = parseFloat(textBox.value); if ( isNaN(boxValue) ) { // ** isNaN function alert("You must enter a number value!"); textBox.value = ""; return false; } return true; }

Validation Example Fun with Text Boxes <script type="text/javascript" src=“ function FahrToCelsius(tempInFahr) { return (5/9)*(tempInFahr - 32); } Temperature in Fahrenheit: <input type="text" name="Fahr" id="Fahr" size="10" value="0" onchange="if (VerifyNum(this)) { // "this" refers to current element document.forms[‘BoxForm’].Celsius.value = FahrToCelsius(parseFloat(this.value)); }" /> ----> <input type="text" name="Celsius" id="Celsius" size="10" value="" onfocus="blur();" /> in Celsius

Text Areas a TEXT box is limited to one line of input/output a TEXTAREA is similar to a text box in functionality, but can specify any number of rows and columns Initial Text  Note: unlike a text box, a TEXTAREA has a separate closing tag initial contents of the TEXTAREA appear between the tags  as with a text box, no HTML formatting of TEXTAREA contents in performed

TEXTAREA Example Fun with Textareas function Table(low, high, power) {// Results: displays table of numbers between low & high, raised to power var message = "i: i^" + power + "\n \n"; for (var i = low; i <= high; i++) { message = message + i + ": " + Math.pow(i, power) + "\n"; } document.forms['AreaForm'].Output.value = message; } Show the numbers from <input type="text" name="lowRange" size="4" value="1" onchange="VerifyInt(this);" /> to <input type="text" name="highRange" size=“4” value=“10” onchange="VerifyInt(this);" /> raised to the power of <input type="text" name="power" size=3 value=2 onchange="VerifyInt(this);" /> <input type="button" value="Generate Table" onclick="Table(parseFloat(document.forms['AreaForm'].lowRange.value), parseFloat(document.forms['AreaForm'].highRange.value), parseFloat(document.forms['AreaForm'].power.value));" />

So far, we have been accessing data input fields by giving them names, and using the “dotted” names from the Document Object Model tree structure. What if someone modifies the HTML document? Then, all those multiply referenced items can no longer be accessed if the name of the form changes. A more reliable manner (more resistant to changes in the webpage code) would be to give each element an ID (using the “id” attibute) and use the JavaScript getElementById method. In practice, every item (like input boxes, textboxes, etc) should be given both a name and an id. The “name” is used if/when information is submitted to the server, and the “id” is what is used on the client to identify that HTML element. (Typically, the name and id are given the same value.) Better (and easier?) methods to access data

Using getElementById Fun with Text Boxes <script type="text/javascript" src=" function FahrToCelsius(tempInFahr) { return (5/9)*(tempInFahr - 32); } Temperature in Fahrenheit: <input type="text" name ="Fahr" id="Fahr" size="10" value="0" onchange="if (VerifyNum(this)) { // this refers to current element var F=document.getElementById('Fahr'); var C=document.getElementById('Celsius'); C.value = FahrToCelsius(parseFloat(F.value)); }" /> ----> <input type="text" name="Celsius" id="Celsius" size="10" value="" onfocus="getElementById('Fahr').focus();" /> in Celsius

A check box is a list of items, one or more of which can be selected This is easy to create in HTML, simply using the “checkbox” input item Give the checkbox a name and use this for each of the elements in the checkbox list (with a separate value for each one) The set of checkboxes are stored internally as an array. Check boxes

Check buttons Check Boxes function processCB() { var boxes = document.forms['BoxForm'].cb.length; var s=""; for (var i = 0; i < boxes; i++) { if (document.forms['BoxForm'].cb[i].checked) { s = s + document.forms['BoxForm'].cb[i].value + " "; } } if (s == "") { s = "nothing"; } alert("You selected " + s); } Which of these things is unavoidable in life (select one or more)? Death Taxes <input type="checkbox" id="Robbie" name="cb" value="Robbie Williams" /> Robbie Williams

Using checkboxes function processCB() { var s=""; var cb=document.forms['BoxForm'].elements['cb']; for (var i = 0; i < cb.length; i++) { if (cb[i].checked) { s = s + cb[i].value + " "; } } if (s == "") { s = "nothing"; } alert("You selected " + s); } Which of these things is unavoidable in life (select one or more)? Death Taxes Robbie Williams Check buttons (using a slightly different method)

Radio buttons Radio buttons are similar to check boxes, but only one of them can be selected at any time. They are defined by tags (similar to the checkbox tags in the previous example, with similar properties) and accessed in the same manner.

Typically forms are used when information is submitted to a server This involves either having a “submit” button in the form, or using JavaScript to submit the form by calling the submit function When you submit the form, you must specify an “action” to be performed (this is usually a script of some type, such as a PHP script) and a method of sending the information (either “get” or “post”) We will see more of this later… Form submission Submitting information Please enter your name: Please select your gender: Female Male

JavaScript & Timeouts the setTimeout function can be used to execute code at a later time setTimeout( JavaScriptCodeToBeExecuted, MillisecondsUntilExecution ) example: forward link to a moved page Fun with Timeouts function Move() // Results: sets the current page contents to be newhome.html { self.location.href = "newhome.html"; } This page has moved to newhome.html.

Fun with Timeouts function timeSince() // Assumes: document.forms['CountForm'].countdown exists in the page // Results: every second, recursively writes current countdown in the box { // CODE FOR DETERMINING NUMBER OF DAYS, HOURS, MINUTES, AND SECONDS // UNTIL GRADUATION (see the file for this code!!!) document.forms['CountForm'].countdown.value= days + " days, " + hours + " hours, " + minutes + " minutes, and " + secs + " seconds"; setTimeout("timeSince();", 1000); } Countdown to Graduation 2011 Another Timeout Example

Cookies & JavaScript recall that cookies are data files stored on the client machine  can be accessed and/or modified by the server  can also be accessed and/or modified directly by JavaScript code in a page potential applications:  e-commerce: remember customer name, past visits/purchases, password, …  tutorials: remember past experience, performance on quizzes, …  games: remember high score, best times, … each Web page can have its own cookie  document.cookie is a string of attribute=value pairs, separated by ; "userName=bjena;score=100;expires=Mon, 21-Feb-01 00:00:01 GMT"

function getCookie(Attribute) // Assumes: Attribute is a string // Results: gets the value stored under the Attribute { if (document.cookie.indexOf(Attribute+"=") == -1) { return ""; } else { var begin = document.cookie.indexOf(Attribute+"=") + Attribute.length+1; var end = document.cookie.indexOf(";", begin); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(begin, end)); } function setCookie(Attribute, Value) // Assumes: Attribute is a string // Results: stores Value under the name Attribute, expires in 30 days { var ExpireDate = new Date(); ExpireDate.setTime(ExpireDate.getTime() + (30*24*3600*1000)); document.cookie = Attribute + "=" + escape(Value) + "; expires=" + ExpireDate.toGMTString(); } function delCookie(Attribute) // Assumes: Attribute is a string // Results: removes the cookie value under the name Attribute { var now = new Date(); document.cookie = Attribute + "=; expires=" + now.toGMTString(); } cookie.js

Fun with Cookies <script type="text/javascript" src=" function Greeting() // Results: displays greeting using cookie { visitCount = getCookie("visits"); if (visitCount == "") { alert("Welcome to my page, newbie."); setCookie("visits", 1); } else { visitCount = parseFloat(visitCount)+1; alert("Welcome back for visit #" + visitCount); setCookie("visits", visitCount); } Here is the stuff in my page. Cookie Example

A recap of things we have seen Event-driven programs and HTML form elements  event-driven programs onload, onunload  HTML forms & attributes button, text box, text area selection list, radio button, check box, password, hidden, …  JavaScript form events properties: name, type, value, id, … methods: blur(), focus(), click(), … event handlers: onblur(), onfocus(), onchange(), onclick(),...  advanced features & techniques windows, timeouts, cookies