Use variables and functions to add and remove puppy pictures on an html page.
- Variable
- Functions
- Parameters
A function is a reusable set of instructions
Functions are defined. The function definition writes out all the things the function will do.
function functionName() {
// do stuff
}
Functions do stuff only when they are called. Call a function by its name with parentheses after.
functionName();
Some functions make something change
function changeBackground() {
$('body').css('background', 'red');
}
Other functions return a value
function getColor() {
return 'red';
}
Functions can be used together!
function changeBackground() {
$('body').css('background', getColor());
}
Functions can take a parameter. A parameter is additional information given to the function that it can use to do something. You pass a parameter in the parentheses when you call a function.
function changeBackground(colorName) {
$('body').css('background', colorName);
}
changeBackground('red')
Variables store data. They have a name you use to refer to the data.
We use the word var
to declare the variable. We use the =
to define the value of the variable. Defining a value with the =
is also called assigning a value.
var x = 1;
var y = 2;
var z = 1 + 2;
What are the variables above? What are their values?
You can change the data that's in a variable
var x = 1;
x = 2;
What is the value of x
in each line? How many times did we declare x
? How many times did we assign a value to x
?
Variables can store lots of different types of data. Strings and numberse are common ones we'll start with.
var a = "I am a string!";
var b = 'I am also a string';
var c = 1;
var d = 1.3456;
What types of values have been assigned to these variables?
You can pass variables to functions as parameters
function changeBackground(colorName) {
$('body').css('background', colorName);
}
var color = 'red';
changeBackground(color);
Last week we used functions to update multiple things on a page at once. This week we're going to add a variable that keeps track of the state of the page.
Take a look at the live site:
- What are the html elements?
- What changes when the button is clicked?
- What stays the same between clicks?
- How would you go about implementing this page?