• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wisielec z kursu JS

VPS Starter Arubacloud
+3 głosów
497 wizyt
pytanie zadane 7 sierpnia 2016 w JavaScript przez Pieczenieg Początkujący (290 p.)

Cześć :) Postanowiłem pobawić się trochę kodem JS z odcinka, w którym pan Mirek tworzył z nami grę w wisielca. Dodałem wybór kategorii (jedna z trzech, żeby wiedzieć czy wgl mi się uda) i po 10 haseł w każdej kategorii (umieszczone w tablicach). Teraz jako początkujący programista, chciałem dowiedzieć się, czy mój kod został dobrze napisany? Co o nim sądzicie i czy można to zrobić w sposób prostszy/szybszy do wczytania przez przeglądarkę? Oczywiście zostajemy tylko w JSie, bo tego się w danej chwili uczę, jedna rzecz na raz :) 

var p = new Array (10);

p[0] = "Bez pracy nie ma kołaczy";
p[1] = "Nie chwal dnia przed zachodem słońca";
p[2] = "Nie rób drugiemu co tobie nie miłe";
p[3] = "Miłość jest ślepa";
p[4] = "Baba z wozu koniom lżej";
p[5] = "Kto pod kim dołki kopie ten sam w nie wpada";
p[6] = "Robić z igły widły";
p[7] = "Widziały gały co brały";
p[8] = "Śmiać się baranim głosem";
p[9] = "Bić się z myślami";

var l = new Array (10);

l[0] = "Józef Piłsudski";
l[1] = "Karol Wojtyła";
l[2] = "Jurij Gagarin";
l[3] = "Jan Matejko";
l[4] = "George Martin";
l[5] = "Mikołaj Kopernik";
l[6] = "Andrzej Wajda";
l[7] = "Bogusław Linda";
l[8] = "Krystyna Skarbek";
l[9] = "Emilia Plater";

var k = new Array (10);

k[0] = "Polska";
k[1] = "Rosja";
k[2] = "Ukraina";
k[3] = "Niemcy";
k[4] = "Wielka Brytania";
k[5] = "Macedonia";
k[6] = "Białoruś";
k[7] = "Słowacja";
k[8] = "Czechy";
k[9] = "Węgry";

var numer = Math.floor(Math.random()*10);

var haslo = "";
var dlugosc ="";
function kat(nrkat)
{
if(nrkat==1) haslo=p[numer];
else
	if (nrkat==2) haslo=l[numer];
	else
	 haslo=k[numer];

start();

haselo(); 

}

function haselo() 
{	
	dlugosc = haslo.length; 
	haslo = haslo.toUpperCase();
kreski();
}
var haslo1 = "";
var ile_skuch = 0;
function kreski(){
		for (i=0; i<dlugosc; i++)
{
	if(haslo.charAt(i)==" ") haslo1 = haslo1 + " ";
	else haslo1 = haslo1 + "-";
	wypisz_haslo();
}
}
function wypisz_haslo()
{	
	document.getElementById("plansza").innerHTML = haslo1;
}

Wybór kategorii wyświetla się na wejście, są to: przysłowia, sławni ludzie oraz kraje świata (wiem, że bardziej Europy, ale mniejsza o to ;p), do każdego z napisów jest dodany onclick wywołujący funkcję "kat" i wysyłający odpowiedni dla siebie "nrkat". Z góry dziękuję za każdą ocenę, radę i opinię :)

4
komentarz 7 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Na początek możesz przejść z new Array() na []

komentarz 7 sierpnia 2016 przez Pieczenieg Początkujący (290 p.)
Racja, powinny być kanciaste, ale skoro nawet nie zauważyłem i działa, to jaka jest różnica? Bo sam jestem zdziwiony :D
1
komentarz 7 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)

Można tak i tak, ale notacja literałowa jest po prostu prostsza.

Taki przykład,

var a = [123],
    b = new Array(123);
console.log(a.length + " " + a[0]);
console.log(b.length + " " + b[0]);

sprawdź jakie wyniki otrzymasz.

2 odpowiedzi

+2 głosów
odpowiedź 9 sierpnia 2016 przez Ehlert Ekspert (212,630 p.)

Dodam coś od siebie...

  • Kod warto wrzucać na github'a, więc radzę oduczyć się języka polskiego w kodzie.
  • Zapominasz o słowie kluczowym var, a to bardzo poważny błąd. 
  • Kod ma złą tabulację, nie wiadomo co się dzieje. 
  • Wszystko jest publiczne. Otwieram konsolę i klepię co chcę. Wywołuje wszystkie funkcje kiedy mi się podoba. Jak myślisz jakie byłyby skutki, gdyby taką konwencję przyjęliby twórcy witryn banków?
  • Pisząc w JS lepiej przyzwyczaj się do stawiania klamry { w tej samej linijce co for, function() itp.
  • Poczytaj o wzorcach projektowych 
  • I koniecznie CAŁE TO
komentarz 9 sierpnia 2016 przez Ehlert Ekspert (212,630 p.)

No i "use strict"; laugh

1
komentarz 10 sierpnia 2016 przez Comandeer Guru (599,730 p.)

Polecanie JSLinta w 2013 roku? Dziwne… Powinien być polecony ESLint, w ostateczności JSHint + JSCS. Tak samo module pattern – w 2013 już zaczynał się powoli boom na ES6, a AMD/CJS/UMD były już standardem. 

komentarz 17 sierpnia 2016 przez Pieczenieg Początkujący (290 p.)
edycja 17 sierpnia 2016 przez Pieczenieg
Dzięki wielkie, wezmę sobie do serca :D

 

EDIT: Małe pytanie. Po co po zadeklarowaniu zmiennej za pomocą "var", za każdym razem używać tego vara gdy chcę przypisać po prostu nową wartość do zmiennej, a nie ją deklarować po raz kolejny?
+1 głos
odpowiedź 9 sierpnia 2016 przez niezalogowany

1. Nie ma sensu marnować Twojego cennego czasu na deklaracje tablicy w ten sposób:

var k = new Array (10); //operator new jest tu zbędny, a dla przejrzystości [] w tablicach a nie ()
 
k[0] = "Polska";
k[1] = "Rosja";
k[2] = "Ukraina";
k[3] = "Niemcy";
k[4] = "Wielka Brytania";
k[5] = "Macedonia";
k[6] = "Białoruś";
k[7] = "Słowacja";
k[8] = "Czechy";
k[9] = "Węgry";

Skoro można to zrobić o tak:

var k = ["a","b","c","..."]

2. Nazwy zmiennych

Coś co wykładowca na studiach tłukł mi do głowy, a ja nie wiedziałem czemu... Jak zaczniesz pracować jako web developer i dostaniesz kod z nazwami obiektów typu "k"..., albo"l"..., albo napisane w jakimś dziwnym języku to idzie się zdenerwować, uwierz mi ;) Podstawy są bardzo ważne do nie popełniania błędów w przyszłości - nazwy jak i cały kod po angielsku, a nazwy zmiennych coś mają Ci mówić jak pierwszy raz na kod popatrzysz ;)

3. Mniej istotne

var haslo = "";
var dlugosc ="";
// "var password;" bez " = '' " robi to samo, a zaoszczędzasz czas, ale to mikro optymalizacja

wskazówka: albo wstawiaj białe znaki przed i po znakach matematycznych typu " = " albo nie, bo to też niszczy przejrzystość kodu

 

Generalnie, to pokazany wycinek kodu prezentuje się ładnie :)

komentarz 17 sierpnia 2016 przez Pieczenieg Początkujący (290 p.)
Dzięki za pomocne rady :D Faktycznie, nazwy zmiennych coś powinny mówić, i na początku mówiły, tylko jak nie działało to zacząłem już głupieć i myślałem, że w tym tkwi błąd ;p

Podobne pytania

0 głosów
1 odpowiedź 203 wizyt
pytanie zadane 11 sierpnia 2016 w JavaScript przez deti27 Nowicjusz (180 p.)
+1 głos
2 odpowiedzi 383 wizyt
+46 głosów
19 odpowiedzi 13,326 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...