Javascript and Background Image Changerr

Reading time ~2 minutes

Javacript is Javascript

So Brilliant

Javascript course at Treehouse is going well. It may be boring at the moment becasue of basics but still i enjoy it. The basics of language doesnt do anything about interactive effects but i made an algorithm. Trying to optimize it and will share my test results soon. Apart from that i wrote a basic code that changes background of webpage. Here i’m writing code down:

	var imgArray = ["url(img/1.jpg)", "url(img/2.jpg)", "url(img/3.jpg)"];
	var counter = 0;
	setInterval(change, 7000);
	function change() {
	  document.body.style.backgroundImage = imgArray[counter];
		counter++;
		if(counter >= imgArray.length) { counter = 0; }
	};

What i did her is simple. A variable named imgArray is an array and taking 3 different img urls. Then a variable named counter is set to 0 so later when i use it timer will start from 0. After that i used “setInterval” method to start timer. “change” is a function which means to change from 0 to 7000 miliseconds. After that i wrote change function to make it effecting body element to imgArray’s elements. “counter++” is making counter’s integer value to increase. right after that last line means that if counter is greater than or equal to imgArray’s lenght (which is 7000) than counter will set to 0 again and all that shit will start over. Why i made a post for that very simpel script is that script is very first script that i wrote on my own. I dont mean to write everything from now on but at least i see that if i try i can make something new which is great for me! By the way i think i should add css codes as well so if someone reads this post and tries to understand how it works that might be useful.

body {
	background-image: url(img/3.jpg);
	background-position: fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-trasition: all 2s ease-in-out;
	transition: all 2s ease-in-out;
}

I also set transitions via css so its much good looking.

I’ve heard Node.JS is someting cooler than i thought

Yes, it’s really cool. When i first saw Node.JS i didn’t give a shit about it. Even i belived it’s something useless. But c’mon, its usefull. The hardcore guys are migrating to Node.Js for many things. Its popular than ever. I was in doubt and trying to make a decission between Php and Ruby but if Node.Js gives me what i want i might focus on that. Time will show. Thats all for today.

First Post

Just started Jekyll. Continue reading