[addEventListener] Refaktoryzacja i Timery - zad 3. kurs JS cz.2

pytanie zadane 10 maja 2016 w JavaScript przez Monster Początkujący (430 p.)

Dotyczy zadania 3 kursu JS - cz.2 || Chciałbym wykonać zadane funkcjonalności, posługując się listenerami. Nadal te konstrukcje sprawiają mi spory problem. Zdaje sobie sprawę, że można to wszystko zrobić prościej ale chciałbym zrozumieć idee stosowania nasłuchiwaczy zdarzeń - tworzenie funkcji anonimowych, właściwe umieszczanie instrukcji, przypisywanie odpowiednich zdarzeń bywa kłopotliwe :)

HTML

<!DOCTYPE html>
<html lang="pl">
	<head>
		<title>CW.3 - ZALENT</title>
		<meta charset="utf-8">
		<style type="text/css">
			@import url('main.css');
		</style>
	</head>
	<body>
		<div id="slider"></div>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
	</body>
</html>

var span = document.getElementsByTagName("span");

var number1 = Math.floor(Math.random()*5)+1;
for (var i = 0; i<5; i++) {
	span[i].innerHTML = "[" + (i+1) + "]";
}

/*
span[0].addEventListener("click", function() {alert("działa !")});

span[1].addEventListener("click", function(nslide) {
	setSlide(nslide);
});
*/

var timer1 = 0;
var timer2 = 0; 

function setSlide(nslide) {
	clearTimeout(timer1);
	clearTimeout(timer2);
	nslide = number1 + 1;

	hide();
	setTimeout("changeSlide", 300);
} 

function hide() {
	$("#slider").fadeOut(300);
}

function changeSlide() {
	number1++; 
	if(number1>5) number1 = 1;
	var slider = document.getElementById("slider");
	var file = '<img src="img/slide' + number1 + '.png" />';
	slider.innerHTML = file;
	timer1 = setTimeout("changeSlide()", 3000);
	$("#slider").fadeIn(300);
	timer2 = setTimeout("hide()", 2700);
	console.log(file);
}
document.addEventListener("DOMContentLoaded", changeSlide, false);

Obecnie slider oczywiście działa, zostały mi przyciski. Nie wiem jak przypisać im zdarzenia, bez ruszania HTML-u :)

komentarz 10 maja 2016 przez Vodoo Dyskutant (9,270 p.)

<style type="text/css">
      @import url('main.css');
</style>

Tak nie powinno się dodawać plików css do strony. Proponuję użyć tagów HTML:

<link href="path/to/main.css" rel="stylesheet">

2 odpowiedzi

odpowiedź 10 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

No to lecim:

Nie mieszaj czystego JS i jQuery! Tym bardziej do takich pierdół (fadeIn i fadeOut), poczytaj o classList. A tu masz link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList.
Rozumiem, że z tablicy losujesz randomowy obrazek? Używaj new Images, załaduje Ci się do cache, czyli o wiele szybciej. Poza tym to też możebyć funkcja, która by zwracała tablice.Link:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images
Pierwszy kwiatek:

 <div id="slider"></div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>

Utworzyłeś diva. OK. Ale po co aż 5 niezaniegdżonych węzłów. Wystarczy jeden element HTML w którym podmieniasz treść, najwyżej tworzysz element HTML. Tym bardziej dla tak podstawowego slidera. Po trzecie wywołujesz click na SPAN?

timery mogłybyć zapisane, w samej funkcji
Zauważ, że wywołujesz raz slider i przepisujesz go do zmiennej. OK. Wywołujesz znowu i znowu przepisujesz id slider do jakieś komórki. Po jakimś czasie, takie coś potrafi trochę RAM-u zjeść :). Nuluj , jeżeli już nie potrzebujesz.
Ocena odrobiny przekombinowales Slidera. Można prościej, bez takiej ilości setTime.

Po pierwsze rozdziel warstwy: od Animacji i od Kontrolera Slidera. Animacje można stworzyć za pomocą keyframes i reguł CSS opacity i to właściwie tyle. I stworzyć klasę CSS, która uruchomi tą animacje, czyli animation plus nazwa keyframes plus dodatkowe właściwości animation-fill-mode, animation-delay-time. Jak to zrobić? Do tego musisz sam dojść. Następnie gdy zajdzie owa sytuacja. JS przepisze klasę CSS do danego elementu HTML i tyle i tylko tyle zrobi do obsługi Animacji, jego zadaniem będzie kontrola animacji, b ędzie Podmieniał odpowiednim czasie obraz i tu wystarczy jedna funkcja i jedna rekurencja i to tyle. I nie trzeba do tego jQuery (na tym poziomie nie ma problemów z IE tak mi się wydaje).

O addEventListener , pomyśl o tym jako o obserwatorze, który na coś patrzy na jakiś element. Od zależności wywołanego zdarzenia click uruchomi funkcje X, gdy ktoś najedzie uruchomi funckje J. Po przez addEventListenera , możesz do jednego elementu HTML, przepisać różne funckje, zależności od zdarzenia. I tu jest ważne, uchwyt(obiekt) nieuzyskuje prawo do własnośći do tej metody. Czyli mogę X uchwytów stworzyć, które będą korzystały z tej samej funkcji. O co chodzi mam taką funkcję:

<script>

document.getElementByID("jakisPrzycisk").onclick = function ()
{
var p = document.getElementById("pierwszyButton");
var c=  document.getElementById("drugiButton");
p.onclick = Alert;
c.onclick = Alert; //tu bedzie blad.
}

function Alert()
{
alert ("ELO");
}
</script>

Tylko jedna funckja, może być przepisana do danego obiektu, staję się jego własnością. AddEventListener daje większe możliwośći. Masz link do tego zagadnienia: https://developer.mozilla.org/pl/docs/Web/API/Element/onclick.

komentarz 13 maja 2016 przez Monster Początkujący (430 p.)

Za miękki jestem by zmieniać tak drastycznie programy Pana Mirosława, w tym wypadku chodziło mi o rozdzielenie JS i HTML, listenery miały uelastycznić kod.

komentarz 13 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Wiem, że początki są trudne (sam ku*Lem na prawo i lewo), jednakże jeżeli chcesz sie nauczyć js a nie kopiuj / wklej to musisz się pozbyć złych praktyk. Bo później się robi jeszcze trudniej

odpowiedź 13 maja 2016 przez Monster Początkujący (430 p.)

Ło matko wszystkie te wskazówki były bardzo cenne ale literówka... no i trzy godziny w zadek
pierdzielę, nie pracuje już bez IDE

function setSlide(nslide) {	
	clearTimeout(timer1);
	clearTimeout(timer2);
	number1 = nslide - 1;

	hide();
	setTimeout("changeSlide()", 300);
}

BRAKŁO () - zajebiście...

komentarz 13 maja 2016 przez Comandeer Guru (601,590 p.)

setTimeout("changeSlide()", 300);

Tak się nie używa setTimeout! Przekazuje się mu funkcję, nie ciąg tekstowy:

setTimeout(changeSlide, 300);

http://bonsaiden.github.io/JavaScript-Garden/pl/#other.timeouts

komentarz 13 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Widze ze nie korzystasz debuggera, że zainstaluj sobie firebug na ff lub na chrome dragonfly? , choć nie wiem czy go nie wycofano

komentarz 13 maja 2016 przez Comandeer Guru (601,590 p.)

Nie ma sensu instalować nic. Najlepszym debuggerem są wbudowane dev tools.

komentarz 13 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Według mnie firebug jest lepszy od wbudowanego. Mam dostęp do obiektów, mogę podejrzeć klasy wykonać testy dostępności oraz co jest pobierane z serwera.