Download - Untangling spring week7
Untangling the webSPRING 2017 – WEEK 7 – JAVASCRIPT EXERCISES, MAPPING, AND PROJECT 2 WORK
Agenda
Visual elements on web pages – review and help Tables, pictures, icons
Javascript review Variable scope, adding and counter variables
New javascript topics The “this” pointer
Visual Elements - Tables
Simple table https://jsfiddle.net/L3wLvvnL/
Variable column width https://jsfiddle.net/L3wLvvnL/1/
Reference https://v4-alpha.getbootstrap.com/layout/grid/
Visual elements – pictures and icons
<img> tag puts a picture in, sizing should be in the CSS ideally
Icons are a good standard alternative to your own imagery I like the font-awesome package http://fontawesome.io/icons/
https://jsfiddle.net/L3wLvvnL/7/
Variable scope
A reminder that variables are only accessible from within the block they are declared, or children of that block: In a file, variables declared outside any functions are global to all the
functions in that file In a function, variables declared at the top of the function are
accessible to everywhere within that function In a for loop, variables declared within the loop are accessible ONLY
within the loop Any identically named variables will be taken from the closest
block Don’t name the same or your more global variables will be hidden
Strict Mode
“use strict”; as the first line of a js file Mistakes become errors Global variables must be explicitly created Some other behaviors change
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
This
This keyword retrieves the current execution context Some difference in strict mode where it retrieves the context at the
time of the function call In non-strict mode, the global context is the default, in strict mode
will be at whatever it was previously defined to, or undefined This is the basis of understanding arrow functions (ES6 concept
we’ll explore later) Reference: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/
Operators/this
new
function Car(make, model, year) { this.make = make; this.model = model; this.year = year; }
var mycar = new Car("Eagle", "Talon TSi", 1993);
console.log(mycar.make);
Events
There are also events on the document object model, but we won’t discuss that in depth today
Events are called when something happens – a UI action, a message, a timer, etc.
google.maps.event.addListener
Immediately Invoked Function Expressions (IIFE)
(function () { })();
The first pair of parentheses (function(){...}) turns the code within (in this case, a function) into an expression, and the second pair of parentheses (function(){...})() calls the function that results from that evaluated expression.
This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.
Exercises Create a web page in jsfiddle with a button on it
Using bootstrap, position the button in the centre of the page (at the top) Hint: there is a center-block definition in bootstrap
Make the text of the button red
When you press that button make it invoke a function that raises an alert
When you press the button keep track of the number of times it has been pressed and display that number in the alert
Exercise answers
In a table: https://jsfiddle.net/L3wLvvnL/3/
Not in a table: https://jsfiddle.net/L3wLvvnL/5/
Project 2 work time
I want an hour to talk about mapping, but I also want a chance for groups to do some project work while I’m around to help
Let’s do that until 8
Mapping
Two main options Google maps Leaflet
Main decision is really whether to be in the google ecosphere Google maps may be slightly easier initially, but leaflet is easier
to extend Leaflet sits primarily on open street maps, so perhaps less detail
than google
Google Maps example
Getting an API key (will initially work without it, but some features disabled and will not keep working) https://developers.google.com/maps/documentation/javascript/get-ap
i-key
https://jsfiddle.net/v892njbz/1/
Key concepts Arrays (review) Looping (review) New objects
Google maps example 2
New concepts Events
https://jsfiddle.net/qswaLznm/5/
Google Maps example 3
New Concept Immediately Invoked Function Expression (IIFE)
https://jsfiddle.net/v892njbz/
Homework 7
1) create a web page that shows a map of the Uvic campus, using your own google API key
2) on that campus map, create 3 markers. 3) when the marker is clicked on, launch a pop-up dialog that
shows the latitude and longitude of the marker, and a count of the number of markers that have been shown so far
4) Add an event listener to listen for the bounds_changed event and output the new screen boundaries to the console log.