Ucze się HTML5, potrzebuje rad


(c7s) #1

Witam.

Zakupiłem książkę do nauki HTML5, myślałem, że będzie od podstaw, jednak nie jest.

Teraz przepisując kod z książki wyskakują mi błędy. Nie wiem czy to błąd w druku, ale mimowszystko blokuje to mój dalszy postęp w nauce.

Chciałbym o analizowanie przedstawionych przezemnie listingów w celu wyeliminowania błędów.

Uncaught SyntaxError: Unexpected string dom.js:5

jawel.dom = (function() {

    var $ = Sizzle;


    function hasClass(el, clsName){

        var regex = new RegExp("(^|\\s)"" + clsName + " (\\s|$)");

        return regex.test(el.className);

    }


    function addcClass(el, clsName){

        if(!hasClass(el, clsName)) {

            el.className += " " + clsName;

        }

    }


    function removeClass(el, clsName){

        var regex = new RegExp("(^|\\s) " + clsName + " (\\|$)");

        el.className.replace(regex, " ");

    }


    return{

        $:$,

        hasClass : hasClass,

        addClass : addClass,

        removeClass : removeClass

    };

})();

Uncaught SyntaxError: Unexpected token ) game.js:20

jawel.game = (function(){

    var dom = jawel.dom,

        $ = dom.$;


    //chowa aktywny ekran i wyswietla ekran

    //o podanym atrybucie id


    function showScreen(screenId) {

        var activeScreen = $("#game .screen.active")[0],

            screen = $("#" + screenId)[0];

        if(activeScreen){

            dom.removeClass(screen, "active");

        }

        dom.addClass(screen, "active");

        //Odslania publiczne metody


        return{

            showScreen : showScreen

        };

    })();

Proszę o wskazanie tych dwóch błędów. @edit Jeszcze się zastanawiam co t jest: (^|\s) (\|$) Może mi ktoś wytłumaczyć prostym językiem? @edit2 W pierwszym przykładzie sobie poradziłem, w książce jest błąd. Jednak nadal nie wiem co z drugim przykładem i co oznaczają te ciągni znaków: (^|\s) (\|$). @edit3 Teraz w przykładzie pierwszym mam taki błąd: Uncaught ReferenceError: addClass is not defined dom.js:23

jawel.dom = (function() {

    var $ = Sizzle;


    function hasClass(el, clsName){

        var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");

        return regex.test(el.className);

    }


    function addcClass(el, clsName){

        if(!hasClass(el, clsName)) {

            el.className += " " + clsName;

        }

    }


    function removeClass(el, clsName){

        var regex = new RegExp("(^|\\s) " + clsName + " (\\|$)");

        el.className.replace(regex, " ");

    }


    return{

        $:$,

        hasClass : hasClass,

        addClass : addClass,

        removeClass : removeClass

    };

})();

To jakaś masakra... @edit~ Heh, dobre sobie nawet przykłady pobrane z internetu od tej książki mają błędy... Uncaught ReferenceError: jewel is not defined dom.js:1

jewel.dom = (function () {

    var $ = Sizzle;


    function hasClass(el, clsName) {

        var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");

        return regex.test(el.className);

    }


    function addClass(el, clsName) {

        if (!hasClass(el, clsName)) {

            el.className += " " + clsName;

        }

    }


    function removeClass(el, clsName) {

        var regex = new RegExp("(^|\\s)" + clsName + "(\\s|$)");

        el.className = el.className.replace(regex, " ");

    }


    return {

        $: $,

        hasClass: hasClass,

        addClass: addClass,

        removeClass: removeClass

    };

})();

Uncaught ReferenceError: jewel is not defined game.js:1

jewel.game = (function () {

    var dom = jewel.dom,

        $ = dom.$;


    /* Ukrywa aktywny ekran (jeśli taki został wybrany) i wyświetla ekran 

     * o określonym identyfikatorze. */

    function showScreen(screenId) {

        var activeScreen = $("#game .screen.active")[0],

            screen = $("#" + screenId)[0];

        if (activeScreen) {

            dom.removeClass(activeScreen, "active");

        }

        dom.addClass(screen, "active");

    }


    // Odsłania metody publiczne. 

    return {

        showScreen: showScreen

    };

})();

Niech mi ktoś pomoże, czy są to błędy przez które dalsze pisanie tej aplikacji nie ma sensu(kierując się przykładami z książki)?


(Pablo_Wawa) #2

Wiem, że zarówno samo tłumaczenie książek zawiera błędy, jak i same przykłady. Ja z reguły kupuję książki Helionu (niedużo) i czytając je wyłapuję często takie błędy. To jest masakra, że nikt tego nie poprawia przed - to pewnie efekt oszczędności i chęci szybkiego wydania pozycji.

Ponieważ HTML5 do nie jest łatwa sprawa, sugeruję najpierw zapoznanie się z podstawami HTML (4), CSS (1 i 2) oraz języka JavaScript, a dopiero potem przerabianie takich przykładów. W internecie jest wiele kursów (darmowych i na poziomie) - poszukaj sobie.

A co do błędów, to w pierwszym (Uncaught SyntaxError: Unexpected string dom.js:5) widać że są tam dwa cudzysłowy obok siebie ("") - wywal jeden.

A w drugim brakuje nawiasu klamrowego (}) zamykającego definicję funkcji showScreen - wstaw go przed ostatnią linią

})();

(j24) #3

Trudno jest coś radzić gdy się nie wie jaki masz zasób wiedzy na starcie z tego tematu. Czy masz ogólne rozeznanie z tworzenia stron tzn. co wiesz poprostu z html na poziomie podstawowym. Uczę się też tego tematu i mam kilka książek. Błędy w książkach to można stwierdzić reguła. Skorzystanie z przykładu książkowego wtedy zadziała gdy się zrozumie istotę sprawy. Przepisywaniem książkowych gotowców dużo się nie nauczysz. Książka ma nauczyć pewnych zasad panujących w danym temacie ale małpowanie szczegółów raczej nie wyjdzie na dobre. Nie znając Twojej wiedzy ogólnej na temat pisania stron mogę tylko podać przykład: Uczeń kl 6 szkoły podstawowej kupił sobie książkę akademicką "Teoria miary i całki" i nie bardzo może zrozumieć co tam pisze.


(Pablo_Wawa) #4

Powyższe przykłady (z książki) dotyczą się głównie języka JavaScript. Jest on podstawą tworzenia dynamicznych i interakcyjnych stron www, sugeruję zatem podszkolić się najpierw z podstaw tego języka (vide: darmowe kursy w internecie) - wiadomości nigdy dość, kiedy się planuje intensywnie (i profesjonalnie) zajmować tworzeniem stron www.


(c7s) #5

Spróbuje trochę sprecyzować moją poprzednią wypowiedź.

Książkę którą kupiłem to: http://helion.pl/ksiazki/html5-tworzeni ... htm5tg.htm

Myślałem, że będą to podstawy, jednak są tam trudniejsze zagadnienia. Moja wiedza ogranicza się do HTML 4 i CSS 2, JavaScript słabiutko i to zapewne jest powód mojego kłopotu. Otwierając tą ksiażkę na samym początku autor zaczyna zabawę z bibliotekami. Modernizr.js, sizzle.js i z Obiektowym modelem dokumentu, o którym nie mam zielonego pojęcia. Rozumiem, że błędy się zdarzają, ale po to są przykłady na serwerach FTP, a tamte również zawierają takowe, to w sumie trochę dziwna sprawa.

Prosiłbym Was o małą radę dot. czego się nauczyć, żeby książka nie leżała i marnowała się? Jakiś tytuł możecie polecić? Na pewno muszę się wziąć za JavaScript i DOM, jednak moja wiedza o tym jest na bardzo niskim poziomie. Który tytuł pomógłby mi opanować HTML5?

Wolałbym raczej, żeby to była książka, aniżeli kurs online, chociaż, jeżeli mi polecicie i taki to zajrzę.

Kiedyś tylko się bawiłem w pisanie prostych stron, teraz chcę się zająć tym na poważnie, zapisałem się nawet na kurs. W moim otoczeniu też nie ma nikogo kto by się interesował programowaniem, pisaniem stron jest to trochę frustrujące, bo nie mam nawet z kim podyskutować na te tematy.

@edit

Mam w domu jeszcze:

http://helion.pl/ksiazki/javascript-cwi ... cwjas2.htm

ale o DOM nie ma tam ani słowa. O definiowaniu klas też nic nie ma.


(Pablo_Wawa) #6

Niestety nie polecę żadnej książki do JavaScriptu, bo takiej nie mam i nie trafiłem na żadną, która by mnie zaciekawiła. Poza tym każdy szuka w takiej książce czegoś innego.

Jeśli słabo się znasz na JS, to możesz wstępnie zajrzeć na http://www.w3schools.com/js/ (no chyba że nie znasz angielskiego) oraz na http://kurs.browsehappy.pl/JavaScript/JavaScript (po polsku).

P.S. Ja "przygodę" z JavaScript zacząłem z 7 lat temu, kiedy do pewnej aplikacji w PHP zacząłem dodawać pewne udogodnienia po stronie użytkownika. Z czasem, kiedy aplikacja była rozwijana, tego kodu w JS robiło się coraz więcej. Ponieważ przeglądarką na której miało to działać, był I 6.0, to nie za bardzo przejmowałem się wtedy standardami, ważne by działało w IE. Później, w kolejnych aplikacjach, zdawałem sobie sprawę, że jednak dużo zależy od JS - jeśli aplikacja ma byś interaktywna i wygodna w użyciu. Z czasem, jak poznałem dobrze JS, zacząłem w nim pisać całe programy (aplikacje internetowe) - można powiedzieć, że w małym dokumencie HTML był osadzony kod w JS, który wszystko wyświetlał i obsługiwał (przykład: http://programistrz.pl/projekty/webcell/demo/, opis tutaj: http://programistrz.pl/projekty/webcell/). Oczywiście nie było łatwo tak tworzyć oprogramowanie, ale z czasem nabrałem wprawy i wolę tak to pisać, bo wiele rzeczy można zrobić prościej.

W Twoim przypadku tez musisz sobie zdawać sprawę, że jeśli chcesz pisać gry, to będą one w 90% kodowane w JS, a resztę stanowić będzie dodatkowy kod HTML i CSS.


(c7s) #7

Wow, ten Excel robi wrażenie, tylko pozazdrościć umiejętności.

Dziękuje za cenne wskazówki i linki do kursu. Będę korzystał z anglojęzycznego, a jak coś będzie dla mnie nie zrozumiałe zajrzę do polskiej wersji.

Wychodzi na to, że 'cały' HTML5 opiera się na języku skryptowym. Posiadając już znajomość HTML w wersji 4 i CSS 2, sama składnia najnowszej wersji tego języka znaczników nie sprawia mi trudności, najgorzej właśnie z JS. Biorę się za naukę. :slight_smile:


(Pablo_Wawa) #8

Dzięki za miłe słowa. Strona www zrobiona w HTML5 czy też w HTML4 to zbiór elementów, które widać (ale też czasami których specjalnie nie widać) na stronie + mechanizmy modyfikacji tych elementów (bez tego strona byłaby statyczna). Do tego służy właśnie JavaScript i operuje on na DOM, dlatego znajomość (budowa) DOM jak i JS jest bardzo ważna w tworzeniu interaktywnych stron (np. gier). Do JS stworzono dużo bibliotek, wspomagających operowanie na DOM, m.in. jQuery, Prototype, MooTools, itd. Ale sugeruję najpierw poznać podstawy operowania na DOM w "czystym" JS, a dopiero potem zajęcie się nauką jakiegoś frameworka - dlaczego - bo czasami trzeba coś "dopisać" samemu i wtedy warto wiedzieć, co i gdzie się znajduje i jak to zrobić.

A co do kursów, to pewnie są też inne - przejrzyj te, jeśli coś Ci to da, to dobrze, jeśli nie, to szukaj innych. Czasami (często) odpowiedź na pytanie "jak to zrobić" znajdziesz w internecie (google). :slight_smile:


(c7s) #9

Znalazłem bardzo przyjemny kurs JS w języku polskim, tylko czy jest on 'na czasie'?:

Sporo podstaw już załapałem, patrząc teraz na kod wydaje mi się on bardziej przejrzysty, oczywiście mówię o prostych skryptach.

Chciałbym trochę naprostować swoją poprzednią wypowiedź o błędach w listingach. Teraz widzę, że takie drobne błędy, można łatwo wyłapać dzięki konsoli i w sumie pomaga to w nauce, bo nieraz trzeba ruszyć głową, poszukać odpowiedzi w google.

@edit

Dopiero teraz zauważyłem footer na głównej:


(Pablo_Wawa) #10

Kurs całkiem w porządku, jeśli przerobisz go całego, to będziesz już sporo potrafił.

Wprawdzie zawiera drobne błędy (literówki) oraz jest według mnie nieco chaotycznie przygotowany (np. opis wykorzystywanych funkcji jest na końcu przykładu), ale ma duża wartość merytoryczną.

Generalnie kurs JS będzie na czasie, jeśli nie będzie miał naleciałości niekompatybilnych przeglądarek ery Netscape i IE 5 (bo jest jeszcze wiele książek/kursów, gdzie się opisuje/używa obiektów document.all czy document.layer zamiast np. document.getElementById) i będzie coś o HTML5 (np. canvas).


(B.Andy) #11

Co do książki o JS: http://helion.pl/ksiazki/head-first-jav ... ,hfjsc.htm co prawda tej pozycji nie mam w swojej biblioteczce, ale mam cztery inne książki tej serii (rusz głową; Java, c#, jQuery, wzorce projektowe) i bardzo je sobie chwalę. Przed kupnem koniecznie trzeba przeczytać jakiś rozdział, gdyż autorzy mają specyficzny sposób pisania (który mnie np. bardzo odpowiada).


(Pablo_Wawa) #12

Wydawnictwo/seria jest w porządku, książka (jest i e-book) jest na wysokim poziomie (merytorycznym) i uczy od podstaw, więc chyba dla autora wątku w sam raz. Ale oczywiście warto pobrać przykładowy rozdział i się zapoznać z formą przedstawiania materiału. :slight_smile:


(c7s) #13

Dziękuję za poświęcany mi czas, a w szczególności Pablo_Wawa. :slight_smile:

Jeszcze takie pytanie mam związanie z bazami danych, czy JS oferuje jakąkolwiek możliwość podłączenia i operacji na bazach, np. Mysql?

Domyślam się, że nie, ale jednak wolę zapytać, czy nie ma jakiegoś rozwiązania, bibliotek.

Czy jedyna możliwość zrobienia tego to napisanie w języku typu, PHP?


(B.Andy) #14

Krótka odpowiedź: nie. Jedynym wyjściem jest połączenie javascriptu z php (tudzież innym językiem działającym po stronie serwera)


(Grzelix) #15

Jeśli rozmawiamy w kontekście HTML5 to nie do końca ta odpowiedź jest jednoznaczna. Ponieważ razem z html5 została zaprezentowana technologia Web SQL Database API. Pozwala ona na manipulowanie danymi przy użyciu języka SQL po stronie klienta. Tutaj więcej info:

http://www.tutorialspoint.com/html5/html5_web_sql.htm

Oczywiście nie jest baza danych typu MySQL ale warto wiedzieć o takiej opcji.


(c7s) #16

O, to jest bardzo interesujące. Czy takie rozwiązanie odbiega funkcjonalnością od standardowych baz danych?


(Pablo_Wawa) #17

Trzeba zdawać sobie sprawę z pewnych rzeczy. Język JavaScript działa po stronie klienta - w przeglądarce internetowej, a język PHP po stronie serwera www. Co to powoduje:

  • użytkownik nie widzi kodu PHP a jedynie efekt działania parsera - wygenerowany kod HTML (a w nim również JS);

  • w PHP łatwo można zapisywać i odczytywać dane wielu użytkowników (np. korzystając z bazy danych) - dostęp do tych danych użytkownik ma tylko przez interfejs stron www;

JavaScript może przechowywać dane w przeglądarce użytkownika poprzez ciasteczka (duże ograniczenie) albo (w HTML5) poprzez różne mechanizmy (Web Storage http://www.w3schools.com/html/html5_webstorage.asp lub wspomniany Web SQL Database). Wadą tego jest to, że te dane są u użytkownika, nie są współdzielone przez inne osoby i nie można na nich w 100% polegać - mogą zostać usunięte (skasowane) lub mogą nie być dostępne - np. jak użytkownik skorzysta z innej przeglądarki. Poza tym pewnie mają ograniczenie na pojemność danych. Fajna sprawa na czasowe przechowywanie danych użytkownika, które są ważne (potrzebne) głównie dla niego.


(Brightophidia) #18

Kursy podstawowej znajomości Javascript i HTML znajdziesz tu: http://www.codecademy.com/. Kursy są ciekawie prezentowane bo jednocześnie czytasz i wykonujesz polecenia, można też zdobywać 'odnzaczenia' aby pochwalić się przed znajomymi :slight_smile: . Wymagana znajomość j. ang.


(Pablo_Wawa) #19

Co do bazy danych w JavaScript, to powstaje zasadnicze pytanie, czy to ma sens w danym zastosowaniu - bo Ty nie masz bezpośredniego dostępu do tych danych (są one u użytkownika) i nic z nimi nie jesteś w stanie zrobić (poza momentem, w którym użytkownik pojawi się na Twoim serwisie).