Events forms
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

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