SPEAKER 1: All right, this is CS50, week 10. And you'll recall that last time we introduced one of our additional languages in CS40, that of SQL, Structured Query Language. And this, recall, was a language that we used to query databases, insert data into databases, delete, update, and more, so that we actually have a way of persisting data once we built a web-based application, or really any other application that we want to be able to store data long-term. And we had such statements as create for creating a database or a table, insert, select, update, delete, and a few others as well. And with these relatively few building blocks, we're able to start building a back-end for a web service.
But you don't have to specify them as the programmer when you're declaring variables. Rather, in the case like this, when you're declaring a counter like I, which should be an integer from 0 up to 50, you literally say, var, for variable, than the name you want to declare and then just the rest of the syntax is as we've seen before. Meanwhile, there's another handy feature– and you'll see this in use in various examples perhaps online– is the very easy ability, like in Python, to iterate over the keys in an object. So recall that an object, at least in Python, is really just a collection of key value pairs. But it's an object can also have methods inside of it. But if we focus entirely on data, keys, and values, this syntax here would allow you to iterate over all of the keys and some value coming back.
So maybe if you have a stock object, you could iterate over its name and its price and its symbol, simply by using syntax like this, and an index into the object to get at that object's value. Meanwhile, variables are fairly straightforward. To declare a variable like I, we would say var I equals 0, and a semi-colon. Boolean expressions, meanwhile, are with us still. And these are no different. I is less than 50 might be expressed with this. X is less than y might be expressed with this. So nothing new there. Meanwhile with conditions, we have syntax identical to C. So again, the curly braces are necessary, at least if you have multiple lines that you intend to be associated with the if or the else if or the else. Again we're back to, else space if, instead of L if in Python. But again, there's nothing really new here in terms of content, really just syntax. So after practice and after some trial and error, you'll generally find that it becomes second nature.
And it's also a lot easier to detect if you type something wrong, if something doesn't really line up as you expect. But another way, recall, of viewing this same piece of HTML is in the form of a data structure like a tree, which we discussed way back when in the context of C. And we might draw this same example of HTML with a Dom, document object model, which is a fancy way of saying tree. And that tree might look like this. It's got some special root node that we'll just generically call document, because there might actually be some other stuff like comments or whatever up there. But the root element of a web page, recall, is HTML. The second thing you type is open bracket HTML. The first thing you should type with HTML5 is open bracket doc type HTML. So you can think of the doc type as meaning this node essentially, and the open bracket HTML close bracket meaning this root element. Of course this page here has both a head and a body.
And that seems a little strange. But we will see contexts in which functions don't need names if you're only going to call them once, or if you only need to refer to them really once. So we'll see how to declare and define a function that doesn't actually have a name like foo or bar or whatever. Meanwhile, we're going to see a methodology involving callbacks, which is very similar in spirit to the events I rattled off a moment ago. Whereby a call back is just a function that's supposed to get called when something happens. So in other words, Google and Facebook with those user interfaces, they are registering functions. Really, they're registering callbacks, so that when the user clicks on an X or when the user clicks on a checkbox, or when the user clicks and drags on a map, they have in advanced register a function that gets called back. It's like leaving a message for someone on voicemail. They call you back in response to that voicemail. They call you back in response to the beep that their phone makes when they've received that.
So it triggers some kind of functionality, these callbacks. Callbacks are just functions that have been configured to be called at a certain point in time when something happens. Now meanwhile, and lastly, we'll talk about AJAX, which isn't a technology unto itself but a use of various existing features within browsers that allow you to query from a browser, a server to get more data even after the original page has been loaded. Let me go ahead here and create a file called, say, Dom 0 dot HTML. Document object 0 dot HTML just to line up with some of the examples that we'll place online for everyone to play with. I'm going to go ahead and start my page as I usually do. And I'm going to go ahead and say HTML. And then in here I'm going to have a head tag and in here I'm going to have a title tag.
And I'm just going to call this Dom 0 for simplicity. Down here I'm going to a body tag. And in here I'm going to have a form. I'm going to give this form, similar in spirit as we did in our discussions of CSS, a unique ID, simply so that I can refer to it as a demo, a demonstration. But let's come back to what more I want to associate with that. First let me go ahead and give it an input, an ID of names so that I can refer specifically to this input field. Let me give it a placeholder of name. And let me say that the type of this field is a text field to close that tag. And then input type equals submit. So a very, very simple web page that looks like this. Now what could go wrong if I present a user with a web page like this? Well, he or she might not give me their name. They might just click submit and this form is going to get submitted to some server.
So this is how in this example I've defined a function called greet. I've put it inside script tags, open and closed inside of the head of this web page. Now, nothing's going to happen with that unless I tell the browser to do it on an event. So I'm going to go into my form tag here and say on Submit, go ahead and execute the following code. Go ahead and call the greet method and greet function, and just for good measure return false. But more on that in a moment. So again, my function's defined up top. But nothing happens. Again, when you define a function, nothing automatically happens until you call it. So when am I going to call it? On the form tag here, I have an on submit attribute, which is new today, that says, call the greet function and then return false. But again, more on that in just a moment. So what actually happens here? Let me go into another window, open up DOM 0. And you'll see, if I now zoom in on this form, will see that it's a very simple HTML form with just a name field and a submit box.
Fortunately that doesn't come up too often on actual websites. All right. So we seem then to have the ability to not only get data from a web page programmatically and display it dynamically. But can we design this code a little better? Well it turns out that we technically don't need to co-mingle our code and our HTML. And notice too there's one other line of code here that's a little sloppy. I mean literally between these double quotes do I have two statements– greet, which is a function call, and then return false. The reason I had return false is that if I didn't, after clicking Submit and submitting this form, the only thing stopping this form from just being submitted to the server is return false. This says, hey browser, even when the user tries to submit this form, don't. Return false. The default is true. Otherwise, if I didn't have return false and I click Submit, I would see that alert as expected, but the moment I dismiss it, I'm going to be led to some other web page, presumably wherever the form is going to be submitted, which coincidentally happens to be the same page.
But now that we're developing client-side applications, client-side web apps, we don't necessarily want forms to be submitted to the server. We want to use them, for now, only within the confines of a browser. Indeed there is no back-end, there is no action attribute for this particular example. But this feels messy. Any time in CS50 when we've introduced some new language like CSS in the context of HTML, or our HTML in the context of Python via our Jinja templates, did we try to factor out one language from another, so as not to blur these worlds and make the code very messy, very unmaintainable. So how can we begin to remove, from these quoted values, code, but still have this feature of listening for a form submission? Well let me go ahead and propose another variant of this program, that I'll go ahead and call DOM 1 dot HTML. I'm going to start with the code from before, but I'm going to make a few changes. Instead of putting it in the head of my web page, for now, I'm actually going to put it down here in the body.
And it turns out that provided that node in the tree is a form, and indeed it is, that has associated with it a property by the definition of HTML5 called on submit. This is a property, that if you assign it the value of a function, that function will get called when the form is submitted. And yet what function do I want to Call Well, function open paren close paren seems to omit a key detail that we've seen in Python and C, which is the name of the function. But here's an example where I don't care what the name of this function is. I don't need to know the name of this function. Because all I need is a function, a chunk of code that will ultimately get executed when this form is submitted. And that line of code is identical to what it was before. So just to be clear, this anonymous function, so to speak that I'm using, is not strictly necessary. If I really wanted to, I could do something like this. I could declare a function called greet, just as before. And I'll format it exactly as I did before. And I could declare this right up here.
And then down here I could say, greet. In other words, the on submit handler just wants to know what function to call. So fine. If I find a function call greet, I can tell on submit to call greet. Notice, no parentheses here. I don't want to call the greet function when that line of code is executed. Rather, I want to assign that function, which you can think of as a variable unto itself to this on submit handler. But why? This hasn't really gained me anything. Yes, it's nice that it's called greet. But I'm defining a function called greet only to configure my browser to call that function one line later. The nice thing about anonymous functions is that you can just kind of tighten things up. Why clutter your namespace so to speak? Why fill up your brain with names of functions that you're never again going to need? And so more common and cleaner, better design arguably, would be something like this.
Meanwhile, after that, an order is generally important when including things like this. Let me go ahead and do the following. Up here notice that I have this line of code, which generally is a good thing to have because it says the following to the browser. Hey, browser, when the document is ready– that is, when the whole web page has been loaded, when all the bytes have come back from the server, please go ahead and execute the following code. And we'll see that this allows us to ensure that things don't happen sooner than we actually expect. Specifically, let's do the following. When the document is ready I want the browser to execute the following lines of code that I've highlighted here– dollar sign, quote unquote, hash demo. It's kind of a mouthful. But this is simply reminiscent perhaps of the CSS syntax that you might be familiar, that simply says, hey browser, go get me the element from the DOM, from the tree representing this page, that has a unique ID of demo.
So hashtag demo is just a more succinct way of saying, document dot get element by ID. You can do this all in just a few characters. And the dollar sign here is a feature of jQuery. It's actually just a synonym for jQuery. Dollar signs can actually be variable names. So dollar sign quote unquote hash demo means, hey, browser, execute the equivalent of document dot get element by ID, quote unquote demo. Just more succinct, even though it's a little bit cryptic at first glance. Meanwhile, submit, not to be confused with on submit submit– submit is a function that per jQuery's documentation says, hey, browser, register the following event handler for the submit event. The way you do this is you provide the library with an anonymous function, which in this case I've just said function. It takes one argument. And I would only know this from having read the documentation. Function takes an argument that we'll call event. But we can call it call it anything we want. And then inside of this code, what do I want to do when the demo form is submitted? Well, I want to use alert.
But I want to paste in this value. So again, just new syntax here. And it's fine if you prefer the other syntax for now. Dollar sign quote unquote hash name, means go get the element from the DOM that has a unique ID of name, and go get its value using this method call. So jQuery essentially does this. jQuery wraps existing elements in a DOM. It goes ahead and adds like another bigger rectangle around those smaller rectangles that give you additional features, among which is the ability to use these CSS-style selectors, among whose features is to call like dot val and get the value without having to do dot value, which isn't all that compelling in this case. And then we're appending, in this case, an exclamation point for good measure, just so to show that we can to continue to concatenate beyond one string. And then lastly, is this, which granted, more verbose– event dot prevent default just means, hey, browser, whatever your default behavior is for handling forms, don't do it.
Prevent it, because I want to handle this form submission. So this is a really long way of saying, this is another way to implement exactly the same program that we did earlier, albeit with an added exclamation point, which has nothing to do here with jQuery. So why is this a good thing overall? Well one, your code will actually get shorter over time. But it's fine if you'd rather not use this. But this first line was actually rather important. If I instead were to implement this code like this, there's actually a problem. And actually there's a problem even if I were to do it this way. If I were to go back to DOM 1, and I were to do something like this in this example, and not use jQuery at all, but just, in my head tag, have a script tag that has this code here, there's a problem of the order of operations. On this first line, when I say document dot get element by ID quote unquote demo dot on submit, assign that listener this function, it's too soon.
Or we can use jQuery which frankly tends to be more common, at least when using other libraries as well, which says that exact same thing. And in fact, a little bit more than that via this line of code here. So just another way of doing something, another form of syntax. But we won't necessarily assume that or complicate things by using that library syntax along the way. All right. So now that we have the ability to access data inside of my web page, specifically in forms. And I have the ability to alert the user, it would seem we can actually create useful features, not silly little programs that just say hello, world, or hello, David. What if I now started updating past examples to do client-side form validation? In the past, a couple of weeks back, when we did like the Frosh IMs website, or really any website that submits data– maybe CS50 Finance, if the user doesn't cooperate and doesn't give me a valid symbol or doesn't type his or her name or password or the passwords don't match in the case of registration, the data gets submitted to the server nonetheless and then your Python code thus far has been using an if condition or l if or whatever to check if the user provided the data that you expect.
And then we said, no, not really, because we didn't actually have a back-end at that point. But a lot of things can go wrong when we present the user with this many things to do. Now we know from Python, we can catch these things, and we can apologize and display an error message on the screen. So we have all of that program added capability. But what if we could create a better UX, user experience. A lot of websites do fancy things these days like, they don't actually submit the form and then show a big erroneous message with a cat. Instead, they just show the text box into which you were supposed to type a value into in red, or green if you got it right. Or a little alert message saying, you need to give us a longer password, or your name, or your email, or your passwords don't match. But you can do all this instantly on the client side, if we somehow can hook into this HTML. So all of these inputs can be uniquely identified, especially if we go at our own IDs. So let's see if we can't take things up a notch and actually write some code that validates a form like this. I'm going to go ahead and do the following.
Inform 1 dot HTML, our next version of this program. We'll start with where I began, with just a simple form. But below this form, just for now so we can get things started, I'm going to go ahead and have a script tag. I'm going to declare a variable called form and call document dot get element by ID quote unquote registration. Why? Well, I'm going to go ahead up here and add an ID that equals registration. And again, here I'm using double quotes in HTML, even though both single quotes or double quotes are allowed. Down here I'm using single quotes, mostly just to be conformant with convention. But you can certainly stylistically do whatever you want with both of these. Now I'm going to do form, which is just an HTML form, and say on submit, get function.
So in other words, hey, browser, when this form is submitted, call this anonymous function. But again, the fact that the function is anonymous really is not an interesting detail. It just means it has no name. This is the chunk of code that will be called when this form is submitted. All right. What do I want to do? How about this. If form, its e-mail field has a value that equals equals quote unquote, that's a problem. Let me go ahead and just alert the user, missing email. And because we don't indeed want the form to be submitted, let me go ahead and return false. Else if, form dot password equals equals nothing– the so-called empty string– then let me go ahead and alert the user that we're missing their password. And then let we return false so that the form does not go through because it's not ready to go through. How about else if form dot password dot value. Oops, and up here I need value as well. Otherwise you get the element from the DOM, you don't get the value inside of that rectangle.
Else if form dot password dot value does not equal form dot confirmation dot value. And why confirmation? Well, if I look back at my HTML, the first field was called e-mail. The second field was called password. The third was called confirmation, even though it's also a password field, because that's where I want the user's password again. But if those passwords don't match, let me tell the user, passwords don't match semi-colon return false. Now wait a minute, my color– my syntax highlighting is all messed up. Why? So this is a common gotcha. If I just want to use English grammar in this case, don't is the right spelling there. But because I have quotes just like in C or in Python when you've used double quotes inside of double quotes, you're going to confuse the program in this case. And so I need to escape this. But as in other languages, escaping a back quote here is as simple as this. Or if you don't really like that because it just looks a little ridiculous and a little harder to read, we could switch to double quotes here.
And the browser's default behavior in that case is going to be to go ahead and submit the form to the server. So let's try that. Let's go into form 1 dot HTML. Notice that if I zoom up here, we have more fields than before. E-mail, password, password, again I agree in register. So let's try this. Let me go ahead and say, no, I'm not going to give you any of this information. So let me click Register. Missing email. All right, fine. I'll cooperate and give you at least my e-mail, mail in at Harvard dot edu. Let me click register now– missing password. Now there's the additional checkbox there because now Chrome, or your browser more generally thinks that, maybe this website's buggy or it's being malicious or annoying at best. Let me not check that box, otherwise none of the rest of the demo will work.
All right. I'll give you a password. Register. Passwords don't match, that's because I didn't type it again. So let me type the same password again over here. Nice. Ah, checkbox unchecked. All right. Agree, register. Ah, and it even wants to save my password, but not really. So where did this actually go? Well just to show you what's going on behind the scenes, notice that the action attribute of the past couple of forms have been slash register. Well it turns out with today's examples, I'm actually currently running Flask. And inside of there I have a couple of routes. We're going to use one of those in just a bit. For now I'm just using this one here. I have a route for slash register, that calls a function register that simply renders a template called register dot HTML.
So where did that text come from? Again, this is just stuff from a couple of weeks back. If I go into registered dot HTML in my template's directory, it's just that. You are registered. Well not really. So we're not focusing on the back-end. We're not focusing on Python. We're not focusing on Flask. But I do have it running right now, so that we can see what does happen if the form is submitted. But that could be any server in the world. It could even be Google if we're building that search engine again. I just need something running there. Let me go ahead and show you just an alternative take on this form, version two, that does things using jQuery. Again we won't dwell as much on this. But do get familiar with the syntax, because you'll see it everywhere online. This says, hey, browser, when the document is ready, go ahead and associate this anonymous function with the submit handler of the form with this unique ID. And then here a slightly different syntax by which you can select fields on the web page.
But I'm adding one additional library. This one that supports Bootstrap, so that if the user doesn't cooperate with this version three, notice they can't even click Register without the following happening. Red email, please fill out this field. Red password, please fill out this field. And by the way, not long enough, because it's not even any characters. Password again, please fill out this field. Checkbox unchecked. So you can immediately give much prettier output to the user without using that sort of a lame prompt that's just going to pester the user again and again. And even though there's still an opportunity, I think, to improve the aesthetics, this is much more akin to web 2.
Notice, on my input, not only do I have a Bootstrap class, which I just read from the documentation and in the unique ID, I've got a required attribute. And by saying required, that's a clue, not only to the browser, but also to this library specifically that I should not be allowed to submit this form until this field is filled out. Now notice down here, input class equals form control, which is just a Bootstrap thing. Data dash min length equals 8. This is how that library knows that I, the programmer of this page, wanted the user to type in a password that's at least eight characters long. It turns out, in HTML5, you can prefix, or rather you can invent your own attributes. Any attribute that starts with data dash, and then some other sequence of characters can be your own custom attribute that does not come with HTML itself. So a lot of libraries, this one among them, use those data attributes in order to configure themselves. In this case, it's configuring itself to use a minimum length of eight.
That's also required. Down here it's a little more advanced. But I just figured this out by reading the documentation. Down here, notice, I've got that confirmation text box that's also an input with a Bootstrap class data dash match equals hashtag password. So this is– and you'd only know this from the documentation of the library– this is how the author decided to let us configure this text field in such a way that it must match this password field. And you know what, data match error– I would only know this too from its documentation. But the way the author designed his or her library is if there is an error and the passwords don't match, this is the read text that I want the library to display on the screen. And though it's cut off, this field too is required. And meanwhile the checkbox, if we scroll to the last feature here, that too has been prescribed as required. And notice, I've also added some divs here and there, help block with errors.
How you use them is going to totally differ. And indeed, part of the process of making a final project or a web application or a mobile application in general, is using a fundamental understanding of programming and loops and conditions and functions and so forth, but then googling around and looking up documentation that empowers you to do other things with that understanding, using other people's code. So again, the goal is not to absorb all of this en masse, but rather to realize the fundamentals, the ingredients by which we can configure and do things ourselves. Let me go ahead and propose now this example. So back in my day, when I first learned HTML, for better or for worse, mostly for worse, there was a blink tag. So someone back in the '90s thought this was a good idea. Let's empower people to have blinking text on their screen for everyone to see. There was even worse, perhaps, or as bad, like a marquee, where you could scroll text across the screen from left to right or right to left– I forget which direction– and that too felt like a good idea at the time that has since been removed as well.
But it invites an opportunity, I dare say, to reimplement this feature, even though browsers do not support the blink tag now. But I can figure out how to do this. Right. What's going on? There's some big text on the screen, that's roughly centered. So I can probably use some CSS for that to make it big and bold and centered. It's blinking on and off. Well what does it mean to blink on and off? Again, reduce this to first principles. What capabilities does a browser have? Clearly to display text, also to display colors, we have seen. So maybe the act of blinking, hello, world, is really just a matter of hiding it, showing it, hiding it, showing it. Maybe there's a way to do that. And indeed there is in CSS. Or maybe it's still there, it's just going black to white to black to white to black to white. So it feels like, so long as I have the ability to kind of sit-in a loop, maybe even an infinite loop if this just keeps going, and every second or so, every half second go ahead and change from black to white, to black to white, or hide show, hide show.
But how did it do that? Well, it turns out that browsers have the following capability– one, to declare functions. And we know that already. Two, to get elements by their ID. And we know that already. And here I'm just declaring a variable called divs, so my code's a little more succinct. But it turns out that elements on a web page, certainly divs, which are just big rectangular divisions of the page, have a style property associated with them. And a style property, in this case, lines up with that div element, CSS properties, if any. And if I want to change the visibility of this div style, and visibility happens to be a CSS property that we haven't necessarily used, but if you googled around you'd see an online reference of available CSS properties. If the visibility of this element equals equals hidden, I'm going to make it visible.
38 comma negative 77.11. So that's my latitude and my longitude. Now that's not all that interesting unto itself, but let me go to something like maps.google.com. Turns out you can search by latitude and longitude. OK. We didn't have to go very far to triangulate my position there. There we are, roughly in the middle of the building, Sanders Theater here in Cambridge. So that's kind of cool. This is all to say that a browser can apparently infer your location. Now why is that useful? Well if you're building a website that is designed to show maps to the user like Google Maps or MapQuest or Yahoo Maps or Bing Maps or any number of tools, it's kind of a nice feature to just let the user see where he or she is in the world by default, rather than just showing them the generic United States or the whole globe. It'd be kind of nice to at least show them the general area.
And indeed, that's exactly what happened when I went to Maps.Google.com. It knew, within some range, where I was already, even before I typed this in. If you're implementing Yelp or some restaurant review site or something like that where you want to be able to find something near you, it's nice to not have to have me, the human, type in my GPS coordinates, which I certainly would never know. And it's nice to not make me type in Cambridge, Massachusetts or New Haven, Connecticut or whatnot, which is in 06511. Rather just let the browser actually figure out where I am, so long as I consent to actually doing that. I did get that right this time, right? OK. So why is this a useful thing? So this, of course, is useless. Like, who cares what GPS coordinates I'm at? Not all that useful unless you want to target me right now in a map. Rather, we can do something more interesting. So we need the ability to actually get a map. Thus far I have no ability to pull down pictures of maps.
Give me a variable called URL. Set it equal to quote unquote slash quote, which looks like a route, question mark symbol equals, closed quote, plus which is concatenation, the value of the symbol field. Now what is this? Let me fast forward to the HTML down here in AJAX 0. Pretty simple web form and I'm doing it old school here. Form on submit, call the quote function return false. And then have an input whose ID is symbol of type– and it's a little cut off– is text. So what does this page look like? If I go over to AJAX 0, and open this here, it's a very simple web page that simply has a text field with a placeholder that says symbol, and then an HTML submit button that says get quote. But I want this site to do is the following. If I type in GOOG for Google's stock ticker symbol, I want to know right now that it's worth $772.02. If I type in something like Microsoft, that's $59.705. So I'm getting another digit of precision from Yahoo Finance as it turns out, as we'll see.
It contacts a server at a certain URL and expects to get back a JSON object, which we saw an example of a bit ago. And what does it do? It will call a function, in this case anonymous, but that's an immaterial detail at this point. And it will pass to that function a reference to the data it gets back from the server. So again, get JSON somehow figures out underneath the hood, how to make an HTTP request to that URL that's passed in as the first argument. And when the server finally replies, this anonymous function is called. It's passed that data. And then we call alert on data dot price. So what is inside of that object? Well I can actually simulate this. Right. If you understand HTTP, you can do all of this yourself. My IP address happens to be on my local machine, 127.0.0.
Otherwise if it's a number you can just write it like that. Commas are separating each of those key value pairs. And again, you must use double quotes in this context, which is a long way of saying, this is what my slash quote route returns. This is not a web page. This is not my quote route from CS50 Finance, which was must prettier and it actually had CSS and HTML and it said, a share of Netflix costs such and such. This is just raw data. And this is where AJAX gets compelling. AJAX is the use of raw data like that, you have programmatically requested from browser to server, after the original web page is already loaded, because you want to get more data for the user, perhaps in response, as in this case, to his or her input, like when I typed in Netflix or Google or Microsoft.
This web page isn't all that pretty though, of course. Right. It's ending up just using that alert. And it probably is the case that we can do things a little bit better. And indeed we can. Right now, again, I've kind of regressed. I should not slip into this habit. It's fine for perhaps a lecture demonstration, but let's clean this up right now. If I go into AJAX 1 dot HTML, notice I've gone in and cleaned up my HTML. No longer do I have some hackish call to a function semi-colon return false inside of the value of an HTML attribute. It's just bad design to do that. It's fine to sort of get warmed up. But let's get rid of that, clean up my HTML, and now relegate everything to the top of a file. I'm still using jQuery, but I need one additional line, recall. Now I need this line here. Because a browser reads my code top to bottom, I want to make sure that this code is not executed until the page is ready.
In other words, have a URL or partial URL that says to my browser, hey, browser, besides the page you're currently reading, go get this file as well. Execute any code in there and then proceed to run whatever's inside. All right. But– but, but, but, I bet we can make this even cooler. It is pretty, pretty lame to keep using these alerts. What if instead we had this capability as well. In AJAX 2 we have this example here. Let me go ahead and zoom in. And let me go ahead and type in NFLX for Netflix and click get quote. I don't want that damn alert anymore, which is pretty hackish. And again, it's going to look ugly and different on different browsers. Let me click, get quote. Woo, hoo, hoo. Very nice.
So this time it seems to have embedded the response in the web page itself. And that's going to change GOOG, get quotes, aka Alphabet, or Microsoft, or whatever other company. Somehow we're changing the page. In other words, now we're not just using this out of band alert function. We are changing our DOM. And in fact, let me do this. Let me reload the page to get back to original state. Let me control or right click on Chrome and go into Elements. As you may know here, notice that here in my web page, apparently is a paragraph that we can't see, because it's got no text inside of it. It's just an open tag and a closed tag. But notice the unique ID called quote. And notice what happens.
None of this is happening on the server, these changes here. It's just in my own local browser. And indeed if I reload, the changes go away. But if you think of this sentence here as being like another row in your Gmail inbox, or another message in your Facebook chat window, that's all that's happening. Now I might be just clobbering, that is deleting and changing the previous sentence. But there's nothing stopping me from just writing every individual message to the screen again and again and again. I don't have to overwrite it as I'm doing here. So how do we do this? So if I go ahead and open up now, AJAX 2 dot HTML, it's almost entirely the same as before, except I am now embedding inside of my DOM via these method calls, the actual data I want the user to see. Indeed, this is saying, hey, browser, go get the HTML element whose unique idea is quote.
I realize, you know what, it'd be a nice feature if after the user searches for a stock quote that we not only see it but we also reset the form to be a blank value. So notice that this symbol refers to a unique element, the unique ID of an element that's not a paragraph tag, as this one is. This is an input field. And input fields don't have HTML inside. They literally just have textual values. So I use dot val instead, passing it in an empty string. But the net effects, notice, this time with that line is the following. Once I've added that line, I have, GOOG, get quote. And notice the field clears itself this time. Once I have Yahoo here, get quote, it clears itself this time. So by adding that kind of line to this example, which just happens to be using a bit more jQuery, I now have the ability to reset the field as well. All right. Now where was that JSON coming from though? Well recall in application dot pie, we had a couple of routes, one of which was register, which was not all that interesting.
To be cleaner I could factor this out to a separate file but I wanted to keep the demo in lecture pretty succinct. So everything's in this one page. HTML, body and hash map. So the commas in the CSS declaration here just mean, apply the following properties to the HTML tag and to the body tag and to whatever element has this unique ID. I want to make sure all three of those are 100%, because by default your web page has no height. Because if you have no content there's no height. But I want to make sure that my web page literally fills the browser. And I don't want any white margin around the edges. I want everything flush up against the sides and the top and the bottom. So that's all this does for me, nothing more than those aesthetics. Down here, in the body of the page, notice that I have quite simply a div that has nothing inside of it, open tag close tag, but that has unique ID called map. This is really a place-holder where I want to put a map. Down here I have my script tag.
I want to be zoomed up higher. And I would know what number to use by trial and error or from the documentation. Then I want two markers. I want one marker, one little red pushpin on Cambridge, one pushpin on New Haven. And from some googling, I found that the latitude of Cambridge is roughly 42.3762 and the longitude is negative 71. And New Haven's 41 and negative 72, give or take. And the map I want those markers to be positioned on is map. So map is the key, per the documentation. Map is also the name of my variable. A little confusing, but it also keeps things clean because I mean what I say. So with just these few lines of code, I have implemented a function called INET map, whose purpose in life is to instantiate a map– create a map, and put it in this div. Then with these chunks of code, I'm saying give me a marker, a little pushpin, at this position.
And I keep saying API. API is just application programming interface. It's a generic way of saying, someone else has written code that you can use, and the API describes how you use it. Indeed, when I keep saying, I've read the documentation, I've read the documentation, I really read their API or some human-friendly version there of– a user's manual. And for instance, their API prescribes that this special object map it takes in a reference to the elements in which you want to put the map. Then it takes in an object as implied by the curly brace and the curly brace that takes at least these keys, the center of the map, and a zoom level– or at least those are the two keys that I'm using. Meanwhile, the API for Google's marker specifies that you should also pass in an object, per the curly braces, that gives it a map on which to put that marker, that pushpin, and a position at which to put it.
And I'm just doing that twice. So application programming interface will mean a little something different in real terms depending on whether you're using Google or Bing or any number of tools completely unrelated to Maps. But it just refers to features– functionality that someone else has provided that you can then integrate typically into your own program. So what if I now visit Map dot HTML? What do I get? I get a map of the Earth, or of the United States in this case, centered roughly around the middle of your country. And then I have a marker here for Cambridge, a marker here for New Haven. But, notice, this map has so much functionality built into it for free. I can click and drag. And notice– and if you look quickly– well now we are literally over the edge of the Earth. So let's go back.
And no matter what angle I look at this one, I really can't tell what it is. And it's not actually one of those magic eye things where you just kind of stare through it and something appears. Rather, there's a lot of noise here. And there's that image hidden. If we actually read the information here, we'll see that it contains an image of something famous. However, the image has been distorted. The famous object is in the red values. However, the red values have been all divided by 10. So they are too small by a factor of 10. So it's like Nick turned a knob and ratcheted down all the red by a factor of 10. The blue and green values are all just meaningless random values, noise, added to obscure the real image. And Nick tells us, you must undo these distortions to reveal the real image. First, set all the blue and green values to zero, to get them out of the way.
So Nick suggests, and I'll take that advice, that I should first set the green and blue to 0. So I'm going to do IM for image. And that's the variable he's defined up there. And just for good measure you can think of this identical as before. We'll make it just like we did with our variables declarations. Image dot sets green at location x, y to 0. So again, I know the syntax for this API only by having read his documentation. Image dot set blue at location x comma y to 0. And Nick has given me this handy run save button. Let's do that. He is right. So this is another copy of that blue and green image. And I definitely can't really make out the image. I mean, it looks like– there's a little bit of red there. I can actually way up close here– and perhaps on your screen you can see the faintest of red. Let me enhance that.