JavaScript

A quick introduction

We've learned how to integrate text and graphical objects into our page. So far, we might as well just create a plot elsewhere and publish it as an image. But wouldn't it be much better, if the user could interact with the data? To do that, we need to learn a little scripting. Javascript is a programming language designed to be used to manipulate html documents. Everything between <script> and </script> within the body will be interpreted as JavaScript code. Since the code we write in the HTML file is executed sequentially, we need to make sure that whenever we refer to an element on the page, this element already exists. An easy way to ensure this is to include scripts just before the end of the body element. Just like we did with styles, we can outsource our code into a separate file with the extension .js.

First we need to create our main.js file and link to it in the HTML body.

<script src="main.js"></script>

In JavaScript there are two main data types: strings (text, everything in quotes) and numbers. It's important to remember that you can't do math with strings or append numbers together.

For example: 5+5 = 10 but '5'+'5' = '55'

If one of the arguments is a string, the other one gets converted, too: 5 + '5' = '55'

There are two containers in JavaScript: arrays ([]-notation) and objects ({}-notation).

In order to create a container, we have to declare it first using the var keyword that we've already come across.

var list_of_numbers = [];

creates an array. But so far it’s empty.

We can now add elements to this array but instead let's create it again with some values in it, like this:

var list_of_numbers = [30, 2, 5];

Let's use the console of the browser to look at the values of object by including some extra code:

console.log(list_of_numbers);

Or we can just address one field of the vector. Counting begins from zero, so the third field has the index '2'.

console.log(list_of_numbers[2]);

list_of_numbers is a vector that holds 3 numbers. We can also have a variable that contains a string:

var text = 'I love cats.';

We can address this string by using indices, so console.log(text[2]) returns l.

Unlike arrays which allow you to access elements using their indices, JavaScript objects allow you to index elements using names. This lets us create something like this:

var cat_object = {
    weight : 5,
    past_weight_values : [4.5, 5.1, 4.9],
    name : 'Princess Caroline'
};

Since Javascript is a programming language like any other, it has all of the standard features like loops, conditionals, and functions. Because of the way D3 works, we're not actually going to need loops today. Functions, however, are going to be super important. D3 uses functions everywhere. Frequently, we'll be passing functions as arguments to other functions. So let's go over the syntax for functions in Javascript:

var my_function = function(my_argument){
            console.log(my_argument);
            }
my_function("hi")

Notice that the function is just another variable. The name that we'll use to call it is whatever name we gave to the variable. Javascript only knows that it's a function because we used the function keyword. We specified the arguments that this function takes by listing them in the parentheses after function. The body of the function - the code that gets executed when it's called - is everything between the open and close curly braces. This is a pretty boring function - it takes an argument and prints it to the console. Let's make a function that actually returns a result:

var add = function(number1, number2){
           //This function takes two numbers and returns their sum
               return(number1 + number2);
        } 
add(1,2)

3

Since Javascript doesn't force you to pre-define the type of any variable, we're just trusting whoever uses this function to pass it two variables that make sense to add. That's why it's really useful to include comments indicating what your code does (use // to indicate that a line is a comment).

Javascript has a lot of handy built-in functions for manipulating websites. We're not going to talk about them here, since d3.js provides a lot of similar functions that are more specialized for dealing with data, which is our purpose here. But if you're ever trying to build a website or something, you should definitely give them a look!

var person = {name:"Ginny", age:20};
logNameAndAge(person);

"Ginny is 20 years old"