Events , Forms

1. Events, Forms Week 6 INFM 603

2. Announcements • Main Class Project Groups • How to encode video for HTML5 • http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/How-to-Encode-Video-for-HTML5-87766.aspx

3. Agenda • Key Concepts • JS Review • Event-Driven Programming • Forms • Recursion

4. History of Structured Documents • Early standards were “typesetting languages” • NROFF, TeX, LaTeX, SGML • HTML was developed for the Web • Specialized standards met other needs • Change tracking in Word, annotating manuscripts, … • XML seeks to unify these threads • One standard format for printing, viewing, processing

5. The XML Family Tree SMIL SpeechML XUL XHTML MathML RDF HTML TEI . . . . . . XML SGML

6. Some Basic Rules for All XML • XML is case sensitive • XML declaration is the first statement • <?xml version="1.0"?> • An XML document is a “tree” • Must contain one root element • Other elements must be properly nested • All start tags must have end tags • Attribute values must have quotation marks • <item id=“33905”> • Certain characters are “reserved” • For example: &lt; is used to represent <

7. High Level Languages • Procedural (modular) Programming • Group instructions into meaningful abstractions (functions, procedures) • C, Pascal • Object oriented programming • Group “data” and “methods” into “objects” • Naturally represents the world around us • C++, Java, JavaScript, PHP, Ruby

8. Key Concepts • Structured Programming • Modular Programming • Data Structures • Object-Oriented Programming

9. Data Structures • Constant • Names given to unchanging values (for readability) • Scalar • Single-valued item (int, float, boolean) • Object • Multi-valued item, mixed data types [+methods] • Array • Integer-indexed set of objects (usually of one type) • Associative array (“hash table”) • Object-index set of objects (usually of one type)

10. Review • Indentation • Space between operators • Do while loops • Functions • Returning values from functions • Advantages of functions • Avoids code duplication • Modular programming (Abstraction, Reusability) • Arrays • How to define them • Indexing • For loops and arrays • Passing arrays to functions • Returning arrays from functions • Common uses  Queue (FIFO), Stack (LIFO)

11. Nested Loops • You can combine if, while and do while statements in several ways • You can have an several nested if statements • You can have if statements within while statements • You can have while statements within if • Example: MultiplicationTable.html • Example of nested loops

12. Events • EventNotification that something has occurred • Example of situations that make the web browser generate an event • Browser finishes loading a document • When the user clicks on a button • When the user moves the mouse • Others • Event handler (also known as event listener) • JavaScript function or code fragment that is executed when a particular event occurs • Event handler registration • Associating an event handler with a particular event

13. Event-driven Programming • Normal (control flow-based) programming • Approach • Start at main() • Continue until end of program or exit() • Event-driven programming • Start at main() • Register event handlers • Await events & perform associated computation • GUIs (Graphical User Interfaces) • Example of event-driven software

14. Event Handler Attributes for Most HTML • Mouse Related • onclickmouse button is pressed and released • ondblclickmouse button is double-click over element • onmouseovermouse moves over element • Keyboard Related • onkeypresskey pressed and released • Other • onload

15. Forms • Forms means by which information passes from the user to a server • For now we will use forms to read values to be processed by JavaScript • <form> tag • Defines the form • It has two attributes action and method • action indicates where the form contents will be sent when the form is submitted • methoddefines how the contents will be sent (post/get) • <input>tag • Appears inside of the <form> tag • Defines several input data alternatives • The general format is <input type="ALTERNATIVE" /> • ALTERNATIVE can be text, password, checkbox, radio, file, submit, button, reset, hidden, others

16. Form Data Access • We can access data in forms by using document.getElementById(“elementId”) ; • getElementById returns a reference to an element that we can use to: • Retrieve the value of the element (e.g., text field in a form) var login = document.getElementById("loginId").value; • Set the function to call when an element is clicked on (e.g., button) document.getElementById("processButton").onclick = functionDoesProcessing; • Get/Set Attributes varimageElement = document.getElementById("myImage"); varimageName = imageElement.getAttribute("src"); imageElement.setAttribute("src", “imageFile.jpg”); • Example: AssociateButtonWithFunction.html, GetValueInTextField.html • Example: UpdateValueInTextField.html, GetSetAttribute.html

17. Forms • Reset • The functionality of the Reset button is already provided by HTML. You don't need to add any JavaScript or define a button • You can change the text associated with the Reset button by using the value attribute • Example: GetValueInTextField.html