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

HTML5 Input Types

Thursday, October 29, 2015

A video of this classis (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

Academic Calendar Note:  Enrollment opens for Spring 2016 courses per enrollment appointments shown on SiS on Monday, November 2

• we now have over 600 undergraduate CS majors
• if you want to get into the courses you need and want, you need to register as early as possible
• you of course need to see your advisor to get your advising hold flag lifted before you can register, so I recommend that you do that ASAP

$.getJSON() challenge

• can you write your own rudimentary JSON validator?

Class Notes

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

Anonymous Functions  (JS&jQ:TMM, pp. 148-150)

As noted earlier, anonymous functions are critical in places that expect (in C/C++ terms) pointers to functions

We have seen anonymous functions before, and they will be even more important when we look at events next week (JS&jQ:TMM Ch. 5)

The textbook uses the each() function to demonstrate how anonymous functions are used with jQuery

[figure source:  JavaScript & jQuery: The Missing Manual, by McFarland, fig. 4-6, p. 148]

Figure Caption:  jQuery’s each() function lets you loop through a selection of page elements and perform a series of tasks on each elemement.  The key to using the function is understanding anonymous functions.

N.B.  In the example at the bottom of page 148, the author uses the alert() function:

$('img').each( function() {
  alert( 'I found an image' ) ;
});

• instead, I recommend using console.log( 'I found an image' ) ;
• this will avoid your having to click the OK button for every image on your page

HTML5 Input Types

Reference:  HTML5: The Missing Manual by Matthew MacDonald, Chapter 4

New type attributes for the input tag

• very few of these work in Firefox, try Chrome and Opera
• color — palette selector
• date — calendar popup
• datetime — calendar & clock popup
• datetime-local — calendar & clock popup
• email — implies validation
• month — calendar popup restricted to selecting entire months
• number — spinner
• range — slider
• search — meant to contain keywords
• tel — mobile only
• time — clock popup
• url — adds http:// if not supplied
• week — calendar popup restricted to selecting entire weeks

Browser support for these types is all over the map

• see http://wufoo.com/html5/
  • this table is undoubtedly more up to date than the one on page 127 of MacDonald’s book
• interestingly, the greatest support is in Opera, of which the latest version as of October 23, 2013, is 17.0
• visit the following URLs using different browsers, especially Opera
  • http://miketaylr.com/code/input-type-attr.html
  • http://miketaylr.com/code/html5-forms-ui-support.html
  • http://www.coreservlets.com/html5-tutorial/input-types.html

Sample programs to explore on your own  (PDF containing all code listings)

Important Note:  Only a few of these work in Firefox.  Use Google Chrome or Opera.

• datalist
  • provides auto-completion in a dropdown list
  • notice that the code after the closing </select> tag is not executed if the datalist is fully supported
  • run this program in Safari to see the “degrade” code
• progress bar and meter
• form with new input types and attributes
  • original
  • enhanced
• in-page editing
  • element editing
  • page editing

Dynamic Progress Bar Demo

• run program
• view code listing (PDF)

JavaScript timers in this demo — www.w3schools.com/js/js_timing.asp

1. Declare a variable that will hold the timer instance.

   var myTimer ;

2. Define a function that will be called each time the time “pulses.”

   var TimerPulse = function() {
  // do whatever you want here
   }

3. Initiate the timer with a statement of the form:

   myTimer = window.setInterval( TimerPulse, 500 ) ; 
// window. is optional, 2nd parameter is in milliseconds

4. Cancel the timer with a statement of the form:

   window.clearInterval( myTimer ) ; 
// window. is optional

Hiding and revealing elements with jQuery

Source:  jQuery: Novice to Ninja, by Castledine & Sharkie, pp. 32-37

• hiding (pp. 32-33)
  • <input type="button" id="hideButton" value="Hide Disclaimer" />
    • a button to hide another element

  • $('#hideButton').click( function() {
      $('#disclaimer').hide();
    }); 

    • the hide button click event handler
    • what is this type of function called?

    This is the first disclaimer paragraph.  Watch it carefully!

• $('#hideButton').click( function() {
    $(this).hide(); // a curious disappearing button
  });

  • $(this) is the “target” of the action, that is, the element that caused the event to be fired
• a word on anonymous functions
  • the following will not work:
    

       $('#hideButton').click(       // caution: anti-pattern
          $('#disclaimer').hide() ;
        ); 

  • the reason this will not work is that the argument to the click function must be (in C/C++ terms) a pointer to a function
  • therefore, we must wrap the body of the click handler in an anonymous function
  • this topic is revisited below using the example on JS&jQ:TMM pp. 148-150
• revealing (p. 34)
  • <input type="button" id="showButton" value="show" />
    • a button to show the element again

  • $('#showButton').click( function() {
      $('#disclaimer').show();
    });

    • the show button click event handler

    This is the second disclaimer paragraph.

• toggling (pp. 34-36)
• <input type="button" id="toggleButton" value="toggle" />
  • a button to both show and hid an element

• $('#toggleButton').click( function() {
      if ($('#disclaimer').is(':visible')) {
        $('#disclaimer').hide();
      } else {
        $('#disclaimer').show();
      }
  });

  • note the is action
  • note the :visible pseudo-selector
  • this is version 1 ... below is version 2

  This is the third disclaimer paragraph.

• $('#toggleButton').click( function() {
    $('#disclaimer').toggle();
  });

  • one function does both
  • state is automatically remembered
  • this is version 2

  This is the fourth disclaimer paragraph.

• $('#toggleButton').click( function() {
    $('#disclaimer').toggle();
    if ($('#disclaimer').is(':visible')) {
      $(this).val('Hide');
    } else {
      $(this).val('Show');
    }
  });

  • this is version 3
  • note that addition of human factors: what do the statements inside the if do?

  This is the fifth disclaimer paragraph.

• the concept of progressive refinement (pp. 36-37)