Tytuł oryginału: Sams Teach Yourself JavaScript in 24 Hours, Sixth Edition
Tłumaczenie: Piotr PilchProjekt okładki: Studio Gravite / OlsztynObarek, Pokoński, Pazdrijowski, Zaprucki ISBN: 978-83-283-1926-4
Authorized translation from the English language edition, entitled: JAVASCRIPT IN 24 HOURS, SAMS TEACH YOURSELF, Sixth Edition; ISBN 067233738X; by Phil Ballard; published by Pearson Education, Inc, publishing as SAMS Publishing.
Copyright © 2015 by Pearson Education, Inc.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education Inc.
Polish language edition published by HELION S.A. Copyright © 2016.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie,ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/skjs24.zip
Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/skjs24Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę• Poleć książkę • Oceń książkę
• Księgarnia internetowa• Lubię to! » Nasza społeczność
Spis tre ci
O autorze .................................................................................. 11
Wprowadzenie .......................................................................... 13
CZ I PIERWSZE KROKI Z J ZYKIEM JAVASCRIPT ....................... 19
Rozdzia 1. Wprowadzenie do j zyka JavaScript .......................................... 21
Rozdzia 2. Tworzenie prostych skryptów ................................................... 37
Poleć książkęKup książkę
4 Spis tre ci
Rozdzia 3. U ycie funkcji ............................................................................ 55
Rozdzia 4. Obiekty modelu DOM i obiekty wbudowane ............................ 67
CZ II POZNAWANIE ELEMENTÓW KODU .................................... 87
Rozdzia 5. Liczby i a cuchy ....................................................................... 89
Rozdzia 6. Tablice .................................................................................... 101
Poleć książkęKup książkę
Spis tre ci 5
Rozdzia 7. Sterowanie programem .......................................................... 109
CZ III OBIEKTY ........................................................................... 125
Rozdzia 8. Programowanie obiektowe ........................................................ 127
Rozdzia 9. Tworzenie skryptów z wykorzystaniem modelu DOM ............. 147
Poleć książkęKup książkę
6 Spis tre ci
Rozdzia 10. Format JSON ........................................................................... 175
CZ IV HTML I CSS ....................................................................... 191
Rozdzia 11. J zyki JavaScript i HTML5 ........................................................ 193
Rozdzia 12. J zyk JavaScript i arkusze stylów CSS ...................................... 211
Rozdzia 13. Wprowadzenie do arkuszy stylów CSS3 .................................. 229
Poleć książkęKup książkę
Spis tre ci 7
CZ V U YCIE BIBLIOTEK J ZYKA JAVASCRIPT .......................... 247
Rozdzia 14. U ycie bibliotek ....................................................................... 249
Rozdzia 15. Biblioteka jQuery z bliska ........................................................ 259
Poleć książkęKup książkę
8 Spis tre ci
Rozdzia 16. Biblioteka interfejsu u ytkownika jQuery UI ............................ 275
Rozdzia 17. Ajax i biblioteka jQuery ........................................................... 291
CZ VI ZAAWANSOWANE ZAGADNIENIA .................................... 305
Rozdzia 18. Odczytywanie i zapisywanie informacji cookie ........................ 307
Rozdzia 19. Wkrótce w j zyku JavaScript ................................................... 323
Poleć książkęKup książkę
Spis tre ci 9
Rozdzia 20. U ycie rodowisk .................................................................... 333
Rozdzia 21. U ycie j zyka JavaScript poza stron internetow ................... 349
CZ VII ZDOBYWANIE FACHU ....................................................... 363
Rozdzia 22. Sprawdzone praktyki tworzenia kodu ..................................... 365
Poleć książkęKup książkę
10 Spis tre ci
Rozdzia 23. Debugowanie kodu ................................................................ 383
Rozdzia 24. Testowanie jednostkowe kodu JavaScript ............................... 401
DODATKI .......................................................................... 411
Dodatek A Narz dzia do projektowania aplikacji JavaScript ..................... 413
Dodatek B Krótki przegl d elementów j zyka JavaScript .......................... 417
Skorowidz ............................................................................... 425
Poleć książkęKup książkę
Rozdzia 2Tworzenieprostych skryptów
W tym rozdziale poznasz nast puj ce zagadnienia: Ró ne metody do czania kodu JavaScript do stron
internetowych. Podstawowa sk adnia instrukcji j zyka JavaScript. Deklarowanie i u ywanie zmiennych. U ycie operatorów matematycznych. Wstawianie komentarzy do kodu. Przechwytywanie zdarze myszy.
W rozdziale 1., „Wprowadzenie do j zyka JavaScript”, wspomniano, eJavaScript to j zyk skryptowy zapewniaj cy stronom internetowym wi kszinteraktywno .
W tym rozdziale dowiesz si wi cej o tym, jak kod JavaScript mo e by do-dawany do strony internetowej. W dalszej cz ci poznasz wybrane funda-mentalne elementy sk adni kodu programów JavaScript, takie jak instrukcje,zmienne, operatory i komentarze. Ponadto wypróbujesz kolejne przyk adykodu.
Poleć książkęKup książkę
38 Rozdzia 2. Tworzenie prostych skryptów
Do czanie kodu JavaScriptdo strony internetowej
<script></script>
<script> ... w tym miejscu s umieszczane instrukcje j zyka Javascript ...</script>
<script>src
<script src='moj_kod.js'></script>
moj_kod.js
<script src='/ cie ka/do/pliku/moj_kod.js'></script>
<script src='http://www.przyklad.com/ cie ka/do/pliku/moj_kod.js'></script>
Poleć książkęKup książkę
Do czanie kodu JavaScript do strony internetowej 39
Przyj te jest, e tak jak w tym przyk adzie, plikom z kodem JavaScriptnadawane jest rozszerzenie .js. Do czane pliki z kodem mog jednak miedowolne rozszerzenie, a przegl darka b dzie próbowa interpretowa ichzawarto jako kod JavaScript.
Instrukcje j zyka JavaScript w pliku zewn trznym NIE musz by zawartew znacznikach <script> ... </script>. Nie mo esz te w pliku zewn trznymumieszcza adnych znaczników HTML, a jedynie sam kod JavaScript.
<body>
funkcji
Listing 2.1. Dokument HTML z do czonym plikiem JavaScript
<!DOCTYPE html> <html> <head> <title>Prosta strona</title> </head> <body> <p>Tre ...</p> <script src='moj_kod.js'></script> </body> </html>
Nie jeste ograniczony do korzystania tylko z jednego elementu script.W razie potrzeby na stronie mo esz umie ci dowoln ich liczb .
Poleć książkęKup książkę
40 Rozdzia 2. Tworzenie prostych skryptów
Czasami w obr bie elementów script napotkasz znaczniki <!-- i --> no-tacji komentarzy w stylu j zyka HTML, w których umieszczane s instrukcjej zyka JavaScript. Oto przyk ad:
<script> <!-- ... w tym miejscu s umieszczane instrukcje j zyka JavaScript ... --></script>
Tak technik stosowano z my l o starszych przegl darkach, które nierozpoznawa y znacznika <script>. Tego rodzaju sk adnia „komentarza”zapobiega a wy wietlaniu przez te przegl darki kodu ród owego JavaScriptna ekranie wraz z tre ci strony. Je li nie masz potrzeby wspierania bardzostarych przegl darek, technika ta nie jest ju wymagana.
Instrukcje j zyka JavaScriptinstrukcjami
to jest instrukcja 1to jest instrukcja 2
to jest instrukcja 1; to jest instrukcja 2;
to jest instrukcja 1;to jest instrukcja 2;
Wstawianie komentarzy do kodu
komentarzy
// To jest komentarz
Poleć książkęKup książkę
Zmienne 41
J zyk JavaScript umo liwia równie u ycie jako komentarzy jednowier-szowych sk adni komentarzy j zyka HTML:
<!-- to jest komentarz -->
Nie jest to jednak powszechnie stosowane w programach JavaScript.
// To jest komentarz// obejmuj cy wiele wierszy
/**/
/* Ten komentarz mo e obejmowa wiele wierszy bez konieczno ci oznaczania ka dego wiersza */
Prawd jest, e komentarze nieznacznie zwi kszaj wielko pliku z kodemród owym JavaScript, a ponadto, e mo e to mie niekorzystny wp yw
na czasy adowania stron. Generalnie jednak ró nica w czasie jest tak zniko-ma, e b dzie ledwie zauwa alna. Je li jednak naprawd ma to znaczenie,zawsze mo esz usun wszystkie komentarze z wersji „produkcyjnej” plikuJavaScript, czyli wersji, która zostanie u yta w przypadku produkcyjnychwitryn internetowych, a nie ich wersji rozwojowych.
Zmienne
$
netPrice
netPrice = 8.99;
Poleć książkęKup książkę
42 Rozdzia 2. Tworzenie prostych skryptów
W j zyku JavaScript rozró niana jest wielko znaków. Zmienna o nazwiemypetcat to inna zmienna ni zmienna Mypetcat lub MYPETCAT.
Wielu programistów u ywaj cych j zyka JavaScript oraz innych j zykówprogramowania w przypadku nazw zmiennych lubi korzysta z tzw. kon-wencji CamelCase (inne okre lenia to mixedCase, BumpyCaps itp.). W tejkonwencji z o one s owa lub frazy zawieraj elementy czone bez spa-cji. Pierwsza litera ka dego elementu jest du liter , z wyj tkiem pierw-szej litery ca ego a cucha, która mo e by du a lub ma a. W przytoczonymprzyk adzie zmienna b dzie mie nazw MyPetCat lub myPetCat.
przypisywania warto ci
var
var netPrice;netPrice = 8.99;
var netPrice = 8.99;
var productName = "Portfel skórzany";
window.alert
alert(productName);
RYSUNEK 2.1.Wy wietlaniewarto ci zmiennejproductName
Poleć książkęKup książkę
Operatory 43
Wybierz czytelne nazwy zmiennych. U ycie nazw, takich jak productName(nazwaProduktu) i netPrice (cenaNetto), znacznie zwi ksza czytelnokodu i mo liwo ci zarz dzania nim ni w sytuacji, gdyby te same zmiennemia y nazwy var123 i myothervar49 (nawet pomimo tego, e te dwie nazwys ca kowicie poprawne).
Operatory
Operacje arytmetyczne
var theSum = 4 + 3;
theSum
var productCount = 2;var subtotal = 14.98;var shipping = 2.75;var total = subtotal + shipping;
-* /
subtotal = total – shipping;var salesTax = total * 0.15;var productPrice = subtotal / productCount;
dzielenia modulo%
var itemsPerBox = 12;var itemsToBeBoxed = 40;var itemsInLastBox = itemsToBeBoxed % itemsPerBox;
itemsInLastBox4
++--
productCount++;
productCount = productCount + 1;
Poleć książkęKup książkę
44 Rozdzia 2. Tworzenie prostych skryptów
items--;
items = items – 1;
Je li musisz dokona inkrementacji lub dekrementacji zmiennej o wartoinn ni jeden, j zyk JavaScript równie pozwala na czenie innych operato-rów arytmetycznych z operatorem = (np. += i -=).
Nast puj ce dwa wiersze kodu s równorz dne:
total = total + 5;total += 5;
co oznacza, e dotyczy to tak e nast puj cych dwóch wierszy:
counter = counter - step;counter -= step;
Notacji takiej mo esz u y dla innych operatorów arytmetycznych, takichjak operator mno enia i dzielenia:
price = price * uplift;price *= uplift;
Pierwsze stwo operatorów
regu y pierwsze stwa
var average = a + b + c / 3;
ca b
var average = (a + b + c) / 3;
Poleć książkęKup książkę
Operatory 45
Je eli masz do wiadczenie programistyczne zwi zane z innym j zykiem, ta-kim jak PHP lub Java, zapewne zauwa ysz, e regu y pierwsze stwa w j zykuJavaScript s prawie takie same jak u ywane w tych j zykach. Szczegó oweinformacje o regu ach pierwsze stwa j zyka JavaScript s dost pne pod ad-resem http://msdn.microsoft.com/en-us/library/z3ks45k7(v=vs.94).aspx.
U ycie operatora + z a cuchami
+
var firstname = "Jan";var surname = "Nowak";var fullname = firstname + " " + surname;// zmienna fullname zawiera teraz warto "Jan Nowak"
+
var name = "Dawid";var age = 45;alert(name + age);
+
RYSUNEK 2.2.Scalanie a cuchai warto ciliczbowej
Poleć książkęKup książkę
46 Rozdzia 2. Tworzenie prostych skryptów
Spróbuj sam!
Konwersja stopni Celsjusza na stopnie FahrenheitaAby dokona konwersji temperatury wyra onej w stopniach Celsjusza namierzon w stopniach Fahrenheita, musisz wykona operacj mno eniaprzez 9, dzielenia przez 5, a nast pnie do wyniku doda liczb 32. Wy-konajmy te dzia ania za pomoc kodu JavaScript:
var cTemp = 100; // temperatura w stopniach Celsjusza// mia o korzystajmy z nawiasów okr g ychvar hTemp = ((cTemp * 9) /5 ) + 32;
Okazuje si , e w powy szym obliczeniu mo liwe jest pomini cie wszyst-kich nawiasów okr g ych. Pomimo tego kod w dalszym ci gu dzia a byznakomicie:
var hTemp = cTemp*9/5 + 32;
Nawiasy okr g e u atwiaj jednak zrozumienie kodu i s pomocne przyzapobieganiu b dom zwi zanym z kwesti pierwsze stwa operatorów.
Przetestujmy na stronie internetowej kod z listingu 2.2.
Listing 2.2. Obliczanie stopni Fahrenheita na podstawie stopniCelsjusza
<!DOCTYPE html> <html> <head> <title>Konwersja do stopni Fahrenheita ze stopni Celsjusza</title> </head> <body> <script> var cTemp = 100; // temperatura w stopniach Celsjusza // mia o korzystajmy z nawiasów okr g ych var hTemp = ((cTemp * 9) /5 ) + 32; document.write("Temperatura w stopniach Celsjusza: " + cTemp + " stopni<br/>"); document.write("Temperatura w stopniach Fahrenheita: " + hTemp + " stopni"); </script> </body> </html>
Zapisz kod jako plik temperatura.html i za aduj go w przegl darce. Powinienzosta uzyskany wynik widoczny na rysunku 2.3.
Poleć książkęKup książkę
Przechwytywanie zdarze myszy 47
RYSUNEK 2.3. Dane wyj ciowe kodu z listingu 2.2
Zmodyfikuj plik kilkakrotnie w celu u ycia ró nych warto ci dla zmiennejcTemp i sprawd , czy wszystko dzia a poprawnie.
Przechwytywanie zdarze myszy
zdarze
procedur obs ugi zda-rze onClick onMouseOver onMouseOut
Procedura obs ugi zdarze onClickonClick
onclick=" ...kod JavaScript... "
Poleć książkęKup książkę
48 Rozdzia 2. Tworzenie prostych skryptów
Cho dodawanie procedur obs ugi zdarze bezpo rednio do elementówHTML jest jak najbardziej dozwolone, obecnie nie jest uwa ane za zalecanpraktyk programistyczn . Takie rozwi zanie dobrze sprawdza si w przy-k adach zamieszczonych w cz ci pierwszej ksi ki, natomiast w jej dalszychrozdzia ach poznasz bardziej eleganckie i oferuj ce wi ksze mo liwo cisposoby u ywania procedur obs ugi zdarze .
Listing 2.3. U ycie procedury obs ugi zdarze onClick
<!DOCTYPE html> <html> <head> <title>Demonstracja dzia ania procedury onClick</title> </head> <body> <input type="button" onclick="alert('Klikni to przycisk!') " value="Kliknij mnie" /> </body> </html>
<body>onclick
zdarzenie onclick
alert('Klikni to przycisk!')
RYSUNEK 2.4.U ycie proceduryobs ugi zdarzeonClick
Poleć książkęKup książkę
Przechwytywanie zdarze myszy 49
By mo e zauwa y e , e wywo ywana jest procedura obs ugi zdarzeonClick, ale podczas dodawania do elementu HTML jej nazwa jest jednakzapisywana ma ymi literami (onclick). Taka konwencja wynik a st d, ewprawdzie w j zyku HTML nie jest rozró niana wielko znaków, ale w j zy-ku XHTML takie rozró nienie jednak istnieje. J zyk XHTML wymaga, abynazwy wszystkich elementów i atrybutów HTML by y zapisywane ma ymiliterami.
Procedury obs ugi zdarze onMouseOveri onMouseOut
onMouseOver onMouseOut
onMouseOver
onMouseOut
onMouseOver
Listing 2.4. U ycie zdarzenia onMouseOver
<!DOCTYPE html> <html> <head> <title>Demonstracja u ycia zdarzenia onMouseOver</title> </head> <body> <img src="image1.png" alt="image 1" onmouseover= "alert('Aktywowano obraz!')" /> </body> </html>
onmouseover onmouseout
opu ci
Poleć książkęKup książkę
50 Rozdzia 2. Tworzenie prostych skryptów
RYSUNEK 2.5.U ycie proceduryobs ugi zdarzeonMouseOver
Spróbuj sam!
Tworzenie efektu zast powania obrazuZa pomoc zdarze onMouseOver i onMouseOut mo liwa jest zmiana sposo-bu pojawienia si obrazu, gdy zostanie na nim umieszczony kursor myszy.Aby to zrealizowa , zdarzenia onMouseOver u ywamy do zmiany atrybutusrc elementu HTML <img> w momencie pojawienia si kursora w jego ob-r bie. Z kolei zdarzenie onMouseOut umo liwia ponown zmian tegoatrybutu, gdy kursor myszy opu ci obszar elementu. Listing 2.5 prezentujekod.
Listing 2.5. Efekt zast powania obrazu za pomoc zdarze onMouseOveri onMouseOut
<!DOCTYPE html> <html> <head> <title>Demonstracja u ycia zdarzenia OnMouseOver</title> </head> <body> <img src="tick.gif" alt="tick" onmouseover="this.src= 'tick2.gif';" onmouseout="this.src='tick.gif';" /> </body> </html>
By mo e zauwa y e co nowego w zastosowanej tutaj sk adni. Wewn trzinstrukcji j zyka JavaScript powi zanych ze zdarzeniami onMouseOver i onMouseOut u yto s owa kluczowego this.
Poleć książkęKup książkę
Przechwytywanie zdarze myszy 51
Gdy s owo this zostanie u yte w obr bie procedury obs ugi zdarze do-danej za po rednictwem atrybutu elementu HTML, odwo uje si ono je-dynie do samego elementu. W tym przypadku s owo this mo e by in-terpretowane jako „ten obraz”. Kod this.src (przedstawion notacj zeznakiem kropki zastosowano ju wcze niej) odwo uje si do w a ciwo cisrc ( ród o) obiektu obrazu.
W przyk adzie u yto dwóch obrazów (pliki tick.gif i tick2.gif). Mo esz za-stosowa dowolne obrazy, którymi dysponujesz, ale do celów demon-stracyjnych najlepsze b d obrazy niezbyt du e i o takiej samej wielko ci.
Za pomoc edytora utwórz plik HTML zawieraj cy kod z listingu 2.5. Nazwyplików obrazów tick.gif i tick2.gif mo esz zmieni na nazwy w asnychdwóch plików obrazów, je li s one inne. Zadbaj jedynie o to, aby obrazy zo-sta y zapisane w tym samym folderze co plik HTML. Zapisz ten plik i otwórzgo w przegl darce.
Powinno by widoczne, e obraz zmienia si w momencie umieszczeniana nim kursora myszy, po czym zmienia si ponownie w chwili opusz-czenia przez kursor obszaru obrazu (rysunek 2.6).
RYSUNEK 2.6. Efekt zast powania obrazu za pomoc zdarze onMouseOver i onMouseOut
Dawniej efekt zast powania obrazu by osi gany zazwyczaj w ten w a-nie sposób. Obecnie jednak taki efekt mo e by uzyskiwany znacznie
szybciej za pomoc arkuszy CSS (Cascading Style Sheet). Niemniej jednaknadal jest to wygodny sposób demonstrowania u ycia procedur obs ugizdarze onMouseOver i onMouseOut.
Poleć książkęKup książkę
52 Rozdzia 2. Tworzenie prostych skryptów
Podsumowanie
Pytania i odpowiedziP. W niektórych listingach i fragmentach kodu w tym samym wierszuwyszczególniono znaczniki otwieraj ce i zamykaj ce <script>. Innym ra-zem znaczniki umieszczono w osobnych wierszach. Czy ma to znaczenie?
O.
bia ymi znakami
P. Czy mog u y tego samego elementu <script> zarówno do do czeniapliku zewn trznego JavaScript, jak i do przechowywania instrukcji j zykaJavaScript?
O. scriptsrc
<script> </script>
Warsztaty
Quiz 1. onClick
a) b)
c)
Poleć książkęKup książkę
wiczenia 53
2. <script>
a) b) c)
3. a) b) c)
Odpowiedzi 1. onClick
2. <script>
3.
wiczenia <img>
onMouseOver onMouseOutonClick title Mój nowy
tytuthis.title
Poleć książkęKup książkę
54 Rozdzia 2. Tworzenie prostych skryptów
Poleć książkęKup książkę