Info Web Tech Course Web Programming Anselm Spoerri
Info + Web Tech Course Web Programming Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu Web Programming Course © Anselm Spoerri
Lecture 3 - Overview Quiz 1 Ex 1 Lab Java. Script ‒ ‒ Objects Arrays DOM Google Maps API What to Do BEFORE Next Class ‒ Java. Script videos in Week 4 (in green) Web Programming Course © Anselm Spoerri
Ex 1 – Layout and Buttons Web Programming Course © Anselm Spoerri
Ex 1 – Interactivity + Function + Array + Counter Add Interactivity to Buttons ‒ onclick Create Function ‒ Name function “change. Display” ‒ Specify parameter = button name Create Global Array ‒ Increment array when specific button is pressed Button displays Counter ‒ Update button text to show 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 Web Programming Course © Anselm Spoerri
Java. Script Objects Properties (property) keys are used to access (property) values var car = {type: "Fiat", model: "500", color: "white"}; object. Name. property. Name car. type or object. Name["property. Name"] car["type"] Methods are stored in properties as function definitions var person = {first. Name: "John", last. Name : "Doe", full. Name : function() { return this. first. Name + " " + this. last. Name; } }; object. Name. method. Name(); person. full. Name(); js_objects test yourself Web Programming Course © Anselm Spoerri
Java. Script Objects In Java. Script, 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 literal. Obj = { prop 1: 10, prop 2: ‘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. Web Programming Course © Anselm Spoerri
Java. Script – Objects and 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. for. Each(my. Function); function my. Function (value, index, array) https: //www. w 3 schools. com/js/tryit. asp? filename=tryjs_array_foreach Web Programming Course © Anselm Spoerri
Google Maps API Get Google Maps API Key https: //developers. google. com/maps/documentation/javascript/tutorial Get API Key Create Google Map https: //developers. google. com/maps/documentation/javascript/tutorial google. maps. Map class Constructor: Map(map. Div: Element, opts? : Map. Options) var map 1 = new google. maps. Map ( document. get. Element. By. Id('map. Div'), object. Literal); 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#Map. Options https: //developers. google. com/maps/documentation/javascript/reference#Lat. Lng new google. maps. Lat. Lng(40. 505, -74. 453) or {lat: 40. 505, lng: -74. 453} Web Programming Course © Anselm Spoerri
Google Maps API Change Map Type and Zoom Level Google Maps Reference: https: //developers. google. com/maps/documentation/javascript/reference Map. Type. Id | Map. Options Object (specify keys) Chrome Console: map. get. Zoom (); 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? : Marker. Options) var marker 1 = new google. maps. Marker (object. Literal); Add Info Window https: //developers. google. com/maps/documentation/javascript/examples/infowindow-simple Next Steps Add more markers Web Programming Course © Anselm Spoerri
- Slides: 9