Notes for Class No. 11

Introduction to JavaScript (continued) and Introduction to Forms

Tuesday, October 6, 2015

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

Handouts and Materials

Assignment No. 5 on Formatting Text

Openings / Announcements / Reminders

Long Tran — please see me

Modification to Assignment No. 5 — as posted on Piazza

Thank you to Madhu for identifying a problem with the JavaScript code that I gave you for Assignment No. 5. When you run my code on a local Windows or Macintosh system, it works fine. But when you run it on weblab.cs.uml.edu (a Linux system), for some reason that I do not understand jQuery.get() returns the JSON data as a string rather as an actual JSON object. I don’t know if this is a difference in operating system defaults or a problem caused by how connections to weblab.cs.uml.edu is configured or something else.

However, I am happy to report that the problem can be solved by adding an additional parameter to the jQuery.get() function call that explicitly tells the server that you want JSON data. That parameter is simply the string "json" (including the quotes). Here is the modified code that you should use:

<!-- load the JSON file containing your text -->
<script type="text/javascript">
  // this function will run after the body has been loaded
  jQuery(document).ready( function() {
    jQuery.get( "GettysburgAddress-v2.json", function( data ) {
      placeContent( data ) ;  // construct output from the data read
    }, "json" );  // be sure to include this third parameter for weblab.cs.uml.edu
  });
</script>

<!-- script to place JSON text in the placeholder (div#content) on the page -->
<script type="text/javascript">
  // N.B.  This version *does* apply the CSS.
  function placeContent( story ) {
    var strContent = "";

    // create dynamic content from JSON
    strContent += "<h1 class='title'>" + story.title + "</h1>" ;
    strContent += "<h2 class='author'>by " + story.author + "</h2>" ;
    strContent += "<h2 class='authorsTitle'>" + story.authorsTitle + "</h2>" ;
    strContent += "<h3 class='locationLabel'>delivered at:</h3>" ;
    strContent += "<h3 class='location'>" + story.location + "</h3>" ;
    strContent += "<h3 class='date'>" + story.date + "</h3>" ;

    // loop through all the paragraphs and sentences
    for ( var para = 0 ; para < story.text.paragraphs.length ; para++ ) {
      strContent += "<p>" ;
      for ( var sent = 0 ; sent < story.text.paragraphs[para].length ; sent++ ) {
        strContent += story.text.paragraphs[para][sent] + "  " ;
      }
      strContent += "</p>" ;
    }

    // place dynamic content on page
    // document.getElementById( "content" ).innerHTML = strContent ;
    $("#content").html( strContent ) ;
  }
</script>

This code also differs just slightly from what I gave you earlier by eliminating the global variable story. Instead, it passes the JSON data read from the file directly to the placeContent function. This approach is slightly more efficient and has the advantage of eliminating a global variable, which is almost always a good thing to do. (Thanks to Curran Kelleher for this enhancement.) Note that this new approach requires that a story parameter be added to the placeContent function.

One last thing: it took me almost two hours to figure out the problem that Madhu identified, but ultimately the answer was in the jQuery documentation. See page:

https://api.jquery.com/jquery.get/

This isn’t the easiest documentation to understand, but it is actually better that the documentation you will find for other JavaScript libraries.

On Coding Styles

See the Piazza posts by Curran Kelleher and me under “Why Asynchronous?”

code can almost always be improved
obfuscated code cannot be maintained
- see Curran’s examples

Algorithm for sorting an array of JavaScript objects

Code posted on StackOverflow at http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects

var sort_by = function(field, reverse, primer){

   var key = primer ? 
       function(x) {return primer(x[field])} : 
       function(x) {return x[field]};

   reverse = !reverse ? 1 : -1;

   return function (a, b) {
       return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
     } 
}

My version

// Sorting an array of JavaScript objects // http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects // // Here's a more flexible version, which allows you to create reusable sort functions, // and sort by any field. // // Example calls: // // Sort by price high to low // homes.sort(sort_by('price', true, parseInt)); // // // Sort by city, case-insensitive, A-Z // homes.sort(sort_by('city', false, function(a){return a.toUpperCase()})); // // ---- C:\H-Drive\public_html\91.212\91.212-2014-15s\grading\Reflections.js // [251] names.sort( sort_by( "name" ) ) ; // [428] respondents.sort( sort_by( "namelastfirst", true ) ) ; // // added by JMH on May 24, 2013 at 2:35 PM // // documentation by JMH // @param field name of field on which to sort // @param reverse true to sort in natural (typically ascending) order, false to reverse sort // @param primer function to perform on field to sort before sorting [optional] // @return a sort function that is passed to the built-in JavaScript sort function, // thereby essentially passing the sort function a comparison function var sort_by = function( field, reverse, primer ) { // pre-process the key to sort if desired var key = function( x ) { return primer ? primer( x[field] ) : x[field] } ; // set default sort order if ( typeof( reverse ) === "undefined" ) { reverse = true } ; // return a function that extracts the two keys to compare and sort on and then // defines the comparison function on those two keys return function ( a, b ) { // extract and preprocess (optional) the two keys var A = key( a ) , B = key( b ) ; // the following is the comparison function, with three cases: // (1) A < B returns -1 times the result of the reverse computation (below) // (2) A > B returns +1 times the result of the reverse computation (below) // (3) A = B returns 0 times the result of the reverse computation (below) // the reverse computation // (1) defines an array containing -1 and +1 // (2) since reverse can be anything (it does not have to be a Boolean), // !reverse makes it true if it is not defined and false if it is // (3) but since this is the reverse of what we want, !!reverse switches it // so that it is false if it is not defined and true if it is // (4) the + sign converts true or false to +1 or 0, respectively // (5) this result is used as an index into the [-1,+1] array to return // -1 or +1 as required return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse] ; } }

A rather amazing look at JavaScript

http://coodict.github.io/javascript-in-one-pic/

sent to me by former student Mark McGrotty
I wanted to communicate with the author to help him fix a problem
by looking at his source code, I was able to track down his GitHub repository at http://github.com/rainyear
there I found his email address and was able to write to him
he is a student of Zhejiang University in Hangzhou Province, China
his real name in Chinese is 孙雨生, which Prof. Liu told me is Yusheng Sun in English

Class Notes

Related reading for this class: JS&jQ:TMM Ch. 1-3

Introduction to JavaScript (continued)

Review from last class ...

Client-side computing

where JavaScript runs
how JavaScript works
what you need to know
- the JavaScript language
  - relationship to Java — really very little!
- the browser DOM = Document Object Model
  - this is considerably more involved than learning the language
- the browser event model
  - this is perhaps the most difficult aspect because it involves some new concepts of how users interact with computers

New material begins here ...

putting things together
- for example, validating forms
- we will see many additional examples, such as generating lists dynamically
using cookies

Basic structure and use

the script tag
- the type="text/javascript" attribute
- MIME type = “Multipurpose Internet Mail Extensions”
  - check out http://whatis.techtarget.com for a terrific resource on computer terms
  - direct link to the MIME entry — http://searchsoa.techtarget.com/definition/MIME
- MIME type references
all JavaScript in a file forms a single program entity
- this has serious implications — look up “hoisting,” a topic that we will tackle another day
considerations for old browsers — possibly not worth the bother today
there is no main function, executes in-line with HTML
triggering with the onLoad property of the BODY tag
- this is now better done with jQuery’s (and other JavaScript libraries’) “document ready” function (syntax differs by library)
using the javascript: protocol in your browser’s address field
using the browser debuggers

A Whirlwind Look at JavaScript

Background work to prepare yourself for Assignment No. 6

watch Curran’s Intro to JavaScript video on YouTube
- https://www.youtube.com/watch?v=zIpA8k167gU
be sure to read Chapters 1-3 in the JavaScript text (required for this course)

Please Note

our discussion today deals with “straight” JavaScript
some of the techniques we discuss are better done with JavaScript libraries such as jQuery, which we will obviously study in detail
but it’s important to understand the underlying structures on which such libraries are built

Basic Statements

document.write and document.writeln
- but in general we will not use these in our code
embedding HTML in output strings
using single and double quotes and escaping characters
using method window.alert(), especially for debugging
- better to use console.log()

Variables

the var statement — no declared types!
- use Hungarian notation
- first 1-4 characters represent the data type
- examples: str, n or int, arr, plus prefixes for various object types
but there really are types internally! therefore you need a few tricks to do type conversion...
- using "" to force string types
- function parseInt to convert a string read from a field to an integer so it can be used in calculations
- to convert a number to a string, just concatenate ""

Scope

unlike C / C++ / Java, curly brackets do not delineate scope
all variables declared outside of functions are global
in addition, all variables declared without var are global, even if they’re inside of functions
- example: for ( k = 0 ; k < 10 ; k++ ) { ... }
  versus: for ( var k = 0 ; k < 10 ; k++ ) { ... }
- what happens if the above statements are used in global scope vs. what happens in function scope?
we will see ways to control scope and create local variables

Control structures

think C++ and you’ll sometimes be closer than thinking Java
don’t forget you’re programming and don’t forget your programming!
documentation with // or /*...*/

Loops

again think C++

JavaScript and types — http://www.pollev.com

what is 3 + 5 ?
what is "k" + "s" ?
what is "x" + 7 ?
what is "8" + "4" ?
what is "8" + 4 ?
what is 8 + "4" ?
OK, so is 6 == 6 ?
is 7 == "7" ?
how about 7 === "7" ?
how about "" == 0 ?
how about "" != 0 ?
how about "" !== 0 ?
what’s going on here?

Functions

no declared return types, just the function statement
no types in parameter (argument) lists
- again use Hungarian notation
- document each parameter, perhaps putting each on a single line
- no built-in overloading, but you can accomplish overloading by checking the number and types of parameters (discussed below)
  - calls aren’t even checked for the specified number of parameters
unsupplied parameters default to null, sort of ...
- if you test an unsupplied parameter against null using ==, you get true, but you can’t differentiate that from a truly null parameter
- if you test an unsupplied parameter against null using ===, you get false, which allows you to differentiate unsupplied parameters from truly null parameters
  - there is also !==
- a better test is to use the typeof method:
  if ( typeof( param ) === "undefined" ) { ... }
  unambiguously returns true for undefined parameters
- demonstration: TestMissingParameters.html
  - function is defined as
    function test( a, b, c ) { ... }
    or
    var test = function( a, b, c ) { ... }
the arguments object holds all the parameters pass to a function
- arguments is “array-like,” but it is not an instance of the Array type
- arguments.length returns the number of parameters passed to a function
- the bottom line is that “named arguments are a convenience, not a necessity” (Zakas, Professional JavaScript for Web Developers, p. 81)
declare all functions in the page’s head section
there is a return statement, but again there is no declared type for the function
thus you can do some very sloppy things, which I certainly don’t advise
- again, don’t forget you’re programming and don’t forget your programming!

Function declarations vs. function expressions

function sum_v1( n1, n2 ) { return n1 + n2 ; } ; document.writeln( sum_v1( 1, 2 ) ) ;
var sum_v2 = function( n1, n2 ) { return n1 + n2 ; } ; document.writeln( sum_v2( 3, 4 ) );
- var sum_v2a = function( n1, n2 ) { return "sum = " + n1 + n2 ; } ; document.writeln( sum_v2a( 3, 4 ) ) ;
- var sum_v2b = function( n1, n2 ) { return "sum = " + ( n1 + n2 ) ; } ; document.writeln( sum_v2b( 3, 4 ) ) ;
var sum_v3 = function () { return "sum = " + ( arguments[0] + arguments[1] ) ; } ; document.writeln( sum_v3( 5, 6 ) ) ;
var sum_v4 = function () { var sum = 0 ; for ( var k = 0 ; k < arguments.length ; k++ ) { sum += arguments[k] ; } return "sum = " + sum ; } ; document.writeln( sum_v4( 7, 8, 9 ) ) ;

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 all of the above functions

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

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

Processing Forms with JavaScript

Working with the location object

http://jesseheines.com/~heines/91.461/91.461-2015-16f/461-lecs/lecture11.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

Input

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

Output

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines