javascript for journalists

JavaScript is a lot like math in the sense that we store data in variables. Here is some info about variables, and how they work in JavaScript. Below are links to sections of this page:

Naming Variables
The VAR Keyword
Assignment Operator
Math Operations
Semicolon
String Data Type
Concatenation
Concatenating Strings with Numbers
Boolean Data Type
Assigning a Variable to Itself

Naming Variables

Variables in JavaScript must follow a certain set of naming rules.

• Variables must start with a letter*
• Variables can only contain letters, numbers or an underscore (a few other characters are permitted in special circumstances.)
• No spaces
• Variables in JavaScript are case sensitive, which means the variable mytotal is a different variable than myTotal.

*there are some rare exceptions not addressed here.

Variable names can be a single letter, like i, j or k. But it is often better to use more descriptive names like total, sum or totalscore.

The VAR keyword

When using variables in JavaScript, you should declare them using the VAR keyword. This establishes the word you picked to be used as a variable under a certain "scope," or place. (more on what this means in the section on functions.)

var i
var total
var numberofphotos

Only use the var keyword the first time you mention a variable in any scope (space).

Assignment Operator

The expression:

var x = 7

means that we are storing the value 7 inside the variable x. It does not establish equivalency, instead the equals sign is performing a task of storing the value on the right inside the variable on the left.

It is also possible to replace the value of variable with something else. Thus the expression:

x = 7
x = 8
x = 9

means that x will be 9, the final value. Each time we assign a new value, it replaces the old value.

When a variable is assigned to another variable, it receives its value, as in this example:

x = 8
y = x

The value of y is 8. Because in the first line, we assigned 8 to the x variable. Then in the second line, we assigned the value of x, to y.

Math operations

In JavaScript, you can perform some basic arithmetic operations.

x = 5 + 7

The value of x will be 12. Likewise, you can use other variables for a part of these math operations.

x = 5
y = 2
j = x + y

In this case the value of j will be 7. You can also perform multiplcation and division, and even use parethesis much the same way you do with algebraic expressions. Multiplication is done with an asterisk (*), and division with a forward slash (/).

x = 9
y = (x / 4) * (x + 3)

The value of y is 27, or 9 divided by 4, multiplied by the sum of 9 and 3.

Semicolon

A semicolon terminates a line of code. Think of it similar to a period at the end of a sentence. Technically, semicolons are optional in JavaScript. The browser is smart enough to know that if there is a carriage return (new line,) the statement is automatically terminated. However, we still recommend using semicolons for clarity, and for certain situation where you may want to condense your code through a process called minifying. When using semicolons, you can put several statements on the same line, and the browser will know that they are separate statements.

var x = 7; var i = 10; var total = 22;

String Data Type

Variables can store more than numbers. They can also store words, phrases and several other types of abstract data. If you want to store a word or a phrase, you need to surround it by quotes. (both single or double quotes work.)

var myname = "Jeremy";
var website = "Knight Digital Media Center";

If you don't use quotes, the browser will think you are trying assign values to another variable.

Concatenation

What happens with you try add two string variables? In JavaScript, it simply connects the two together in a process called concatenation.

firstname = "Jeremy";
lastname = "Rue";
fullname = firstname + lastname;

In the above example the value of fullname is JeremyRue. Notice there is no space. That is becauase JavaScript will concatenate variable exactly without the addition of spaces. Notice the following example:

sentence = "This tutorial is written by";
firstname = "Jeremy";
lastname = "Rue";
fullsentence = sentence + " " + firstname + " " + lastname;

In this example, the fullsentence variable will contain the string This tutorial is writtten by Jeremy Rue, with spaces between all words.

Concatenating strings with numbers

It is also possible to concatenate strings and number. The result will always be a string.

firstnumber = "4";
secondnumber = 5;
fullnumber = firstnumber + secondnumber;

In this example, the value of fullnumber would be the string "45." It's important to understand when variables are numbers, and when they are strings of text that simply contain numbers. Taking the example above, if we didn't have quotes around the 4, it would not concatenate the two values, but rather combine them.

firstnumber = 4;
secondnumber = 5;
fullnumber = firstnumber + secondnumber;

In this example, the value of fullnumber is 9. Because the type of data in both of these variables are numbers, they are not concatenated, but rather combined as numbers.

Boolean Data Type

Variables in JavaScript can store much more than numbers and text strings. They can also store a wide array of abstract data types. One of these is the Boolean data type, which only has two values: true and false. Why we would want to store a true or false value in a variable doesn't make a lot of sense right now. But later, in the section on conditionals, it becomes a vital tool.

var showtooltip = false;

Assigning a Variable to Itself

Sometimes you want to change the value of a variable, based on its current value. This often done by assigning a variable to itself, and applying the changes.

var x = 27;
x = x + 3;

In the above example, the value of x is now 30. When you assign a variable to itself, the value doesn't change until the operation is complete. It is also possible to do this with strings, which concatenates the variable:

var fullname = "Jeremy";
fullname = fullname + " " + "Rue";

In the above example, the value of full name is Jeremy Rue. We first assign it the value Jeremy, then we assign the original value with the last name concatenated.