From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../how_does_the_internet_work/index.html | 100 +++ .../jak_dziala_internet/index.html | 100 --- .../cascade_and_inheritance/index.html | 97 +++ files/pl/learn/css/building_blocks/index.html | 71 +++ .../learn/css/building_blocks/selectors/index.html | 260 ++++++++ .../css/building_blocks/styling_tables/index.html | 597 ++++++++++++++++++ .../building_blocks/values_and_units/index.html | 209 +++++++ .../first_steps/how_css_is_structured/index.html | 154 +++++ .../learn/css/first_steps/how_css_works/index.html | 133 ++++ files/pl/learn/css/first_steps/index.html | 64 ++ files/pl/learn/css/howto/css_faq/index.html | 162 +++++ .../learn/css/styling_text/fundamentals/index.html | 116 ++++ .../css/styling_text/styling_lists/index.html | 269 ++++++++ .../how_the_web_works/index.html | 110 ++++ .../jak_dziala_siec/index.html | 110 ---- .../manipulating_documents/index.html | 127 ++++ .../first_steps/a_first_splash/index.html | 687 +++++++++++++++++++++ files/pl/learn/javascript/first_steps/index.html | 61 ++ .../learn/javascript/first_steps/math/index.html | 455 ++++++++++++++ .../javascript/first_steps/variables/index.html | 453 ++++++++++++++ .../first_steps/what_is_javascript/index.html | 342 ++++++++++ .../first_steps/what_went_wrong/index.html | 257 ++++++++ files/pl/learn/javascript/obiekty/index.html | 47 -- files/pl/learn/javascript/objects/index.html | 47 ++ .../pierwsze_kroki/a_first_splash/index.html | 687 --------------------- .../pierwsze_kroki/co_poszlo_nie_tak/index.html | 257 -------- .../pl/learn/javascript/pierwsze_kroki/index.html | 61 -- .../javascript/pierwsze_kroki/math/index.html | 455 -------------- .../pierwsze_kroki/what_is_javascript/index.html | 342 ---------- .../javascript/pierwsze_kroki/zmienne/index.html | 453 -------------- .../configuring_server_mime_types/index.html | 114 ++++ .../szkolenie_aplikacja_biblioteka/index.html | 89 --- .../tutorial_local_library_website/index.html | 89 +++ 33 files changed, 4974 insertions(+), 2601 deletions(-) create mode 100644 files/pl/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 files/pl/learn/common_questions/jak_dziala_internet/index.html create mode 100644 files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/pl/learn/css/building_blocks/index.html create mode 100644 files/pl/learn/css/building_blocks/selectors/index.html create mode 100644 files/pl/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/pl/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/pl/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/pl/learn/css/first_steps/how_css_works/index.html create mode 100644 files/pl/learn/css/first_steps/index.html create mode 100644 files/pl/learn/css/howto/css_faq/index.html create mode 100644 files/pl/learn/css/styling_text/fundamentals/index.html create mode 100644 files/pl/learn/css/styling_text/styling_lists/index.html create mode 100644 files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html delete mode 100644 files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html create mode 100644 files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/pl/learn/javascript/first_steps/a_first_splash/index.html create mode 100644 files/pl/learn/javascript/first_steps/index.html create mode 100644 files/pl/learn/javascript/first_steps/math/index.html create mode 100644 files/pl/learn/javascript/first_steps/variables/index.html create mode 100644 files/pl/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/pl/learn/javascript/first_steps/what_went_wrong/index.html delete mode 100644 files/pl/learn/javascript/obiekty/index.html create mode 100644 files/pl/learn/javascript/objects/index.html delete mode 100644 files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html delete mode 100644 files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html delete mode 100644 files/pl/learn/javascript/pierwsze_kroki/index.html delete mode 100644 files/pl/learn/javascript/pierwsze_kroki/math/index.html delete mode 100644 files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html delete mode 100644 files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html create mode 100644 files/pl/learn/server-side/configuring_server_mime_types/index.html delete mode 100644 files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html create mode 100644 files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html (limited to 'files/pl/learn') diff --git a/files/pl/learn/common_questions/how_does_the_internet_work/index.html b/files/pl/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..1ee3d15096 --- /dev/null +++ b/files/pl/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,100 @@ +--- +title: Jak działa Internet? +slug: Learn/Common_questions/Jak_dziala_Internet +tags: + - Beginner + - Tutorial + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
{{LearnSidebar}}
+ +
+

W tym artykule omówiono, czym jest Internet i jak działa.

+
+ + + + + + + + + + + + +
Wymagania:Żadnych, ale zachęcamy do przeczytania najpierw artykułu o wyznaczaniu celów projektu.
Cel:Poznasz podstawy technicznej infrastruktury sieciowej i różnicę między Internetem a siecią.
+ +

Streszczenie

+ +

Internet jest szkieletem sieci, infrastruktury technicznej, która umożliwia korzystanie z sieci. W swojej najbardziej podstawowej postaci, Internet jest dużą siecią komputerów, które komunikują się ze sobą nawzajem.

+ +

Historia Internetu jest nieco niejasna. Zaczęło się w latach 60. jako projekt badawczy finansowany przez USA, a następnie przekształciło się w infrastrukturę publiczną w latach 80. przy wsparciu wielu publicznych uniwersytetów i firm prywatnych. Różne technologie wspierające Internet ewoluowały z czasem, ale sposób jego funkcjonowania nie zmienił się tak bardzo: Internet to sposób na połączenie komputerów razem i zapewnienie, że cokolwiek się wydarzy, znajdą one sposób na pozostanie w kontakcie.

+ +

Aktywna Nauka

+ + + +

Głębsze zanurzenie

+ +

Prosta sieć

+ +

Kiedy dwa komputery muszą się komunikować, trzeba je połączyć albo fizycznie (zazwyczaj za pomocą kabla Ethernet), albo bezprzewodowo (na przykład przy pomocy Wi-Fi lub Bluetooth). Wszystkie nowoczesne komputery mogą utrzymywać dowolne z tych połączeń.

+ +
+

Uwaga: W dalszej części tego artykułu będziemy mówić tylko o kablach fizycznych, ale sieci bezprzewodowe działają tak samo.

+
+ +

Dwa komputery połączone razem

+ +

Taka sieć nie jest ograniczona do dwóch komputerów. Można podłączyć tyle komputerów, ile się chce. Ale to się szybko komplikuje. Jeśli próbujesz połączyć, powiedzmy dziesięć komputerów, potrzebujesz 45 kabli, z dziewięcioma wtyczkami na komputer!

+ +

Dziesięć komputerów, wszystkie razem

+ +

Aby rozwiązać ten problem, każdy komputer w sieci jest podłączony do specjalnego malutkiego komputera zwanego routerem. Ten router ma tylko jedno zadanie: podobnie jak sygnalizator na stacji krajowej, dba o to, aby wiadomość wysłana z danego komputera dotarła do właściwego komputera docelowego. Aby wysłać wiadomość do komputera B, komputer A musi wysłać wiadomość do routera, który z kolei przekazuje wiadomość do komputera B i upewnia się, że wiadomość nie zostanie dostarczona do komputera C.

+ +

Po dodaniu routera do systemu, nasza sieć składająca się z 10 komputerów wymaga tylko 10 kabli: jedna wtyczka na każdy komputer i router z 10 wtyczkami.

+ +

Dziesięć komputerów z routerem

+ +

Sieć sieci

+ +

Na razie w porządku. Ale co z podłączeniem setek, tysięcy, miliardów komputerów? Oczywiście pojedynczy router nie działa na tak dużą skalę, ale jeśli uważnie czytasz, powiedzieliśmy, że router jest komputerem jak każdy inny, więc co powstrzymuje nas przed połączeniem dwóch routerów? Nic, więc zróbmy to.

+ +

Dwa routery połączone razem

+ +

Podłączając komputery do routerów, a następnie routery do routerów, jesteśmy w stanie skalować w nieskończoność.

+ +

Routery połączone z routerami

+ +

Taka sieć jest bardzo zbliżona do tego, co nazywamy Internetem, ale czegoś nam brakuje. Zbudowaliśmy tę sieć dla naszych własnych celów. Są inne sieci: twoi przyjaciele, sąsiedzi, każdy może mieć swoją własną sieć komputerów. Ale tak naprawdę nie jest możliwe ułożenie kabli między domem a resztą świata, więc jak sobie z tym poradzić? Cóż, są już kable podłączone do twojego domu, na przykład zasilanie elektryczne i telefon. Infrastruktura telefoniczna już łączy Twój dom z kimkolwiek na świecie, więc jest to idealny przewód, którego potrzebujemy. Aby połączyć naszą sieć z infrastrukturą telefoniczną, potrzebujemy specjalnego urządzenia zwanego modemem. Modem ten zamienia informacje z naszej sieci w informacje zarządzane przez infrastrukturę telefoniczną i na odwrót.

+ +

Router połączony z modemem

+ +

Więc jesteśmy podłączeni do infrastruktury telefonicznej. Następnym krokiem jest wysłanie wiadomości z naszej sieci do sieci, do której chcemy dotrzeć. W tym celu podłączymy naszą sieć do Dostawcy Usług Internetowych (ISP). Dostawca usług internetowych to firma, która zarządza kilkoma specjalnymi routerami, które są ze sobą połączone i mogą również uzyskać dostęp do routerów innych dostawców usług internetowych. Tak więc wiadomość z naszej sieci jest przekazywana przez sieć dostawców usług internetowych do sieci docelowej. Internet składa się z całej tej infrastruktury sieci.

+ +

Pełny stos Internetowy

+ +

Wyszukiwanie komputerów

+ +

Jeśli chcesz wysłać wiadomość do komputera, musisz określić, do którego. Tak więc każdy komputer podłączony do sieci ma unikalny adres, który go identyfikuje, zwany "adresem IP" (gdzie IP oznacza Internet Protocol - Protokół Internetowy). Jest to adres złożony z szeregu czterech liczb oddzielonych od siebie kropkami, na przykład 192.168.2.10.

+ +

To doskonale pasuje do komputerów, ale my, ludzie, mamy problem z zapamiętywaniem tego typu adresów. Aby to ułatwić, możemy nadać adres IP z czytelną dla człowieka nazwą zwaną nazwą domeny. Na przykład (w momencie pisania; adresy IP mogą się zmieniać) google.com to nazwa domeny używana do adresu IP 172.217.165.131. Tak więc używanie nazwy domeny jest dla nas najłatwiejszym sposobem dotarcia do komputera przez Internet.

+ +

Pokazuje, jak nazwa domeny może zmienić adres IP na inny

+ +

Internet i sieć

+ +

Jak można zauważyć, podczas przeglądania stron internetowych za pomocą przeglądarki internetowej, zwykle używamy nazwy domeny, aby dotrzeć do witryny. Czy to oznacza, że Internet i sieć są tym samym? To nie jest takie proste. Jak widzieliśmy, Internet jest infrastrukturą techniczną, która pozwala połączyć ze sobą miliardy komputerów. Wśród tych komputerów, niektóre (zwane serwerami sieciowymi) mogą wysyłać wiadomości zrozumiałe dla przeglądarek internetowych. Internet jest infrastrukturą, podczas gdy Sieć to usługa zbudowana na bazie tej infrastruktury. Warto zauważyć, że istnieje kilka innych usług zbudowanych na bazie Internetu, takich jak poczta elektroniczna i {{Glossary("IRC")}}.

+ +

Dalsze kroki

+ + diff --git a/files/pl/learn/common_questions/jak_dziala_internet/index.html b/files/pl/learn/common_questions/jak_dziala_internet/index.html deleted file mode 100644 index 1ee3d15096..0000000000 --- a/files/pl/learn/common_questions/jak_dziala_internet/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Jak działa Internet? -slug: Learn/Common_questions/Jak_dziala_Internet -tags: - - Beginner - - Tutorial - - WebMechanics -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
{{LearnSidebar}}
- -
-

W tym artykule omówiono, czym jest Internet i jak działa.

-
- - - - - - - - - - - - -
Wymagania:Żadnych, ale zachęcamy do przeczytania najpierw artykułu o wyznaczaniu celów projektu.
Cel:Poznasz podstawy technicznej infrastruktury sieciowej i różnicę między Internetem a siecią.
- -

Streszczenie

- -

Internet jest szkieletem sieci, infrastruktury technicznej, która umożliwia korzystanie z sieci. W swojej najbardziej podstawowej postaci, Internet jest dużą siecią komputerów, które komunikują się ze sobą nawzajem.

- -

Historia Internetu jest nieco niejasna. Zaczęło się w latach 60. jako projekt badawczy finansowany przez USA, a następnie przekształciło się w infrastrukturę publiczną w latach 80. przy wsparciu wielu publicznych uniwersytetów i firm prywatnych. Różne technologie wspierające Internet ewoluowały z czasem, ale sposób jego funkcjonowania nie zmienił się tak bardzo: Internet to sposób na połączenie komputerów razem i zapewnienie, że cokolwiek się wydarzy, znajdą one sposób na pozostanie w kontakcie.

- -

Aktywna Nauka

- - - -

Głębsze zanurzenie

- -

Prosta sieć

- -

Kiedy dwa komputery muszą się komunikować, trzeba je połączyć albo fizycznie (zazwyczaj za pomocą kabla Ethernet), albo bezprzewodowo (na przykład przy pomocy Wi-Fi lub Bluetooth). Wszystkie nowoczesne komputery mogą utrzymywać dowolne z tych połączeń.

- -
-

Uwaga: W dalszej części tego artykułu będziemy mówić tylko o kablach fizycznych, ale sieci bezprzewodowe działają tak samo.

-
- -

Dwa komputery połączone razem

- -

Taka sieć nie jest ograniczona do dwóch komputerów. Można podłączyć tyle komputerów, ile się chce. Ale to się szybko komplikuje. Jeśli próbujesz połączyć, powiedzmy dziesięć komputerów, potrzebujesz 45 kabli, z dziewięcioma wtyczkami na komputer!

- -

Dziesięć komputerów, wszystkie razem

- -

Aby rozwiązać ten problem, każdy komputer w sieci jest podłączony do specjalnego malutkiego komputera zwanego routerem. Ten router ma tylko jedno zadanie: podobnie jak sygnalizator na stacji krajowej, dba o to, aby wiadomość wysłana z danego komputera dotarła do właściwego komputera docelowego. Aby wysłać wiadomość do komputera B, komputer A musi wysłać wiadomość do routera, który z kolei przekazuje wiadomość do komputera B i upewnia się, że wiadomość nie zostanie dostarczona do komputera C.

- -

Po dodaniu routera do systemu, nasza sieć składająca się z 10 komputerów wymaga tylko 10 kabli: jedna wtyczka na każdy komputer i router z 10 wtyczkami.

- -

Dziesięć komputerów z routerem

- -

Sieć sieci

- -

Na razie w porządku. Ale co z podłączeniem setek, tysięcy, miliardów komputerów? Oczywiście pojedynczy router nie działa na tak dużą skalę, ale jeśli uważnie czytasz, powiedzieliśmy, że router jest komputerem jak każdy inny, więc co powstrzymuje nas przed połączeniem dwóch routerów? Nic, więc zróbmy to.

- -

Dwa routery połączone razem

- -

Podłączając komputery do routerów, a następnie routery do routerów, jesteśmy w stanie skalować w nieskończoność.

- -

Routery połączone z routerami

- -

Taka sieć jest bardzo zbliżona do tego, co nazywamy Internetem, ale czegoś nam brakuje. Zbudowaliśmy tę sieć dla naszych własnych celów. Są inne sieci: twoi przyjaciele, sąsiedzi, każdy może mieć swoją własną sieć komputerów. Ale tak naprawdę nie jest możliwe ułożenie kabli między domem a resztą świata, więc jak sobie z tym poradzić? Cóż, są już kable podłączone do twojego domu, na przykład zasilanie elektryczne i telefon. Infrastruktura telefoniczna już łączy Twój dom z kimkolwiek na świecie, więc jest to idealny przewód, którego potrzebujemy. Aby połączyć naszą sieć z infrastrukturą telefoniczną, potrzebujemy specjalnego urządzenia zwanego modemem. Modem ten zamienia informacje z naszej sieci w informacje zarządzane przez infrastrukturę telefoniczną i na odwrót.

- -

Router połączony z modemem

- -

Więc jesteśmy podłączeni do infrastruktury telefonicznej. Następnym krokiem jest wysłanie wiadomości z naszej sieci do sieci, do której chcemy dotrzeć. W tym celu podłączymy naszą sieć do Dostawcy Usług Internetowych (ISP). Dostawca usług internetowych to firma, która zarządza kilkoma specjalnymi routerami, które są ze sobą połączone i mogą również uzyskać dostęp do routerów innych dostawców usług internetowych. Tak więc wiadomość z naszej sieci jest przekazywana przez sieć dostawców usług internetowych do sieci docelowej. Internet składa się z całej tej infrastruktury sieci.

- -

Pełny stos Internetowy

- -

Wyszukiwanie komputerów

- -

Jeśli chcesz wysłać wiadomość do komputera, musisz określić, do którego. Tak więc każdy komputer podłączony do sieci ma unikalny adres, który go identyfikuje, zwany "adresem IP" (gdzie IP oznacza Internet Protocol - Protokół Internetowy). Jest to adres złożony z szeregu czterech liczb oddzielonych od siebie kropkami, na przykład 192.168.2.10.

- -

To doskonale pasuje do komputerów, ale my, ludzie, mamy problem z zapamiętywaniem tego typu adresów. Aby to ułatwić, możemy nadać adres IP z czytelną dla człowieka nazwą zwaną nazwą domeny. Na przykład (w momencie pisania; adresy IP mogą się zmieniać) google.com to nazwa domeny używana do adresu IP 172.217.165.131. Tak więc używanie nazwy domeny jest dla nas najłatwiejszym sposobem dotarcia do komputera przez Internet.

- -

Pokazuje, jak nazwa domeny może zmienić adres IP na inny

- -

Internet i sieć

- -

Jak można zauważyć, podczas przeglądania stron internetowych za pomocą przeglądarki internetowej, zwykle używamy nazwy domeny, aby dotrzeć do witryny. Czy to oznacza, że Internet i sieć są tym samym? To nie jest takie proste. Jak widzieliśmy, Internet jest infrastrukturą techniczną, która pozwala połączyć ze sobą miliardy komputerów. Wśród tych komputerów, niektóre (zwane serwerami sieciowymi) mogą wysyłać wiadomości zrozumiałe dla przeglądarek internetowych. Internet jest infrastrukturą, podczas gdy Sieć to usługa zbudowana na bazie tej infrastruktury. Warto zauważyć, że istnieje kilka innych usług zbudowanych na bazie Internetu, takich jak poczta elektroniczna i {{Glossary("IRC")}}.

- -

Dalsze kroki

- - diff --git a/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..f100424b2f --- /dev/null +++ b/files/pl/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,97 @@ +--- +title: Kaskadowość i dziedziczenie +slug: Web/CSS/Na_początek/Kaskadowość_i_dziedziczenie +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

+

Ta strona tłumaczy jak arkusze stylów oddziaływują w kaskadzie, oraz jak elementy dziedziczą style od swoich rodziców. +

Nauczysz się zmieniać styl wielu elementów dokumentu jednym ruchem dzięki dziedziczeniu. +

+

Informacja: Kaskadowość i dziedziczenie

+

Ostateczny styl elementu może być określony w wielu różnych miejscach, które mogą na siebie oddziaływać w złożony sposób. +Złożone interakcje czynią CSS potężnym, ale także mogą uczynić go niezrozumiałym i trudnym do debugowania. +

Trzy główne źródła informacji o stylu tworzą kaskadę. +Są to: +

+ +

Styl użytkownika modyfikuje domyślny styl przeglądarki. +Styl autora dokumentu modyfikuje ten styl jeszcze bardziej. +W tym kursie Ty jesteś autorem przykładowego dokumentu i pracujesz tylko ze stylem autora. +

+ + +
Przykład +
Kiedy czytasz ten dokument w przeglądarce Mozilla, część stylu, który widzisz, pochodzi z domyślnego stylu przeglądarki dla HTML-a. +

Część tego stylu pochodzi z Twoich ustawień przeglądarki w Opcjach lub z pliku userContent.css w profilu przeglądarki. +

Część tego stylu pochodzi z arkusza stylów podpiętego do tego dokumentu przez serwer wiki. +

+
+

Kiedy otwierasz przykładowy dokument w swojej przeglądarce, elementy STRONG są pogrubione w stosunku do reszty tekstu. Dzieje się tak, ponieważ zostało to ustawione w domyślnym stylu przeglądarki dla HTML-a. +

Elementy STRONG są czerwone. To ustawienie pochodzi z Twojego arkusza stylów. +

Elementy STRONG dziedziczą też większość ustawień stylu elementu P, ponieważ są jego dziećmi. W ten sam sposób element P dziedziczy wiele ustawień ze stylu elementu BODY. +

Dla stylów w kaskadzie najważniejsze są style autora strony, potem czytelnika, a na końcu ustawienia domyślne przeglądarki. +

Dla dziedziczonych stylów własne style ich dzieci mają wyższy priorytet od stylu dziedziczonego po rodzicu. +

Nie są to jedyne istniejące priorytety. Dalsze strony tego kursu wyjaśnią więcej. +

+ + +
Więcej szczegółów +
CSS daje też czytelnikowi możliwość nadpisania stylów autora dokumentu przez użycie słowa kluczowego !important. +

Oznacza to, że jako autor dokumentu, nie możesz nigdy dokładnie przewidzieć, co czytelnicy zobaczą. +

Jeżeli chcesz poznać wszystkie szczegóły kaskadowości i dziedziczenia, zobacz Przypisywanie wartości własności, Kaskadowość oraz dziedziczenie w specyfikacji CSS. +

+
+

Zadanie: Używanie dziedziczenia

+

Wyedytuj Twój przykładowy plik CSS. +

Dodaj tę linię poprzez skopiowanie i wklejenie jej. +Nie ma żadnego znaczenia, czy dodasz ją pod czy nad linią, która już tam jest. +Jednakże dodawanie jej na górze jest bardziej logiczne, ponieważ w Twoim dokumencie element P jest rodzicem elementu STRONG: +

+
p {color: blue; text-decoration: underline;}
+
+

Teraz odśwież okno przeglądarki, aby obejrzeć efekt na przykładowym dokumencie. +Podkreślenie wpłynęło na cały tekst paragrafu, włączając w to początkowe litery. +Elementy STRONG dziedziczyły styl podkreślenia po swoim rodzicu, elemencie P. +

Ale elementy STRONG nadal są czerwone. Kolor czerwony jest ich własnym stylem, ma zatem wyższy priorytet niż niebieski kolor ich rodzica, elementu P. +

+ + +
+ + +
Przed +
Cascading Style Sheets +
+		 + + +
Po +
Cascading Style Sheets +
+
+


+

+ + +
Wyzwanie +
Zmień swój arkusz stylów, aby tylko czerwone litery były podkreślone: + + +
Cascading Style Sheets +
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Twój przykładowy arkusz stylów opisuje style dla znaczników P oraz STRONG, +zmieniając styl odpowiednich elementów w Twoim dokumencie. +Następna strona opisuje, jak określić styl w bardziej selektywny sposób: +Selektory +

{{ languages( { "en": "en/CSS/Getting_Started/Cascading_and_inheritance", "fr": "fr/CSS/Premiers_pas/Cascade_et_h\u00e9ritage", "it": "it/Conoscere_i_CSS/Cascata_ed_ereditariet\u00e0", "ja": "ja/CSS/Getting_Started/Cascading_and_inheritance", "pt": "pt/CSS/Como_come\u00e7ar/Cascata_e_heran\u00e7a", "zh-cn": "cn/CSS/Getting_Started/Cascading_and_inheritance" } ) }} diff --git a/files/pl/learn/css/building_blocks/index.html b/files/pl/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..d8edcc96fb --- /dev/null +++ b/files/pl/learn/css/building_blocks/index.html @@ -0,0 +1,71 @@ +--- +title: Bloki +slug: Web/CSS/Na_początek/Bloki +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

 

+

Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.

+

W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.

+

Informacja: Bloki

+

Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.

+

W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.

+ +

margines zewnętrzny

ramka

margines wewnętrzny

element

Jasny szary wskazuje części układu strony.

 

 

 

element

Tak wygląda to w przeglądarce.
+

Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.

+

Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.

+ +

margines zewnętrzny

ramka

margines wewnętrzny

element

Ten element ma zielone tło.

 

 

 

element

Tak wygląda to w przeglądarce.
+

Ramki

+

Możesz użyć ramek do dekoracji elementów liniami lub blokami.

+

Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności border. Określ szerokość (zwykle w pikselach), styl i kolor.

+

Istnieją następujące style:

+ +
solid
dotted
dashed
double
inset
outset
ridge
groove
+

Możesz także ustawić styl na none lub hidden, aby usunąć ramkę, lub ustawić kolor na transparent, aby ustawić przezroczystą ramkę bez dotykania układu.

+

Aby określić osobno każdą krawędź ramki, użyj własności: border-top (góra), border-right (prawo), border-bottom (dół), border-left (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.

+ +
Przykłady
Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka:

h3 {

 border-top: 4px solid #7c7; /* mid green */
+ background-color: #efe;     /* pale green */
+ color: #050;                /* dark green */
+ }
+

Wygląda to tak:

Nagłówek w dobrym stylu

Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:

img {border: 2px solid #ccc;}

Rezultat jest następujący:

Obrazek: Image:Blue-rule.png
+

Marginesy zewnętrzne i wewnętrzne

+

Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.

+

Użyj własności margin lub padding, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.

+

Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).

+

Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.

+

Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.

+ +
Przykład
Ta reguła oznacza akapity z klasą remark poprzez dodanie czerwonej ramki wokół nich.

Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.

Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:

p.remark {

 border: 2px solid red;
+ padding: 4px;
+ margin-left: 24px;
+ }
+

Wynik wygląda tak:

Oto zwykły akapit.

A to akapit z klasą remark.
+ +
Więcej szczegółów
Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany.

Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.

Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.

Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału model blokowy.
+

Zadanie: Dodawanie ramek

+

Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:

+
+

h3 {border-top: 1px solid gray;}

+
+

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:

+
+

li {

+
 list-style: lower-roman;
+ margin-bottom: 8px;
+ }
+
+
+

Odśwież okno przeglądarki, aby zobaczyć wynik:

+ +

(A) Oceany

  • Arktyczny
  • Atlantycki
  • Spokojny
  • Indyjski
  • Południowy

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum
+

 

+ +
Wyzwanie
Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

. . .

(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+

Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: Układ

+

{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}

diff --git a/files/pl/learn/css/building_blocks/selectors/index.html b/files/pl/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..bf3edca6f9 --- /dev/null +++ b/files/pl/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,260 @@ +--- +title: Selektory +slug: Web/CSS/Na_początek/Selektory +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

Ta strona jest częścią piątą kursu CSS Getting Started. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.

+ +

Informacja: Selektory

+ +

CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:

+ +
+
strong {
+   color: red;
+}
+
+
+ +

W terminologii CSS cała ta linia jest regułą. Ta reguła zaczyna się od strong, który jest selektorem. Wybiera, które elementy w drzewie DOM będą używały tej reguły.

+ + + + + + + +
+

Więcej szczegółów
+ Część wewnątrz nawiasów klamrowych nazywamy się deklaracją.

+ +

Słowo kluczowe color jest własnością, a red jest wartością.

+ +

Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.

+ +

Ten kurs odwołuje się do selektorów takich jak strong jako selektorów znaczników. Specyfikacja CSS odwołuje się do nich jako selektorów typu.

+
+ +

Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.

+ +

Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.

+ +

Dwa atrybuty posiadają specjalny status w CSS. Są to class oraz id.

+ +

Selektor class

+ +

Użycie atrybutu class w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.

+ +

W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.

+ +

Selektor ID

+ +

Użycie atrybutu id w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie id mu nadasz. Nazwa id musi być unikalna w dokumencie.

+ +

W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym id, kiedy używasz go w selektorze.

+ + + + + + + +
+

Przykłady
+ Ten znacznik HTML posiada zarówno atrybut class, jak i id:

+ +
+ 
+<p class="key" id="principal">
+
+
+ +

Id, principal, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy key.

+ +

W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy key staną się zielone. (Nie wszystkie muszą być elementami P.)

+ +
+ 
+.key {
+   color: green;
+}
+
+
+ +

Ta reguła powoduje, że jeden element o id principal zostanie pogrubiony:

+ +
+ 
+#principal {
+   font-weight: bolder;
+}
+
+
+
+ +

Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.

+ + + + + + + + +
Więcej szczegółów
Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. +

Na przykład selektor .key wybiera wszystkie elementy, które mają klasę o nazwie key. Selektor p.key wybiera tylko elementy P, które mają klasę o nazwie key.

+ +

Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, class i id. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor {{ mediawiki.external('type=button') }} wybiera wszystkie elementy, które mają atrybut type o wartości button.

+ +

W dalszej części kursu (Tabele) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.

+ +

Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę Selektory w specyfikacji CSS.

+
+ +

Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.

+ +

Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.

+ +

Zadanie: Używanie selektorów class i id

+ +

1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.
+ 2. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:

+ +
+
<!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html
+
+ +

Teraz wyedytuj swój plik CSS. Zamień całą treść na:

+ +
+
strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
+ +

Odśwież okno przeglądarki, aby zobaczyć wynik:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.

+ +

Selektory klas .carrot oraz .spinach mają priorytety nad selektorem znaczników strong.

+ +

Selektor id #first ma priorytet nad selektorami klas i znaczników.

+ + + + + + + + +
Wyzwanie
Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski: + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+
+ +

Zadanie: użycie pseudo selectorów

+ +
    +
  1. Utwórz plik HTML z następują treścią: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
    +
    2. +
  2. Edytuj plik CSS. Zamień jego treść na: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
    +
    3. +
  3. Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt): + + + + + + +
    Go to our Home page
    +
    4. +
+ +

Co dalej?

+ +

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+ +

Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: Czytelny CSS

+ +

{{ languages( { "en": "en/CSS/Getting_Started/Selectors", "fr": "fr/CSS/Premiers_pas/Les_s\u00e9lecteurs", "it": "it/Conoscere_i_CSS/I_Selettori", "ja": "ja/CSS/Getting_Started/Selectors", "pt": "pt/CSS/Como_come\u00e7ar/Seletores" } ) }}

diff --git a/files/pl/learn/css/building_blocks/styling_tables/index.html b/files/pl/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..3e09737217 --- /dev/null +++ b/files/pl/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,597 @@ +--- +title: Tabele +slug: Web/CSS/Na_początek/Tables +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

 

+

Ta strona bardziej szczegółowo opisuje selektory oraz sposoby tworzenia stylów dla tabel.

+

Stworzysz nowy dokument zawierający tabelę oraz nadasz mu styl.

+

Informacja: Więcej o selektorach

+

CSS daje wiele sposobów na wybranie elementów, bazując na ich wzajemnych relacjach. Możesz ich użyć, aby stworzyć bardziej dokładne selektory.

+

Poniżej znajduje się podsumowanie selektorów bazujące na ich wzajemnych relacjach:

+ + + + + + + + + + + + + + + + + + + + + + + +
SelektorWybiera
A EDowolny element E, który jest potomkiem elementu A (to znaczy jest dzieckiem albo dzieckiem dziecka, itp.))
A > EDowolny element E, który jest dzieckiem elementu A
E:first-childDowolny element E, który jest pierwszym dzieckiem swojego rodzica
B + EDowolny element E, który jest następnym z rodzeństwa elementu B (to znaczy: następnym dzieckiem tego samego rodzica)
+

Możesz łączyć te selektory w złożone relacje.

+

Możesz też użyć symbolu * (gwiazdka), który znaczy "dowolny element".

+ + + + + + + +
+ Przykład
Tabela HTML posiada atrybut id, ale jej wiersze i komórki nie posiadają własnych identyfikatorów: +
+

<TABLE id="data-table-1"> ... <TR> <TD>Prefiks</TD> <TD>0001</TD> <TD>domyślnie</TD> </TR> ...

+
+

Poniższe reguły powodują, że pierwsza komórka w każdym wierszu jest pogrubiona, natomiast druga używa kroju monospace. Dotyczą one tylko jednej, określonej tabeli w dokumencie:

+
+
    +
  1. data-table-1 td:first-child {font-weight: bolder;}
    2. +
  2. data-table-1 td:first-child + td {font-family: monospace;}
    3. +
+
+

Wygląda to tak:

+ + + + + + +
+ + + + + + + + +
Prefiks<tt>0001</tt>domyślnie
+
+
+ + + + + + + +
+ Więcej szczegółów
Kiedy stworzysz bardziej szczegółowy selektor, zazwyczaj wzrośnie jego priorytet. +

Jeżeli korzystasz z opisanych tu technik, unikasz potrzeby określania atrybutu class lub id w wielu znacznikach dokumentu. Zamiast tego logika zostaje przeniesiona na CSS.

+

W dużych projektach, gdzie prędkość ma duże znaczenie, możesz sprawić, że twój arkusz stylów będzie działał szybciej, poprzez unikanie złożonych reguł, które zależą od relacji między elementami.

+

Aby dowiedzieć się więcej o selektorach, zajrzyj do specyfikacji CSS na stronę Selektory.

+
+

Informacja: Tabele

+

Tabela układa informacje w prostokątną siatkę. Niektóre tabele mogą być skomplikowane, a różne przeglądarki mogą pokazywać różne wyniki.

+

Kiedy tworzysz swój dokument, użyj tabel do wyrażenia relacji między elementami informacji. Wówczas nie ma znaczenia, jeśli różne przeglądarki wyświetlą je w trochę inny sposób, ponieważ przekaz pozostanie jasny.

+

Nie używaj tabel w sposób, do którego nie zostały przeznaczone, na przykład aby tworzyć przy ich pomocy układ wizualny. Techniki opisane na poprzedniej stronie tego kursu (Układ) nadają się do tego znacznie lepiej.

+

Struktura tabeli

+

W tabeli każdy kawałek informacji jest wyświetlany w komórce.

+

Komórki wyświetlane w jednej linii tworzą wiersz.

+

W niektórych tabelach wiersze mogą być grupowane. Specjalna grupa wierszy, która znajduje się na górze tabeli, nazywa się nagłówkiem. Specjalna grupa wierszy znajdująca się na dole tabeli nazywa się stopką. Główne wiersze w tabeli tworzą jej ciało i one również mogą być łączone w grupy.

+

Komórki ułożone w pionowej linii tworzą kolumnę, ale użyteczność kolumn w tabelach CSS jest ograniczona.

+ + + + + + + +
+ Przykład
Tabela selektorów znajdująca się na górze tej strony posiada dziesięć komórek i pięć wierszy. +

Pierwszy wiersz jest nagłówkiem. Kolejne cztery są ciałem tabeli. Nie posiada ona stopki.

+

Ma natomiast dwie kolumny.

+
+


+ Ten kurs omawia tylko proste tabele, dla których wynik jest przewidywalny. W prostej tabeli każda komórka zajmuje miejsce w jednym wierszu i jednej kolumnie. Możesz skorzystać z CSS-u do złożonych tabel, gdzie komórki rozciągają się na więcej niż jeden wiersz lub kolumnę, ale tego typu tabele wykraczają poza zakres tego kursu.

+

Ramki

+

Komórki nie posiadają marginesów zewnętrznych.

+

Komórki posiadają ramki oraz marginesy wewnętrzne. Domyślnie ramki są oddzielone o wartość własności border-spacing tabeli. Możesz usunąć całkowicie odstępy przez ustawienie własności border-collapse tabeli na wartość collapse.

+ + + + + + + +
+ Przykład
Poniżej widać trzy tabele. +

Tabela po lewej ma ustawione odstępy ramek na 0.5 em. Tabela w środku ma ustawione odstępy ramek na zero. Tabela po prawej ma zwinięte ramki:

+ + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+

Opis

+

Opis jest etykietą opisującą całą tabelę. Domyślnie jest wyświetlana nad tabelą.

+

Aby przesunąć opis na dół, ustaw jego własność caption-side na bottom. Ta własność jest dziedziczona, więc możesz ją ustawić dla całej tabeli lub innego rodzica.

+

Aby ustawić styl tekstu opisu, użyj normalnych własności tekstowych.

+ + + + + + + +
+ Przykład
Ta tabela posiada opis na dole: +
+
    +
  1. demo-table > caption {
    2. +
+ 
+ caption-side: bottom;
+ font-style: italic;
+ text-align: right;
+ }
+
+
+ + + + + + +
+ + + + + + + +
+ Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+

Puste komórki

+

Możesz wyświetlić puste komórki (czyli ich ramki oraz tło) przez określenie empty-cells: show; dla elementu tabeli.

+

Możesz je ukryć, określając empty-cells: hide;. Wtedy jeżeli element rodzic komórki posiada tło, zostanie ono pokazane w miejscu pustej komórki.

+ + + + + + + +
+ Przykład
Poniższe tabele mają jasnozielone tło. Ich komórki mają tło jasnoszare i ciemnoszare ramki. +

W lewej tabeli puste komórki są wyświetlane, w prawej ukrywane:

+ + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+

 

+ + + + + + + +
+ Więcej szczegółów
Aby dowiedzieć się więcej o tabelach, zajrzyj do rozdziału Tabele w specyfikacji CSS. +

Informacje tam zawarte wykraczają poza ten kurs, ale nie opisują różnic miedzy przeglądarkami, które mogą wpływać na wyświetlanie złożonych tabel.

+
+

Zadanie: Ustawianie stylów dla tabeli

+

Stwórz nowy dokument HTML, doc3.html. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz całą zawartość:

+
+ 
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+<HEAD>
+<TITLE>Przykładowy dokument 3</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style3.css">
+</HEAD>
+<BODY>
+
+<TABLE id="demo-table">
+<CAPTION>Oceans</CAPTION>
+
+<THEAD>
+<TR>
+<TH></TH>
+<TH>Area</TH>
+<TH>Mean depth</TH>
+</TR>
+<TR>
+<TH></TH>
+<TH>million km<SUP>2</SUP></TH>
+<TH>m</TH>
+</TR>
+</THEAD>
+
+<TBODY>
+<TR>
+<TH>Arctic</TH>
+<TD>13,000</TD>
+<TD>1,200</TD>
+</TR>
+<TR>
+<TH>Atlantic</TH>
+<TD>87,000</TD>
+<TD>3,900</TD>
+</TR>
+<TR>
+<TH>Pacific</TH>
+<TD>180,000</TD>
+<TD>4,000</TD>
+</TR>
+<TR>
+<TH>Indian</TH>
+<TD>75,000</TD>
+<TD>3,900</TD>
+</TR>
+<TR>
+<TH>Southern</TH>
+<TD>20,000</TD>
+<TD>4,500</TD>
+</TR>
+</TBODY>
+
+<TFOOT>
+<TR>
+<TH>Total</TH>
+<TD>361,000</TD>
+<TD></TD>
+</TR>
+<TR>
+<TH>Mean</TH>
+<TD>72,000</TD>
+<TD>3,800</TD>
+</TR>
+</TFOOT>
+
+</TABLE>
+
+</BODY>
+</HTML>
+
+
+

Stwórz nowy arkusz stylów, style3.css. Skopiuj i wklej poniższy kod, upewniając się, że zaznaczasz cały:

+
+ 
/*** Styl dla doc3.html (Tabele) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+  }
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+  }
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+  }
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+  }
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+  }
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+  }
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+  }
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+  }
+
+#demo-table tbody th:after {
+  content: ":";
+  }
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+  }
+
+#demo-table tfoot th {
+  color: blue;
+  }
+
+#demo-table tfoot th:after {
+  content: ":";
+  }
+
+#demo-table > tfoot td {
+  background-color: #cee;
+  }
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+  }
+
+
+

Otwórz dokument w swojej przeglądarce. Powinien wyglądać mniej więcej tak:

+ + + + + + +
+
+

Oceans

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+
+
+

Porównaj reguły ze swojego arkusza stylów z wyświetloną tabelą, aby upewnić się, że rozumiesz działanie każdej reguły. Jeżeli napotkasz regułę, której nie rozumiesz, wykomentuj ją i odśwież okno przeglądarki, aby zobaczyć, co się stanie.

+

Poniżej znajduje się kilka uwag dotyczących tej tabeli:

+ +

 

+ + + + + + + +
+ Wyzwania
Zmień arkusz stylów tak, aby tabela wyglądała jak poniżej: + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+

Oceans

+
+
+
+

 

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+

Jest to ostatnia strona tego kursu, która opisuje własności i wartości CSS. Aby dowiedzieć się więcej o własnościach i wartościach w CSS, zajrzyj na stronę Full property table w specyfikacji CSS.

+

Następna strona znowu wraca do tematu przeznaczenia i struktury arkuszy stylów CSS: Media

diff --git a/files/pl/learn/css/building_blocks/values_and_units/index.html b/files/pl/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..db5bfd5e7d --- /dev/null +++ b/files/pl/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,209 @@ +--- +title: Kolor +slug: Web/CSS/Na_początek/Kolor +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

+

Ta strona dokładniej opisuje sposoby pracy z kolorami w CSS-ie. +

W swoim przykładowym arkuszu stylów, dodasz kolory tła. +

+

Informacja: Kolor

+

Do tej pory w tym kursie używałeś(aś) ograniczonej liczby nazwanych kolorów. +CSS 2 definiuje 17 nazwanych kolorów. +Niektóre z nazw mogą nie być tym, czego się spodziewasz: +

+ + + + + + + + +
  black   gray   silver   white +
podstawowe red   lime   blue +
drugorzędne yellow   aqua   fuchsia +
 maroon  orange  olive  purple  green  navy  teal +
+


+

+ + +
Więcej szczegółów +
Twoja przeglądarka może obsługiwać znacznie więcej nazwanych kolorów, na przykład: + + +
dodgerblue  peachpuff   tan   firebrick   aquamarine +
+

Szczegółową listę znajdziesz w dokumentacji CSS 3, w module Kolor, sekcji +słowa kluczowe kolorów w SVG. Unikaj używania nazwanych kolorów, których przeglądarka osoby czytającej Twój dokument może nie obsługiwać. +

+
+

Aby móc korzystać w większej palety kolorów, określ czerwony, zielony i niebieski komponent koloru, z którego chcesz skorzystać, używając znaku "hash" oraz trzech heksadecymalnych liczb w zakresie od 0 – 9, a – f. Litery a – f reprezentują wartości 10 – 15. +

+ + + + + + + + + + +
black  #000 +
pure red   #f00 +
pure green   #0f0 +
pure blue   #00f +
white   #fff +
+

Aby skorzystać z pełnej palety, określ dwie heksadecymalne liczby na każdy komponent: +

+ + + + + + + + + + +
black   #000000 +
pure red   #ff0000 +
pure green   #00ff00 +
pure blue   #0000ff +
white   #ffffff +
+

Zazwyczaj te sześcioliczbowe, heksadecymalne kody możesz pobrać z Twojego programu graficznego lub innego narzędzia. +

+ + + + +
Przykłady +
Odrobina praktyki i w większości wypadków możesz modyfikować trzyliczbowe kolory ręcznie: + + + + + + + + + + + + +
Zacznij od czystej czerwieni:  #f00 +
Aby ją rozjaśnić, dodaj trochę zielonego i niebieskiego:  #f77 +
Aby kolor był bardziej pomarańczowy, dodaj trochę zielonego:  #fa7 +
Aby kolor był ciemniejszy, zmniejsz wartość wszystkich komponentów:  #c74 +
Aby zmniejszyć nasycenie, zmniejsz różnice między wartościami komponentów:  #c98 +
Jeśli ustawisz jednakową wartość wszystkich komponentów, uzyskasz kolor szary:  #ccc +
+
Aby uzyskać pastelowy odcień, taki jak blady niebieski: + + + + +
Zacznij od białego:  #fff +
Zredukuj trochę wartości komponentów innych, niż niebieski:  #eef +
+
+


+

+ + +
Więcej szczegółów +
Możesz także określić kolor, używając decymalnych wartości RGB w zakresie 0 – 255, lub procentów. +

Na przykład to jest kasztanowaty (ciemnoczerwony): +

+
+rgb(128, 0, 0)
+
+

Więcej szczegółów na temat określania kolorów znajdziesz w sekcji +Kolory w specyfikacji CSS. +

Więcej informacji na temat dopasowania kolorów do kolorów systemowych, jak Menu czy ThreeDFace, znajdziesz w: +CSS2 Kolory Systemowe specyfikacji CSS. +

+
+


+

+

Własności kolorów

+

Korzystałeś(aś) już z własności color dla tekstu. +

Możesz też użyć własności background-color, aby zmienić tła elementów. +

Jeżeli ustawisz wartość tła na transparent, będzie ono przezroczyste i pokaże tło elementu rodzica. +

+ + +
Przykład +
Boksy Przykład w tym kursie używają bladożółtego tła: +
+background-color: #fffff4;
+
+

Boksy Więcej szczegółów używają bladoszarego: +

+
+background-color: #f4f4f4;
+
+
+

Zadanie: Korzystanie z kodów kolorów

+

Wyedytuj swój plik CSS. +

Wykonaj zmiany oznaczone tutaj pogrubieniem, aby nadać pierwszym literom bladoniebieskie tło. +(Styl i komentarze w Twoim pliku będą prawdopodobnie inne niż pokazane tutaj. +Zachowaj styl i komentarze w stylu jaki wybrałeś(aś)). +

+
+
/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+ color: red;
+ background-color: #ddf;
+ font: 200% serif;
+ }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+

Odśwież okno przeglądarki, aby zobaczyć wynik: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+

+ + +
Wyzwanie +
W swoim pliku CSS zmień wszystkie nazwy kolorów na 3-cyfrowe kody kolorów, tak, żeby rezultat pozostał taki sam. +

(To nie jest do końca możliwe, ale możesz być blisko ideału. +Aby uzyskać dokładnie taki efekt, potrzebujesz 6-cyfrowych kodów oraz musisz zajrzeć do specyfikacji CSS lub użyć narzędzia graficznego, aby znaleźć odpowiednie kody). +

+
+


+

+

Co dalej?

+

Twój przykładowy dokument i przykładowy arkusz stylów ściśle rozdzielają treść od stylu. +

Następna strona wyjaśnia, jak robić wyjątki od tego rozdziału: +Treść +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Color", "fr": "fr/CSS/Premiers_pas/Couleurs", "it": "it/Conoscere_i_CSS/Colori", "ja": "ja/CSS/Getting_Started/Color", "pt": "pt/CSS/Como_come\u00e7ar/Cor" } ) }} diff --git a/files/pl/learn/css/first_steps/how_css_is_structured/index.html b/files/pl/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..0e62945cbd --- /dev/null +++ b/files/pl/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,154 @@ +--- +title: Czytelny CSS +slug: Web/CSS/Na_początek/Czytelny_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

+

Ta strona opisuje styl i gramatykę języka CSS. +

Zmienisz wygląd swojego pliku CSS, aby był bardziej czytelny. +

+

Informacja: Czytelny CSS

+

Możesz dodać białe znaki i komentarze do swojego arkusza stylów, aby uczynić go bardziej czytelnym. +Możesz też grupować selektory razem, kiedy te same reguły stylów dotyczą wybranych elementów w różny sposób. +

+

Białe znaki

+

Białe znaki to spacje, tabulatory i nowe linie. +Dzięki białym znakom arkusz stylów będzie bardzie czytelny. +

Twój przykładowy plik CSS zawiera w tej chwili jedną regułę na linię i prawie minimalną liczbę białych znaków. W złożonych arkuszach stylów taki układ byłby bardzo trudny do czytania, utrudniając zarządzanie arkuszem. +

Styl, który wybierzesz, zazwyczaj zależy od prywatnych przyzwyczajeń, ale Twój arkusz stylów może być częścią projektu, którym zajmuje się więcej osób. W takiej sytuacji przyjmuje się pewne konwencje. +

+ + +
Przykłady +
Niektórzy ludzie lubią zwięzły układ, którego używaliśmy do tej pory, dzieląc linię jedynie wtedy, kiedy staje się ona bardzo długa: +
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+

Inni wolą układać jedną własność-wartość na linię: +

+
+

.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +

+
+

Inni używają wcięć — często używane są dwie spacje, cztery spacje lub tabulator: +

+
+

.carrot { +

+
 color: orange;
+ text-decoration: underline;
+ font-style: italic;
+
+

} +

+
+

Inni wolą ustawiać wszystko względem pionowej osi (jednak taki układ jest trudny w zarządzaniu): +

+
+

.carrot +

+
   {
+   color           : orange;
+   text-decoration : underline;
+   font-style      : italic;
+   }
+
+
+

Tworząc wcięcia jedni wolą używać tabulatorów, inni zaś tylko spacji. +

+
+

Komentarze

+

Komentarze w CSS zaczynają się od /*, a kończą się na */. +

Możesz używać komentarzy, aby komentować elementy swojego arkusza stylów oraz do wykomentowywania części aktualnie nieużywanych. +

Aby wykomentować części arkusza stylów, umieść tę część w komentarzu, a przeglądarka ją zignoruje. +Należy uważać, gdzie zaczyna, a gdzie kończy się komentarz. +Dalsza część arkusza stylów musi mieć poprawną składnię. +

+ + +
Przykład +
+

/* styl dla początkowej litery C w pierwszym paragrafie */ +.carrot { +

+
 color:            orange;
+ text-decoration:  underline;
+ font-style:       italic;
+ }
+
+
+
+

Grupy Selektorów

+

Kiedy wiele selektorów ma ten sam styl, możesz określić grupę selektorów, oddzielając je przecinkami. +Deklaracja zostanie zastosowana do wszystkich wybranych elementów. +

W innych miejscach arkusza stylów możesz określić te same selektory ponownie, aby nadać im indywidualne reguły. +

+ + +
Przykład +
Ta reguła sprawia, że elementy H1, H2 oraz H3 są tego samego koloru. +

Wygodnie jest określić kolor tylko w jednym miejscu, na wypadek, gdyby miał być zmieniany. +

+
+

/* kolory nagłówków */ +h1, h2, h3 {color: navy;} +

+
+
+

Zadanie: Dodawanie komentarzy i poprawianie układu

+

Wyedytuj swój plik CSS i upewnij się, że posiada on te reguły (w dowolnej kolejności): +

+
+

strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +

+
  1. first {font-style: italic;} +
+

p {color: blue;} +

+
+

Spraw, aby stał się bardziej czytelny, zmieniając kolejność w sposób, który uznasz za logiczny oraz dodając białe znaki i komentarze w taki sposób, jaki uznasz za najlepszy. +

Zapisz ten plik i odśwież stronę w przeglądarce, aby upewnić się, że Twoje zmiany nie wpłynęły na działanie arkusza stylów: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+


+

+ + +
Wyzwanie +
Wykomentuj część arkusza stylów bez zmieniania czegokolwiek poza tym, aby pierwsza litera dokumentu była czerwona: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

(Jest więcej niż jeden sposób, aby to zrobić.) +

+
+


+

+

Co dalej?

+

Twój przykładowy dokument używa kursywy oraz podkreślenia. +Następna strona omawia kolejne sposoby na określanie wyglądu tekstu w dokumencie: +Style tekstowe +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Readable_CSS", "fr": "fr/CSS/Premiers_pas/Des_CSS_lisibles", "it": "it/Conoscere_i_CSS/CSS_leggibili", "ja": "ja/CSS/Getting_Started/Readable_CSS", "pt": "pt/CSS/Como_come\u00e7ar/CSS_leg\u00edvel" } ) }} diff --git a/files/pl/learn/css/first_steps/how_css_works/index.html b/files/pl/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..4502cad557 --- /dev/null +++ b/files/pl/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,133 @@ +--- +title: Czym jest CSS +slug: Web/CSS/Na_początek/Czym_jest_CSS +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

 

+ +

Ta strona opisuje, czym jest CSS.

+ +

Informacja: Czym jest CSS?

+ +

CSS jest językiem określającym, jak dokumenty mają być prezentowane użytkownikowi.

+ +

Dokumentjest to kolekcja informacji ułożona w strukturę przy użyciujęzyka znaczników.

+ + + + + + + + +
Przykłady
+
    +
  • Strona, taka jak ta, jest dokumentem.
    + Informacje, które widzisz na stronie, zazwyczaj są ułożone w strukturę przy użyciu języka znaczników HTML (HyperText Markup Language).
    • +
+ +
    +
  • Okienko dialogowe w aplikacji Mozilli jest dokumentem.
    + Kontrolki interfejsu użytkownika, które widzisz w okienku dialogowym Mozilli, są ułożone w strukturę przy użyciu języka znaczników XUL (XML User-interface Language).
    • +
+
+ +

W tym kursie bloki oznaczone Więcej szczegółów, jak poniższy, zawierają informacje, których znajomość nie jest wymagana do dalszego korzystania z kursu. Jeżeli się spieszysz, możesz spokojnie pominąć te bloki i na przykład wrócić do nich później.

+ + + + + + + + +
Więcej szczegółów
+

Dokument nie jest tym samym co plik. Dokument może, ale nie musi być składowany w pliku.

+ +

Na przykład dokument, który w tym momencie czytasz, nie jest zapisany w pliku. Kiedy Twoja przeglądarka prosi o stronę, serwer odpytuje bazę danych i generuje dokument, składając jego części z wielu plików i fragmentów z bazy danych. Jednak w trakcie tego kursu będziesz pracować z dokumentami składowanymi w plikach.

+ +

Więcej informacji na temat dokumentów i języków znaczników znajdziesz w innych częściach tej strony — na przykład:

+ + + + + + + + + + + + + + + + + + + + +
HTMLo stronach internetowych
XMLo strukturalnych dokumentach
SVGo grafice
XULo interfejsie użytkownika w Mozilli
+
+ +

Prezentowaniedokumentu użytkownikowi oznacza skonwertowanie go do postaci, w jakiej będzie on przydatny użytkownikowi. Mozilla prezentuje dokumenty wizualnie — na przykład na ekranie komputera, obrazie wyświetlanym przez projektor lub wydruku.

+ + + + + + + + +
Więcej szczegółów
CSS jest przeznaczony nie tylko dla przeglądarek i prezentacji graficznych. W formalnej terminologii CSS program, który prezentuje dokumenty użytkownikowi, nazywany jestagentem (ang. User Agent - UA). Przeglądarka jest tylko jednym z wielu rodzajów UA. Jednakże część pierwsza tego kursu skupia się na pracy z językiem CSS w przeglądarce. +

Formalne definicje terminologii związanej z CSS znajdziesz w Specyfikacji CSS w dziale Definicje.

+
+ +

Zadanie: Tworzenie dokumentu

+ +

Stwórz nowy katalog, a w nim nowy plik. Ten plik będzie Twoim dokumentem.

+ +

Skopiuj i wklej poniższy kod HTML. Zapisz plik pod nazwą doc1.html

+ +
+
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
+ +

Otwórz nowy panel lub nowe okno w Twojej przeglądarce i otwórz ten plik.

+ +

Powinieneś zobaczyć tekst zaczynający się od pogrubionych liter:

+ + + + + + + +
Cascading Style Sheets
+ +

To, co widzisz w przeglądarce, może się trochę różnić z powodu ustawień przeglądarki oraz tego wiki. Jeżeli istnieją jakieś różnice w kroju pisma, odstępach i kolorach, które widzisz, nie jest to żaden problem.

+ +

Co dalej?

+ +

Jeżeli masz problemy ze zrozumieniem tej strony lub chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

+ +

Twój dokument nie używa jeszcze CSS. Na następnej stronie zaczniesz używać CSS do określania stylów: Po co używać CSS

+ +

{{ languages( { "en": "en/CSS/Getting_Started/What_is_CSS", "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS" } ) }}

diff --git a/files/pl/learn/css/first_steps/index.html b/files/pl/learn/css/first_steps/index.html new file mode 100644 index 0000000000..22b975504c --- /dev/null +++ b/files/pl/learn/css/first_steps/index.html @@ -0,0 +1,64 @@ +--- +title: Na początek +slug: Web/CSS/Na_początek +tags: + - CSS + - 'CSS:Na_początek' + - Wszystkie_kategorie +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

 

+

Wprowadzenie

+

Ten kurs wprowadza użytkownika w świat kaskadowych arkuszy stylów (CSS).

+

Pokaże Ci on, jak korzystać z podstawowych funkcji CSS przy użyciu praktycznych przykładów, które możesz sprawdzić na swoim komputerze. Kurs składa się z dwóch części.

+ + +

Ten kurs bazuje na specyfikacji CSS 2.1.

+

Kto może skorzystać z tego kursu?

+

Kurs jest przeznaczony dla początkujących, ale może być też przydatny dla osób mających już pewną wiedzę o CSS.

+

Jeżeli jesteś początkujący, skorzystaj z pierwszej części tego kursu, by zrozumieć działanie CSS i nauczyć się go używać. Potem przeczytaj część drugą, aby zrozumieć zakres wykorzystania CSS w produktach Mozilli.

+

Jeżeli znasz już trochę CSS, możesz pominąć części kursu, które omawiają znane Ci tematy i skupić się na tych, które są dla Ciebie nowe.

+

Jeżeli znasz dobrze CSS, ale nie w Mozilli, przejdź do części drugiej.

+

Czego potrzebujesz, zanim zaczniesz?

+

Aby móc swobodnie korzystać z tego kursu, potrzebujesz edytora plików tekstowych oraz przeglądarkę Mozilla (Firefox lub Mozilla Suite) i powinieneś umieć korzystać z obu tych produktów w podstawowym zakresie.

+

Jeżeli nie chcesz edytować plików, możesz po prostu czytać kurs i patrzeć na obrazki, ale taka metoda nauki jest znacznie mniej efektywna.

+

Niektóre części tego kursu mogą wymagać innych aplikacji Mozilli. Części te są opcjonalne. Jeżeli nie chcesz pobierać innych aplikacji Mozilli, po prostu pomiń je.

+

Uwaga:  CSS umożliwia pracę z kolorami, więc niektóre części kursu zależą od kolorów. Możesz z nich wygodnie korzystać, jeśli posiadasz kolorowy wyświetlacz i prawidłowo rozróżniasz kolory.

+

Jak korzystać z tego kursu

+

Aby korzystać z tego kursu, przeczytaj uważnie wszystkie strony po kolei. Jeżeli pominiesz jedną stronę, możesz mieć trudności z rozumieniem dalszych.

+

Na każdej stronie sekcja Informacja opisuje, jak działa CSS. Dzięki sekcji Zadanie będziesz mógł wypróbować użycie CSS na swoim komputerze.

+

Aby sprawdzić, jak dobrze rozumiesz treść, podejmij wyzwanie znajdujące się na dole każdej strony. Rozwiązania niektórych wyzwań są prezentowane na późniejszych stronach kursu.

+

Aby lepiej zrozumieć CSS, przeczytaj informacje znajdujące się w boksach oznaczonych Więcej szczegółów. Użyj znajdujących się tam odnośników, aby dowiedzieć się więcej ze specyfikacji CSS.

+

Kurs – część pierwsza

+

Podstawowy kurs CSS, krok po kroku.

+
    +
  1. Czym jest CSS
    2. +
  2. Po co używać CSS
    3. +
  3. Jak działa CSS
    4. +
  4. Kaskadowość i dziedziczenie
    5. +
  5. Selektory
    6. +
  6. Czytelny CSS
    7. +
  7. Style tekstowe
    8. +
  8. Kolor
    9. +
  9. Treść
    10. +
  10. Listy
    11. +
  11. Bloki
    12. +
  12. Układ
    13. +
  13. Tabele
    14. +
  14. Media
    15. +
+

Kurs – część druga

+

Przykłady wykorzystania CSS w Mozilli.

+
    +
  1. JavaScript
    2. +
  2. Wiązania XBL
    3. +
  3. XUL-owe interfejsy użytkownika
    4. +
  4. Grafika SVG
    5. +
  5. Dane XML
    6. +
+

{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "zh-cn": "cn/CSS/\u5f00\u59cb", "pt": "pt/CSS/Como_come\u00e7ar" } ) }}

diff --git a/files/pl/learn/css/howto/css_faq/index.html b/files/pl/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..12a84d8c20 --- /dev/null +++ b/files/pl/learn/css/howto/css_faq/index.html @@ -0,0 +1,162 @@ +--- +title: Częste pytania o CSS +slug: Web/CSS/Częste_pytania_o_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

+

+

Często zadawane pytania

+

Stworzyłem poprawny CSS, ale przeglądarka go źle wyświetla

+

Jeśli chcesz, aby Twoja przeglądarka poprawnie wyświetlała strony stworzone zgodnie ze standardami HTML/CSS, to musisz zadeklarować na początku każdego pliku HTML Deklarację Typu Dokumentu (DTD - Document Type Declaration). +

Nowoczesne przeglądarki obsługują dwa główne tryby wyświetlania: +

+ +

Jeśli Twoja deklaracja (DTD) jest niepełna, przestarzała lub jej brak, to przeglądarki będą wyświetlały strony używając trybu zgodności wstecznej. +

Oto lista najczęściej używanych DTD: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+

Różnice między id i class

+

Bloki i elementy HTML-a mogą mieć atrybut id i/lub class. Atrybut id pozwala nadać unikalną nazwę wybranemu elementowi. W jednym dokumencie nie może być dwóch elementów o tej samej nazwie (identyfikatorze). Atrybut class pozwala na grupowanie elementów w określonej klasie. Z założenia identyczny atrybut jest stosowany dla wielu elementów. CSS pozwala zdefiniować style, które mają być użyte do elementów z odpowiednim atrybutem id i/lub class. +

Używaj styli zależnych od id, gdy chcesz ograniczyć ich działanie do konkretnego bloku lub elementu. Dla przykładu - dobrym miejscem na użycie atrybutu id jest blok, w którym umieszczamy menu, ponieważ występuje on tylko raz na stronie. +

Używaj atrybutu class, gdy chcesz aby ten sam styl był stosowany do grupy elementów. +

Zobacz Selektory CSS +

+

Przywracanie domyślnej wartości własności

+

W CSS2 nie ma możliwości ustawienia standardowej wartości dla własności CSS. Jedyna droga, aby przywrócić standardową wartość, to przedeklarowanie (musisz znać standardową wartość, ponieważ CSS nie posiada słowa kluczowego default) +

Musisz zachować szczególną ostrożność pisząc reguły stylów, gdy używasz selektorów (np. selektorów po nazwie znacznika jak na przykład p), które możesz chcieć nadpisać bardziej szczegółowymi regułami (jak te przy użyciu ID lub selektorów klas), ponieważ oryginalna standardowa wartość nie może być automatycznie odzyskana. +

Z powodu kaskadowej natury CSS dobrą praktyką jest definiowanie reguł stylów najszczegółowiej jak się tylko da, żeby wpływały tylko na to, co chcesz. +

+

Style pochodne

+

CSS nie pozwala na definiowanie stylów w regułach innego, głównie z powodu user agents performance issues (Eric Meyer words about it). +

W każdym razie, dobrze zorganizowany dokument HTML nie potrzebuje zagnieżdżonych stylów, dzięki kaskadowej naturze stylów. W rzeczywistości, jeśli potrzebujesz dokonać drobnej zmiany konkretnej reguły, stwórz oddzielną regułę zawierającą tylko zmiany. W HTML-u zastosuj główną regułę, a potem tą ze zmianami (patrz następna sekcja na temat przydzielania kilku klas). +

+

Przydzielanie kilku klas

+

Elementy HTML-a mogą być opisane przez kilka klas. Robi się to wymieniając nazwy kolejnych klas w atrybucie class, oddzielając kolejne nazwy spacjami. +

+
<style type="text/css">
+.firstclass { background: black; color: white; }
+.secondclass { font-weight: bold; }
+</style>
+
+<div class="firstclass secondclass">
+... treść ...
+... treść ...
+... treść ...
+</div>
+
+

Jeśli ta sama własność jest zadeklarowana w dwóch regułach, to konflikt rozwiązywany jest najpierw poprzez ich specyfikę, a później kolejność w arkuszu stylów. Kolejność klas w atrybucie class jest nieistotna. +

+

Własności stylów, które nie działają

+

Często się zdarza, że poprawnie zdefiniowane style są ignorowane. Nie wynika to ani z błędu przeglądarki, ani z błędnej składni w CSS. Zwykle jest to zachowanie jak najbardziej prawidłowe, wynikające bezpośrednio ze składni i kolejności intepretacji reguł CSS. +

Najczęstsze powody ignorowania niektórych styli to: +

+ +

Aby zlokalizować omówiony powyżej problem narzędziem zwanym " Inspektor DOM", w którym będziemy mogli zobaczyć jego lokalizację. +

Hierarchia elementów HTML-a +

Sposób, w jaki style CSS są stosowane do elementów HTML, zależy od hierarchii samych elementów HTML. Ważne jest, aby to zapamiętać, ponieważ reguła potomka jest zawsze ważniejsza od reguły elementu nadrzędnego. +

+
#section { font-weight: bold; }
+.redtext { font-weight: normal; color: red; }
+
+<div id="section">
+   To jest pogrubiony tekst
+   <span class="redtext"> ten ma normalną grubość, lecz jest czerwony,</span>
+   i znów pogrubiony
+</div>
+
+

Wydaje się to dość oczywiste, gdyż wynika z prostoty kaskadowych arkuszy stylów. Gdy w przypadku skomplikowanych hierarchii HTML jakaś reguła wydaje sie być ignorowana, najpierw sprawdź, czy podejrzany element nie jest wewnątrz innego ze zdefiniowanym innym stylem. +


+Przedefiniowywanie reguł stylów +

W arkuszach stylów kolejność jest istotna. W praktyce, jeśli zdefiniujesz regułę, a następnie zmienisz tą definicję w dalszej części arkusza stylów to użyta będzie ostatnia definicja. +

+
#sekcja { font-weight: bold; }
+.czerwony_tekst { color: red; }
+/* inne reguły                         */
+/*             inne reguły             */
+/*                         inne reguły */
+.czerwony_tekst { font-weight: normal; }
+
+<div id="sekcja">
+   Ten tekst jest pogrubiony,
+   <span class="redtext"> ten jest normalny i czerwony,</span>
+   a ten znów pogrubiony.
+</div>
+
+

Aby uniknąć tego typu błędów, spróbuj definiować reguły tylko raz dla konkretnego selektora i należącej do niego grupy reguł. +


+Używanie skrótów własności +

Używanie skrótów własności do definiowania reguł stylów jest dobre, ponieważ używa zwięzłej składni. Używanie ~shorthand~ tylko z niektórymi atrybutami jest możliwe i poprawne, ale trzeba pamiętać, że niezadeklarowane atrybuty są automatycznie resetowane do wartości standardowych. Oznacza to, że poprzednia reguła dla pojedynczego atrybutu może być bezwarunkowo nadpisana. +

+
#sekcja { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.czerwony_tekst { font: 14px Arial; color: red; }
+
+<div id="sekcja">
+   To jest pogrubiona 12-o pikselowa Verdana,
+   <span class="czerwony_tekst">to jest normalny 14-o pikselowy, czerwony Arial,</span>
+   i znów 12-o pikselowa Verdana
+</div>
+
+

W poprzednim przykładnie problem w regułach należących do różnych elementów, ale to samo może się zdarzyć dla tego samego elementu, ponieważ kolejność reguł jest istotna. +

+
#sekcja {
+   font-weight: bold;
+   font: 12px Verdana;  /* skrót nadpisuje pogrubienie i zwraca normalny */
+}
+
+


+Używanie selektora: * +

Selektor gwiazdki (*) pozwala na odniesienie się do dowolnego elementu i powinien być używany ze szczególną ostrożnością, ponieważ może być trudne kontrolowanie elementów, do których reguły są dodawane. +

+
body * { font-weight: normal; }
+#sekcja { font: 12px Verdana; }
+.pogrubiony_tekst { font-weight: bold; }
+.czerwony_tekst { color: red; }
+
+<div id="sekcja">
+   Ten jest normalny,
+   <span class="pogrubiony_tekst">
+      <span class="czerwony_tekst"> ten jest normalny i czerwony,</span>
+   </span>
+   i znów normalny.
+</div>
+
+

W tym przykładzie body * pozwala na zastosowanie reguł do wszystkich elementów wewnątrz body, na każdym poziomie hierarchii - także do czerwony_tekst. Tak więc font-weight: bold; zastosowany do klasy pogrubiony_tekst jest nadpisane przez font-weight: normal; klasy czerwony_tekst. +

Starszeństwo w CSS +

Gdy stosowane są różne reguły dla konkretnego elementu to która z nich zostanie zastosowana zależy od starszeństwa stylów. Style inline (liniowe, takie jak span) są interpretowane na początku, potem te oparte na identyfikatorze (id), następnie klasie (class) i ewentualnie znajdujące się wewnątrz elementu (style=""). +


+

+
div { color: black; }
+#pomaranczowy { color: orange; }
+.zielony { color: green; }
+
+<div id="pomaranczowy" class="zielony" style="color: red;">To jest czerwony tekst</div>
+
+

Więcej informacji na temat działania selektorów można znaleźć w sieci → CSS 2.1 Specification chapter 6.4.3 +

+

Co wykonuje własność -moz-*?

+

Zobacz: Rozszerzenia CSS Mozilli. +

+
+
+{{ languages( { "en": "en/Common_CSS_Questions", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }} diff --git a/files/pl/learn/css/styling_text/fundamentals/index.html b/files/pl/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..69dfd39735 --- /dev/null +++ b/files/pl/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,116 @@ +--- +title: Style tekstowe +slug: Web/CSS/Na_początek/Style_tekstowe +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

+

Na tej stronie znajdziesz więcej przykładów stylów tekstowych. +

Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma. +

+

Informacja: Style tekstowe

+

CSS posiada kilka własności do określania stylu tekstu. +

Istnieje wygodna, krótka własność font, której można użyć do określenia kilku cech na raz — na przykład: +

+ + + +
Przykład +
+

p {font: italic 75%/125% "Comic Sans MS", cursive;} +

+
+

Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą. +

Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni). +

Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo). +

Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na normal): +

+
+

Typy fontów

+

Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. +Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych. +

Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: serif, sans-serif, cursive, fantasy lub monospace, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki). +

Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty. +

Aby określić wyłącznie typ fontu, użyj własności font-family. +

+

Rozmiary fontów

+

Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da. +

Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak small, medium czy large. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: smaller, larger, 150% lub 1.5. +

Jeżeli trzeba, możesz określić bezpośredni rozmiar: 12px (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz. +

Aby określić sam rozmiary fontu, użyj własności font-size. +

+

Wysokość linii

+

Wysokość linii określa odstępy między liniami. +Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe. +

Aby określić samą wysokość linii, użyj własności line-height. +

+

Ozdobniki

+

Odrębna własność text-decoration może określać inne style, jak underline (podkreślenie) lub line-through (przekreślenie). +Ustawiając tę własność na normal, usuniesz wszystkie ozdobniki. +

+

Inne własności

+

Aby ustawić kursywę, użyj font-style: italic;
+Aby ustawić pogrubienie, użyj font-weight: bold;
+Aby określić, że wszystkie litery mają być małymi literami, użyj font-variant: small-caps; +

Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na normal lub +inherit (dziedzicz). +

+ + +
Więcej szczegółów +
Możesz określić style tekstowe na kilka innych sposobów. +

Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć. +

W złożonym arkuszu stylów unikaj używania skrótowej własności font, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu). +

Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału Fonty w specyfikacji CSS. +Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj Tutaj. +

+
+

Zadanie: Określanie fontu

+

W prostych dokumentach możesz określić font elementu BODY, a reszta dokumentu będzie dziedziczyć jego ustawienia. +

Wyedytuj swój plik CSS. +Dodaj regułę, która zmieni font. +Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia: +

+
+

body {font: 16px "Comic Sans MS", cursive;} +

+
+

Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu. +

Odśwież okno przeglądarki, aby zobaczyć efekt. +Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar. +

+ + +
Wyzwanie +
Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+
+

Co dalej?

+

Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. +Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: +Kolor +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }} diff --git a/files/pl/learn/css/styling_text/styling_lists/index.html b/files/pl/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..64f4218a9d --- /dev/null +++ b/files/pl/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,269 @@ +--- +title: Listy +slug: Web/CSS/Na_początek/Listy +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

+

Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list. +

Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej. +

+

Informacja: Listy

+

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (Treść), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy. +

CSS posiada specjalne własności stworzone dla list. +Staraj się z nich korzystać, jeśli masz możliwość. +

Aby określić styl dla listy, użyj własności list-style do określenia typu znacznika. +

Selektor w regule CSS może określać elementy listy (np. LI) lub element rodzica list (np. UL), z którego elementy listy będą dziedziczyły te style. +

+

Listy nieuporządkowane (unordered lists)

+

W liście nieuporządkowanej każdy element jest oznaczony w ten sam sposób. +

W CSS występują trzy typy oznaczeń. +Wyświetlane są w następujący sposób: +

+ +

Alternatywnie możesz określić URL do obrazka. +

+ + +
Przykład +
Te reguły określają różne oznaczenia dla różnych klas elementów listy: +
+

li.open {list-style: circle;} +li.closed {list-style: disc;} +

+
+

Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte: +

+
+

<UL> +

+
 <LI class="open">Lorem ipsum</LI>
+ <LI class="closed">Dolor sit</LI>
+ <LI class="closed">Amet consectetuer</LI>
+ <LI class="open">Magna aliquam</LI>
+ <LI class="closed">Autem veleum</LI>
+
+

</UL> +

+
+

Wynik może wyglądać na przykład tak: +

+ + +
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

Listy uporządkowane (ordered lists)

+

W przypadku list uporządkowanych każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji. +

Użyj własności list-style, aby określić typ oznaczenia: +

+ + + +
Przykład +
Ta reguła określa, że w bloku OL z klasą info elementy są oznaczane dużymi literami. +
+

ol.info {list-style: upper-latin;} +

+
+

Elementy LI dziedziczą ten styl: +

+ + +
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ + +
Więcej szczegółów +
Własność list-style jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji Listy w dokumentacji CSS. +

Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (UL) i uporządkowanych (OL), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić UL jako posortowaną, a OL jako nieposortowaną, jeśli wolisz. +

Różne przeglądarki w różny sposób obsługują te style dla list. +Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich. +

+
+

Liczniki

+
+

Notatka:  Niektóre przeglądarki nie obsługują liczników.

+
+

Możesz używać liczników do różnych elementów, nie tylko list. +Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy. +

Aby określić numerację, musisz zadeklarować counter z określoną nazwą. +

W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości counter-reset i nazwą Twojego licznika. +Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy. +

W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość counter-increment. Jako wartość podaj nazwę licznika. +

Aby wyświetlić wartość licznika, dodaj :before lub :after do selektora i użyj własności content (tak jak na poprzedniej stronie Treść). +

Jako wartość własności content wstaw counter() z nazwą swojego licznika. +Opcjonalnie określ typ. +Typy są takie same jak w sekcji 'listy uporządkowane. +

Zwykle element, który wyświetla licznik, inkrementuje go. +

+ + +
Przykład +
Ta reguła inicjalizuje licznik w każdym elemencie H3 z klasą numbered: +
+

h3.numbered {counter-reset: mynum;} +

+
+

Ta reguła wyświetla i inkrementuje licznik dla każdego elementu P z klasą numbered: +

+
+

p.numbered:before { +

+
 content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+
+
+

Wynik wygląda tak: +

+ + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+ + +
Więcej szczegółów +
Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę. +

Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie. +

Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. +Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji Automatyczne liczniki i numerowanie. +

+
+

Zadanie: Style list

+

Stwórz nowy dokument HTML, doc2.html. +Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały: +

+
+

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Sample document 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">The oceans</H3> +<UL> +<LI>Arctic</LI> +<LI>Atlantic</LI> +<LI>Pacific</LI> +<LI>Indian</LI> +<LI>Southern</LI> +</UL> + +<H3 class="numbered">Numbered paragraphs</H3> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> + +</BODY> +</HTML> +

+
+

Stwórz nowy arkusz stylów, style2.css. +Skopiuj i wklej poniższą treść: +

+
+

/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { +

+
 content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+
+
+

Jeżeli układ i komentarze Ci nie odpowiadają, zmień je. +

Otwórz ten dokument w swojej przeglądarce. +Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. +Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków): +

+ + +

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+


+

+ + +
Wyzwania +
Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v: + + +

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu: +

+ + +

(A) The oceans

+

. . . +

+

(B) Numbered paragraphs

+

. . . +

+
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie. +

Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: +Bloki +

{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }} diff --git a/files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..6d1a97d33c --- /dev/null +++ b/files/pl/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,110 @@ +--- +title: Jak działa Sieć +slug: Learn/Getting_started_with_the_web/Jak_dziala_Siec +tags: + - Beginner + - Client + - DNS + - HTTP + - IP + - Infrastructure + - Learn + - Server + - TCP + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Jak działa Sieć zapewnia uproszczony wgląd w to, co dzieje się podczas przeglądania witryny w przeglądarce internetowej na komputerze lub telefonie.

+
+ +

Teoria ta nie jest niezbędna do pisania kodu, ale na dłuższą metę zrozumienie tego, co dzieje się w tle, przynosi korzyści.

+ +

Klienci i serwery

+ +

Komputery podłączone do sieci są nazywane klientami i serwerami. Uproszczony schemat ich interakcji może wyglądać w ten sposób:

+ +

Dwa kółka reprezentujące klienta i serwer. Strzałka oznaczona jako zapytanie przechodzi z klienta do serwera, a strzałka oznaczona jako odpowiedź przechodzi z serwera do klienta.

+ + + +

Pozostałe części składowe

+ +

Klient i serwer, o których pisaliśmy powyżej, nie opowiadają całej historii. Jest wiele innych części, które są związane z tym tematem, a my opiszemy je poniżej.

+ +

Na razie, wyobraźmy sobie, że sieć to droga. Na jednym końcu tej drogi jest klient, który jest jak twój dom. Na drugim końcu drogi jest serwer, który jest sklepem, w którym chcesz coś kupić.

+ +

+ +

Oprócz klienta i serwera, musimy się również przywitać z:

+ + + +

Więc co się dokładnie dzieje?

+ +

Po wpisaniu adresu strony internetowej w przeglądarce (dla naszej analogii jest to jak chodzenie do sklepu):

+ +
    +
  1. Przeglądarka przechodzi do serwera DNS i znajduje rzeczywisty adres serwera, na którym znajduje się strona internetowa (znajduje się adres sklepu).
    2. +
  2. Przeglądarka wysyła do serwera wiadomość z żądaniem HTTP, prosząc go o przesłanie kopii strony internetowej do klienta (wchodzisz do sklepu i zamawiasz towar). Ta wiadomość i wszystkie inne dane wysyłane pomiędzy klientem a serwerem są przesyłane przez twoje połączenie internetowe przy użyciu TCP/IP.
    3. +
  3. Jeśli serwer zaakceptuje prośbę klienta, serwer wysyła do niego wiadomość "200 OK", co oznacza "Oczywiście możesz zajrzeć na tę stronę! Tutaj jest", a następnie zaczyna wysyłać pliki strony do przeglądarki w postaci serii małych kawałków zwanych pakietami danych (sklep daje Ci towar, a Ty przynosisz go z powrotem do domu).
    4. +
  4. Przeglądarka składa małe kawałki w kompletną stronę internetową i wyświetla ją Tobie (towar dociera do Twoich drzwi - nowe błyszczące rzeczy, niesamowite!).
    5. +
+ +

Wyjaśnienie DNS

+ +

Prawdziwe adresy internetowe nie są miłymi, zapadającymi w pamięć słowami, które wpisujesz do paska adresu, aby znaleźć swoje ulubione strony. Są to specjalne numery, które wyglądają tak: 63.245.215.20.

+ +

Nazywa się to {{Glossary("IP Address", "adresem IP")}} i reprezentuje on unikalną lokalizację w sieci. Jednakże, nie jest to łatwe do zapamiętania, prawda? Właśnie dlatego wynaleziono system nazw domen. Są to specjalne serwery, które dopasowują adres internetowy, który wpisujesz do przeglądarki (np. "mozilla.org") do rzeczywistego adresu strony internetowej (IP).

+ +

Do stron internetowych można dotrzeć bezpośrednio poprzez ich adresy IP. Adres IP strony internetowej można znaleźć wpisując jej domenę do narzędzia takiego jak IP Checker.

+ +

Objaśnienie pakietów

+ +

Wcześniej używaliśmy terminu "pakiety" do określenia formatu, w jakim dane są wysyłane z serwera do klienta. Co mamy tu na myśli? Zasadniczo, gdy dane są wysyłane przez sieć, są one wysyłane w postaci tysięcy małych kawałków, dzięki czemu wielu różnych użytkowników sieci może pobrać tę samą stronę w tym samym czasie. Gdyby strony internetowe były wysyłane jako pojedyncze duże kawałki, tylko jeden użytkownik mógłby pobrać jeden na raz, co oczywiście uczyniłoby sieć bardzo nieefektywną i mało przyjemną w użyciu.

+ +

Zobacz także

+ + + +

Uznanie

+ +

Zdjęcie ulicy: Street composing, autorstwa Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

W tym module

+ + diff --git a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html b/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html deleted file mode 100644 index 6d1a97d33c..0000000000 --- a/files/pl/learn/getting_started_with_the_web/jak_dziala_siec/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Jak działa Sieć -slug: Learn/Getting_started_with_the_web/Jak_dziala_Siec -tags: - - Beginner - - Client - - DNS - - HTTP - - IP - - Infrastructure - - Learn - - Server - - TCP - - 'l10n:priority' -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Jak działa Sieć zapewnia uproszczony wgląd w to, co dzieje się podczas przeglądania witryny w przeglądarce internetowej na komputerze lub telefonie.

-
- -

Teoria ta nie jest niezbędna do pisania kodu, ale na dłuższą metę zrozumienie tego, co dzieje się w tle, przynosi korzyści.

- -

Klienci i serwery

- -

Komputery podłączone do sieci są nazywane klientami i serwerami. Uproszczony schemat ich interakcji może wyglądać w ten sposób:

- -

Dwa kółka reprezentujące klienta i serwer. Strzałka oznaczona jako zapytanie przechodzi z klienta do serwera, a strzałka oznaczona jako odpowiedź przechodzi z serwera do klienta.

- - - -

Pozostałe części składowe

- -

Klient i serwer, o których pisaliśmy powyżej, nie opowiadają całej historii. Jest wiele innych części, które są związane z tym tematem, a my opiszemy je poniżej.

- -

Na razie, wyobraźmy sobie, że sieć to droga. Na jednym końcu tej drogi jest klient, który jest jak twój dom. Na drugim końcu drogi jest serwer, który jest sklepem, w którym chcesz coś kupić.

- -

- -

Oprócz klienta i serwera, musimy się również przywitać z:

- - - -

Więc co się dokładnie dzieje?

- -

Po wpisaniu adresu strony internetowej w przeglądarce (dla naszej analogii jest to jak chodzenie do sklepu):

- -
    -
  1. Przeglądarka przechodzi do serwera DNS i znajduje rzeczywisty adres serwera, na którym znajduje się strona internetowa (znajduje się adres sklepu).
    2. -
  2. Przeglądarka wysyła do serwera wiadomość z żądaniem HTTP, prosząc go o przesłanie kopii strony internetowej do klienta (wchodzisz do sklepu i zamawiasz towar). Ta wiadomość i wszystkie inne dane wysyłane pomiędzy klientem a serwerem są przesyłane przez twoje połączenie internetowe przy użyciu TCP/IP.
    3. -
  3. Jeśli serwer zaakceptuje prośbę klienta, serwer wysyła do niego wiadomość "200 OK", co oznacza "Oczywiście możesz zajrzeć na tę stronę! Tutaj jest", a następnie zaczyna wysyłać pliki strony do przeglądarki w postaci serii małych kawałków zwanych pakietami danych (sklep daje Ci towar, a Ty przynosisz go z powrotem do domu).
    4. -
  4. Przeglądarka składa małe kawałki w kompletną stronę internetową i wyświetla ją Tobie (towar dociera do Twoich drzwi - nowe błyszczące rzeczy, niesamowite!).
    5. -
- -

Wyjaśnienie DNS

- -

Prawdziwe adresy internetowe nie są miłymi, zapadającymi w pamięć słowami, które wpisujesz do paska adresu, aby znaleźć swoje ulubione strony. Są to specjalne numery, które wyglądają tak: 63.245.215.20.

- -

Nazywa się to {{Glossary("IP Address", "adresem IP")}} i reprezentuje on unikalną lokalizację w sieci. Jednakże, nie jest to łatwe do zapamiętania, prawda? Właśnie dlatego wynaleziono system nazw domen. Są to specjalne serwery, które dopasowują adres internetowy, który wpisujesz do przeglądarki (np. "mozilla.org") do rzeczywistego adresu strony internetowej (IP).

- -

Do stron internetowych można dotrzeć bezpośrednio poprzez ich adresy IP. Adres IP strony internetowej można znaleźć wpisując jej domenę do narzędzia takiego jak IP Checker.

- -

Objaśnienie pakietów

- -

Wcześniej używaliśmy terminu "pakiety" do określenia formatu, w jakim dane są wysyłane z serwera do klienta. Co mamy tu na myśli? Zasadniczo, gdy dane są wysyłane przez sieć, są one wysyłane w postaci tysięcy małych kawałków, dzięki czemu wielu różnych użytkowników sieci może pobrać tę samą stronę w tym samym czasie. Gdyby strony internetowe były wysyłane jako pojedyncze duże kawałki, tylko jeden użytkownik mógłby pobrać jeden na raz, co oczywiście uczyniłoby sieć bardzo nieefektywną i mało przyjemną w użyciu.

- -

Zobacz także

- - - -

Uznanie

- -

Zdjęcie ulicy: Street composing, autorstwa Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

W tym module

- - diff --git a/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..128ef84501 --- /dev/null +++ b/files/pl/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,127 @@ +--- +title: JavaScript +slug: Web/CSS/Na_początek/JavaScript +tags: + - 'CSS:Na_początek' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

+

Jest to druga część tego kursu. Część II zawiera trochę przykładów pokazujących zakres użycia CSS w Mozilli. +

Każda strona Części II ilustruje jak CSS współpracuje z innymi technologiami. +Te strony nie zostały stworzone po to, aby nauczyć Cię korzystać z tych technologii. +Jeśli chcesz je poznać, skorzystaj z innych kursów. +

Natomiast, te strony zostały stworzone po to, aby pokazać wiele możliwości wykorzystania CSS. +Aby używać tych stron, powinieneś(aś) znać CSS, ale nie musisz znać innych technologii. +

+

Informacja: JavaScript

+

JavaScript jest językiem programowania. +Duża część kodu aplikacji Mozilla (na przykład przeglądarki) jest napisana w JavaScripcie. +

JavaScript może współpracować z arkuszami stylów, pozwalając Ci pisać aplikacje, które dynamicznie zmieniają styl dokumentu. +

Istnieją na to trzy sposoby: +

+ + + +
Więcej szczegółów +
Aby dowiedzieć się więcej o JavaScripcie w Mozilli, zajrzyj na stronę JavaScript na tym wiki. +
+

Zadanie: Demonstracja wykorzystania Javascript-u

+

Stwórz nowy dokument HTML, doc5.html. +Skopiuj i wklej poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style5.css">
+<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
+</HEAD>
+
+<BODY>
+<H1>JavaScript sample</H1>
+
+<DIV id="square"></DIV>
+
+<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON>
+
+</BODY>
+</HTML>
+
+

Stwórz nowy plik CSS, style5.css. +Skopiuj i wklej do niego poniższy kod: +

+
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+
+

Stwórz nowy plik tekstowy, script5.js. +Skopiuj i wklej do niego poniższy kod: +

+
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+
+

Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +

To wiki nie obsługuje JavaScriptu na stronach, więc nie jest możliwe zademonstrowanie działania tego kodu tutaj. +Wygląda to mniej więcej jak poniżej, przed i po naciśnięciu przycisku: +

+ + +
+ + +

JavaScript demonstration

+
+
+
+		 + + +

JavaScript demonstration

+
+
+
+
+

Uwagi dotyczące demonstracji: +

+ + + +
Wyzwanie +
Zmień skrypt tak, aby obiekt square skakał w prawo o 20 em, kiedy jego kolor się zmienia, i skakał z powrotem, kiedy kolor wraca do podstawowego. +
+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

W tej demonstracji dokument HTML posiada odnośnik do skryptu, mimo że używa go tylko element przycisku. +Mozilla rozszerza CSS, aby umożliwić wiązanie kodu JavaScript (oraz treści i innych arkuszy stylów) z wybranymi elementami. +Następna strona opisuje to: +Wiązania XBL +

{{ languages( { "en": "en/CSS/Getting_Started/JavaScript", "fr": "fr/CSS/Premiers_pas/JavaScript", "pt": "pt/CSS/Como_come\u00e7ar/JavaScript" } ) }} diff --git a/files/pl/learn/javascript/first_steps/a_first_splash/index.html b/files/pl/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..0d0f49c69a --- /dev/null +++ b/files/pl/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,687 @@ +--- +title: A first splash into JavaScript +slug: Learn/JavaScript/Pierwsze_kroki/A_first_splash +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
+ +

Zaznajomiłeś się już nieco z teorią JavaScript i masz już pewne pojęcie co do zastosowania tego języka. Teraz zamierzamy udzielić Ci przyspieszonego kursu z podstawowych funkcji JavaScript'u poprzez ten, w pełni praktyczny, samouczek. Krok po kroku napiszesz tu prostą grę pod tytułem: "Zgadnij liczbę".

+ + + + + + + + + + + + +
Wymagania wstępne:Podstawowa umiejętność posługiwania się komputerem, podstawowa znajomość HTML i CSS, podstawowa znajomość czym jest JavaScript.
Cel:Pierwsze doświadczenia w pisaniu kodu w JavaScript i zrozumienie- przynajmniej w podstawowym stopniu- z czym związane jest pisanie programu w JavaScript.
+ +

Nie oczekujemy od Ciebie całkowitego zrozumienia kodu od zaraz - chcemy raczej przedstawić Ci nieco ogólniejsze spojrzenie i dać Ci odczuć sposób, w jaki działa JavaScript (jak również i inne języki programowania). W późniejszych artykułach wrócimy do użytych tu funkcjonalności w bardziej szczegółowy spsób.

+ +
+

Wiele funkcjonalności, które zobaczysz w JavaScript, jest takich samych, jak w innych językach programowania (funkcje, pętle itd.) Składnia języka wygląda inaczej, ale zasada działania jest przeważnie ta sama.

+
+ +

Myśleć jak programista

+ +

Składnia danego języka nie jest - wbrew pozorom - najtrudniejszym aspektem, z jakim trzeba zmierzyć się podczas nauki programowania. Sprawą znacznie poważniejszą jest bowiem nauczyć się stosować posiadaną wiedzę do rozwiązywania problemów ze świata realnego. Musisz zacząć myśleć jak programista. Wiąże się to z patrzeniem na opisy oczekiwanego efektu działania programu, przemyśleniem, jakich konstrukcji kodu w tym celu użyć i zaplanowaniem, jak połączyć je wszystkie w efektywnie współpracującą całość.

+ +

Wymaga to połączenia ciężkiej pracy, doświadczenia ze składnią języków i praktyki - wraz z odrobiną kreatywności. Im więcej napiszesz kodu, tym lepszy w tym się staniesz. Nie możemy obiecać, że wypracujesz  w sobie "mózg programisty" w pięć minut, ale damy Ci wiele możliwości praktykowania myślenia jak programista w czasie trwania tego kursu.

+ +

Pamiętając o tym, przyjrzyjmy się ogólnie procesowi pisania kodu dzieląc go na poszczególne konkretne zadania. Posłuży nam w tym celu poniższy przykładowy program.

+ +

Przykład: Gra "Zgadnij liczbę"

+ +

Oto przykład prostej gry:

+ + + +

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

+ +

Nie krępuj się - pograj sobie chwilę. Zwróć uwagę na elementy tej gry zanim przejdziesz dalej.

+ +

Wyobraźmy sobie, że Twój szef postawił przed Tobą następujące zadanie:

+ +
+

Chcę, żebyś napisał prostą grę typu "zgadnij liczbę". Gra powinna wybierać losową liczbę pomiędzy 1 a 100. Zadaniem gracza jest odgadnąć tę liczbę w najwyżej 10 próbach. Po każdej próbie gracz powinien otrzymać informację, czy zgadł, czy też nie i - jeśli nie odgadł, powinien dodatkowo dowiedzieć się, czy jego liczba miała wartość za małą, czy za dużą. Ponadto gracz powinien widzieć wybrane poprzednio przez siebie liczby. Gra ma się zakończyć gdy gracz poda prawidłową odpowiedź, lub gdy wykorzysta ostatnią próbę. Po zakończeniu gry gracz powinien mieć możliwośc rozpocząć ją od nowa.

+
+ +

Zacznijmy od przedstawienia powyższego opisu w sposób bliższy myśleniu programisty i podzielmy go na proste pojedyncze zadania:

+ +
    +
  1. Wybierz losową liczbę z zakresu od 1 do 100.
    2. +
  2. Zapisz numer próby, którą podejmuje gracz. Zacznij od 1.
    3. +
  3. Podaj graczowi sposób, w jaki może odgadnąć tę liczbę.
    4. +
  4. Gdy padnie odpowiedź zapisz ją gdzieś, aby użytkownik mógł widzieć swoje poprzednie próby.
    5. +
  5. Sprawdź, czy padła prawidłowa odpowiedź.
    6. +
  6. Jeśli tak: +
      +
    1. Wyświetl gratulacje.
      2. +
    2. Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).
      3. +
    3. Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.
      4. +
    +
    7. +
  7. Jeśli nie i graczowi pozostały jeszcze próby: +
      +
    1. Poinformuj o nieprawidłowej odpowiedzi.
      2. +
    2. Pozwól podać kolejną odpowiedź.
      3. +
    3. Zwiększ numer próby gracza o 1.
      4. +
    +
    8. +
  8. Jeśli nie i graczowi nie pozostała już ani jedna próba: +
      +
    1. Poinformuj o zakończeniu gry.
      2. +
    2. Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).
      3. +
    3. Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.
      4. +
    +
    9. +
  9. Gdy gra uruchomi się ponownie, upewnij się, że dane z poprzedniej gry zostały całkowicie usunięte i interfejs powrócił do stanu początkowego. Przejdź do punktu nr 1.
    10. +
+ +

Zróbmy kolejny krok i spróbujmy zamienić powyższe punkty w kod, który zbuduje naszą grę. W ten sposób zobaczysz w działaniu kilka funcji JavaScript.

+ +

Przygotowanie

+ +

Aby rozpocząć pracę potrzebujesz mieć na swoim komputerze kopię pliku number-guessing-game-start.html (see it live here). Otwórz go w edytorze tekstowym i jednocześnie w swojej przeglądarce. Plik ten zawiera nagłówek, akapit z krótką instrukcją gry, oraz (jeszcze nie działający) formularz do wprowadzania odpowiedzi.

+ +

Nasz kod będziemy pisać w bloku określonym znacznikiem {{htmlelement("script")}} u dołu pliku HTML:

+ +
<script>
+
+  // Twój kod JavaScript
+
+</script>
+
+ +

Pojemniki na dane - zmienne

+ +

Zaczynamy. W pierwszej kolejności dodaj poniższe linijki kodu do bloku oznaczonego {{htmlelement("script")}}.

+ +
var randomNumber = Math.floor(Math.random() * 100) + 1;
+
+var guesses = document.querySelector('.guesses');
+var lastResult = document.querySelector('.lastResult');
+var lowOrHi = document.querySelector('.lowOrHi');
+
+var guessSubmit = document.querySelector('.guessSubmit');
+var guessField = document.querySelector('.guessField');
+
+var guessCount = 1;
+var resetButton;
+ +

Ta część kodu definiuje zmienne i stałe niezbędne do pracy programu. Najprościej rzecz ujmując, zmienne są pojemnikami na wartości takie jak liczby, czy ciągi znaków. Zmienną tworzymy używając słowo kluczowe let (lub var), po którym wpisujemy nazwę tej zmiennej. Następnie możemy tej zmiennej przypisać wartość. Robimy to za pomocą znaku równości (=), po którego prawej stronie wpisujemy żądaną wartość. Więcej informacji na temat różnic pomiędzy słowami kluczowymi let i var możesz znaleźć w tym artykule. Stałe natomiast mają za zadanie przechować dane, które mają się nie zmieniać i tworzy się je podobnie jak zmienne, ale przy użyciu słowa kluczowego const. W naszym przykładzie użyjemy stałych do przechowania odnośników (referencji) do poszczególnych części naszego interfejsu użytkownika. Tekst w niektórych z nich może w którymś momencie ulec zmianie, jednak bloki kodu HTML, do których odnoszą się nasze stałe pozostaną niezmienne.

+ +

W naszym przykładzie:

+ + + +
+

Na temat zmiennych i stałych będziesz dowiadywał się coraz więcej w toku trwania kursu, począwszy już od tego artykułu.

+
+ +

Funkcje

+ +

Wstaw następujący kod poniżej dodanego w poprzednim kroku:

+ +
function checkGuess() {
+  alert('I am a placeholder');
+}
+ +

Funkcje są blokami kodu "wielokrotnego użytku". Napisane raz, mogą być wywoływane wielokrotnie bez potrzeby ponownego pisania ich w całości. Ta cecha funkcji nie tylko oszczędza czas pisania kodu, ale również znacząco poprawia jego czytelność. Istnieje kilka sposobów definiowania funkcji. W tym przykładzie zajmiemy się jednym z prostszych. Rozpoczynamy od słowa kluczowego function, następnie piszemy nazwę naszej funkcji, a na jej końcu- nawiasy zwykłe. Potem wstawiamy dwa nawiasy klamrowe ({ }). To właśnie w nich zawarte jest ciało funkcji - kod, który będzie wykonywał się, ilekroć wywołamy tę funkcję.

+ +

Funkcje wywołuje się pisząc jej nazwę wraz z nawiasami zwykłymi.

+ +

Spróbujmy. Zapisz zmiany w swoim pliku z kodem i odśwież okno przeglądarki. Teraz przejdź do konsoli JavaScript w narzędziach programisty w przeglądarce i wprowadź tę linię:

+ +
checkGuess();
+ +

Po zatwierdzeniu klawiszem Return/Enter, powinno pojawić się okno alertu z tekstem: "I am a placeholder". Dzieje się tak, poniważ w naszym kodzie zdefiniowaliśmy funkcję, która uruchamia ten alert, kiedy tylko ją wywołamy.

+ +
+

W  dalszej części kursu dowiesz się znacznie więcej o funkcjach.

+
+ +

Operatory

+ +

Za pomocą operatorów w JavaScript możemy przeprowadzać porównania, dokonywać obliczeń, łączyć ze sobą ciągi znaków i robić wiele innych przydatnych rzeczy.

+ +

Jeśli jeszcze nie zapisałeś zmian w swoim pliku z kodem, oraz nie odświeżyłeś okna przeglądarki, zrób to teraz. Otwórz konsolę Javascript w narzędziach programisty w przeglądarce. Teraz będziesz mógł sprawdzić działanie operatorów. Przepisz dokładnie każde z poleceń z kolumny "Example" i zatwierdź każde z nich klawiszem Return/Enter. Obserwuj wyniki. Jeśli z jakiegoś powodu nie masz dostępu do  narzędzi programistycznych w Twojej przeglądarce, możesz użyć poniższej prostej konsoli:

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Najpierw zajmiemy się operatorami arytmetycznymi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
+Dodawanie6 + 9
-Odejmowanie20 - 15
*Mnożenie3 * 7
/Dzielenie10 / 5
+ +

Operatora + możemy też użyć do łączenia ciągów znaków (takie działanie nazywa się w programowaniu konkatenacją). Wprowadź poniższe linie, oddzielając je klawiszem Return / Enter :

+ +
var name = 'Bingo';
+name;
+var hello = ' says hello!';
+hello;
+var greeting = name + hello;
+greeting;
+ +

Dostępne są również pewne ułatwiające życie skróty, zwane złożonymi operatorami przypisania. Jeśli na przykład chcielibyśmy w prosty sposób dodać nowy ciąg tekstowy do już istniejącego, możemy napisać tak:

+ +
name += ' says hello!';
+ +

Co jest równoznaczne z:

+ +
name = name + ' says hello!';
+ +

Kiedy dokonujemy sprawdzenia prawda / fałsz (na przykład w instrukcjach warunkowych - zobacz {{anch("Instrukcje warunkowe", "poniżej")}}) używamy operatorów porównania. Na przykład:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
===Ścisła równość (czy jest dokładnie tym samym?)5 === 2 + 4
!==Różne od (czy nie jest tym samym?)'Chris' !== 'Ch' + 'ris'
<Mniejsze od10 < 6
>Większe od10 > 20
+ +

Instrukcje warunkowe

+ +

Wrócmy teraz do naszej funkcji checkGuess().  Z pewnością lepiej mogłaby nam się przysłużyć, gdyby jej działanie nie ograniczało się tylko do wyświetlenia komunikatu "placeholder". Mamy dla niej o wiele ważniejsze zadanie - chcemy, by sprawdzała każdą odpowiedź gracza i odpowiednio reagowała.

+ +

W tym celu zastąp obecną funkcję checkGuess() jej nową wersją:

+ +
function checkGuess() {
+  var userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess < randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess > randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+ +

Sporo kodu, prawda? Przyjrzyjmy mu się bliżej:

+ + + +

Zdarzenia (events)

+ +

Udało nam się całkiem zgrabnie zaimplementować funkcję checkGuess(), jednak na razie nie wykona ona żadnej akcji z tej prostej przyczyny, że jeszcze jej nie wywołaliśmy. Funkcja ta ma zostać wywołana przy naciśnięciu przycisku "Submit guess". W tym celu użyjemy zdarzenia. Zdarzenie jest tym, co dzieje się w przeglądarce (np. kliknięcie przycisku, załadowanie strony, odtwarzanie filmu, itd.) i czego możemy użyć  w celu wywołania konkretnego bloku kodu. Konstrukty, które "nasłuchują", czy miało miejsce zdarzenie nazywane są detektorami zdarzeń (event listeners), a wywoływane w odpowiedzi na nie bloki kodu - modułami obsługi zdarzeń (event handlers).

+ +

Do swojej funkcji checkGuess() dodaj poniższą linię:

+ +
guessSubmit.addEventListener('click', checkGuess);
+ +

W ten sposób dodałeś detektor zdarzenia do przycisku guessSubmit. Jest to metoda, która ma dwie dane wejściowe (zwane argumentami) zapisane w formie  ciągu znaków: typ zdarzenia, które ma zajść (w tym przypadku click), oraz fragment kodu, który ma zostać uruchomiony poprzez to zdarzenie (funkcja checkGuess()). Nazwę funkcji piszemy bez cudzysłowia. {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

+ +

Zapisz i odśwież swój kod. Powinien już prawie w pełni działać. Pozostała jeszcze jedna kwestia: gdy odgadniesz właściwą odpowiedź, lub wykorzystasz wszystkie próby odpowiedzi, gra zostanie przerwana, ponieważ jak dotąd nie zdefiniowaliśmy funkcji setGameOver(), która ma zostać wywołana w przypadku zakończenia gry. Dodajmy zatem brakującą część kodu, aby nasza gra zyskała wszystkie funkcjonalności.

+ +

Finishing the game functionality

+ +

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

+ +
function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}
+ + + +

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

+ +
function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var i = 0 ; i < resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}
+ +

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

+ + + +

At this point you should have a fully working (simple) game — congratulations!

+ +

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

+ +

Loops

+ +

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

+ +

To start with, go to your browser developer tools JavaScript console again, and enter the following:

+ +
for (var i = 1 ; i < 21 ; i++) { console.log(i) }
+ +

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

+ +
    +
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. +
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. +
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. +
+ +

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

+ +
var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i < resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}
+ +

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

+ +

A small discussion on objects

+ +

Let's add one more final improvement before we get to this discussion. Add the following line just below the var resetButton; line near the top of your JavaScript, then save your file:

+ +
guessField.focus();
+ +

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

+ +

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

+ +

In this particular case, we first created a guessField variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:

+ +
var guessField = document.querySelector('.guessField');
+ +

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

+ +

Because guessField now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

+ +
guessField.focus();
+ +

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses variable contains a reference to a {{htmlelement("p")}} element, and guessCount contains a number.

+ +

Playing with browser objects

+ +

Let's play with some browser objects a bit.

+ +
    +
  1. First of all, open up your program in a browser.
    2. +
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. +
  3. Type in guessField and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. +
  4. Now type in the following: + 
    guessField.value = 'Hello';
    + The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. +
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.
    6. +
  6. Now try entering the following line: + 
    guesses.value
    + The browser will return undefined, because paragraphs don't have the value property.
    7. +
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: + 
    guesses.textContent = 'Where is my paragraph?';
    +
    8. +
  8. Now for some fun stuff. Try entering the below lines, one by one: + 
    guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';
    + Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. +
+ +

Finished for now...

+ +

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/pl/learn/javascript/first_steps/index.html b/files/pl/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..ab90523dce --- /dev/null +++ b/files/pl/learn/javascript/first_steps/index.html @@ -0,0 +1,61 @@ +--- +title: Pierwsze kroki w Javascript +slug: Learn/JavaScript/Pierwsze_kroki +tags: + - Artykuły + - Liczby + - Moduły + - Operatory + - Początkujący + - Przewodnik + - Pętle + - Zmienne +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

W pierwszym module, przed rozpoczęciem praktycznego pisania kodu w JavaScript, odpowiemy sobie na kilka fundamentalnych pytań takich jak: "czym jest JavaScript?", "czym się charakteryzuje?" oraz "co potrafi?". Następnie omówimy kilka kluczowych kwestii - zmienne, ciągi znaków, liczby oraz pętle w JavaScript.

+ +

Wymagania

+ +

Przed rozpoczęciem nauki tego modułu nie musisz posiadać żadnej wiedzy o JavaScript, ale powinieneś już znać podstawowe zagadnienia związane z HTML-em oraz CSS-em. Doradzamy Ci, abyś ukończył moduły przedstawione poniżej:

+ + + +
+

Informacja: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu na którym nie masz możliwości tworzenia własnych plików, możesz wypróbować przedstawione przykłady w programach online, takich jak:  JSBin lub Thimble.

+
+ +

Przewodnik

+ +
+
Czym jest JavaScript?
+
Witamy w MDN-owym kursie JavaScript dla początkujących! W tym artykule spojrzymy na JavaScript jeszcze nieco ogólne i odpowiemy sobie na podstawowe pytania:  "co to jest?" oraz "co robi?". To ważne, by znać cele stosowania tego języka.
+
Pierwsze spojrzenie na JavaScript
+
Najpierw nauczysz się teorii JavaScript, oraz tego, co możesz zrobić za jego pomocą. Następnie przejdziesz przez instruktarz oparty o podstawowe cechy JavaScript, który będzie miał formę praktyczną - napiszesz prostą grę - "Zgadnij liczbę". Proces pisania pokażemy Ci krok po kroku.
+
Coś poszło nie tak? Rozwiązywanie problemów w JavaScript
+
Podczas pisania gry "zgadnij liczbę" z poprzedniego artykułu możesz natrafić na trudności, które spowodują problemy z jej poprawnym działaniem. Spokojnie - ten artykuł uchroni Cię przed wyrywaniem sobie włosów podczas sprawdzania swojego kodu. Pokażemy Ci kilka prostych sposóbów wykrywania i eliminowania błędów w programie napisanym w Javascript.
+
Przechowywanie informacji, których potrzebujesz — Zmienne
+
Po przeczytaniu poprzednich artykułów powinieneś wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, oraz jak możesz używać go wraz z innymi internetowymi technologiami. Ten artykuł poprowadzi Cię przez podstawowe "bloki", którymi będziesz posługiwać się podczas pisania programu w Javascript - zmienne.
+
Podstawy działań w JavaScript — liczby i operatory
+
W tym miesjcu kursu porozmawiamy o działaniach w JavaScript - dowiesz się jak możesz łączyć operatory oraz przeczytasz o innych cechach języka, aby poprawnie korzystać z liczb.
+
Przechowywanie tekstu — ciągi znaków w JavaScript
+
Następnie skupimy swoją uwagę na string-ach - tak nazywają się ciągi tekstu w programowaniu. W tym artykule spojrzymy na najważniejsze rzeczy, które potrzebujesz wiedzieć o ciągach znaków w JavaScript. Są nimi: tworzenie "string-ów", używanie cudzysłowia, oraz łączenie ze sobą ciągów znaków.
+
Użyteczne metody w string-ach
+
Po zaznajomieniu się z podstawami string-ów czas podnieść poprzeczkę. Zaczniemy mysleć o pomocnych operacjach, które możemy wykonać na ciągach znaków poprzez wbudowane funkcje, takie jak: obliczanie długości ciągu znaków, łączenie i rozdzielanie, zastępowanie jednego znaku innym i wiele więcej.
+
Pętle
+
W ostatnim artykule tego modułu przyjrzymy się pętlom - następnym sposobie przechowywania informacji w pojedynczej zmiennej. Dowiesz się tutaj dlaczego są one ważne, odkryjesz jak je stworzyć, dodać i usunąć z nich dane. 
+
+ +

Podsumowanie

+ +

Poniższe podsumowanie sprawdzi Twoje rozumienie podstaw języka Javascript z powyższego przewodnika.

+ +
+
Generator niemądrych opowieści
+
W tej części zastosujesz zdobytą wiedzę, zebraną w powyższych artykułach, do stworzenia aplikacji - "Generatora niemądrych opowieści". Baw się dobrze!
+
diff --git a/files/pl/learn/javascript/first_steps/math/index.html b/files/pl/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..3e5563d0da --- /dev/null +++ b/files/pl/learn/javascript/first_steps/math/index.html @@ -0,0 +1,455 @@ +--- +title: Basic math in JavaScript — numbers and operators +slug: Learn/JavaScript/Pierwsze_kroki/Math +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+ +

At this point in the course we discuss math in JavaScript — how we can use {{Glossary("Operator","operators")}} and other features to successfully manipulate numbers to do our bidding.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain familiarity with the basics of math in JavaScript.
+ +

Wszyscy kochają matematykę

+ +

Ok, może nie. Niektórzy  kochają matematykę, inni nienawidzą  od kiedy musieli nauczyć się tabliczki mnożenia i dzielenia przez liczby wielocyfrowe w szkole podstawowej, a częśc jest gdzieś pośrodku. Ale nikt z nas nie może zaprzeczyć, temu że matematyka jest fundamentalną częścią życia, bez której nie zajdzie się daleko. Jest to szczególnie prawdziwe kiedy uczymy się programowania w JavaScript (lub jakimkolwiek innym języku) -   tak wiele z tego co robimy polega na przetwarzaniu danych liczbowych, obliczaniu nowych wartości i tak dalej, że nie będziesz zaskoczony, że JavaScript posiada w pełni funkcjonalny zestaw funkcji matematycznych.

+ +

Artykuł omawia podstawy, które musisz znać na ten moment.

+ +

Typy liczb

+ +

W programowaniu, nawet na pozór łatwy system dziesiętny, który tak dobrze znamy jest bardziej skąplikowany niż mógłbyś sądzić. Używamy różnych terminów do opisania różnych typów liczb dziesiętnych, dla przykładu: 

+ + + +

We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like:

+ + + +

Before you start to get worried about your brain melting, stop right there! For a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever.

+ +

The second bit of good news is that unlike some other programming languages, JavaScript only has one data type for numbers, both integers and decimals — you guessed it, {{jsxref("Number")}}. This means that whatever type of numbers you are dealing with in JavaScript, you handle them in exactly the same way.

+ +
+

Note: Actually, JavaScript has a second number type, {{Glossary("BigInt")}}, used for very, very large integers. But for the purposes of this course, we'll just worry about Number values.

+
+ +

It's all numbers to me

+ +

Let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your developer tools JavaScript console.

+ +
    +
  1. First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: + 
    let myInt = 5;
+let myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
    3. +
  3. Now let's check that both our original variables are of the same datatype. There is an operator called {{jsxref("Operators/typeof", "typeof")}} in JavaScript that does this. Enter the below two lines as shown: + 
    typeof myInt;
+typeof myFloat;
    + You should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!
    4. +
+ +

Useful Number methods

+ +

The Number object, an instance of which represents all standard numbers you'll use in your JavaScript, has a number of useful methods available on it for you to manipulate numbers. We don't cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you've read through this module a couple of times it is worth going to the object reference pages and learning more about what's available.

+ +

For example, to round your number to a fixed number of decimal places, use the toFixed() method. Type the following lines into your browser's console:

+ +
let lotsOfDecimal = 1.766584958675746364;
+lotsOfDecimal;
+let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
+twoDecimalPlaces;
+ +

Converting to number data types

+ +

Sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered into a form input, and the input type is text. There is a way to solve this problem — passing the string value into the Number() constructor to return a number version of the same value.

+ +

For example, try typing these lines into your console:

+ +
let myNumber = '74';
+myNumber + 3;
+ +

You end up with the result 743, not 77, because myNumber is actually defined as a string. You can test this by typing in the following:

+ +
typeof myNumber;
+ +

To fix the calculation, you can do this:

+ +
Number(myNumber) + 3;
+ +

Arithmetic operators

+ +

Arithmetic operators are the basic operators that we use to do sums in JavaScript:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExample
+AdditionAdds two numbers together.6 + 9
-SubtractionSubtracts the right number from the left.20 - 15
*MultiplicationMultiplies two numbers together.3 * 7
/DivisionDivides the left number by the right.10 / 5
%Remainder (sometimes called modulo) +

Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.

+ 		+

8 % 3 (returns 2, as three goes into 8 twice, leaving 2 left over).

+
**ExponentRaises a base number to the exponent power, that is, the base number multiplied by itself, exponent times. It was first Introduced in EcmaScript 2016.5 ** 2 (returns 25, which is the same as 5 * 5).
+ +
+

Note: You'll sometimes see numbers involved in arithmetic referred to as {{Glossary("Operand", "operands")}}.

+
+ +
+

Note: You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in Math.pow(7, 3), 7 is the base and 3 is the exponent, so the result of the expression is 343. Math.pow(7, 3) is equivalent to 7**3.

+
+ +

We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your developer tools JavaScript console to familiarize yourself with the syntax.

+ +
    +
  1. First try entering some simple examples of your own, such as + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example: + 
    let num1 = 10;
+let num2 = 50;
+9 * num1;
+num1 ** 3;
+num2 / num1;
    +
    3. +
  3. Last for this section, try entering some more complex expressions, such as: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

Some of this last set of calculations might not give you quite the result you were expecting; the  section below might well give the answer as to why.

+ +

Operator precedence

+ +

Let's look at the last example from above, assuming that num2 holds the value 50 and num1 holds the value 10 (as originally stated above):

+ +
num2 + num1 / 8 + 2;
+ +

As a human being, you may read this as "50 plus 10 equals 60", then "8 plus 2 equals 10", and finally "60 divided by 10 equals 6".

+ +

But the browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25".

+ +

This is because of operator precedence — some operators are applied before others when calculating the result of a calculation (referred to as an expression, in programming).  Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right).

+ +

If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:

+ +
(num2 + num1) / (8 + 2);
+ +

Try it and see.

+ +
+

Note: A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

+
+ +

Increment and decrement operators

+ +

Sometimes you'll want to repeatedly add or subtract one to or from a numeric variable value. This can be conveniently done using the increment (++) and decrement (--) operators. We used ++ in our "Guess the number" game back in our first splash into JavaScript article, when we added 1 to our guessCount variable to keep track of how many guesses the user has left after each turn.

+ +
guessCount++;
+ +
+

Note: These operators are most commonly used in loops, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.

+
+ +

Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:

+ +
3++;
+ +

So, you can only increment an existing variable. Try this:

+ +
let num1 = 4;
+num1++;
+ +

Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, then increments the variable. You can see that it's been incremented if you return the variable value again:

+ +
num1;
+ +

The same is true of -- : try the following

+ +
let num2 = 6;
+num2--;
+num2;
+ +
+

Note: You can make the browser do it the other way round — increment/decrement the variable then return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use ++num1 and --num2.

+
+ +

Assignment operators

+ +

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, =, loads of times — it simply assigns the variable on the left the value stated on the right:

+ +
let x = 3; // x contains the value 3
+let y = 4; // y contains the value 4
+x = y; // x now contains the same value y contains, 4
+ +

But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExampleShortcut for
+=Addition assignmentAdds the value on the right to the variable value on the left, then returns the new variable valuex += 4;x = x + 4;
-=Subtraction assignmentSubtracts the value on the right from the variable value on the left, and returns the new variable valuex -= 3;x = x - 3;
*=Multiplication assignmentMultiplies the variable value on the left by the value on the right, and returns the new variable valuex *= 3;x = x * 3;
/=Division assignmentDivides the variable value on the left by the value on the right, and returns the new variable valuex /= 5;x = x / 5;
+ +

Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.

+ +

Note that you can quite happily use other variables on the right hand side of each expression, for example:

+ +
let x = 3; // x contains the value 3
+let y = 4; // y contains the value 4
+x *= y; // x now contains the value 12
+ +
+

Note: There are lots of other assignment operators available, but these are the basic ones you should learn now.

+
+ +

Active learning: sizing a canvas box

+ +

In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}

+ +

Open in new window

+ +

In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:

+ + + +

Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.

+ +

Comparison operators

+ +

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNamePurposeExample
===Strict equalityTests whether the left and right values are identical to one another5 === 2 + 4
!==Strict-non-equalityTests whether the left and right values are not identical to one another5 !== 2 + 3
<Less thanTests whether the left value is smaller than the right one.10 < 6
>Greater thanTests whether the left value is greater than the right one.10 > 20
<=Less than or equal toTests whether the left value is smaller than or equal to the right one.3 <= 2
>=Greater than or equal toTests whether the left value is greater than or equal to the right one.5 >= 4
+ +
+

Note: You may see some people using == and != in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from ===/!==. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.

+
+ +

If you try entering some of these values in a console, you'll see that they all return true/false values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:

+ + + +

We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:

+ +
<button>Start machine</button>
+<p>The machine is stopped.</p>
+
+ +
const btn = document.querySelector('button');
+const txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Open in new window

+ +

You can see the equality operator being used just inside the updateBtn() function. In this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.

+ +
+

Note: Such a control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.

+
+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Math.

+ +

Summary

+ +

In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.

+ +

In the next article, we'll explore text and how JavaScript allows us to manipulate it.

+ +
+

Note: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our Numbers and dates and Expressions and operators articles.

+
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/pl/learn/javascript/first_steps/variables/index.html b/files/pl/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..d1b55aea20 --- /dev/null +++ b/files/pl/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,453 @@ +--- +title: Przechowywanie potrzebnych informacji — Zmienne +slug: Learn/JavaScript/Pierwsze_kroki/Zmienne +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Po przeczytaniu kilku ostatnich artykułów, powinieneś juz wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, jak używać go razem z innymi technologiami webowymi, oraz jak jego główne cechy wyglądają z wysokiego poziomu. W tym artykule, przejdziemy do fundamentów, poznamy jak wygląda pracowa z najbardziej podstawowym konceptem JavaScript - Zmiennymi. 

+ +
+ + + + + + + + + + + + +
Wymagania:Podstawowa znajomość komputera, podstawowe rozumienie HTML i CSS, oraz rozumienie czym jest JavaScript.
Cel:Zapoznać się z podstawami dotyczącymi zmiennych w JavaScript.
+ +

Potrzebne Narzędzia

+ +

Podczas tego artykułu, będziesz wpisywać linie kodu aby sprawdzić swoje rozumienie zawartości. Jeśli używasz przeglądarki desktopowej, najlepszym miejscem na wpisanie próbnego kodu jest konsola JavaScript Twojej przeglądarki (zobacz: What are browser developer tools aby zasięgnąć szczegółowych informacji, jak otworzyć to narzędzie).

+ +

Niemniej jednak, zapewniliśmy również prostą konsolę JavaScript wbudowaną w poniższą stronę, abyś mógł wpisywać kod w przypadku gdy nie używasz przeglądarki z łatwym dostępem do konsoli JavaScript lub konsola wewnątrz strony jest dla Ciebie wygodniejsza.

+ +

Czym jest zmienna?

+ +

Zmienna jest to kontener na wartość, jak liczba, którą możemy użyć w sumowaniu lub łańcuch znaków, który możemy wykorzystać jako część zdania. Ale jedną rzeczą, która wyróżnia zmienne jest to, że ich wartość może ulec zmianie. Popatrzmy na prosty przykład:

+ +
<button>Press me</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

W tym przykładzie, naciśnięcie przycisku uruchamia kilka linijek kodu. Pierwsza linia powoduje pojawienie się okna na ekranie, które pyta o imię, a następnie przechowuje wartość w zmiennej. Druga linia wyświetla wiadomość powitalną zawierajaca imię pobrane ze zmiennej.

+ +

Aby zrozumieć dlaczego jest to tak przydatne, pomyślmy o tym jak stworzylibyśmy ten przykład, nie używając zmiennej. W efekcie wygladałoby to mniej więcej tak:

+ +
var name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... i tak dalej ...
+ +

Możesz nie rozumieć w pełni składni której tu używamy (jeszcze!), ale powinieneś być w stanie zrozumieć o co chodzi - jeśli nie moglibyśmy używać zmiennych, musielibyśmy implementować gigantyczny blok kodu, który sprawdzałby jakie było wpisane imię, a następnie wyświetlał odpowiednią wiadomość dla tego imienia. Oczywiście jest to całkowicie nieefektywne (kod jest znacznie większy, nawet dla tylko pięciu możliwych wyborów) i po prostu nie działałoby - nie mógłbyś przecież przechowywać wszystkich możliwych wyborów.

+ +

Zmienne po prostu mają sens i jak tylko nauczysz się więcej o JavaScript, używanie ich stanie się dla Ciebie czyms naturalnym.

+ +

Kolejna rzecz, która wyróżnia zmienne jest to, że mogą one zawierać prawie wszystko - nie tylko łańcuchy znaków i liczby. Zmienne moga również zawierać skomplikowane dane, a nawet całe funkcje do robienia niesamowitych rzeczy. Nauczysz sie o tym więcej, w ciągu kursu.  

+ +
+

Uwaga: Mówimy że zmienne zawieraja wartości. Jest to ważne rozróżnienie. Zmienne nie są wartościami same w sobie; są kontenerami na wartości. Możesz je sobie wyobrazić jako kartonowe pudełka, w których możesz przechowywać rzeczy.

+
+ +

+ +

Deklarowanie zmiennej

+ +

W celu użycia zmiennej, na początku musisz ją stworzyć - a dokładniej nazywa się to deklarowaniem zmiennej. Aby to zrobić, wpisujemy słowo kluczowe  var albo let a następnie nazwę, którą chcesz żeby miała Twoja zmienna:

+ +
let myName;
+let myAge;
+ +

Tutaj tworzymy dwie zmienne, które nazywają się myName i myAge. Spróbuj wpisać teraz te linie w konsoli Twojej przeglądarki lub w poniższej konsoli (możesz otworzyć otworzyć tą konsolę w oddzielnej karcie lub oknie jeśli wolisz). Nastepnie spróbuj stworzyć zmienną (lub dwie) z wybranymi przez Ciebie nazwami.

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Uwaga: W JavaScript, wszystkie instrukcje kodu powinny być zakończone średnikiem (;) — Twój kod może działać poprawnie dla pojedynczych linii, ale prawdopodobnie nie będzie, jeśli napiszesz wiele linii kodu razem. Spróbuj wejść w nawyk wpisywania go.

+
+ +

Możesz przetestować czy te wartości istnieją teraz w środowisku wykonawczym wpisując po prostu nazwę zmiennej, np.

+ +
myName;
+myAge;
+ +

Obecnie nie mają one wartości; są pustymi kontenerami. Kiedy wpisujesz nazwy zmiennych, powinieneś otrzymać zwróconą wartość undefined. Natomiast jesli one nie istnieją, dostaniesz informację o błedzie — spróbuj wpisać:

+ +
scoobyDoo;
+ +
+

Uwaga: Nie pomyl zmiennej, która istnieje, ale nie ma zdefiniowanej wartości, ze zmienną, która wcale nie istnieje — to dwie zupełnie inne rzeczy. Wracając do porównania z pudełkami, które widziałeś wyżej — jeśli zmienna nie istnieje, to znaczy, że nie mamy żadnego kartonowego pudełka, do którego moglibyśmy wrzucić zawartość.
+ Natomiast zmienna bez zdefiniowanej zawartości to po prostu puste pudełko. 

+
+ +

Inicjalizacja zmiennej

+ +

Kiedy już zadeklarujesz zmienną, możesz ją zainicjować nadając wartość. Robi się to, wpisując nazwę zmiennej, a następnie znak równości (=), poprzedzajacy wartość, którą chcesz jej nadać. Na przykład:

+ +
myName = 'Chris';
+myAge = 37;
+ +

Spróbuj teraz wrócić do konsoli i wpisać te linie. Powinieneś zobaczyć wartość, którą przypisałeś do zmiennej zwróconą w konsoli aby potwierdzić to w obu przypadkach. Znowu, możesz zwrócić wartości zmiennych po prostu wpisujac ich nazwy w konsoli — spróbuj ponownie:

+ +
myName;
+myAge;
+ +

Możesz zadeklarować i zainicjować zmienną w tym samym czasie, tak jak tu:

+ +
let myDog = 'Rover';
+ +

Tak prawdopodobnie będziesz robił najcześciej, jako że jest to szybsze niż wykonywanie dwóch czynności w dwóch oddzielnych linijkach.

+ +

Róznice między var i let

+ +

Możesz się teraz zastanawiać "Po co nam dwa słowa kluczowe do deklarowania zmiennych? Po co nam var i let?".

+ +

Powód jest historyczny. Kiedy JavaScript został stworzony, mogliśmy korzystać tylko z var. Takie deklarowanie zmiennych działa, ale niesie ze sobą kilka niechcianych błędów.  Stworzono więc let, który jest obecnym standardem w języku JavaScript (to właśnie z niego powinniśmy korzystać). Główna róznica polega na tym, że let naprawia błędy, które mogliśmy napotkać podczas korzystania z var.

+ +

A couple of simple differences are explained below. We won't go into all the differences now, but you'll start to discover them as you learn more about JavaScript (if you really want to read about them now, feel free to check out our let reference page).

+ +

For a start, if you write a multiline JavaScript program that declares and initializes a variable, you can actually declare a variable with var after you initialize it and it will still work. For example:

+ +
myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;
+ +
+

Note: This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.

+
+ +

This works because of hoisting — read var hoisting for more detail on the subject.

+ +

Hoisting no longer works with let. If we changed var to let in the above example, it would fail with an error. This is a good thing — declaring a variable after you initialize it makes for confusing, harder to understand code.

+ +

Secondly, when you use var, you can declare the same variable as many times as you like, but with let you can't. The following would work:

+ +
var myName = 'Chris';
+var myName = 'Bob';
+ +

But the following would throw an error on the second line:

+ +
let myName = 'Chris';
+let myName = 'Bob';
+ +

You'd have to do this instead:

+ +
let myName = 'Chris';
+myName = 'Bob';
+ +

Again, this is a sensible language decision. There is no reason to redeclare variables — it just makes things more confusing.

+ +

For these reasons and more, we recommend that you use let as much as possible in your code, rather than var. There is no reason to use var, unless you need to support old versions of Internet Explorer with your code (it doesn't support let until version 11; the modern Windows Edge browser supports let just fine).

+ +
+

Note: We are currently in the process of updating the course to use let rather than var. Bear with us!

+
+ +

Updating a variable

+ +

Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:

+ +
myName = 'Bob';
+myAge = 40;
+ +

An aside on variable naming rules

+ +

You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.

+ + + +
+

Note: You can find a fairly complete list of reserved keywords to avoid at Lexical grammar — keywords.

+
+ +

Good name examples:

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Bad name examples:

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Error-prone name examples:

+ +
var
+Document
+
+ +

Try creating a few more variables now, with the above guidance in mind.

+ +

Variable types

+ +

There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.

+ +

So far we've looked at the first two, but there are others.

+ +

Numbers

+ +

You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:

+ +
let myAge = 17;
+ +

Strings

+ +

Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.

+ +
let dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booleans

+ +

Booleans are true/false values — they can have two values, true or false. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:

+ +
let iAmAlive = true;
+ +

Whereas in reality it would be used more like this:

+ +
let test = 6 < 3;
+ +

This is using the "less than" operator (<) to test whether 6 is less than 3. As you might expect, it will return false, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.

+ +

Arrays

+ +

An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:

+ +
let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];
+ +

Once these arrays are defined, you can access each value by their location within the array. Try these lines:

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.

+ +

You'll learn a lot more about arrays in a future article.

+ +

Objects

+ +

In programming, an object is a structure of code that models a real-life object. You can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

+ +

Try entering the following line into your console:

+ +
let dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

To retrieve the information stored in the object, you can use the following syntax:

+ +
dog.name
+ +

We won't be looking at objects any more for now — you can learn more about those in a future module.

+ +

Dynamic typing

+ +

JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (numbers, strings, arrays, etc).

+ +

For example, if you declare a variable and give it a value enclosed in quotes, the browser will treat the variable as a string:

+ +
let myString = 'Hello';
+ +

It will still be a string, even if it contains numbers, so be careful:

+ +
let myNumber = '500'; // oops, this is still a string
+typeof myNumber;
+myNumber = 500; // much better — now this is a number
+typeof myNumber;
+ +

Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called typeof — this returns the data type of the variable you pass into it. The first time it is called, it should return string, as at that point the myNumber variable contains a string, '500'. Have a look and see what it returns the second time you call it.

+ +

Constants in JavaScript

+ +

Many programming languages have the concept of a constant — a value that once declared can never be changed. There are many reasons why you'd want to do this, from security (if a third party script changed such values it could cause problems) to debugging and code comprehension (it is harder to accidently change values that shouldn't be changed and mess things up).

+ +

In the early days of JavaScript, constants didn't exist. In modern JavaScript, we have the keyword const, which lets us store values that can never be changed:

+ +
const daysInWeek = 7;
+const hoursInDay = 24;
+ +

const works in exactly the same way as let, except that you can't give a const a new value. In the following example, the second line would throw an error:

+ +
const daysInWeek = 7;
+daysInWeek = 8;
+ +

Summary

+ +

By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/pl/learn/javascript/first_steps/what_is_javascript/index.html b/files/pl/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..3898eb049c --- /dev/null +++ b/files/pl/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,342 @@ +--- +title: Co to jest JavaScript? +slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

Witamy w MDN na kursie JavaScript dla początkujących! W tym pierwszym artykule przyjrzymy się JavaScript z pewnej odległości, odpowiadając na pytania w stylu "co to jest?" i "co on robi?" oraz upewnimy się, że rozumiesz cel, któremu służy JavaScript.

+ + + + + + + + + + + + +
Wymagania wstępne:Podstawowa znajomość komputera, podstawowa znajomość HTML i CSS.
Cel:Zapoznanie z istotą JavaScript, co on robi i jak jest dopasowywany do strony internetowej.
+ +

Definicja ogólna

+ +

JavaScript to język programowania, który umożliwia wdrożenie na stronie internetowej skomplikowanych elementów, dzięki którym strona ta może nie tylko wyświetlać statyczne informacje, ale również obsługiwać zmianę treść odpowiednio do sytuacji, wyświetlać interaktywne mapy i animacje grafiki 2D/3D , wyświetlać video itd. Jest to trzecia warstwa standardowych technologii internetowych, z których dwie (HTML i CSS) omówiliśmy w innych częściach "Strefy nauki".

+ +

+ + + +

Te trzy warstwy układają się jedna na drugiej. Jako przykład weźmy prostą etykietę tekstową. Możemy ją oznaczyć używajac kodu HTML, aby nadać jej strukturę:

+ +
<p>Player 1: Chris</p>
+ +

+ +

Następnie możemy dodać kod CSS, aby nadać ładny wygląd:

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}
+ +

+ +

Na końcu możemy dodać kod Javascript, aby zaimplementować dynamiczne zachowanie:

+ +
var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}

+ +

Kliknij na przycisk (etykietę tekstową), aby zobaczyć co się dzieje (na GitHub mozesz znależć kod źróðłowy i wersję demo — zobacz kod źródłowy lub przykład na żywo)!

+ +

JavaScript pozwala osiągać o wiele bardziej zaawansowane efekty - sprawdź poniżej jego możliwości.

+ +

Co można zrobić?

+ +

Rdzeń języka JavaScript składa się z kilku funkcjonalności, które umożliwiają wykonanie rzeczy, takich jak te: 

+ + + +

Jeszcze bardziej ekscytująca jest możliwość stosowania tzw. interfejsów programowania aplikacji (ang. Application Programming Interfaces - API), działających na szczycie rdzenia języka JavaScript.

+ +

Interfejsy API są gotowymi zestawami bloków kodu, które umożliwiają programistom implementować programy, które w przeciwnym razie byłyby bardzo trudne do napisania przez programistę a nawet często niemożliwe do napisania przez niego. Spełniają one w programowaniu tą samą rolę, co gotowe segmenty mebli przy umeblowaniu domu — o wiele łatwiej jest wykorzystać gotowe panele i je poskręcać, niż samemu opracować projekt mebli, znaleźć drewno, pociąć go na deski, wysuszyć, przyciąć je na elementy swoich mebli i w końcu je samemu zmontować.

+ +

Interfejsy API dzielą się ogólnie na dwie kategorie:

+ +

+ +

Interfesy API przeglądarek internetowych, które są wbudowane w przeglądarki. Służą do udostępniania danych z komputera, ale też mogą wykonywać bardziej zaawansowane rzeczy. Na przykład:

+ + + +
+

Uwaga: wiele z powyższych przykładów nie będzie działać w starszych przeglądarkach - podczas eksperymentowania warto używać najnowszych wersji przeglądarek takich jak Firefox, Chrome, Edge czy Opera. Powinieneś także brać pod uwagę konieczność testowania swoich rozwiązań w wielu przegladarkach. Kod, który działa dobrze w Chrome nie zawsze będzie działał w Edge. (sprawdź: Testowanie wieloprzegladarkowe).

+
+ +

Zewnętrzne interfejsy API nie są wbudowane w przeglądarki i trzeba samemu pobrać ich kod i informacje o zastosowaniu. Na przykład:

+ + + +
+

Uwaga:  Interfesy API są zaawansowane i nie będziemy ich tu opisywać, możesz znaleźć o nich więcej informacji w module Interfejsy API działające po stronie klienta.

+
+ +

W Internecie dostępnych jest bardzo dużo bibliotek API działających z przegladarkami internetowymi, ale jest to "temat na później". Nie zbudujesz następnego Facebooka czy Google Maps po 24 godzinach nauki JavaScriptu. Jest wiele zagadnień podstawowych, które musisz najpierw opanować. Ale przecież po to tu jesteś!

+ +

Co robi JavaScript na stronie internetowej?

+ +

Tutaj zaczniemy faktycznie przyglądać się pewnemu kodowi i robiąc to, zbadamy, co takiego dzieje się po uruchomieniu tego kodu na stronie internetowej.

+ +

Przypomnijmy sobie, co dzieje się podczas ładowania strony internetowej w przeglądarce (pierwsz raz omówiliśmy to w artykule Jak działa CSS). Po załadowaniu strony internetowej (dokumentu HTML) do przeglądarki, zostaje uruchomioney jej kod (HTML, CSS i JavaScript) w środowisku wykonawczym tworzonym przez przeglądarkę (zakładka przegladarki). Jest to podobne do fabryki, która przyjmuje surowe materiały (kod) a wypuszcza gotowy produkt (stronę internetową).

+ +

+ +

JavaScript jest wykonywany przez silnik JavaScriptu w przeglądarce, po tym jak HTML i CSS zostaną skompletowane w stronę internetową. To zapewnia to, że struktura i style strony są już na miejscu w momencie gdy JavaScript zaczyna pracę.

+ +

Jest to przydatne, jako że popularnym zastosowaniem JavaScriptu jest dynamiczne modyfikowanie HTMLa i CSSa aby edytować interfejs poprzez Document Object Model API. Jeżeli JavaScript załadowałby się i próbował wykonywać się przed tym jak HTML i CSS zostały załadowane, wtedy wystąpiłyby błędy.

+ +

Bezpieczeństwo przeglądarki

+ +

Każda karta przeglądarki jest swoim własnym kontenerem dla kodu, który w niej się wykonuje (te kontenery są nazywane technicznie "środowiskami wykonywania" (ang. "execution environments") - oznacza to, ze w większości przypadków kod w każdej karcie jest wykonywany oddzielnie i kod z jednej z kart nie jest w stanie bezpośrednio wpłynąć na ten wykonujący się w innej karcie. Jest to przykład dobrego środka bezpieczeństwa - jeżeli by tak nie było, wtedy możliwe stałoby się pisanie kodu, który wykradałby dane z innych witryn oraz  byłby w stanie wykonywać inne, podobnie złe rzeczy.

+ +
+

Notatka:  Istnieją sposoby na bezpieczne wysyłanie kodu i danych pomiędzy różnymi stronami/kartami. Wykraczają one jednak poziomem poza ten kurs i nie zostaną one tu omówione.

+
+ +

Kolejność wykonywania kodu JavaScript

+ +

Kiedy przeglądarka napotyka blok kodu JS, wykonuje go po kolei, od góry do dołu. Oznacza to, że musisz być ostrożny, w jakiej kolejności umieszczasz instrukcje. Aby ukazać to zjawisko, wróćmy do bloku kodu z pierwszego przykładu:

+ +
var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Na początku wybieramy pierwszy paragraf (linia 1), dołączamy do niego event listener (linia 3), aby kiedy zostanie on klinięty, blok  updateName() (linie 5- 8) został uruchomiony. Blok  updateName() (ten typ kodu możliwego do użycia ponownie jest nazywany funkcją) pyta użytkownika o nowe imię, po czym wstawia to podane imię do paragrafu, aby uaktualnić widok.

+ +

Jeżeli zamieniłbyś kolejność dwóch pierwszych linii kodu, przestałoby to działać - zamiast tego pojawiłby się błąd w konsoli przeglądarki - TypeError: para is undefined. Oznacza on, że ten obiekt jeszcze nie istnieje, a więc nie możemy dodać do niego event listenera.

+ +
+

Notatka: Jest to bardzo popularny błąd - musisz uważać na to, że obiekty do których istnieją odwołania istnieją przed tym jak cokolwiek z nimi zrobisz.

+
+ +

Kod interpretowany kontra kompilowany

+ +

Mogłeś usłyszeć pojęcie kodu interpretowanego i kompilowanego. JavaScript jest językiem interpretowanym - kod jest wykonywany od góry do dołu i wynik jest zwracany natychmiastowo. Nie musisz transformować kodu w jakąś inną postać przed tym jak przeglądarka go wykona.

+ +

Języki kompilowane są natomiast transformowane (kompilowane) do innej formy przed ich wykonaniem. Dla przykładu C/C++ jest kompilowane do kodu assemblera, który jest następnie wykonywany przez komputer.

+ +

Oba te podejścia mają swoje wady i zalety, które nie zostaną tutaj omówione.

+ +

Kod server-side kontra client-side

+ +

Mogłeś także słyszeć pojęcia server-side i client-side, szczególnie w odniesieniu do tworzenia stron internetowych. Kod client-side jest kodem, który jest wykonywany na komputerze użytkownika - kiedy strona jest wyświetlana, kod client-side jest pobierany, następnie uruchamiany i wyświetlany przez przeglądarkę. W tym module JavaScript mówimy jednoznacznie o client-side JavaScript.

+ +

Kod server-side jest natomiast wykonywany na serwerze, po czym wynik wykonania jest pobierany i wyświetlany przez przeglądarkę. Popularnymi przykładami języków server-side są PHP, Python, Ruby czy ASP.NET. I JavaScript! JavaScript może być także użyty jako język server-side, na przykład w popularnym środowisku Node.js - możesz więcej dowiedzieć się o tym w naszym poradniku Dynamic Websites – Server-side programming

+ +

Słowo dynamiczny jest użyte zarówno do opisania zarówno client-side JavaScript i języki server-side — odnosi się ono do możliwości uaktualnienia widoku strony/aplikacji, aby możliwe było pokazanie różnych rzeczy w różnych okolicznościach; generując nową zawartość w zależności od potrzeb. Kod server-side  dynamicznie generuje nową zawartość na serwerze, na przykład stworzenie nowej tabeli HTML, kiedy client-side JavaScript dynamicznie generuje nową zawartość, na przykład tworząc nową tabelę HTML, wstawiając dane pobrane z serwera, następnie pokazując użytkownikowi tabelę na stronie. Znaczenie słowa jest lekko inne, ale podobne,  w dwóch kontekstach użycia i te dwa podejścia (server-side i client-side) zwykle współpracują ramię w ramię.

+ +

Strona bez dynamicznie uaktualnianej zawartości nazywa się statyczną - zawsze pokazuje to samo.

+ +

W jaki sposób dodać JavaScript do twojej strony?

+ +

JavaScript jest dołączany do strony HTML w podobny sposób jak odbywa się to w wypadku CSS. Podczas gdy CSS używa elementów {{htmlelement("link")}} do dołączania zewnętrznych arkuszów i {{htmlelement("style")}} do dołączenia stylów bezpośrednio w dokumencie, JS potrzebuje tylko jednej rzeczy - elementu {{htmlelement("script")}}. Dowiedzmy się, jak to działa.

+ +

Osadzony JavaScript

+ +
    +
  1. Po pierwsze stwórz lokalną kopię naszego przykładowego pliku apply-javascript.html. Zapisz go gdzieś w katalogu.
    2. +
  2. Otwórz plik w twojej przeglądarce i edytorze tekstu. Ujrzysz prostą stronę z przyciskiem, który można kliknąć.
    3. +
  3. Następnie wejdź do edytora i dodaj następujący kod tuż przed końcem </body>: + 
    <script>
+
+  // Kod JavaScript będzie tu umieszczony.
+
+</script>
    +
    4. +
  4. Teraz dodamy trochę kodu w naszym elemencie  {{htmlelement("script")}}, aby strona wykonała coś bardziej interesującego  — dodaj poniższy kod bezpośrednio pod linią "// Kod JavaScript będzie tu umieszczony.": + 
    function stworzParagraf() {
+  var para = document.createElement('p');
+  para.textContent = 'Kliknąłeś przycisk!';
+  document.body.appendChild(para);
+}
+
+var przyciski = document.querySelectorAll('button');
+
+for (var i = 0; i < przyciski.length ; i++) {
+  przyciski[i].addEventListener('click', stworzParagraf);
+}
    +
    5. +
  5. Zapisz plik i odśwież stronę w przeglądarce - teraz gdy klikniesz przycisk, nowy paragraf jest generowany i umieszczany poniżej.
    6. +
+ +
+

Notatka: Jeżeli przykład nie działa, przejdź go znowu krok po kroku, sprawdzając czy zrobiłeś wszystko poprawnie. Czy zapisałeś swoją lokalną wersję początkowego kodu jako plik .html? Czy dodałeś element  {{htmlelement("script")}} tuż przed zamknięciem  </body>? Czy wprowadziłeś kod JavaScript dokładnie tak, jak podane w przykłądzie?

+ +

JavaScript uwzględnia wielkość liter i jest bardzo drobiazgowy, a więc musisz wprowadzić kod dokładnie tak,  jak zostało to pokazane. W innym wypadku może to nie zadziałać.

+
+ +
+

Notatka:  Możesz zobaczyć ten kod także na GitHubie jako apply-javascript-internal.html (zobacz to także na żywo).

+
+ +

Zewnętrzny JavaScript

+ +

Działa to świetnie, ale co by było, gdybyśmy chcieli umieścić nasz kod JavaScript w oddzielnym pliku? Zróbmy to teraz.

+ +
    +
  1. Po pierwsze, stwórz nowy plik w tym samym katalogu, w którym umieściłeś twój plik HTML. Nazwij go script.js  - upewnij się, że ma on rozszerzenie .js, jako że w ten sposób jest rozpoznawany jako JavaScript.
    2. +
  2. Następnie przekopiuj wszystkie skrypty z obecnego {{htmlelement("script")}} i wklej je do pliku .js. Zapisz ten plik. 
    3. +
  3. Teraz zastąp obecny element {{htmlelement("script")}} poniższym kodem: + 
    
+<script src="script.js"></script>
    +
    4. +
  4. Zapisz i odśwież przeglądarkę - powinieneś zobaczyć to samo! Działa to w ten sam sposób, ale teraz mamy kod JavaScript w oddzielnym pliku. Jest to dobra praktyka organizowania kodu i umożliwiania jego ponownego wykorzystania między wieloma plikami HTML. Do tego HTML jest łatwiejszy do czytania bez bloków kodu pomiędzy.
    5. +
+ +

Notatka: Możesz zobaczyć ten kod na GitHubie -  apply-javascript-external.html i script.js (Możesz zobaczyć to także na żywo tu).

+ +

Interpretowanie kodu JavaScript inline

+ +

Czasami napotkasz kawałki prawdziwego kodu JavaScript pomiędzy kodem HTML. Może to wyglądać następująco:

+ +

+function stworzParagraf() {
+  var para = document.createElement('p');
+  para.textContent = 'Kliknąłeś przycisk!';
+  document.body.appendChild(para);
+}
+ +

+<button onclick="createParagraph()">Kliknij mnie!</button>
+ +

Możesz przetestować tę wersję poniżej:

+ +

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}

+ +

Ten przykład ma dokładnie tę samą funkcjonalność jak dwa poprzednie przykłady, za wyjątkiem tego, że element {{htmlelement("button")}} zawiera w sobie handler onclick . Sprawia to, że funkcja zostanie uruchomiona gdy zostanie wcisnięty przycisk.

+ +

Jednakże nie rób tego! Zanieczyszczanie HTMLa poprzez JavaScript jest uważane za złą praktykę. Jest to również nieefektywne - musiałbyś załączać atrybut onclick="stworzParagraf()"  do każdego przycisku, dla którego miałaby zastosowanie funkcja.

+ +

Używanie czystych konstrukcji JavaScript pozwala na wybranie wszystkich przycisków za pomocą jednej instrukcji. Kod, którego użyliśmy do wykonania tego wygląda następująco:

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Może to wyglądać na lekko dłuższe niż atrybut  onclick, ale zadziała to dla wszyskich przycisków, bez znaczenia ile ich jest na stronie i ile z nich zostanie dodane bądź usunięte. Kod JS nie musi być zmieniony.

+ +
+

Notatka:  Spróbuj edytować twoją wersję apply-javascript.html i dodaj kilka innych przycisków. Kiedy przeładujesz stronę, odkryjesz, że wszystkie przyciski tworzą paragraf po kliknięciu. Nieźle, co?

+
+ +

Komentarze

+ +

Tak samo jak w HTML i CSS, możliwe jest pisanie komentarzy w kodzie JavaScript. Zostaną one zignorowane przez przeglądarkę - istnieją tylko po to, aby służyć pomocą tym, którzy współpracują przy tym kodzie (i tobie, kiedy po 6 miesiącach wrócić do kodu i nie będziesz pamiętać, co on robi). Komentarze są bardzo użyteczne i powinieneś używać ich często, szczególnie w dużych aplikacjach. Istniają dwa typy komentarzy:

+ + + +

Przykładowo możemy skomentować nasz ostatni kod JavaScript w ten sposób:

+ +

+// Funkcja: tworzy nowy paragraf i dodaje na koniec <body>.
+
+function stworzParagraf() {
+  var para = document.createElement('p');
+  para.textContent = 'Kliknąłeś przycisk!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Pobierz listę wskaźników na wszystke przyciski na stronie.
+  2. Przejdź po wszystkich przycisków i dodaj każdemu z nich akcję pod klinięcie.
+
+  Kiedy przycisk jest wciśnięty, funkcja stworzParagraf() zostanie wywołana.
+*/
+
+var przyciski = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  przyciski[i].addEventListener('click', stworzParagraf);
+}
+ +

Podsumowanie

+ +

A więc proszę bardzo, oto twój pierwszy krok w kierunku świata JavaScript. Zaczęliśmy właśnie teorię, aby przyzwyczaić cię do używania JavaScript i do tego, co z jego pomocą można zrobić. W czasie trwania kursu między innymi zobaczyłeś kilka przykładów i nauczyłeś się, jak JavaScript jest używany z resztą kodu na twojej stronie.

+ +

JavaScript może wyglądać obecnie lekko odstraszająco, ale nie martw się - w tym kursie wprowadzimy cię w jego świat krok po kroku. W kolejnym artykule zanurzysz się w praktycznej częsci, poprzez budowanie twoich własnych przykładów kodu w JavaScript.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

W tym module

+ + diff --git a/files/pl/learn/javascript/first_steps/what_went_wrong/index.html b/files/pl/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..1a88f2b797 --- /dev/null +++ b/files/pl/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,257 @@ +--- +title: Co poszło nie tak? Rozwiązywanie problemów w JavaScript +slug: Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+ +

Kiedy w poprzednim artykule budowałeś grę "Zgadnij numer", mogłeś stwierdzić, że ona po prostu nie działała. Nie martw się - ten artykuł ma na celu zatrzymanie cię przed wyrywaniem sobie włosów nad takimi problemami poprzez dostarczenie ci narzędzi do znajdowania i naprawienia błędów w programach napisanych w JavaScript.

+ + + + + + + + + + + + +
Wymagania wstępne:Podstawowa znajomość obsługi komputera, podstawowe rozumenie HTML i CSS oraz wiedza, czym jest JavaScript.
Cel:Zdobycie umiejętności i odwagi do rozwiązywania prostych problemów w twoim własnym kodzie.
+ +

Typy błędów

+ +

Każdy błąd w kodzie można w ogólności podzielić na dwa typy:

+ + + +

No dobra, nie jest to tak proste - istnieją także inne czynniki, które różnicują błędy. Powyższa klasyfikacja wystarczy jednak w tym początkowym etapie twojej kariery. W kolejnej częsci przyjrzymy się tym dwóm typom błędów.

+ +

Błędogenny przykład

+ +

Zaczniemy od naszej poprzedniej gry "Zgadnij numer" - tylko że tym razem będziemy zajmować się wersją w której umyślnie ukryto trochę błędów. Odwiedź GitHub i wykonaj lokalną wersję  number-game-errors.html (Zobacz live demo tutaj).

+ +
    +
  1. Aby zacząć, otwój lokalną wersję w swoim ulubionym edytorze tekstu i w twojej przeglądarce.
    2. +
  2. Spróbuj zagrać w tę - odkryjesz że kiedy wciskasz przycisk "Zgadnij" - on po prostu nie działa!
    3. +
+ +
+

Notatka: Równie dobrze możesz mieć swoją wersję gry, która ci nie działa. Wiemy, że może chciałbyś ją naprawić, ale chcemy, abyś wykorzystał naszą wersję, dzięki czemu nauczysz się technik, których tu uczymy. Następnie możesz  wykorzystać je do naprawienia własnego kodu.

+
+ +

W tym miejscu spójrzmy na narzędzia developerskie, dokładniej konsolę debugowania, aby sprawdzić, czy występują błędy składniowe, a jeżeli tak - naprawić je. Poniżej znajdują się instrukcje, jak tego dokonać.

+ +

Naprawa błędów składniowych

+ +

Wcześniej pokazaliśmy kilka prostych komend JavaScript, które wpisałeś do konsoli JavaScript w narzędziach deweloperskich (jeżeli nie pamiętasz jak je otworzyć, kliknij w link, aby sobie przypomnieć). Jej bardzo przydatną funkcją jest wyświetlanie błędów w momencie gdy interpreter JavaScript przeglądarki napotka na błąd. Wyruszmy na poszukiwanie błędów!

+ +
    +
  1. Idź do karty z otwartą stroną number-game-errors.html i otwórz konsolę JavaScript. Znajdziesz tam błąd:
    2. +
  2. Jest to prosty błąd do wytropienia, a przeglądarka daje wiele przydatnych  wskazówek: (powyższy screen jest z Firefoxa, ale inne przeglądarki pokazują podobne informacje). Od lewej do prawej znajdują się: +
      +
    • Czerwony "x" dla pokazania, że jest to błąd.
      • +
    • Wiadomość błędu dla pokazania, co poszło nie tak: "TypeError: guessSubmit.addeventListener is not a function"
      • +
    • Link do "Learn More", który przekierowuje do strony na MDN, która wyjaśnia szczegółowo dany błąd.
      • +
    • Nazwa pliku JavaScript, która po kliknięciu kieruje do karty debuggera. Jeżeli klikniesz go, pokaże ci się dokładna linia z danym błędem.
      • +
    • Numer linii oraz znak, gdzie wystąpił błąd. W tym przypadku linia 86, znak 3.
      • +
    +
    3. +
  3. Spoglądając na linię 86, zobaczymy następujący kod: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. +
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight different in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. +
+ +
+

Note: See our TypeError: "x" is not a function reference page for more details about this error.

+
+ +

Błędy składniowe - podejście drugie

+ +
    +
  1. Zapisz stronę i odśwież - zobaczysz, że błąd zniknął.
    2. +
  2. Spróbuj teraz wpisać liczbę. Po kliknięciu na przycisk "Wyślij" zobaczysz... inny błąd!
    3. +
  3. Tym razem błąd to "TypeError: lowOrHi is null", on line 78. +
    Notatka: Null jest specjalną wartością, która oznacza "nic" bądź "brak wartości" A więc lowOrHi został zadeklarowany i zainicjalizowany - ale wartością pustą.
    + +
    Notatka: Ten błąd pojawił się jak tylko strona została załadowana, dlatego że błąd wystąpił podczas wykonywania funkcji (w środku bloku checkGuess() { ... }). Jak dowiesz się później bardziej szczegółowo, kod wewnątrz funkcji jest wykonywany w innej przestrzeni niż kod poza funkcją. W tym przypadku kod nie został uruchomiony, a błąd wyrzucony do momentu, aż funkcja checkGuess() nie dotarła do linijki 86.
    +
    4. +
  4. Popatrz na linię 78. Zobaczysz tam następujący kod: + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. W tej linii następuje próba ustawienia właściwości textContent zmiennej lowOrHi na tekst, ale to się nie powiodło ze względu na fakt, że lowOrHi nie jest tym, czego oczekujemy.  Trzeba się dowiedzieć, dlaczego tak jest - wyszukajmy inne wystąpienia lowOrHi. Najwcześniejsze wystąpienie znajdziemy w linii 48: + 
    var lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. W tej linii próbujemy przypisać zmiennej referencję do elementu w dokumencie HTML. Sprawdźmy, czy wartością tej zmiennej jest null po wykonaniu tej linijki. Aby to zrobić, dodaj ten kod w linii 49: + 
    console.log(lowOrHi);
    + +
    +

    Notatka: console.log() jest bardzo użyteczną funkcją do debugowania, której celem jest wypisanie wartości zmiennej do konsoli. W tym przypadku wypisze ona wartośćlowOrHi do konsoli w takiej postaci, w jakiej została ona ustawiona w linii 48.

    +
    +
    7. +
  7. Zapisz plik i odśwież stronę. Po przejściu do konsoli zobaczysz efekt wywołania console.log().Możemy być pewni - w tym momencie wartością lowOrHi jest null. Oznacza to, że błąd jest zdecydowanie związany z linią 48.
    8. +
  8. Pomyślmy - co może być tutaj problemem? W linii 48 używamy document.querySelector() aby otrzymać referencję do elementu. Odbywa się to poprzez podanie selektora CSS jako parametr funkcji. W dalszej częsci pliku można znaleźć paragraf, którego referencji potrzebujemy: + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. To oznacza, że potrzebujemy tu selektora klasy. Zaczyna się on kropką (.) - ale selektor, którego używamy w querySelector() (linia 48) nie ma kropki. To może być nasz błąd! Spróbuj zmienić lowOrHi na .lowOrHi w linii 48.
    10. +
  10. Zapisz i odśwież stronę. Teraz console.log() powinien wyświetlić element  <p>, którego poszukiwaliśmy. Uff! Kolejny błąd naprawiony! Możesz już usunąć linię z console.log() (albo zostawić ją odniesienie na później - jak uważasz).
    11. +
+ +
+

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

+
+ +

Błędy składniowe - podejście trzecie

+ +
    +
  1. Teraz gdy spróbujesz zagrać w grę, powinno Ci się więcej powieść - gra będzie grywalna, do momentu końca gry - nieważne, czy poprzez znalezienie właściwej liczby czy skończenie się żyć.
    2. +
  2. W tym miejscu gra nie działa, a w konsoli pojawie się ten sam błąd, co na początku - "TypeError: resetButton.addeventListener is not a function"! Tym razem jednak jest wywoływany z linii 94.
    3. +
  3. Spójrzmy na linię 94. Można łatwo zauważyć, że mamy do czynienia z tym samym błędem, co wcześniej - wystarczy zmienić addeventListener na .addEventListener. Zrób to teraz.
    4. +
+ +

Błąd logiczny

+ +

Na tym etapie gra powinna być grywalna, ale po kilku uruchomieniach można łatwo zauważyć, że "losowa" liczba to zawsze 0 bądź 1. Nie jest to to, czego można od takiej gry oczekiwać!

+ +

Musi to być jakiś problem z logiką aplikacji - gra nie zwraca błędu, jednak nie zachowuje się jak powinna.

+ +
    +
  1. Znajdźmy zmienną randomNumber  i linie, w których zmienna jest zadeklarowana i jej wartość ustalona. To miejsce znajduje się w okolicach linii 44: + + 
    var randomNumber = Math.floor(Math.random()) + 1;
    + A linia, która generuje losową liczbę przed każdą grą, to linia 113: + + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    2. +
  2. Aby sprawdzić czy to z tymi liniami jest problem, użyjmy naszego starego przyjaciela - polecenia console.log(). Wstaw następujący kod bezpośrednio pod wcześniej wymienionymi dwiema liniami kodu: + 
    console.log(randomNumber);
    +
    3. +
  3. Zapisz i odśwież, następnie zagraj kilka razy - można zauważyć, że za każdym wywołaniem  randomNumber jest równe 1.
    4. +
+ +

Praca nad logiką

+ +

W celu naprawy tego błędu, należy najpierw pomyśleć, jak działa ten kod. Na samym początku wywołujemy Math.random(), który generuje zmiennoprzecinkową liczbę pomiędzy 0 i 1, na przykład 0.5675493843.

+ +
Math.random()
+ +

Następnie uzyskaną liczbę podajemy jako parametr funkcji Math.floor(), której zadanie jest zaokrąglenie uzyskanej w parametrze liczby do największej liczby całkowitej równej bądź mniejszej od parametru. Następnie dodajemy 1 do wyniku:

+ +
Math.floor(Math.random()) + 1
+ +

Zaokrąglanie liczby zmiennoprzecinkowej w zakresie od 0 do 1 zawsze da 0 . Dodanie do niej 1 da więc wynik 1. Aby naprawić wynik zgodnie z wymaganiami, pomnóżmy naszą losową liczbę przez 100. Sprawi to, że dostaniemy losową liczbę od 0 do 99:

+ +
Math.floor(Math.random()*100);
+ +

Jeżeli dodamy 1, dostaniemy liczbę z przedziału od 1 do 100:

+ +
Math.floor(Math.random()*100) + 1;
+ +

Zmień obie linie zgodnie z tym wzorem, zapisz i odśwież stronę - gra powinna zachowywać się tak jak od niej tego oczekujemy!

+ +

Inne popularne błędy

+ +

Istnieją inne popularne błędy, na które natkniesz się w swoim kodzie. Ta sekcja zawiera listę najpopularniejszych z nich.

+ +

SyntaxError: missing ; before statement

+ +

Ten błąd oznacza, że zapomniałeś o średniku na końcu linii. Czasem może jednak być bardziej enigmatyczny. Przykładem może być zmiana tej linii:

+ +
var userGuess = Number(guessField.value);
+ +

na

+ +
var userGuess === Number(guessField.value);
+ +

Ten kod wyrzuca błąd, gdyż myśli, że chcesz zrobić coś innego. Musisz być pewny, że nie mieszasz znaku przypisania (=) — zapisuje on wartość w zmiennej, z operatorem dokładnego porównania, który testuje czy jedna wartość jest dokładnie równa drugiej - zwraca ona wynik w postaci zmiennej logicznej true/false.

+ +
+

Notatka: Aby dowiedzieć się więcej o tym błędzie, odwiedź naszą stronę SyntaxError: missing ; before statement.

+
+ +

Program zawsze twierdzi, że wygrałeś, niezależnie od wprowadzonej liczby

+ +

Może to być objawem pomieszania operatorów przypisania i dokładnego porównania. Przykładowo jeżeli byśmy zmienili tę linię w funkcji checkGuess():

+ +
if (userGuess === randomNumber) {
+ +

na

+ +
if (userGuess = randomNumber) {
+ +

ten test zawsze zwróciłby true (prawdę), co sprawiłoby, że program za każdym razem twierdziłby, że gra została przez Ciebie wygrana. Uważaj na błędy!

+ +

SyntaxError: missing ) after argument list

+ +

Ten błąd jest prosty — oznacza po prostu, że zapomniałeś dodać nawias zamykający na końcu funkcji/wywołania metody.

+ +
+

Notatka: Zobacz naszą  stronę referencyjną: SyntaxError: missing ) after argument list, aby dowiedzieć się więcej o tym błędzie.

+
+ +

SyntaxError: missing : after property id

+ +

Ten błąd zwykle jest związany z niepoprawnie napisanym obiektem JavaScript. Tym razem jednak został spowodowany zmianą

+ +
function checkGuess() {
+ +

na

+ +
function checkGuess( {
+ +

Ten błąd spowodował, że przeglądarka zinterpretowała ten kod jako próbę podania wnętrza funkcji jako parametr funkcji. Uważaj na nawiasy!

+ +

SyntaxError: missing } after function body

+ +

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

+ +

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

+ +

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

+ +

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

+ +
+

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

+
+ +

Podsumowanie

+ +

A wieć to jest to - podstawy szukania błędów w prostych programach w JS. Nie zawsze znalezienie błędu jest tak proste , ale przynajmniej ten artykuł może ci pomóc w zaoszczędzeniu kilku godzin snu i pozwolić na szybsze postępy w nauce.

+ +

Zobacz także

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/pl/learn/javascript/obiekty/index.html b/files/pl/learn/javascript/obiekty/index.html deleted file mode 100644 index 9952e760a3..0000000000 --- a/files/pl/learn/javascript/obiekty/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Wprowadzenie do obiektów JavaScript -slug: Learn/JavaScript/Obiekty -tags: - - JavaScript - - Objekt - - Początkujący - - samouczek -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

W JavaScript większość rzeczy jest obiektami, począwszy od najbardziej fundamentalnych rzeczy jak stringi czy tablice, na API przeglądarek zbudowanym na szczycie JavaScriptu kończąc. Możesz nawet stworzyć własne obiekty do hermetyzowania powiązanych funkcji i zmiennych w "pakietach", które będą działały jako podręczne kontenery. Obiektowość w JavaScripcie jest kluczowa do dalszego zrozumienia języka, dlatego też przygotowaliśmy ten moduł, aby ci pomóc.  Na początku nauczymy cię teorii obiektowości i składni, później popatrzymy na to, jak tworzyć własne obiekty.

- -

Wymagania

- -

Zanim rozpoczniesz ten moduł powinieneś być nieco zaznajomiony z HTML i CSS. Radzimy przejść przez moduły Wprowadzenie do HTML i Wprowadzenie do CSS zanim rozpoczniesz naukę JavaScriptu.

- -

Powinieneś również być nieco zaznajomiony z podstawami JavaScript zanim zaczniesz zgłębiać szczegóły dotyczące obiektów w tym języku. Zanim rozpoczniesz ten moduł zapoznaj się z JavaScript pierwsze kroki i JavaScript budowanie bloków.

- -
-

Uwaga: Jeśli pracujesz na komputerze/tablecie/innym urządzeniu gdzie nie masz możliwości tworzenia swoich własnych plików, powinieneś wypróbować (większość) przykładów kodu w aplikacji webowej takiej jak JSBin lub Thimble.

-
- -

Przewodniki

- -
-
Object basics
-
W pierwszym artykule dotyczącym obiektów JavaScript przyjrzymy się podstawom składni dla obiektów i powrócimy do tematów, które przerabialiśmy wcześniej. Powtórzymy niektóre fakty, które wskazują, że wiele właściwości, którymi się już zajmowałeś, to faktycznie obiekty.
-
Object-oriented JavaScript for beginners
-
Po zapoznaniu się z podstawami skupimy się teraz na obiektowym JavaScript (OOJS) - ten artykuł przedstawia podstawowe spojrzenie na teorię programowania obiektowego (OOP), następnie bada, w jaki sposób JavaScript emuluje klasy obiektów za pomocą funkcji konstruktora, oraz jak tworzone są instancje obiektów.
-
Object prototypes
-
Prototypy są mechanizmem, za pomocą którego obiekty JavaScript dziedziczą cechy od siebie i działają inaczej niż mechanizmy dziedziczenia w klasycznych obiektowych językach programowania. W tym artykule badamy tę różnicę, wyjaśniamy, jak działają łańcuchy prototypów, i przyglądamy się, w jaki sposób można użyć właściwości prototypu do dodania metod do istniejących konstruktorów
-
Dziedziczenie w JavaScript
-
Po wyjaśnieniu większości pikantnych szczegółów OOJS, artykuł pokazuje, jak tworzyć "potomne" klasy obiektów (konstruktory), które dziedziczą cechy z ich klas "nadrzędnych". Ponadto przedstawiamy poradę dotyczącą tego, kiedy i gdzie możesz korzystać z OOJS
-
Praca z JSON
-
JavaScript Object Notation (JSON) to standardowy format tekstowy służący do reprezentowania danych strukturalnych, oparty na składni obiektów JavaScript, ktory jest powszechnie używany do reprezentowania i przesyłania danych w witrynach internetowych (t.j. wysyłanie niektórych danych z serwera do klienta, dzięki czemu mogą one być wyświetlane na stronie internetowej). Spotkasz to dość często, więc w tym artykule podajemy wszystko, czego potrzebujesz, aby pracować z JSON przy użyciu JavaScript, w tym analizować JSON w celu uzyskania dostępu do zawartych w nim danych oraz pisanie własnego JSON.
-
Praktyka budowania obiektów
-
W poprzednich artykułach zapoznaliśmy się ze wszystkimi niezbędnymi teoriami obiektów JavaScript i szczegółami składni, co daje Ci solidną podstawę do rozpoczęcia. W tym artykule zagłębiamy się w praktyczne ćwiczenie, dając Ci trochę więcej praktyki w budowaniu niestandardowych obiektów JavaScript, które tworzą coś ciekawego i kolorowego - jakieś kolorowe podskakujące kuleczki.
-
- -

Oceny

- -
-
Dodajemy nowe funkcje do naszego demo z odbijającymi się piłkami
-
W tej części, jako punkt wyjścia, należy użyć demo odbijających się piłek z poprzedniego artykułu i dodać do niego kilka nowych i interesujących funkcji.
-
diff --git a/files/pl/learn/javascript/objects/index.html b/files/pl/learn/javascript/objects/index.html new file mode 100644 index 0000000000..9952e760a3 --- /dev/null +++ b/files/pl/learn/javascript/objects/index.html @@ -0,0 +1,47 @@ +--- +title: Wprowadzenie do obiektów JavaScript +slug: Learn/JavaScript/Obiekty +tags: + - JavaScript + - Objekt + - Początkujący + - samouczek +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

W JavaScript większość rzeczy jest obiektami, począwszy od najbardziej fundamentalnych rzeczy jak stringi czy tablice, na API przeglądarek zbudowanym na szczycie JavaScriptu kończąc. Możesz nawet stworzyć własne obiekty do hermetyzowania powiązanych funkcji i zmiennych w "pakietach", które będą działały jako podręczne kontenery. Obiektowość w JavaScripcie jest kluczowa do dalszego zrozumienia języka, dlatego też przygotowaliśmy ten moduł, aby ci pomóc.  Na początku nauczymy cię teorii obiektowości i składni, później popatrzymy na to, jak tworzyć własne obiekty.

+ +

Wymagania

+ +

Zanim rozpoczniesz ten moduł powinieneś być nieco zaznajomiony z HTML i CSS. Radzimy przejść przez moduły Wprowadzenie do HTML i Wprowadzenie do CSS zanim rozpoczniesz naukę JavaScriptu.

+ +

Powinieneś również być nieco zaznajomiony z podstawami JavaScript zanim zaczniesz zgłębiać szczegóły dotyczące obiektów w tym języku. Zanim rozpoczniesz ten moduł zapoznaj się z JavaScript pierwsze kroki i JavaScript budowanie bloków.

+ +
+

Uwaga: Jeśli pracujesz na komputerze/tablecie/innym urządzeniu gdzie nie masz możliwości tworzenia swoich własnych plików, powinieneś wypróbować (większość) przykładów kodu w aplikacji webowej takiej jak JSBin lub Thimble.

+
+ +

Przewodniki

+ +
+
Object basics
+
W pierwszym artykule dotyczącym obiektów JavaScript przyjrzymy się podstawom składni dla obiektów i powrócimy do tematów, które przerabialiśmy wcześniej. Powtórzymy niektóre fakty, które wskazują, że wiele właściwości, którymi się już zajmowałeś, to faktycznie obiekty.
+
Object-oriented JavaScript for beginners
+
Po zapoznaniu się z podstawami skupimy się teraz na obiektowym JavaScript (OOJS) - ten artykuł przedstawia podstawowe spojrzenie na teorię programowania obiektowego (OOP), następnie bada, w jaki sposób JavaScript emuluje klasy obiektów za pomocą funkcji konstruktora, oraz jak tworzone są instancje obiektów.
+
Object prototypes
+
Prototypy są mechanizmem, za pomocą którego obiekty JavaScript dziedziczą cechy od siebie i działają inaczej niż mechanizmy dziedziczenia w klasycznych obiektowych językach programowania. W tym artykule badamy tę różnicę, wyjaśniamy, jak działają łańcuchy prototypów, i przyglądamy się, w jaki sposób można użyć właściwości prototypu do dodania metod do istniejących konstruktorów
+
Dziedziczenie w JavaScript
+
Po wyjaśnieniu większości pikantnych szczegółów OOJS, artykuł pokazuje, jak tworzyć "potomne" klasy obiektów (konstruktory), które dziedziczą cechy z ich klas "nadrzędnych". Ponadto przedstawiamy poradę dotyczącą tego, kiedy i gdzie możesz korzystać z OOJS
+
Praca z JSON
+
JavaScript Object Notation (JSON) to standardowy format tekstowy służący do reprezentowania danych strukturalnych, oparty na składni obiektów JavaScript, ktory jest powszechnie używany do reprezentowania i przesyłania danych w witrynach internetowych (t.j. wysyłanie niektórych danych z serwera do klienta, dzięki czemu mogą one być wyświetlane na stronie internetowej). Spotkasz to dość często, więc w tym artykule podajemy wszystko, czego potrzebujesz, aby pracować z JSON przy użyciu JavaScript, w tym analizować JSON w celu uzyskania dostępu do zawartych w nim danych oraz pisanie własnego JSON.
+
Praktyka budowania obiektów
+
W poprzednich artykułach zapoznaliśmy się ze wszystkimi niezbędnymi teoriami obiektów JavaScript i szczegółami składni, co daje Ci solidną podstawę do rozpoczęcia. W tym artykule zagłębiamy się w praktyczne ćwiczenie, dając Ci trochę więcej praktyki w budowaniu niestandardowych obiektów JavaScript, które tworzą coś ciekawego i kolorowego - jakieś kolorowe podskakujące kuleczki.
+
+ +

Oceny

+ +
+
Dodajemy nowe funkcje do naszego demo z odbijającymi się piłkami
+
W tej części, jako punkt wyjścia, należy użyć demo odbijających się piłek z poprzedniego artykułu i dodać do niego kilka nowych i interesujących funkcji.
+
diff --git a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html b/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html deleted file mode 100644 index 0d0f49c69a..0000000000 --- a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html +++ /dev/null @@ -1,687 +0,0 @@ ---- -title: A first splash into JavaScript -slug: Learn/JavaScript/Pierwsze_kroki/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
- -

Zaznajomiłeś się już nieco z teorią JavaScript i masz już pewne pojęcie co do zastosowania tego języka. Teraz zamierzamy udzielić Ci przyspieszonego kursu z podstawowych funkcji JavaScript'u poprzez ten, w pełni praktyczny, samouczek. Krok po kroku napiszesz tu prostą grę pod tytułem: "Zgadnij liczbę".

- - - - - - - - - - - - -
Wymagania wstępne:Podstawowa umiejętność posługiwania się komputerem, podstawowa znajomość HTML i CSS, podstawowa znajomość czym jest JavaScript.
Cel:Pierwsze doświadczenia w pisaniu kodu w JavaScript i zrozumienie- przynajmniej w podstawowym stopniu- z czym związane jest pisanie programu w JavaScript.
- -

Nie oczekujemy od Ciebie całkowitego zrozumienia kodu od zaraz - chcemy raczej przedstawić Ci nieco ogólniejsze spojrzenie i dać Ci odczuć sposób, w jaki działa JavaScript (jak również i inne języki programowania). W późniejszych artykułach wrócimy do użytych tu funkcjonalności w bardziej szczegółowy spsób.

- -
-

Wiele funkcjonalności, które zobaczysz w JavaScript, jest takich samych, jak w innych językach programowania (funkcje, pętle itd.) Składnia języka wygląda inaczej, ale zasada działania jest przeważnie ta sama.

-
- -

Myśleć jak programista

- -

Składnia danego języka nie jest - wbrew pozorom - najtrudniejszym aspektem, z jakim trzeba zmierzyć się podczas nauki programowania. Sprawą znacznie poważniejszą jest bowiem nauczyć się stosować posiadaną wiedzę do rozwiązywania problemów ze świata realnego. Musisz zacząć myśleć jak programista. Wiąże się to z patrzeniem na opisy oczekiwanego efektu działania programu, przemyśleniem, jakich konstrukcji kodu w tym celu użyć i zaplanowaniem, jak połączyć je wszystkie w efektywnie współpracującą całość.

- -

Wymaga to połączenia ciężkiej pracy, doświadczenia ze składnią języków i praktyki - wraz z odrobiną kreatywności. Im więcej napiszesz kodu, tym lepszy w tym się staniesz. Nie możemy obiecać, że wypracujesz  w sobie "mózg programisty" w pięć minut, ale damy Ci wiele możliwości praktykowania myślenia jak programista w czasie trwania tego kursu.

- -

Pamiętając o tym, przyjrzyjmy się ogólnie procesowi pisania kodu dzieląc go na poszczególne konkretne zadania. Posłuży nam w tym celu poniższy przykładowy program.

- -

Przykład: Gra "Zgadnij liczbę"

- -

Oto przykład prostej gry:

- - - -

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

- -

Nie krępuj się - pograj sobie chwilę. Zwróć uwagę na elementy tej gry zanim przejdziesz dalej.

- -

Wyobraźmy sobie, że Twój szef postawił przed Tobą następujące zadanie:

- -
-

Chcę, żebyś napisał prostą grę typu "zgadnij liczbę". Gra powinna wybierać losową liczbę pomiędzy 1 a 100. Zadaniem gracza jest odgadnąć tę liczbę w najwyżej 10 próbach. Po każdej próbie gracz powinien otrzymać informację, czy zgadł, czy też nie i - jeśli nie odgadł, powinien dodatkowo dowiedzieć się, czy jego liczba miała wartość za małą, czy za dużą. Ponadto gracz powinien widzieć wybrane poprzednio przez siebie liczby. Gra ma się zakończyć gdy gracz poda prawidłową odpowiedź, lub gdy wykorzysta ostatnią próbę. Po zakończeniu gry gracz powinien mieć możliwośc rozpocząć ją od nowa.

-
- -

Zacznijmy od przedstawienia powyższego opisu w sposób bliższy myśleniu programisty i podzielmy go na proste pojedyncze zadania:

- -
    -
  1. Wybierz losową liczbę z zakresu od 1 do 100.
    2. -
  2. Zapisz numer próby, którą podejmuje gracz. Zacznij od 1.
    3. -
  3. Podaj graczowi sposób, w jaki może odgadnąć tę liczbę.
    4. -
  4. Gdy padnie odpowiedź zapisz ją gdzieś, aby użytkownik mógł widzieć swoje poprzednie próby.
    5. -
  5. Sprawdź, czy padła prawidłowa odpowiedź.
    6. -
  6. Jeśli tak: -
      -
    1. Wyświetl gratulacje.
      2. -
    2. Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).
      3. -
    3. Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.
      4. -
    -
    7. -
  7. Jeśli nie i graczowi pozostały jeszcze próby: -
      -
    1. Poinformuj o nieprawidłowej odpowiedzi.
      2. -
    2. Pozwól podać kolejną odpowiedź.
      3. -
    3. Zwiększ numer próby gracza o 1.
      4. -
    -
    8. -
  8. Jeśli nie i graczowi nie pozostała już ani jedna próba: -
      -
    1. Poinformuj o zakończeniu gry.
      2. -
    2. Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).
      3. -
    3. Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.
      4. -
    -
    9. -
  9. Gdy gra uruchomi się ponownie, upewnij się, że dane z poprzedniej gry zostały całkowicie usunięte i interfejs powrócił do stanu początkowego. Przejdź do punktu nr 1.
    10. -
- -

Zróbmy kolejny krok i spróbujmy zamienić powyższe punkty w kod, który zbuduje naszą grę. W ten sposób zobaczysz w działaniu kilka funcji JavaScript.

- -

Przygotowanie

- -

Aby rozpocząć pracę potrzebujesz mieć na swoim komputerze kopię pliku number-guessing-game-start.html (see it live here). Otwórz go w edytorze tekstowym i jednocześnie w swojej przeglądarce. Plik ten zawiera nagłówek, akapit z krótką instrukcją gry, oraz (jeszcze nie działający) formularz do wprowadzania odpowiedzi.

- -

Nasz kod będziemy pisać w bloku określonym znacznikiem {{htmlelement("script")}} u dołu pliku HTML:

- -
<script>
-
-  // Twój kod JavaScript
-
-</script>
-
- -

Pojemniki na dane - zmienne

- -

Zaczynamy. W pierwszej kolejności dodaj poniższe linijki kodu do bloku oznaczonego {{htmlelement("script")}}.

- -
var randomNumber = Math.floor(Math.random() * 100) + 1;
-
-var guesses = document.querySelector('.guesses');
-var lastResult = document.querySelector('.lastResult');
-var lowOrHi = document.querySelector('.lowOrHi');
-
-var guessSubmit = document.querySelector('.guessSubmit');
-var guessField = document.querySelector('.guessField');
-
-var guessCount = 1;
-var resetButton;
- -

Ta część kodu definiuje zmienne i stałe niezbędne do pracy programu. Najprościej rzecz ujmując, zmienne są pojemnikami na wartości takie jak liczby, czy ciągi znaków. Zmienną tworzymy używając słowo kluczowe let (lub var), po którym wpisujemy nazwę tej zmiennej. Następnie możemy tej zmiennej przypisać wartość. Robimy to za pomocą znaku równości (=), po którego prawej stronie wpisujemy żądaną wartość. Więcej informacji na temat różnic pomiędzy słowami kluczowymi let i var możesz znaleźć w tym artykule. Stałe natomiast mają za zadanie przechować dane, które mają się nie zmieniać i tworzy się je podobnie jak zmienne, ale przy użyciu słowa kluczowego const. W naszym przykładzie użyjemy stałych do przechowania odnośników (referencji) do poszczególnych części naszego interfejsu użytkownika. Tekst w niektórych z nich może w którymś momencie ulec zmianie, jednak bloki kodu HTML, do których odnoszą się nasze stałe pozostaną niezmienne.

- -

W naszym przykładzie:

- - - -
-

Na temat zmiennych i stałych będziesz dowiadywał się coraz więcej w toku trwania kursu, począwszy już od tego artykułu.

-
- -

Funkcje

- -

Wstaw następujący kod poniżej dodanego w poprzednim kroku:

- -
function checkGuess() {
-  alert('I am a placeholder');
-}
- -

Funkcje są blokami kodu "wielokrotnego użytku". Napisane raz, mogą być wywoływane wielokrotnie bez potrzeby ponownego pisania ich w całości. Ta cecha funkcji nie tylko oszczędza czas pisania kodu, ale również znacząco poprawia jego czytelność. Istnieje kilka sposobów definiowania funkcji. W tym przykładzie zajmiemy się jednym z prostszych. Rozpoczynamy od słowa kluczowego function, następnie piszemy nazwę naszej funkcji, a na jej końcu- nawiasy zwykłe. Potem wstawiamy dwa nawiasy klamrowe ({ }). To właśnie w nich zawarte jest ciało funkcji - kod, który będzie wykonywał się, ilekroć wywołamy tę funkcję.

- -

Funkcje wywołuje się pisząc jej nazwę wraz z nawiasami zwykłymi.

- -

Spróbujmy. Zapisz zmiany w swoim pliku z kodem i odśwież okno przeglądarki. Teraz przejdź do konsoli JavaScript w narzędziach programisty w przeglądarce i wprowadź tę linię:

- -
checkGuess();
- -

Po zatwierdzeniu klawiszem Return/Enter, powinno pojawić się okno alertu z tekstem: "I am a placeholder". Dzieje się tak, poniważ w naszym kodzie zdefiniowaliśmy funkcję, która uruchamia ten alert, kiedy tylko ją wywołamy.

- -
-

W  dalszej części kursu dowiesz się znacznie więcej o funkcjach.

-
- -

Operatory

- -

Za pomocą operatorów w JavaScript możemy przeprowadzać porównania, dokonywać obliczeń, łączyć ze sobą ciągi znaków i robić wiele innych przydatnych rzeczy.

- -

Jeśli jeszcze nie zapisałeś zmian w swoim pliku z kodem, oraz nie odświeżyłeś okna przeglądarki, zrób to teraz. Otwórz konsolę Javascript w narzędziach programisty w przeglądarce. Teraz będziesz mógł sprawdzić działanie operatorów. Przepisz dokładnie każde z poleceń z kolumny "Example" i zatwierdź każde z nich klawiszem Return/Enter. Obserwuj wyniki. Jeśli z jakiegoś powodu nie masz dostępu do  narzędzi programistycznych w Twojej przeglądarce, możesz użyć poniższej prostej konsoli:

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

Najpierw zajmiemy się operatorami arytmetycznymi:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
+Dodawanie6 + 9
-Odejmowanie20 - 15
*Mnożenie3 * 7
/Dzielenie10 / 5
- -

Operatora + możemy też użyć do łączenia ciągów znaków (takie działanie nazywa się w programowaniu konkatenacją). Wprowadź poniższe linie, oddzielając je klawiszem Return / Enter :

- -
var name = 'Bingo';
-name;
-var hello = ' says hello!';
-hello;
-var greeting = name + hello;
-greeting;
- -

Dostępne są również pewne ułatwiające życie skróty, zwane złożonymi operatorami przypisania. Jeśli na przykład chcielibyśmy w prosty sposób dodać nowy ciąg tekstowy do już istniejącego, możemy napisać tak:

- -
name += ' says hello!';
- -

Co jest równoznaczne z:

- -
name = name + ' says hello!';
- -

Kiedy dokonujemy sprawdzenia prawda / fałsz (na przykład w instrukcjach warunkowych - zobacz {{anch("Instrukcje warunkowe", "poniżej")}}) używamy operatorów porównania. Na przykład:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
===Ścisła równość (czy jest dokładnie tym samym?)5 === 2 + 4
!==Różne od (czy nie jest tym samym?)'Chris' !== 'Ch' + 'ris'
<Mniejsze od10 < 6
>Większe od10 > 20
- -

Instrukcje warunkowe

- -

Wrócmy teraz do naszej funkcji checkGuess().  Z pewnością lepiej mogłaby nam się przysłużyć, gdyby jej działanie nie ograniczało się tylko do wyświetlenia komunikatu "placeholder". Mamy dla niej o wiele ważniejsze zadanie - chcemy, by sprawdzała każdą odpowiedź gracza i odpowiednio reagowała.

- -

W tym celu zastąp obecną funkcję checkGuess() jej nową wersją:

- -
function checkGuess() {
-  var userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    setGameOver();
-  } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
-    }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
- -

Sporo kodu, prawda? Przyjrzyjmy mu się bliżej:

- - - -

Zdarzenia (events)

- -

Udało nam się całkiem zgrabnie zaimplementować funkcję checkGuess(), jednak na razie nie wykona ona żadnej akcji z tej prostej przyczyny, że jeszcze jej nie wywołaliśmy. Funkcja ta ma zostać wywołana przy naciśnięciu przycisku "Submit guess". W tym celu użyjemy zdarzenia. Zdarzenie jest tym, co dzieje się w przeglądarce (np. kliknięcie przycisku, załadowanie strony, odtwarzanie filmu, itd.) i czego możemy użyć  w celu wywołania konkretnego bloku kodu. Konstrukty, które "nasłuchują", czy miało miejsce zdarzenie nazywane są detektorami zdarzeń (event listeners), a wywoływane w odpowiedzi na nie bloki kodu - modułami obsługi zdarzeń (event handlers).

- -

Do swojej funkcji checkGuess() dodaj poniższą linię:

- -
guessSubmit.addEventListener('click', checkGuess);
- -

W ten sposób dodałeś detektor zdarzenia do przycisku guessSubmit. Jest to metoda, która ma dwie dane wejściowe (zwane argumentami) zapisane w formie  ciągu znaków: typ zdarzenia, które ma zajść (w tym przypadku click), oraz fragment kodu, który ma zostać uruchomiony poprzez to zdarzenie (funkcja checkGuess()). Nazwę funkcji piszemy bez cudzysłowia. {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

- -

Zapisz i odśwież swój kod. Powinien już prawie w pełni działać. Pozostała jeszcze jedna kwestia: gdy odgadniesz właściwą odpowiedź, lub wykorzystasz wszystkie próby odpowiedzi, gra zostanie przerwana, ponieważ jak dotąd nie zdefiniowaliśmy funkcji setGameOver(), która ma zostać wywołana w przypadku zakończenia gry. Dodajmy zatem brakującą część kodu, aby nasza gra zyskała wszystkie funkcjonalności.

- -

Finishing the game functionality

- -

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- - - -

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

- -
function resetGame() {
-  guessCount = 1;
-
-  var resetParas = document.querySelectorAll('.resultParas p');
-  for (var i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

- - - -

At this point you should have a fully working (simple) game — congratulations!

- -

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

- -

Loops

- -

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

- -

To start with, go to your browser developer tools JavaScript console again, and enter the following:

- -
for (var i = 1 ; i < 21 ; i++) { console.log(i) }
- -

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

- -
    -
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. -
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. -
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

- -
var resetParas = document.querySelectorAll('.resultParas p');
-for (var i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

- -

A small discussion on objects

- -

Let's add one more final improvement before we get to this discussion. Add the following line just below the var resetButton; line near the top of your JavaScript, then save your file:

- -
guessField.focus();
- -

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

- -

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

- -

In this particular case, we first created a guessField variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:

- -
var guessField = document.querySelector('.guessField');
- -

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

- -

Because guessField now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

- -
guessField.focus();
- -

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses variable contains a reference to a {{htmlelement("p")}} element, and guessCount contains a number.

- -

Playing with browser objects

- -

Let's play with some browser objects a bit.

- -
    -
  1. First of all, open up your program in a browser.
    2. -
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. -
  3. Type in guessField and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. -
  4. Now type in the following: - 
    guessField.value = 'Hello';
    - The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. -
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.
    6. -
  6. Now try entering the following line: - 
    guesses.value
    - The browser will return undefined, because paragraphs don't have the value property.
    7. -
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: - 
    guesses.textContent = 'Where is my paragraph?';
    -
    8. -
  8. Now for some fun stuff. Try entering the below lines, one by one: - 
    guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
    - Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. -
- -

Finished for now...

- -

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html b/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html deleted file mode 100644 index 1a88f2b797..0000000000 --- a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Co poszło nie tak? Rozwiązywanie problemów w JavaScript -slug: Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
- -

Kiedy w poprzednim artykule budowałeś grę "Zgadnij numer", mogłeś stwierdzić, że ona po prostu nie działała. Nie martw się - ten artykuł ma na celu zatrzymanie cię przed wyrywaniem sobie włosów nad takimi problemami poprzez dostarczenie ci narzędzi do znajdowania i naprawienia błędów w programach napisanych w JavaScript.

- - - - - - - - - - - - -
Wymagania wstępne:Podstawowa znajomość obsługi komputera, podstawowe rozumenie HTML i CSS oraz wiedza, czym jest JavaScript.
Cel:Zdobycie umiejętności i odwagi do rozwiązywania prostych problemów w twoim własnym kodzie.
- -

Typy błędów

- -

Każdy błąd w kodzie można w ogólności podzielić na dwa typy:

- - - -

No dobra, nie jest to tak proste - istnieją także inne czynniki, które różnicują błędy. Powyższa klasyfikacja wystarczy jednak w tym początkowym etapie twojej kariery. W kolejnej częsci przyjrzymy się tym dwóm typom błędów.

- -

Błędogenny przykład

- -

Zaczniemy od naszej poprzedniej gry "Zgadnij numer" - tylko że tym razem będziemy zajmować się wersją w której umyślnie ukryto trochę błędów. Odwiedź GitHub i wykonaj lokalną wersję  number-game-errors.html (Zobacz live demo tutaj).

- -
    -
  1. Aby zacząć, otwój lokalną wersję w swoim ulubionym edytorze tekstu i w twojej przeglądarce.
    2. -
  2. Spróbuj zagrać w tę - odkryjesz że kiedy wciskasz przycisk "Zgadnij" - on po prostu nie działa!
    3. -
- -
-

Notatka: Równie dobrze możesz mieć swoją wersję gry, która ci nie działa. Wiemy, że może chciałbyś ją naprawić, ale chcemy, abyś wykorzystał naszą wersję, dzięki czemu nauczysz się technik, których tu uczymy. Następnie możesz  wykorzystać je do naprawienia własnego kodu.

-
- -

W tym miejscu spójrzmy na narzędzia developerskie, dokładniej konsolę debugowania, aby sprawdzić, czy występują błędy składniowe, a jeżeli tak - naprawić je. Poniżej znajdują się instrukcje, jak tego dokonać.

- -

Naprawa błędów składniowych

- -

Wcześniej pokazaliśmy kilka prostych komend JavaScript, które wpisałeś do konsoli JavaScript w narzędziach deweloperskich (jeżeli nie pamiętasz jak je otworzyć, kliknij w link, aby sobie przypomnieć). Jej bardzo przydatną funkcją jest wyświetlanie błędów w momencie gdy interpreter JavaScript przeglądarki napotka na błąd. Wyruszmy na poszukiwanie błędów!

- -
    -
  1. Idź do karty z otwartą stroną number-game-errors.html i otwórz konsolę JavaScript. Znajdziesz tam błąd:
    2. -
  2. Jest to prosty błąd do wytropienia, a przeglądarka daje wiele przydatnych  wskazówek: (powyższy screen jest z Firefoxa, ale inne przeglądarki pokazują podobne informacje). Od lewej do prawej znajdują się: -
      -
    • Czerwony "x" dla pokazania, że jest to błąd.
      • -
    • Wiadomość błędu dla pokazania, co poszło nie tak: "TypeError: guessSubmit.addeventListener is not a function"
      • -
    • Link do "Learn More", który przekierowuje do strony na MDN, która wyjaśnia szczegółowo dany błąd.
      • -
    • Nazwa pliku JavaScript, która po kliknięciu kieruje do karty debuggera. Jeżeli klikniesz go, pokaże ci się dokładna linia z danym błędem.
      • -
    • Numer linii oraz znak, gdzie wystąpił błąd. W tym przypadku linia 86, znak 3.
      • -
    -
    3. -
  3. Spoglądając na linię 86, zobaczymy następujący kod: - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. -
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight different in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. -
- -
-

Note: See our TypeError: "x" is not a function reference page for more details about this error.

-
- -

Błędy składniowe - podejście drugie

- -
    -
  1. Zapisz stronę i odśwież - zobaczysz, że błąd zniknął.
    2. -
  2. Spróbuj teraz wpisać liczbę. Po kliknięciu na przycisk "Wyślij" zobaczysz... inny błąd!
    3. -
  3. Tym razem błąd to "TypeError: lowOrHi is null", on line 78. -
    Notatka: Null jest specjalną wartością, która oznacza "nic" bądź "brak wartości" A więc lowOrHi został zadeklarowany i zainicjalizowany - ale wartością pustą.
    - -
    Notatka: Ten błąd pojawił się jak tylko strona została załadowana, dlatego że błąd wystąpił podczas wykonywania funkcji (w środku bloku checkGuess() { ... }). Jak dowiesz się później bardziej szczegółowo, kod wewnątrz funkcji jest wykonywany w innej przestrzeni niż kod poza funkcją. W tym przypadku kod nie został uruchomiony, a błąd wyrzucony do momentu, aż funkcja checkGuess() nie dotarła do linijki 86.
    -
    4. -
  4. Popatrz na linię 78. Zobaczysz tam następujący kod: - 
    lowOrHi.textContent = 'Last guess was too high!';
    -
    5. -
  5. W tej linii następuje próba ustawienia właściwości textContent zmiennej lowOrHi na tekst, ale to się nie powiodło ze względu na fakt, że lowOrHi nie jest tym, czego oczekujemy.  Trzeba się dowiedzieć, dlaczego tak jest - wyszukajmy inne wystąpienia lowOrHi. Najwcześniejsze wystąpienie znajdziemy w linii 48: - 
    var lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. W tej linii próbujemy przypisać zmiennej referencję do elementu w dokumencie HTML. Sprawdźmy, czy wartością tej zmiennej jest null po wykonaniu tej linijki. Aby to zrobić, dodaj ten kod w linii 49: - 
    console.log(lowOrHi);
    - -
    -

    Notatka: console.log() jest bardzo użyteczną funkcją do debugowania, której celem jest wypisanie wartości zmiennej do konsoli. W tym przypadku wypisze ona wartośćlowOrHi do konsoli w takiej postaci, w jakiej została ona ustawiona w linii 48.

    -
    -
    7. -
  7. Zapisz plik i odśwież stronę. Po przejściu do konsoli zobaczysz efekt wywołania console.log().Możemy być pewni - w tym momencie wartością lowOrHi jest null. Oznacza to, że błąd jest zdecydowanie związany z linią 48.
    8. -
  8. Pomyślmy - co może być tutaj problemem? W linii 48 używamy document.querySelector() aby otrzymać referencję do elementu. Odbywa się to poprzez podanie selektora CSS jako parametr funkcji. W dalszej częsci pliku można znaleźć paragraf, którego referencji potrzebujemy: - 
    <p class="lowOrHi"></p>
    -
    9. -
  9. To oznacza, że potrzebujemy tu selektora klasy. Zaczyna się on kropką (.) - ale selektor, którego używamy w querySelector() (linia 48) nie ma kropki. To może być nasz błąd! Spróbuj zmienić lowOrHi na .lowOrHi w linii 48.
    10. -
  10. Zapisz i odśwież stronę. Teraz console.log() powinien wyświetlić element  <p>, którego poszukiwaliśmy. Uff! Kolejny błąd naprawiony! Możesz już usunąć linię z console.log() (albo zostawić ją odniesienie na później - jak uważasz).
    11. -
- -
-

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

-
- -

Błędy składniowe - podejście trzecie

- -
    -
  1. Teraz gdy spróbujesz zagrać w grę, powinno Ci się więcej powieść - gra będzie grywalna, do momentu końca gry - nieważne, czy poprzez znalezienie właściwej liczby czy skończenie się żyć.
    2. -
  2. W tym miejscu gra nie działa, a w konsoli pojawie się ten sam błąd, co na początku - "TypeError: resetButton.addeventListener is not a function"! Tym razem jednak jest wywoływany z linii 94.
    3. -
  3. Spójrzmy na linię 94. Można łatwo zauważyć, że mamy do czynienia z tym samym błędem, co wcześniej - wystarczy zmienić addeventListener na .addEventListener. Zrób to teraz.
    4. -
- -

Błąd logiczny

- -

Na tym etapie gra powinna być grywalna, ale po kilku uruchomieniach można łatwo zauważyć, że "losowa" liczba to zawsze 0 bądź 1. Nie jest to to, czego można od takiej gry oczekiwać!

- -

Musi to być jakiś problem z logiką aplikacji - gra nie zwraca błędu, jednak nie zachowuje się jak powinna.

- -
    -
  1. Znajdźmy zmienną randomNumber  i linie, w których zmienna jest zadeklarowana i jej wartość ustalona. To miejsce znajduje się w okolicach linii 44: - - 
    var randomNumber = Math.floor(Math.random()) + 1;
    - A linia, która generuje losową liczbę przed każdą grą, to linia 113: - - 
    randomNumber = Math.floor(Math.random()) + 1;
    -
    2. -
  2. Aby sprawdzić czy to z tymi liniami jest problem, użyjmy naszego starego przyjaciela - polecenia console.log(). Wstaw następujący kod bezpośrednio pod wcześniej wymienionymi dwiema liniami kodu: - 
    console.log(randomNumber);
    -
    3. -
  3. Zapisz i odśwież, następnie zagraj kilka razy - można zauważyć, że za każdym wywołaniem  randomNumber jest równe 1.
    4. -
- -

Praca nad logiką

- -

W celu naprawy tego błędu, należy najpierw pomyśleć, jak działa ten kod. Na samym początku wywołujemy Math.random(), który generuje zmiennoprzecinkową liczbę pomiędzy 0 i 1, na przykład 0.5675493843.

- -
Math.random()
- -

Następnie uzyskaną liczbę podajemy jako parametr funkcji Math.floor(), której zadanie jest zaokrąglenie uzyskanej w parametrze liczby do największej liczby całkowitej równej bądź mniejszej od parametru. Następnie dodajemy 1 do wyniku:

- -
Math.floor(Math.random()) + 1
- -

Zaokrąglanie liczby zmiennoprzecinkowej w zakresie od 0 do 1 zawsze da 0 . Dodanie do niej 1 da więc wynik 1. Aby naprawić wynik zgodnie z wymaganiami, pomnóżmy naszą losową liczbę przez 100. Sprawi to, że dostaniemy losową liczbę od 0 do 99:

- -
Math.floor(Math.random()*100);
- -

Jeżeli dodamy 1, dostaniemy liczbę z przedziału od 1 do 100:

- -
Math.floor(Math.random()*100) + 1;
- -

Zmień obie linie zgodnie z tym wzorem, zapisz i odśwież stronę - gra powinna zachowywać się tak jak od niej tego oczekujemy!

- -

Inne popularne błędy

- -

Istnieją inne popularne błędy, na które natkniesz się w swoim kodzie. Ta sekcja zawiera listę najpopularniejszych z nich.

- -

SyntaxError: missing ; before statement

- -

Ten błąd oznacza, że zapomniałeś o średniku na końcu linii. Czasem może jednak być bardziej enigmatyczny. Przykładem może być zmiana tej linii:

- -
var userGuess = Number(guessField.value);
- -

na

- -
var userGuess === Number(guessField.value);
- -

Ten kod wyrzuca błąd, gdyż myśli, że chcesz zrobić coś innego. Musisz być pewny, że nie mieszasz znaku przypisania (=) — zapisuje on wartość w zmiennej, z operatorem dokładnego porównania, który testuje czy jedna wartość jest dokładnie równa drugiej - zwraca ona wynik w postaci zmiennej logicznej true/false.

- -
-

Notatka: Aby dowiedzieć się więcej o tym błędzie, odwiedź naszą stronę SyntaxError: missing ; before statement.

-
- -

Program zawsze twierdzi, że wygrałeś, niezależnie od wprowadzonej liczby

- -

Może to być objawem pomieszania operatorów przypisania i dokładnego porównania. Przykładowo jeżeli byśmy zmienili tę linię w funkcji checkGuess():

- -
if (userGuess === randomNumber) {
- -

na

- -
if (userGuess = randomNumber) {
- -

ten test zawsze zwróciłby true (prawdę), co sprawiłoby, że program za każdym razem twierdziłby, że gra została przez Ciebie wygrana. Uważaj na błędy!

- -

SyntaxError: missing ) after argument list

- -

Ten błąd jest prosty — oznacza po prostu, że zapomniałeś dodać nawias zamykający na końcu funkcji/wywołania metody.

- -
-

Notatka: Zobacz naszą  stronę referencyjną: SyntaxError: missing ) after argument list, aby dowiedzieć się więcej o tym błędzie.

-
- -

SyntaxError: missing : after property id

- -

Ten błąd zwykle jest związany z niepoprawnie napisanym obiektem JavaScript. Tym razem jednak został spowodowany zmianą

- -
function checkGuess() {
- -

na

- -
function checkGuess( {
- -

Ten błąd spowodował, że przeglądarka zinterpretowała ten kod jako próbę podania wnętrza funkcji jako parametr funkcji. Uważaj na nawiasy!

- -

SyntaxError: missing } after function body

- -

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

- -

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

- -

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

- -

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

- -
-

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

-
- -

Podsumowanie

- -

A wieć to jest to - podstawy szukania błędów w prostych programach w JS. Nie zawsze znalezienie błędu jest tak proste , ale przynajmniej ten artykuł może ci pomóc w zaoszczędzeniu kilku godzin snu i pozwolić na szybsze postępy w nauce.

- -

Zobacz także

- -
- -
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/pl/learn/javascript/pierwsze_kroki/index.html b/files/pl/learn/javascript/pierwsze_kroki/index.html deleted file mode 100644 index ab90523dce..0000000000 --- a/files/pl/learn/javascript/pierwsze_kroki/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Pierwsze kroki w Javascript -slug: Learn/JavaScript/Pierwsze_kroki -tags: - - Artykuły - - Liczby - - Moduły - - Operatory - - Początkujący - - Przewodnik - - Pętle - - Zmienne -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

W pierwszym module, przed rozpoczęciem praktycznego pisania kodu w JavaScript, odpowiemy sobie na kilka fundamentalnych pytań takich jak: "czym jest JavaScript?", "czym się charakteryzuje?" oraz "co potrafi?". Następnie omówimy kilka kluczowych kwestii - zmienne, ciągi znaków, liczby oraz pętle w JavaScript.

- -

Wymagania

- -

Przed rozpoczęciem nauki tego modułu nie musisz posiadać żadnej wiedzy o JavaScript, ale powinieneś już znać podstawowe zagadnienia związane z HTML-em oraz CSS-em. Doradzamy Ci, abyś ukończył moduły przedstawione poniżej:

- - - -
-

Informacja: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu na którym nie masz możliwości tworzenia własnych plików, możesz wypróbować przedstawione przykłady w programach online, takich jak:  JSBin lub Thimble.

-
- -

Przewodnik

- -
-
Czym jest JavaScript?
-
Witamy w MDN-owym kursie JavaScript dla początkujących! W tym artykule spojrzymy na JavaScript jeszcze nieco ogólne i odpowiemy sobie na podstawowe pytania:  "co to jest?" oraz "co robi?". To ważne, by znać cele stosowania tego języka.
-
Pierwsze spojrzenie na JavaScript
-
Najpierw nauczysz się teorii JavaScript, oraz tego, co możesz zrobić za jego pomocą. Następnie przejdziesz przez instruktarz oparty o podstawowe cechy JavaScript, który będzie miał formę praktyczną - napiszesz prostą grę - "Zgadnij liczbę". Proces pisania pokażemy Ci krok po kroku.
-
Coś poszło nie tak? Rozwiązywanie problemów w JavaScript
-
Podczas pisania gry "zgadnij liczbę" z poprzedniego artykułu możesz natrafić na trudności, które spowodują problemy z jej poprawnym działaniem. Spokojnie - ten artykuł uchroni Cię przed wyrywaniem sobie włosów podczas sprawdzania swojego kodu. Pokażemy Ci kilka prostych sposóbów wykrywania i eliminowania błędów w programie napisanym w Javascript.
-
Przechowywanie informacji, których potrzebujesz — Zmienne
-
Po przeczytaniu poprzednich artykułów powinieneś wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, oraz jak możesz używać go wraz z innymi internetowymi technologiami. Ten artykuł poprowadzi Cię przez podstawowe "bloki", którymi będziesz posługiwać się podczas pisania programu w Javascript - zmienne.
-
Podstawy działań w JavaScript — liczby i operatory
-
W tym miesjcu kursu porozmawiamy o działaniach w JavaScript - dowiesz się jak możesz łączyć operatory oraz przeczytasz o innych cechach języka, aby poprawnie korzystać z liczb.
-
Przechowywanie tekstu — ciągi znaków w JavaScript
-
Następnie skupimy swoją uwagę na string-ach - tak nazywają się ciągi tekstu w programowaniu. W tym artykule spojrzymy na najważniejsze rzeczy, które potrzebujesz wiedzieć o ciągach znaków w JavaScript. Są nimi: tworzenie "string-ów", używanie cudzysłowia, oraz łączenie ze sobą ciągów znaków.
-
Użyteczne metody w string-ach
-
Po zaznajomieniu się z podstawami string-ów czas podnieść poprzeczkę. Zaczniemy mysleć o pomocnych operacjach, które możemy wykonać na ciągach znaków poprzez wbudowane funkcje, takie jak: obliczanie długości ciągu znaków, łączenie i rozdzielanie, zastępowanie jednego znaku innym i wiele więcej.
-
Pętle
-
W ostatnim artykule tego modułu przyjrzymy się pętlom - następnym sposobie przechowywania informacji w pojedynczej zmiennej. Dowiesz się tutaj dlaczego są one ważne, odkryjesz jak je stworzyć, dodać i usunąć z nich dane. 
-
- -

Podsumowanie

- -

Poniższe podsumowanie sprawdzi Twoje rozumienie podstaw języka Javascript z powyższego przewodnika.

- -
-
Generator niemądrych opowieści
-
W tej części zastosujesz zdobytą wiedzę, zebraną w powyższych artykułach, do stworzenia aplikacji - "Generatora niemądrych opowieści". Baw się dobrze!
-
diff --git a/files/pl/learn/javascript/pierwsze_kroki/math/index.html b/files/pl/learn/javascript/pierwsze_kroki/math/index.html deleted file mode 100644 index 3e5563d0da..0000000000 --- a/files/pl/learn/javascript/pierwsze_kroki/math/index.html +++ /dev/null @@ -1,455 +0,0 @@ ---- -title: Basic math in JavaScript — numbers and operators -slug: Learn/JavaScript/Pierwsze_kroki/Math -translation_of: Learn/JavaScript/First_steps/Math ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

At this point in the course we discuss math in JavaScript — how we can use {{Glossary("Operator","operators")}} and other features to successfully manipulate numbers to do our bidding.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain familiarity with the basics of math in JavaScript.
- -

Wszyscy kochają matematykę

- -

Ok, może nie. Niektórzy  kochają matematykę, inni nienawidzą  od kiedy musieli nauczyć się tabliczki mnożenia i dzielenia przez liczby wielocyfrowe w szkole podstawowej, a częśc jest gdzieś pośrodku. Ale nikt z nas nie może zaprzeczyć, temu że matematyka jest fundamentalną częścią życia, bez której nie zajdzie się daleko. Jest to szczególnie prawdziwe kiedy uczymy się programowania w JavaScript (lub jakimkolwiek innym języku) -   tak wiele z tego co robimy polega na przetwarzaniu danych liczbowych, obliczaniu nowych wartości i tak dalej, że nie będziesz zaskoczony, że JavaScript posiada w pełni funkcjonalny zestaw funkcji matematycznych.

- -

Artykuł omawia podstawy, które musisz znać na ten moment.

- -

Typy liczb

- -

W programowaniu, nawet na pozór łatwy system dziesiętny, który tak dobrze znamy jest bardziej skąplikowany niż mógłbyś sądzić. Używamy różnych terminów do opisania różnych typów liczb dziesiętnych, dla przykładu: 

- - - -

We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like:

- - - -

Before you start to get worried about your brain melting, stop right there! For a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever.

- -

The second bit of good news is that unlike some other programming languages, JavaScript only has one data type for numbers, both integers and decimals — you guessed it, {{jsxref("Number")}}. This means that whatever type of numbers you are dealing with in JavaScript, you handle them in exactly the same way.

- -
-

Note: Actually, JavaScript has a second number type, {{Glossary("BigInt")}}, used for very, very large integers. But for the purposes of this course, we'll just worry about Number values.

-
- -

It's all numbers to me

- -

Let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your developer tools JavaScript console.

- -
    -
  1. First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: - 
    let myInt = 5;
-let myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
    3. -
  3. Now let's check that both our original variables are of the same datatype. There is an operator called {{jsxref("Operators/typeof", "typeof")}} in JavaScript that does this. Enter the below two lines as shown: - 
    typeof myInt;
-typeof myFloat;
    - You should get "number" returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!
    4. -
- -

Useful Number methods

- -

The Number object, an instance of which represents all standard numbers you'll use in your JavaScript, has a number of useful methods available on it for you to manipulate numbers. We don't cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you've read through this module a couple of times it is worth going to the object reference pages and learning more about what's available.

- -

For example, to round your number to a fixed number of decimal places, use the toFixed() method. Type the following lines into your browser's console:

- -
let lotsOfDecimal = 1.766584958675746364;
-lotsOfDecimal;
-let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
-twoDecimalPlaces;
- -

Converting to number data types

- -

Sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered into a form input, and the input type is text. There is a way to solve this problem — passing the string value into the Number() constructor to return a number version of the same value.

- -

For example, try typing these lines into your console:

- -
let myNumber = '74';
-myNumber + 3;
- -

You end up with the result 743, not 77, because myNumber is actually defined as a string. You can test this by typing in the following:

- -
typeof myNumber;
- -

To fix the calculation, you can do this:

- -
Number(myNumber) + 3;
- -

Arithmetic operators

- -

Arithmetic operators are the basic operators that we use to do sums in JavaScript:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExample
+AdditionAdds two numbers together.6 + 9
-SubtractionSubtracts the right number from the left.20 - 15
*MultiplicationMultiplies two numbers together.3 * 7
/DivisionDivides the left number by the right.10 / 5
%Remainder (sometimes called modulo) -

Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.

- 		-

8 % 3 (returns 2, as three goes into 8 twice, leaving 2 left over).

-
**ExponentRaises a base number to the exponent power, that is, the base number multiplied by itself, exponent times. It was first Introduced in EcmaScript 2016.5 ** 2 (returns 25, which is the same as 5 * 5).
- -
-

Note: You'll sometimes see numbers involved in arithmetic referred to as {{Glossary("Operand", "operands")}}.

-
- -
-

Note: You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in Math.pow(7, 3), 7 is the base and 3 is the exponent, so the result of the expression is 343. Math.pow(7, 3) is equivalent to 7**3.

-
- -

We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your developer tools JavaScript console to familiarize yourself with the syntax.

- -
    -
  1. First try entering some simple examples of your own, such as - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example: - 
    let num1 = 10;
-let num2 = 50;
-9 * num1;
-num1 ** 3;
-num2 / num1;
    -
    3. -
  3. Last for this section, try entering some more complex expressions, such as: - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

Some of this last set of calculations might not give you quite the result you were expecting; the  section below might well give the answer as to why.

- -

Operator precedence

- -

Let's look at the last example from above, assuming that num2 holds the value 50 and num1 holds the value 10 (as originally stated above):

- -
num2 + num1 / 8 + 2;
- -

As a human being, you may read this as "50 plus 10 equals 60", then "8 plus 2 equals 10", and finally "60 divided by 10 equals 6".

- -

But the browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25".

- -

This is because of operator precedence — some operators are applied before others when calculating the result of a calculation (referred to as an expression, in programming).  Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right).

- -

If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:

- -
(num2 + num1) / (8 + 2);
- -

Try it and see.

- -
-

Note: A full list of all JavaScript operators and their precedence can be found in Expressions and operators.

-
- -

Increment and decrement operators

- -

Sometimes you'll want to repeatedly add or subtract one to or from a numeric variable value. This can be conveniently done using the increment (++) and decrement (--) operators. We used ++ in our "Guess the number" game back in our first splash into JavaScript article, when we added 1 to our guessCount variable to keep track of how many guesses the user has left after each turn.

- -
guessCount++;
- -
-

Note: These operators are most commonly used in loops, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.

-
- -

Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:

- -
3++;
- -

So, you can only increment an existing variable. Try this:

- -
let num1 = 4;
-num1++;
- -

Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, then increments the variable. You can see that it's been incremented if you return the variable value again:

- -
num1;
- -

The same is true of -- : try the following

- -
let num2 = 6;
-num2--;
-num2;
- -
-

Note: You can make the browser do it the other way round — increment/decrement the variable then return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use ++num1 and --num2.

-
- -

Assignment operators

- -

Assignment operators are operators that assign a value to a variable. We have already used the most basic one, =, loads of times — it simply assigns the variable on the left the value stated on the right:

- -
let x = 3; // x contains the value 3
-let y = 4; // y contains the value 4
-x = y; // x now contains the same value y contains, 4
- -

But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExampleShortcut for
+=Addition assignmentAdds the value on the right to the variable value on the left, then returns the new variable valuex += 4;x = x + 4;
-=Subtraction assignmentSubtracts the value on the right from the variable value on the left, and returns the new variable valuex -= 3;x = x - 3;
*=Multiplication assignmentMultiplies the variable value on the left by the value on the right, and returns the new variable valuex *= 3;x = x * 3;
/=Division assignmentDivides the variable value on the left by the value on the right, and returns the new variable valuex /= 5;x = x / 5;
- -

Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.

- -

Note that you can quite happily use other variables on the right hand side of each expression, for example:

- -
let x = 3; // x contains the value 3
-let y = 4; // y contains the value 4
-x *= y; // x now contains the value 12
- -
-

Note: There are lots of other assignment operators available, but these are the basic ones you should learn now.

-
- -

Active learning: sizing a canvas box

- -

In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}

- -

Open in new window

- -

In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:

- - - -

Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.

- -

Comparison operators

- -

Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNamePurposeExample
===Strict equalityTests whether the left and right values are identical to one another5 === 2 + 4
!==Strict-non-equalityTests whether the left and right values are not identical to one another5 !== 2 + 3
<Less thanTests whether the left value is smaller than the right one.10 < 6
>Greater thanTests whether the left value is greater than the right one.10 > 20
<=Less than or equal toTests whether the left value is smaller than or equal to the right one.3 <= 2
>=Greater than or equal toTests whether the left value is greater than or equal to the right one.5 >= 4
- -
-

Note: You may see some people using == and != in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from ===/!==. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.

-
- -

If you try entering some of these values in a console, you'll see that they all return true/false values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:

- - - -

We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:

- -
<button>Start machine</button>
-<p>The machine is stopped.</p>
-
- -
const btn = document.querySelector('button');
-const txt = document.querySelector('p');
-
-btn.addEventListener('click', updateBtn);
-
-function updateBtn() {
-  if (btn.textContent === 'Start machine') {
-    btn.textContent = 'Stop machine';
-    txt.textContent = 'The machine has started!';
-  } else {
-    btn.textContent = 'Start machine';
-    txt.textContent = 'The machine is stopped.';
-  }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Open in new window

- -

You can see the equality operator being used just inside the updateBtn() function. In this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.

- -
-

Note: Such a control that swaps between two states is generally referred to as a toggle. It toggles between one state and another — light on, light off, etc.

-
- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Math.

- -

Summary

- -

In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.

- -

In the next article, we'll explore text and how JavaScript allows us to manipulate it.

- -
-

Note: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our Numbers and dates and Expressions and operators articles.

-
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html b/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html deleted file mode 100644 index 3898eb049c..0000000000 --- a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Co to jest JavaScript? -slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

Witamy w MDN na kursie JavaScript dla początkujących! W tym pierwszym artykule przyjrzymy się JavaScript z pewnej odległości, odpowiadając na pytania w stylu "co to jest?" i "co on robi?" oraz upewnimy się, że rozumiesz cel, któremu służy JavaScript.

- - - - - - - - - - - - -
Wymagania wstępne:Podstawowa znajomość komputera, podstawowa znajomość HTML i CSS.
Cel:Zapoznanie z istotą JavaScript, co on robi i jak jest dopasowywany do strony internetowej.
- -

Definicja ogólna

- -

JavaScript to język programowania, który umożliwia wdrożenie na stronie internetowej skomplikowanych elementów, dzięki którym strona ta może nie tylko wyświetlać statyczne informacje, ale również obsługiwać zmianę treść odpowiednio do sytuacji, wyświetlać interaktywne mapy i animacje grafiki 2D/3D , wyświetlać video itd. Jest to trzecia warstwa standardowych technologii internetowych, z których dwie (HTML i CSS) omówiliśmy w innych częściach "Strefy nauki".

- -

- - - -

Te trzy warstwy układają się jedna na drugiej. Jako przykład weźmy prostą etykietę tekstową. Możemy ją oznaczyć używajac kodu HTML, aby nadać jej strukturę:

- -
<p>Player 1: Chris</p>
- -

- -

Następnie możemy dodać kod CSS, aby nadać ładny wygląd:

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor:pointer;
-}
- -

- -

Na końcu możemy dodać kod Javascript, aby zaimplementować dynamiczne zachowanie:

- -
var para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  var name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}

- -

Kliknij na przycisk (etykietę tekstową), aby zobaczyć co się dzieje (na GitHub mozesz znależć kod źróðłowy i wersję demo — zobacz kod źródłowy lub przykład na żywo)!

- -

JavaScript pozwala osiągać o wiele bardziej zaawansowane efekty - sprawdź poniżej jego możliwości.

- -

Co można zrobić?

- -

Rdzeń języka JavaScript składa się z kilku funkcjonalności, które umożliwiają wykonanie rzeczy, takich jak te: 

- - - -

Jeszcze bardziej ekscytująca jest możliwość stosowania tzw. interfejsów programowania aplikacji (ang. Application Programming Interfaces - API), działających na szczycie rdzenia języka JavaScript.

- -

Interfejsy API są gotowymi zestawami bloków kodu, które umożliwiają programistom implementować programy, które w przeciwnym razie byłyby bardzo trudne do napisania przez programistę a nawet często niemożliwe do napisania przez niego. Spełniają one w programowaniu tą samą rolę, co gotowe segmenty mebli przy umeblowaniu domu — o wiele łatwiej jest wykorzystać gotowe panele i je poskręcać, niż samemu opracować projekt mebli, znaleźć drewno, pociąć go na deski, wysuszyć, przyciąć je na elementy swoich mebli i w końcu je samemu zmontować.

- -

Interfejsy API dzielą się ogólnie na dwie kategorie:

- -

- -

Interfesy API przeglądarek internetowych, które są wbudowane w przeglądarki. Służą do udostępniania danych z komputera, ale też mogą wykonywać bardziej zaawansowane rzeczy. Na przykład:

- - - -
-

Uwaga: wiele z powyższych przykładów nie będzie działać w starszych przeglądarkach - podczas eksperymentowania warto używać najnowszych wersji przeglądarek takich jak Firefox, Chrome, Edge czy Opera. Powinieneś także brać pod uwagę konieczność testowania swoich rozwiązań w wielu przegladarkach. Kod, który działa dobrze w Chrome nie zawsze będzie działał w Edge. (sprawdź: Testowanie wieloprzegladarkowe).

-
- -

Zewnętrzne interfejsy API nie są wbudowane w przeglądarki i trzeba samemu pobrać ich kod i informacje o zastosowaniu. Na przykład:

- - - -
-

Uwaga:  Interfesy API są zaawansowane i nie będziemy ich tu opisywać, możesz znaleźć o nich więcej informacji w module Interfejsy API działające po stronie klienta.

-
- -

W Internecie dostępnych jest bardzo dużo bibliotek API działających z przegladarkami internetowymi, ale jest to "temat na później". Nie zbudujesz następnego Facebooka czy Google Maps po 24 godzinach nauki JavaScriptu. Jest wiele zagadnień podstawowych, które musisz najpierw opanować. Ale przecież po to tu jesteś!

- -

Co robi JavaScript na stronie internetowej?

- -

Tutaj zaczniemy faktycznie przyglądać się pewnemu kodowi i robiąc to, zbadamy, co takiego dzieje się po uruchomieniu tego kodu na stronie internetowej.

- -

Przypomnijmy sobie, co dzieje się podczas ładowania strony internetowej w przeglądarce (pierwsz raz omówiliśmy to w artykule Jak działa CSS). Po załadowaniu strony internetowej (dokumentu HTML) do przeglądarki, zostaje uruchomioney jej kod (HTML, CSS i JavaScript) w środowisku wykonawczym tworzonym przez przeglądarkę (zakładka przegladarki). Jest to podobne do fabryki, która przyjmuje surowe materiały (kod) a wypuszcza gotowy produkt (stronę internetową).

- -

- -

JavaScript jest wykonywany przez silnik JavaScriptu w przeglądarce, po tym jak HTML i CSS zostaną skompletowane w stronę internetową. To zapewnia to, że struktura i style strony są już na miejscu w momencie gdy JavaScript zaczyna pracę.

- -

Jest to przydatne, jako że popularnym zastosowaniem JavaScriptu jest dynamiczne modyfikowanie HTMLa i CSSa aby edytować interfejs poprzez Document Object Model API. Jeżeli JavaScript załadowałby się i próbował wykonywać się przed tym jak HTML i CSS zostały załadowane, wtedy wystąpiłyby błędy.

- -

Bezpieczeństwo przeglądarki

- -

Każda karta przeglądarki jest swoim własnym kontenerem dla kodu, który w niej się wykonuje (te kontenery są nazywane technicznie "środowiskami wykonywania" (ang. "execution environments") - oznacza to, ze w większości przypadków kod w każdej karcie jest wykonywany oddzielnie i kod z jednej z kart nie jest w stanie bezpośrednio wpłynąć na ten wykonujący się w innej karcie. Jest to przykład dobrego środka bezpieczeństwa - jeżeli by tak nie było, wtedy możliwe stałoby się pisanie kodu, który wykradałby dane z innych witryn oraz  byłby w stanie wykonywać inne, podobnie złe rzeczy.

- -
-

Notatka:  Istnieją sposoby na bezpieczne wysyłanie kodu i danych pomiędzy różnymi stronami/kartami. Wykraczają one jednak poziomem poza ten kurs i nie zostaną one tu omówione.

-
- -

Kolejność wykonywania kodu JavaScript

- -

Kiedy przeglądarka napotyka blok kodu JS, wykonuje go po kolei, od góry do dołu. Oznacza to, że musisz być ostrożny, w jakiej kolejności umieszczasz instrukcje. Aby ukazać to zjawisko, wróćmy do bloku kodu z pierwszego przykładu:

- -
var para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  var name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Na początku wybieramy pierwszy paragraf (linia 1), dołączamy do niego event listener (linia 3), aby kiedy zostanie on klinięty, blok  updateName() (linie 5- 8) został uruchomiony. Blok  updateName() (ten typ kodu możliwego do użycia ponownie jest nazywany funkcją) pyta użytkownika o nowe imię, po czym wstawia to podane imię do paragrafu, aby uaktualnić widok.

- -

Jeżeli zamieniłbyś kolejność dwóch pierwszych linii kodu, przestałoby to działać - zamiast tego pojawiłby się błąd w konsoli przeglądarki - TypeError: para is undefined. Oznacza on, że ten obiekt jeszcze nie istnieje, a więc nie możemy dodać do niego event listenera.

- -
-

Notatka: Jest to bardzo popularny błąd - musisz uważać na to, że obiekty do których istnieją odwołania istnieją przed tym jak cokolwiek z nimi zrobisz.

-
- -

Kod interpretowany kontra kompilowany

- -

Mogłeś usłyszeć pojęcie kodu interpretowanego i kompilowanego. JavaScript jest językiem interpretowanym - kod jest wykonywany od góry do dołu i wynik jest zwracany natychmiastowo. Nie musisz transformować kodu w jakąś inną postać przed tym jak przeglądarka go wykona.

- -

Języki kompilowane są natomiast transformowane (kompilowane) do innej formy przed ich wykonaniem. Dla przykładu C/C++ jest kompilowane do kodu assemblera, który jest następnie wykonywany przez komputer.

- -

Oba te podejścia mają swoje wady i zalety, które nie zostaną tutaj omówione.

- -

Kod server-side kontra client-side

- -

Mogłeś także słyszeć pojęcia server-side i client-side, szczególnie w odniesieniu do tworzenia stron internetowych. Kod client-side jest kodem, który jest wykonywany na komputerze użytkownika - kiedy strona jest wyświetlana, kod client-side jest pobierany, następnie uruchamiany i wyświetlany przez przeglądarkę. W tym module JavaScript mówimy jednoznacznie o client-side JavaScript.

- -

Kod server-side jest natomiast wykonywany na serwerze, po czym wynik wykonania jest pobierany i wyświetlany przez przeglądarkę. Popularnymi przykładami języków server-side są PHP, Python, Ruby czy ASP.NET. I JavaScript! JavaScript może być także użyty jako język server-side, na przykład w popularnym środowisku Node.js - możesz więcej dowiedzieć się o tym w naszym poradniku Dynamic Websites – Server-side programming

- -

Słowo dynamiczny jest użyte zarówno do opisania zarówno client-side JavaScript i języki server-side — odnosi się ono do możliwości uaktualnienia widoku strony/aplikacji, aby możliwe było pokazanie różnych rzeczy w różnych okolicznościach; generując nową zawartość w zależności od potrzeb. Kod server-side  dynamicznie generuje nową zawartość na serwerze, na przykład stworzenie nowej tabeli HTML, kiedy client-side JavaScript dynamicznie generuje nową zawartość, na przykład tworząc nową tabelę HTML, wstawiając dane pobrane z serwera, następnie pokazując użytkownikowi tabelę na stronie. Znaczenie słowa jest lekko inne, ale podobne,  w dwóch kontekstach użycia i te dwa podejścia (server-side i client-side) zwykle współpracują ramię w ramię.

- -

Strona bez dynamicznie uaktualnianej zawartości nazywa się statyczną - zawsze pokazuje to samo.

- -

W jaki sposób dodać JavaScript do twojej strony?

- -

JavaScript jest dołączany do strony HTML w podobny sposób jak odbywa się to w wypadku CSS. Podczas gdy CSS używa elementów {{htmlelement("link")}} do dołączania zewnętrznych arkuszów i {{htmlelement("style")}} do dołączenia stylów bezpośrednio w dokumencie, JS potrzebuje tylko jednej rzeczy - elementu {{htmlelement("script")}}. Dowiedzmy się, jak to działa.

- -

Osadzony JavaScript

- -
    -
  1. Po pierwsze stwórz lokalną kopię naszego przykładowego pliku apply-javascript.html. Zapisz go gdzieś w katalogu.
    2. -
  2. Otwórz plik w twojej przeglądarce i edytorze tekstu. Ujrzysz prostą stronę z przyciskiem, który można kliknąć.
    3. -
  3. Następnie wejdź do edytora i dodaj następujący kod tuż przed końcem </body>: - 
    <script>
-
-  // Kod JavaScript będzie tu umieszczony.
-
-</script>
    -
    4. -
  4. Teraz dodamy trochę kodu w naszym elemencie  {{htmlelement("script")}}, aby strona wykonała coś bardziej interesującego  — dodaj poniższy kod bezpośrednio pod linią "// Kod JavaScript będzie tu umieszczony.": - 
    function stworzParagraf() {
-  var para = document.createElement('p');
-  para.textContent = 'Kliknąłeś przycisk!';
-  document.body.appendChild(para);
-}
-
-var przyciski = document.querySelectorAll('button');
-
-for (var i = 0; i < przyciski.length ; i++) {
-  przyciski[i].addEventListener('click', stworzParagraf);
-}
    -
    5. -
  5. Zapisz plik i odśwież stronę w przeglądarce - teraz gdy klikniesz przycisk, nowy paragraf jest generowany i umieszczany poniżej.
    6. -
- -
-

Notatka: Jeżeli przykład nie działa, przejdź go znowu krok po kroku, sprawdzając czy zrobiłeś wszystko poprawnie. Czy zapisałeś swoją lokalną wersję początkowego kodu jako plik .html? Czy dodałeś element  {{htmlelement("script")}} tuż przed zamknięciem  </body>? Czy wprowadziłeś kod JavaScript dokładnie tak, jak podane w przykłądzie?

- -

JavaScript uwzględnia wielkość liter i jest bardzo drobiazgowy, a więc musisz wprowadzić kod dokładnie tak,  jak zostało to pokazane. W innym wypadku może to nie zadziałać.

-
- -
-

Notatka:  Możesz zobaczyć ten kod także na GitHubie jako apply-javascript-internal.html (zobacz to także na żywo).

-
- -

Zewnętrzny JavaScript

- -

Działa to świetnie, ale co by było, gdybyśmy chcieli umieścić nasz kod JavaScript w oddzielnym pliku? Zróbmy to teraz.

- -
    -
  1. Po pierwsze, stwórz nowy plik w tym samym katalogu, w którym umieściłeś twój plik HTML. Nazwij go script.js  - upewnij się, że ma on rozszerzenie .js, jako że w ten sposób jest rozpoznawany jako JavaScript.
    2. -
  2. Następnie przekopiuj wszystkie skrypty z obecnego {{htmlelement("script")}} i wklej je do pliku .js. Zapisz ten plik. 
    3. -
  3. Teraz zastąp obecny element {{htmlelement("script")}} poniższym kodem: - 
    
-<script src="script.js"></script>
    -
    4. -
  4. Zapisz i odśwież przeglądarkę - powinieneś zobaczyć to samo! Działa to w ten sam sposób, ale teraz mamy kod JavaScript w oddzielnym pliku. Jest to dobra praktyka organizowania kodu i umożliwiania jego ponownego wykorzystania między wieloma plikami HTML. Do tego HTML jest łatwiejszy do czytania bez bloków kodu pomiędzy.
    5. -
- -

Notatka: Możesz zobaczyć ten kod na GitHubie -  apply-javascript-external.html i script.js (Możesz zobaczyć to także na żywo tu).

- -

Interpretowanie kodu JavaScript inline

- -

Czasami napotkasz kawałki prawdziwego kodu JavaScript pomiędzy kodem HTML. Może to wyglądać następująco:

- -

-function stworzParagraf() {
-  var para = document.createElement('p');
-  para.textContent = 'Kliknąłeś przycisk!';
-  document.body.appendChild(para);
-}
- -

-<button onclick="createParagraph()">Kliknij mnie!</button>
- -

Możesz przetestować tę wersję poniżej:

- -

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}

- -

Ten przykład ma dokładnie tę samą funkcjonalność jak dwa poprzednie przykłady, za wyjątkiem tego, że element {{htmlelement("button")}} zawiera w sobie handler onclick . Sprawia to, że funkcja zostanie uruchomiona gdy zostanie wcisnięty przycisk.

- -

Jednakże nie rób tego! Zanieczyszczanie HTMLa poprzez JavaScript jest uważane za złą praktykę. Jest to również nieefektywne - musiałbyś załączać atrybut onclick="stworzParagraf()"  do każdego przycisku, dla którego miałaby zastosowanie funkcja.

- -

Używanie czystych konstrukcji JavaScript pozwala na wybranie wszystkich przycisków za pomocą jednej instrukcji. Kod, którego użyliśmy do wykonania tego wygląda następująco:

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Może to wyglądać na lekko dłuższe niż atrybut  onclick, ale zadziała to dla wszyskich przycisków, bez znaczenia ile ich jest na stronie i ile z nich zostanie dodane bądź usunięte. Kod JS nie musi być zmieniony.

- -
-

Notatka:  Spróbuj edytować twoją wersję apply-javascript.html i dodaj kilka innych przycisków. Kiedy przeładujesz stronę, odkryjesz, że wszystkie przyciski tworzą paragraf po kliknięciu. Nieźle, co?

-
- -

Komentarze

- -

Tak samo jak w HTML i CSS, możliwe jest pisanie komentarzy w kodzie JavaScript. Zostaną one zignorowane przez przeglądarkę - istnieją tylko po to, aby służyć pomocą tym, którzy współpracują przy tym kodzie (i tobie, kiedy po 6 miesiącach wrócić do kodu i nie będziesz pamiętać, co on robi). Komentarze są bardzo użyteczne i powinieneś używać ich często, szczególnie w dużych aplikacjach. Istniają dwa typy komentarzy:

- - - -

Przykładowo możemy skomentować nasz ostatni kod JavaScript w ten sposób:

- -

-// Funkcja: tworzy nowy paragraf i dodaje na koniec <body>.
-
-function stworzParagraf() {
-  var para = document.createElement('p');
-  para.textContent = 'Kliknąłeś przycisk!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Pobierz listę wskaźników na wszystke przyciski na stronie.
-  2. Przejdź po wszystkich przycisków i dodaj każdemu z nich akcję pod klinięcie.
-
-  Kiedy przycisk jest wciśnięty, funkcja stworzParagraf() zostanie wywołana.
-*/
-
-var przyciski = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  przyciski[i].addEventListener('click', stworzParagraf);
-}
- -

Podsumowanie

- -

A więc proszę bardzo, oto twój pierwszy krok w kierunku świata JavaScript. Zaczęliśmy właśnie teorię, aby przyzwyczaić cię do używania JavaScript i do tego, co z jego pomocą można zrobić. W czasie trwania kursu między innymi zobaczyłeś kilka przykładów i nauczyłeś się, jak JavaScript jest używany z resztą kodu na twojej stronie.

- -

JavaScript może wyglądać obecnie lekko odstraszająco, ale nie martw się - w tym kursie wprowadzimy cię w jego świat krok po kroku. W kolejnym artykule zanurzysz się w praktycznej częsci, poprzez budowanie twoich własnych przykładów kodu w JavaScript.

- - - -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- -

W tym module

- - diff --git a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html b/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html deleted file mode 100644 index d1b55aea20..0000000000 --- a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Przechowywanie potrzebnych informacji — Zmienne -slug: Learn/JavaScript/Pierwsze_kroki/Zmienne -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
- -

Po przeczytaniu kilku ostatnich artykułów, powinieneś juz wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, jak używać go razem z innymi technologiami webowymi, oraz jak jego główne cechy wyglądają z wysokiego poziomu. W tym artykule, przejdziemy do fundamentów, poznamy jak wygląda pracowa z najbardziej podstawowym konceptem JavaScript - Zmiennymi. 

- -
- - - - - - - - - - - - -
Wymagania:Podstawowa znajomość komputera, podstawowe rozumienie HTML i CSS, oraz rozumienie czym jest JavaScript.
Cel:Zapoznać się z podstawami dotyczącymi zmiennych w JavaScript.
- -

Potrzebne Narzędzia

- -

Podczas tego artykułu, będziesz wpisywać linie kodu aby sprawdzić swoje rozumienie zawartości. Jeśli używasz przeglądarki desktopowej, najlepszym miejscem na wpisanie próbnego kodu jest konsola JavaScript Twojej przeglądarki (zobacz: What are browser developer tools aby zasięgnąć szczegółowych informacji, jak otworzyć to narzędzie).

- -

Niemniej jednak, zapewniliśmy również prostą konsolę JavaScript wbudowaną w poniższą stronę, abyś mógł wpisywać kod w przypadku gdy nie używasz przeglądarki z łatwym dostępem do konsoli JavaScript lub konsola wewnątrz strony jest dla Ciebie wygodniejsza.

- -

Czym jest zmienna?

- -

Zmienna jest to kontener na wartość, jak liczba, którą możemy użyć w sumowaniu lub łańcuch znaków, który możemy wykorzystać jako część zdania. Ale jedną rzeczą, która wyróżnia zmienne jest to, że ich wartość może ulec zmianie. Popatrzmy na prosty przykład:

- -
<button>Press me</button>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
- -

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

- -

W tym przykładzie, naciśnięcie przycisku uruchamia kilka linijek kodu. Pierwsza linia powoduje pojawienie się okna na ekranie, które pyta o imię, a następnie przechowuje wartość w zmiennej. Druga linia wyświetla wiadomość powitalną zawierajaca imię pobrane ze zmiennej.

- -

Aby zrozumieć dlaczego jest to tak przydatne, pomyślmy o tym jak stworzylibyśmy ten przykład, nie używając zmiennej. W efekcie wygladałoby to mniej więcej tak:

- -
var name = prompt('What is your name?');
-
-if (name === 'Adam') {
-  alert('Hello Adam, nice to see you!');
-} else if (name === 'Alan') {
-  alert('Hello Alan, nice to see you!');
-} else if (name === 'Bella') {
-  alert('Hello Bella, nice to see you!');
-} else if (name === 'Bianca') {
-  alert('Hello Bianca, nice to see you!');
-} else if (name === 'Chris') {
-  alert('Hello Chris, nice to see you!');
-}
-
-// ... i tak dalej ...
- -

Możesz nie rozumieć w pełni składni której tu używamy (jeszcze!), ale powinieneś być w stanie zrozumieć o co chodzi - jeśli nie moglibyśmy używać zmiennych, musielibyśmy implementować gigantyczny blok kodu, który sprawdzałby jakie było wpisane imię, a następnie wyświetlał odpowiednią wiadomość dla tego imienia. Oczywiście jest to całkowicie nieefektywne (kod jest znacznie większy, nawet dla tylko pięciu możliwych wyborów) i po prostu nie działałoby - nie mógłbyś przecież przechowywać wszystkich możliwych wyborów.

- -

Zmienne po prostu mają sens i jak tylko nauczysz się więcej o JavaScript, używanie ich stanie się dla Ciebie czyms naturalnym.

- -

Kolejna rzecz, która wyróżnia zmienne jest to, że mogą one zawierać prawie wszystko - nie tylko łańcuchy znaków i liczby. Zmienne moga również zawierać skomplikowane dane, a nawet całe funkcje do robienia niesamowitych rzeczy. Nauczysz sie o tym więcej, w ciągu kursu.  

- -
-

Uwaga: Mówimy że zmienne zawieraja wartości. Jest to ważne rozróżnienie. Zmienne nie są wartościami same w sobie; są kontenerami na wartości. Możesz je sobie wyobrazić jako kartonowe pudełka, w których możesz przechowywać rzeczy.

-
- -

- -

Deklarowanie zmiennej

- -

W celu użycia zmiennej, na początku musisz ją stworzyć - a dokładniej nazywa się to deklarowaniem zmiennej. Aby to zrobić, wpisujemy słowo kluczowe  var albo let a następnie nazwę, którą chcesz żeby miała Twoja zmienna:

- -
let myName;
-let myAge;
- -

Tutaj tworzymy dwie zmienne, które nazywają się myName i myAge. Spróbuj wpisać teraz te linie w konsoli Twojej przeglądarki lub w poniższej konsoli (możesz otworzyć otworzyć tą konsolę w oddzielnej karcie lub oknie jeśli wolisz). Nastepnie spróbuj stworzyć zmienną (lub dwie) z wybranymi przez Ciebie nazwami.

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Uwaga: W JavaScript, wszystkie instrukcje kodu powinny być zakończone średnikiem (;) — Twój kod może działać poprawnie dla pojedynczych linii, ale prawdopodobnie nie będzie, jeśli napiszesz wiele linii kodu razem. Spróbuj wejść w nawyk wpisywania go.

-
- -

Możesz przetestować czy te wartości istnieją teraz w środowisku wykonawczym wpisując po prostu nazwę zmiennej, np.

- -
myName;
-myAge;
- -

Obecnie nie mają one wartości; są pustymi kontenerami. Kiedy wpisujesz nazwy zmiennych, powinieneś otrzymać zwróconą wartość undefined. Natomiast jesli one nie istnieją, dostaniesz informację o błedzie — spróbuj wpisać:

- -
scoobyDoo;
- -
-

Uwaga: Nie pomyl zmiennej, która istnieje, ale nie ma zdefiniowanej wartości, ze zmienną, która wcale nie istnieje — to dwie zupełnie inne rzeczy. Wracając do porównania z pudełkami, które widziałeś wyżej — jeśli zmienna nie istnieje, to znaczy, że nie mamy żadnego kartonowego pudełka, do którego moglibyśmy wrzucić zawartość.
- Natomiast zmienna bez zdefiniowanej zawartości to po prostu puste pudełko. 

-
- -

Inicjalizacja zmiennej

- -

Kiedy już zadeklarujesz zmienną, możesz ją zainicjować nadając wartość. Robi się to, wpisując nazwę zmiennej, a następnie znak równości (=), poprzedzajacy wartość, którą chcesz jej nadać. Na przykład:

- -
myName = 'Chris';
-myAge = 37;
- -

Spróbuj teraz wrócić do konsoli i wpisać te linie. Powinieneś zobaczyć wartość, którą przypisałeś do zmiennej zwróconą w konsoli aby potwierdzić to w obu przypadkach. Znowu, możesz zwrócić wartości zmiennych po prostu wpisujac ich nazwy w konsoli — spróbuj ponownie:

- -
myName;
-myAge;
- -

Możesz zadeklarować i zainicjować zmienną w tym samym czasie, tak jak tu:

- -
let myDog = 'Rover';
- -

Tak prawdopodobnie będziesz robił najcześciej, jako że jest to szybsze niż wykonywanie dwóch czynności w dwóch oddzielnych linijkach.

- -

Róznice między var i let

- -

Możesz się teraz zastanawiać "Po co nam dwa słowa kluczowe do deklarowania zmiennych? Po co nam var i let?".

- -

Powód jest historyczny. Kiedy JavaScript został stworzony, mogliśmy korzystać tylko z var. Takie deklarowanie zmiennych działa, ale niesie ze sobą kilka niechcianych błędów.  Stworzono więc let, który jest obecnym standardem w języku JavaScript (to właśnie z niego powinniśmy korzystać). Główna róznica polega na tym, że let naprawia błędy, które mogliśmy napotkać podczas korzystania z var.

- -

A couple of simple differences are explained below. We won't go into all the differences now, but you'll start to discover them as you learn more about JavaScript (if you really want to read about them now, feel free to check out our let reference page).

- -

For a start, if you write a multiline JavaScript program that declares and initializes a variable, you can actually declare a variable with var after you initialize it and it will still work. For example:

- -
myName = 'Chris';
-
-function logName() {
-  console.log(myName);
-}
-
-logName();
-
-var myName;
- -
-

Note: This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.

-
- -

This works because of hoisting — read var hoisting for more detail on the subject.

- -

Hoisting no longer works with let. If we changed var to let in the above example, it would fail with an error. This is a good thing — declaring a variable after you initialize it makes for confusing, harder to understand code.

- -

Secondly, when you use var, you can declare the same variable as many times as you like, but with let you can't. The following would work:

- -
var myName = 'Chris';
-var myName = 'Bob';
- -

But the following would throw an error on the second line:

- -
let myName = 'Chris';
-let myName = 'Bob';
- -

You'd have to do this instead:

- -
let myName = 'Chris';
-myName = 'Bob';
- -

Again, this is a sensible language decision. There is no reason to redeclare variables — it just makes things more confusing.

- -

For these reasons and more, we recommend that you use let as much as possible in your code, rather than var. There is no reason to use var, unless you need to support old versions of Internet Explorer with your code (it doesn't support let until version 11; the modern Windows Edge browser supports let just fine).

- -
-

Note: We are currently in the process of updating the course to use let rather than var. Bear with us!

-
- -

Updating a variable

- -

Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:

- -
myName = 'Bob';
-myAge = 40;
- -

An aside on variable naming rules

- -

You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.

- - - -
-

Note: You can find a fairly complete list of reserved keywords to avoid at Lexical grammar — keywords.

-
- -

Good name examples:

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
- -

Bad name examples:

- -
1
-a
-_12
-myage
-MYAGE
-var
-Document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

Error-prone name examples:

- -
var
-Document
-
- -

Try creating a few more variables now, with the above guidance in mind.

- -

Variable types

- -

There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.

- -

So far we've looked at the first two, but there are others.

- -

Numbers

- -

You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:

- -
let myAge = 17;
- -

Strings

- -

Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.

- -
let dolphinGoodbye = 'So long and thanks for all the fish';
- -

Booleans

- -

Booleans are true/false values — they can have two values, true or false. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:

- -
let iAmAlive = true;
- -

Whereas in reality it would be used more like this:

- -
let test = 6 < 3;
- -

This is using the "less than" operator (<) to test whether 6 is less than 3. As you might expect, it will return false, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.

- -

Arrays

- -

An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:

- -
let myNameArray = ['Chris', 'Bob', 'Jim'];
-let myNumberArray = [10, 15, 40];
- -

Once these arrays are defined, you can access each value by their location within the array. Try these lines:

- -
myNameArray[0]; // should return 'Chris'
-myNumberArray[2]; // should return 40
- -

The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.

- -

You'll learn a lot more about arrays in a future article.

- -

Objects

- -

In programming, an object is a structure of code that models a real-life object. You can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

- -

Try entering the following line into your console:

- -
let dog = { name : 'Spot', breed : 'Dalmatian' };
- -

To retrieve the information stored in the object, you can use the following syntax:

- -
dog.name
- -

We won't be looking at objects any more for now — you can learn more about those in a future module.

- -

Dynamic typing

- -

JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (numbers, strings, arrays, etc).

- -

For example, if you declare a variable and give it a value enclosed in quotes, the browser will treat the variable as a string:

- -
let myString = 'Hello';
- -

It will still be a string, even if it contains numbers, so be careful:

- -
let myNumber = '500'; // oops, this is still a string
-typeof myNumber;
-myNumber = 500; // much better — now this is a number
-typeof myNumber;
- -

Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called typeof — this returns the data type of the variable you pass into it. The first time it is called, it should return string, as at that point the myNumber variable contains a string, '500'. Have a look and see what it returns the second time you call it.

- -

Constants in JavaScript

- -

Many programming languages have the concept of a constant — a value that once declared can never be changed. There are many reasons why you'd want to do this, from security (if a third party script changed such values it could cause problems) to debugging and code comprehension (it is harder to accidently change values that shouldn't be changed and mess things up).

- -

In the early days of JavaScript, constants didn't exist. In modern JavaScript, we have the keyword const, which lets us store values that can never be changed:

- -
const daysInWeek = 7;
-const hoursInDay = 24;
- -

const works in exactly the same way as let, except that you can't give a const a new value. In the following example, the second line would throw an error:

- -
const daysInWeek = 7;
-daysInWeek = 8;
- -

Summary

- -

By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/pl/learn/server-side/configuring_server_mime_types/index.html b/files/pl/learn/server-side/configuring_server_mime_types/index.html new file mode 100644 index 0000000000..87aea6b3b3 --- /dev/null +++ b/files/pl/learn/server-side/configuring_server_mime_types/index.html @@ -0,0 +1,114 @@ +--- +title: Poprawna kofiguracja MIME na serwerze +slug: Web/Security/Securing_your_site/Konfiguracja_MIME_na_serwerze +tags: + - HTTP +translation_of: Learn/Server-side/Configuring_server_MIME_types +--- +

Kontekst

+ +

Wiele serwerów webowych domyślnie ma skonfigurowane raportowanie typów MIME text/plain lub application/octet-stream w przypadku nierozpoznanych typów zawartości. Kiedy nowe typy zawartości dopiero powstają lub są dodawane do serwerów webowych zdarza się, że administratorzy webowi nie dodają nowo-powstałych typów MIME do ustawień serwera webowego. I to właśnie stanowi główną bolączkę użytkowników przeglądarek opartych o Gecko, które uznają typy MIME jako zraportowane przez serwery i aplikacje webowe.

+ +

Czym są typy MIME?

+ +

Typy MIME opisują typ danych zawartości mailowej lub obsługiwanej przez serwery lub aplikacje webowe i ich zadaniem jest pomoc przeglądarce w przetworzeniu i wyświetleniu zawartości. Przykładami typów MIME są:

+ + + +

Kontekst techniczny

+ +

Zarejestrowane wartości MIME są dostępne w Typy danych IANA | MIME. Specyfikacja HTTP definiuje nadzbiór typów MIME, który jest używany do opisu typów danych używanych w sieci WWW.

+ +

Dlaczego poprawne typy MIME są tak istotne?

+ +

Example of an incorrect MIME type result Jeśli serwer lub aplikacja webowa dla danej zawartości raportuje niepoprawny typ MIME, przeglądarka nie ma możliwości, wg specyfikacji HTTP, wiedzieć, że autor zainicjował przetworzenie i wyświetlenie danej zawartości w odmienny sposób, niż domyślny dla zraportowanego typu MIME.

+ +

Niektóre z przeglądarek, jak Microsoft® Internet Explorer, dążą do zezwalania niepoprawnie skonfigurowanym serwerom i aplikacjom webowym na zgadywanie, jaki powinien być poprawny typ MIME. Takie podejście uchroniło wielu administratorów webowych przed własnymi błędami - Internet Explorer kontynuuje przetwarzanie zawartości zgodnie z oczekiwaniami mimo, że sam serwer webowy nie jest poprawnie skonfigurowany i np. wyświetla obrazek, który został zraportowany jako będący rzekomo zwykłym tekstem.

+ +

Obsługa treści poprzez używanie poprawnego typu MIME jest istotna także z punktu widzenia bezpieczeństwa; istnieje ryzyko wyrządzenia przez niechcianą treść szkód na komputerze użytkownika poprzez symulowanie, że typ danej zawartości jest bezpieczny mimo, że w istocie może nie być to prawda.

+ +
+

Zauważ: Kiedyś Firefox ładował pliki CSS nawet, jeśli posiadały błędny typ MIME. Wystarczyło, że dokument HTML, który o nie wnioskował działał w trybie osobliwości (quirks mode). Ze względów bezpieczeństwa, {{ gecko("2.0") }} nie będzie dłużej kontynować tego typu zachowań w przypadku arkuszy stylów ładowanych z innych źródeł, niż dokument, który o nie wnioskował. Jeśli Twój arkusz stylów pochodzi z innego źródła, niż główny dokument musisz obsłużyć go poprzez poprawny typ MIME (text/css).

+ +

Gecko 1.9.1.11 (Firefox 3.5.11) i Gecko 1.9.2.5 (Firefox 3.6.5) również zaimplementowały tę łatkę bezpieczeństwa, ale by polepszyć zgodność tymczasowo istniała heurytrystyka pozwalająca na załadowanie, jeśli pierwsza linia w arkuszu stylów wydawała się być poprawną konstrukcją CSSową; heurytrystyka ta została usuninęta w Firefoxie 4 i od tego czasu należy odpowiednio ustawić typy MIME text/css, aby strony CSS zostały rozpoznane.

+
+ +

Dlaczego przeglądarki nie powinny zgadywać typów MIME

+ +

Poza naruszaniem specyfikacji HTTP istnieją dodatkowe powody, dla których zgadywanie typów MIME nie należy do najlepszych praktyk:

+ +

Utrata kontroli

+ +

Jeśli przeglądarka ignoruje zaraportowany typ MIME, administratorzy i autorzy webowi nie mają dłużej kontroli nad sposobem przetwarzania danej zawartości.

+ +

Przykładowo, strona WWW ukierunkowana na twórców witryn może życzyć sobie przesłania pewnych dokumentów, przykładowo HTMLowych, jak również text/html lub text/plain, by móc je przetworzyć i wyświetlić jako HTML lub jako kod źródłowy. Jeśli przeglądarka będzie zgadywać typ MIME, tego typu możliwość nie będzie dłużej dostępna dla autora.

+ +

Bezpieczeństwo

+ +

Niektóre typy zawartości, jak pliki wykonywalne, są przeważnie niebezpieczne. Z tego powodu te typy MIME przeważnie są ograniczone pod względem akcji, jakie podejmie przeglądarka w przypadku tego typu plików. Plik wykonywalny nie powinien wykonywać się na komputerze użytkownika, co najwyżej może mieć prawo do wyświetlenia okienka z zapytaniem do użytkownika, czy chce pobrać ten plik.

+ +

W Internet Explorerze zgadywanie typów MIME doprowadziło do naruszenia bezpieczeństwa - przez niepoprawne zgadywanie szkodliwe treści bywały oznaczane jako bezpieczne, co skutkowało pominięciem wyświetlania standardowego okienka pobierania i przedostawaniem się plików wykonywalnych na komputery użytkowników.

+ +

Jak określić typ MIME, który jest wysyłany przez serwer

+ +

W Firefoxie załaduj plik i użyj Narzędzia | Informacje o witrynie. Możesz również użyć Rex Swain's HTTP Viewer lub Live HTTP Headers , aby zobaczyć pełne nagłówki i treść każdego pliku wysłanego z serwera webowego.

+ +

W odniesieniu do standardów, tag meta o typie MIME jak np. <meta http-equiv="Content-Type" content="text/html"> powinien być ignorowany, jeśli w nagłówku znajduje się zapis {{HTTPHeader("Content-Type")}}. Zamiast szukać tej linii w kodzie źródłowym HTML lepiej użyć powyższych technik do określenia typu MIME wysyłanego przez serwer.

+ +

Jak określić prawidłowy typ MIME dla Twojej treści

+ +

Jest kilka kroków, które należy zrobić by określić poprawną wartość dla typu MIME twojej treści.

+ +
    +
  1. Jeśli twoja treść została utworzona z pomocą zewnętrznego oprogramowania, przeczytaj jego dokumentację by dowiedzieć się, jakie typy MIME powinny zostać zraportowane dla danych typów danych.
    2. +
  2. Zerknij na rejest typów danych IANA | MIME. Zawiera on wszystkie zarejestrowane typy MIME.
    3. +
  3. Jeśli typ danych jest wyświetlany poprzez rozszerzenie w Netscape Gecko, zainstaluj wtyczkę, a następnie sprawdź Pomoc->O Menu Wtyczek, by sprawdzić jakie typy MIME są związane z typem danych.
    4. +
  4. Poszukaj rozszerzenia pliku w FILExt lub File extensions reference, aby sprawdzić jakie typy MIME są związane z tym rozszerzeniem.
    5. +
+ +

Jak przygotować serwer, żeby wysyłał poprawne typy MIME

+ +

Fundamentalną kwestią jest konfiguracja Twojego serwera w taki sposób, by wysyłał poprawny nagłówek HTTP {{HTTPHeader("Content-Type")}} dla każdego dokumentu.

+ + + + + + + +
+

Informacje dot. dokumentu źródłowego

+ + +
+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
diff --git a/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html b/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html deleted file mode 100644 index a23787a253..0000000000 --- a/files/pl/learn/server-side/express_nodejs/szkolenie_aplikacja_biblioteka/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: 'Szkolenie z Express: Projekt aplikacji webowej "Biblioteka"' -slug: Learn/Server-side/Express_Nodejs/Szkolenie_aplikacja_biblioteka -tags: - - Początkujący -translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
- -

W pierwszym artykule naszego cyklu praktycznych lekcji omówimy będziemy się uczyć i jak będzie wyglądała tworzona w trakcie nauki aplikacja webowa, którą nazwiemy Biblioteka.

- - - - - - - - - - - - -
Wymagania:Przeczytanie artykułu Wprowadzenie do Express. Aby móc aktywnie uczestwiczyć w szkoleniu potrzebne Ci będzie także Przygotowanie środowiska do tworzenia applikacji w Node. 
Cel: -

Wprowadzenie do przykładowej aplikacji, która będzie tworzona w całym cyklu szkolenia i przedstawienie wszystkich tematów, które będą omawiane. 

-
- -

Wstęp

- -

Witaj w cyklu szkoleń MDN pt. tworzenie aplikacji "Biblioteka" w frameworku Express(Node), w którym będziemy projektować aplikację webową do zarządzania biblioteką

- -

A oto co będziemy robić w tym cyklu:

- - - -

Część tematów nie powinna być Ci obca, bo zostały już po krótce omówione lub zasygnalizowane. Po zakończeniu szkolenia powinieneś umieć samodzielnie wykonać prostą aplikację Express.

- -

Aplikacja webowa Biblioteka

- -

Biblioteka to nazwa naszej aplikacji, którą będziemy tworzyć i rozwijać w trakcie tego kursu. Domyślasz się, że celem aplikacji jest udostępnienie katalogu online do zarządzania niewielką biblioteką. Użytkownicy będą mogli przejrzeć dostępne książki i zarządzać swoim kontem.

- -

Temat przykładowej aplikacji został starannie dobrany, ponieważ możemy w niej skalować liczbę szczegółów według potrzeb oraz dobrze pokazać możliwości frameworku Express. Najważniejszą jednak sprawą jest to, że aplikacja będzie naszym przewodnikiem prowadzącym przez wszystkie funkcje, które są potrzebne w prawie każdej aplikacji webowej:

- - - -

Chociaż jest to przykład aplikacji o dużych możliwościach rozbudowy, to jej celem jest pokazanie minimum informacji potrzebnych do rozpoczęcia pracy z  Express. Dlatego będziemy przechowywać w niej informacje o książkach, kopiach książek, autorach itd. Nie będziemy jednak przechowywać informacji o innych elementach związanych z pracą biblioteki, ani nie zapewnimy infrastruktury niezbędnej do obsługi wielu witryn bibliotecznych lub innych funkcji „dużej biblioteki”. 

- -

Utknąłem, gdzie znajdę kod źródłowy?

- -

W trakcie szkolenia będziemy prezentować kolejne fragmenty kodu źródłowego przykładowej aplikacji, żebyś mógł je skopiować i wkleić do swojego projektu. Będą też fragmenty, dzięki którym, mamy nadzieję, będziesz mógł samodzielnie ją rozbudować (z niewielką pomocą).

- -

Jednak zamiast stosowania metody "Copy Paste", postaraj się samodzielnie przepisać kod. To zaowocuje w przyszłości lepszą znajomością kodu, gdy będziesz pisał coś podobnego.

- -

Gdy jednak utkniesz, bo nie będziesz umiał znaleźć błędu popełnionego przy przepisywaniu, kompletny kod aplikacji możesz znaleźć w repozytorium Github.

- -
-

Uwaga:  Wersje środowiska Node, Express oraz pozostałych modułów, dla których przetestowano opisywaną tu aplikację znajdują się w pliku package.json projektu.

-
- -

Podsumowanie

- -

Gdy już wiesz jaką aplikację będziemy tworzyć i czego będziesz się uczyć możesz przejść do następnego etapu i utworzyć szkielet projektu naszej przykładowej aplikacji.

- -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}

- -

W tym module

- - diff --git a/files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..a23787a253 --- /dev/null +++ b/files/pl/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -0,0 +1,89 @@ +--- +title: 'Szkolenie z Express: Projekt aplikacji webowej "Biblioteka"' +slug: Learn/Server-side/Express_Nodejs/Szkolenie_aplikacja_biblioteka +tags: + - Początkujący +translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
+ +

W pierwszym artykule naszego cyklu praktycznych lekcji omówimy będziemy się uczyć i jak będzie wyglądała tworzona w trakcie nauki aplikacja webowa, którą nazwiemy Biblioteka.

+ + + + + + + + + + + + +
Wymagania:Przeczytanie artykułu Wprowadzenie do Express. Aby móc aktywnie uczestwiczyć w szkoleniu potrzebne Ci będzie także Przygotowanie środowiska do tworzenia applikacji w Node. 
Cel: +

Wprowadzenie do przykładowej aplikacji, która będzie tworzona w całym cyklu szkolenia i przedstawienie wszystkich tematów, które będą omawiane. 

+
+ +

Wstęp

+ +

Witaj w cyklu szkoleń MDN pt. tworzenie aplikacji "Biblioteka" w frameworku Express(Node), w którym będziemy projektować aplikację webową do zarządzania biblioteką

+ +

A oto co będziemy robić w tym cyklu:

+ + + +

Część tematów nie powinna być Ci obca, bo zostały już po krótce omówione lub zasygnalizowane. Po zakończeniu szkolenia powinieneś umieć samodzielnie wykonać prostą aplikację Express.

+ +

Aplikacja webowa Biblioteka

+ +

Biblioteka to nazwa naszej aplikacji, którą będziemy tworzyć i rozwijać w trakcie tego kursu. Domyślasz się, że celem aplikacji jest udostępnienie katalogu online do zarządzania niewielką biblioteką. Użytkownicy będą mogli przejrzeć dostępne książki i zarządzać swoim kontem.

+ +

Temat przykładowej aplikacji został starannie dobrany, ponieważ możemy w niej skalować liczbę szczegółów według potrzeb oraz dobrze pokazać możliwości frameworku Express. Najważniejszą jednak sprawą jest to, że aplikacja będzie naszym przewodnikiem prowadzącym przez wszystkie funkcje, które są potrzebne w prawie każdej aplikacji webowej:

+ + + +

Chociaż jest to przykład aplikacji o dużych możliwościach rozbudowy, to jej celem jest pokazanie minimum informacji potrzebnych do rozpoczęcia pracy z  Express. Dlatego będziemy przechowywać w niej informacje o książkach, kopiach książek, autorach itd. Nie będziemy jednak przechowywać informacji o innych elementach związanych z pracą biblioteki, ani nie zapewnimy infrastruktury niezbędnej do obsługi wielu witryn bibliotecznych lub innych funkcji „dużej biblioteki”. 

+ +

Utknąłem, gdzie znajdę kod źródłowy?

+ +

W trakcie szkolenia będziemy prezentować kolejne fragmenty kodu źródłowego przykładowej aplikacji, żebyś mógł je skopiować i wkleić do swojego projektu. Będą też fragmenty, dzięki którym, mamy nadzieję, będziesz mógł samodzielnie ją rozbudować (z niewielką pomocą).

+ +

Jednak zamiast stosowania metody "Copy Paste", postaraj się samodzielnie przepisać kod. To zaowocuje w przyszłości lepszą znajomością kodu, gdy będziesz pisał coś podobnego.

+ +

Gdy jednak utkniesz, bo nie będziesz umiał znaleźć błędu popełnionego przy przepisywaniu, kompletny kod aplikacji możesz znaleźć w repozytorium Github.

+ +
+

Uwaga:  Wersje środowiska Node, Express oraz pozostałych modułów, dla których przetestowano opisywaną tu aplikację znajdują się w pliku package.json projektu.

+
+ +

Podsumowanie

+ +

Gdy już wiesz jaką aplikację będziemy tworzyć i czego będziesz się uczyć możesz przejść do następnego etapu i utworzyć szkielet projektu naszej przykładowej aplikacji.

+ +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}

+ +

W tym module

+ + -- cgit v1.2.3-54-g00ecf