1. Web Programming Anselm Spoerri PhD (MIT) SC&I @ Rutgers University
Info + Web Tech Course
Web Programming
Anselm Spoerri PhD (MIT)
Rutgers University

2. What to Do BEFORE Next Class
Lecture 3 - Overview
Quiz 1
Ex1 Lab
JavaScript
Objects
Arrays
DOM
Google Maps API
What to Do BEFORE Next Class
JavaScript videos in Week 4 (in green)

3. Ex1 – Layout and Buttons

4. Ex1 – Interactivity + Function + Array + Counter
Add Interactivity to Buttons
onclick
Create Function
Name function “changeDisplay”
Specify parameter = button name
Create Global Array
Increment array when specific button is pressed
Button displays Counter
Update button text to show how many times it has been pressed
Only increment counter if different button has been pressed
Create Layout “X”
Clicking on “X” button will create “X” layout
Modify DOM by assigning CSS rules to specific elements

5. JavaScript Objects Objects js_objects test yourself
Properties (property) keys are used to access (property) values
var car = {type:"Fiat", model:"500", color:"white"};
objectName.propertyName or objectName["propertyName"]
car.type car["type"]
Methods are stored in properties as function definitions
var person = {firstName: "John", lastName : "Doe",
fullName : function() {
return this.firstName + " " + this.lastName; } };
objectName.methodName(); person.fullName();
js_objects
test yourself

6. JavaScript Objects In JavaScript, almost "everything" is an object.
Objects have Properties and Methods.
new Object () versus { … }
Object Literal
Comma-separated list of name-value pairs wrapped in curly braces
var literalObj = { prop1: 10, prop2: ‘hello’};
Object literals encapsulate data, enclosing it in tidy package.
Minimizes use of global variables which can cause problems when combining code.
Object Literal Syntax
Colon : separates property name from value.
Comma , separates each name-value pair from the next.
No comma after the last name-value pair.

7. JavaScript – Objects and Arrays
Arrays are always objects … a special kind of object
Difference Between Arrays and Objects
Arrays use numbered indexes items=[3,8]  items[1]
Objects use named indexes car={type:“Fiat”}  car[“type”]
Accessing Array
for (i = 0; i < items.length; i++) { … items[i] … }
items.forEach(myFunction);
function myFunction (value, index, array)

8. Google Maps API Get Google Maps API Key
Get API Key
Create Google Map
google.maps.Map class
Constructor: Map(mapDiv:Element,opts?:MapOptions)
var map1 = new google.maps.Map (
document.getElementById('mapDiv'),
objectLiteral);
Google Maps Reference:
Change Center Point need to know Geocode: lat & lng
Create Geocode – Huntington Street, New Brunswick, NJ
new google.maps.LatLng(40.505, ) or {lat: , lng: }

9. Google Maps API Change Map Type and Zoom Level
Google Maps Reference:
MapTypeId | MapOptions Object (specify keys)
Chrome Console: map.getZoom ();
Customize map: draggable: false; | scrollwheel: false;
Add Marker
google.maps.Marker class
Constructor: Marker(opts?:MarkerOptions)
var marker1 = new google.maps.Marker (objectLiteral);
Add Info Window
Next Steps
Add more markers