[ Silence ]
>> Okay so we're going to get started in just a second here.
I think we're all set with the cameras.
Great. So the first thing we're going to do today,
well first user directions, my name is RJ, this is Rob
and we'll be the teaching fellows for S-76 this year.
And these labs are meant to be time for more hands on exercises
where we'll give some instructions.
We'll break up into groups kind of like this, work through them.
And we'll floating around to help out.
And then we'll go over an example solution
or take example solutions from the group.
>> Yeah if you ever have any questions and one of us,
even if like RJ's talking, I can come over and help whenever.
>> Especially these early labs we'll be getting everyone's
configuration on the same page is the most important thing.
So definitely raise your hand
if something doesn't seem quite the same as it is up here
or something doesn't seem to be quite working.
If you got my email a while ago there's a link in there
on how to install Zamp.
You can clink the link in there and install Zamp.
That's the first thing we're going to do is just download
that software, get it installed, try to put an example html file
in your sites folder and get that to load.
So anything you put in that file and pull it up.
So who here has installed Zamp?
Has successfully installed Zamp?
Oh great, okay, who has not?
>> Or other web server?
Is there anyone who is in the process of installing it?
>> So we'll get that set up.
So for those of you who have installed it, have you been able
to put a file in your sites folder to try things out?
If not let's open up your favorite text editor
and save a file in your sites folder.
Okay so everyone has got everything set up.
We're going to keep pushing ahead.
For those that have not gotten things fully set
up just raise your hand and David is floating
around to help out as well.
So the next thing we're going to do is you just have
at least a basic index html or test study html
or the lectures examples in that folder.
We're going to take one of those files
and make it a little more useable.
So we're going to add the meta tag in the head as we saw
in lecture and add a viewpoint element to that,
a viewpoint property to that.
In addition we're going to add some script types
and add some JavaScript to make it a little more dynamic.
So I want you guys to make a page that has
at the very least a textbox and a button, a submit button,
and a div of some sort with an id.
And so collaborate with your group.
The goal is when you click the submit button,
whatever is in that text box populates that div.
So Rob is going to draw a picture.
Is that what Rob's doing?
>> Okay. [laughter]
[ Silence ]
What did you say, a button?
[ Silence ]
>> The goal is first up, the html, has this textbox,
the submit button and then some space below.
>> It can be an invisible space.
Like if you have a div you're not going to be able
to see it but it'll be there.
And then whatever you type here and submit,
it should show up down here.
>> So once you have the structure base all set
up you'll need two things at the very least, a script tag
that includes JavaScript and you'll likely have a script tag
that includes jQuery, as we saw in lecture.
So if you don't remember exactly how to do that,
feel free to collaborate with your partners,
look on the courses website or raise your hand
and we'll be floating around.
But the goal is to, again, once you click that submit button,
have the contents reflected in the div below.
>> Just to put something out,
this little line right here is what I'm using to include jQuery
so if you wanted you could just download jQuery locally
and then include it with like scriptsource=jQuery.js
or whatever, if it were inside of the same directory
as this exercise1.html.
Here Google happens to provide a jQuery link online
so I'm just directly linking to Google and pulling down jQuery
that way so either works.
Okay so a couple things I've added just
to get you going if you're stuck.
So notice I've given some ID's to my div
and my form and my input textbox.
Because jQuery is going to conveniently,
some of them didn't really need ID's
but it's convenient to have them.
Remember this syntax is going let me $(# is going to refer
to the element with that ID.
I wasn't very creative with my ID name
so we've exercised one form, exercised one text
and exercised1-id div.
Okay so what this particular line
of jQuery is saying is grab, select, this particular item
so we're selecting the item
with id exercise1 form which is this guy.
There should only be one thing in your entire document
with that id and so that's this guy.
And we're saying when the submit event is triggered,
so when we actually hit submit on that form,
we're going to run this function.
So I haven't defined what the function does yet
but we're going to want the function to do something
like copy this text down into this div and also make sure
that the form doesn't actually end up submitting.
So let's actually talk about the third point first.
We saw this in lecture, how do we prevent the form
from actually submitting?
What do we need to do?
[inaudible background comment] Yes.
So we can do that just by return false.
If we return true that means the form should actually submit.
And this is going to be useful for things
like validating the submission because like if you didn't fill
out a textbox maybe you don't want the form to submit
so return false will prevent that.
But if it is filled out then you do want it to submit
so you can return true.
And for points one and two I'm going to use jQuery.
You can use regular straight JavaScript
but what is the selector?
And this being the selector, this jQuery selector,
what is the selector I'm going to want to use in order
to get something from this?
[laughter] Yeah, this is the selector.
So remember that the pound, the hash, the whatever you want
to call it, refers to the element with that id.
If I said this, that would mean the element with that tag,
which there isn't any.
You might see that if I did something like div or if I did,
actually div would be pretty good so we don't want
that from form, we want that from text.
So the text is inside of this input box, exercise1 text.
I gave it that id just to get the text.
We have now selected the item and this is where you kind
of just learn them or you can go
through the jQuery documentation.
But what we're going to want to do
to actually get the text that's inside the text box is .val.
And so then I can store that in just a variable.
Our text equals blah.
Okay so [laughter] the line I just added,
I wrapped that around everything we had so far,
inside of this skirt tag, is another jQuery thing.
So you'll notice, and there are some shortcuts you might know
so .submit also exists but I'm not going to use those.
So whenever you see .on that refers
to like something should happen when this event happens.
So submit is one event
that happens whenever you like submit a form.
So ready is another event that happens whenever
that thing has been fully loaded on the page.
So here we're saying when the entire page has been loaded,
do this.
So without this line then we are doing this function before we've
even gotten to the html that causes these things to exist.
So when the page fully loads, then do this stuff.
And this is a very common pattern that you don't want
to do things until the page is loaded.
[inaudible background question] No, well, no, you can do that.
The thing is that like eventually this will probably
get put into like, or should probably get put
into a separate JavaScript file, which you could include
at the bottom but I usually see
like all these script tags at the top.
[inaudible background question] Yeah
so the .ready function is an alternative to this.
[inaudible background question] Sure,
we'll do the last point now.
Insert the text into the div.
So what selector do you want to use?
It's exactly this guy, #exercise1-div.
And then we're going to want to put inside of it whatever was
in that text box and so you can look
at the various jQuery methods that are available to you.
Here I happen to know that I want to use the text method
which is kind of confusing
because I call this variable text
so let's say this is text box.
So we're using the text method and calling
or putting inside of it text box.
So this line is saying that take this div,
replace whatever is inside of it
with whatever is in this variable.
>> And after the lab we'll definitely post our example
solution with extensive comments, similar to this
but with a little more explanation.
>> Yeah.
>> So that if you missed a bit
or don't understand what one line does you can see it
after the lab is over.
[ Classroom discussion ]
So I'll get us started on the second part of this.
So if you haven't fully got this working, flag us down,
we'll help get it working.
But the second part is going
to tease a bit behind the mechanics of the project.
So we'll look at, if you go to cs76.net, there's a projects tab
on the left and there's the link for our first project
which is due approximately two weeks hence.
Yeah, project I've got attention.
As for the project there's a section labeled,
let me get the name right, geocoding, and there's a link
to Google's geocoding API.
So through jQuery, and the project [inaudible],
you're able to make external requests, asking for information
from an external API like the geocoding API.
In this sense the geocoding API allows you to turn addresses
or zip codes into, or get more information about them.
So we're going to extend this example to change,
instead of changing text, when you type
in a zip code we want you to send that zip code
through the geocoding API and get back the city
and state for that zip code.
So as the first test go to link on cs76.net,
go to the projects tab to projects link
and there's a link to the geocoding API.
Look at the example there and try it out just by going
to the URL at the geocoding API.
And definitely talk with the people at your table to see
if you can't seem to find the page I'm talking about.
Then you're going to want to modify this
to make your submit box and the request to this geocoding API
with jQuery's get [inaudible] function.
So I'll float around to help get exercise1 working which was
up there a second ago and then we can push ahead
on with this second example.
>> Okay so once again I'm going to use jQuery for this,
although you can use straight JavaScript but as you saw
in lecture, when you start using Ajax requests
where jQuery becomes like a single line of stuff,
JavaScript tends to be a whole bunch of if else's
and making sure it works for internet explorer and all
that stuff so jQuery makes this stuff nice.
And so you can look through the jQuery documentation looking
for the appropriate functions.
In this spec we give you the hint that you can use getjason.
And so just Googling for that I get this guy.
It will also reference the fact that this is shorthand
for the .Ajax function so jQuery also provides an Ajax function
which is like a very general Ajax can do anything you want.
But it has some shorthand functions like getjason and .get
and .post that fill in some default parameters for you.
So here we're going to use getjason.
And so if we look here we figure out the URL, the data
and success we'll get to in a second but that's going
to be a function that will handle whatever the response
from that Ajax request was.
So first we need to figure out what the URL is going to be.
>> So I want to show jQuery's example .jason.
>> This guy, well that's making a request to, there's a URL
and there's a function so.
The jQuery's documentation, if you look at it,
it's going to give you a bunch of examples for these functions.
Here their example is a $ sign.
When you see the $ sign you immediately jQuery so $.getjason
and then this is the URL they're giving it and this just happens
to mean like if you had a file in your like,
if you had a file inside a folder Ajax called test.jason
you could do this, unfortunately you don't.
You could create one if you wanted.
But you can also include here links
to like http://google something so any type
of URL can go in there.
And then here is an example of a success function
where the function takes one argument, it can take more,
but here we only need to take one argument data,
which is the data that the server returned.
And so then inside of this function we can do stuff
with that data.
And so in our example the URL is going to be something
with the geocoding API and the data that it's going
to return is hopefully something
in which we can find the city and state.
Okay so this is an example URL.
This will only currently work for Cambridge, MA so we're going
to want to programmatically replace this with zip code
and I'll guess I'll just use URL because that's simple.
So how do we do that?
Just zip code so in JavaScript you can concatenate strings
like this.
So to enter zip code just enter the middle
of the string, we can do this.
Yeah? [inaudible background question]
>> Is looking here, one sec, so do you want to try?
Well now we're in, hold on, hit escape and then command.
You don't have the same, common, nice.
So here's an example of [inaudible] API.
If we go to the URL,
maps.googleapi.com/map/ api/geocode/Jason?=02138
and hit enter, this is what we get back.
There's all sorts of data here.
There's something called results,
inside of results something called address components
and long name and short name and all
of this data is what you'll get back
if you do jQuery's getjason function and give it this URL.
And then you can access this data by using JavaScript,
you'll get it back as an object
so you use data.results would be the first thing
and that gives you access to all of these,
everything inside the results.
Data.results.addresscomponent would give you access
to the address components.
And so you may want to try just doing,
without patching the zip code or taking example code here
and seeing if you consult.log or alert data.results,
which come back as an array or object.
But see if you can jason.working without worrying too much
about what you do with the data.
Just you know get it working to the point
where you are sending a request to Google
and you're getting something back
and you know that part is working.
>> It's very common in this, like once you start dealing
with Ajax requests and things, like set up the call.
Don't set up what you actually want to do with the data yet.
Just log to make sure the data got there
because if it didn't get there then everything else you're
doing isn't going to work yet.
And if in Chrome, you should get very familiar with,
well I get to it by going here
but there are other ways to open this.
This little console tab down here
so in this console tab you can just type regular JavaScript
or whatever you console that log
in your JavaScript files appear down here.
I can show you that pretty readily.
For those interested how we got there, you right click
and click inspect element and then click the console tab
or in the view bar click view.
In the view bar click developer, JavaScript, console.
That's the other way to get this console to come up.
And from here you can type in JavaScript and so you can type
in any JavaScript you want in here.
So like I happen to have jQuery already loaded
which means I can also type jQuery on there
so body.css background color red.
It's not css.
It is style.
I have no idea what it is.
Background color boom.
So you can interactively place with your page
in this little JavaScript console
to test out what things do.
>> So let's say you were testing
out a one line jQuery function just to make sure you know
that you're putting the right line in your code trying
to figure out which line isn't working.
>> And this is also where, and so this is
where like I insert console.log ready here.
So this is a very proven thing that I do
like when the document loads, this function should be called
and so I console.log to actually verify that it is called.
And so we reload this page we see down here.
And so ignoring this stuff in the previous reload
but every time I reload you'll see another ready.
Because when the document is ready it's supposed
to console.log that.
>> And there are advanced debugging tools that allow you
to go through line by line and make break points
and pause your code but sometimes when I'm kind
of frustrated and want to figure out which line isn't working,
I'll put console.log12345 and I'll try to figure
out which ones aren't showing up, to figure out which blocks
of my code aren't being run.
[ Inaudible background question ]
>> I literally have no idea and I want to ask David that.
So basically there's three things you're going to need
to be Ajaxing for the P set.
Two of them you need to do jasonp.
I could not figure out why this one I did not need
to so it's obviously something so I'm just going to ask.
I'll get back to you.
I'll post it on the forum.
Yeah there'll be, sure, sure.
We'll take a break or we can continue.
>> We promise we will not progress
without an example solution in the next seven minutes.
So stretch your legs.
I'm going to look up why.
>> Lets first see whether this is returning what I want it
to be returning so I'm hoping that this returns some stuff,
like the geocode API says what the return stuff looks like
but let's just see how this runs again.
So H13 submit, so now since I console.log over here,
the stuff that got returned,
that's what I should be seeing down here.
This and you'll see that I can click on this
to like expand the object and inside
of the object we have a results array,
inside of that we have this guy so I'm going to,
for simplicity I'm just going to copy and paste.
I won't copy and paste just Cambridge, MA.
I'll copy paste this way.
We could go further and like pars it but let's just do this.
Or you could go into the address components
and actually we'll do that.
Alright so you can also do this,
just like see what the object actually looks like.
So now I know that in data, data's going to have,
we have data.results so there's going to be array and inside
of results we only care about the first thing in the array.
So this is how you traverse objects is the .notation
and results is an array.
We just want the first thing in that array.
And so inside of here so now we want
to traverse address components because we want to find first,
we want to find Massachusetts,
which apparently the political type,
and we want to find Cambridge which is local so locality
and administrative level 1 is what we're looking for.
What I just said might have been confusing
but data.result0.addresscomponents
is an array of these address components that contains
like cambridgema02138usa.
And so in those address components we specifically want
to find Cambridge and ma.
And we can find those by looking at the types specified
in these components where 0213 has a type postal code,
which is not surprising.
And Cambridge has the type locality,
which is a little less intuitive.
And Massachusetts has administrative area level1
which is impossible.
So the two things we are looking for are city.
I'll specify in here, I just like initializing them
to nothing, state equals null.
So now we want to traverse this array.
[ Inaudible background comment ]
And as a thing I'm going to go over in a bit,
you might also sometimes see this sort of syntax
so do not use this syntax on arrays.
This syntax is exclusively for objects.
So iterating over objects is this syntax.
The fact that there's two different four loops is why a
lot of libraries have a lot of things like an each function
which reads over objects or arrays blindly
but this is the syntax you want to use for arrays,
which is probably similar
to other programming languages you've ever used.
Okay so as a shorthand I'm going to just say that.
And so now this is where I tend to over consule.log.
Let's make sure things are working
where we want them to be.
So I'm just going to log what code what code you can
actually use.
And it's coming back to here, refresh, 02138.
So we see four things were logged where they're all objects
and inside of those objects are all these things.
So in each of those objects we want to look in the types to see
if it has one of the types we were looking for.
We were looking for specifically how many needs copies
so locality and administrative area level 1.
So there are a couple of different ways you can do this
but how I'm going to do it is if inside comp.types,
so we want to look inside comp.types and see
if either these locality
or administrative 1 is inside of that array.
And so to do that I'm going to do .index of locality.
And so if that returns negative 1, if it returns negative 1
that means that locality is not inside that locality array.
If it returns anything else it's going
to return the index of that string.
And so if it returns the index of that string that means
that it is of the correct type.
So here, if it doesn't equal negative 1 then this component
represents the locality which is Cambridge, I think.
So now we want to store inside of city.
[ Silence ]
City equals comp.long_name.
And I can look back here in case I forgot what it actually is
but yeah it's, if locality is inside
of this array then I want either long name
or short name, it doesn't matter.
Else if comp.types.indexof this guy does not equal negative 1,
this means I found the state and so I'm going
to store inside of state comp.
and just so it's ma instead
of Massachusetts I'll store shortening.
Okay and now after this four loop I'm just going
to do a sanity check where if city is still null
or state is still null, that means that I was not able
to find a city or state for the zip code that you entered
and things have gone wrong.
I don't know what we'll do.
Alert, uh oh and return.
Okay else, now we have our city and state
so these guys are going to need to go inside of,
it's hard to pull this x, notice we're still inside
of this getjason function
so after we have retrieved this data, inside of this we're going
to want to find the city and state and now we still need
to insert the city and state into our div,
which is exactly what we did before.
And the text is going to be city plus, plus state.
[ Silence ]
Okay so questions on what we just did?
In the end we'll put these online with comments
on exactly what everything is for.
[inaudible background question] So index of, if I give you,
well we could run it in the console and let's see
so let's add this array, let's do var array=1234
so this is what array looks like.
Inside of this array if I do arr.indexOf2 it's going
to return 1, yes 1 is the index of the value 2
and index of 4 will return 3.
But if I do index of 5 it will return negative 1
because it was not found in that array.
So I'm using nxl to see if locality
or if administrative area level 1 are inside of the types array
that I'm currently searching through.
And let's run this.
I'll probably get some sort of errors.
Ooh, unexpected.
[laughter] And this is stuff
that you will be doing for the project.
It's unfortunate.
I find the iterating through those address components things
tedious but Google just kind of returns everything at you
and you have to put it together however you want it to be.
[inaudible background question] You're free,
well the spec currently says that you have to email us
about any libraries you want to use so do that.
Underscore is fine is if you want to use underscore.
>> For those unfamiliar,
underscore is a library like jQuery.
It gives you access to more functions
and some functions that are handy.
>> Yeah underscore can be useful in this project.
But if you like, if you don't know jQuery then don't overwhelm
yourself with libraries.
Just use jQuery and get use to that.
[ Silence ]
[ Inaudible background question ]
>> If you save it, what?
[inaudible background question] Yes so in JavaScript,
unlike in C or other languages,
there is no notion of variable scoping.
There is some notion but there's basically only
like global scope and function scope.
So in JavaScript if I define a variable inside of,
not inside of here, inside of here, say blah equals hello.
Then blah will still be accessible down here,
if it happened to be defined inside that if.
So like in C since it's defined in that set of curly braces,
it would not be available outside
of that set of curly braces.
That's not true of JavaScript, which means what I did up here
with settings city equal to null and state equal to null,
I could also have just not said that at all and so what
that means is city is going to be set in here
and state will be set in here.
And down here I can say, and you saw this in lecture,
but if this type of city is undefined or type
of state is undefined, so what this is just saying is
if those variables have not been defined, that means we got
through this whole four loop without hitting lines,
var city= whatever and var state= whatever,
which means we did not find a city or state
and we should alert the same uh oh.
So this pattern type of variable equals undefined is your way
of checking to see if the variable exists.
>> So for those still working on this one, keep working
on it, we'll float around.
Those who have finished this one.
Something else you may want to try is that instead
of the [inaudible] field, the geolocatingapi allows you
to pass in a latitude and longitude.
So lat lng equals and then latitude, longitude.
So give that a try with some made up numbers,
numbers you got from Google maps.
And when that works try using your current location.
The way you can access your current location is
through a cool JavaScript thing call geolocation used
by navigator.geolocate.
It takes a few call backs like getjason did but take a look
at some documentation and see if you can figure
out how the navigator.geolocate function works in JavaScript.
As a hint, it will give you a matching longitude
and you'll probably want to send that long to Google.
But try just getting your current latitude
and longitude using navigator.geolocate.
>> That says get current location, that button.
>> And the easiest way to try it out, right from your console.
Go to your console and type in navigator.geolocate
and then pass in whatever you're supposed to pass in.
It should work for you, .geolocation, .geolocate.
So you type in the console .geolocation.
The console tells us it has two consoles inside
of it getcurrentposition, watchposition and clearwatch.
We only care about the last two but we want
to get this getcurrentposition function.
And no arguments for example.
So no arguments is not the right way to call this function.
It does take one or more arguments.
The call back function is a lot like getjason.
If you try it without them it will tell you that you're wrong.
But not to give what an example callback would be
but if you look it up it will tell you what kind of function
and what kind of argument it's expecting.
And my bottom left corner does that, Rob.
[inaudible background question]
>> Yes so it's an html5 thing
that in newer browsers they have a navigator object
that has this geolocation ability.
>> The same way you have a document under geowindow object.
It just comes kind of built in.
>> You don't have natural scrolling.
>> Correct.
>> So I looked up developer.mozilla.word,
that would be the first link.
That tends to be a pretty good site for documentation.
And here you'll see that this I recall it it has three
parameters, success, errors and options.
So the only one you need to specify here is success.
But remember in the problem set
that there should be absolutely no way for us
to trigger absolutely any errors in your console,
meaning like you should never get any red warnings
down here, in here.
So you will probably want to, in your project you're going
to want to specify an error function that's going
to handle errors appropriately.
If you don't specify
that function then whenever something goes wrong we're going
to get red text in your console.
So quick callback to the previous exercise
that we did before we got into the geolocation stuff.
An error that we did not consider that I had meant
to is what if I enter something that is an invalid zip code?
So even if it is a set of five numbers
that is an invalid zip code
or Google doesn't have any information about it?
So this is something that Google happens to say
that it will return something like its data on status will be
like zero results or something.
So if that is the case this is just another error scenario you
need to watch out for so another alert uh oh, or whatever,
because if you don't look out for this then,
I should do that right here, if you don't look
out for this then here when you say our components equal
data.results0, there will not be a results0
because that array will be empty.
So you need to be making sure that everything is valid
so that you don't get any of these errors.
And for the recent exercise, now back to geolocation stuff,
what I've changed so far is,
like up there I've changed the top to be
from like a text field to like a button.
It says use current location.
And now since I'm using a button all the way up here,
what we used to have is on submit,
since we're no longer submitting a form we're just clicking a
button, now I'm using a different event handler.
So the event now isn't submit, it's click.
So when we click this button we're going
to want to do our thing.
And I've started with using get chrome position,
the success function is going to take the position
and then we need to do things with that position.
And over in the console is an easy way, darn it,
avigator.geolocation.getCurrent Position functionpositionconsole
.logposition, there you go.
Okay, I did this just to see what the object looks
like that this is returning.
And so I can look in here and see
that there's a time stamp field and a chords field.
And inside of chords there is a latitude and longitude.
So I'm going to directly use those and I can say,
this is unnecessary but the latitude is
position.chords.latitude,
longitude is position.chords.longitude
and now inside of our URL we no longer we want to use Google.
Before this was address and we used a zip code.
Now we want to use latlng.
And you can see this just in Googles on the API page
that you can use latitude and longitude and I'll do lat+,
I'm separating them, +long.
So now we're using that.
And let's see what the object looks like that it's returning,
refresh, no that's 3, okay use current location.
See object is it's an array of like 9
so we have 9 different objects in here.
I am still using the first one
which we see contains literally the entire address
so 52 Oster Street, Harvard University, Cambridge, MA 02138.
The rest of these objects as we go down will says United States.
This one says Massachusetts, USA and United States sequence
of characters, Middlesex, MA, USA.
So as we go down this results array we get more
and more general areas along
with some different languages or something.
So the top one is good enough for us
because we're still iterating
over these address components looking for locality
and administrative area level 1.
So we really didn't need to change anything else
to get this working because all this up from
when we're using zip code still applies.
We're just now using lat and long.
[ Silence ]
[ Inaudible background question ]
Yes.
>> Manhattan is a sub locality, like New York, New York.
So if I can have everyone's attention
for a little bit I'm going
to introduce what will be our next exercise.
But if you want to keep working on the previous two,
wherever you are, I'll keep floating, helping with anything.
Or if you want to put those aside and move onto this one,
that's also totally fine.
In the interest of making sure we cover all the topics
and lean toward the project,
I'll just introduce this next one.
So we're actually going to go back to html
from the very exercise, just a textbox and a button and a div.
If you deleted that or extended that it shouldn't be too much
to make a new one with textbox, button, div.
The goal here is to play with local storage and make it
so that when you enter a word
and hit submit it will add it will add to this list.
So the first thing I would do is modify our exercise1 code
from replacing to adding.
Instead of just fully replacing the html, you'll going to want
to get the html that's already there and add
to it and put it back.
That shouldn't be too much of a change from exercise1.
The local storage however we want to make it
when you refresh the page or restore the browser
and come back, the list stays.
Think of this like the to do list of words
that I want to remember.
So first exercise1, for those doing this exercise,
the very first thing you do after running again,
you now have add instead of replacing.
And then local storage whereby you can set,
you can save items in local storage.
So yeah, again any exercises we've been talking about,
we did just email out the solution set,
the draft of the solution set from the previous ones
so feel free to do whichever exercise you like.
If you're looking for a tutorial on local storage,
a quick Google search should bring out the methods you use
to put things in local storage and bring them back out again.
Rob just reminded me that jQuery has an append function
that will add onto the content in a div
so if this div was called text$#text.appendworld,
we'll put world after whatever's inside of there so we'll need
to get whatever's inside of there, remember it,
add to it, put it right back.
Dollar sign, a selector and then .append will allow you
to add things to the content of addend.
So the extra is 1.html that was sent out.
This is literally the only change so far.
He's changing text to append,
for those getting closer to mine.
[laughter]
>> So the objective here is that like after I refresh this page,
all of these highs would stay here but as of right now
if I refresh they're gone.
So as a teaser we have this local storage object in html5
and ignoring what's already in that object
that apparently RJ put in there or something.
You'll notice like if I do localstorage.foo=bar.
Now if I refresh the page and look inside storage,
we see that foo is still there.
So this local storage object persists beyond refresh
of the page and look inside of storage we see
that foo is still there.
And so you can store things in that for subsequent visits
to a page and you'll probably want
to be storing whatever is inside of this div
in that local storage index somewhere.
[ Inaudible background comment ]
And for reference this is a pretty common thing in jQuery
where like here if I say, let's see,
if I say exercise4-div.texthello,
this would insert into exercise4-div.hello.
It would make the text inside of this div hello.
But if instead I used the .text method with no argument,
that retrieves the text that is inside of that div.
Okay so I'm just going to pick,
you can pick whatever name you want
to store inside of local storage.
You can pick whatever the key you want to call it.
I'm going to call it divtext.
So local storage .divtext=alltext.
Okay so now what have I forgotten
to do/why won't this entirely work yet?
[ Inaudible background comment ]
Yes and that's fine so the alternative
to doing this is like, so it's kind of like
if my div currently says helloworlddog
or helloworldcat then my local storage .divtext also
says helloworldcat.
And then if I proceed to add dog I'm completely overwriting what
is currently inside of local storage .divtext.
Instead I could just append to it dog.
So that is an alternative.
But still if I miss at least succeeds
in now they say localStorage.divtext.
I see all that but what is the issue
[ Inaudible background comment ]
I'm actually wondering if that's going to be the case,
ignoring that for now.
Oh, I know why that will be the case.
[laughter] Why does it not currently remember what was
in global storage?
It's remembering it but it should reappear in this div.
Why is it not reappearing in the div?
[ Inaudible background comment ]
Because I'm updating local storage .divtext whenever
there's something added to it but I'm never,
when I refresh the page I need to insert
that text into the div.
So I want to do that, probably on ready.
Okay so when the document loads I want to insert
into our exercise4div.
I want to give it the text and what is,
okay the text we want is localStorage.divtext.
And I could insert that directly in there
but we'll see what this does.
So it correctly inserts the text into the div.
Notice if I insert something, let's do other letters.
Oh there we go, so notice that they're going on separate lines
and that's correct because I put a br tag here, line break.
But if I refresh it all ends up on the same line.
And that's because of jQuery you have to be careful
of what function to use.
So there's text and there is html.
So text grabs literally only the text inside the data.
Html will also grab all of the relevant tags and dates.
So it was ignoring the br tags when I was using tags.
But now we're using html so something it still wrong.
Let's see what it is.
Refresh first, refresh so now we see
that all the br tags are literally in the code and that's
because of this text up here
because we want this to also be html.
So when we say text it was taking the html
characters literally.
Like I wanted a less than sign right here.
When we say html it interprets the less than sign
as the beginning as the html tag.
And there's one last thing that we want to do and that is going
to be, so a frequent issue with local storage
when you're working with, so this looks good now,
as we add things, refresh and it's there.
So frequent issue is like alright now we want to start
over so this works for any array, any object
and this is also true of local storage so to do
that we just type in our console delete a localStorage.divtext.
And so now it no longer exists again.
But what is going to happen when I refresh?
Not what I was expecting.
Maybe that,
[ Inaudible background comment ]
So this is probably fighting me.
Alright so I was hoping it would yell at me but it's not.
It will yell at you depending on,
so the issue here is local storage
but the text is not defined.
And so here when we say bartext=localstorage.divtext,
text is undefined.
Which just happens to work out because inside
if you ever say html undefined it's just not going
to put anything.
The right way of doing this,
and in the project you're almost assuredly going to want
to do this because you're going to need
to work local storage a little bit differently,
is to first say if, and this is what we did before
with if localStorage.divtext,
is not undefined then we'll do this stuff
of actually inserting it into the [inaudible].
And this is the exact same type of stuff we did before
where we were like is this variable actually defined?
If so then we'll actually use it and insert it.
If it's not then avoid any possible errors
that might happen if we try to use it as if it does exist.
Questions on that?
[ Background inaudible question ]
It looks for what?
Yes so I was actually going to ask David this
but the answer is yes for an application you really make.
Remember local storage and also our navigator.geolocation stuff.
All of that is like html5.
It's very new.
If you go back to IE6 or even like early Chrome
and all this stuff, you will not have those things.
And so these will cause errors if you go into earlier browsers.
So technically we should do something like if type
of local storage does not equal undefined that means we are
in a html5 compliant browser that has local storage support,
then we can do this stuff.
And that's, I don't have it in this but same thing
with the navigator stuff.
If navigator does not equal undefined then
use navigator.geolocation.
getcurrentposition.
That is the right way of making any app.
Although if your app is using a bunch of other features
that your website will basically be broken
if it doesn't support local storage,
then usually what happens is if type
of local storage is actually undefined or get a newer browser
or something, which a lot of websites actually do.
Or a lot of websites will say like turn
on JavaScript and stuff like that.
[ Inaudible background question ]
Twenty five bars?
[inaudible background question] Oh yeah
so this is what would have been exercised by another 15 minutes.
So local storage only stores strings.
And you will notice in the, well you don't have to,
but if you want to store an array or an object inside
of local storage then you'll need to store them as strings.
One way of doing that is this convenient, so using in console,
we have jason.pars and jason.stringify.
So what jason.strong5 is let's a, we have some array.
Then jason.stringify of that array will return a string
version of that array or let's say string equals ix.
And then if we jason.pars, that string,
it will return the original array that we had.
So inside of local storage, let's say localstorage.array=x
so when we refresh this page and look
at localstorage.x it's undefined or we do not call it that.
It shows this string 1, 2, 3, 4, which is not a valid array.
And so the way we want to store it is localstorage.array
=jason.stringify the array 1,2,3,4.
Now when we refresh the page and look
at localstorage.array we see it's in appropriate array form
but it's still a string and so we can jason.pars.
And so we're just showing these functions to you
so that you know they're available.
You're probably going to want to use them in the project.
Remember localstorage cannot store objects or arrays.
So if you want to store them you need to first stringify it
and store it in local storage.
And then when you want
to retrieve it you need to pars the jason.
Questions?
[ Silence ]
>> Okay so those are the exercises we had.
The last 10 minutes will be more free form question and answer.
We'll float around and definitely
if you have any questions on the problems you've been doing,
the example solutions, your own solutions,
feel free to ask right now or reach out to us via email
or post to discuss where we can discuss them as a group.
>> And tonight we'll write up like nice commented versions
of the things I just sent out to you.
>> We'll just continue to float.
>> Just to point out, the syntax,
localstorage.foo is exactly the same as localstorage[foo]
so any object you can reference things in either way.
The exception being you can't say like .tilda
or something but you can say this.
It's over.
[ Silence ]