Od dłuższego czasu zajmuję się programowaniem w JavaScript i postanowiłem podzielić się swoją wiedzą i napisać kurs JavaScript.

Kurs możecie znaleźć pod adresem http://kursjs.net76.net/.

Zapraszam do czytania. Dziękuję za wszelkie uwagi. Kurs będzie dopracowywany z upływem czasu.

1. Zwiększenie rozmiaru tekstu rozwala menu
2. http://kursjs.net76.net/spis-tresci/88-sterowanie/88-petle w listingu masz błąd, alertuje "jest liczbą pierwszą" a powinno być parzystą
3. Nawigacja fadeIn/fadeOut śmiesznie wygląda
4. Ogólnie wg mnie bardzo pobieżnie opisujesz tematy, w tablicach nie dowiedziałem się np. o czymś takim jak array.length a na pewno by mi się to przydało, w pętlach dobrze by było przedstawić zalecane praktyki, jak np. definiowanie warunku na początku, czyli np.

[HTML] pobierz, plaintext 
for(var i=0,c=array.length;i<c;i++)
[HTML] pobierz, plaintext 

zamiast

[HTML] pobierz, plaintext 
for(var i=0;i<array.length;i++)
[HTML] pobierz, plaintext 

5. Jak już zacząłem mieszać ocenę treści merytorycznej serwisu z jego wykonaniem to przyczepię się do kodu: za dużo plików .js i .css, powinieneś je poscalać, przyspieszyłoby to ładowanie strony. Dodatkowo skrypty osadzone brzydko wyglądają, powrzucaj je do plików .js
6. Z ilości nagłówków h1,h2,h3,h4... wnioskuję, że starałeś kodować się pod SEO - jeżeli już się za to zabierasz to popracuj jeszcze m.in. nad pustymi tagami, atrybutami title i alt

na razie tyle, nie mam czasu na wnikliwszą analizę

1. nawigacja która się snuje podczas przewijania jest zbędna, żeby nie napisać przeszkadza jak cholera...
2. pokuś się o rozbudowanie tematu np. o wyjaśnienie czym różni się poniższy kod:

[JAVASCRIPT] pobierz, plaintext 
for(var i = 0 ; i < 20; i++){}
[JAVASCRIPT] pobierz, plaintext 

od:

[JAVASCRIPT] pobierz, plaintext 
var i = 0;
for(i; i < 20; ++i){}
[JAVASCRIPT] pobierz, plaintext 

I dlaczego drugi przykład jest wydajniejszy.

3. tło jest innego koloru niż obraz który się później wczytuje.
4. strona wydaje się "ciężka" podczas przewijania.
5. straszny syf jeśli chodzi o kod, umieść JS i CSS w osobnych plikach (to pewnie wyjaśnia punkt 4).
6. nie pisz w języku polskim kodu, szczególnie gdy piszesz po kilka razy "zmienna" jest to mylące.
7. wyeksponuj bardziej kod, może umieść go w ramce? aby nie zlewał się z tekstem.

Ahahahahahhahahahah

@up: W dziale Oceny nie oceniamy czyjegoś wyznania, a przedstawione prace. Twój komentarz jest absolutnie zbędny.

Pomysł dobry, choć w sieci jest cała masa tym podobnych kursów. Layout jak dla mnie zbyt klasyczny i trochę zbyt szarawy.

Tak samo w dziale Oceny nie oceniamy czyjegoś gustu kulinarnego, umiejętności prowadzenia samochodem oraz koloru włosów, a także wielu innych. Brawo @mortus. Cieszę się, że to zauważyłeś!

Moim zdaniem dobra robota. Można się przyczepić do wielu rzeczy, ale moim zdaniem kurs ma być przeznaczony dla początkujących, więc jak za dużo będziesz mącił to wyjdzie coś czego początkujący nie zrozumie. Dlatego moim zdaniem na razie nie powinieneś opisywać wszystkich zawiłości języka. Ew. zrobić drugą część kursu, gdzie opisujesz znacznie trudniejsze rzeczy.

Tak na szybko - brakuje mi dokładniejszego opisu zmian w DOM-ie. Chociażby https://developer.mozilla.org/pl/docs/DOM/e...nt.setAttribute (przynajmniej nie znalazłem na szybko).

Fajnie by też było jakbyś linkował nazwy funkcji do strony mdc - później przyda się umiejętność szukania w dokumentacji.


Po co? Żeby zamotać początkującemu? Przynajmniej takie jest moje zdanie.

Poza tym:
- deklaracja zmiennej "i" nie ma większego znaczenia. Osobiście nie lubię po prostu jak var znajduje się w for-ze, ale to subiektywna ocena. Używam:

- różnica między ++i , a i++ w for-ze jest bardzo bardzo bardzo znikoma. W swojej "karierze" tylko raz musiałem używać wszystkich dostępnych tricków, żeby aż tak zoptymalizować kod. Jest potrzeba, żeby początkujący to wiedział?

Jak patrze na takie pierdoly to wspolczuje osobom, ktorzy beda sie tego uczyc.
Miedzy var i; a samym i; jest gigantyczna roznica, var powoduje utworzenie zmiennej lokalnej (np. wewnatrz funkcji) i nie jest ona widziana poza blokiem kodu, w ktorym sie znajduje. Nie stosowanie var powoduje deklaracje zmiennych globalnych, czyli na 99% nadpiszesz sobie tym inna zmienna (tez globalna). Nie jestem mistrzem JS, raczej bazuje tylko ja jQuery, wiec jak cos nie do konca dobrze napisalem to prosze mnie poprawic.

@up
Chodzi o różnicę między:

[JAVASCRIPT] pobierz, plaintext 
var i = 0;
for(i;...
[JAVASCRIPT] pobierz, plaintext 

a

[JAVASCRIPT] pobierz, plaintext 
for(var i = 0;...
[JAVASCRIPT] pobierz, plaintext 

Skoro już taka dyskusja na ten temat powstała, to może autor tego by się wypowiedział ? Bo sam zastanawiam się, czy napisał na dwa różne sposoby przez przypadek (o ile można to tak ująć) i chodziło tylko o różnicę między ++i, a i++, czy może jest różnica między jedną a drugą deklaracją. Osobiście różnicy nie znalazłem, a chętnie bym się dowiedział, czy może jednak jakaś jest.

Widać, że dość starannie podszedłeś do tematu. Dobry kurs to taki, który nie omawia po kolei wszystkiego jak leci a ten, który zatrzymuje się przy ciekawszych "zjawiskach" starając się je opisać na przykładzie zastosowania i pokazuje plusy/minusy/problemy jakie się wiążą z danym zagadnieniem.

Popieram przedmówców by dopisywać gdzie się da czemu coś jest tak a nie inaczej, czemu coś jest wydajniejsze itp. Samo napisanie "to jest lepsze" nie wpadnie w pamięć ani nie przyczyni się do zrozumienia problemu

Pod względem wizualnym - dodałbym odrobinę stonowanych kolorów, choć pod względem czytelności dla średniej czcionki jest ok. Pod względem technicznym rażących błędów nie widzę.

Nazwałeś swój kurs "praktycznym" to spore wyzwanie - musisz zatem wyszukiwać i opisywać także różne techniki związane z JS oto kilka moich propozycji, którym możesz poświęcić więcej uwagi:

- JSON,
- AJAX,
- wbudowane i często używane obiekty (Math, Date itp),
- zdarzenia (events),
- wzorzec leniwych funkcji (sam kiedyś o tym nawet pisałem a temat jest ciekawy)

a także inne ciekawe rzeczy, które przykują Twoją uwagę

Podoba się

To ja uzupełnię nieścisłości w temacie:
- var musi być w każdym przypadku przy deklarowani zmiennej - chyba, że jest augmentem funkcji
- zmienna lokalna i globalna do poczytania - absolutnie nie o to mi chodziło przy poprzednim poście.
- nie ma różnicy w kodzie:


i o to mi się rozchodziło
- w niektórych językach( nie w js ), gdy w for-ze wpiszemy for(var i=0;) to zmienna i będzie lokalna dla for-a.


- jest różnica między:


Już nie mówiąc, że to inaczej działa( inna liczba będzie zwrócona ) to ++i jest nieznacznie szybsze od i++. Ale żadnych odczuwalnych zmian nie zauważycie.

kamil4u - nie wprowadzaj ludzi w błąd.

jest różnica między:

[JAVASCRIPT] pobierz, plaintext 
for(var i = 0; i < 20; i++){}
[JAVASCRIPT] pobierz, plaintext 

a:

[JAVASCRIPT] pobierz, plaintext 
var i = 0;
for(i; i < 20; i++){}
[JAVASCRIPT] pobierz, plaintext 

Taka sama jak między:

[JAVASCRIPT] pobierz, plaintext 
for(var i = 0; i< data.count ; i++){}
[JAVASCRIPT] pobierz, plaintext 

a:

[JAVASCRIPT] pobierz, plaintext 
var  count = data.count ;
for( var i = 0 ; i< count ; i++){}
[JAVASCRIPT] pobierz, plaintext 

http://jsfiddle.net/jDVb5/

lukaskolista już Ci to nakreślił. var w pętlach deklaruje zmienne za każdym razem jej wywołania, tak samo jak sprawdza za każdym razem jej warunek.
To samo odnosi się do odwrotnej iteracji i/lub połączenia warunków:

[JAVASCRIPT] pobierz, plaintext 
var i = 0;
while(i< length){
i++;
}
[JAVASCRIPT] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
var i = length;
while(i--){}
[JAVASCRIPT] pobierz, plaintext 

To prawda że przy wyświetleniu "hello world' żadnych zmian się nie zauważy. Jednak kod pisany optymalnie, nie jest użyty do banalnych zadań i w wypadku gdy coś trzeba wykonać choćby tysiąc razy, różnicę można już wyłapać gołym okiem.





Jest, ponieważ to kurs JS i początkujący ma się go nauczyć, łącznie z alternatywnym, optymalnym pisaniem kodu, ponieważ to mu się przyda w przyszłości.

A jak już pisać poradnik, to szeroko. I nie mówię tu że powyższy kurs ma jakieś braki i dlatego jest zły. Nie od razu Rzym zbudowano

Własnie dlaczego ? Skoro javscript przenosi wzystkie deklaracje zmiennych na poczatek funkcji i zakres jest funkcji nie klamr czy pętli.
To var i nie jest deklarowane w pętli, a na poczatku funkcji nie wazne gdzie je umiescisz w funkcji. Tak bynajmniej piszą w książkach np w tej: http://helion.pl/ksiazki/javascript-wzorce...anov,jascwz.htm
Posiadam tylko podstawową wiedze w zakresie javascripta i byłbym wdzieczny jakby mi ktoś to wyjaśnił bo naprawe wzbudziło to moje zainteresowanie dlaczego drugi przykład jest wydajniejszy.
Czy chodzi o różnice w wydajności między pre i post inkrementacją ?

Coś chyba mówisz nie tak. Twój kod z jsfiddle jest bez sensu i nijak ma się do sytuacji.

Pętla for działa tak:



Od kiedy? Warunek i owszem sprawdzany jest za każdym razem. Ale pierwsza część wywoływana jest tylko raz przed rozpoczęciem pętli.
Dowód:


Gdyby było tak jak mówisz, dostalibyśmy 3 zera.

Zapewniam Cię, że przy pętli 1000 obrotów nie zauważysz różnicy między ++i ,a i++. To samo przy warunkach( jeżeli warunek jest prosty typu sprawdzenie długości tablicy ).

I żeby nie było akurat przy warunkach to oczywistą rzeczą jest, że lepiej wynik porównać ze zmienną, a nie cały czas ją wyliczać, mimo wszystko różnicy nie zauważysz( jeżeli masz lepszy sprzęt niż przeciętny smartfon ).


Napisz, które moje zdanie jest nieprawdziwe i napisz dokładnie jak powinno być. To co napisałeś teraz uważam, że jest bardzo niewystarczające albo wręcz nie na temat.

Ucząc się jeździć samochodem, chciałbyś, żeby instruktorzy pokazywali też jak się jeździ wyścigowo. Nie! Kurs prawa jazdy ma Cię nauczyć jeździć po mieście. Jeżeli chcesz pojeździć rajdowo to zapisz się na inny kurs. Można wspomnieć o jakieś rzeczy, ale rozpisywanie się na temat "szybkiej zmiany biegów w wyścigu", gdy nie umiesz dobrze wrzucić z "jedynki" na "dwójkę" bez szarpania jest moim zdaniem bez sensu.

Od zawsze. Nie widzisz różnicy między jej deklarowaniem, a sprawdzaniem, dlatego uważasz że "dostalibyśmy 3 zera", co jest w ogóle bez sensu, bo to tak, jakbyś miał pretensje że w poniższym kodzie wynik będzie 3, a nie 1...

[JAVASCRIPT] pobierz, plaintext 
var foo = 1;
var foo = 2;
var foo = 3;
alert(foo);
[JAVASCRIPT] pobierz, plaintext 

Idąc dalej, kluczowe jest tu słowo var.

mając pętlę

[JAVASCRIPT] pobierz, plaintext 
for(var i=0; i<3; i++){}
[JAVASCRIPT] pobierz, plaintext 

i, będzie sprawdzane w takiej postaci:



zamiast



czyli na tej samej zasadzie co:

[JAVASCRIPT] pobierz, plaintext 
var foo;
var bar;
var ble;
[JAVASCRIPT] pobierz, plaintext 

a:

[JAVASCRIPT] pobierz, plaintext 
var foo, bar, ble;
[JAVASCRIPT] pobierz, plaintext 

Już widzisz różnicę w deklaracji i sprawdzaniu? Prościej nie da się tego wyjaśnić.


Możliwe, ilość obrotów była tylko przykładem. Ważne jest też to co jest w środku pętli, a nie to ile ona obrotów wykonuje. Choć tak jak już wspomniałem, nie chodzi tu o


Proszę, napisz jeszcze więcej takich porównań.
Kurs to kurs, jak się upierasz przy jego okrajaniu, bo nie widzisz potrzeby aby początkujący wiedział że istnieje alternatywa/optymalizacja, to zajrzyj do działu przedszkole, gdzie jest pełno kodu, właśnie z kursu dla początkujących, gdzie autor pewnie sam nim był.

Wreszcie zrozumiałem o co Ci chodzi

Powiem szczerze, że o tym nie wiedziałem. Niestety nie mogę nigdzie znaleźć informacji na ten temat - a dokładniej w żadnej dokumentacji, bo na blogu różni ludzi różnie piszą. Jak możesz przytocz informację na ten temat. Ale mniejsza z tym. Zamiast szukać po dokumentacjach i patrzeć do kodu przeglądarek proponuję zrobić niezależny test i będzie wszystko wiadomo:



Od razu widać, że zmienna globalna( test4 ) to spory spadek na wydajności. Jednak wszystkie pozostałe 3 rozwiązania są do siebie bardzo zbliżone. Różnica jest około 3 milisekund. W większości przypadków test1( Twój faworyt ) wypada najlepiej, ale nie zawsze.

Teraz szybie obliczenia: 10000*100000 = 1 000 000 000 = 1 miliard!
I różnice są rzędu 3ms. Dodatkowo trzeba zaznaczyć, że średnia wyników( dla test 1) to 1015 ms. Czyli 0,296%.

Teraz pytanie czy warto się przejmować spadkiem wydajności o około 0,296%( i nie zawsze jest powiedziane, że "test1" jest najszybszy - podkreślam, że w większości wypadków tak, ale to nie oznacza, że we wszystkich )? Przy myśleniu nad tym pytaniem warto sobie przypomnieć, że czytając taki kurs czytający jest z reguły początkującym. Jest to pytanie retoryczne. Niech każdy sam sobie odpowie na to pytanie i ew. zmieni, bądź nie decyzję. Każdy z nas swoją opinię na ten temat wyraził, więc nie ma sensu prowadzić tego sporu( chyba, że masz jakąś interesującą uwagę do przekazania ).

Chciałbym zaznaczyć, że nie jestem przeciw optymalizacji kodu nawet jeżeli tyczy się to około 0,296%. Sam z reguły to robię, jednak nie oznacza to, że te różnice są zauważalne i, że początkujący musi o nich myśleć. Myślę, że optymalizacji należy szukać gdzie indzie niż w konstrukcji pętli for, bo moim zdaniem 3ms na miliard obrotów to żadna oszczędność, a na pewno w większym kodzie da się poprawić mnóstwo innych rzeczy.


Całkowicie nie o to mi chodzi. Moim zdaniem początkujący nie musi wiedzieć wszystkiego na raz. Z biegiem czasu dowie się o nowych metodach, algorytmach i jego kod będzie coraz lepszy. Tylko na początku trzeba zachęcić go do nauki, a podając mnóstwo informacji "na raz" moim zdaniem go zniechęcamy. Jak złapie bakcyla to wtedy należy mu mówić o wszystkim

Pozdrawiam.

PS. Z tym źródłem to było na serio. Jak możesz przytocz jakieś rzetelne informacje na ten temat. Zawsze lubię się dowiedzieć czegoś nowego. Jeśli to prawda to dzięki za poprawę.

PS2. Oczywiście wyniku testów czasowych są sprawdzane na moim kompie i u każdego mogą być różne. Wpływa na to wszystko Ale proporcje powinny być podobne.

Nie podam Ci linku z dokumentacji, ponieważ JS jej nie posiada. Implementacje w przeglądarkach opierają się na standardzie ECMA, który nie zawsze jest przestrzegany, żeby nie napisać, olewany...
Tego typu smaczki, sam wyłapiesz podczas pisania bardziej złożonych skryptów. Motyw z var w pętli zauważyłem podczas pisania własnego FW (krótko po tym jak upadł mintajax, ktoś go jeszcze pamięta?), nie pasował mi czas wykonania i ewentualne zacinki podczas bardziej złożonych animacji na drzewie DOM, kombinowałem z różnymi konfiguracjami, pousuwanie var ze wszystkich pętli przyniosło oczekiwany efekt, wniosek z tego był dla mnie jasny, że var obojętnie gdzie jest, zawsze deklaruje zmienną, a że jest w pętli, deklaruje ją dla każdego obrotu (to nawet logiczne, bo tak też działa warunek i instrukcja krokowa).

W swoim teście zapomniałeś o jednej istotnej rzeczy. Zdeklarowałeś zmienną j, ale nie przypisałeś jej wartości, a to właśnie o to się rozchodzi... popatrz:
http://jsfiddle.net/3hMhm/



Myślę że wynik wyczerpuje temat.


Tym się nie przejmuj, wiele ludzi myśli że jak na ich maszynie kod działa wolniej/szybciej to już test autora można włożyć między bajki... a tu przecież o sumę i porównanie chodzi.

A jak już w ogóle potrzebujesz super wydajności, to dzisiaj wkłada się kod w tzw. workera, gdzie cały kod w nim jest uruchamiany jako osobny proces przeglądarki, ale to już temat na inny wątek.

Nie zgodzę się! Masz błąd logiczny. Bardzo mnie zdziwiło, że zmienna globalna jest najszybsza. Patrzę w kod, myślę i nie mogę się nadziwić. Aż w końcu zauważyłem, że jak dasz samo var j = 0; to pętla się nie wykonuje w kolejnych cyklach, bo nie zerujesz zmiennej j wraz z jej przebiegiem.

Tak więc nadal test4 jest najwolniejszy. Różnicę pomiędzy innymi rozwiązaniami są zbliżone i u mnie różnią się o około 3ms. Zmieniając test1 na:


Nic się nie zmienia.

Zatem czy nadal uważasz, że 3ms sekundy na miliard! obrotów jest warta zachodu?

U Ciebie z tego co widzę najszybszy jest test3, więc to czym najbardziej walczysz.


Pamiętam! Jeszcze wtedy nie wiedziałem co to jest AJAX i mi ludzie pokazali na tej bibliotece

Powyższe testy trochę przeczą temu co napisałeś. Bo na pewno nie inicjujesz zmiennych miliard razy, a jak widać różnica to kwestie ms, czyli niezauważalne dla człowieka. Możliwe, że miałeś rację, ale przeglądarki zniwelowały różnicę w deklaracjach zmiennych i dlatego dzisiaj już nie ma to znaczenia. Poza tym przy operacji na DOM trzeba szukać optymalizacji właśnie tam, bo nie od dziś wiadomo, że najdłużej zajmuje przerysowywanie elementów w przeglądarce.


MDC


Tyle o JS wiem. Trochę siedzę już w tym języku. Wydawało mi się, że pętla for nie jest niczym niezwykłym, a my tu już rozmawiamy o niej 3 dzień! Ale to dobrze. Warto wymieniać się uwagami. Tylko nadal nie jestem przekonany do Twoich racji. I testy nie dowodzą, że masz rację, chyba że nadal robię coś źle, tylko napisz co.

No o to mi właśnie chodziło. Nie znam Cię na tyle, więc wolałem napisać, ze chodzi o zależności a nie konkretne wyniki.

Pozdrawiam i czekam na wyjaśnienia.

PS. Z chęcią zobaczyłbym ten FW

Sprawdziłeś? Bo moje console.log(j); twierdzi inaczej (a konkretnie, zmienna się zeruje, jeżeli zrobisz var j = 0;).

Nie musiałem spr. to widać. Mówimy o funkcji:


Przy pierwszym wywołaniu funkcji test4 jest wszystko ok, bo j = 0;, ale przy drugim wywołaniu funkcji j się nie zeruje, więc j = 1001, więc pętla for się nie wykonuje i tak pozostałe 9998 razy. Stąd czas poniżej 1000ms.

Instrukcja j=0; wykonuje się w programie tylko raz, a konkretniej jeszcze przed mierzeniem wszelkich czasów. Jeszcze inaczej:

nie jestem programistą a takich herezji nigdy bym nie pisał, przecież wystarczy prosty test którego wynik i tak wszyscy będą znali ^^, a Twój test z linku jsField to już napisali dlaczego jest nie poprawny

[JAVASCRIPT] pobierz, plaintext 
function Test(){console.log(this.i);}
Test.prototype.i = 0;
for(var obj = new Test; obj.i<100;++obj.i){
}
[JAVASCRIPT] pobierz, plaintext 

jakoś obiekt jest deklarowany tylko raz ;]