Kurs JavaScript odc. 2: odpowiedzi do zadań

pytanie zadane 7 lipca 2015 w JavaScript przez Bartos Użytkownik (610 p.)

Witam, rozwiązałem zadania z rzeczonego odcinka kursu JS :) Co myślicie o takich rozwiązaniach? Czy można to zrobić lepiej? Proszę o konstruktywną krytykę :)

#1 Dlaczego dla pustego pola wyświetla się wartość zero?
Ponieważ skrypt w warunku else if (liczba==0) traktuje 0 nie jako liczbę, lecz jako zero, nic, pustkę, nicość :D
Rozwiązanie? Sprawić aby skrypt traktował 0 jako liczbę:

			else if (liczba=="0") document.getElementById("wynik").innerHTML="Wpisano zero";
			else if (liczba==0) document.getElementById("wynik").innerHTML="";

#2 Jak sprawić, aby skrypt zachował się poprawnie w przyadku innej kolejności liczb oraz gdy użytkownik nie wpisze poprawnej wartośći?

Aby skrypt liczył poprawnie w innej kolejności wystarczy dodać kolejną pętlę liczącą w drugą stronę:

			else if (liczba1>liczba2) 
			{
				for(i=liczba1; i>=liczba2; i--)
				{ ciag=ciag+i+" "; }
				document.getElementById("wynik").innerHTML=ciag;
			}
			else if (liczba1<liczba2)
			{
				for(i=liczba1; i<=liczba2; i++)
				{ ciag=ciag+i+" "; }
				document.getElementById("wynik").innerHTML=ciag;
			}

A jeśli użytkownik wpisze nieporawne wartośći należy podać szereg innych warunków:

if (liczba1==0 && liczba2==0) document.getElementById("wynik").innerHTML="";
			else if (liczba1==0 || liczba2==0) document.getElementById("wynik").innerHTML="Podaj dwie liczby!";
			else if ( isNaN(liczba1) && isNaN(liczba2) ) document.getElementById("wynik").innerHTML="W obu polach nie wpisano liczby!";
			else if ( isNaN(liczba1) ) document.getElementById("wynik").innerHTML="Do lewego pola nie wpisano liczby!";
			else if ( isNaN(liczba2) ) document.getElementById("wynik").innerHTML="Do prawego pola nie wpisano liczby!";
			else if (liczba1==liczba2) document.getElementById("wynik").innerHTML="Podano takie same liczby!";

cały skrypt tutaj: http://wklej.org/id/1752972/ żeby już nie zaśmiecać kodem w poście.

#3 Jakie wady ma slajder?
W funkcji ustawslajd() przypisywano argumentowi funkcji numer aktualnego slajdu, co powoduje to, że który numer nie klikniemy pokaże nam się slajd kolejny.

Naprawiłem to w ten sposób, że do rzeczonej funkcji dodałem switcha, który zmienia nam numer slajdu do wyświetlenia w zależności od tego co prześlemy funkcji (zmienna nrslajdu). Cały kod wygląda tak:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset='utf-8' />
<meta name='description' 		content='    ' />
<meta name='keywords' 		content='    ' />
<meta http-equiv='X-UA-Compatible' content='IE-edge,chrome=1' />
<title>slajder</title>
<style>
body
{		background-color:#222;	font-size:24px; 	color:#eee; margin:0; padding:0;}
#slajder img
{		width:600px;		height:400px;	background-size:100% 100%; }
div {float:left;}
</style>
	
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
	var numer=0;
	var timer1 = 0;
	var timer2 = 0;
	
		function fadeout()
		{ $("#slajder").fadeOut(500); }
		
		function ustawslajd(nrslajdu)
		{
			clearTimeout(timer1);
			clearTimeout(timer2);
			switch(nrslajdu)
			{
				case 1: numer=0; 		break;
				case 2: numer=1; 		break;
				case 3: numer=2; 		break;
				case 4: numer=3; 		break;
				case 5: numer=4; 		break;
			}
			fadeout();
			setTimeout("zmiana()", 500);
		}
	
		function zmiana()
		{ 
			numer++;
			if (numer>5) numer=1;
			$("#slajder").fadeIn(500);
			var plik="<img src='slajd"+numer+".jpg'> </img>"
			document.getElementById("slajder").innerHTML=plik;
			timer1 = setTimeout("fadeout()",4500);
			timer2 = setTimeout("zmiana()", 5000);
		}
		
</script>
</head>

<body  onload="zmiana()">

<div id="kropka1" onclick="ustawslajd(1)"><img src="kropa.png"></img></div>
<div id="kropka2" onclick="ustawslajd(2)"><img src="kropa.png"></img></div>
<div id="kropka3" onclick="ustawslajd(3)"><img src="kropa.png"></img></div>
<div id="kropka4" onclick="ustawslajd(4)"><img src="kropa.png"></img></div>
<div id="kropka5" onclick="ustawslajd(5)"><img src="kropa.png"></img></div>
<div style="clear:both;"></div>

<div id="slajder"></div>



</body>
</html>

Co sądzicie o takich rozwiązaniach. Co i jak możnaby zrobić lepiej? :)

4 odpowiedzi

odpowiedź 7 lipca 2015 przez Comandeer Guru (601,110 p.)

ad. 1)

Ponieważ skrypt w warunku else if (liczba==0) traktuje 0 nie jako liczbę, lecz jako zero, nic, pustkę, nicość :D

No nie do końca. Problem polega na tym, że JS jest językiem dynamicznie typowanym, w którym typy są rzutowane przed dokonaniem porównania. Stąd '' == false == 0.

Najpoprawniejszym rozwiązaniem jest sprawdzenie czy pole nie jest puste (liczba.length === 0), a następnie zrzutowanie jej na liczbę przy pomocy parseInt

ad. 2) Albo zamienić liczby miejscami… ;)

Co do switch - czemu nie po prostu numer = nrslajdu? Jedna linijka vs Twoje milion ;)

komentarz 7 lipca 2015 przez Bartos Użytkownik (610 p.)

Poniewaź numer to numer aktualnego sladju :) A tam chcemy aby zmieniono slajd na ten, na który klikniemy.
O to chodzi:

<div id="kropka1" onclick="ustawslajd(1)"><img src="kropa.png"></img></div>

<div id="kropka2" onclick="ustawslajd(2)"><img src="kropa.png"></img></div>

<div id="kropka3" onclick="ustawslajd(3)"><img src="kropa.png"></img></div>

<div id="kropka4" onclick="ustawslajd(4)"><img src="kropa.png"></img></div>

<div id="kropka5" onclick="ustawslajd(5)"><img src="kropa.png"></img></div>

komentarz 7 lipca 2015 przez Comandeer Guru (601,110 p.)

No ok… Ale przecież mój krótki kod robi dokładnie to samo, co Twój switch ;)

komentarz 8 lipca 2015 przez Bartos Użytkownik (610 p.)

Rzeczywiście ^^ trochę się w tym pogubiłem. Dzięki za pomoc :)

komentarz 8 lipca 2015 przez Bartos Użytkownik (610 p.)

Kurcze, teraz jak pobrałem pliki z odcinka, zauważyłem, że to chyba nie ten błąd, ponieważ tam też działa dobrze to o co mi chodziło :D Jak wcześniej sam robiłem ten slajder na wzór tego z odcinka musiałem zrobić gdzieś błąd przez co u mnie to szwankowało.

odpowiedź 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

if (liczba1==0 && liczba2==0) document.getElementById("wynik").innerHTML="";
			else if (liczba1==0 || liczba2==0) document.getElementById("wynik").innerHTML="Podaj dwie liczby!";

Fajnie to jest pomyślane, ale 0 w ciągu to także liczba, a powyższe warunki traktują ją jako "Nie podałeś niczego", albo "Podaj dwie liczby." No a ja mogę właśnie chcieć wyświetlić ciąg od 0 do 12 lub od -12 do 0 włącznie. Pytanie jak zabezpieczyć skrypt, aby zero traktował jako liczbę, a pole puste jako coś co nie zostało wypełnione.

Może warto to zapisać jako:

else if (number1=="" && number2=="") document.getElementById("result").innerHTML="Pusto!";
            else if (number1=="") document.getElementById("result").innerHTML="Pierwsze pole jest puste, podaj dwie liczby!";
            else if (number2=="") document.getElementById("result").innerHTML="Drugie pole jest puste, podaj dwie liczby!";

PS. Dzięki, super to zrobiłeś i bardzo mi pomogło w nauce :)

komentarz 31 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Ale "" == 0 więc nie tędy droga ;)

komentarz 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

Jestem początkującym programistą, ale sprawdź na moim skrypcie

http://www.winkart.pl/_js/03-a-sequence-of-numbers/

Wygląda, że działa to ok?

komentarz 31 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Wpisz sobie w jedno pole spację, a w drugie dwie spacje ;)

komentarz 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

No dla spacji faktycznie nie działa :)

Ale musisz przyznać, że z pustym polem spełnia swoje zadanie :D

odpowiedź 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

Mam jeszcze pytanie do zadania z ciągiem liczb.

W skrypcie http://www.winkart.pl/_js/03-a-sequence-of-numbers/ dla przykładowych wartości 1=22 oraz 2=122 występuje ciekawa zależność. Skrypt nie rozpoznaje tych liczb jako całość tylko prawdopodobnie kierując się pierwszym znakiem np. 22 oraz 122 czyli 2>1 a ciąg jest malejący.

Czy ktoś z was ma może pomysł czemu tak sie dzieje i jak to poprawić?

komentarz 31 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Bo skrypt traktuje te liczby jako ciągi, a ciąg zaczynający się od 2 jest większy od ciągu zaczynającego się od 1. Musisz te wartości przekonwertować na liczby.

komentarz 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

Rozumiem, a jak mogę to przekonwertować na liczby, czy wystarczy parseIint() jeżeli tak to jak to zapisać?

komentarz 31 sierpnia 2015 przez Comandeer Guru (601,110 p.)

liczba = parseInt(liczba, 10);

komentarz 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

Zapisałem:

document.getElementById("result").innerHTML = "Ciąg jest rosnący <br/>" + parseInt(numbers, 10);

ale to nie działa.

komentarz 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

Nie bardzo wiem jak to zapisać w kodzie dla zmiennej var ciag = ""; bo rozumiem, że ta część ma zostać zmieniona na liczby całkowite?

komentarz 31 sierpnia 2015 przez Comandeer Guru (601,110 p.)

Ty masz przez parseInt przepuścić number1 i number2

komentarz 31 sierpnia 2015 przez Winkart Nowicjusz (180 p.)

Dzięki, udało mi się zrobić wcześniej :)

http://www.winkart.pl/_js/03-a-sequence-of-numbers/

Teraz działa poprawnie.

odpowiedź 7 lutego 2017 przez FaloZ Początkujący (460 p.)

Mam pytanko, czy może mi ktoś wyjaśnić, dlaczego przy wpisanych takich samych wartościach w obu polach wartością, która jest zwracana, jest liczba? Dlaczego w instrukcji warunkowej nie działa ciąg znaków? Czy trzeba te wartości jakoś sparsować z int na string? Taka sama sytuacja jest w "ifach" z isNaN - wypisana zostaje wartość pierwszego pola. Może po prostu mam gdzieś błąd w kodzie, albo jeszcze jestem niedouczony. Chciałem rozbić to na inne funkcję, ale pomyślałem, że instrukcje warunkowe wystarczą do szczęścia. Będę bardzo wdzięczny za wszelkie wskazówki. Pozdrawiam


<!DOCTYPE html>
<html>

<head>
	
	<script type="text/javascript">
	
		function wypisz()
		{
		var liczba1 = document.getElementById("pole1").value;
		var liczba2 = document.getElementById("pole2").value;
		var napis = "";
	
		if(liczba1<=liczba2)
		{
			for(i=liczba1; i<=liczba2; i++)
			{
				napis = napis + i + " ";
			}
			document.getElementById("wynik").innerHTML = napis;
		}
		else if (liczba1>=liczba2)
		{
			for(i=liczba1; i>=liczba2; i--)
			{
				napis = napis + i + " ";
			}
			document.getElementById("wynik").innerHTML = napis;
		}
		else if (liczba1==liczba2)
		{
			document.getElementById("wynik").innerHTML = "Podane liczby są takie same";
		}
		else if (isNaN(liczba1))
		{
			document.getElementById("wynik").innerHTML = "Podana wartość w lewym polu nie jest liczbą!";
		}
		else if (isNaN(liczba2))
		{
			document.getElementById("wynik").innerHTML = "Podana wartość w prawym polu nie jest liczbą!";
		}
		}
	</script>
	
</head>

<body>

	<input type="text" id="pole1" />
	<input type="text" id="pole2"/>
	<input type="submit" value="Pokaż" onclick="wypisz()"/>

	<div id="wynik"></div>
</body>

</html>