View
364
Download
0
Category
Preview:
Citation preview
Agenda
Homework recap Problems folks are running into
Maps Google maps Leaflet
Hosting Options and tradeoffs
Turning in homework
All of you have turned in at least one homework. You know how to find me. But not turning in a homework just mystifies me.
If you turn something in that doesn’t work, you will likely get at least some credit for having tried.
If you try and need more time I am generous with extensions and can provide assistance. Regardless of what point you are starting from, if you try in this class and communicate when you are struggling you will do OK.
But if you turn nothing in, the assignment is a zero. On the current trajectory, some of you will fail
this class.
Homework recap
How many used bootstrap? UI-kit? Flexbox? Go over some bootstrap code:
Modal dialogs Revisit some core JS concepts
Using the chrome developer tools to see a console window Variables and syntax Arrays and objects
Some new JS concepts
Bootstrap examples
https://jsfiddle.net/e4veh4yt/
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Using JSFiddle
From here on out I’d like homework submissions on either github or jsfiddle (or another service such as nitrous.io) Github if it’s just code you’re submitting Jsfiddle or an alternative if it’s code I’m supposed to see run
Using JS, you have three options on where to run the code – on load, in the head, or in the body. Make sure you understand the difference!
Console.log is still very useful, but it doesn’t print on the page! Have to use the chrome developer tools.
Access DevTools On Windows On MacOpen Developer Tools
F12, Ctrl + Shift + I
Cmd + Opt + I
Variables in the html
Extension of the last example:
https://jsfiddle.net/egrs4j7a/1/ In the HTML
<p id="foo"></p>
In the JS var myText = "Hello"; document.getElementById('foo').innerHTML = myText;
Objects versus arrays
Arrays are actually special cases of objects. All built-in variable types are, really. But you use them in different contexts Arrays - var myArray = [];
Multidimensional (potentially) Ordered Native methods like push, pop
Objects - var myObject = {}; Unordered Best for key:value pairs
More info: https://msdn.microsoft.com/en-us/library/89t1khd2%28v=vs.94%29.aspx?f=255&MSPPError=-2147217396
var a = [1, 2, 3];var o = {a: 1, b: 2, c: 3};
a[0] = 1; a[1]=2; etc.
o[“a”] = 1o.a = 1;
A few new JS concepts
Strict mode This
Difference in behavior between strict mode and non-strict mode New
Create a new instance Events
Two ways of getting browser events
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
Recall the discussion last week of context 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
Two approaches we’ll look at today, both events on objects There are also events on the document object model, but we won’t
discuss that in depth today
google.maps.event.addListener
map.on('click', onMapClick);
Immediately Invoked Fucntion 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.
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 map, so perhaps less detail than
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-api-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/
Leaflet example
https://jsfiddle.net/7yx1o6o8/6/
No new concepts here but some things to emphasize: External resources Console log Events (a different syntax than in google)
Amazon Web Services (AWS)
This is the default for big sites Many, many service offerings Confusing console and management But it is the only one with full flexibility and nearly infinite scalability, if
you can afford it. Cheaper at scale than the alternatives, though.
IBM BlueMix
Competitive service offerings and pricing Trying to break into the market Established cloud provider on their own services, just now opening up to
the general public
Lots of functionality Different programming model
Kubernetes Containerization Hides underlying server architecture
Microsoft Azure
Different set of service offerings Cognitive services, speech reco, etc. If you need c# or .NET this is a better platform, but otherwise more
expensive
Digital Ocean
Advantage of very easy to get a VPS (virtual private server) up and running
$50 service credit as part of the github student developers package No services other than a VPS to speak of, though
Homework
Create a map on your pizza web page that shows the locations of the stores Make up at least 3 locations and insert markers onto the map
Style the page to look like a decent pizza store web page (using whatever styling package you like)
Extra difficulty question Allow the user to click on a marker and give the distance from the Uvic
campus to that marker, putting that distance into the popup dialog
Recommended