•   Course Home  
•   Information  
  • Syllabus
  • Roster
  • Instructor

  ---

  • Academic Calendar
•   Class Notes  
  • List of Current & Completed Classes
  • List of Future Classes

  ---

  • Class Videos
•   Assignments  
  • Assignment No. 1 — Thursday, September 3, 2015
  • Assignment No. 2 — Thursday, September 10, 2015
  • Assignment No. 3 — Tuesday, September 22, 2015
  • Assignment No. 4 — Tuesday, September 29, 2015
  • Assignment No. 5 — Tuesday, October 6, 2015
  • Assignment No. 6 — Tuesday, October 20, 2015
  • Assignment No. 7 — Thursday, November 5, 2015
  • Assignment No. 8 — Thursday, November 19, 2015
  • Assignment No. 9 — Wednesday, December 9, 2015

  ---

  • Assignment Submission Form
  • Complete List of Assignments
•   Resources  
  • Poll Everywhere

  ---

  • Textbooks
  • References & Tutorials
  • Cool Stuff
  • Twitter Tricks
  • Of Interest
  • Tools, Utilities, IDEs, & Test Environments
  • Writing Resources

  ---

  • Complete List of Resources

Notes for Class No. 16

Introduction to jQuery (continued)

Tuesday, October 27, 2015

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

Handouts and Materials

Assignment No. 7 is now posted

• this assignment requires material covered in Chapter 9 of the JavaScript and jQuery text

Openings / Announcements / Reminders

Faculty Advising Period began yesterday

• if you plan to graduate in May or August 2016, you must fill out a Declaration of Intent to Graduate (DIG) form this semester
• email Prof. Adams (David_Adams1@uml.edu) to request a DIG form and then meet with him to review it
  • note to 1 after Prof. Adams’s name in his email address

Class Notes

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

Basic Validation using JavaScript and jQuery  (continued)

Review from last class ...

Remember that if you want to write to document objects, they must first exist

• therefore, most such statements must be placed in the jQuery $(document).ready callback function

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

In the above code,

• the anonymous function is a parameter passed to the jQuery $(document).ready function
• the jQuery $(document).ready function is an event handler
• the anonymous function is a callback function, that is, a function that is called when the event occurs

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

New material begins here ...

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

Difference between JavaScript object literal notation and JSON

• reference:  stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation
• “JSON is a subset of JavaScript object literal notation”
  • “In other words, valid JSON is also valid JavaScript object literal notation but not necessarily the other way around.”
• “the JSON specification is a syntax for encoding data as a string”
• www.json.org states:  “JSON (JavaScript Object Notation) is a lightweight data-interchange format.”

In JSON,

• The keys must be strings, that is, enclosed in double quotes (")
  • note that in Chapter 11 of our book they are *not* enclosed in double quotes
  • unfortunately, the book is simply wrong
• The values can be one of the following
  • a string
  • a number
  • an array
  • another JSON structure
  • true
  • false
  • null

From en.wikipedia.org/wiki/JSON

JSON’s basic types are:

• Number (double precision floating-point format in JavaScript, generally depends on implementation)
• String (double-quoted Unicode, with backslash escaping)
• Boolean (true or false)
• Array (an ordered sequence of values, comma-separated and enclosed in square brackets; the values do not need to be of the same type)
• Object (an unordered collection of key:value pairs with the ':' character separating the key and the value, comma-separated and enclosed in curly braces; the keys must be strings and should be distinct from each other)
• null (empty)

Thus, JSON has a much more limited syntax than JavaScript object literals, including:

• key values *must* be quoted
• strings must be enclosed in double quotes ("), not single quotes (')
• the range of values is more limited, for example, functions are not allowed
• comments are not allowed
  • but there’s a trick to adding comments — what can you think of?

The definitive specification of JSON syntax was written by Douglas Crockford in July 2006

http://tools.ietf.org/html/rfc4627

Addendum at the same StackOverflow URL:  Note that many people believe that JSON must be enclosed in curly brackets {}, but this is not true

• curly brackets must enclose JavaScript object literals
• the top-level JSON structure may also be an array, enclosed in square brackets []

Unfortunately, the code in the book (starting on p. 371) confuses all of these issues

• the code in the book is simply wrong
• it is not valid JSON, it is JavaScript object literal notation
• if the code in the book is returned by a server-side program, the $.getJSON() function will fail