Notes for Class No. 13

Processing Forms with JavaScript, including Basic Form Validation Concepts and Introduction to jQuery

Thursday, October 15, 2015

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

Openings / Announcements / Reminders

Please complete the Midterm Course Evaluation

https://docs.google.com/forms/d/1dHTYaWtph67108xNBn2XA5ezyr3XdrqoGjWep86Nxgk/viewform

please complete this form
your responses are completely anonymous
the purpose of this survey is merely to improve the course and my teaching
it has nothing to do with your performance, but a great deal to do with mine

Aso of Wednesday, October 14, at 11:00 AM, only 16 students had completed the form
As of this morning, Thursday, October 15, at 8:45 AM, 18 students had completed the form

Free Form Questions

This course would be better if ...

We got cookies.
Professor Heines allowed us one unexcused absence.
We went a little faster during the lectures.
We covered the full stack.

I would learn more from this course if ...

Add more links to external sources (videos, code examples, websites) in the class notes for reference at home similar to the ones that are usually given, so just more of these to help get a visual of how the concepts are applied in the real world and to see videos that can maybe explain it from a different perspective. (Maybe extra things that don’t need to be covered, but can be pursued by students if they want to go deeper and see what else there is that can be connected.)
I could see the board a little better. Lecture capture is good for catching me up, though.
He didn’t spent too much time on JSON.
There were more assignments with more difficult requirements.

Prof. Heines would be a more effective teacher if ...

He asked more questions to the class.
I could see the board a little better. His teaching style is good.
He’s already very effective.
If he talked in a Bugs Bunny voice...ehh maybe not, scratch that, you are doing great!
He is already great, helpful and enthusiastic which helps learning.

Please write any additional comments (positive or negative) and/or suggestions you have for improving this course. These may relate to any aspect of the course at all or anything that I could do to help you learn.

I’d love some practice assignments just for fun.
Overall, good class so far. Very enjoyable.
You have been organized (clear plan for each class), informative, high energy, and use class time wisely. If I had to be honest the class has been easy but, I need that in my life right now. On the other hand you are giving us the option to push our selves and make it as hard as we want it to be. I have pushed myself but I wish I had more time. Book: The book is great, really easy to read. David McFarland keeps everything simple and has some nice world examples.
I think you are doing a great job. I don’t really have any constructive criticism to give on what you could do to make the class better because I am enjoying the difficulty of the assignments and I enjoy coming to class.
Possibly being able to see previous semesters’ webpages to get ideas for people who are not as creative.
I think the assignments are hard now. Assignment 6 and this current assignment are really hard.

Assignment No. 5 Issues

many people didn’t submitted weblab.cs.uml.edu URLs rather than github.io URLs
I definitely said in class that you were to upload your assignments to GitHub
we did not take off points for failing to do so this time, but we definitely will on Assignment No. 6

Upcoming Quiz on Chapters 1-4 of the JavaScript & jQuery text

Tuesday or Thursday of next week
I will announce the day using Piazza

Class Notes

Related reading for this class: JS&jQ:TMM Ch. 4, 5 & 9

A Whirlwind Look at JavaScript (continued)

Key concept: FUNCTIONS ARE SIMPLY EXECUTABLE VARIABLES

therefore, you can do some very funky things ...
var sum_v5 = function() { sum_v5 = function() { return "I'm bad!" } ; return "I'm good!" ; } ; document.writeln( sum_v5() ) ; document.writeln( sum_v5() ) ;

Run the above function

Functions as First-Class Objects (Stefanov, Ch. 4)

they can be dynamically created at runtime
they can be assigned to variables
their references can be copied to other variables
they can be augmented
except for a few special cases, they can be deleted
they can be passed as arguments to other functions
they can also be returned by other functions
they can have their own properties and methods

Using Forms with Assignment No. 6

Creating Forms (partial review from last class)

purpose
- many, some not so obvious
- how have you seen forms used?
form tag
- method attribute: post or get
- action attribute: a URL for the program or script or page that will process the form
input tag
- type attribute: button, checkbox, file, hidden, image, password, radio, reset, submit, or text
  - all except hidden and image display elements with which the user can interact
  - hidden passes information to the form processor outside the user’s control
  - image is really a variant of the submit tag (discussed below)
- value attribute: the component’s corresponding default text (changed when the user enters new text)
- select attribute: controls whether the element is initially selected (changed when the user clicks radio buttons, check boxes, etc.)
- id attribute: the component’s name for referencing via scripts within the current page
- name attribute: the component’s name for referencing via scripts in the form processor page
- thus it is important to include both id and name attributes even though they’re both the same
  - example: <input type="text" name="lastname" id="lastname" size="40">
select tag
- option tags
submit and reset tags

Using Buttons

purpose: to control access to form fields
formadd.htm (runnable Web page)

Processing Form Data with JavaScript

Working with the location object

http://jesseheines.com/~heines/91.461/91.461-2015-16f/461-lecs/lecture12.jsp?one=1&two=2&three=3

location.search
location.search.substr(1)
location.search.substr(1).split("&")
location.search.substr(1).split("&").length
location.search.substr(1).split("&")[0].split("=")
location.search.substr(1).split("&")[1].split("=")
location.search.substr(1).split("&")[0].split("=")[0]
location.search.substr(1).split("&")[0].split("=")[1]
obj = {} ;
obj

Object{ }

obj[location.search.substr(1).split("&")[0].split("=")[0]] = location.search.substr(1).split("&")[0].split("=")[1]
obj
- Object{ one = "1" }

Demonstration

<!-- show the user the complete location string -->
<h4>Complete Location String</h4>
<blockquote>
  <div id="LocationString"></div>
</blockquote>
<script type="text/javascript">
  $("#LocationString").html( location.toString() ) ;
</script>

<!-- show the user the search part of the location string -->
<h4>Search String</h4>
<blockquote>
  <div id="SearchString"></div>
</blockquote>
<script type="text/javascript">
  if ( location.search !== "" ) {
    $("#SearchString").html( location.search ) ;
  } else {
    $("#SearchString").html( "(<em>no search string</em>)" ) ;
  }
</script>

<!-- output the parsed search string in two formats -->
<h4>Output</h4>

<!-- placeholder for outputting the parsed search string in JSON format -->
<h5>Format #1: Using the JSON.stringify function</h5>
<blockquote>
  <div id="DemoOutput1"></div>
</blockquote>

<!-- placeholder for outputting the parsed search string as an array of name/value pairs -->
<h5>Format #2: Stepping through each key in turn</h5>
<div id="DemoOutput2" style="margin-left: 15px"></div>

<!-- populate the placeholders -->
<script type="text/javascript">
  // define an empty object
  obj = {} ;
  // populate that object with the paramaters passed to this page
  for ( var k = 0 ; k < location.search.substr(1).split("&").length ; k++ ) {
    obj[location.search.substr(1).split("&")[k].split("=")[0]] = 
        location.search.substr(1).split("&")[k].split("=")[1] ;
  }
  
  //// Output Style #1
  // "prettyprint" the object using the JSON.stringify function
  $("#DemoOutput1").html( "<code>" + JSON.stringify( obj ) + "</code>" ) ;

  //// Output Style #2
  // initialize an output string
  var output = "" ;
  // test for empty object
  if ( JSON.stringify( obj ) !== "{}" ) {
    // initialize an ordered list in the output string
    output += "<ol>" ;
    // display each property (key) in the constructed object and its value
    for( var key in obj ) {
      if ( obj.hasOwnProperty( key ) ) {
        output += "<li><code>" + key + " => " + obj[key] + "</code></li>" ;
      }
    }
    // close the ordered list
    output += "</ol>" ;
  } else {
    output = "<span style='margin-left: 25px'>(<em>no search string</em>)</span>" ;
  }
  // output the constructed HTML
  $("#DemoOutput2").html( output ) ;
</script>

Input

http://jesseheines.com/~heines/91.461/91.461-2015-16f/461-lecs/lecture13.jsp

Output

Live Demo

Global Methods (Functions) — Deitel Fig. 11.13 on p. 370 (1st ed.), Fig. 10.8 on p. 341 (2nd ed.), Fig. 9.9 on p. 345 (4th ed.)

http://msdn.microsoft.com/en-us/library/c6hac83s(VS.85).aspx
just about everything you can think of is available
I also find the Object reference page extremely useful: http://msdn.microsoft.com/en-us/library/htbw4ywd(VS.85).aspx

Reference: Deitel, P.J. & Deitel, H.M. Internet & World Wide Web How To Program, 4th edition. pp. 345-346.

Global
Function Description

escape Takes a string argument and returns a string in which all spaces, punctuation, accent characters and any other character that is not in the ASCII character set are encoded in a hexadecimal format that can be represented on all platforms.

unescape Takes a string as its argument and returns a string in which all characters previously encoded with escape are decoded.

eval Takes a string argument representing JavaScript code to execute. The JavaScript interpreter evaluates the code and executes it when the eval function is called. This function allows JavaScript code to be stored as strings and executed dynamically. Note: It is considered a serious security risk to use eval to process any data entered by a user because a malicious user could exploit this to run dangerous code.

isFinite Takes a numeric argument and returns true if the value of the argument is not NaN, Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY (values that are not numbers or numbers outside the range that JavaScript supports)—otherwise, the function returns false.

isNaN Takes a numeric argument and returns true if the value of the argument is not a number; otherwise, it returns false. The function is commonly used with the return value of parseInt or parseFloat to determine whether the result is a proper numeric value.

parseFloat Takes a string argument and attempts to convert the beginning of the string into a floating-point value. If the conversion is unsuccessful, the function returns NaN; otherwise, it returns the converted value (e.g., parseFloat("abc123.45") returns NaN, and parseFloat("123.45abc") returns the value 123.45).

parseInt Takes a string argument and attempts to convert the beginning of the string into an integer value. If the conversion is unsuccessful, the function returns NaN; otherwise, it returns the converted value (e.g., parseInt("abc123") returns NaN, and parseInt("123abc") returns the integer value 123). This function takes an optional second argument, from 2 to 36, specifying the radix (or base) of the number. Base 2 indicates that the first argument string is in binary format, base 8 indicates that the first argument string is in octal format and base 16 indicates that the first argument string is in hexadecimal format.

Global Function	Description
`escape`	Takes a string argument and returns a string in which all spaces, punctuation, accent characters and any other character that is not in the ASCII character set are encoded in a hexadecimal format that can be represented on all platforms.
`unescape`	Takes a string as its argument and returns a string in which all characters previously encoded with escape are decoded.
`eval`	Takes a string argument representing JavaScript code to execute. The JavaScript interpreter evaluates the code and executes it when the eval function is called. This function allows JavaScript code to be stored as strings and executed dynamically. Note: It is considered a serious security risk to use `eval` to process any data entered by a user because a malicious user could exploit this to run dangerous code.
`isFinite`	Takes a numeric argument and returns `true` if the value of the argument is not `NaN`, `Number.POSITIVE_INFINITY` or `Number.NEGATIVE_INFINITY` (values that are not numbers or numbers outside the range that JavaScript supports)—otherwise, the function returns `false`.
`isNaN`	Takes a numeric argument and returns `true` if the value of the argument is not a number; otherwise, it returns `false`. The function is commonly used with the return value of `parseInt` or `parseFloat` to determine whether the result is a proper numeric value.
`parseFloat`	Takes a string argument and attempts to convert the beginning of the string into a floating-point value. If the conversion is unsuccessful, the function returns `NaN`; otherwise, it returns the converted value (e.g., `parseFloat("abc123.45")` returns `NaN`, and `parseFloat("123.45abc")` returns the value `123.45`).
`parseInt`	Takes a string argument and attempts to convert the beginning of the string into an integer value. If the conversion is unsuccessful, the function returns `NaN`; otherwise, it returns the converted value (e.g., `parseInt("abc123")` returns `NaN`, and `parseInt("123abc")` returns the integer value 123). This function takes an optional second argument, from 2 to 36, specifying the radix (or base) of the number. Base 2 indicates that the first argument string is in binary format, base 8 indicates that the first argument string is in octal format and base 16 indicates that the first argument string is in hexadecimal format.

The Math Package

http://msdn.microsoft.com/en-us/library/b272f386(VS.85).aspx
random number generator and various other very useful functions
see also http://underscorejs.org and

Scaffolding, Decorating, and Activating

HTML5 CSS3 JavaScript jQuery

Photo Credits

Building Scaffolding — http://blog.fieldid.com/wp-content/uploads/scaffolding_example.jpg

Pine Tree — http://www.northshoregarden.com/wp-content/uploads/2011/12/pine_tree-11921.jpg

Child Decorating Christmas Tree — http://www.wallcoo.net/holiday/2008_family_christmas_fun_1920x1200/images/Family_Christmas_fun_094_008.jpg

Christmas Celebration — http://www.wallcoo.net/holiday/2008_Family_Christmas_celebration_1920x1200/wallpapers/1920x1200/Family_Christmas_Celebration_FAN2019853.jpg

Lots & Lots of Presents — http://blogs.babble.com/being-pregnant/files/2011/12/stxmco001christmas_tree_and_presents1.jpg

As you surely realize by now, JavaScript is no longer your father’s (or your grandfather’s) toy language for making little things happen change on web pages

JavaScript is now a full-bodied language, deceptively simple but with a whole lotta gotchas
yes, it’s object-oriented, but not quite in the same way as C++ and Java
rather, JavaScript is a prototype language, so things get funky rather quickly

The key to using JavaScript, however, is not the language itself

rather, the key is understanding the browser DOM, which is its Document Object Model
the DOM is a huge tree of every object — and every attribute for every object — on a web page
this is made considerably easier using jQuery

Anatomy of a jQuery Sstatement

[figure source: jQuery: Novice to Ninja, by Castledine & Sharkie, p. 12]

the jQuery function or its alias
selectors — 100% CSS compatible
actions — functions
parameters — sometimes series of parameters, might also be object literals

Examples

The following examples and page references in orange are from jQuery: Novice to Ninja, by Castledine & Sharkie

these examples complement the ones in JavaScript & jQuery: The Missing Manual by David Sawyer McFarland
publisher’s book website: http://www.sitepoint.com/books/jquery1
authors’ websites: http://www.mrspeaker.net and http://au.linkedin.com/in/craigsharkie
code archive containing these and additional examples: http://sitepoint-code-archive.s3.amazonaws.com/jquery1-code.zip

Examples in jQuery: Novice to Ninja and JS&jQ:TMM Ch. 4

$(document).ready( function() { ... } ) ; // pp. 18-19
console.log( $('#celebs tr').length) ) ; // p. 23
console.log( $('#celebs tbody tr').length) ) ; // adding semantics for specificity, p. 23
console.log( $('#celebs tbody tr:even').length) ) // using a filter, p. 24
var fontSize = $('#celebs tbody tr:first').css('font-size') ; // p. 25
- this syntax gets (reads) a CSS property
- what gets returned if the font-size is not specified?
- what units apply to the value returned?
- rendering and calculated styles
$('#celebs tbody tr:even').css('background-color', '#dddddd') ; // p. 26
- this syntax sets (writes) a CSS property
$('#celebs tbody tr:even').css('background-color', '#dddddd') ; // p. 27
$('#celebs tbody tr:even').css('color', '#66666') ;
- these statements set two CSS properties
- note the quotes — it’s best to include them
- if you don’t, you must use camel case syntax, e.g., backgroundColor instead of background-color
$('#celebs tbody tr:even').css('background-color', '#dddddd').css('color', '#66666') ;
- these statements set two CSS properties using chaining
- note that chaining occurs from left to right

$('#celebs tbody tr:even').css(  // p. 28
  { 'background-color' : '#dddddd',
    'color' : '#666666' }  ) ;

these statements also set two CSS properties, but using an object literal

Adding and removing classes (pp. 30-31)

```
$('div').addClass('class_name') ; 
```
- adds one class

$('div').addClass('class_name1 class_name2 class_name3') ;

adds multiple classes

.zebra { /* a class for zebra striping */
  background-color: #dddddd ;
  color: #666666 ;
}

$('#celebs tr:even').addClass('zebra') ;
- adds the class to the selected elements
$('#celebs tr.zebra').removeClass('zebra') ;
- removes the class from the selected elements

Form Events (JS&jQ:TMM p. 263-268)

submit — triggered when the form is submitted
- useful for validation, because this even occurs before the form’s action is taken
focus — triggered when a control gains focus
- can also be used to set focus to a control
blur — triggered when a control loses focus
click — triggered when a control is clicked
change — triggered whenever a control is changed
- useful in text boxes
note that these events are not triggered if a control is disabled

Basic Validation using JavaScript and jQuery

Using the jQuery submit() event handler

1  $(document).ready( function() {
2    tblInitializer.initialize() ;
3    tblGenerator.populateMultiplicationTable_jQuery( "#placeholder", true ) ;
4    $('#frm').submit( function() {   // trap the submit event *before* the action is executed
5      return validateForm() ;  // true = allow action to proceed, false = inhibit action
6    } ) ;
7  } ) ;  // end ready

Writing validation tests

retrieving and testing form field data
- the jQuery val() function
- the jQuery html() function
- the JavaScript isNaN() function
retrieving the contents of non-textual controls
using the return statement efficiently
- ordering your tests efficiently
writing helper functions
- the $( '#' + str ) trick
displaying error message on the screen
- consistent location
- other visual clues
- setting focus to the erroneous field

Remember the three pillars of good error messages:

identify where the error occurred — direct the user to the precise location of the error
identify why the error occurred — explain exactly what the problem is
suggest how to correct the error — provide information to guide the user to correcting his/her entry

Initializing form fields

issue: when the form is reloaded, the form’s text fields will be cleared
- “visual integrity”
- if the user wants to regenerate the table, he or she probably won’t want to change them all
solution: put the values read from the passed parameters back into the form’s text fields as defaults
suggestion: use this as a way to test that you are reading the passed parameters properly
best practice: don’t assign the passed values to the variables that control the table’s display until you know they’re valid
what constitutes valid?
- first, and most obviously, that they are numbers
  - use the JavaScript isNaN() function?
- however, even before that you should check whether the parameter exists
- you might also check that xBegin <= xEnd and yBegin <= yEnd

This is document http://jesseheines.com:8080/~heines/91.461/91.461-2015-16f/461-lecs/lecture13.jsp. It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines. All rights reserved. May be freely copied or excerpted for educational purposes with credit to the author.

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines