Lectures for Web Programming

• examples
• elements
• links
• blocks
• lists
• layout
• html5_new_elements
• html5_semantic_elements
• tags_reference
• Quiz

• examples
• syntax
• howto
• boxmodel
• positioning
• float
• navbar
• css reference
• Quiz

• examples
• whereto
• syntax
• statements
• variables
• assignment
• datatypes
• functions
• objects
• scope
• events
• arrays
• array_methods
• if_else
• loop_for
• js-dom
• errors
• debugging
• best_practices
• mistakes
• Quiz

• js_statements
• js_variables
• js_functions test yourself
• Scope js_scope
• Variable declared outside function, becomes GLOBAL.
  All scripts and functions on page can access it.
  
• Variables declared within a JavaScript function, become LOCAL to the function.
• Variables created without the keyword var, are always global, even if created inside a function.
  
• Global variables live as long as your application lives
  
• Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.
  

• js_events
• js_if_else
• js_arrays
• Debugging js_debugging
• Best Practices js_best_practices
• Avoid Global Variables ... Use local variables instead, and learn how to use closures.
  
• Always Declare Local Variables
  
• Declarations on Top
  
• Initialize Variables
  
• Never Declare Number, String, or Boolean Objects

• js_htmldom_methods
• js_htmldom_elements
• js_htmldom_html
• js_htmldom_css
• js_htmldom_events
• js_htmldom_eventlistener
• Reference: jsref/dom_obj_style

• js_objects test yourself
• Properties: (property) keys are used to access (property) values
• Methods: stored in properties as function definitions
• Object Literal: comma-separated list of name:value pairs in curly brackets
  

• Get Google Maps API Key
  https://developers.google.com/maps/documentation/javascript/    select Web
  
• Create Google Map
  https://developers.google.com/maps/documentation/javascript/tutorial
  
• google.maps.Map class
  Constructor: Map(mapDiv:Element,opts?:MapOptions)
  var map1 = new google.maps.Map (
  document.getElementById('mapDiv'),
  objectLiteral);
  
• Google Maps Reference:
  https://developers.google.com/maps/documentation/javascript/reference#Map
  
• Change Center Point  need to know Geocode: lat & lng
  
• Create Geocode – http://www.gpsvisualizer.com/geocode 
  4 Huntington Street, New Brunswick, NJ
  
• https://developers.google.com/maps/documentation/javascript/reference#MapOptions
  
• https://developers.google.com/maps/documentation/javascript/reference#LatLng
  new google.maps.LatLng(40.505, -74.453)  or  {lat: 40.505, lng: -74.453}
• Change Map Type and Zoom Level
  
• Google Maps Reference: https://developers.google.com/maps/documentation/javascript/reference
  
• MapTypeId  |  MapOptions Object (specify keys)
  
• Chrome Console: map.getZoom ();
  
• Customize Map: draggable: false;  | scrollwheel: false;
  
• Add Marker
  
• https://developers.google.com/maps/documentation/javascript/examples/marker-simple
  
• https://developers.google.com/maps/documentation/javascript/reference#Marker
  
• google.maps.Marker class
  Constructor: Marker(opts?:MarkerOptions)
  var marker1 = new google.maps.Marker (objectLiteral);
  
• Add Info Window
  
• https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
  

Create automateGeocodePlaceMarker (geocoderUse, locIndex, locArray, mapToUse)

geocoderUse.geocode({'address': locObjUse.address},

      function(results, status) {

        if (status === 'OK') {
            // assign geocode to locObj + specify map to use + place marker

            // recursive function call   only if  locIndex + 1 < locArray.length

        } else {

            // Geocoder NOT OK because QUERY LIMIT triggered

            setTimeout(function(){automateGeocodePlaceMarker and use locIndex)

            https://www.w3schools.com/jsref/met_win_settimeout.asp

        }

• h2 element used for location name,
• p element for category and floated to left,
• p element for short info,
• Border = 2px and left border = 10px.

• examples
• whereto
• syntax
• statements
• variables
• assignment
• datatypes
• functions
• objects
• scope
• events
• arrays
• array_methods
• if_else
• loop_for
• js-dom
• errors
• debugging
• best_practices
• mistakes
• Quiz

Create automateGeocodePlaceMarker(geocoderToUse, i);}
geocoderUse.geocode({'address': locObjUse.address},
function(results, status) {
if (status === 'OK') {
// assign geocode to locObj
// specify map to use based locObjUse.mapToUse
// place marker
} else {

setTimeout(function(){automateGeocodePlaceMarker and use locIndex)

https://www.w3schools.com/jsref/met_win_settimeout.asp

});

• Installation: Basic or Advanced
• getbootstrap.com
• jquery.com
• Standard = CDN  vs  Customize = Download Source
• Grid System 12 columns - W3Schools
• Containers
• .container
• .container-fluid
• Rows and Columns
• .col-SIZE-SPAN - W3Schools
• SIZE: extra | sm | md | lg | xl
• SPAN: needs to add up to 12

• 1 Column => SPAN = 12

  2 Column => SPAN = 6

  3 Column => SPAN = 4

  4 Column => SPAN = 3

  6 Column =>SPAN = 2

  12 Column => SPAN = 1

• Installation: Basic or Advanced
• getbootstrap.com
• jquery.com
• Standard = CDN  vs  Customize = Download Source
• Grid System 12 columns - W3Schools
• Containers
• .container
• .container-fluid
• Rows and Columns
• .col-SIZE-SPAN - W3Schools
• SIZE: xs (phone) | sm (tablet) | md | lg
• SPAN: needs to add up to 12

• 1 Column => SPAN = 12

  2 Column => SPAN = 6

  3 Column => SPAN = 4

  4 Column => SPAN = 3

  6 Column =>SPAN = 2

  12 Column => SPAN = 1

• Installation: Basic or Advanced
• getbootstrap.com
• jquery.com
• Standard = CDN  vs  Customize = Download Source
• Grid System 12 columns - W3Schools
• Containers
• .container
• .container-fluid
• Rows and Columns
• .col-SIZE-SPAN - W3Schools
• SIZE: extra | sm | md | lg | xl
• SPAN: needs to add up to 12

• 1 Column => SPAN = 12

  2 Column => SPAN = 6

  3 Column => SPAN = 4

  4 Column => SPAN = 3

  6 Column =>SPAN = 2

  12 Column => SPAN = 1

• Installation: Basic or Advanced
• getbootstrap.com
• jquery.com
• Standard = CDN  vs  Customize = Download Source
• Grid System 12 columns - W3Schools
• Containers
• .container
• .container-fluid
• Rows and Columns
• .col-SIZE-SPAN - W3Schools
• SIZE: xs (phone) | sm (tablet) | md | lg
• SPAN: needs to add up to 12

• 1 Column => SPAN = 12

  2 Column => SPAN = 6

  3 Column => SPAN = 4

  4 Column => SPAN = 3

  6 Column =>SPAN = 2

  12 Column => SPAN = 1