Home
1
Fun with JavaScript : Backgrounds Mon Dec 08, 2014 12:13 am
Ange Tuteur
FMHubster
Posts : 195
Points : 163
Reputation : 2
Join date : 2014-04-09
Age : 28
Warning Level :
Points : 163
Reputation : 2
Join date : 2014-04-09
Age : 28
Warning Level :
What is JavaScript ? JavaScript is a programming language for webpages. It allows you to modify the content of the document and make dynamic webpages, but it can also do a lot more. 
Let's skip most of the technical details and have some fun by changing the background color of the page. Depending on your browser follow the instructions below.
Firefox : Press SHIFT+F4 or go to Tools > Web developer > scratch pad
Chrome : Go to Omnibox > More tools > JavaScript console
Now to change the background we need to access the <body> tag of the document. To do that we can write :
document.body
document refers to the current page we're on.
body refers to its <body> tag.
So, to access the style attribute of the body tag we can write :
document.body.style
This is pretty much the same as writing <body style=""> in HTML. Now that we're in the style attribute of <body> we can select what CSS property we want to modify on it. Since this is about backgrounds you can write :
document.body.style.background
As is this does nothing, if it already had a background in the style attribute the above would return it. To set the value we can use the = operator. Let's make the background red :
document.body.style.background = 'red'
When setting styles your value, being red, should be inside quotes. Content between quotes are text strings. Now run the result :
Firefox : Click run, or press CTRL+R in the scratchpad.
Chrome : hit enter
Play around and change the value red to your favorite color, then run it again.
Advanced : Random background
Now for a fun example. Let's make a script that will change each time we navigate to another page. To do that we need to utilize the Math object.
First we should declare a variable, to do that use the var keyword. Go ahead and declare r
Right now r is considered undefined as it has no value assigned to it. Go ahead and assign Math.floor() to it.
Now we're getting somewhere. Math.floor() rounds a number down to the nearest integer, so 1.6 will round to 1. So, r starts being useful add Math.random() * 5 inside Math.floor() :
Now when r is executed it will return the numbers : 0, 1, 2, 3, 4. What's going on is we added 5 to Math.random(), this will only return numbers between 0 and 5, but it will not return 5.
Add a comma after the value of r and declare color.
Now that we have our variables ready we can start writing conditions. To write a condition you should use the if keyword along with a condition. See below :
If r is equal to 0, then the value #F88 will be assigned to color. This color will only be assigned if r is 0. Let's write four more conditions :
It's the same as before, however, only one of these values will be assigned to color. So, if r is not 0 it will move onto the next statement, if it's not equal to 1, then it will move onto 2, and so on until a match is found. Now all that's left to do is change the background color :
What we did above is use the variable color as the value for the background color. Run the result multiple times and you will notice that the color is different each time. If we wanted to apply this to a website we would need to wait until the document is ready.
A way to do that is to place it at the bottom of your body tag in a HTML document. For forumotion you can use jQuery. Just place your code inside this :
The above is jQuery's document ready event. This means that your script will execute once the HTML document's elements are all loaded.
altogether :
That's it, I hope you had some fun !
Let's skip most of the technical details and have some fun by changing the background color of the page. Depending on your browser follow the instructions below.
Firefox : Press SHIFT+F4 or go to Tools > Web developer > scratch pad
Chrome : Go to Omnibox > More tools > JavaScript console
Now to change the background we need to access the <body> tag of the document. To do that we can write :
document.body
document refers to the current page we're on.
body refers to its <body> tag.
So, to access the style attribute of the body tag we can write :
document.body.style
This is pretty much the same as writing <body style=""> in HTML. Now that we're in the style attribute of <body> we can select what CSS property we want to modify on it. Since this is about backgrounds you can write :
document.body.style.background
As is this does nothing, if it already had a background in the style attribute the above would return it. To set the value we can use the = operator. Let's make the background red :
document.body.style.background = 'red'
When setting styles your value, being red, should be inside quotes. Content between quotes are text strings. Now run the result :
Firefox : Click run, or press CTRL+R in the scratchpad.
Chrome : hit enter
Play around and change the value red to your favorite color, then run it again.
Advanced : Random background
Now for a fun example. Let's make a script that will change each time we navigate to another page. To do that we need to utilize the Math object.
First we should declare a variable, to do that use the var keyword. Go ahead and declare r
- Code:
var r;
Right now r is considered undefined as it has no value assigned to it. Go ahead and assign Math.floor() to it.
- Code:
var r = Math.floor();
Now we're getting somewhere. Math.floor() rounds a number down to the nearest integer, so 1.6 will round to 1. So, r starts being useful add Math.random() * 5 inside Math.floor() :
- Code:
var r = Math.floor( Math.random() * 5 );
Now when r is executed it will return the numbers : 0, 1, 2, 3, 4. What's going on is we added 5 to Math.random(), this will only return numbers between 0 and 5, but it will not return 5.
Add a comma after the value of r and declare color.
- Code:
var r = Math.floor( Math.random() * 5 ), color;
Now that we have our variables ready we can start writing conditions. To write a condition you should use the if keyword along with a condition. See below :
- Code:
var r = Math.floor( Math.random() * 5 ), color;
if (r == 0) color = '#F88';
If r is equal to 0, then the value #F88 will be assigned to color. This color will only be assigned if r is 0. Let's write four more conditions :
- Code:
var r = Math.floor( Math.random() * 5 ), color;
if (r == 0) color = '#F88';
if (r == 1) color = '#8F8';
if (r == 2) color = '#88F';
if (r == 3) color = '#FF8';
if (r == 4) color = '#8FF';
It's the same as before, however, only one of these values will be assigned to color. So, if r is not 0 it will move onto the next statement, if it's not equal to 1, then it will move onto 2, and so on until a match is found. Now all that's left to do is change the background color :
- Code:
var r = Math.floor( Math.random() * 5 ), color;
if (r == 0) color = '#F88';
if (r == 1) color = '#8F8';
if (r == 2) color = '#88F';
if (r == 3) color = '#FF8';
if (r == 4) color = '#8FF';
document.body.style.background = color;
What we did above is use the variable color as the value for the background color. Run the result multiple times and you will notice that the color is different each time. If we wanted to apply this to a website we would need to wait until the document is ready.
A way to do that is to place it at the bottom of your body tag in a HTML document. For forumotion you can use jQuery. Just place your code inside this :
- Code:
$(function() {
// paste your code where this comment is
});
The above is jQuery's document ready event. This means that your script will execute once the HTML document's elements are all loaded.
altogether :
- Code:
$(function() {
var r = Math.floor( Math.random() * 5 ), color;
if (r == 0) color = '#F88';
if (r == 1) color = '#8F8';
if (r == 2) color = '#88F';
if (r == 3) color = '#FF8';
if (r == 4) color = '#8FF';
document.body.style.background = color;
});
That's it, I hope you had some fun !
