Session 11 - Javascript, Part 4

Harvard Extension School  
Fall 2022

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. This week's work: JavaScript Choose Your Own Adventures
  2. Forms - Basic
  3. Accessibility: Label Element
  4. HTML5 forms
  5. Maps
  6. Google Maps JavaScript API
  7. Map with Several Markers
  8. Maps - Leaflet JS and Open Street Map

Session 11 - Javascript, Part 4, slide1
This week's work: JavaScript Choose Your Own Adventures, slide2
Forms - Basic, slide3
Forms, slide4
Forms, slide5
form, slide6
HTTP Method: Get vs. Post, slide7
Text Field, slide8
Radio Buttons, slide9
Checkbox, slide10
Textarea, slide11
Select and Option, slide12
Accessibility: Label Element, slide13
Accessibility: Label Element, slide14
Label Element - using id, label, for, slide15
Labels, slide16
fieldset and legend, slide17
optgroup, slide18
HTML5 forms, slide19
HTML5: email and url, slide20
HTML5: number and range, slide21
HTML5: date and time, slide22
Processing Forms on the server side, slide23
Maps, slide24
Embed a map created using Google's Tools, slide25
Google Maps JavaScript API, slide26
Placing a Marker, slide27
Marker with an Information Window, slide28
Map with Several Markers, slide29
Maps - Leaflet JS and Open Street Map, slide30

Presentation contains 30 slides

This week's work: JavaScript Choose Your Own Adventures

Pick two of:

Forms - Basic

Two elements for forms are in our list of most commonly seen elements:

Forms

Forms are the "front-end" for the HTTP Client to send information back to the HTTP Server. The submitted information is passed from the HTTP Server to a server-side program that processes the information and produces a response for the browser.

oreilly register for webcast form

Forms

Forms

form

Attributes
Each element within a form has a name associated with it. When the information is sent back to the server, the CGI program will access the information by name. Thus, the front-end form and the back-end program must use the same names.

While exploring forms, it is useful to use a simple server-side script that simply echo back the name/value information your form submitted (https://cs12.net/form/submit.php).

Example 11.1 - Simple form - Example 11.1

 <form method="post" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <button type="submit">Submit   </button>
 </form>

HTTP Method: Get vs. Post

get: form information sent from browser to server as part of query string, visible in the URL
post: form information sent from browser to server as part of HTTP body; not in URL
Example 11.2 - Simple for using 'get' - Example 11.2

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <button type="submit">Submit   </button>
 </form>
Example 11.3 - Simple form using 'post' - Example 11.3

 <form method="post" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <button type="submit">Submit   </button>
 </form>

Text Field

Example 11.4 - Form: text input - Example 11.4

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>
Year of Birth:
   <input type="text" name="year_of_birth" maxlength="4"/>

   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Radio Buttons

Example 11.5 - Form: radio buttons - Example 11.5

 <form method="get" action="https://cs12.net/form/submit.php">Email Address:
   <input type="text" name="email"/>

   <br/>
Please send me email updates:
   <br/>

   <input type="radio" name="sendupdates" value="yes" checked="checked"/>
yes
   <br/>

   <input type="radio" name="sendupdates" value="no"/>
no
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Checkbox

Example 11.6 - Form: checkboxes - Example 11.6

 <form method="get" action="https://cs12.net/form/submit.php">What ice cream do you like?
   <br/>

   <input type="checkbox" name="icecream" value="chocolate"/>
Chocolate
   <br/>

   <input type="checkbox" name="icecream" value="chocolate peanut butter"/>
Chocolate Peanut Butter
   <br/>

   <input type="checkbox" name="icecream" value="vanilla"/>
Vanilla
   <br/>

   <input type="checkbox" name="icecream" value="strawberry"/>
Strawberry
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Textarea

Example 11.7 - Form: textarea - Example 11.7

 <form method="post" action="https://cs12.net/form/submit.php">
   <strong>Comments   </strong>
   <textarea name="comments" rows="10" cols="50">Please enter comments...   </textarea>
   <button type="submit">Submit Information   </button>
 </form>

In style element (<style>) within head element: 

textarea {
             display: block;
             margin: 1rem 0;
     }

Select and Option

Pull-down menu

Example 11.8 - Pull-down List - Example 11.8

 <form method="get" action="https://cs12.net/form/submit.php">Select your favorite New England states:
   <br/>

   <select name="state">
     <option value="CT">Connecticut     </option>
     <option value="ME">Maine     </option>
     <option value="MA">Massachusetts     </option>
     <option value="NH">New Hampshire     </option>
     <option value="RI">Rhode Island     </option>
     <option value="VT">Vermont     </option>   </select>
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Scrollable list ← DON'T DO THIS!

Note: because scrollable lists are difficult for users, they are not typically used.

A scrollable list (size attribute) that can have multiple selections (multiple attribute):

Example 11.9 - Scrollable List - Example 11.9

 <form method="get" action="https://cs12.net/form/submit.php">Select your favorite New England states:
   <br/>

   <select name="state" size="3" multiple="multiple">
     <option value="CT">Connecticut     </option>
     <option value="ME">Maine     </option>
     <option value="MA">Massachusetts     </option>
     <option value="NH">New Hampshire     </option>
     <option value="RI">Rhode Island     </option>
     <option value="VT">Vermont     </option>   </select>
   <br/>

   <button type="submit">Submit Information   </button>
 </form>

Accessibility: Label Element

Label elements are critical for form accessibility.

label element lets us use markup to associate text with an input element.

Using label you can make the association between the text label and the form input explicit, and not just rely on the visual proximity.

Labels - Why?

Accessibility: Label Element

Example 11.10 - Form Labels - Example 11.10

 <form method="get" action="https://cs12.net/form/submit.php">
   <p>Do you like to watch NCAA basketball?
   </p>
   <label>
     <input type="radio" name="basketball" value="Y"/>
Yes   </label>
   <label>
     <input type="radio" name="basketball" value="N"/>
No   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; }
       button { margin-top: 1rem;}

Label Element - using id, label, for

Example 11.11 - Form Labels - Example 11.11

 <form method="get" action="https://cs12.net/form/submit.php">
   <p>Do you like to watch NCAA basketball?
   </p>
   <input type="radio" name="basketball" id="basketball_y" value="Y"/>

   <label for="basketball_y">Yes   </label>
   <br/>

   <input type="radio" name="basketball" id="basketball_n" value="N"/>

   <label for="basketball_n">No   </label>
   <br/>

   <input type="submit" value="Submit"/>

 </form>

form labels

Labels

Example 11.12 - Form Labels - Example 11.12

 <form method="get" action="https://cs12.net/form/submit.php">
   <div>What ice cream do you like?
     <br/>

     <input type="checkbox" name="icecream" id="icecream_chocolate" value="chocolate"/>

     <label for="icecream_chocolate">Chocolate     </label>
     <br/>

     <input type="checkbox" name="icecream" id="icecream_cpb" value="chocolate peanut butter"/>

     <label for="icecream_cpb">Chocolate Peanut Butter     </label>
     <br/>

     <input type="checkbox" name="icecream" id="icecream_vanilla" value="vanilla"/>

     <label for="icecream_vanilla">Vanilla     </label>
     <br/>

     <input type="checkbox" name="icecream" id="icecream_strawberry" value="strawberry"/>

     <label for="icecream_strawberry">Strawberry     </label>
     <br/>

     <button type="submit">Submit Information     </button>
   </div>
 </form>

fieldset and legend

Used to group related choices and even sets.

fieldset and legend elements can further help group related input fields.

Example 11.13 - Form fieldset and legend elements - Example 11.13

 <form method="get" action="https://cs12.net/form/submit.php">
   <div>
     <fieldset>
       <legend>Name       </legend>
       <label>First Name
         <input type="text" name="fname" size="30"/>
       </label>
       <label>Last Name
         <input type="text" name="lname" size="30"/>
       </label>     </fieldset>
     <fieldset>
       <legend>Sports       </legend>
       <fieldset>
         <legend>Do you like basketball?         </legend>
         <label>
           <input type="radio" name="basketball" value="Y"/>
Yes         </label>
         <label>
           <input type="radio" name="basketball" value="N"/>
No         </label>       </fieldset>
       <fieldset>
         <legend>Do you like baseball?         </legend>
         <label>
           <input type="radio" name="baseball" value="Y"/>
Yes         </label>
         <label>
           <input type="radio" name="baseball" value="N"/>
No         </label>       </fieldset>     </fieldset>
     <button type="submit">Submit     </button>
   </div>
 </form>

In style element (<style>) within head element: 

label { display: block; }
     fieldset { margin-top: 1rem;}
     button { display: block; margin-top: 1rem; padding: 0.5rem 1rem;}

optgroup

The optgroup element allows you to group a long select list.

Example 11.14 - Form: optgroup in pull-down menus - Example 11.14

 <p>Select a school:
 </p>
 <form method="get" action="https://cs12.net/form/submit.php">
   <select name="school">
     <optgroup label="ACC">
       <option>Boston College       </option>
       <option>Clemson       </option>
       <option>Duke       </option>
       <option>Florida State       </option>
       <option>Georgia Tech       </option>
       <option>Louiville       </option>
       <option>Miami       </option>
       <option>North Carolina       </option>
       <option>North Carolina State       </option>
       <option>Notre Dame       </option>
       <option>Pitt       </option>
       <option>Syracuse       </option>
       <option>Virginia       </option>
       <option>Virginia Tech       </option>
       <option>Wake Forest       </option>     </optgroup>
     <optgroup label="Big 10">
       <option>Illinois       </option>
       <option>Indiana       </option>
       <option>Iowa       </option>
       <option>Maryland       </option>
       <option>Michigan       </option>
       <option>Michigan State       </option>
       <option>Minnesota       </option>
       <option>Nebraska       </option>
       <option>Northwestern       </option>
       <option>Ohio State       </option>
       <option>Penn State       </option>
       <option>Purdue       </option>
       <option>Rutgers       </option>
       <option>Wisconsin       </option>     </optgroup>
     <optgroup label="Big XII">
       <option>Baylor       </option>
       <option>Iowa State       </option>
       <option>Kansas       </option>
       <option>Kansas State       </option>
       <option>Oklahoma       </option>
       <option>Oklahoma State       </option>
       <option>Texas       </option>
       <option>Texas Christian       </option>
       <option>Texas Tech       </option>
       <option>West Virginia       </option>     </optgroup>
     <optgroup label="Ivy League">
       <option>Brown       </option>
       <option>Columbia       </option>
       <option>Cornell       </option>
       <option>Dartmouth       </option>
       <option>Harvard       </option>
       <option>Penn       </option>
       <option>Princeton       </option>
       <option>Yale       </option>     </optgroup>
     <optgroup label="Pac 12">
       <option>Arizona       </option>
       <option>Arizona State       </option>
       <option>California       </option>
       <option>Colorado       </option>
       <option>Oregon       </option>
       <option>Oregon State       </option>
       <option>Stanford       </option>
       <option>UCLA       </option>
       <option>USC       </option>
       <option>Utah       </option>
       <option>Washington       </option>
       <option>Washington State       </option>     </optgroup>   </select>
   <div>
     <button type="submit">Submit     </button>
   </div>
 </form>

optgroup illustration

optgroup illustration

HTML5 forms

HTML5 forms - placeholder, autofocus, and specific input types

HTML5: email and url

On handheld devices, screen keyboard is optimized for input.

type="email"

Example 11.15 - text input for email - Example 11.15

 <form action="https://cs12.net/form/submit.php" method="post">
   <label>Email:
     <input type="email" name="email_address"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}

Screenshot

type="url"

Example 11.16 - text input for URLs - Example 11.16

 <form action="https://cs12.net/form/submit.php" method="post">
   <label>URL:
     <input type="url" name="url"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}

Screenshot

Screenshot

HTML5: number and range

Example 11.17 - HTML5 input type='number' and type='range' - Example 11.17

 <form action="https://cs12.net/form/submit.php" method="post">
   <label>Pick a number:
     <input type="number" name="entered_number"/>
   </label>
   <label>How happy are you?
     <input type="range" min="1" max="5" value="3" step="1" name="happy"/>
   </label>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}
     input { display: block; }

Screenshot

Screenshot

HTML5: date and time

Example 11.18 - HTML5 input types for date and time - Example 11.18
| Example 11.18 JSFiddle

 <form action="https://cs12.net/form/submit.php" method="post">
   <fieldset>
     <legend>Date and Time     </legend>
     <label>Pick a date:
       <input type="date" name="my_date"/>
     </label>
     <label>Pick a datetime
       <input type="datetime-local" name="my_datetime"/>
     </label>
     <label>Pick a time (15 minute increments)
       <input type="time" name="my_time_15" step="900" value="12:00"/>
     </label>
     <label>Pick a time (1 minute increments)
       <input type="time" name="my_time_1" step="60" value="12:00"/>
     </label>
     <label>Pick a time (1 second increments)
       <input type="time" name="my_time_1s" step="1" value="12:00"/>
     </label>   </fieldset>
   <button type="submit">Submit   </button>
 </form>

In style element (<style>) within head element: 

label, button { display: block; margin-top: 1rem;}
             input { display: block;  margin-top: 0.25rem;}

Screenshot

Screenshot

Screenshot

Screenshot

Processing Forms on the server side

Maps

With JavaScript APIs for Google Maps, Bing Maps, and MapQuest, and Open Street Maps (Overpass API), it is very easy to embed customized maps on your website.

We'll take a look at a few different examples of how to include maps on our site:

Each approach has some advantages and shortcomings.  Essentially the trade-offs will be increased complexity with increased flexibility and control.

Embed a map created using Google's Tools

You can create a map using Google's tools, and then simply click the cog icon and select "Share or embed". The "embed map" option will give you an iframe code you can use in your web page. It doesn't get much simpler than this. If you want to embed a map with the location of a single store or organization, then this technique will work well.

A map I created for the John Harvard Statue:

map2.png

The iframe code provided by Google:

<iframe style="border: 0;"
    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1473.7541883076933!2d-71.11691195715973!3d42.37431548010373!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x1b5299f9d1edac24!2sJohn+Harvard+Statue!5e0!3m2!1sen!2sus!4v1428381157098"
    width="600" height="450"></iframe>

And the map that is embedded:

For further information about the Google Map Embed API, please see
https://developers.google.com/maps/documentation/embed/guide

Cases where the embed approach wouldn't work so well:

An example where a static embedded map would not work is with the Student Locations tool for this course.  This tool allows students to enter their location information, and then the map is built dynamically based on this data.  In addition, this tool displays different data, depending on whether the viewer is a student or an instructor.  This is a case where we'll need more control over the map than a straightforward embed approach will allow.

The Google Maps JavaScript API will give us that control.

Google Maps JavaScript API

There is extensive documentation for the Google Maps JavaScript API, at
https://developers.google.com/maps/documentation/javascript/tutorial that you can consult. But for now, it will be enough to walk through some examples.

We'll learn by example with a

Basic Map

So first, we'll start with a map that is centered on the John Harvard statue in Harvard Yard.

To use the Google Maps JavaScript API, we'll need to load the Google Map JavaScript via a script element, and then we'll need to configure the map and then place it on the page.

Load the JavaScript:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"> </script>

Use the JavaScript:

var map;
  /* John Harvard Statue
     42.374474,-71.117207 */
  var mylat = 42.374474;
  var mylng = -71.117207;
  function initialize_map() {
      var mapOptions = {
          zoom: 17,
          center: new google.maps.LatLng(mylat, mylng)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize_map);

Full example:

Basic Map working examples:

Placing a Marker

map4.png
To put a marker on the map, we'll create a google.maps.Marker object. When we create the marker, one of the parameters we'll pass in as part of the configuration data structure is the map we want to place it on.

So if we've created a google.maps.Map object as the variable harvard_yard_map and a googlemaps.LatLng object as the variable latlng_statue, the new JavaScript code to create a marker for the John Harvard statue would look like:

var marker = new google.maps.Marker(
    {
      position: latlng_statue,
      map: harvard_yard_map,
      title: 'John Harvard Statue'
    }
  );

Note there is a single parameter passed to the google.maps.Marker method -- this parameter is a JavaScript data structure of name/value pairs.

Full example:

Map with Marker working examples:

Read more about Markers, Google JavaScript API documentation for additional information, such as using customized icons.

Marker with an Information Window

Now that we have a marker on the map, we can add an information window.
map3-1.png

There are three basic things to pay attention to:

These steps are shown below:

/* Create content.  Here we are concatenating strings together with the JS "+" operator */
  var statue_info = "<strong>John Harvard Statue</strong><br/>" +
      "<a href='http://www.summer.harvard.edu/blog-news-events/3-lies-harvard'>3 Lies of Harvard</a>";

  /* Create the InfoWindow object; note we pass in the content */
  var statue_infowindow = new google.maps.InfoWindow({
      content: statue_info
  });

  /* Create the marker (we've seen this before) */
  var statue_marker = new google.maps.Marker({
    position: statue_latlng,
    map: harvard_yard_map,
    title: 'John Harvard Statue'
  });

  /* Create the listener so that the info window opens when the marker is clicked */
  google.maps.event.addListener(statue_marker, 'click', function() {
    statue_infowindow.open(harvard_yard_map,statue_marker);
  });

Full example:

Map with Marker working examples:

Map with Several Markers

Now let's use JSON data to add several markers to a page.  

Map with Ivy Schools from JSON Data - Live Example

The JSON data (schools.json) we'll use is a list of schools in the Ivy League -- which contains a latitude, longitude, name, and URL.

We'll use jQuery to get the JSON data, and we'll use the Google Maps API to create the map. The full code is shown below, but the key part to creating the markers is where iterate through the list of schools:

 for (var i in school_list) {
    var school = school_list[i];
    var mylatlng = new google.maps.LatLng(school.lat, school.lng);
    var marker = new google.maps.Marker({
                                         position: mylatlng,
                                         map: ivy_map,
                                         title: "school.name"
                                        });
  }

map

Full code:

Maps - Leaflet JS and Open Street Map

Leaflet: an open-source JavaScript library for mobile-friendly interactive maps