14 |
15 | ```
16 |
17 | ## Ćwiczenie 2
18 |
19 | Dodaj funkcję, która za pomocą fetch API ściągnie dane z
20 | i przekaże wartości `{title}` i `{opening_crawl}`
21 | do struktury utworzonej powyżej.
22 |
--------------------------------------------------------------------------------
/_media/logo-javascript.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/timers/setinterval.md:
--------------------------------------------------------------------------------
1 | # setInterval
2 |
3 | Wbudowana funkcja `setInterval` będzie odpalać naszą funkcję co jakiś czas cyklicznie:
4 |
5 | ```js
6 | const time = setInterval(function() {
7 | console.log('losowy napis');
8 | }, 1000); // co sekundę w konsoli pojawi się `losowy napis`
9 | ```
10 |
11 | Żeby zatrzymać taki interwał, skorzystamy z metody clearInterval(),
12 | która podobnie do clearTimeout() przyjmuje tylko jeden parametr,
13 | który jest zmienną, pod która wcześniej zostało podstawione zadeklarowanie setInterval:
14 |
15 | ```js
16 | const time = setInterval(function() {
17 | console.log('Wypiszę się co 1 sekundę');
18 | }, 1000);
19 |
20 | clearInterval(time);
21 | ```
22 |
--------------------------------------------------------------------------------
/guide.md:
--------------------------------------------------------------------------------
1 | # Agenda
2 |
3 | > Ost. aktualizacja: **{docsify-updated}**.
4 |
5 | W trakcie warsztatu zostaną poruszone zagadnienia:
6 |
7 | * składnia języka JavaScript
8 | * sposoby wykorzystania JS
9 | * współpraca JS z HTML i CSS
10 | * typy i zmienne
11 | * operatory
12 | * struktury danych
13 | + obiekty
14 | + tablice
15 | * obiekty wbudowane w JS
16 | * instrukcje warunkowe
17 | * pętle
18 | * funkcje
19 | * metody, którymi dysponują obiekty i tablice
20 | * zakresy
21 | * współpraca JS z DOM
22 | + selektory DOM
23 | + poruszanie się po DOM
24 | + tworzenie i usuwanie elementów DOM
25 | * zdarzenia
26 | * komunikacja AJAX i asynchroniczność
27 | * wykorzystanie JSON
28 | * współpraca z zewnętrznymi API w celu wysyłania i przyjmowania danych
29 |
--------------------------------------------------------------------------------
/loops/for-in.md:
--------------------------------------------------------------------------------
1 | # Pętla `for..in`
2 |
3 | Pętla `for...in` iteruje właściwości obiektu i wykonuje ciało pętli jeden raz
4 | dla każdej wyliczalnej właściwości obiektu.
5 |
6 | ```js
7 | const obj = {a: 1, b: 2, c: 3};
8 |
9 | for (const prop in obj) {
10 | console.log(`obj.${prop} = ${obj[prop]}`);
11 | }
12 |
13 | // Output:
14 | // "obj.a = 1"
15 | // "obj.b = 2"
16 | // "obj.c = 3"
17 | ```
18 |
19 | Używaj `for…in`, aby iterować właściwości obiektu (klucze obiektu):
20 |
21 | ```js
22 | let oldCar = {
23 | make: 'Toyota',
24 | model: 'Tercel',
25 | year: '1996'
26 | };
27 |
28 | for (let key in oldCar) {
29 | console.log(`${key} --> ${oldCar[key]}`);
30 | }
31 |
32 | // make --> Toyota
33 | // model --> Tercel
34 | ```
35 |
--------------------------------------------------------------------------------
/introduction/practice.md:
--------------------------------------------------------------------------------
1 | # Zadania — Typy, zmienne, operatory
2 |
3 | Przełącz się na branch `02-types-variables-operators`
4 |
5 | ## Ćwiczenie 1
6 |
7 | W w pliku `index.html` sekcji `` wypisz wszystkie poznane
8 | typy proste i referencyjne.
9 |
10 | ## Ćwiczenie 2
11 |
12 | W pliku `/js/main.js` stwórz zmienne każdego typu. Wypisz w konsoli ich typy.
13 | Spróbuj wykonać na nich proste działania dodawania, odejmowania, mnożenia i dzielenia.
14 |
15 | ## Ćwiczenie 3
16 |
17 | Masz przykładową zmienną:
18 |
19 | ```js
20 | let width = "20px";
21 | ```
22 |
23 | Dodaj do niej wartość `30`. Wynik wypisz w konsoli.
24 |
25 | ## Ćwiczenie 4
26 |
27 | Co zostanie wyświetlone w konsoli?
28 |
29 | ```js
30 | const str = ('b' + 'a' + + 'a' + 'a').toLowerCase();
31 | console.log(str);
32 | ```
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "manual-javascript",
3 | "version": "1.0.0",
4 | "description": "Manual :: JavaScript",
5 | "main": "index.md",
6 | "dependencies": {
7 | "markdownlint-cli": "^0.22.0"
8 | },
9 | "devDependencies": {},
10 | "scripts": {
11 | "test": "npm run lint",
12 | "lint": "markdownlint . --ignore node_modules"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/lukaszbasaj/manual-javascript.git"
17 | },
18 | "keywords": [],
19 | "author": "",
20 | "license": "ISC",
21 | "bugs": {
22 | "url": "https://github.com/lukaszbasaj/manual-javascript/issues"
23 | },
24 | "homepage": "https://github.com/lukaszbasaj/manual-javascript#readme"
25 | }
26 |
--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 | "default": true,
3 | "no-bare-urls": true,
4 | "no-alt-text": false,
5 | "heading-increment": false,
6 | "MD002": {
7 | "level": 1
8 | },
9 | "MD003": {
10 | "style": "atx"
11 | },
12 | "MD004": {
13 | "style": "sublist"
14 | },
15 | "MD007": {
16 | "indent": 4
17 | },
18 | "MD009": {
19 | "br_spaces": 4,
20 | "list_item_empty_lines": true
21 | },
22 | "MD013": {
23 | "code_blocks": false,
24 | "headings": false
25 | },
26 | "MD024": {
27 | "siblings_only": true
28 | },
29 | "MD026": {
30 | "punctuation": ".,;:"
31 | },
32 | "MD033": {
33 | "allowed_elements": [
34 | "img",
35 | "kbd"
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/async/ajax.md:
--------------------------------------------------------------------------------
1 | # Co to jest AJAX?
2 |
3 | **Asynchronous Javascript And XML** - to technologia, która umożliwia nam
4 | ściąganie i wysyłanie części danych bez potrzeby przeładowania całej strony.
5 |
6 | AJAX używa kombinacji:
7 |
8 | * HTML i CSS do oznaczania i stylizacji informacji.
9 | * Dostęp do DOM za pomocą JavaScript w celu dynamicznego wyświetlania
10 | i interakcji z prezentowanymi informacjami.
11 | * Metoda asynchronicznej wymiany danych między przeglądarką a serwerem,
12 | co pozwala uniknąć przeładowywania stron. Zwykle używany jest obiekt
13 | `XMLHttpRequest (XHR)` lub `Promise`
14 | * Format danych wysyłanych do przeglądarki. Typowe formaty obejmują `XML`,
15 | wstępnie sformatowany HTML, zwykły tekst i `JavaScript Object Notation (JSON)`.
16 | Dane te mogą być tworzone dynamicznie przez jakąś formę skryptów po stronie serwera.
17 |
18 | 
19 |
--------------------------------------------------------------------------------
/async/fetch.md:
--------------------------------------------------------------------------------
1 | # Fetch API
2 |
3 | Nowe przeglądarki udostępniają nam Fetch API - nowy interfejs do pobierania zasobów.
4 | Fetch zwraca Promise, zatem możemy skorzystać z metod `then`, `all` i `catch`.
5 |
6 | ```js
7 | const url = 'http://fakes.herokuapp.com/photos/';
8 |
9 | fetch(url)
10 | .then(response => {
11 | return response.json();
12 | })
13 | .then((data) => {
14 | data.forEach((item) => {
15 | console.log(item);
16 | });
17 | });
18 | ```
19 |
20 | ## Z wykorzystaniem składni `Async / await`
21 |
22 | ```js
23 | async function makeRequest(url) {
24 | const response = await fetch(url);
25 | return response.json();
26 | }
27 |
28 | async function main() {
29 | const url = 'http://fakes.herokuapp.com/photos/';
30 | const response = await makeRequest(url);
31 | console.log({ response });
32 | }
33 |
34 | main().catch(err => console.error(err));
35 | ```
36 |
--------------------------------------------------------------------------------
/introduction/console.md:
--------------------------------------------------------------------------------
1 | # Korzystanie z `console.log`
2 |
3 | ## Wyświetlanie danych
4 |
5 | ```js
6 | console.log( 123 ); // 123
7 | ```
8 |
9 | ## Wyświetlanie wartości zmiennej
10 |
11 | ```js
12 | const name = "Doggie"
13 | console.log( name ); // "Doggie"
14 | ```
15 |
16 | ## Wyświetlanie obiektów
17 |
18 | ```js
19 | const person = {
20 | name: "Doggie",
21 | surname: "Do",
22 | age: 123
23 | };
24 | console.dir( person ); // "{ name: "Doggie", surname: "Do", age: 123 };"
25 | ```
26 |
27 | ## Grupowanie logów
28 |
29 | ```js
30 | console.group('First person');
31 | console.log('person name');
32 | console.log('person surname');
33 | console.groupEnd();
34 |
35 | console.group('Second person');
36 | console.log('name');
37 | console.log('surname');
38 | console.groupEnd();
39 | ```
40 |
41 | ## Wyświetlanie różnych typów logów
42 |
43 | ```js
44 | console.log( ... );
45 | console.info( ... );
46 | console.warn( ... );
47 | console.error( ... );
48 | ```
49 |
--------------------------------------------------------------------------------
/working-with-DOM/practice.md:
--------------------------------------------------------------------------------
1 | # Document Object Model
2 |
3 | Przełącz się na branch 06-dom
4 |
5 | - Ćwiczenie 1
6 |
7 | Użyj metod manipulowania elementami DOM, aby wypisać dowolny tekst w sekcji
8 |
9 | ```html
10 |
11 |
12 | ```
13 |
14 | ---
15 |
16 | - Ćwiczenie 2
17 |
18 | Za pomocą poznanych metod dostępu i pracy z elementami DOM stwórz szachownicę.
19 | Każdy kwadrat składający się na szachownicę powinien być elementem `div`.
20 | Szachownica powinna znaleźć się w kontenerze posiadającym klasę `chessboard`.
21 | Kontener `chessboard` powinien być dzieckiem `main`.
22 | Do wygenerowania elementów `div` będących polami szachownicy wykorzystaj pętlę `for`.
23 |
24 | 
25 |
26 | ---
27 |
28 | - Ćwiczenie 3
29 |
30 | Za pomocą poznanych metod dostępu i pracy z elementami DOM stwórz licznik
31 | odliczający czas pozostały do końca roku.
32 | Licznik powinien znajdować się w kontenerze `countdown`.
33 | Nagłówek licznika powinien znaleźć się w klasie css `countdown__header`.
34 |
35 | 
36 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # MIT License
2 |
3 | Copyright (c) 2020 Łukasz Basaj
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/introduction/what-is-js.md:
--------------------------------------------------------------------------------
1 | # Czym jest JavaScript?
2 |
3 | JavaScript to:
4 |
5 | * wieloplatformowy, zorientowany obiektowo skryptowy język programowania;
6 | * szybkość - wykonanie programu po stronie klienta odciąża serwer;
7 | * możliwość wykonania skryptu na każdej stronie internetowej;
8 | * relatywnie prosta składnia;
9 | * możliwość przypisania funkcji do zmiennej lub przekazania funkcji jako parametru
10 | wywołania innej funkcji;
11 | * nasłuchiwanie zdarzeń, takich jak kliknięcie myszką;
12 | * modyfikowanie kodu HTML i CSS strony po jej załadowaniu;
13 | * przesyłanie danych między serwerem a przeglądarką;
14 | * umożliwienie interakcji z kamerą internetową, mikrofonem i innymi urządzeniami;
15 | * tworzenie niesamowitych gier (takich jak *Cut the Rope*), które działają w przeglądarce;
16 | * typowanie dynamiczne - typ jednej zmiennej jest dynamicznie nadawany podczas
17 | wykonania programu i może się zmieniać;
18 | * typowanie słabe - konwersje na inny typ danych wykonują się automatycznie
19 | jeśli zachodzi taka potrzeba;
20 | * i wiele, wiele więcej 😊;
21 |
22 | Źródło: [Mozilla Developer Network](https://developer.mozilla.org)
23 |
--------------------------------------------------------------------------------
/built-in-objects/built-in-objects.md:
--------------------------------------------------------------------------------
1 | # Obiekty wbudowane
2 |
3 |
4 | | Typ | Co robi |
5 | |----------|------------|
6 | | *Array* | Pomaga przechowywać i pobierać kolekcję danych oraz manipulować nią|
7 | | *Boolean* | Działa jak obiekt opakowujący dla prymitywu `boolean`|
8 | | *Date* | Pozwala łatwiej reprezentować daty i pracować z nimi|
9 | | *Function* | Pozwala m.in. wywołać jakiś kod|
10 | | *Math* | Obiekt stworzony do lepszej pracy z liczbami|
11 | | *Number* | Działa jak obiekt opakowujący dla prymitywu `number`|
12 | | *RegExp* | Zapewnia funkcjonalność dla dopasowywania wzorców w tekście|
13 | | *String* | Działa jak obiekt opakowujący dla prymitywu `string`|
14 | | *Object* | Konstruktor obiektów tworzy opakowanie obiektu dla podanej wartości|
15 | | *Error* | Przechowuje błędy środowiska wykonawczego|
16 | | *Promise* | Reprezentuje ostateczne zakończenie (lub niepowodzenie) operacji asynchronicznej i jej wynikową wartość|
17 |
18 | [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
19 |
20 | ---
21 |
--------------------------------------------------------------------------------
/timers/settimeout.md:
--------------------------------------------------------------------------------
1 | # setTimeout
2 |
3 | Wbudowana funkcja `setTimeout` służy do opóźnienia wykonania funkcji przekazanej
4 | w pierwszym argumencie. Innymi słowy, który wykonuje funkcję lub określony
5 | fragment kodu po upływie zadanego czasu.
6 |
7 | ```js
8 | function myFunc() {
9 | console.log('Losowy tekst');
10 | }
11 |
12 | setTimeout(myFunc, 1000); // wykona się po sekundzie
13 | ```
14 |
15 | Gdy używasz setTimeout funkcja która ma być wykonana w jej domknięciu
16 | odkładana jest na stos (`call stack`, `task queue` ), a cała reszta kodu
17 | jest wykonywana dalej.
18 | Gdy zadany czas minie, twoja funkcja zostanie wywołana:
19 |
20 | ```js
21 | setTimeout(function() {
22 | console.log('Hipotetycznie trzecia funkcja');
23 | }, 2000);
24 |
25 | console.log('Hipotetycznie pierwsza funkcja');
26 | console.log('Hipotetycznie druga funkcja');
27 |
28 | ```
29 |
30 | Żeby przerwać wcześniej zainicjowany setTimeout (ale przed jego wykonaniem)
31 | korzystamy z metody clearTimeout() która w parametrze przyjmuje zmienną, pod
32 | którą zostało wcześniej podstawione wywołanie setTimeout():
33 |
34 | ```js
35 | const time = setTimeout(function() {
36 | console.log('Pełne zaskoczenie');
37 | }, 10000);
38 |
39 | clearTimeout(time);
40 | ```
41 |
--------------------------------------------------------------------------------
/condition-statements/practice.md:
--------------------------------------------------------------------------------
1 | # Instrukcje warunkowe i pętle
2 |
3 | Przełącz się na branch `04-conditional-statements-and-loops`
4 |
5 | ---
6 |
7 | - Ćwiczenie 1
8 |
9 | Używając `if...else`, napisz kod, który otrzymuje numer za pomocą monitu
10 | (`prompt()`) następnie wyświetli `alert`:
11 |
12 | - 1, jeśli wartość jest większa od zera,
13 | - -1, jeśli jest mniejsza niż zero,
14 | - 0, jeśli jest równa zero.
15 |
16 | W tym zadaniu zakładamy, że dane wejściowe są zawsze liczbą.
17 |
18 | ---
19 |
20 | - Ćwiczenie 2
21 |
22 | Przepisz poniższą instrukcję warunkową używając operatora `?`.
23 |
24 | ```js
25 | let a = 1;
26 | let b = 2;
27 | let result;
28 |
29 | if (a + b < 4) {
30 | result = 'Za mało';
31 | } else {
32 | result = 'Za dużo';
33 | }
34 | ```
35 |
36 | ---
37 |
38 | - Ćwiczenie 3
39 |
40 | Stwórz trzy zmienne: a = 4, b = 5, c = 6. Za pomocą instrukcji warunkowych sprawdź,
41 | która zmienna jest największa.
42 |
43 | ---
44 |
45 | - Ćwiczenie 4
46 |
47 | Przepisz poniższy kod, używając instrukcji `switch`:
48 |
49 | ```js
50 | let a = +prompt('a?', '');
51 |
52 | if (a == 0) {
53 | alert( 0 );
54 | }
55 | if (a == 1) {
56 | alert( 1 );
57 | }
58 |
59 | if (a == 2 || a == 3) {
60 | alert( '2,3' );
61 | }
62 |
63 | ```
64 |
65 | ---
66 |
--------------------------------------------------------------------------------
/functions/callback.md:
--------------------------------------------------------------------------------
1 | # Funkcja wywołana zwrotnego
2 |
3 | W JavaScript funkcje są obiektami. Z tego powodu funkcje mogą przyjmować funkcje
4 | jako argumenty i mogą być zwracane przez inne funkcje. Funkcje, które to robią,
5 | nazywane są funkcjami wyższego rzędu. Każda funkcja przekazana jako argument
6 | nazywa się funkcją wywołania zwrotnego.
7 |
8 | Stwórzmy własny przykładowy `callback`:
9 |
10 | ```js
11 | function sumTable(tab, fn) {
12 | let sum = 0;
13 | for (let i=0; i
4 | | Nazwa | Zapis | Znaczenie |
5 | |---------------------------------|--------------------|-------------|
6 | | Przypisanie | x = y | x = y |
7 | | Przypisanie dodawania | x += y | x = x + y |
8 | | Przypisanie odejmowania | x -= y | x = x - y |
9 | | Przypisanie mnożenia | x *= y | x = x * y |
10 | | Przypisanie dzielenia | x /= y | x = x / y |
11 | | Przypisanie reszty z dzielenia | x %= y | x = x % y |
12 | | Przypisanie potęgowania | x **= y | x = x ** y |
13 | | Przyporządkowanie przesunięcia w lewo | x <<= y | x = x << y |
14 | |Przyporządkowanie przesunięcia w prawo | x >>= y | x = x >> y |
15 | | Niepodpisane przypisanie do prawej zmiany | x >>>= y | x = x >>> y |
16 | | Bitowe przypisanie AND | x &= y | x = x & y |
17 | | Bitowe przypisanie XOR | x ^= y | x = x ^ y |
18 | | Bitowe przypisanie OR | x |= y | x = x | y |
19 |
20 | ---
21 | źródło: [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)
22 |
--------------------------------------------------------------------------------
/working-with-DOM/searching-elements.md:
--------------------------------------------------------------------------------
1 | # Wyszukiwanie elementów DOM
2 |
3 | Drzewo DOM składa się z obiektów zwanych węzłami. Istnieje wiele różnych typów
4 | węzłów, ale najczęściej będziesz pracować z węzłami elementów (elementy HTML),
5 | węzłami tekstowymi (dowolna treść tekstowa) i węzłami komentarzy (kod komentowany).
6 | Obiekt `document` jest własnym węzłem, który znajduje się w katalogu głównym.
7 |
8 | ```html
9 |
10 |
11 |
12 | Nodes
13 |
14 |
15 |
This is an element node
16 |
17 | This is a text node.
18 |
19 |
20 | ```
21 |
22 | ## Dostęp do elementów DOM
23 |
24 | Aby działać z elementami strony, musimy je wcześniej w jakiś sposób
25 | znaleźć i pobrać - do tego celu wykorzystamy kilka metod wymienionych poniżej:
26 |
27 | | Czego szukamy | Składnia selektora | Metoda |
28 | |-------------------|-----------------|--------------------------|
29 | | ID | #demo | getElementById() |
30 | | Class | .demo | getElementsByClassName() |
31 | | Tag | demo | getElementsByTagName() |
32 | | Selector (single) | | querySelector() |
33 | | Selector (all) | | querySelectorAll() |
34 |
--------------------------------------------------------------------------------
/object-methods/date.md:
--------------------------------------------------------------------------------
1 | # Obiekt Date
2 |
3 | Javascript udostępnia nam gotowy obiekt Date() który umożliwia nam w łatwy
4 | sposób manipulowanie czasem oraz datami.
5 |
6 | Aby wyświetlić na ekranie bieżącą datę jaka jest ustawiona w systemie
7 | klienta musimy utworzyć nowy obiekt:
8 |
9 | ```js
10 | const currentDate = new Date();
11 | console.log(currentDate);
12 | ```
13 |
14 | Podstawowe metody za pomocą których możemy w łatwy sposób
15 | formatować wygląd daty (najczęściej używane):
16 |
17 |
18 | Metoda | Opis działania
19 | ------- | -------
20 | getDate() | - zwraca dzień miesiąca (wartość z przedziału 1 - 31)
21 | getDay() | - zwraca dzień tygodnia (0 dla niedzieli, 1 dla poniedziałku, 2 dla wtorku itd)
22 | getYear() | - zwraca liczbę reprezentującą rok (dla lat 1900 - 1999 jest to 2-cyfrowa liczba np. 99, a dla późniejszych jest to liczba 4-cyfrowa np. 2002)
23 | getFullYear() | - zwraca pełną liczbę reprezentującą rok (np. 1999 lub 2000)
24 | getHours() | - zwraca aktualną godzinę (wartość z przedziału 0 - 23)
25 | getMilliseconds() | - zwraca milisekundy (wartość z przedziału 0 - 999)
26 | getMinutes() | - zwraca minuty (wartość z przedziału 0 - 59)
27 | getMonth() | - zwraca aktualny miesiąc (0 - styczeń, 1 - luty itp.)
28 |
29 | Przykładowe wyświetlenie godziny może mieć postać:
30 |
31 | ```js
32 | const currentDate = new Date();
33 | console.log(currentDate.getHours());
34 |
35 | //lub krótszy zapis
36 |
37 | console.log((new Date()).getHours());
38 | ```
39 |
--------------------------------------------------------------------------------
/operators/logical.md:
--------------------------------------------------------------------------------
1 | # **Operatory logiczne**
2 |
3 |
4 |
5 | | Operator | Użycie | Opis |
6 | |-------------------|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
7 | | Logiczne AND (&&) | `expr1 && expr2` | Zwraca expr1 jeśli wartość ta może być przekonwertowana na false, w przeciwnym razie zwraca expr2. Zatem, używany z wartościami typu logicznego, operator && zwraca true jeśli obydwa operandy mają wartość true, w przeciwnym razie zwraca false. |
8 | | Logiczne OR (II) | expr1 ||expr2 | Zwraca expr1, jeśli wartość ta może być przekonwertowana na true; w przeciwnym razie zwraca expr2. Tak więc, używany z wartościami typu logicznego, operator || zwraca true którykolwiek z operandów równy jest true. |
9 | | Logiczne NOT (!) | `!expr` | Zwraca false jeśli jego operand można przekonwertować na true; w przeciwnym razie zwraca true.
10 |
11 | ---
12 | Źródło: [Mozilla Developer Network](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Logical_Operators)
13 |
--------------------------------------------------------------------------------
/object-methods/sample-objects-methods.md:
--------------------------------------------------------------------------------
1 | # Obiekt Math
2 |
3 | W przeciwieństwie do innych obiektów globalnych, `Math` nie jest konstruktorem.
4 | Wszystkie właściwości i metody matematyczne są statyczne.
5 | Odwołujesz się do stałej pi jako `Math.PI` i wywołujesz funkcję
6 | sinus jako `Math.sin(x)`, gdzie `x` jest argumentem metody.
7 | Stałe są definiowane z pełną precyzją liczb rzeczywistych w JavaScript.
8 |
9 | Przykładowe metody `Math`:
10 |
11 | - `Math.abs(x)` - Zwraca wartość bezwzględną liczby.
12 | - `Math.ceil(x)` - Zwraca najmniejszą liczbę całkowitą większą lub równą liczbie.
13 | - `Math.floor(x)` - Zwraca największą liczbę całkowitą mniejszą lub równą liczbie.
14 | - `Math.max([x[, y[, …]]])` - Zwraca największą wartość
15 | - `Math.min([x[, y[, …]]])` - Zwraca najmniejszą wartość
16 | - `Math.random()` - Zwraca pseudolosową liczbę od 0 do 1.
17 | - `Math.round(x)` - Zwraca wartość liczby zaokrąglonej do najbliższej liczby całkowitej.
18 | - `Math.sqrt(x)` - Zwraca dodatni pierwiastek kwadratowy z liczby.
19 |
20 | Przykłady wykorzystania:
21 |
22 | ```js
23 | const var1 = 56.5;
24 | const var2 = 74.3;
25 |
26 | Math.min(var1, var2) //56.5
27 | Math.max(var1, var2)) //74.3
28 | Math.max(1,3,6,2) //6
29 |
30 | Math.cos(0) //1
31 | Math.abs(-1) //1
32 |
33 | Math.round(var1) //56
34 | Math.round(20.52) //21
35 | Math.round(-10.21) //-10
36 | Math.round(-11.82) //-12
37 |
38 | Math.floor(var1) //56
39 | Math.floor(20.52) //20
40 | Math.floor(-10.21) //-11
41 | Math.floor(-11.82) //-12
42 |
43 | Math.ceil(var1) //57
44 | Math.ceil(20.52) //21
45 | Math.ceil(-10.21) //-10
46 | Math.ceil(-11.82) //-11
47 | ```
48 |
--------------------------------------------------------------------------------
/objects/practice.md:
--------------------------------------------------------------------------------
1 | # Obiekty i tablice
2 |
3 | Przełącz się na branch `03-objects-and-arrays`
4 |
5 | ## Ćwiczenie 1
6 |
7 | Napisz kod, jeden wiersz dla każdej akcji:
8 |
9 | * Utwórz pusty obiekt `user`.
10 | * Dodaj właściwość `name` o wartości `John`.
11 | * Dodaj właściwość `surname` o wartości `Smith`.
12 | * Zmień wartość imienia na Pete.
13 | * Usuń właściwość `name` z obiektu.
14 |
15 | ## Ćwiczenie 2
16 |
17 | * Stwórz 2 obiekty produktów prod1 i prod2, gdzie każdy z nich będzie miał właściwości:
18 | + `name` - typu `string`,
19 | + `price` - typu `number`,
20 | + `weight` - typu `number`
21 | * Wypisz oba obiekty w konsoli.
22 | * Wypisz w konsoli teksty:
23 |
24 | ```text
25 | "Produkt numer jeden to: "
26 | "Produkt numer dwa to: "
27 | "Produkty kosztują razem: "
28 | "Produkty ważą razem: "
29 | ```
30 |
31 | Gdzie pod zmienne podstaw odpowiednie dane.
32 |
33 | ## Ćwiczenie 3
34 |
35 | Mając tablicę z nazwami kontynentów, posortuj ją alfabetycznie, a następnie
36 | odwróć kolejność jej elementów.
37 |
38 | ```js
39 | const kontynenty = [
40 | 'Europa', 'Azja', 'Antarktyda', 'Afryka',
41 | 'Australia i Oceania', 'Ameryka Północna',
42 | 'Ameryka Południowa'
43 | ];
44 | ```
45 |
46 | Dodaj na końcu tablicy `Nowy Nieodkryty Kontynent` i usuń z tablicy element `Antarktyda`.
47 |
48 | ## Ćwiczenie 4
49 |
50 | * Utwórz tablicę `style` z elementami „Jazz” i „Blues”.
51 | * Dołącz „Rock-n-Roll” na końcu.
52 | * Zamień wartość w środku na „Classics”.
53 | * Zdejmij pierwszą wartość tablicy i pokaż ją.
54 | * Dodaj Rap i Reggae do tablicy.
55 | * Zamień Rap na Metal.
56 |
--------------------------------------------------------------------------------
/loops/for.md:
--------------------------------------------------------------------------------
1 | # Pętla `for`
2 |
3 | Instrukcja `for` tworzy pętlę, która składa się z trzech opcjonalnych wyrażeń,
4 | zamkniętych w nawiasach i oddzielonych średnikami, a następnie instrukcji
5 | (zwykle instrukcji blokowej), która ma zostać wykonana w pętli.
6 |
7 | 
8 |
9 | ## Inicjalizacja
10 |
11 | Wyrażenie (w tym wyrażenia przypisania) lub deklaracja zmiennej. Zwykle używany
12 | do inicjalizacji zmiennej licznika. To wyrażenie może opcjonalnie zadeklarować
13 | nowe zmienne słowami kluczowymi `var` lub `let`. Zmienne zadeklarowane za pomocą
14 | `var` nie są lokalne dla pętli, tj. są w tym samym zakresie, w którym znajduje
15 | się pętla `for`. Zmienne zadeklarowane za pomocą `let` są lokalne dla instrukcji.
16 |
17 | Następująca instrukcja rozpoczyna się od zadeklarowania zmiennej i zainicjowania
18 | jej na 0. Sprawdza, czy i jest mniejsza niż sto, wykonuje dwie kolejne instrukcje
19 | i zwiększa `i` o 1 po każdym przejściu przez pętlę.
20 |
21 | ## Warunek kończący pętlę
22 |
23 | Wyrażenie do oceny przed każdą iteracją pętli. Jeśli to wyrażenie ma wartość
24 | `true`, instrukcja jest wykonywana. Ten test warunkowy jest opcjonalny.
25 | Jeśli zostanie pominięty, warunek zawsze będzie miał wartość `true`.
26 | Jeśli wyrażenie ma wartość `false`, wykonanie przeskakuje do pierwszego
27 | wyrażenia następującego po konstrukcji `for`.
28 |
29 | ## Jak ma się zmieniać licznik?
30 |
31 | Wyrażenie do oceny na końcu każdej iteracji pętli. Dzieje się tak przed
32 | kolejną oceną stanu. Ogólnie używany do aktualizacji - zwiększenia lub
33 | zmniejszania zmiennej licznika.
34 |
35 | ```js
36 | for (let i = 0; i < 100; i++) {
37 | console.log('Warsztaty WarsawJS są świetne!');
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/data-types/variables.md:
--------------------------------------------------------------------------------
1 | # Zmienne
2 |
3 | Zmienne w JavaScript są pojemnikami do przechowywania "reużywalnych" danych -
4 | jest to sposób przechowywania danych w pamięci, tak aby móc z nich wielokrotnie korzystać.
5 |
6 | Każda zmienna ma trzy atrybuty:
7 |
8 | * nazwa
9 | * miejsce w pamięci (do którego prowadzi identyfikator, czyli nazwa)
10 | * wartość
11 |
12 | Przed standardem ES2015, zmienne w JavaScript były deklarowane za pomocą słowa
13 | kluczowego `var`.
14 |
15 | ```js
16 | var x;
17 | var y;
18 | var z;
19 | ```
20 |
21 | Standard ES2015 (ES6) wprowadził dwa nowe słowa kluczowe, dzięki którym możemy
22 | deklarować zmienne - są to `const` i `let`.
23 |
24 | Dobre praktyki:
25 |
26 | * do nazywania zmiennych używamy języka angielskiego
27 | * nazwa zmiennej powinna wskazywać na to, czym zmienna jest / do czego służy /
28 | czym się zajmuje
29 | * używamy notacji wielbłądziej - przykład: `camelCase`
30 | * nazwa zmiennej nie może być jedną z listy słów zarezerwowanych
31 | * nazwa zmiennej nie może zawierać spacji, kropki, myślnika, cyfra nie może być
32 | na początku (może być dalej), może zawierać podkreślenie
33 | * można z dużej litery zacząć i używać ich w nazwie (wielkość liter ma znaczenie),
34 | można używać podkreślenia (_) i znaku $
35 |
36 | ## Lista słów zarezerwowanych
37 |
38 | ||||||||
39 | |-|-|-|-|-|-|-|
40 | |await|break|case|catch|class|const|continue|
41 | |debugger|default|delete|do|else|enum|export|
42 | |extends|false|finally|for|function|if|import|
43 | |in|instanceof|new|null|return|super|switch|
44 | |this|throw|true|try|typeof|var|void|
45 | |||while|with|yield|||
46 |
47 | ## Źródła
48 |
49 | * [ECMAScript® 2020 - Reserved Words](https://tc39.es/ecma262/#prod-ReservedWord/)
50 |
--------------------------------------------------------------------------------
/functions/function-expression.md:
--------------------------------------------------------------------------------
1 | # Wyrażenie funkcyjne
2 |
3 | W JavaScript funkcja nie jest „magiczną strukturą języka”, ale specjalnym
4 | rodzajem wartości.Używana wcześniej składnia nazywa się deklaracją funkcji:
5 |
6 | ```js
7 | function sayHi() {
8 | alert( "Hello" );
9 | }
10 | ```
11 |
12 | Istnieje inna składnia do tworzenia funkcji, która nazywa się wyrażeniem funkcji.
13 |
14 | ```js
15 | let sayHi = function() {
16 | alert( "Hello" );
17 | };
18 |
19 | ```
20 |
21 | Tutaj funkcja jest tworzona i przypisywana do zmiennej jawnie, jak każda inna wartość.
22 | Bez względu na to, jak funkcja jest zdefiniowana, jest to tylko wartość przechowywana
23 | w zmiennej `sayHi`. Znaczenie tych przykładów kodu jest takie samo:
24 | „utwórz funkcję i umieść ją w zmiennej `sayHi`”.
25 | W JavaScript funkcja jest wartością, więc możemy traktować ją jako wartość.
26 | W powyższym kodzie pod zmienną podstawiliśmy tak zwaną `funkcję anonimową`,
27 | czyli funkcję, która nie ma nazwy.
28 | Funkcja zadeklarowana za pomocą deklaracji jest od razu dostępna dla całego skryptu.
29 | Możemy więc odwoływać się do funkcji, która jest zadeklarowana później w kodzie.
30 | Działa tutaj mechanizm `hoisting`, znany ze zmiennych. Funkcje utworzone przez deklarację,
31 | poza naszymi plecami są przenoszone na początek danego scope (zasięgu).
32 | Przy wyrażeniu funkcyjnym mechanizm ten nie działa, a takie przedwczesne odwołanie
33 | się do funkcji jest niemożliwe.
34 |
35 | Funkcja zdefiniowana za pomocą wyrażenia musi być zadeklarowana przed jej wywołaniem:
36 |
37 | ```js
38 | myFunction(); // Uncaught ReferenceError: Cannot access 'myFunction' before initialization
39 |
40 | const myFunction = function() {
41 | console.log('...');
42 | }
43 | ```
44 |
--------------------------------------------------------------------------------
/operators/comparision.md:
--------------------------------------------------------------------------------
1 | # **Operatory porównania**
2 |
3 |
4 | | Operator | Opis | Przykłady powrotu `true` |
5 | |----------|------|-------------------------|
6 | |Jest równe (==) |Zwraca true, jeśli argumenty są równe. Jeśli dwa argumenty nie są tego samego typu, JavaScript próbuje konwertować argument do odpowiedniego typu dla porównania. | `3 == var1`; `"3" == var1`; `3 == '3'`;|
7 | |Nie jest równe (!=)|Zwraca true, jeśli argumenty nie są równe. Jeśli dwa argumenty nie są tego samego typu, JavaScript próbuje konwertować argument do odpowiedniego typu dla porównania.|`var1 != 4` `var2 != "3"`|
8 | |Ściśle równe (===)|Zwraca true, jeśli argumenty są równe i są tego samego typu.|`3 === var1`|
9 | |Ściśle nie jest równe (!==)|Zwraca true, jeśli argumenty nie są równe i/lub nie są tego samego typu.|`var1 !== "3"`` 3 !== '3'`|
10 | |Jest większe (>)|Zwraca true, jeśli lewy argument jest większy niż prawy argument.|`var2 > var1`|
11 | |Jest większe lub równe (>=)|Zwraca true, jeśli lewy argument jest większy lub równy prawemu argumentowi.|`var2 >= var1` `var1 >= 3`|
12 | |Jest mniejsze (<)|Zwraca true, jeśli lewy argument jest mniejszy niż prawy argument.|`var1 < var2`|
13 | |Jest mniejsze lub równe (<=)|Zwraca true, jeśli lewy argument jest mniejszy lub równy prawemu argum`var2 <= 5`|
14 |
15 | ---
16 | [JavaScript Equality Table](https://dorey.github.io/JavaScript-Equality-Table/)
17 |
18 | źródło: [ibm.com](https://www.ibm.com/support/knowledgecenter/en/SSVRGU_9.0.1/reference/r_wpdr_elements_operators_comparison_r.html)
19 |
20 | [Mozilla Developer Network](https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide/Obsolete_Pages/Przewodnik_po_j%C4%99zyku_JavaScript_1.5/Operatory/Operatory_por%C3%B3wnania)
21 |
--------------------------------------------------------------------------------
/data-types/let.md:
--------------------------------------------------------------------------------
1 | # Let
2 |
3 | 
4 |
5 | `let` pozwala na deklarowanie zmiennych, które są ograniczone do zakresu instrukcji
6 | blokowej lub wyrażenia, w którym jest używana, w przeciwieństwie do słowa kluczowego
7 | `var`, które definiuje zmienną globalnie lub lokalnie dla całej funkcji, niezależnie
8 | od zakresu bloku. Inną różnicą między `var` i `let` jest to, że ta ostatnia jest
9 | inicjalizowana na wartość tylko wtedy, gdy parser na to pozwoli.
10 |
11 | Zmienne zadeklarowane przez `let` mają swój zakres w bloku, dla którego są zdefiniowane,
12 | a także we wszystkich zawartych podblokach. W ten sposób `let` działa bardzo podobnie
13 | do `var`. Główną różnicą jest to, że zakresem zmiennej `var`
14 | jest cała obejmująca funkcja:
15 |
16 | ```js
17 | function varTest() {
18 | var x = 1;
19 | {
20 | var x = 2; // same variable!
21 | console.log(x); // 2
22 | }
23 | console.log(x); // 2
24 | }
25 |
26 | function letTest() {
27 | let x = 1;
28 | {
29 | let x = 2; // different variable
30 | console.log(x); // 2
31 | }
32 | console.log(x); // 1
33 | }
34 | ```
35 |
36 | Ponowne zadeklarowanie tej samej zmiennej w ramach tej samej funkcji lub zakresu
37 | bloku powoduje błąd `SyntaxError`:
38 |
39 | ```js
40 | if (x) {
41 | let foo;
42 | let foo; // SyntaxError thrown.
43 | }
44 |
45 | ```
46 |
47 | `let` nie tworzy właściwości obiektu `window`, gdy jest deklarowany globalnie
48 | (w najwyższym zakresie).
49 |
50 | ```js
51 | var x = 'global';
52 | let y = 'global';
53 | console.log(this.x); // "global"
54 | console.log(this.y); // undefined
55 | ```
56 |
57 | ## Hoisting `let`
58 |
59 | Pamiętajmy, że wynoszona na górę jest tylko deklaracja.
60 | A zadeklarowana zmienna (bez przypisania) ma wartość `undefined`.
61 |
--------------------------------------------------------------------------------
/data-types/const.md:
--------------------------------------------------------------------------------
1 | # const
2 |
3 | 
4 |
5 | `const` zachowuje się w bardzo podobny sposób do `let`.
6 | Ma również zakres blokowy i nie można go używać, dopóki nie zostanie zadeklarowany.
7 | Jest jednak jedna kluczowa różnica. Gdy zmienna zadeklarowana za pomocą słowa
8 | kluczowego `const` zostanie przypisana wartość, nie można jej ponownie przypisać.
9 | Musisz także zainicjować zmienną natychmiast po jej zadeklarowaniu.
10 | Jest to przydatne, ponieważ zapobiega to przypadkowemu zmianie przypisania zmiennej.
11 | Promuje również dobre praktyki kodowania, ponieważ zabrania używania jednej
12 | zmiennej do wielu celów podczas jej cyklu życia, co jest mylące i podatne na błędy.
13 |
14 | Chociaż jest to przydatna koncepcja, musisz zdawać sobie sprawę z pewnych ograniczeń.
15 | Jedynym ograniczeniem, jakie zapewnia `const`, jest zmiana przypisania.
16 | To nie znaczy, że obiekt przypisany do zmiennej `const` nie jest niezmienny!
17 | Deklaracja `const` tworzy odwołanie do wartości tylko do odczytu.
18 | Nadal możesz zmieniać jego właściwości, usuwać je lub dodawać nowe.
19 | Po prostu nie możesz przypisać zupełnie innego obiektu.
20 |
21 | Uwaga: dotyczy tylko obiektów. W przypadku prymitywów, takich jak liczby, ciągi
22 | znaków lub logiczne, jesteś bezpieczny, ponieważ są one niezmienne.
23 |
24 | Podsumowując:
25 |
26 | - Nie możemy ponownie przypisać wartości do `const`:
27 |
28 | ```js
29 | const a = 7;
30 | a = 5; // Uncaught TypeError: Assignment to constant variable.
31 | ```
32 |
33 | - Nie możemy też ponownie zadeklarować stałej:
34 |
35 | ```js
36 | const a = 7;
37 | const a = 5; // Uncaught SyntaxError: Identifier 'a' has already been declared
38 | ```
39 |
40 | ## Hoisting `const`
41 |
42 | Pamiętajmy, że wynoszona na górę jest tylko deklaracja. A zadeklarowana zmienna
43 | (bez przypisania) ma wartość undefined.
44 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Manual :: JavaScript
7 |
8 |
10 |
11 |
12 |
13 |
14 |
15 |
20 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/functions/arrows.md:
--------------------------------------------------------------------------------
1 | # Funkcje strzałkowe
2 |
3 | Funkcja strzałkowa ma 2 kluczowe zadania: skrócenie zapisu,
4 | oraz nie zmieniane kontekstu `this`.
5 |
6 | Jest jeszcze jedna bardzo prosta i zwięzła składnia do tworzenia funkcji, często
7 | lepsza niż Wyrażenia funkcji. Nazywa się to „funkcjami strzałek”,
8 | ponieważ wygląda to tak:
9 |
10 | ```js
11 | let func = (arg1, arg2, ...argN) => expression
12 | ```
13 |
14 | wyrażenie to tworzy funkcję `func`, która ma argumenty `arg1..argN`, prowadzi
15 | do ich użycia po prawej stronie i zwraca wynik.
16 |
17 | Innymi słowy, sens jest mniej więcej taki sam, jak:
18 |
19 | ```js
20 | let func = function(arg1, arg2, ...argN) {
21 | return expression;
22 | };
23 | ```
24 |
25 | jednak zapisany w bardziej zwięzły sposób.
26 |
27 | Rozważmy przykład:
28 |
29 | ```js
30 | let sum = (a, b) => a + b;
31 |
32 | /* funkcja strzałkowa jest krótszym zapisem poniższego wyrażenia:
33 |
34 | let sum = function(a, b) {
35 | return a + b;
36 | };
37 | */
38 | alert( sum(1, 2) ); // 3
39 |
40 | ```
41 |
42 | Jeśli mamy tylko jeden argument, można pominąć nawiasy wokół parametrów,
43 | co czyni go jeszcze krótszym:
44 |
45 | ```js
46 | // to samo, co:
47 | // let double = function(n) { return n * 2 }
48 | let double = n => n * 2;
49 |
50 | alert( double(3) ); // 6
51 | ```
52 |
53 | Jeśli nie ma argumentów, nawiasy powinny być puste (ale powinny być obecne):
54 |
55 | ```js
56 | let sayHi = () => alert("Hello!");
57 |
58 | sayHi();
59 | ```
60 |
61 | W powyższych przykładach pobrano argumenty z lewej strony `=>` i przekazano je
62 | do wyrażenia po prawej stronie. Czasami potrzebujemy czegoś nieco bardziej złożonego,
63 | na przykład wielu wyrażeń lub instrukcji. Jest to również możliwe, ale powinniśmy
64 | je zamknąć w nawiasach klamrowych. Następnie używamy `return` w ich obrębie.
65 |
66 | ```js
67 | let sum = (a, b) => { // nawias klamrowy otwiera wielolinijkowe wyrażenie
68 | let result = a + b;
69 | return result; // jeśli użwasz nawiasu klamrowego, użyj return
70 | };
71 |
72 | alert( sum(1, 2) ); // 3
73 | ```
74 |
--------------------------------------------------------------------------------
/arrays/arrays.md:
--------------------------------------------------------------------------------
1 | # Tablice
2 |
3 | Tablice są to uporządkowane zbiory zawierające dane.
4 |
5 | ## Tworzenie tablic
6 |
7 | Aby stworzyć nową tablicę korzystamy z `literału tablicowego` (nawiasów kwadratowych):
8 |
9 | ```js
10 | const table = []; //pusta tablica
11 | const tableWithNumbers = [1, 2, 3]; //tablica z 3 liczbami
12 | const tableWithStrings = ['Luke Skywalker', 'Darth Vader', 'Leia Organa']; //tablica z 3 elementami
13 | ```
14 |
15 | ```js
16 | const a = "Han Solo";
17 | const b = 234;
18 | const c = "CHEWBACCA";
19 |
20 | const tab = [a, b, c, "YODA", {...}]; //tablica z 5 elementami. Mogą to być oddzielne zmienne, ale też wartości wpisane w tablicy
21 | ```
22 |
23 | Elementy tablicy numerujemy zaczynając od `0`:
24 |
25 | | a | b | c | YODA | {...} |
26 | |---|---|---|------|-------|
27 | |tab[0]|tab[1]|tab[2]|tab[3]|tab[4]|
28 |
29 | Pierwsza wartość w tablicy ma index `0`, druga `1`, trzecia `2` i tak dalej,
30 | aż do ostatniego indeksu który wynosi `długość_tablicy-1`czyli `tab.length-1`.
31 |
32 | Tablicę można też stworzyć przy użyciu funkcji konstruktora:
33 |
34 | ```js
35 | const arr = new Array(1, 2, 3, 4);
36 | ```
37 |
38 | Odkładając na bok estetykę, musisz pamiętać o kilku subtelnych szczegółach
39 | podczas korzystania z konstruktora tablic. Ponieważ Array jest zmienną globalną,
40 | można ją zmodyfikować gdzie indziej w skrypcie, więc może nie działać zgodnie z oczekiwaniami.
41 |
42 | ```js
43 | Array = String;
44 | const arr = new Array(1, 2, 3, 4); // "1"
45 | ```
46 |
47 | Innym problemem jest to, że jeśli konstruktor tablicy otrzyma tylko jeden argument
48 | liczbowy, utworzy listę bez elementów, ale o długości równej temu argumentowi.
49 | Zatem `[„Anakin”]` jest identyczny z nowym `Array(„Anakin”)`, ale `[10]` to nie to
50 | samo, co nowy `Array(10)`.
51 |
52 | Możliwe jest pominięcie operatora `new` podczas korzystania z konstruktora Array.
53 | `new Array(„John”)` lub po prostu `Array(„John”)` robią to samo.
54 |
55 | Pamiętaj:
56 |
57 | - używaj `literałów tablicowych` zamiast konstruktora Array;
58 | - konstruktor `Array` zachowuje się inaczej, jeśli jedynym argumentem,
59 | jaki do niego przekazujemy jest liczba.
60 |
--------------------------------------------------------------------------------
/loops/for-of.md:
--------------------------------------------------------------------------------
1 | # Pętla `for...of`
2 |
3 | Instrukcja `for...of` tworzy pętlę, która iteruje obiekty iterowalne.
4 | For ... of loop został wprowadzony w `ES6` jako alternatywa zarówno dla `for...in`,
5 | jak i forEach() i obsługuje nowy protokół iteracji. `For...of` pozwala na zapętlenie
6 | struktur danych, które są iterowalne, takich jak tablice,
7 | ciągi znaków, mapy, zestawy i inne.
8 |
9 | ```js
10 | for (variable of iterable) {
11 | statement
12 | }
13 | ```
14 |
15 | - variable - dla każdej iteracji wartość właściwości jest przypisywana do zmiennej.
16 | - iterable - Obiekt, który ma wyliczalne właściwości i może być iterowany.
17 |
18 | ## Tablice
19 |
20 | Tablice są po prostu obiektami podobnymi do list. `Array.prototype` ma różne metody,
21 | które pozwalają na wykonywanie na nim operacji, takich jak mutacja i przechodzenie.
22 | Oto przykład zastosowania `for...of` na tablicy:
23 |
24 | ```js
25 | const iterable = ['mini', 'mani', 'mo'];
26 |
27 | for (const value of iterable) {
28 | console.log(value);
29 | }
30 |
31 | // Output:
32 | // mini
33 | // mani
34 | // mo
35 | ```
36 |
37 | ## Ciągi znakowe
38 |
39 | Ciągi służą do przechowywania danych w formie tekstowej.
40 | Przykład zastosowania `for...of` na ciągu znaków:
41 |
42 | ```js
43 | const iterable = 'javascript';
44 |
45 | for (const value of iterable) {
46 | console.log(value);
47 | }
48 |
49 | // Output:
50 | // "j"
51 | // "a"
52 | // "v"
53 | // "a"
54 | // "s"
55 | // "c"
56 | // "r"
57 | // "i"
58 | // "p"
59 | // "t"
60 |
61 | ```
62 |
63 | Tutaj iteracja wykonywana jest na łańcuchu, a znak na każdym indeksie jest drukowany.
64 |
65 | ## Obiekty
66 |
67 | Zwykłe obiekty nie są iterowalne.
68 | `for...of` loop działa tylko z obiektami iterowalnymi. Zwykłe obiekty nie
69 | są iterowalne. Spójrzmy:
70 |
71 | ```js
72 | const obj = { fname: 'foo', lname: 'bar' };
73 |
74 | for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
75 | console.log(value);
76 | }
77 | ```
78 |
79 | Definiujemy tutaj zwykły obiekt `obj`, a kiedy próbujemy wykonać na nim `for..of`,
80 | pojawia się błąd `TypeError: obj[Symbol.iterator] is not a function.`
81 |
--------------------------------------------------------------------------------
/events/mouse-events.md:
--------------------------------------------------------------------------------
1 | # Zdarzenia związane z kliknięciem
2 |
3 | Javascript udostępnia nam kilka gotowych metod dla elementów na stronie, które
4 | w prosty sposób pozwalają wywoływać dane eventy - tak jakby to realnie zrobił użytkownik:
5 |
6 | Przykładowe zdarzenia:
7 |
8 | | Name | Description |
9 | |-------------------|--------------------------------------------------------------------------------------------------------------------|
10 | | click | A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element. |
11 | | contextmenu | The right button of the mouse is clicked (before the context menu is displayed). |
12 | | dblclick | A pointing device button is clicked twice on an element. |
13 | | mousedown | A pointing device button is pressed on an element. |
14 | | mouseenter | A pointing device is moved onto the element that has the listener attached. |
15 | | mouseleave | A pointing device is moved off the element that has the listener attached. |
16 | | mousemove | A pointing device is moved over an element. (Fired continously as the mouse moves.) |
17 | | mouseover | A pointing device is moved onto the element that has the listener attached or onto one of its children. |
18 | | mouseout | A pointing device is moved off the element that has the listener attached or off one of its children. |
19 | | mouseup | A pointing device button is released over an element. |
20 | | pointerlockchange | The pointer was locked or released. |
21 | | pointerlockerror | It was impossible to lock the pointer for technical reasons or because the permission was denied. |
22 | | select | Some text is being selected. |
23 | | wheel | A wheel button of a pointing device is rotated in any direction. |
24 | |auxclick | A pointing device button (ANY non-primary button) has been pressed and released on an element. |
25 |
--------------------------------------------------------------------------------
/async/json.md:
--------------------------------------------------------------------------------
1 | # JavaScript Object Notation
2 |
3 | `JSON` to format pliku służący do przechowywania i wymiany danych.
4 | Dane są przechowywane w zestawie par klucz-wartość. Te dane są czytelne dla
5 | człowieka, co sprawia, że `JSON` jest idealny do ręcznej edycji.
6 |
7 | ```json
8 | {
9 | "dogs": [{
10 | "id": 0,
11 | "name": "maja",
12 | "race": "pies"
13 | }, {
14 | "id": 1,
15 | "name": "milus",
16 | "race": "pies"
17 | }],
18 | "cats": [{
19 | "id": 0,
20 | "name": "puszek",
21 | "race": "kot"
22 | }, {
23 | "id": 1,
24 | "name": "greebo",
25 | "race": "kot"
26 | }]
27 | }
28 | ```
29 |
30 | Z tego małego fragmentu widać, że klucze są zawinięte w podwójne cudzysłowy,
31 | dwukropek oddziela klucz i wartość, a wartość może być różnego rodzaju.
32 | Zestawy klucz-wartość są oddzielone przecinkiem.
33 |
34 | `JSON` urodził się w 2002 roku i zyskał ogromną popularność dzięki łatwości użycia
35 | i elastyczności, i chociaż narodził się ze świata JavaScript, szybko
36 | rozprzestrzenił się na inne języki programowania.
37 |
38 | Jest zdefiniowany w standardzie [ECMA-404](http://www.ecma-international.org/flat/publications/files/ECMA-ST/ECMA-404.pdf).
39 |
40 | Ciągi `JSON` są zwykle przechowywane w plikach .json i przesyłane przez sieć z typem
41 | aplikacji / json MIME.
42 |
43 | ## Typy danych
44 |
45 | JSON obsługuje niektóre podstawowe typy danych:
46 |
47 | * `Number`: dowolna liczba, która nie jest zawinięta w cudzysłów
48 | * `String`: dowolny zestaw znaków zawinięty w cudzysłów
49 | * `Boolean`: `true` lub `false`
50 | * `Array`: lista wartości, owinięta w nawiasy kwadratowe
51 | * `Object`: zestaw kluczy pary wartości, owinięte nawiasami klamrowymi
52 | * `null`: słowo null, które reprezentuje pustą wartość
53 |
54 | Każdy inny typ danych musi być serializowany do ciągu
55 | (a następnie zdezserializowany), aby można go było zapisać w `JSON`.
56 |
57 | ## Kodowanie i dekodowanie JSON w JavaScript
58 |
59 | ECMAScript 5 w 2009 roku wprowadził obiekt `JSON` w standardzie JavaScript,
60 | który oferuje między innymi metody `JSON.parse()` i `JSON.stringify()`.
61 | Zanim będzie można go użyć w programie JavaScript, `JSON` w formacie
62 | ciągu musi zostać przeanalizowany i przekształcony w dane,
63 | z których może korzystaćJavaScript.
64 |
65 | * `JSON.parse()` przyjmuje parametr `JSON` jako parametr i zwraca
66 | obiekt zawierający przeanalizowany `JSON`.
67 | * `JSON.stringify()` przyjmuje obiekt JavaScript jako parametr i zwraca ciąg
68 | znaków reprezentujący go w `JSON`
69 |
--------------------------------------------------------------------------------
/data-types/tdz.md:
--------------------------------------------------------------------------------
1 | # Temporal Dead Zone 💀
2 |
3 | Wcześniej wspomniano, iż deklaracje zmiennych i funkcji podlegają zjawisku
4 | `hoistingu`.
5 | Przypomnijmy na przykładzie.
6 |
7 | ```js
8 | {
9 | console.log( typeof a ); // undefined
10 |
11 | var a = 1;
12 | }
13 | ```
14 |
15 | Jak widać, można pobrać typ zmiennej przed jej deklaracją. Umożliwia to właśnie
16 | mechanizm `hoistingu`, który wszystkie deklaracje zmiennych “wynosi” na sam
17 | początek danego scope, zostawiając na miejscu jedynie przypisanie wartości do zmiennej.
18 | Powyższy przykład jest zatem widziany przez parser JS mniej więcej tak:
19 |
20 | ```js
21 | {
22 | var a;
23 | console.log( typeof a ); // undefined
24 |
25 | a = 1;
26 | }
27 | ```
28 |
29 | W przypadku deklaracji zmiennych za pomocą słowa kluczowego `let` sytuacja staje
30 | się ciekawsza:
31 |
32 | ```js
33 | {
34 | console.log( typeof a ); // Uncaught ReferenceError: a is not defined
35 |
36 | let a = 1;
37 | }
38 | ```
39 |
40 | Zatem można wnioskować, iż zmienne deklarowane przez `let` nie są hoistowane.
41 | Spójrzmy jednak na inny przykład:
42 |
43 | ```js
44 | ( function() {
45 | var a = 1;
46 |
47 | ( function() {
48 | console.log( typeof a ); // undefined
49 | var a = 'terefere';
50 | }() );
51 | }() );
52 | ```
53 |
54 | W tym przykładzie po raz kolejny pojawia się `undefined` zamiast `number`.
55 | Dlaczego? Bo zmienne są hoistowane na górę najbliższego scope.
56 | W tym wypadku wewnętrzna funkcja stanowi osobny scope, stąd przesłania liczbową
57 | zmienną z zewnętrznego scope.
58 |
59 | Jeśli założymy, że zmienne deklarowane przy pomocy `let` faktycznie nie są hoistowane,
60 | to w przykładzie z `let` powinniśmy uzyskać `number` (bo deklaracja `let` jest dopiero
61 | po `console.log`, zatem do tego czasu powinna być dostępna zmienna z wyższego
62 | scope). Sprawdźmy:
63 |
64 | ```js
65 | ( function() {
66 | let a = 1;
67 |
68 | ( function() {
69 | console.log( typeof a ); // Uncaught ReferenceError: a is not defined
70 | let a = 'terefere';
71 | }() );
72 | }() );
73 | ```
74 |
75 | W tym przypadku mamy właśnie do czynienia z `Temporal Dead Zone`.
76 | Mechanizm ten polega na:
77 |
78 | - hoistowaniu zmiennych zadeklarowanych za pomocą `let` i `const`
79 | - uniemożliwieniu dostępu do zmiennej w całym scope, przed jej zadeklarowaniem.
80 |
81 | Mechanizm ten wprowadzono dla `const`, aby uniemożliwić nadpisanie stałej
82 | wewnątrz danego scope i przeniesiono następnie to zachowanie także dla `let`
83 | – dla zachowania spójności.
84 |
85 | Źródło:
86 |
87 | - [Comandeer's blog](https://blog.comandeer.pl/tdz.html)
88 | - [Dr. Axel Rauschmayer](https://exploringjs.com/es6/ch_variables.html#sec_temporal-dead-zone)
89 |
--------------------------------------------------------------------------------
/functions/iife.md:
--------------------------------------------------------------------------------
1 | # IIFE - Samo wywołująca się funkcja
2 |
3 | W JavaScript istnieje pewien wzorzec anonimowej funkcji, która od razu sama się
4 | wywołuje - tak zwany `Immediately-invoked function expression (IIFE)`.
5 | Aby go zrozumieć, stwórzmy proste wyrażenie funkcyjne:
6 |
7 | ```js
8 | const fn1 = function() {...}
9 |
10 | const fn2 = function(a) {
11 | console.log(a);
12 | }
13 |
14 | ```
15 |
16 | Żeby teraz wywołać powyższą funkcję, musimy podać jej nazwę,
17 | za którą wstawimy parę nawiasów:
18 |
19 | ```js
20 | fn1();
21 |
22 | fn2("ala");
23 |
24 | ```
25 |
26 | Częstokroć jednak wcale nie będziemy potrzebować nazwy funkcji, bo wewnętrzny
27 | kod chcielibyśmy wykonać tylko jeden raz i to od razu.
28 | Czyli po definicji funkcji chcielibyśmy od razu ją wywołać:
29 |
30 | ```js
31 | function() {...}(); //zwróci błąd
32 |
33 | ```
34 |
35 | Powyższy kod zwróci błąd. Aby to naprawić, wystarczy skorzystać z zasad matematyki,
36 | gdzie nawiasami okrywamy część równania, która powinna się wykonać w pierwszej kolejności:
37 |
38 | ```js
39 | 2 + 2.toFixed() //zwróci błąd
40 | (2 + 2).toFixed() //na początku wykonaj równanie, potem toFixed()
41 |
42 | ```
43 |
44 | Podobnie do powyższego równania wystarczy zapis funkcji objąć nawiasami:
45 |
46 | ```js
47 | (function() {...})();
48 |
49 | (function(a) {
50 | console.log(a)
51 | })("ala");
52 |
53 | ```
54 |
55 | I tak właśnie powstał nasz wzorzec samo wywołującej się anonimowej funkcji:
56 |
57 | ```js
58 | (function() {
59 | console.log('Jakiś tekst'); //wywoła się od razu
60 | })();
61 |
62 | //jest praktycznie równoznaczne z
63 |
64 | function fn1() {
65 | console.log('Jakiś tekst');
66 | }
67 | fn1();
68 |
69 | ```
70 |
71 | Alternatywnym zapisem dla powyższego jest wzór zalecany przez
72 | Douglasa Crockforda - jednego z guru JavaScript.
73 |
74 | ```js
75 | (function() {...}()); //nawiasy w środku
76 |
77 | ```
78 |
79 | No dobrze, a czemu to wszystkiemu ma służyć?
80 | Jak wiemy, zakres `let` i `const` w przeciwieństwie do `var` mają zasięg blokowy:
81 |
82 | ```js
83 | {
84 | let a = 20;
85 | var b = 10;
86 | }
87 | console.log(a); //błąd - nie mamy dostępu
88 | console.log(b); //10
89 |
90 | ```
91 |
92 | Jeżeli chcemy ograniczyć zasięg var, musimy skorzystać z funkcji:
93 |
94 | ```js
95 | (function() {
96 | let a = 20;
97 | var b = 10;
98 | })();
99 |
100 | console.log(a); //błąd - nie mamy dostępu
101 | console.log(b); //błąd - nie ma dostępu
102 |
103 | ```
104 |
105 | W przeszłości - gdy używało się głównie var, stosowanie `IIFE`
106 | było dość powszechną metodą ograniczania zasięgu.
107 |
--------------------------------------------------------------------------------
/events/events.md:
--------------------------------------------------------------------------------
1 | # Zdarzenia
2 |
3 | Zdarzenia to działania, które mają miejsce w przeglądarce, które mogą być inicjowane
4 | przez użytkownika lub przez samą przeglądarkę. Poniżej znajduje się kilka przykładów
5 | typowych zdarzeń, które mogą się zdarzyć na stronie internetowej:
6 |
7 | - strona kończy ładowanie
8 | - Użytkownik klika przycisk
9 | - Użytkownik przesuwa kursor nad menu
10 | - Użytkownik przesyła formularz
11 | - Użytkownik naciska klawisz na klawiaturze
12 |
13 | `AddEventListener()` to wbudowana funkcja w JavaScript, która pobiera zdarzenie
14 | w celu nasłuchiwania i drugi argument, który należy wywoływać za każdym razem,
15 | gdy opisane zdarzenie zostanie uruchomione. Do jednego elementu można dodać dowolną
16 | liczbę procedur obsługi zdarzeń bez nadpisywania istniejących procedur obsługi zdarzeń.
17 |
18 | ```js
19 | element.addEventListener(event, listener, useCapture);
20 |
21 | ```
22 |
23 | Przyjmuje ona 3 argumenty: typ zdarzenia, funkcja callback do wywołania, oraz
24 | trzeci opcjonalny argument, który wskazuje jak mają się zachowywać dane zdarzenia.
25 |
26 | Po dodaniu event listenera funkcja do wykonania po zdarzeniu może być anonimowa
27 | lub nazwana. W poniższym przykładzie użyto anonimowej funkcji. W takim przypadku
28 | musisz zdefiniować kod w funkcji:
29 |
30 | ```js
31 | a.addEventListener("click", () => {
32 | alert("You clicked?");
33 | });
34 |
35 | ```
36 |
37 | Ten sam efekt uzyskamy używając funkcji nazwanej:
38 |
39 | ```js
40 | a.addEventListener("click", clickFunction);
41 | function clickFunction() {
42 | alert ("So that's what happens when you click.");
43 | }
44 | ```
45 |
46 | Metoda `addEventListener()` pozwala dodawać wiele procedur obsługi zdarzeń do
47 | jednego elementu, nie zastępując wcześniej przypisanych procedur obsługi zdarzeń.
48 | Spójrz na poniższy przykład:
49 |
50 | ```js
51 | a.addEventListener("click", firstFunction);
52 | a.addEventListener("click", secondFunction);
53 |
54 | ```
55 |
56 | Można również określić różne typy zdarzeń:
57 |
58 | ```js
59 | a.addEventListener("mouseover", mouseOverFunction);
60 | a.addEventListener("click", clickFunction);
61 | a.addEventListener("mouseout", mouseOutFunction);
62 |
63 | ```
64 |
65 | Bardzo ważnym szczegółem, o który trzeba zadbać jest fakt, iż wszelkie zdarzenia
66 | mogą być obsługiwane na zbudowanym drzewie DOM. W celu upewnienia się, że po
67 | załadowaniu HTML struktura DOM jest załadowana i można na niej wykonywać operacje,
68 | stosuje się zabezpieczenie w postaci zdarzenia, które sprawdza gotowość do
69 | rozpoczęcia pracy przez skrypty operujące na DOM.
70 | Zabezpieczenie to korzysta ze zdarzenia `DOMContentLoaded` i ma zwykle postać:
71 |
72 | `window.addEventListener('DOMContentLoaded', main)`
73 |
74 | [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/Events)
75 |
--------------------------------------------------------------------------------
/objects/this.md:
--------------------------------------------------------------------------------
1 | # Co to jest “this” w JavaScript
2 |
3 | Słowo kluczowe `this` odnosi się do obiektu, który wykonuje bieżący fragment kodu.
4 | Innymi słowy, każda funkcja w JavaScript podczas wykonywania ma odniesienie
5 | do bieżącego kontekstu wykonania, zwanego `this` .
6 | Kontekst wykonania oznacza tutaj, jak wywoływana jest funkcja. Aby zrozumieć
7 | słowo kluczowe `this` , musimy tylko wiedzieć, jak, kiedy i skąd funkcja jest
8 | wywoływana, nie ma znaczenia, w jaki sposób i gdzie
9 | funkcja jest zadeklarowana lub zdefiniowana.
10 |
11 | ```js
12 | var name = "Han Solo";
13 | const obj1 = { name: "Luke Skywalker", pilot: pilot };
14 | const obj2 = { name: "Chewbacca", pilot: pilot };
15 |
16 | function pilot() {
17 | console.log(this.name);
18 | }
19 |
20 | pilot(); // "Han Solo"
21 | obj1.pilot(); // "Luke Skywalker"
22 | obj2.pilot(); // "Chewbacca"
23 | ```
24 |
25 | W powyższym fragmencie kodu funkcja `pilot()` wyświetla `this.name` , co oznacza,
26 | że próbuje wyświetlić wartość właściwości `name` bieżącego kontekstu wykonania
27 | (tj.obiekt `this` ). W powyższym fragmencie kodu, gdy wywoływana jest funkcja
28 | `pilot()` , wypisuje `"Han Solo"` , ponieważ kontekst wykonania nie jest określony,
29 | więc domyślnie jest to kontekst globalny, a w kontekście globalnym występuje nazwa
30 | zmiennej o wartości `"Han Solo"` . W przypadku wywołania `obj1.pilot()` drukowane
31 | jest `„Luke Skywalker”` , a przyczyną tego jest funkcja `pilot()` wywoływana z
32 | kontekstem wykonania jako `obj1` , więc `this.name` zmieniło się na `obj1.name`.
33 | To samo z wywołaniem `obj2.pilot()` , gdzie kontekstem wykonania funkcji
34 | `pilot()` jest `obj2` .
35 |
36 | **Domyślne i niejawne wiązanie `this` **
37 |
38 | * jeśli jesteśmy w `strict mode` , wówczas domyślna wartość słowa kluczowego `this`
39 | jest niezdefiniowana, w przeciwnym razie słowo kluczowe `this` działa jako
40 | obiekt globalny,nazywa się to domyślnym wiązaniem słowa kluczowego `this`.
41 | (domyślnie jest to obiekt okna w przypadku przeglądarki).
42 | * gdy istnieje właściwość obiektu, którą wywołujemy jako metodę, wówczas obiekt
43 | staje się obiektem `this` lub obiektem kontekstu wykonania dla tej metody, oznacza
44 | to niejawne powiązanie słowa kluczowego `this`.
45 |
46 | ```js
47 | const obj1 = {
48 | name: "Luke Skywalker",
49 | pilot: function() {
50 | console.log(this.name);
51 | }
52 | };
53 |
54 | const obj2 = {
55 | name: "Chewbacca",
56 | pilot: obj1.pilot
57 | }
58 | var name = "Han Solo";
59 | var pilot = obj1.pilot
60 |
61 | pilot(); // "Han Solo"
62 | obj1.pilot(); // "Luke Skywalker"
63 | obj2.pilot(); // "Chewbacca"
64 | ```
65 |
66 | W powyższym fragmencie kodu wywołanie funkcji `pilot()` jest przykładem
67 | domyślnego wiązania. `obj1.pilot()` i `obj2.pilot()` są przykładami niejawnego
68 | wiązania. Tutaj funkcja `pilot()` jest zadeklarowana jako część `obj1`, ale
69 | niezależnie od tego, kiedy wykonujemy `obj2.pilot()`, kontekstem wykonania jest
70 | `obj2`, więc obiekt `obj2.name` jest wypisany w konsoli.
71 |
72 | Ważne jest, aby wiedzieć, w jaki sposób, kiedy i skąd funkcja jest wywoływana,
73 | nie ma znaczenia, gdzie funkcja jest zadeklarowana.
74 |
--------------------------------------------------------------------------------
/working-with-DOM/dom.md:
--------------------------------------------------------------------------------
1 | # DOM
2 |
3 | `Document Object Model (DOM)` to interfejs programistyczny dla dokumentów HTML i
4 | XML (Extensible markup language). Określa logiczną strukturę dokumentów oraz
5 | sposób dostępu do dokumentu i manipulowania nim.
6 |
7 | ## Uwaga: Nazywa się to strukturą logiczną, ponieważ DOM nie określa żadnych relacji między obiektami
8 |
9 | DOM to sposób reprezentowania strony w uporządkowanej , hierarchicznej formie,
10 | dzięki czemu programiści i użytkownicy mogą łatwiej przeglądać dokument.
11 | Dzięki DOM możemy łatwo uzyskiwać dostęp do znaczników, identyfikatorów,klas,
12 | atrybutów lub elementów i manipulować nimi za pomocą poleceń lub metod
13 | udostępnianych przez obiekt Document.
14 |
15 | ## Struktura DOM
16 |
17 | DOM można traktować jako Drzewo lub Las (więcej niż jedno drzewo).
18 | Termin model struktury jest czasem używany do opisania drzewiastej reprezentacji
19 | dokumentu. Jedną ważną właściwością modeli struktur DOM jest izomorfizm strukturalny:
20 | jeśli jakiekolwiek dwie implementacje DOM zostaną użyte do stworzenia reprezentacji
21 | tego samego dokumentu, utworzą ten sam model struktury, z dokładnie tymi samymi
22 | obiektami i relacjami. Dlaczego nazywany jako model obiektowy? Dokumenty są
23 | modelowane przy użyciu obiektów, a model obejmuje nie tylko strukturę dokumentu,
24 | ale także zachowanie dokumentu i obiekty, z których składa się podobne elementy
25 | znacznika z atrybutami w HTML.
26 |
27 | Zobaczmy właściwości obiektu dokument, do którego można uzyskać dostęp
28 | i modyfikować obiekt dokumentu.
29 | 
30 |
31 | - Window Object: Obiekt okna znajduje się zawsze na szczycie hierarchii.
32 | - Document object: Po załadowaniu dokumentu HTML do okna staje się on obiektem dokumentu.
33 | - Form Object: Jest reprezentowany przez znaczniki `form`.
34 | - Link Objects: Jest reprezentowany przez tagi `link`.
35 | - Anchor Objects: Jest reprezentowany przez tagi `href`.
36 | - Form Control Elements: Formularz może zawierać wiele elementów sterujących,
37 | takich jak `textarea`, `buttons`, `radio buttons`, and `checkboxes`, etc.
38 |
39 | Metody obiektu `document`:
40 |
41 | - write(“string”): zapisuje podany ciąg w dokumencie.
42 | - getElementById(): zwraca element o podanej wartości id.
43 | - getElementsByName(): zwraca wszystkie elementy o podanej wartości nazwy.
44 | - getElementsByTagName(): zwraca wszystkie elementy o podanej nazwie znacznika.
45 | - getElementsByClassName(): zwraca wszystkie elementy o podanej nazwie klasy.
46 |
47 | ```html
48 |