Tytuł oryginału: Sams Teach Yourself JavaScript in 24 ...pdf.helion.pl/skjs24/skjs24.pdf · Tytuł oryginału: Sams Teach Yourself JavaScript in 24 Hours, Sixth Edition Tłumaczenie:

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ść

http://helion.pl/rt/skjs24

http://helion.pl/rf/skjs24

http://helion.pl/ro/skjs24

http://helion.pl

http://ebookpoint.pl/r/4CAKF

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




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




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




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




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




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




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




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.




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>




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 .





Czasami w obr bie elementów script napotkasz znaczniki  no-tacji komentarzy w stylu j zyka HTML, w których umieszczane s instrukcjej zyka JavaScript. Oto przyk ad:

<script> </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




Zmienne 41

J zyk JavaScript umo liwia równie u ycie jako komentarzy jednowier-szowych sk adni komentarzy j zyka HTML:



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;





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




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;





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;




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





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.




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... "





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





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





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.





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.





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)




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








http://program-partnerski.helion.pl

Documents

Tytuł oryginału: Sams Teach Yourself JavaScript in 24 ...pdf.helion.pl/skjs24/skjs24.pdf · Tytuł oryginału: Sams Teach Yourself JavaScript in 24 Hours, Sixth Edition Tłumaczenie: