events forms n.
Skip this Video
Download Presentation
Events , Forms

Loading in 2 Seconds...

play fullscreen
1 / 17

Events , Forms - PowerPoint PPT Presentation

  • Uploaded on

Events , Forms. Week 6 INFM 603. Announcements. Main Class Project Groups How to encode video for HTML5 http:// Agenda. Key Concepts JS Review Event-Driven Programming Forms Recursion.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Events , Forms' - vernon-aguilar

Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
events forms

Events, Forms

Week 6

INFM 603

  • Main Class Project Groups
  • How to encode video for HTML5
  • Key Concepts
  • JS Review
  • Event-Driven Programming
  • Forms
  • Recursion
history of structured documents
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
the xml family tree
The XML Family Tree









. . .

. . .



some basic rules for all xml
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 <
high level languages
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
key concepts
Key Concepts
  • Structured Programming
  • Modular Programming
  • Data Structures
  • Object-Oriented Programming
data structures
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)
  • 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)
nested loops
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
  • 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
event driven programming
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
event handler attributes for most html
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
  • 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
form data access
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
  • 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