Problem z pierwszym skryptem

0

Witam.
Mam do napisania skrypt w JS. Wcześniej nie pisałem nic w tym języku. Ma to być wyświetlarka zdjęć bez powtórzeń. W trakcie pisania zobaczyłem, że przeglądarka w ogóle nie reaguje na zmiany w moim pliku. Zacząłem się zastanawiać czy w ogóle ten mój skrypt jest dobrze pisany. Poczytałem trochę kursów w necie ale nadal nie wiem czy dobrze piszę.

Mam plik index.html oraz losowator.js:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Zdjęcia</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-style-type" content="text/css" />
</head>

<body>
<div id="zdjecia"></div>
<script type="text/javascript" src="js/losowator.js"></script>
</body>
</html>

losowator.js

	var ilosc=65;	//ilość zdjęć w folderze images/slajdy
	var tab = new Array(ilosc);
	var dlugosc_tab=tab.length;
	
	function wypelnienie_tab(tab) {
		var i;
		for(i=0; i<dlugosc_tab; i++) {
			tab[i]=i+1;
		}
	}
	
	function mix_tab(tab) {
		var i, j, temp;
		for (i=0; i<dlugosc_tab; i++) {
			j=floor.Math(random.Math()*ilosc+1);
			temp=tab[i];
			tab[i]=tab[j];
			tab[j]=temp;
			document.write(tab[i] + "<br />");
		}
	}
	
	document.getElementById('zdjecia').onload=function() {
		wypelnienie_tab(tab);
		mix_tab(tab);
	}

Jak zobaczyłem, że nic tu zupełnie nie działa u mnie to nie pisałem już nic dalej tylko spróbowałem wyświetlić w przeglądarce tablicę za pomocą funkcji document.write(). Niestety i to zakończyło się bez żadnej reakcji.
Sprawdziłem w przeglądarce FF za pomocą Shift+Ctrl+J czy są jakieś błędy i nie ma żadnych.

Proszę o jakąś podpowiedź.

0

Lekcja na dziś:

  • jeśli Firefox to zainstaluj Firebuga
  • jeśli Opera to odpal Dragonfly (widok -> narzędzia developerskie)
  • jeśli IE to uruchom narzędzia developera
    Te wszystkie przeglądarki maja wbudowane debuggery javascriptu ;]
0

Firebuga mam zainstalowanego. Poszukam jakiejś instrukcji i zobaczę jak to działa.

0

Przeglądarka cachuje ten plik JS; o ile mi wiadomo, np.na Chrome już tego nie ma (ew.po prostu pogrzeb w ustawieniach swojej aktualnej przeglądarki).

0

Pod Chromem również nie działa u mnie. Myślę, ze jednak kod jest zły. Skoro u mnie nie działa na najnowszym FF z domyślnymi ustawieniami to u innych też nie będzie działać.
Właśnie zabieram się za Firebuga, może z nim uda mi się poprawić kod.

0

Funkcje wydają się być dobrze napisane. Przy zdarzeniu onload Firebug wypisuje null - nie wiem czy to dobrze czy źle.

Nie ma nikogo kto by podpowiedział czy ten fragment kodu:

        document.getElementById('zdjecia').onload=function() {
                wypelnienie_tab(tab);
                mix_tab(tab);
        }

jest napisany prawidłowo? Nie wiem do końca jak łączyć skrypt z html'em. Czytam poradnik http://www.doman.art.pl/kursjs/ ale momentami zbyt ogólnikowo jest napisany ;-)

0

Na prawdę nikt nie pomoże? Przecież to podstawy są, na pewno ktoś z Was wie jak się wrzuca coś z JS do html w odpowiedni div ;) Podrzućcie jakiś pomysł ;)

2

po primo:

"onload is Supported by the Following HTML Tags:

<body>, <frame>, <frameset>,
0

Na razie wyświetlam jedynie fragmenty nazw zdjęć (w folderze zdjęcia będą miały nazwy 1.jpg, 2.jpg...), ale ostatecznie chciałem aby w tym divie wyświetlały się zdjęcia. Czy window.onload mogę uzależnić od konkretnego id?

0

nie, bo window oznacza caly dokument strony, a nie zadne z jego elementow.... i po co chcesz uzalezniac rozpoczecie procedury od wczytania konkretnego elementu???

0

Czyli nie do końca zrozumiałem kurs :) Chciałem aby te zdjęcie wyświetlało się w tym konkretnym divie/miejscu na stronie. Czyli żeby tak zrobić to muszę odwoływać się przez child lub metodę pokazującą np kolejny element w drzewie?
Stronę mam całą zrobioną. Jest na niej slider, który losuje zdjęcia z folderu i wyświetla je na zmianę co 3 sekundy. Robię własny, bo losowanie aktualnego slidera jest kiepskie. Choć zdjęć jest dużo to bardzo często powtarza się parę fotek a reszta występuje sporadycznie.
Moim pomysłem jest zrobienie takiego wyświetlacza fotek bez powtórzeń.
Na starcie mam tablicę z numerami od 1 do ilości zdjęć w folderze. Funkcja wypelnij_tab, wypełnia tablice kolejnymi liczbami, w moim przypadku od 1 do 65. Funkcja mix_tab miesza tablice. Na końcu za pomocą for'a mam zamiar wyświetlać zdjęcia np co 3 sek po kolei indexami z pomieszanej tablicy. Gdy doleci do końca, tablica powinna na nowo się wymieszać i wyświetlać zdjęcia w nowej kolejności. Dzięki temu zdjęcia nie będą się powtarzać po sobie. W JS wcześniej nic nie pisałem, ale myślę, że jakby ktoś mnie nakierował to byłbym w stanie to zrobić do końca :)

Tylko nie chcę gotowca, a aby ktoś napisał mniej więcej jak to zrobić. Chciałbym zrobić to samemu :)

0

losowanie bez powtorzen powinno odbywac sie jak w lotto (to dziala na wyobraznie) po wyciagnieciu numerka losujemy z liczb ktore pozostaly, a nie ponownie z calej puli.
co daje nam niepowtarzalnosc elementow w tablicy.

0

No tak. Ale mój pomysł chyba również jest dobry. Mając wymieszaną tablicę, mamy w niej wszystkie zdjęcia ale w niepowtarzalnej kolejności. Wyświetlamy tablice po kolei, więc nic się nie powtarza, bo każde zdjęcie (a dokładnie jego numer) w tablicy jest tylko 1 raz.
Jedyne czego za bardzo nie rozumiem to jak łączyć JS z HTMLem. Jak go wpleść w odpowiednie miejsce strony aby skrypt działał na odpowiednich elementach HTMLa. Oprócz tego nie wiem jeszcze jak użyć funkcji setInterval w pętli for - aby każde przejście pętli (wyświetlenie zdjęcia) trwało przykładowo 3 sekundy. Chyba, że jest jakaś inna funkcja, która robiłaby pauzę skryptu na ileś sekund. Wiem jak napisać aby np całą funkcję powtarzało co jakiś czas, ale jak to zastosować w środku pętli to nie mam pomysłu.

0

zacznij krok po kroku i za kazdym razem jak napotkasz blad szukaj rozwiazania - to jest prosty skrypt wiec jedyne przeszkody jakie beda to wynikajace z podstawy budowy skladni a to znajdziesz po 2 sekundach na google.. po prostu pisz linijka po linijce a samo wyjdzie na koncu

0

To co podpowiedziałeś wcześniej to już poprawiłem u siebie i numerki wyświetlają się tak jak powinny :)
Teraz robię dalej, czyli zamieniam to na wyświetlanie zdjęć.

Jeśli masz chwilkę to napisz mi proszę o tym co pisałem we wcześniejszym poście.

  • W jaki sposób wybiera się miejsce w tym skrypt ma działać? Chcę aby cały skrypt działał w konkretnym divie na stronie.
  • Czy funkcji setInterval można w jakiś sposób użyć w pętli for? A może jest jakaś funkcja która potrafi zatrzymać skrypt na określoną liczbę sekund. Chodzi o to, aby midzęy 2 krokami pętli (wyświetlaniem kolejnych zdjęć) była przerwa 3 sekundowa.
0

skrypt bedzie dzialal w danym dokumencie odpalal sie najprawdopodobniej po jego zaladowaniu (window.onload) bedzie wypelniaj tablice losowymi numerami z przedzialu (0-65> ktore beda nazwami plikow bez rozszerzen (okropnosc:P) potem bedzie wywolywal funkcje ustawzdjecie z interwalem(mozesz uzyc settimeout lub innego opozniacza) dopoki nie dojdzie do konca tablicy, jak dojdzie do konca przemieszanie i od nowa :)

0

setTimeout powinien być dobry do tego. A dlaczego okropność, że bez rozszerzeń? Miałem zamiar wyświetlać zdjęcia w pętli jako:

document.write("images/" + tab[i] + ".jpg");

Aż taki zły pomysł? :)

Ale natrafiłem na problem jeszcze jeden przy samym wyświetlaniu pomieszanej tablicy.
Teraz plik losowator.js wygląda u mnie tak:

	var ilosc=65;	//ilość zdjęć w folderze images/slajdy
	var tab = new Array(ilosc);
	var dlugosc_tab=tab.length;
	
	function wypelnienie_tab(tab) {
		var i;
		for(i=0; i<dlugosc_tab; i++) {
			tab[i]=i+1;
		}
	}
	
	function mix_tab(tab) {
		var i, j, temp;
		for (i=0; i<dlugosc_tab; i++) {
			j=Math.floor(Math.random()*ilosc+1);
			temp=tab[i];
			tab[i]=tab[j];
			tab[j]=temp;
		}
	}
	
	function wyswietl_mix_tab(tab) {
		var i;
		for (i=1; i<=dlugosc_tab; i++)	{
			document.write(i +": " + tab[i] + "<br />");
		}
	}
	
	function wyswietlanie() {
		wypelnienie_tab(tab);
		mix_tab(tab);
		wyswietl_mix_tab(tab);
	}
	
	
	window.onload=function() {
		wyswietlanie();
	}

64 liczby zawsze wyświetla dobrze, a jedną losową liczbę wyświetla za każdym razem jako undefined:
user image

0

Bo:

ilosc = 65;
j=Math.floor(Math.random()*ilosc+1);

Math.random() zwraca wartosc od 0 do 1;
przyjmijmy ze Math.random() wyplulo 1;
wiec 1* 65 + 1 daje 67 = indeks o takiej wartosci nie istnieje.

to dziala dla jedynki i liczby bliskiej jedynki bo indeks 66 i 65 takze nie istnieja.. ogranicz to

0

Racja. Czyli zmiana na:

j=Math.floor(Math.random()*(ilosc-2)+1);

powinna pomóc a nie pomaga.
W tej chwili "ilosc = 63", czyli maksymalne "j" jakie może być wylosowane to 1*63+1=64.

0

to bedzie blad w druga strone jesli random da 0 ty odejmiesz 2 (-1) i dodasz jeden to bedzie zero..

0

Ale dałem nawiasy przecież: 0 * (65-2) +1 = 0 * 63 +1 = 0 +1 = 1

0

to co tearz jest za blad bo zglupialem:)

0

Ta moja zmiana, po prostu nic nie dała, cały czas jedna liczba wyświetla się jako undefined.

edit: A jednak coś dała. Teraz zawsze ostatnia liczba jest undefined. Czyli te moje ograniczenie coś źle działa.

0

Ok, już poprawiłem. Był błąd w funkcji wyświetlania tablicy.

Było tak:

      function wyswietl_mix_tab(tab) {
                var i;
                for (i=1; i<=dlugosc_tab; i++)        {
                        document.write(i +": " + tab[i] + "<br />");
                }
        }

Powinno być tak:

	function wyswietl_mix_tab(tab) {
		var i;
		for (i=0; i<dlugosc_tab; i++)	{
			document.write(i+1 +": " + tab[i] + "<br />");
		}
	}

Wcześniej pętla szła od 1 do 65 a nie od 0 do 64.

0

Mam już taki kod:

	var ilosc=65;	//ilość zdjęć w folderze images/slajdy
	var tab = new Array(ilosc);
	var dlugosc_tab=tab.length;
	
	function wypelnienie_tab(tab) {
		var i;
		for(i=0; i<dlugosc_tab; i++) {
			tab[i]=i+1;
		}
	}
	
	function mix_tab(tab) {
		var i, j, temp;
		for (i=0; i<dlugosc_tab; i++) {
			j=Math.floor(Math.random()*(ilosc-2)+1);
			temp=tab[i];
			tab[i]=tab[j];
			tab[j]=temp;
		}
	}

	wypelnienie_tab(tab);
	window.onload=function() {
		mix_tab(tab);
		var i;
		for (i=0; i<dlugosc_tab; i++)	{

			document.getElementById('zdjecie').innerHTML=("<img src=\"images/slajdy/" + tab[i] + ".jpg\" />");
                        /* TUTAJ PAUZA */
		}
	}

Teraz nie wiem jak robić 3sekundową pauzę w miejscu, które zaznaczyłem w kodzie. W tej chwili po odświeżeniu strony wyświetla się ostatnie zdjęcie (ost krok pętli). Nie wiem jak wykorzystać setInterval lub setTimeout do przytrzymania każdego zdjęcia przez 2 sekundy.

Próbowałem w ten sposób:

	wypelnienie_tab(tab);
	window.onload=function() {
		mix_tab(tab);
		var i;
		for (i=0; i<dlugosc_tab; i++)	{
			setTimeout(function() {
				document.getElementById('zdjecie').innerHTML=("<img src=\"images/slajdy/" + tab[i] + ".jpg\" />");
			},2000);
		}
	}

ale przestaje się cokolwiek wyświetlać na stronie, a firebug pokazuje taki link do zdjęcia images/slajdy/undefined.jpg.

0

bo zastosowanie setInterval lub setTimeout tu nie pasuje.

zobacz co robi setTimeout i jak sie go wykorzystuje http://lekka.cba.pl/htm_java/javascript_setTimeout_when_use.htm

i dlaczego dzialajc w tym miejscu nie przynosi efektu

w miejsce /* TUTAJ PAUZA */ musisz wstawic CZASOWSTRZYMYWACZ :P czyli skrypt ktory bedzie robil NIC przez okreslona ilosc czasu
masz ich mnogo w internecie pod nazwa javascript delay (z ang delay - opoznienie)

a jesli chcesz uzyc setTimeout to zmien strukture funkcji

0

No tak, już wcześniej szukałem tego i próbowałem użyć, ale każdy,który wstawiłem (a było ich kilka) zawieszał mi przeglądarkę i wysypywało się wszystko.

0

Dodaj to do kodu

function animacja() {
document.getElementById('zdjecie').innerHTML=("<img src=\"http://mojastrona.pl/images/slajdy/" + tab[i] + ".jpg\" />");
setTimeout(function() { i++; if (i < dlugosc_tab) { animacja(); } }, 3000);
};	

a on load niech wyglada tak:
window.onload=function() {
wypelnienie_tab(tab);
mix_tab(tab);
animacja();
}
i zadeklaruj na poczatkju var i oraz ustaw ja na zero;

potem dodaj do ifa w funkcji naimacja else zeby wywoalc funkcje tasujaca ponownie elementy

i to by bylo milion razy prostsze i szybsze i ladniejsze gdyby dorzucic jquery P

1 użytkowników online, w tym zalogowanych: 0, gości: 1