Slider JS - odcinek 2 - uproszczone

pytanie zadane 4 października 2016 w JavaScript przez steffanek Nowicjusz (230 p.)
edycja 4 października 2016 przez steffanek

Pytanie za 100 punkcikow :) Ponizej sa 2 proste kody(roznia sie tylko ostatnia linia w scrypcie) gdzie jest zrobiony slajder (5ciu zdjec) ktore sie przewijaja co 3 sekundy.

1szy kod dziala prawidlowo.

2gi kod laduje pierw puste zdjecie... nie rozumiem dlaczego..

Ponizej 1szy kod :

<script type="text/javascript">
	
	
	
	
	function slajder(){
	
	var Image = document.getElementById('img');
	imageCount = imageCount + 1;
		if (imageCount > total) {
		imageCount = 1;
		}
		if (imageCount < 1){
		imageCount = total;
		}
	
	Image.src="Slajdy/slajd"+imageCount+".png";
	
	}
	
	var imageCount = 1;
	var total = 5;
	setInterval(slajder, 3000);
	
	</script>
	
</head>
<body onload="slajder();">

	<div id="container">
	<img src="Slady/slajd1.png" id="img" />
	
	</div> 

</body>

Ponizej 2gi kod gdzie tylko dodalem var countdown na ostatniej lini skryptu i zmienilem funkcje w onload...

<script type="text/javascript">
	
	
	
	
	function slajder(){
	
	var Image = document.getElementById('img');
	imageCount = imageCount + 1;
		if (imageCount > total) {
		imageCount = 1;
		}
		if (imageCount < 1){
		imageCount = total;
		}
	
	Image.src="Slajdy/slajd"+imageCount+".png";
	
	}
	
	var imageCount = 1;
	var total = 5;
	var countdown = setInterval(slajder, 3000);
	
	</script>
	
</head>
<body onload="countdown();">

	<div id="container">
	<img src="Slady/slajd1.png" id="img" />
	
	</div> 

</body>

Tak samo nie rozumiem czemu ten kod pokazuje tez puste zdjecie, a wedlug mnie powinien pokazac slajd2.png.... :

<script type="text/javascript">
	
	function slajder(){
	
	var Image = document.getElementById('img');
	imageCount = imageCount + 1;
		
		}
	
	Image.src="Slajdy/slajd"+imageCount+".png";
	
	}
	
	var imageCount = 1;
	
	
	</script>
	
</head>
<body onload="slajder();">

	<div id="container">
	<img src="Slady/slajd1.png" id="img" />
	
	</div> 

</body>

Z gory dziekuje za pomoc !

1 odpowiedź

odpowiedź 4 października 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie pomogę konkretnie z tymi zdjęciami, bo nie chce mi się podkładać jakichś testowych. Mogę Ci jednak udzielić kilku porad i wskazać możliwe przyczyny, dlaczego kod nie działa:

Po pierwsze sprawdź konsolę - na pewno masz tam jakieś błędy, przynajmniej na oko tak bym obstawiał

```
var Image
```
Nazwy zmiennych piszemy stosując camelCase. Z dużej litery piszemy nazwy klas i konstruktorów.
zmienne deklaruj zanim będziesz się do nich odnosić. Najlepiej na górze ciała funkcji lub (jeśli korzystasz z ES6 const/let) na górze bloku. Jeśli zadeklarujesz zmienną poniżej funkcji, w której z niej korzystasz (odnosisz się do niej), to w konsoli powinieneś ujrzeć błąd typu "nazwa_zmiennej is undefined". Powodem jest obecność zjawiska hoisting w JavaScripcie (dotyczy on zmiennych deklarowanych przy pomocy słówka var oraz funkcji typu function statement) => https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/var + http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/
```
<body onload="countdown();">
```
Ten kawałek kodu zawiera zarówno błąd (w drugim skrypcie), jak i niepoprawną praktykę programistyczną w JavaScript (dotyczy wszystkich skryptów).
Błąd, ponieważ countdown u Ciebie nie jest funkcją lecz zmienną, do której z funkcji setInterval() zwracasz ID tego interwału
```
var countdown = setInterval(slajder, 3000);
```
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
Plus dla Ciebie, że nie stosujesz eval przy tej funkcji.
Niepoprawna praktyka, ponieważ nie zaleca się korzystania z HTMLowych atrybutów odpowiedzialnych za wyłapywanie zdarzeń na elementach DOM =>https://kornel.ski/pl/onclick
Do tego służy JavaScriptowy addEventListener() W tych skryptach akurat nie potrzeba Ci nasłuchiwania eventów, więc ten tip przekazuje Tobie na zaś.
Ale żebyś nie musiał i nie potrzebował używać atrybutu onload - przenieś skrypt z <head> na koniec tagu <body>. Przyspieszysz dzięki temu ładowanie samej strony (elementów DOM) i unikniesz sytuacji, w której zechcesz w skryptach odnieść się do elementów HTML, których jeszcze nie ma w DOM.
raczej kosmetyczna pierdółka, ale
```
<img src="Slady/slajd1.png" id="img" />
```
Jeśli piszesz stosując się do HTML5 - tagi "samozamykające się" nie muszą być kończone slashem => https://www.w3.org/TR/html-markup/syntax.html#syntax-elements