Creative Services Toolkit

Tutorials

Javascript Functions

This tutorial will teach you about functions in Javascript and how you can use them in your creative.

Purpose

The purpose of this tutorial is to teach you how Javascript functions work, and to show how they can save you time when coding creative.

Why does it matter?

Javascript functions allow you to write a few lines of code and use it repeatedly for multiple actions. They save a lot of time when coding and allow you to write complicated code more easily and quickly.

Overview

A function is simply a chunk of code that is written to perform a particular task. We'll stick to simple examples and show you how to use them in practical ways.

A Basic Example

  • To create a new function simply type function and then give it a name
  • The name defines the function so we can use it later on.
  • Whatever code you put between the { } is what will run when the function is called.

Calling a Function

  • A function does nothing on it's own, it simply waits for you to tell it to run.
  • To run a function we have to call it.
  • To call a function all you have to do is type the name of the function followed by ()
    The code below will call a function named showImages
    Example: showImages()

This

  • The keyword this is used to refer to whatever item called the function.
  • Consider the example above:
    • We have a function called itemClick that is ready to be called by any item
    • We find all div with a class of thumbnail (could be many) and trigger the itemClick function when one of them is clicked
    • So how do we know which thumbnail was clicked on? That's where this comes in. If we click on thumbnail number 2 $(this) tells our function that thumbnail number 2 is the item that was clicked on, and allows us to do stuff with it.
    • See the Thumbnail clicks example at the bottom for more details

Function Parameters

  • Parameters are variables that can be provided to the function. They are optional. When we call the function we'll tell it what the values of the parameters are.
  • A parameter is a variable, so you can name it whatever makes sense. Below the word image is the parameter.
    Example: function showImages( image ){ //some code }
  • After you define a parameter you can use it in the function.
    The function below will show the image that we provided as a parameter.
    Example: function showImages( image ){ image.show(); }
  • Why does this matter?

    When you call a function you can provide the value of the parameter. The actual value of the parameter is called an argument.
    The code below will call the showImages function, and set the value of the parament to a div with id "image1". The function can then find that div and show it.
    Example: showImages( $("#image1") );

One more example:

  • Above we define a function called openURL. We create a parameter called link. In the contents of the function we open a new window with the parameter link being the URL we want to open.
  • When we call the function we define the value of link as "http://www.foodnetwork.com". The result is a new tab at foodnetwork's homepage.
  • The value of the parameter is we could call the function again with a different URL

Returns

  • When a function hits the keyword return it will stop running. It may also send some data back to the code that called it. That might sound confusing but it's really helpful. Consider the code above:
  • We've setup a function called generateRandomNumber. It's only job is to give us a random number back.
  • We create a new variable called random number and then set it equal to the generateRandomNumber function.
  • The result is randomNumber = an random number. Think of it like replacing the generateRandomNumber() with the code that is returned, which is an actual random number.

One more example:

  • In the parameters section above we created a function that opens are URL. What if that URL has a random number that we need to replace first?
  • We can insert the call to generateRandomNumber in the middle of a string. The result will be a URL where the RANDOMNUMBERHERE is replaced by an actual random number.

Real World Examples

Thumbnail Clicks

Move a Carousel to a Specific Slide