Your first JavaScript task is to create string variables for each of the data attributes you added to the markup. (If those are unfamiliar terms, do not worry – we will explain in just a moment.)

At the top of main.js, start by adding a variable named DETAIL_IMAGE_SELECTOR and assigning it the string '[data-image-role="target"]'.

var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';

This might not be much code, but it is worth a closer look. Let’s start in the middle, with the = symbol. This is the assignment operator. Unlike in mathematics, the = symbol in JavaScript does not mean that two things are equal. Instead, it means “Take the value on the righthand side and give it the name on the lefthand side.”

On the righthand side of this particular assignment is a string of text: '[data-image-role="target"]'. A string is just a sequence of characters representing text, and it is delimited by single quotation marks. The text inside the single quotes happens to be the attribute selector for your detail image. This is a clue that you will use this string to access that element.

On the lefthand side of the assignment is a variable declaration. It may be useful to think of a variable as a label that you can use to refer to some value, which could be a numeric value, a string (as in this case), or some other type of value. Using the var keyword, you are creating a variable named DETAIL_IMAGE_SELECTOR.

Next, declare variables in main.js for the detail title selector and the thumbnail anchor selector. Assign the strings for these selectors as well.

var DETAIL_IMAGE_SELECTOR = '[data-image-role="target"]';
var DETAIL_TITLE_SELECTOR = '[data-image-role="title"]';
var THUMBNAIL_LINK_SELECTOR = '[data-image-role="trigger"]';

As the name variable suggests, their values can be reassigned – they can vary. Writing variable names in all capital letters is a convention that developers sometimes use when the values should not change. Other languages have constants that serve this purpose. JavaScript is in transition: ES5 does not have constants; ES6 does – but, as we said earlier, it is not yet fully supported. Until constants become well supported, you can follow this convention to label a value that should not change.

As an aside, strings can be delimited by single or double quotes. You are free to use either, but this book will use single quotes as a convention and we suggest that you follow along at least for the projects in this book.

If you want to use double quotes, you have to escape any double quotes that are part of the string so that the browser does not incorrectly parse them as part of the code. To escape a character, you precede it with a backslash, like this:

var DETAIL_IMAGE_SELECTOR = "[data-image-role="target"]";

Using single quotes is not a guarantee that you will not need to escape characters. If a string delimited by single quotes contains single quotes – or apostrophes – you have to escape them.

Save main.js. With these variables in hand, let’s take them for a spin in Chrome’s DevTools.