CS 268: Lecture 12 – Forms and Web Services
Dear students:
Last time we started looking at how JavaScript brings actions into normally sedate HTML. We used it to dynamically generate an HTML structure. Today we look at using JavaScript to deal with form input. We’ll also use it to get content from external sources. In particular, we’ll generate a web application for consuming the latest news headlines.
Event Handling
It’s not often that we generate HTML directly like we did in the preceding example. More often we write code to handle events that are triggered by the user interacting with our page.
Suppose we have a form for getting a 7-digit number for the user. We might create this HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<label for="number-input">Enter a 7-digit number:</label>
<input id="number-input" type="text">
<input id="submit-button" type="button" value="Submit">
</body>
</html>
Let’s sanitize the user data. We’ll disable the submit button and only enable it when we get exactly seven digits using this JavaScript:
const submitButton = document.getElementById('submit-button');
const numberInput = document.getElementById('number-input');
submitButton.disabled = true;
numberInput.addEventListener('input', () => {
if (numberInput.value.match(/^\d{7}$/)) {
submitButton.disabled = false;
} else {
submitButton.disabled = true;
}
});
Let’s include this script in the HTML file with this tag in head:
<head>
<script src="form.js"></script>
</head>
Our script fails. That’s because the elements the script grabs handles to do not exist at the time the script is loaded. We either have to place the script tag at the bottom of the page, or we must add the defer attribute to schedule it to be executed after the HTML is parsed. The defer attribute feels like better organization. We use it like this:
<head>
<script defer src="form.js"></script>
</head>
This works nicely, but be warned. Suppose we were going to send this data up to a server somewhere and maybe throw it into a database. Sanitizing the user input only on the client is not enough. Because the browser lets us enter the JavaScript sandbox, users can programmatically modify the page. We can execute our own code to free up the submit button. You must always verify that the data is valid on the server.
Activity
With exactly one neighbor, claim your task on Crowdsource. (Everyone will be assigned task 1.) Then recreate the following calculator:
When the operand inputs change, automatically update the sum. Build your solution off of this starter code:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<!-- Add your HTML and JavaScript here. -->
</body>
</html>
value on a form element, you are probably going to get a string back. Convert it to a number with parseInt or parseFloat.
The sum is just a span element with an id. You can update its contents by setting its innerText property.
Submit your solution on Crowdsource.
After we get this working, as a class we’ll add a select menu to allow the user to pick the arithmetic operation.
Fetching Data
It’s often the case that an application must get its data from an external resource—perhaps a resource that is far away. When that resource is exposed through HTTP, we call it a web service. We can bring down data from a web service through JavaScript’s fetch function.
When we call fetch, the browser does not wait around until the result comes in. Rather, it returns immediately and the browser starts executing the next instruction. If we have code that we want to run once we have the data, we have to register that code as a callback. The mechanism that JavaScript provides to accomplish this asynchronicity is called a promise. The fetch function returns a promise of some future data, and we register our callback function with the then method, like so:
const fetchPromise = fetch(url);
fetchPromise.then(response => ...);
If our web service gives us back data in JSON form, we need to parse the JSON into an object. The response object has a json that returns not the object, but another promise because parsing might be slow. So, to actually act on the data, we need something like this:
const fetchPromise = fetch(url);
const jsonPromise = fetchPromise.then(response => response.json);
jsonPromise.then(data => {
// ...
});
Normally we see this code chained together with no intermediate variables.
fetch(url).
then(response => response.json).
then(data => {
// ...
});
News API
Let’s create a page that consumes the News API web service. We’ll create a select menu to choose a news source, and then we’ll show the 20 most recent headlines for that source. We start with this core HTML:
<select id="sources-picker"></select>
<ul id="headlines-list"></ul>
JavaScript will be responsible for populating these elements. We load up a script with this element in head:
<script defer src="news.js"></script>
The News API requires that we get an API key to request data. We definitely should not publicly release this API key, as others could get a hold of it and do nefarious things under our name. But for today we will be irresponsible and just include it in the JavaScript. Let’s also grab handles to our two elements.
const API_KEY = '...';
const sourcesPicker = document.getElementById('sources-picker');
const headlinesList = document.getElementById('headlines-list');
The News API documentation tells us about the sources endpoint. We call fetch on the URL and provide the language parameter to get all sources that publish in English. We also need to send along our key using a custom HTTP header. The code gets a bit ugly, so we’ll hide it in a function.
function loadSources() {
fetch('http://newsapi.org/v2/sources?language=en', {
headers: {
'X-Api-Key': API_KEY,
},
}).
then(response => response.json()).
then(data => {
// ...
});
}
In our callback, we want to turn each source into an option and append it to our select menu. Instead of crafting the literal HTML, we’ll create an element directly using the API that the browser provides.
if (data.status === 'ok') {
for (let source of data.sources) {
const option = document.createElement('option');
option.value = source.id;
option.textContent = source.name;
sourcesPicker.appendChild(option);
}
}
When we call loadSources, our menu fills up.
Now let’s grab articles for the selected source. News API provides another endpoint for this. We retrieve the headline data much like we retrieve the source data.
function loadHeadlines(source) {
fetch(`http://newsapi.org/v2/everything?language=en&sources=${source}&pageSize=20`, {
headers: {
'X-Api-Key': API_KEY,
},
}).
then(response => response.json()).
then(data => {
// ...
});
}
For our callback, we want to create an a element wrapped up in an li element.
if (data.status === 'ok') {
for (let article of data.articles) {
const link = document.createElement('a');
link.href = article.url;
link.textContent = article.title;
link.target = '_blank';
const li = document.createElement('li');
li.appendChild(link);
headlinesList.appendChild(li);
}
}
At the top-level of our script (our “main”), we must initialize the sources and handle change events.
loadSources();
sourcesPicker.addEventListener('change', () => {
loadHeadlines(sourcesPicker.value);
});
We can now load headlines! But after selecting our second headline, we see that the first articles we grabbed are still around. We need to clear out the list before we append the new articles. Let’s add a helper method for this.
function clearChildren(parent) {
while (parent.children.length > 0) {
parent.removeChild(parent.lastChild);
}
}
Then we call this method at the beginning of our callback.
clearChildren(headlinesList);
We now have a web app for consuming the news. But it’s probably not good for our mental health to actually use it.
TODO
Here’s your TODO list for next time:
- If you are feeling ill, stay home. But tell me so ahead of time in a direct message on Slack.
See you next time.
P.S. It’s time for a haiku!
The news has been grim
Disable your ad blocker
The smiles will return
P.P.S. Here’s the code we wrote together in class…