You have been working with methods and have seen that they can be invoked to cause a block of code to run. Functions and methods are really just a list of steps that you would like to use again and again. Calling a function is like saying “Make a sandwich” instead of “Lay out two slices of bread. Put prosciutto, salami, and provolone on one slice. Put the other slice of bread on top.”

You will write seven functions for Ottergram in this chapter. Your first function will do two things: change the detail image and the detail image title. Add this function declaration to main.js.

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

function setDetails() {
  'use strict';
  // Code will go here
}

You declared a function named setDetails using the function keyword. When declaring a function, the name is always followed by a pair of parentheses. They are not part of the name, however – you will find out what they are for soon.

After the parentheses is a pair of curly braces. Inside the curly braces is the body of the function. The body will contain the steps the function needs to perform. These steps are more formally referred to as statements.

The first line of your function is the string 'use strict';. You will use this string at the beginning of all your functions to tell the browser that they conform to the most recent standard version of JavaScript. (There is more about strict mode in a For the More Curious section at the end of this chapter.)

The other line in the setDetails function is a comment. Like CSS comments, JavaScript comments are ignored by the browser but useful for developers. JavaScript comments that are only one line can be written this way, with //. For comments that span multiple lines, you can use the /* */ style. Both are correct in JavaScript.

In the console, you have already tried out all of the statements needed to change the photo in the detail image. Go back to the console and press the Up arrow key. You will see the most recent statement you entered copied at the prompt. The Up and Down arrows allow you to go backward and forward through your history of statements.

Using the arrow keys, find the statement that gets a reference to the detail image: var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);. Copy this line from the console and paste it into main.js in place of the comment. Then, copy and paste the line in the console that calls the detailImage.setAttribute method: detailImage.setAttribute('src', 'img/otter3.jpg');.

Your setDetails function in main.js should look like this:

...
function setDetails() {
  'use strict';
  // Code will go here
  var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);
  detailImage.setAttribute('src', 'img/otter3.jpg');
}

Save main.js and go back to the console. Enter the following and press Return to run your setDetails function.

setDetails();

Entering – or calling – the name of a function followed immediately by parentheses makes the function execute all of the code in its body. You should see that img/otter3.jpg is now displayed as the detail image (Figure 6.17).

Figure 6.17  Running setDetails to change the image

setDetails has changed the detail image, but not the detail image title. You want it to do both. As you did with the detail image, you will add statements to get a reference to the element and to change the element’s properties.

In your setDetails function in main.js, call document.querySelector again, passing it DETAIL_TITLE_SELECTOR. Assign the result to a new variable named detailTitle. Then, set its textContent property to 'You Should Be Dancing'.

...
function setDetails() {
  'use strict';
  var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);
  detailImage.setAttribute('src', 'img/otter3.jpg');

  var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
  detailTitle.textContent = 'You Should Be Dancing';
}

The textContent property is the text (not including HTML tags) inside of an element.

Save your changes and run setDetails in the console. Now the image and title change (Figure 6.18).

Figure 6.18  Changing the image and title using setDetails

Accepting arguments by declaring parameters

setDetails does the work of changing the detail image and title. But every time you run it, it sets the image’s src to 'img/otter3.jpg' and the title’s textContent to 'You Should Be Dancing'. What if you want to use other images and text?

You need a way to tell setDetails which image and what text to use when you call it.

To achieve this, you need your function to accept arguments – values that are passed to the function and that it can work with. And to do that, you have to specify parameters in the function declaration.

Add two parameters to setDetails in main.js:

...
function setDetails(imageUrl, titleText) {
  'use strict';
  var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);
  detailImage.setAttribute('src', 'img/otter3.jpg');

  var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
  detailTitle.textContent = 'You Should Be Dancing';
}

Now, use those parameters in place of 'img/otter3.jpg' and 'You should Be Dancing':

...
function setDetails(imageUrl, titleText) {
  'use strict';
  var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);
  detailImage.setAttribute('src', 'img/otter3.jpg');
  detailImage.setAttribute('src', imageUrl);

  var detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
  detailTitle.textContent = 'You Should Be Dancing';
  detailTitle.textContent = titleText;
}

Your two parameters, imageUrl and titleText, are used as labels assigned to values passed to setDetails. Save main.js and try it out in the console to see this working.

Call setDetails and pass it the values 'img/otter4.jpg' and 'Night Fever'. (Make sure there is a comma between them.)

setDetails('img/otter4.jpg', 'Night Fever');

You should see the new image and title text, as in Figure 6.19.

Figure 6.19  Passing values to setDetails

There is an important distinction between arguments and parameters. Parameters are defined as part of the function. In JavaScript, parameters are exactly like variables that are declared inside a function body. Arguments are values you supply to a function when you call it.

Also, be aware that no matter what variable names you use for your arguments, their values are always mapped to the parameter names so they can be used inside the function body. For example, imagine that you used variables for the image URL and the title text. When you call setDetails, you pass in these two variables as arguments.

var otterOneImage = 'img/otter1.jpg';
var otterOneTitle = 'Stayin' Alive';

setDetails(otterOneImage, otterOneTitle);

The setDetails function accepts the values, labels them with the parameter names imageUrl and titleText, and then runs the code inside its body. That code uses imageUrl and titleText, passing them as arguments to document.querySelector.

Like variable names, parameter names are just labels for values. You can use whatever parameter names you like, but it is good practice to use descriptive names, as you have done here, to make your code easier to read and maintain.