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.