Programming in JavaScript | DivCHED CCCE: Cheminformatics OLCC

These are JavaScript lessons originally created in http://repl.it/teacher and ported to here (which is a lot of work, so we shouldn't keep doing that). To try the lessons out interactively, go to: https://repl.it/classroom/invite/WfYTgt (no plugin required ;-) )

1. JavaScript basics

In this lesson you will be learning some JavaScript programming basics. The instructions are divided in separate steps. It is up to you to put all parts together into a working piece of code!

Variables

In your program all information is stored in variables. A variable can store things like numbers and text strings. You will later learn about more complicated data structures. To create a variable, use this code:

var myVariable = 1;

This variable is called myVariable. The variable name can only contains letters and numbers (but it cannot start with a number, so myVariable1 is OK, but 1myVariable is not!). Note the semicolon at the end of the line, these are required in many programming languages (although optional in JavaScript, I recommend you use them).

Strings

In programming, a piece of text is called a string. In JavaScript you can create a string by enclosing the text by quotes (single or double, but not mixed!) like in the example below.

var myString = 'Hi, I'm a string!';

Now let's say you want the number we declared earlier in myVariable to show in the string. You can do this using a so so called string template. Note that this time we don't use quotes but a grave accent.

var myStringWithMyVariable = `Hi, the number is ${myVariable}`;

Displaying text

Now let's try to display the contents of myStringWithMyVariable to see if the number in myVariable really did end up there. To display a variable in the console (bottom-left here), you use the following code:

console.log(myStringWithMyVariable);

Assignment

Now put all this together. Requirements to complete this exercise:

Store the number 1 in a variable called myVariable.
Store a string in myStringWithMyVariable that contains the text: Hi, the number is 1 using a string template as shown above.
Display the variable myStringWithMyVariable in the console

Solution

var myVariable = 1;
var myStringWithMyVariable = `Hi, the number is ${myVariable}`;
console.log(myStringWithMyVariable);

2. Find InChI of a chemical name using PubChem

In this lesson we are going to create a program that asks the user for a chemical name and converts that into an InChI by looking the name up in the PubChem database.

Request user input

To request user input, we will use the prompt function. The prompt function takes one parameter, a prompt message (a string), and returns the user input. You can store this input in a variable as shown below.

var result = prompt('...your prompt message...');

The PubChem API

PubChem has an API that allows programmatic access. This API offers a unique URL to access each piece of information. This is a bit like each molecular compound has it's own Wikipedia page, except that the data is much better structured and there are separate pages for each small bit of data. For example, the page to retrieve the InChI of benzene is: https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/benzene/property/InChi/txt

As you can see this page only contains the InChI and nothing else! This makes it easy for a computer program to retrieve this information.

Load page in JavaScript

To retrieve this page in our program, we need to load the page programmatically. This is done by the snippet below. You do not yet have to understand exactly what is happening here. As long as you can modify the page URL and know where the output is, you're fine.

var url = 'https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/benzene/property/InChi/txt
fetch(url)
    .then(function(pageRequest) {
        // This will start loading the page text.
        return pageRequest.text();
    })
    .then(function(pageText) {
        // Now we have the page text, let's display it in the console!
        console.log(pageText);
    });

Assignment

Create a program that asks the user to enter a chemical name and retrieve the InChI for this chemical name. Make sure to log the InChI to the console afterwards to pass the assignment (this is already done in the example!). Hint: you can use a string template to create the PubChem URL after you have prompted the user for a chemical name.

Solution

var result = prompt('Please enter a compound name:');
var url = `https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/name/${result}/property/InChi/txt`;
fetch(url)
    .then(function(pageRequest) {
        // This will start loading the page text.
        return pageRequest.text();
    })
    .then(function(pageText) {
        // Now we have the page text, let's display it in the console!
        console.log(pageText);
    });