Lecture 11

If the request was made with the GET method, then our application returns the template for the registration form in register.html.

If the request was made with the POST method, and both name and dorm were provided in the form, then we INSERT that data into our database with db.execute. Otherwise, we return failure.html.

And remember that, to plug in values for our queries, we want to pass in each user-submitted argument separately, so the execute function can sanitize them for us.

The form actually submits the ID number of "David from Matthews", instead of that string, since there might be multiples. But with a unique, primary key to identify records, we can be sure that we’ve selected the right ones.

So in our unregister.html template, we have something like this, where the form’s option has a value with the id of each registrant. Even though the user will see the names and dorms, the form will send just the ID back. And recall that registrants is a list passed in from our controller code in application.py.

{% for registrant in registrants %}
    <option value="{{ registrant.id }}"/>{{ registrant.name }} from {{ registrant.dorm }}</option>
{% endfor %}

Functions are declared with the word function, and require curly braces.

function(bar, baz)
{
    ...
}

We can even have unnamed functions, anonymous functions, that we’ll soon see.

let i = 0;

We create variables with the let keyword, without explicit data types.

do
{
    ...
}
while (true);

while (true)
{
    ...
}

for (let i = 0; i < 50; i++)
{
    ...
}

for (let value of array)
{
    ...
}

for (let key in object)
{
    ...
}

Loops are quite similar to those in C, and variables are loosely typed like they are in Python, with var as the keyword to declare them. And true and false are lowercased.

We can also iterate automatically over the items in an array, or list.

JavaScript also has objects, which we’ve seen in Python, a type of variable that contains keys and values, like structs in C.

if (x < y)
{
    ...
}
else if (x > y)
{
    ...
}
else
{
    ...
}

Boolean expressions and conditions, too, are the same as those in C.

let numbers = [4, 8, 15, 16, 23, 42];

Arrays can also be declared, but we don’t specify the type of variable that we’ll store. And like lists in Python, they automatically grow and shrink.

let quote = {
    name: "Netflix, Inc.",
    price: 199.32,
    symbol: "NFLX"
};

Objects, like dictionaries in Python, have key-value pairs, that we can access.

For strings, single and double quotes are also both usable, as long as they are opened and closed the same way.

In the body of the page, we create a simple form with a text input with an ID of name. Then, we specify that the onsubmit event handler for the form will call greet(), and we use return false; to prevent the browser from trying to submit the form by default. We also use autocomplete="off" to turn off the autocomplete dropdown in the form’s input, and autofocus to automatically bring the cursor into the form field, so we don’t need to click into the box before we can type in it.

In the head of the page, we use the <script> tag to write JavaScript code. We declare the function greet and call the alert function with the name from the form when greet is called. To get the name in the form, we use document, a global variable that contains the entire page, and the built-in getElementById function of it, to select the element with ID of name. That element, an input text box, has a value attribute, which is the value inside it. And finally, we substitute that into our string with backticks, `, as shown.

This way, our code is more readable, and we can have different people working on different areas of our application.

We’ve moved our <script> tag to the bottom of the page, so our code only runs after the rest of the page has loaded.

And we can again use document, a global variable that contains the entire page, and the built-in getElementById function of it, to select the element with ID demo, which is our form. Then we set the onsubmit event handler of demo with our script to an anonymous function, inside which we write the code from earlier.

Alternatively, we could have set the event handler to call another function:

...
function greet()
{
    alert("hello, world");
}

document.getElementById("demo").onsubmit = greet;
...

form1.html, where user input is validated before it’s sent to the server, so they’ll get quicker feedback

ajax0.html, where we can make requests from the browser, and retrieve data without going to another route or refreshing the page

map.html, where we can display an interactive map that we can add markers and data to

Our form element is standard, with some fields we want to collect as inputs, and to validate the input before it’s sent to the server (since we do have an action for the form to be submitted to now), we write the script below.

First, we get the form element in the HTML page by its ID of registration, and name it form as a variable in our script. When the submit button is clicked, we want to call an anonymous function, and that function will check each of the inputs for a value. If there is no value (with the ! as the "not" operator), then we return false;, which stops the form from being submitted. And if all checks pass, our function returns true, which allows the form to be submitted.

The syntax is a bit different now, but the first line of our new script is $(document).ready(function() {. The $ is now a global variable that’s defined by the jQuery library, which we linked to in the line above. $(document) selects the entire page from the browser and wraps it with additional functionality. ready is one such feature, which allows us to call another function as soon as the page is ready, since a page might need to load lots of different pieces.

Below that, we use syntax like $("#registration") to select elements on the page based on their ID, and use .submit to attach a function to be called when the form is submitted. The # syntax comes from CSS, and we can use more complex selectors like $("#registration input[name=email]"), to select the element with a name of email, of type input, within the registration element.

We can visit the page and see that we got an alert with new data, and a new request in our Network tab:

And we can click on the request itself to see that it is an object in JSON, JavaScript Object Notation, like a dictionary in Python.

To get this feature, we have a simple HTML form where we can input a symbol, and we use the onsubmit attribute of the form to call the quote function. quote, in turn, uses the jQuery library’s getJSON function.

The first argument we pass to getJSON is "/quote", which means that the browser will use that URL to get data from our server.

The second argument is a JSON object that we want to give to the server as part of our request. In this case, we are passing it an object with a key of symbol, the value of which is the value the user typed into the text box. The getJSON function of the jQuery library adds this to the GET request it sends to the server.

And the last argument is an anonymous function. This time, the anonymous function takes an argument of data. Furthermore, it is a callback function because it will only be called when the data comes back from the server. And that function, when it does get called with the data, simply alerts us to the price attribute of that object.

The navigator global variable is provided by the browser, and includes various pieces of functionality. With geolocation.getCurrentPosition, we can get the user’s latitude and longitude. But notice that the argument to that function is an anonymous function, which writes the coordinates to the page, and that function will only be called once the location is determined. Our code doesn’t need to wait before moving on to the next line, if we wanted to add other functionality to the page.

By changing the visibility attribute of the greeting div, we can make it appear and disappear. We write a blink function that toggles that attribute, and we call it with window.setInterval, which calls some function every so often. Here, we’ve specified 500 for every 500ms, or every half-second. And window.setInterval is another example of asynchronous code, since our own code can move on and do something else, rather than be in some infinite loop that calls blink over and over.

An Application Programming Interface is just some way to build a program on top of some other software. In this example, Google Maps provides an API through which we can write code that embeds a map into our own webpage, and even customize it.

At the bottom of our code, we embed Google’s JavaScript file that calls our initMap function when it’s loaded.

In initMap, we first create a Google Maps Map object, placing it into the div with ID map that we have in our HTML page, and specifying some parameters for this map. We know how to do this only by reading the documentation that Google’s provided.

Then we add some markers, another feature provided by the Google Maps API. By looking at the documentation for this, and other features, we can create more and more interesting applications.

With our next Problem Set, we’ll create maps of our own, displaying local news for cities around the world.