•   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. 12

Introduction to JavaScript and Introduction to Forms (continued)

Thursday, October 8, 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

Remember:  We do not have class next Tuesday, as that is a Monday class schedule

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

Class Notes

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

A Whirlwind Look at JavaScript  (continued)

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

1. location.search
2. location.search.substr(1)
3. location.search.substr(1).split("&")
4. location.search.substr(1).split("&").length
5. location.search.substr(1).split("&")[0].split("=")
6. location.search.substr(1).split("&")[1].split("=")
7. location.search.substr(1).split("&")[0].split("=")[0]
8. location.search.substr(1).split("&")[0].split("=")[1]
9. obj = {} ;
10. obj
• Object{ }
11. obj[location.search.substr(1).split("&")[0].split("=")[0]] = location.search.substr(1).split("&")[0].split("=")[1]
12. 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/lecture12.jsp

Output

Live Demo