Forumotion Hub
Hello and welcome to Forumotion Hub! You're either not registered or logged in. Please do so in order to be able to join in with our awesome discussions and to disable adverts!
Forumotion Hub

The official hub of Forumotion users! A very relaxed forum, dedicated to having lots of fun!

Welcome to Forumotion Hub! Enjoy your stay here!
Did you know that this forum was made on the last day of 2011?
Base is your supreme overlord on this forum, you will bow down to him!
Don't be shy to join in with our discussions, everyone is welcome!
You can now follow us on Twitter @Basixation

Log in

I forgot my password



Latest topics
» Base?
Fri Sep 22, 2017 2:37 pm by Ange Tuteur

» General Nonsense Thread
Sat Jul 16, 2016 4:31 pm by Ange Tuteur

» Anime?
Sat Apr 30, 2016 10:26 pm by Ange Tuteur

» December 2014 - The Future and Xmas
Thu Aug 20, 2015 8:27 am by Dazation

» This or that?
Thu Aug 06, 2015 11:57 am by Ange Tuteur

» Count to 2020 before 2020
Thu Aug 06, 2015 11:50 am by Ange Tuteur

» What's your time?
Thu Aug 06, 2015 11:45 am by Ange Tuteur

» Count to 2015 before 2015
Thu Aug 06, 2015 11:43 am by Ange Tuteur

» Do you have any disabilities?
Mon Jun 15, 2015 4:32 pm by Ange Tuteur

Statistics
We have 65 registered users
The newest registered user is garsyint

Our users have posted a total of 3641 messages in 218 subjects
Who is online?
In total there are 2 users online :: 0 Registered, 0 Hidden and 2 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 38 on Tue Apr 08, 2014 2:23 pm

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Fun with JavaScript : Backgrounds on Mon Dec 08, 2014 12:13 am

Ange Tuteur

avatar
FMHubster
FMHubster
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. Wink

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. Smile


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 ! Razz

View user profile

2 Re: Fun with JavaScript : Backgrounds on Fri Dec 12, 2014 8:44 pm

slg

avatar
FMHubster
FMHubster
Ange Tuteur thanks for sharing this information.

View user profile http://classifiedads.forumotion.com/

3 Re: Fun with JavaScript : Backgrounds on Wed Dec 17, 2014 12:11 am

Ange Tuteur

avatar
FMHubster
FMHubster
Anytime ^^

View user profile

4 Re: Fun with JavaScript : Backgrounds on Tue Dec 23, 2014 10:50 pm

Base

avatar
Supreme Overlord of the Forum
Supreme Overlord of the Forum
A really nice topic, Ange. Thanks for sharing. Smile


_________________




Base at your service
Founder of FMHub and supreme overlord of the forum
If a man does his best, then what else is there?
View user profile http://www.forumotionhub.com/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum