1
00:00:00,120 --> 00:00:04,920
Now that we have a better understanding of how javascript works it would be a good time to work on a

2
00:00:04,920 --> 00:00:06,860
couple of projects.

3
00:00:06,910 --> 00:00:12,160
First we'll start with a simple script that changes the background color of a web page every time the

4
00:00:12,160 --> 00:00:13,930
page is refreshed.

5
00:00:13,930 --> 00:00:19,710
We can see the end result in this example every time I press the refresh button.

6
00:00:19,740 --> 00:00:26,350
You can see that the background color is changing so let's go ahead and get started.

7
00:00:26,380 --> 00:00:32,230
The first thing you need to do is set up your basic HDMI page structure and save the file on your computer.

8
00:00:32,290 --> 00:00:37,890
Next create your script tags inside the body tags inside our script.

9
00:00:37,890 --> 00:00:44,370
We need to define a variable that stores all the possible background colors in an array.

10
00:00:44,370 --> 00:00:47,510
So here we have a variable called BMG color.

11
00:00:47,850 --> 00:00:55,230
And it stores eight values inside an array and each value is a hex code representing a different color.

12
00:00:55,230 --> 00:00:59,190
You can use the same colors we've used or different colors if you like.

13
00:00:59,190 --> 00:01:04,890
Now we need to create the javascript statement that will randomly select one of the colors in our array

14
00:01:05,250 --> 00:01:07,650
and apply it as the background color.

15
00:01:07,650 --> 00:01:15,850
Each time the page is refreshed so to do that we've used the document body style property and set it

16
00:01:15,850 --> 00:01:26,310
to a randomized value in the BGP color array index the value of the index is derived by multiplying

17
00:01:26,310 --> 00:01:29,340
a random value between 0 and 1.

18
00:01:29,430 --> 00:01:38,150
And that's done using the math dot random statement we've multiplied it by the length of the array which

19
00:01:38,150 --> 00:01:40,470
is eight.

20
00:01:40,640 --> 00:01:47,030
We then use the math dot floor statement to round the value to the nearest whole number.

21
00:01:47,030 --> 00:01:52,320
So this gives us the value of our index number in the color array.

22
00:01:52,580 --> 00:01:58,340
And each time it's going to be different so that means each time the background color will be different

23
00:01:58,340 --> 00:02:02,050
as well and that's it for the script.

24
00:02:02,050 --> 00:02:05,620
Once you're done just save the file and preview it in your web browser.