├── .circleci └── config.yml ├── .gitignore ├── .markdownlint.json ├── .nojekyll ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── _coverpage.md ├── _media ├── logo-javascript.svg └── logo-warsawjs.svg ├── _scripts └── sidebar-extension.js ├── _sidebar.md ├── arrays ├── arrays-operations.md └── arrays.md ├── async ├── ajax.md ├── fetch.md ├── how-ajax-works.jpg ├── http.md ├── json.md ├── practice.md ├── promise.md └── restapi.md ├── built-in-objects └── built-in-objects.md ├── condition-statements ├── if-else.md ├── if.png ├── practice.md ├── switch.md └── switch.png ├── data-types ├── const.md ├── const.png ├── conversion.md ├── let.md ├── let.png ├── tdz.md ├── types.md ├── var.md ├── var.png └── variables.md ├── events ├── events.md ├── keyboard-events.md ├── mouse-events.md └── practice.md ├── functions ├── arrows.md ├── callback-hell.png ├── callback.md ├── function-expression.md ├── function.png ├── functions.md ├── iife.md └── practice.md ├── guide.md ├── index.html ├── introduction ├── console.md ├── how-to-use-js.md ├── js_external_file.png ├── js_logo.png ├── practice.md └── what-is-js.md ├── loops ├── do-while.md ├── for-in.md ├── for-of.md ├── for.md ├── for.png ├── practice.md └── while.md ├── modern-features ├── classes.md ├── destructuring.md ├── operator-rest.md └── operator-spread.md ├── object-methods ├── date.md └── sample-objects-methods.md ├── objects ├── create-object.md ├── introduction.md ├── practice.md └── this.md ├── operators ├── arithmetics.md ├── assignments.md ├── comparision.md └── logical.md ├── package-lock.json ├── package.json ├── sw.js ├── timers ├── setinterval.md └── settimeout.md └── working-with-DOM ├── DOM.png ├── DOM_table_example.png ├── chessboard.png ├── counter.png ├── creating-elements.md ├── dom.md ├── practice.md └── searching-elements.md /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | orbs: 3 | node: circleci/node@1.1.6 4 | jobs: 5 | build-and-test: 6 | executor: 7 | name: node/default 8 | steps: 9 | - checkout 10 | - node/with-cache: 11 | steps: 12 | - run: npm install 13 | - run: npm test 14 | workflows: 15 | build-and-test: 16 | jobs: 17 | - build-and-test -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | !.vscode/ 2 | .history/ 3 | .idea 4 | .node_modules 5 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/.nojekyll -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "lts/*" 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to 4 | make via issue, 5 | email, or any other method with the owners of this repository before making 6 | a change. 7 | 8 | Please note we have a code of conduct, please follow it in all your interactions 9 | with the project. 10 | 11 | ## Pull Request Process 12 | 13 | 1. Ensure any install or build dependencies are removed before the end of the 14 | layer when doing a build. 15 | 2. Update the README.md with details of changes to the interface, this includes 16 | new environment variables, exposed ports, useful file locations and container parameters. 17 | 3. Increase the version numbers in any examples files and the README.md to the 18 | new version that this Pull Request would represent. 19 | The versioning scheme we use is [SemVer](http://semver.org/). 20 | 4. You may merge the Pull Request in once you have the sign-off of two other 21 | developers, or if you do not have permission to do that, you may request the 22 | second reviewer to merge it for you. 23 | 24 | ## Code of Conduct 25 | 26 | ## Our Pledge 27 | 28 | We as members, contributors, and leaders pledge to make participation in our 29 | community a harassment-free experience for everyone, regardless of age, body 30 | size, visible or invisible disability, ethnicity, sex characteristics, 31 | gender identity and expression, level of experience, education, socio-economic 32 | status, nationality, personal appearance, race, religion, or sexual identity 33 | and orientation. 34 | 35 | We pledge to act and interact in ways that contribute to an open, welcoming, 36 | diverse, inclusive, and healthy community. 37 | 38 | ## Our Standards 39 | 40 | Examples of behavior that contributes to a positive environment for our 41 | community include: 42 | 43 | * Demonstrating empathy and kindness toward other people 44 | * Being respectful of differing opinions, viewpoints, and experiences 45 | * Giving and gracefully accepting constructive feedback 46 | * Accepting responsibility and apologizing to those affected by our mistakes, 47 | and learning from the experience 48 | * Focusing on what is best not just for us as individuals, but for the overall community 49 | 50 | Examples of unacceptable behavior include: 51 | 52 | * The use of sexualized language or imagery, and sexual attention or 53 | advances of any kind 54 | * Trolling, insulting or derogatory comments, and personal or political attacks 55 | * Public or private harassment 56 | * Publishing others' private information, such as a physical or email 57 | address, without their explicit permission 58 | * Other conduct which could reasonably be considered inappropriate in a 59 | professional setting 60 | 61 | ## Enforcement Responsibilities 62 | 63 | Community leaders are responsible for clarifying and enforcing our standards 64 | of acceptable behavior and will take appropriate and fair corrective action 65 | in response to any behavior that they deem inappropriate, threatening, offensive, 66 | or harmful. 67 | 68 | Community leaders have the right and responsibility to remove, edit, or reject 69 | comments, commits, code, wiki edits, issues, and other contributions that are 70 | not aligned to this Code of Conduct, and will communicate reasons for moderation 71 | decisions when appropriate. 72 | 73 | ## Scope 74 | 75 | This Code of Conduct applies within all community spaces, and also applies when 76 | an individual is officially representing the community in public spaces. Examples 77 | of representing our community include using an official e-mail address, posting 78 | via an official social media account, or acting as an appointed representative 79 | at an online or offline event. 80 | 81 | ## Enforcement 82 | 83 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported 84 | to the community leaders responsible for enforcement at email. All complaints will 85 | be reviewed and investigated promptly and fairly. 86 | 87 | All community leaders are obligated to respect the privacy and security of the 88 | reporter of any incident. 89 | 90 | ## Enforcement Guidelines 91 | 92 | Community leaders will follow these Community Impact Guidelines in determining 93 | the consequences for any action they deem in violation of this Code of Conduct: 94 | 95 | ### 1. Correction 96 | 97 | **Community Impact**: Use of inappropriate language or other behavior deemed 98 | unprofessional or unwelcome in the community. 99 | 100 | **Consequence**: A private, written warning from community leaders, providing 101 | clarity around the nature of the violation and an explanation of why the 102 | behavior was inappropriate. A public apology may be requested. 103 | 104 | ### 2. Warning 105 | 106 | **Community Impact**: A violation through a single incident or series of actions. 107 | 108 | **Consequence**: A warning with consequences for continued behavior. No interaction 109 | with the people involved, including unsolicited interaction with those enforcing 110 | the Code of Conduct, for a specified period of time. This includes avoiding 111 | interactions in community spaces as well as external channels like social media. 112 | Violating these terms may lead to a temporary or permanent ban. 113 | 114 | ### 3. Temporary Ban 115 | 116 | **Community Impact**: A serious violation of community standards, including 117 | sustained inappropriate behavior. 118 | 119 | **Consequence**: A temporary ban from any sort of interaction or public 120 | communication with the community for a specified period of time. No public or 121 | private interaction with the people involved, including unsolicited interaction 122 | with those enforcing the Code of Conduct, is allowed during this period. 123 | Violating these terms may lead to a permanent ban. 124 | 125 | ### 4. Permanent Ban 126 | 127 | **Community Impact**: Demonstrating a pattern of violation of community 128 | standards, including sustained inappropriate behavior, harassment of an 129 | individual, or aggression toward or disparagement of classes of individuals. 130 | 131 | **Consequence**: A permanent ban from any sort of public interaction within the community. 132 | 133 | ## Attribution 134 | 135 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 136 | version 2.0, available at . 137 | 138 | Community Impact Guidelines were inspired by 139 | [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 140 | 141 | [homepage]: https://www.contributor-covenant.org 142 | 143 | For answers to common questions about this code of conduct, see the FAQ at 144 | . Translations are available at 145 | . 146 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Manual :: JavaScript 👋 2 | 3 | [![buddy pipeline](https://app.buddy.works/lbasaj/manual-javascript/pipelines/pipeline/213272/badge.svg?token=dda2f0dad3f9112d835f21de27a06d6b14da50f3e7267c4e44eab94300b5ece6 "buddy pipeline")](https://app.buddy.works/lbasaj/manual-javascript/pipelines/pipeline/213272) 4 | ![travis](https://travis-ci.com/lukaszbasaj/manual-javascript.svg?branch=master) 5 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/lukaszbasaj/manual-javascript/blob/master/LICENSE.md) 6 | [![Twitter: basajlukasz](https://img.shields.io/twitter/follow/basajlukasz.svg?style=social)](https://twitter.com/basajlukasz) 7 | 8 | > ⚡JavaScript basics manual with a set of exercises preprared for WarsawJS Workshop⚡ 9 | 10 | ### ✨ [Demo](https://js-sandbox.basaj.dev/manual/) 11 | 12 | ## 🎉 Quick start 13 | 14 | It is recommended to install `docsify-cli` globally, which helps initializing 15 | and previewing the website locally. 16 | 17 | ```sh 18 | npm i docsify-cli -g 19 | ``` 20 | 21 | ### Writing content 22 | 23 | `index.html` as the entry file 24 | 25 | `README.md` as the home page 26 | 27 | `_sidebar.md` as the sidebar menu page 28 | 29 | `guide.md` as the agenda content page 30 | 31 | `_coverpage.md` as the cover page 32 | 33 | ### Preview your site 34 | 35 | Run the local server with docsify serve. You can preview your site in 36 | your browser on . 37 | 38 | ```sh 39 | docsify serve 40 | ``` 41 | 42 | For more use cases of `docsify-cli`, head over to the [docsify-cli documentation](https://github.com/docsifyjs/docsify-cli). 43 | 44 | For more useful features of `docsify` please look on the [doscify documentation](https://docsify.js.org/). 45 | 46 | ## 🤝 Contributing 47 | 48 | - Fork it! 49 | - Create your feature branch: `git checkout -b my-new-feature` 50 | - Commit your changes: `git commit -am 'Add some feature'` 51 | - Push to the branch: `git push origin my-new-feature` 52 | - Submit a pull request 53 | 54 | Contributions, issues and feature requests are welcome! 55 | 56 | Feel free to check [issues page](https://github.com/lukaszbasaj/manual-javascript/issues). 57 | You can also take a look at the [contributing guide](https://github.com/lukaszbasaj/manual-javascript/blob/master/CONTRIBUTING.md). 58 | 59 | ### How to start? 60 | 61 | - If you're looking for a place to modify please check in files structure. 62 | For example, if you want to modify list of reserved words in section `variables.md` 63 | just find this file and do your changes. 64 | - If you need to add new file just do this in a proper localization and make sure 65 | you also add a reference to the `_sidebar.md` 66 | 67 | ## Author 68 | 69 | 👤 **Łukasz Basaj** 70 | 71 | - Website: 72 | - Twitter: [@basajlukasz](https://twitter.com/basajlukasz) 73 | - Github: [@lukaszbasaj](https://github.com/lukaszbasaj) 74 | - LinkedIn: [@lukasz-basaj](https://linkedin.com/in/lukasz-basaj) 75 | 76 | ## Show your support 77 | 78 | Give a ⭐️ if this project helped you! 79 | 80 | ## 📝 License 81 | 82 | Copyright © 2020 [Łukasz Basaj](https://github.com/lukaszbasaj). 83 | 84 | This project is [MIT](https://github.com/lukaszbasaj/manual-javascript/blob/master/LICENSE.md) 85 | licensed. 86 | 87 | *** 88 | _This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_ 89 | -------------------------------------------------------------------------------- /_coverpage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![logo](_media/logo-javascript.svg ':size=600x600') 4 | 5 | # Manual :: JavaScript 6 | 7 | [Zadania](https://github.com/lukaszbasaj/warsawjs-workshop-36) 8 | [Zaczynamy](README.md) 9 | -------------------------------------------------------------------------------- /_media/logo-javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /_media/logo-warsawjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 22 | 25 | 30 | 36 | 38 | 39 | 40 | 42 | 47 | 48 | 49 | 52 | 56 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /_scripts/sidebar-extension.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | function closeSidebar() { 3 | document.body.classList.add("close") 4 | } 5 | 6 | function openSidebar() { 7 | document.body.classList.remove("close") 8 | } 9 | 10 | window.addEventListener("keydown", function (event) { 11 | if (event.key === "ArrowLeft") { 12 | closeSidebar() 13 | } else if (event.key === "ArrowRight") { 14 | openSidebar() 15 | } 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /_sidebar.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | * [Agenda](guide.md) 4 | * Wstęp 5 | + [Czym jest JavaScript?](introduction/what-is-js.md) 6 | + [Korzystanie z JS](introduction/how-to-use-js.md) 7 | + [DevTools](introduction/console.md) 8 | + [🛠 Ćwiczenia](introduction/practice.md) 9 | * Typy 10 | + [Typy wartości](data-types/types.md) 11 | + [Konwersja typów](data-types/conversion.md) 12 | * Zmienne 13 | + [Czym są zmienne?](data-types/variables.md) 14 | + [var i hoisting](data-types/var.md) 15 | + [let](data-types/let.md) 16 | + [const](data-types/const.md) 17 | + [Temporal Dead Zone](data-types/tdz.md) 18 | * Operatory 19 | + [Arytmetyczne](operators/arithmetics.md) 20 | + [Przypisania](operators/assignments.md) 21 | + [Porównania](operators/comparision.md) 22 | + [Logiczne](operators/logical.md) 23 | + [Spread Operator](modern-features/operator-spread.md) 24 | * Obiekty 25 | + [Czym są obiekty?](objects/introduction.md) 26 | + [Tworzenie obiektów](objects/create-object.md) 27 | + [Krótko o this](objects/this.md) 28 | + [Wbudowane obiekty](built-in-objects/built-in-objects.md) 29 | * Tablice 30 | + [Tworzenie tablic](arrays/arrays.md) 31 | + [Operacje na tablicach](arrays/arrays-operations.md) 32 | + [🛠 Ćwiczenia](objects/practice.md) 33 | * Instrukcje warunkowe 34 | + [Instrukcja if...else](condition-statements/if-else.md) 35 | + [Instrukcja switch](condition-statements/switch.md) 36 | + [🛠 Ćwiczenia](condition-statements/practice.md) 37 | * Pętle 38 | + [Pętla while](loops/while.md) 39 | + [Pętla do...while](loops/do-while.md) 40 | + [Pętla for](loops/for.md) 41 | + [Pętla for...in](loops/for-in.md) 42 | + [Pętla for...of](loops/for-of.md) 43 | + [🛠 Ćwiczenia](loops/practice.md) 44 | * Funkcje 45 | + [Zapis funkcyjny](functions/functions.md) 46 | + [Wyrażenie funkcyjne](functions/function-expression.md) 47 | + [Funkcja strzałkowa](functions/arrows.md) 48 | + [Callback](functions/callback.md) 49 | + [IIFE](functions/iife.md) 50 | + [🛠 Ćwiczenia](functions/practice.md) 51 | * Przykładowe metody obiektów 52 | + [Math](object-methods/sample-objects-methods.md) 53 | + [Date](object-methods/date.md) 54 | * Timery 55 | + [setTimeout()](timers/settimeout.md) 56 | + [setInterval()](timers/setinterval.md) 57 | * Operowanie na DOM 58 | + [Document Object Model](working-with-DOM/dom.md) 59 | + [Metody dostępu do DOM](working-with-DOM/searching-elements.md) 60 | + [Praca z elementami DOM](working-with-DOM/creating-elements.md) 61 | + [🛠 Ćwiczenia](working-with-DOM/practice.md) 62 | * Zdarzenia 63 | + [Nasłuchiwanie zdarzeń](events/events.md) 64 | + [Zdarzenia myszki](events/mouse-events.md) 65 | + [Zdarzenia klawiatury](events/keyboard-events.md) 66 | + [🛠 Ćwiczenia](events/practice.md) 67 | * Operacje asynchroniczne 68 | + [Wprowadzenie do AJAX](async/ajax.md) 69 | + [Poznajmy JSONa](async/json.md) 70 | + [Protokół HTTP](async/http.md) 71 | + [Co to jest REST API?](async/restapi.md) 72 | + [Co to jest Promise?](async/promise.md) 73 | + [Skorzystajmy z fetch](async/fetch.md) 74 | + [🛠 Ćwiczenia](async/practice.md) 75 | -------------------------------------------------------------------------------- /arrays/arrays-operations.md: -------------------------------------------------------------------------------- 1 | # Opercje na tablicach 2 | 3 | ## Sprawdzanie długości tablicy 4 | 5 | ```js 6 | const heros = ['Yoda', 'Obi-Wan Kenobi']; 7 | 8 | console.log(heros.length); 9 | // 2 10 | 11 | ``` 12 | 13 | ## Dostęp do elementów tablicy 14 | 15 | ```js 16 | const first = heros[0]; 17 | // Yoda 18 | 19 | const last = heros[heros.length - 1]; 20 | // Obi-Wan Kenobi 21 | 22 | ``` 23 | 24 | ## Dodawanie elementu na początku 25 | 26 | ```js 27 | var newLength = fruits.unshift('Strawberry') // add to the front 28 | // ["Strawberry", "Banana"]; 29 | 30 | ``` 31 | 32 | ## Usuwanie elementu z początku tablicy 33 | 34 | ```js 35 | var first = fruits.shift(); // remove Apple from the front 36 | // ["Banana"]; 37 | 38 | ``` 39 | 40 | ## Dodawanie elementu na końcu tablicy 41 | 42 | ```js 43 | var newLength = fruits.push('Orange'); 44 | // ["Apple", "Banana", "Orange"] 45 | 46 | 47 | ``` 48 | 49 | ## Usuwanie elementu z końca tablicy 50 | 51 | ```js 52 | var last = fruits.pop(); // remove Orange (from the end) 53 | // ["Apple", "Banana"]; 54 | 55 | ``` 56 | 57 | ## Szukanie indeksu elementu 58 | 59 | ```js 60 | var pos = fruits.indexOf('Banana'); 61 | // 1 62 | 63 | ``` 64 | 65 | ## Sortowanie tablicy 66 | 67 | ```js 68 | var months = ['March', 'Jan', 'Feb', 'Dec']; 69 | months.sort(); 70 | console.log(months); 71 | // expected output: Array ["Dec", "Feb", "Jan", "March"] 72 | 73 | ``` 74 | 75 | ## Odwracanie kolejności elementów 76 | 77 | ```js 78 | var array1 = ['one', 'two', 'three']; 79 | console.log('array1: ', array1); 80 | // expected output: Array ['one', 'two', 'three'] 81 | 82 | var reversed = array1.reverse(); 83 | console.log('reversed: ', reversed); 84 | // expected output: Array ['three', 'two', 'one'] 85 | 86 | ``` 87 | 88 | ## Łączenie tablic 89 | 90 | ```js 91 | const anim1 = ["Pies", "Kot"]; 92 | const anim2 = ["Słoń", "Wieloryb"]; 93 | const anim3 = ["Chomik ninja", "Świnka morderca"]; 94 | 95 | const table = anim1.concat(anim2); 96 | console.log(table); //wypisze ["Pies", "Kot", "Słoń", "Wieloryb"] 97 | 98 | ``` 99 | 100 | ## Kopiowanie tablicy 101 | 102 | ```js 103 | var shallowCopy = fruits.slice(); // this is how to make a copy 104 | // ["Strawberry", "Mango"] 105 | 106 | ``` 107 | 108 | ## Łączenie elementów tablicy 109 | 110 | ```js 111 | var elements = ['Fire', 'Air', 'Water']; 112 | 113 | console.log(elements.join()); 114 | // expected output: "Fire,Air,Water" 115 | 116 | console.log(elements.join('')); 117 | // expected output: "FireAirWater" 118 | 119 | console.log(elements.join('-')); 120 | // expected output: "Fire-Air-Water" 121 | 122 | ``` 123 | 124 | ## Iterowanie po tablicy 125 | 126 | ```js 127 | var array1 = ['a', 'b', 'c']; 128 | 129 | array1.forEach(function(element) { 130 | console.log(element); 131 | }); 132 | 133 | // expected output: "a" 134 | // expected output: "b" 135 | // expected output: "c" 136 | 137 | ``` 138 | 139 | ## Mapowanie tablicy 140 | 141 | ```js 142 | var array1 = [1, 4, 9, 16]; 143 | 144 | // pass a function to map 145 | const map1 = array1.map(x => x * 2); 146 | 147 | console.log(map1); 148 | // expected output: Array [2, 8, 18, 32] 149 | 150 | ``` 151 | 152 | [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 153 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | ![how-ajax-works](how-ajax-works.jpg) 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 | -------------------------------------------------------------------------------- /async/how-ajax-works.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/async/how-ajax-works.jpg -------------------------------------------------------------------------------- /async/http.md: -------------------------------------------------------------------------------- 1 | # HTTP 2 | 3 | HTTP to skrót od Hypertext Transfer Protocol i jest to główny protokół używany 4 | współcześnie w przeglądarkach. Jest to protokół bezstanowy, tzn. ani serwer 5 | (ani klient) nie przechowuje informacji o tym, jakie były wcześniej zapytania 6 | pomiędzy określonym serwerem i klientem oraz nie posiada stanu wewnętrznego. 7 | Powoduje to, że każde zapytanie do serwera traktowane jest jako ‘nowe’, 8 | z punktu widzenia serwera aplikacji niemożliwe do powiązania z informacjami 9 | np. o zalogowanym użytkowniku. Tą bezstanowość można obejść, obecnie głównie 10 | za pomocą tzw. ciasteczek (będzie o nich nieco dalej), należy jednak pamiętać, 11 | że HTTP sam w sobie jest bezstanowy. 12 | 13 | ## Zapytania HTTP 14 | 15 | W zapytaniach HTTP możemy wyróżnić dwa elementy: nagłówek i ciało. Zajmijmy się 16 | najpierw pierwszą częścią czyli nagłówkiem. Nagłówek ma minimum 1 wiersz, który 17 | określa metodę HTTP (poniżej omówimy sobie czym są metody, oraz do czego służy 18 | każda z nich),adres URI oraz wersję protokołu HTTP (obecnie korzystamy z wersji 19 | 1.1, oznaczanej w nagłówku jako HTTP/1.1 ). Przykładowy pierwszy wiersz nagłówka 20 | wygląda nastepująco: 21 | 22 | `GET / HTTP/1.1` 23 | 24 | Gdzie: 25 | 26 | GET — to nazwa metody HTTP 27 | / — to tzw. URI, czyli ta część adresu, który występuje po domenie 28 | HTTP/1.1 — określenie protokołu, tutaj HTTP w wersji 1.1 29 | Bezpośrednio pod tą linijką możemy (ale nie musimy) podać nagłówki HTTP, 30 | każdy w nowej linii. Uwaga! Nie może być tutaj żadnej linii przerwy! Wszystko, 31 | co znajdzie się po pierwszej pustej linii (przerwie) traktowane jest jako ciało zapytania. 32 | 33 | ## Metoda HTTP 34 | 35 | Metody w protokole HTTP służą do rozgraniczania różnych czynności, które mamy 36 | zamiar wykonać, pomagają także w projektowaniu przeglądarek internetowych i 37 | obsłudze zapytań. Początkowo o protokole HTTP myślano jako o protokole do obsługi 38 | plików na zdalnym serwerze — taki protokół pozwalał na pobranie zasobu, usunięcie 39 | go, wysłanie na serwer, jego aktualizację oraz pobranie metadanych. Takie znaczenie 40 | nadaje się też metodom HTTP w przypadku API spełniającego założenia REST. Tyle z 41 | teorii i historii. W praktyce metody pozwalają nam ‘rozdzielać’ zapytania trafiające 42 | pod ten sam adres — np. metody GET używamy do wyświetlenia formularza, a metody 43 | POST do jego przesłania — obie rzeczy możemy realizować pod tym samym adresem 44 | [url](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). 45 | Poniżej znajdziesz podsumowanie metod protokołu HTTP: 46 | 47 | | Metoda | Request body | Response body | Zastosowanie / opis | 48 | |--------|--------------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 49 | | GET | niedozwolone | opcjonalnie | Pobieranie zasobu lub jego wyświetlenie, np. wyświetlenie formularza lub strony. Parametry można przekazywać jedynie poprzez adres (np. ?nazwa=wartość&nazwa2=wartość2)| 50 | | POST | opcjonalne | opcjonalnie | Przesłanie danych zapisanych jako pary klucz-wartość do serwera (np. wysłanie formularza, gdzie kluczem jest nazwa danego pola a wartością wpisana przez nas wartość). Metoda ta pozwala przesyłać także pliki (a także wiele pliki oraz pary klucz-wartość jednocześnie). Parametry są przekazywane w ciele zapytania, można także przekazywać parametry poprzez adres (tak jak w metodzie GET) | 51 | | PUT | opcjonalne | opcjonalnie | Przesyłanie ‘paczki’ danych, np. jednego pliku. Metoda ta ma pewne ograniczenia, np. nie ma możliwości łączenia par klucz-wartość z inną przesyłaną treścią (np. plikiem). Obecnie używana głównie w przypadku RESTowych serwisów, gdzie ciałem jest np. formularz zapisany w postaci JSONa.| 52 | | DELETE | opcjonalnie | opcjonalnie | Usuwanie zasobu na serwerze, z racji bezpieczeństwa praktycznie zawsze jest wyłączona domyślnie. Obecnie używana głównie w przypadku RESTowych serwisów, wskazując, że dany zasób ma być usunięty (i obsługiwany przez aplikację, a nie sam serwer)| 53 | | HEAD | niedozwolone | niedozwolone | Analogiczny do zapytania GET, z tym wyjątkiem, że nie zwraca ciała (zawartości). Służy do pobrania metadanych o zasobie w postaci nagłówków HTTP. Dla danego adresu zwraca same nagłówki. 54 | 55 | ## Statusy HTTP (kody odpowiedzi) 56 | 57 | Jednym z elementów protokołu HTTP są kody odpowiedzi, zwanymi też statusami. 58 | To numeryczne, trzycyfrowe kody, które są dołączane do odpowiedzi i sygnalizują 59 | status odpowiedzi. Najpopularniejsze i najczęściej spotykane kody to 200 60 | (OK, czyli wszystko jest w porządku, zapytanie jest obsłużone), 302 (przekierowanie), 61 | 403 (brak dostępu) oraz 404 (nie znaleziono — stąd liczba 404 często pojawia się 62 | na stronach z informacją, że wpisany adres nie istnieje). 63 | 64 | Kodów jest mnóstwo, najczęściej wystarczy jednak znajomość tych podstawowych. 65 | Co ważne, nawet nie znając kodu można określić jego przybliżone znaczenie na 66 | podstawie numeru. Kody są bowiem podzielone na grupy, pierwsza cyfra kodu mówi 67 | nam, z której jest on grupy. I tak: 68 | 69 | - 1xx — informacyjne, nieczęsto można spotkać, dotyczą bardziej środowiska 70 | niż samej aplikacji (np. 111 — serwer odrzucił połączenie) 71 | - 2xx — zapytanie się powiodło 72 | - 3xx — przekierowanie, zapytanie należy kierować pod inny adres / serwer 73 | - 4xx — błąd aplikacji spowodowany działaniem użytkownika 74 | (np. wspomniany 404 — nie znaleziono — czy 403 — brak dostępu lub 75 | 400 — niepoprawnie zapytanie) 76 | - 5xx — błąd serwera (np. nieobsłużony wyjątek w Javie) 77 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /async/practice.md: -------------------------------------------------------------------------------- 1 | # Operacje asynchroniczne 2 | 3 | Przełącz się na branch `08-async` 4 | 5 | ## Ćwiczenie 1 6 | 7 | Posługując się poznanymi metodami stwórz funkcję, która wygeneruje strukturę 8 | kontenera, w którym będzie wyświetlana zawartość. Struktura HTML, powinna mieć postać: 9 | 10 | ```html 11 |
12 |

{title}

13 |

{opening_crawl}

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 | -------------------------------------------------------------------------------- /async/promise.md: -------------------------------------------------------------------------------- 1 | # Promise 2 | 3 | Funkcjonalność Promise’ów została dodana w ES6, zastępując istniejące dotychczas 4 | funkcje `callback`(oczywiście same callbacki zostały ale w nowych rozwiązaniach 5 | nie są już spotykane). Obiekty typu `Promise` “obiecują” wykonanie pewnej czynności 6 | i następnie zwrócenie rezultatu lub wyrzucenie błędu. 7 | 8 | Każdy `promise` może być w stanie: 9 | 10 | - `fulfilled` — pomyślnie obsłużony 11 | - `rejected` — odrzucony 12 | - `pending` —  w trakcie – ani fulfilled, ani rejected 13 | - `settled` — obsłużony, fulfilled lub rejected 14 | 15 | Zwracany `promise` jest obiektem, który udostępnia nam metodę 16 | 17 | ```js 18 | then(fn: onResolve, fn: onReject) 19 | ``` 20 | 21 | pozwalającą obsłużyć `promise` w momencie, gdy przechodzi on do stanu `settled`. 22 | 23 | Tak, każdy `promise` jest obiektem, gdzie `callback`, to przecież funkcja. 24 | Funkcja `callback` pozwala nam na obsłużenie zdarzenia, a `promise` to obiekt, 25 | który przechowuje pewien stan. 26 | 27 | Spójrzmy na przykład prostej obietnicy: 28 | 29 | ```js 30 | new Promise((resolve, reject) => { 31 | // when success, resolve 32 | let value = 'success'; 33 | resolve(value); 34 | 35 | // when an error occurred, reject 36 | reject(new Error('Something happened!')); 37 | }); 38 | ``` 39 | 40 | Każdy `promise` pozwala zdefiniować funkcję `resolve`, która wywołana zostanie 41 | w momencie, gdy osiągnięty zostanie stan fullfiled. W przeciwnym wypadku wykonana 42 | zostaje funkcja `reject`, która obsługuje stan rejected. 43 | 44 | Obietnice to obiekty, więc nie są one przekazywane jako parametry, jak funkcje 45 | `callback` – są zwracane. 46 | 47 | Obietnice biorą odpowiedzialność wyłącznie za jedno zdarzenie, gdzie funkcje 48 | `callback` obsługiwać mogą ich wiele, wielokrotnie. 49 | 50 | Poprzedni przykład możemy nieco rozbudować i przypisać zwrócony obiekt `promise` 51 | do wyrażenia `let`: 52 | 53 | ```js 54 | let promise = new Promise((resolve, reject) => { 55 | // when success, resolve 56 | let value = 'success'; 57 | resolve(value); 58 | 59 | // when an error occurred, reject 60 | reject(new Error('Something happened!')); 61 | }); 62 | ``` 63 | 64 | Zwrócony obiekt udostępnia metodę `then()`, która pozwala obsłużyć wartość, 65 | w momencie, gdy promise przechodzi do stanu `settled`: 66 | 67 | ```js 68 | promise.then(onResolve, onReject) 69 | ``` 70 | 71 | Możemy użyć tej metody do obsłużenia zwracanych wartości w ramach funkcji 72 | `onResolve`, `onReject` lub obu. 73 | 74 | ```js 75 | let promise = new Promise((resolve, reject) => { 76 | // when success, resolve 77 | let value = 'success'; 78 | resolve(value); 79 | 80 | // when an error occurred, reject 81 | reject(new Error('Something happened!')); 82 | }); 83 | 84 | promise.then(response => { 85 | console.log(response); 86 | }, error => { 87 | console.log(error); 88 | }); 89 | 90 | // success 91 | ``` 92 | 93 | W naszym przykładzie funkcja `onReject` nigdy się nie wykona i błąd nie zostanie 94 | rzucony. Możemy więc usunąć jej obsługę: 95 | 96 | ```js 97 | let promise = new Promise(resolve => { 98 | let value = 'success'; 99 | resolve(value); 100 | }); 101 | 102 | promise.then(response => { 103 | console.log(response); // success 104 | }); 105 | ``` 106 | 107 | W przypadku wywołania metody `then()`, obsługiwana jest nie tylko wartość danej 108 | obietnicy, zwracany jest również nowy obiekt `Promise`: 109 | 110 | ```js 111 | let promise = new Promise(resolve => { 112 | let value = 'success'; 113 | resolve(value); 114 | }); 115 | 116 | promise 117 | .then(response => { 118 | console.log(response); // success 119 | return 'another success'; 120 | }) 121 | .then(response => { 122 | console.log(response); // another success 123 | }); 124 | ``` 125 | 126 | Tworząc kod w ten sposób pozostaje on zawsze „płaski”. Nie budujemy tutaj 127 | piramid, więc termin `callback hell` może odejść w niepamięć. 128 | 129 | W momencie, gdy interesuje nas tylko obsłużenie wyjątku (stan `rejected`), 130 | wystarczy, że podamy funkcję onReject do metody `then()`: 131 | 132 | ```js 133 | let promise = new Promise((resolve, reject) => { 134 | let reason = 'failure'; 135 | reject(reason); 136 | }); 137 | 138 | promise.then( 139 | null, 140 | error => { 141 | console.log(error); // failure 142 | } 143 | ); 144 | ``` 145 | 146 | Istnieje jednak lepszy sposób. Poza metodą `then()`, otrzymujemy także metodę 147 | `catch()`, która pozwala na obsługę sytuacji wyjątkowych: 148 | 149 | ```js 150 | let promise = new Promise((resolve, reject) => { 151 | let reason = 'failure'; 152 | reject(reason); 153 | }); 154 | 155 | promise.catch(err => { 156 | console.log(err); // failure 157 | }); 158 | ``` 159 | 160 | W momencie, gdy mamy kilka wystąpień metody `then()` po sobie, wyjątek przekazywany 161 | jest tak długo, aż nie zostanie on obsłużony: 162 | 163 | ```js 164 | let promise = new Promise(resolve => { 165 | resolve(); 166 | }); 167 | 168 | promise 169 | .then(response => { 170 | return 1; 171 | }) 172 | .then(response => { 173 | throw new Error('failure'); 174 | }) 175 | .catch(error => { 176 | console.log(error.message); // failure 177 | }); 178 | ``` 179 | -------------------------------------------------------------------------------- /async/restapi.md: -------------------------------------------------------------------------------- 1 | # REST API 2 | 3 | **REST** – Representational State Transfer – styl architektury oprogramowania 4 | opierający się o zbiór wcześniej określonych reguł opisujących 5 | jak definiowane są zasoby,a także umożliwiających dostęp do nich. 6 | Został on zaprezentowany przez Roya Fieldinga w 2000 roku. 7 | 8 | **API** – Application Programming Interface – zestaw reguł definiujący 9 | komunikację pomiędzy programami komputerowymi. 10 | 11 | Czyli API są to reguły określające jak użytkownik może uzyskać dostęp do zasobów 12 | oraz w jakiej postaci je otrzymuje. 13 | Natomiast REST to styl architektury definiujący jak zbudowane będzie to API. 14 | 15 | ## Zasada działania API 16 | 17 | Cykl pracy z API możemy określić następująco: 18 | 19 | * Klient preparuje zapytanie w postaci odpowiedniego adresu (endpointa). 20 | * Następnie wysyła to zapytanie do interfejsu. 21 | * Interfejs zwraca odpowiedź na zapytanie klienta. 22 | * Klient otrzymuje odpowiedź na swoje zapytanie. 23 | * Dla wielu osób to, co napisałem może się wydawać oczywiste. Chciałbym jednak, 24 | aby KAŻDY po przeczytaniu tego artykułu wiedział do czego służy API. 25 | 26 | Do zbudowania podstawowego API pozwalającego na odczyt, zapis, aktualizację 27 | i usuwanie danych wystarczą tylko 4 metody – `GET`, `POST`, `PUT` i `DELETE`. 28 | 29 | * `GET` — pobieranie (zarówno kolekcji, jak i pojedynczego elementu) 30 | * `POST` — tworzenie (tylko kolekcji) 31 | * `PUT` — aktualizacja (tylko pojedynczego elementu) 32 | * `DELETE` — usuwanie (tylko pojedynczego elementu) 33 | 34 | ## Zasady tworzące REST 35 | 36 | Aby API można nazwać RESTful lub API RESTowym musi ono spełniać kilka założeń: 37 | 38 | * Odseparowanie interfejsu użytkownika od operacji na serwerze. 39 | Klient poprzez “wydawanie poleceń” nie ma wpływu na to co się dzieje po stronie serwera. 40 | Działa to również w drugą stronę – serwer daje klientowi jedynie odpowiedź 41 | i nie ma prawa ingerować w UI. Pozwala to na korzystanie z jednego REST API 42 | w wielu niezależnych od siebie aplikacjach, a dane pozostaną spójne. 43 | 44 | * Bezstanowość – mówi się że REST jest stateless – oznacza to, że każde zapytanie 45 | od klienta musi zawierać komplet informacji oraz, że serwer nie przechowuje 46 | stanu o sesji użytkownika po swojej stronie. 47 | 48 | * Cacheability – odpowiedź, którą użytkownik otrzyma z REST API musi jasno 49 | definiować, czy ma ona być cacheable czy non-cacheable. Ma to znaczenie przy danych, 50 | które bardzo szybko stają się nieaktualne oraz przy danych, które aktualizują 51 | się relatywnie rzadko – nie ma sensu na przykład cache’ować współrzędnych 52 | geograficznych pędzącego samolotu, natomiast już jego kolor czy nazwę już tak. 53 | Endpointy, czyli tak naprawdę adresy, które pozwalają na dostęp do informacji 54 | powinny jednoznacznie wskazywać do jakiego zasobu się odwołują. 55 | Z ich budowy powinniśmy wiedzieć jaki konkretnie zasób otrzymamy. 56 | Co ważne – dane otrzymywane w API powinny być niezależne w żaden 57 | sposób od schematu bazy danych w jakiej są przetrzymywane. Oczywiście nie ma 58 | przeciwwskazań, aby struktura danych wyglądała identycznie jak schemat 59 | bazy danych – niemniej jednak struktura w żaden sposób 60 | nie powinna zależeć od tego schematu. 61 | 62 | * Separacja warstw – powinniśmy oddzielić warstwy dostępu do danych, logiki 63 | oraz prezentacji. Pozwala to na dowolne operacje na danych – nie wymuszamy 64 | na użytkowniku konkretnego działania na nich, ani wyświetlania ich w konkretny 65 | sposób. Ponadto pośrednie i zewnętrzne API wykorzystywane przez serwer(!) mogą 66 | być wykorzystywane bez wiedzy klienta. Przykładem może być wcześniej wspomniany 67 | samolot, gdzie informacja np. o kolorze może pochodzić z zupełnie innego API – 68 | klient nie musi o tym wiedzieć. 69 | Możliwość udostępniania apletów i skryptów klientowi – jest to opcjonalna reguła, 70 | aczkolwiek warto rozważyć jej zastosowanie. Jeśli wiemy, że klienci będą 71 | wykonywać konkretne operacje na konkretnych danych możemy im udostępnić 72 | gotowe do tego rozwiązania. 73 | 74 | * Możliwość udostępniania apletów i skryptów klientowi – jest to opcjonalna 75 | reguła, aczkolwiek warto rozważyć jej zastosowanie. Jeśli wiemy, 76 | że klienci będą wykonywać konkretne operacje na konkretnych danych 77 | możemy im udostępnić gotowe do tego rozwiązania. 78 | 79 | ## Jakie są zalety korzystania z REST API? 80 | 81 | Największą z zalet jest przede wszystkim uniwersalność. Załóżmy, że potrzebujesz 82 | stworzyć aplikację na telefon i stronę internetową dla księgarni. 83 | Możesz stworzyć jedno API, z którego będzie korzystała 84 | zarówno aplikacja jak i strona internetowa! 85 | 86 | Po drugie – jeśli napisany interfejs programistyczny jest zgodny z zasadami REST, 87 | to w trakcie procesu pisania aplikacji będziesz intuicyjnie tworzył endpointy 88 | i dzięki nim wygodnie operował na danych. 89 | 90 | Dane jakie otrzymujemy z API, najczęściej są w wygodnym do pracy formacie – 91 | JSON, czyli JavaScript Object Notation. Czasami zdarzy się jeszcze format XML, 92 | niemniej jednak spotykam się z nim coraz rzadziej. Korzystanie z JSON’ów jest 93 | naprawdę szybkie, wygodne i nie powoduje większych trudności. 94 | 95 | Możemy pozyskiwać dane jednocześnie z wielu źródeł. Na przykład możemy stworzyć 96 | aplikację wykorzystującą logowanie za pomocą Facebooka oraz mapy Google. 97 | W obu przypadkach skorzystamy z API oferowanych przez te firmy. 98 | 99 | Kolejną z zalet jest możliwość odseparowania warstwy klienta, od warstwy serwerowej. 100 | Alternatywą dla API jest tworzenie widoków za pomocą silników szablonów takich 101 | jak Pug, Twig, czy Blade. 102 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /condition-statements/if-else.md: -------------------------------------------------------------------------------- 1 | # Instrukcja warunkowa `if...else` 2 | 3 | Czasami musimy wykonywać różne działania w zależności od różnych warunków. 4 | W tym celu możemy użyć instrukcji `if...else.` 5 | 6 | ![if...else](if.png) 7 | 8 | Instrukcja `if(...)` sprawdza warunek w nawiasach i, jeśli wynik jest prawdziwy, 9 | wykonuje blok kodu. 10 | 11 | ```js 12 | let year = prompt('In which year was ECMAScript-2015 specification published?', ''); 13 | 14 | if (year == 2015) alert( 'You are right!' ); 15 | ``` 16 | 17 | Instrukcja `if` może zawierać opcjonalny blok `else`. 18 | Wykonuje się, gdy warunek jest fałszywy. 19 | 20 | ```js 21 | let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); 22 | 23 | if (year == 2015) { 24 | alert( 'You guessed it right!' ); 25 | } else { 26 | alert( 'How can you be so wrong?' ); // any value except 2015 27 | } 28 | ``` 29 | 30 | Czasami chcielibyśmy przetestować kilka wariantów stanu. 31 | Klauzula `else...if` pozwala nam to zrobić. 32 | 33 | ```js 34 | let year = prompt('In which year was the ECMAScript-2015 specification published?', ''); 35 | 36 | if (year < 2015) { 37 | alert( 'Too early...' ); 38 | } else if (year > 2015) { 39 | alert( 'Too late' ); 40 | } else { 41 | alert( 'Exactly!' ); 42 | } 43 | ``` 44 | 45 | W powyższym kodzie JavaScript najpierw sprawdza rok < 2015. Jeśli jest to `false`, 46 | przechodzi do następnego warunku rok> 2015. Jeśli jest to również `false`, 47 | wyświetla ostatni `alert`. Bloków może być więcej. Ostatnia opcja jest opcjonalna. 48 | 49 | Czasami musimy przypisać zmienną w zależności od warunku. 50 | 51 | ```js 52 | let accessAllowed; 53 | let age = prompt('How old are you?', ''); 54 | 55 | if (age > 18) { 56 | accessAllowed = true; 57 | } else { 58 | accessAllowed = false; 59 | } 60 | 61 | alert(accessAllowed); 62 | ``` 63 | 64 | Operator jest reprezentowany przez znak zapytania `?` 65 | Czasami nazywa się „ternary”, ponieważ operator ma trzy operandy. 66 | 67 | Składnia tego operatora zapisywana jest w formie: 68 | 69 | ```js 70 | let result = condition ? value1 : value2; 71 | ``` 72 | 73 | w naszym przypadku: 74 | 75 | ```js 76 | let accessAllowed = (age > 18) ? true : false; 77 | ``` 78 | 79 | --- 80 | 81 | - Ćwiczenie 1 82 | Używając `if...else`, napisz kod, który otrzymuje numer za pomocą 83 | monitu (`prompt()`) następnie wyświetli `alert`: 84 | - 1, jeśli wartość jest większa od zera, 85 | - -1, jeśli jest mniejsza niż zero, 86 | - 0, jeśli jest równa zero. 87 | 88 | W tym zadaniu zakładamy, że dane wejściowe są zawsze liczbą. 89 | 90 | --- 91 | 92 | - Ćwiczenie 2 93 | Przepisz Ćwiczenie1 używając operatora warunkowego `?`. 94 | 95 | --- 96 | 97 | - Ćwiczenie 3 98 | 99 | Stwórz trzy zmienne: a = 4, b = 5, c = 6. Za pomocą instrukcji warunkowych sprawdź, 100 | która zmienna jest największa (pomiń wariant kiedy zmienne mogły by być równe). 101 | 102 | --- 103 | 104 | - Ćwiczenie 4 105 | 106 | Przepisz poniższy kod, używając instrukcji `switch`: 107 | 108 | ```js 109 | let a = +prompt('a?', ''); 110 | 111 | if (a == 0) { 112 | alert( 0 ); 113 | } 114 | if (a == 1) { 115 | alert( 1 ); 116 | } 117 | if (a == 2 || a == 3) { 118 | alert( '2,3' ); 119 | } 120 | 121 | ``` 122 | -------------------------------------------------------------------------------- /condition-statements/if.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/condition-statements/if.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /condition-statements/switch.md: -------------------------------------------------------------------------------- 1 | # Instrukcja `switch` 2 | 3 | ![switch](switch.png) 4 | -------------------------------------------------------------------------------- /condition-statements/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/condition-statements/switch.png -------------------------------------------------------------------------------- /data-types/const.md: -------------------------------------------------------------------------------- 1 | # const 2 | 3 | ![const](const.png) 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 | -------------------------------------------------------------------------------- /data-types/const.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/data-types/const.png -------------------------------------------------------------------------------- /data-types/conversion.md: -------------------------------------------------------------------------------- 1 | # Automatyczna konwersja typów 2 | 3 | JavaScript nie wymaga od Ciebie abyś deklarował typ zmiennych. Przykładowo możesz 4 | utworzyć zmienną typu liczbowego o nazwie np. someVar, a następnie przypisać 5 | jej wartość znakową: 6 | 7 | ```js 8 | let someVar = 10; 9 | someVar = "to jest napis"; 10 | ``` 11 | 12 | Z jednej strony jest to fajne, bo upraszcza sprawę. Z drugiej może powodować błędy 13 | w bardziej skompilowanych skryptach. Dlatego też w każdym większym języku (np C++) 14 | konieczne jest określanie typów danych. Dlatego też powstały dla JavaScript 15 | takie nakładki jak TypeScript 16 | 17 | JavaScript lubi być automatyczny. Tak jest w przypadku operacji na typach prostych 18 | i kilku innych momentach (np. w przypadku `hoistingu` zmiennych czy deklaracji funkcji). 19 | Ta automatyczność przejawia się tym, że w wielu momentach JavaScript chce nam 20 | ułatwić życie automatycznie konwertując danych tym zmiennej na inny. 21 | Przykładowo dodając liczbę do stringa, liczba zostanie skonwertowana na string. 22 | Podobnie dodając string do tablicy (ale nie pushując do niej) tablica zostanie 23 | skonwertowana na string. 24 | 25 | JavaScript nie jest w stanie dodać do siebie tablic czy obiektów (bo nie robi 26 | się tego +, a specjalnymi metodami), ale potrafi dodawać numery czy stringi 27 | do siebie. Dlatego podczas operacji często stara się skonwertować "niedodawalne" 28 | typy danych na typy, które potrafi dodać - najczęściej są to stringi, ale czasami 29 | też numbery czy inne wymagane w danej sytuacji typy danych. 30 | 31 | Poniżej znajdziesz kilka przykładów konwersji, a dalej możesz przeczytać o zasadach, 32 | które obowiązują przy konwersji. 33 | 34 | ```js 35 | !!"" // false 36 | +"01" // 1 37 | "2" + 2 // "22" 38 | 'true' == true // false 39 | [] ? "a" : "b"; // "a" 40 | [] == true ? "a" : "b"; // "b" 41 | [] + [] // "" 42 | {} + {} // [object Object][object Object] 43 | [1,2,3] + {} // 1,2,3[object Object] 44 | ``` 45 | 46 | ## Manualna konwersja na liczby 47 | 48 | Zamiast zdawać na automatyczną konwersję typów przez JavaScript możemy 49 | samodzielnie wymusić konwersję typu za pomocą 50 | w budowanych funkcji `Number()`, `Boolean()`, `String()`, bądź `parseInt()`, 51 | `parseFloat()`. Oczywiście często możesz 52 | się spotkać z praktykami deweloperów, którzy wykorzystują znajomość zasady 53 | automatycznych konwersji i konwertują za pomocą 54 | operatorów takich, jak `+`, `!!` w celach krótszego zapisu: 55 | 56 | - `+` -> `Number()`, 57 | - `!!` -> `Boolean()` 58 | 59 | ```js 60 | Number("1"); // 1 <- konwertuje string na number 61 | Number(true); // 1 <- konwertuje boolean na number 62 | Boolean(1); // true <- konwertuje number na boolean 63 | String(1); // "1" <- konwertuje string na number 64 | 65 | parseInt(str, system_liczbowy); //parsuje string na liczbę całkowitą 66 | parseFloat(str); //parsuje string na liczbę 67 | ``` 68 | 69 | ## Zasady przy konwersji typów 70 | 71 | Zależnie od rodzaju wykonywanej operacji i użytych w niej typach Javascript 72 | konwertuje do jednego z typów: `String`, `Number`, `Boolean`. 73 | Możemy spotkać się konwersją przy użyciu takich operatorów, jak: [logiczny](operators/logical), 74 | [arytmetyczny](operators/arithmetics), [porównawczy](operators/comparision) czy [warunkowy](condition-statements/if-else). 75 | 76 | ```js 77 | !!"" // !!Boolean("") -> !!false -> false 78 | +"01" // +Number("01") -> 1 79 | "2" + 2 // "2" + String(2) -> "2" + "2" -> "22" 80 | 'true' == true // Number('true') == Number(true) -> NaN == 1 -> false 81 | 1 ? "a" : "b"; // Boolean(1) ? "a" : "b" -> true ? "a" : "b" -> "a" 82 | ``` 83 | 84 | Przy próbie konwersji typu złożonego jest wykonywana metoda *toPrmitive* na 85 | typie `object`. *toPrmitive* w uproszczeniu wykonuje metodę `valueOf` albo `toString`. 86 | Nie dotyczy przy konwersji użyciu operatora logicznego i warunkowego. 87 | 88 | ```js 89 | const a = {}; 90 | +a // a.valueOf() -> +a.toString() -> +"[object Object]" -> +Number("[object Object]") -> NaN 91 | 92 | // konwersja przy przysłoniętej metodzie valueOf 93 | const b = { 94 | valueOf: function(){ 95 | return "3"; 96 | } 97 | } 98 | -b // -b.valueOf() -> -"3" -> -Number("3") -> -3 99 | ``` 100 | 101 | ### Konwersja przy użyciu operatora logicznego (!, !!, &&, ||) 102 | 103 | ```js 104 | !!0 // !!Boolean(0) -> !!false -> false 105 | !!1 // !!Boolean(1) -> !!true -> true 106 | 107 | !!"" // !!Boolean("") -> !!false -> false 108 | !!"true" // !!Boolean("true") -> !!true -> true 109 | !!"false" // !!Boolean("false") -> !!true -> true 110 | 111 | !!null // !!Boolean(null) -> !!false -> false 112 | !!undefined // !!Boolean(undefined) -> !!false -> false 113 | 114 | !!{} // !!Boolean({}) -> !!true -> true 115 | !![] // !!Boolean([]) -> !!true -> true 116 | 117 | !!Symbol() // !!Boolean(Symbol()) -> !!true -> true 118 | ``` 119 | 120 | ### Konwersja przy użyciu operatora warunkowego (?) 121 | 122 | Oczywiście zasady są takie same przy instrukcji warunkowej: if, switch. 123 | 124 | ```js 125 | 0 ? "a" : "b" // Boolean(0) ? "a" : "b" -> false ? "a" : "b" -> "b" 126 | 1 ? "a" : "b" // Boolean(1) ? "a" : "b" -> true ? "a" : "b" -> "a" 127 | 128 | "" ? "a" : "b" // Boolean("") ? "a" : "b" -> false ? "a" : "b" -> "b" 129 | "true" ? "a" : "b" // Boolean("true") ? "a" : "b" -> true ? "a" : "b" -> "a" 130 | "false" ? "a" : "b" // Boolean("false") ? "a" : "b" -> true ? "a" : "b" -> "a" 131 | 132 | null ? "a" : "b" // Boolean(null) ? "a" : "b" -> false ? "a" : "b" -> "b" 133 | undefined ? "a" : "b" // Boolean(undefined) ? "a" : "b" -> false ? "a" : "b" -> "b" 134 | 135 | ({}) ? "a" : "b" // Boolean({}) ? "a" : "b" -> true ? "a" : "b" -> "a" 136 | [] ? "a" : "b" // Boolean([]) ? "a" : "b" -> true ? "a" : "b" -> "a" 137 | 138 | Symbol() ? "a" : "b" // Boolean(Symbol()) ? "a" : "b" -> true ? "a" : "b" -> "a" 139 | ``` 140 | 141 | ### Konwersja przy użyciu operatora arytmetycznego (-, + etc.) 142 | 143 | ```js 144 | +true // +Number(true) -> 1 145 | +false // +Number(false) -> 0 146 | 147 | +"" // +Number("") -> 0 148 | +"0" // +Number("0") -> 0 149 | +"1" // +Number("1") -> 1 150 | +"01" // +Number("01") -> 1 151 | +"konwersja1" // +Number("konwersja1") -> NaN 152 | 153 | +null // +Number(null) -> 0 154 | +undefined // +Number(undefined) -> NaN 155 | 156 | +{} // +({}).valueOf() -> +({}).toString() -> +"[object Object]" -> +Number("[object Object]") -> NaN 157 | +[] // +[].valueOf() -> +[].toString() -> +"" -> +Number("") -> 0 158 | +[1] // +[1].valueOf() -> +[1].toString() -> +"1" -> +Number("1") -> 1 159 | +[1,0] // +[1,0].valueOf() -> +[1,0].toString() -> +"1,0" -> +Number("1,0") -> NaN 160 | 161 | +Symbol() // throw error: cannot convert a Symbol value to a number 162 | 163 | // operacje na więcej niż jednym typie 164 | "2" + 2 // "2" + String(2) -> "2" + "2" -> "22" 165 | 2 + "2" // String(2) + "2" -> "2" + "2" -> "22" 166 | 2 + 2 + "2" // 4 + "2" -> String(4) + "2" -> "4" + "2" -> "42" 167 | 2 - 2 - "2" // 0 - "2" -> 0 Number("2") -> 0 - 2 -> -2 168 | [] + [] // "" -> bo obie tablice zostały skonwertowane na "" czyli mamy "" + "" 169 | {} + {} // [object Object][object Object] 170 | [1,2,3] + {} // 1,2,3[object Object] 171 | ``` 172 | 173 | ### Konwersja przy użyciu operatora porównawczego (==) 174 | 175 | porównanie z sobą wartości pustych zwraca `true` 176 | 177 | ```js 178 | null == undefined // true 179 | undefined == undefined // true 180 | null == null // true 181 | ``` 182 | 183 | porównanie wszystkiego innego z wartościami pustymi zwraca `false` 184 | 185 | ```js 186 | null == * // false 187 | undefined == * // false 188 | ``` 189 | 190 | wartość `NaN` nigdy z sobą nie są równe 191 | 192 | ```js 193 | NaN == NaN // false 194 | NaN === NaN // false 195 | ``` 196 | 197 | Przy luźnym porównaniu `string` do `number`. Wartość o typie `string` zostanie z konwertowana 198 | za pomocą operacji `Number()`. 199 | 200 | ```js 201 | "" == 0 // Number("") == 0 -> 0 == 0 -> true 202 | "0" == 0 // Number("0") == 0 -> 0 == 0 -> true 203 | "1" == 0 // Number("1") == 1 -> 1 == 0 -> false 204 | "abc" == 0 // Number("abc") == 0 -> NaN == 0 -> false 205 | ``` 206 | 207 | Natomiast przy porównaniu jakiegokolwiek wartości typu prostego do wartości typu 208 | `Boolean`. Obydwa typy przed porównaniem są konwertowane do number za pomocą operacji 209 | `Number()` 210 | 211 | ```js 212 | false == 0 // Number(false) == 0 -> 0 == 0 -> true 213 | true == 0 // Number(true) == 0 -> 1 == 0 -> false 214 | 215 | false == "" // Number(false) == Number("") -> 0 == 0 -> false 216 | 'true' == true // Number('true') == Number(true) -> NaN == 1 -> false 217 | 218 | ``` 219 | 220 | Przy porównaniu typu prostego `Boolean`, `String` bądź `Number` z `object` zostanie 221 | porównany typu prosty z wynikiem wykonania *toPrmitive*. 222 | 223 | ```js 224 | [] == "" // [].valueOf() == "" -> [].toString() == "" -> "" == "" -> true 225 | [] == "0" // [].valueOf() == "0" -> [].toString() == "0" -> "" == "0" -> false 226 | [] == 0 // [].valueOf() == 0 -> [].toString() == 0 -> "" == 0 -> Number("") == 0 -> 0 == 0 -> true 227 | 228 | [false] == 0 // [false].valueOf() == 0 -> [false].toString() == 0 -> "false" == 0 -> Number("false") == 0 -> NaN == 0 -> false 229 | 230 | ["0"] == 0 // ["0"].valueOf() == 0 -> ["0"].toString() == 0 -> "0" == 0 -> Number("0") == 0 -> 0 == 0 -> true 231 | ["0","0"] == 0 // ["0","0"].valueOf() == 0 -> ["0","0"].toString() == 0 -> "0,0" == 0 -> Number("0,0") == 0 -> NaN == 0 -> false 232 | 233 | const a = {}; 234 | a == "[object Object]" // a.valueOf() == "[object Object]" -> a.toString() == "[object Object]" -> "[object Object]" == "[object Object]" -> true 235 | a == "" // a.valueOf() == "" -> a.toString() == "" -> "[object Object]" == "" -> false 236 | a == 0 // a.valueOf() == 0 -> a.toString() == 0 -> "[object Object]" == 0 -> Number("[object Object]") == 0 -> NaN == 0 -> false 237 | a == true // a.valueOf() == true -> a.toString() == true -> "[object Object]" == true -> Number("[object Object]") == Number(true) -> NaN == 1 -> false 238 | 239 | // konwersja przy przysłoniętej metodzie valueOf 240 | const b = { 241 | valueOf: function(){ 242 | return "1"; 243 | } 244 | } 245 | 246 | b == 1 // b.valueOf() == 1 -> "1" == 1 -> Number("1") == 1 -> 1 == 1 -> true 247 | b == true // b.valueOf() == true -> "1" == true -> Number("1") == Number(true) -> 1 == 1 -> true 248 | 249 | ``` 250 | 251 | ## Truthy/falsy 252 | 253 | Możesz się spotkać takim pojęciem jak `false values` czy `true values`. 254 | Za tymi pojęciami kryje się lista wartości, które 255 | zwracają `true` albo `false` przy konwersji za pomocą w budowanej funkcji `Boolean()`. 256 | 257 | **Poniższe wartości są zawsze 'fałszywe':** 258 | 259 | - false 260 | - 0 (zero) 261 | - '' or "" (pusty string) 262 | - null 263 | - undefined 264 | - NaN 265 | 266 | Oraz: 267 | 268 | - document.all 269 | 270 | **Każde z pozostałych wartości są zawsze 'prawdziwe', włączając poniższe:** 271 | 272 | - '0' (string z wartością zero) 273 | - 'false' (string z wyrazem “false”) 274 | - [] (pusta tablica) 275 | - {} (pusty obiekt) 276 | - function(){} ('pusta' funkcja) 277 | 278 | ## Źródła 279 | 280 | - [Mozilla Developer Network](https://developer.mozilla.org) 281 | - [JavaScript Equality Table](https://dorey.github.io/JavaScript-Equality-Table/) 282 | - [Understanding JavaScript Truthy and Falsy](https://stackoverflow.com/questions/35642809/understanding-javascript-truthy-and-falsy) 283 | - [Developer - Falsy](https://html.spec.whatwg.org/multipage/obsolete.html#dom-document-all) 284 | -------------------------------------------------------------------------------- /data-types/let.md: -------------------------------------------------------------------------------- 1 | # Let 2 | 3 | ![let](let.png) 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/let.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/data-types/let.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /data-types/types.md: -------------------------------------------------------------------------------- 1 | # Typy wartości 2 | 3 | Standard ECMAScript definiuje siedem typów danych: 4 | 5 | Sześć *typów prostych* (primitives): 6 | 7 | - **Boolean**. `true` oraz `false`. 8 | - **Number**. `42` lub `3.14159`. 9 | - **String**. `"Siemanko"` 10 | - **Symbol** (nowość w ECMAScript 6). Typ danych, gdzie przykłady 11 | są niepowtarzalne i niezmienne. 12 | 13 | Z czego dwie poniższe nie mogą przechowywać wartości: 14 | 15 | - **null**. Specjalne słowo kluczowe oznaczające wartość pustą. 16 | Ponieważ w języku JavaScript rozróżniana jest wielkość liter, 17 | `null` nie jest tym samym co Null, NULL lub jakikolwiek inny wariant. 18 | - **undefined**. Najwyższa właściwość, której wartość jest nieokreślona. 19 | Typ jest zwracany, gdy zmienna nie ma przypisanej wartości bądź, 20 | gdy funkcja jawnie nic nie zwraca. 21 | 22 | Oraz *typ złożony* (composite): 23 | 24 | - **Object** (do którego można również zaliczyć podtypy functions i array) 25 | 26 | Do sprawdzenia typu danych korzystamy z instrukcji `typeof`: 27 | 28 | ```js 29 | const num = 10; 30 | const str = 'przykładowy tekst'; 31 | const arr = []; 32 | const obj = {}; 33 | const nul = null; 34 | //zmiennej und specjalnie nie zadeklarowałem 35 | 36 | //wypisujemy typy zmiennych 37 | console.log( typeof num ); //"number" 38 | console.log( typeof str ); //"string" 39 | console.log( typeof arr ); //"object" hmm? 40 | console.log( typeof obj ); //"object" 41 | console.log( typeof und ); //"undefined" 42 | console.log( typeof nul ); //"object" hmm? 43 | ``` 44 | 45 | ## undefined 46 | 47 | `undefined` jest zmienną o zasięgu globalnym o tej samej nazwie i wartości. 48 | 49 | ```js 50 | console.log(undefined); // undefined 51 | ``` 52 | 53 | Przypisanie innej wartości do zmiennej `undefined` nie powoduje zmiany. 54 | 55 | ```js 56 | undefined = 1 57 | console.log(undefined); // undefined 58 | ``` 59 | 60 | Można jednak przysłonić wartość zmiennej `undefined`. Każde przypisanie wtedy 61 | `undefined` będzie zwracać nową wartość. 62 | `undefined` nie znajduje się na [liście słów zarezerwowanych](data-types/variables.md?id=lista-słów-zarezerwowanych), 63 | stąd możliwość przypisania w odróżnieniu do typu `null`, gdzie nie jest to możliwe. 64 | 65 | ```js 66 | const undefined = 1 67 | console.log(undefined); // 1 68 | ``` 69 | 70 | ### Kiedy mamy do czynienia z `undefined` 71 | 72 | ```js 73 | // Przy dostępie do nie przysłoniętej wartości `undefined`: 74 | console.log(undefined); // undefined 75 | 76 | // Gdy zadeklarowana zmienna nie ma przypisanej wartości: 77 | let a; 78 | console.log(a); // undefined 79 | 80 | // W odwołaniu się do nie istniejącej wartości w obiekcie: 81 | const object = {}; 82 | console.log(object.a); // undefined 83 | 84 | // Wszędzie, gdzie została przypisana wartość `undefined`: 85 | let b; 86 | const c = b; 87 | console.log(c); // undefined 88 | 89 | // W zwracanej przez funkcje wartość, która nie ma deklaracji `return`: 90 | function doNothing() { /* empty */ } 91 | doNothing() // undefined 92 | 93 | // W zwracanej przez funkcje wartość, w której deklaracja `return` nic jawnie nie zwraca: 94 | function doNothing() { return; } 95 | doNothing() // undefined 96 | 97 | // Gdy parametr funkcji nie przyjmuje żadnej wartości: 98 | function showNames(name,lastname){return name + ", " + lastname;} 99 | showNames("Jan") // "Jan, undefined" 100 | ``` 101 | 102 | ## null 103 | 104 | Jest wykorzystywany do deklaracji końca łańcucha prototypów. 105 | 106 | ```js 107 | const object = { 108 | name: "JavaScript" 109 | }; 110 | object.hasOwnProperty("name") // true 111 | 112 | object.__proto__ = undefined; 113 | object.hasOwnProperty("name") // true 114 | 115 | object.__proto__ = null; 116 | object.hasOwnProperty("name") // throw error: object.hasOwnProperty is not a function 117 | ``` 118 | 119 | Wartość `null` w przeciwieństwie do `undefined` wystąpuje jedynie po przypisaniu. 120 | Nazwa typu jest zastrzeżona w 121 | [liście słów zarezerwowanych](data-types/variables.md?id=lista-słów-zarezerwowanych). 122 | Ciekawostką jest, że `typeof null` 123 | zwraca "object", co nazywane jest często błędem języka. 124 | 125 | Źródło: [The history of “typeof null”](https://2ality.com/2013/10/typeof-null.html) 126 | -------------------------------------------------------------------------------- /data-types/var.md: -------------------------------------------------------------------------------- 1 | # var 2 | 3 | ![var](var.png ) 4 | 5 | Deklaracje `var`, gdziekolwiek występują, są przetwarzane przed wykonaniem 6 | jakiegokolwiek kodu. Nazywa się to podnoszeniem (*hoisting*) 7 | i omówimy to zjawisko poniżej. 8 | 9 | Zakres zmiennej zadeklarowanej za pomocą `var` jest bieżącym kontekstem wykonania, 10 | który jest funkcją zamykającą lub, w przypadku zmiennych zadeklarowanych poza 11 | jakąkolwiek funkcją, globalną. 12 | 13 | Jeśli ponownie zadeklarujesz zmienną JavaScript, nie straci ona swojej wartości. 14 | Przypisanie wartości do niezadeklarowanej zmiennej domyślnie tworzy ją jako 15 | zmienną globalną (staje się własnością obiektu globalnego) podczas przypisywania. 16 | Różnice między zmiennymi zadeklarowanymi i niezadeklarowanymi to: 17 | 18 | 1. Zmienne zadeklarowane są ograniczone w kontekście wykonania, w którym zostały 19 | zadeklarowane. Niezadeklarowane zmienne są zawsze globalne. 20 | 21 | ```js 22 | function x() { 23 | y = 1; // Throws a ReferenceError in strict mode. 24 | var z = 2; 25 | } 26 | 27 | x(); 28 | 29 | console.log(y); // 1 30 | console.log(z); // Throws a ReferenceError: z is not defined outside x. 31 | ``` 32 | 33 | 2. Zadeklarowane zmienne są tworzone przed wykonaniem jakiegokolwiek kodu. 34 | Niezadeklarowane zmienne nie istnieją, dopóki nie zostanie do nich przypisany 35 | kod. 36 | 37 | ```js 38 | console.log(a); // "undefined" or "" depending on browser 39 | console.log('still going...'); // still going... 40 | var a = 1; 41 | console.log(a); // 1 42 | console.log('still going...'); // still going... 43 | ``` 44 | 45 | 3. Zadeklarowane zmienne są "nieskonfigurowalną" właściwością kontekstu wykonania 46 | (funkcji lub globalnego). Niezadeklarowane zmienne można konfigurować 47 | (np. można je usunąć). 48 | 49 | ```js 50 | var a = 1; 51 | b = 2; 52 | 53 | delete this.a; // Throws a TypeError in strict mode. Fails silently otherwise. 54 | delete this.b; 55 | 56 | console.log(a, b); // Throws a ReferenceError. 57 | // The 'b' property was deleted and no longer exists. 58 | ``` 59 | 60 | Z powodu tych trzech różnic niezadeklarowanie zmiennych najprawdopodobniej doprowadzi 61 | do nieoczekiwanych wyników. Dlatego zaleca się, aby zawsze deklarować zmienne, 62 | niezależnie od tego, czy mają one funkcję, czy zasięg globalny. W trybie ścisłym 63 | (`strict mode`) ECMAScript 5 przypisanie do niezadeklarowanej zmiennej powoduje błąd. 64 | 65 | ## Hoisting 66 | 67 | Ponieważ deklaracje zmiennych (i ogólnie deklaracje) są przetwarzane przed wykonaniem 68 | jakiegokolwiek kodu, zadeklarowanie zmiennej w dowolnym miejscu w kodzie jest 69 | równoważne zadeklarowaniu jej na górze. Oznacza to również, że zmienna może 70 | wydawać się używana, zanim zostanie zadeklarowana. To zachowanie nazywa się 71 | „podnoszeniem”, ponieważ wydaje się, że deklaracja zmiennej jest przenoszona na 72 | górę funkcji lub do kodu globalnego. 73 | 74 | ```js 75 | bla = 2; 76 | var bla; 77 | 78 | // ...is implicitly understood as: 79 | 80 | var bla; 81 | bla = 2; 82 | ``` 83 | 84 | Z tego powodu zaleca się, aby zawsze deklarować zmienne u góry zakresu 85 | (u góry kodu globalnego i u góry kodu funkcji), aby było jasne, które zmienne 86 | mają zakres funkcji (lokalny), a które są rozwiązywane w łańcuchu zasięgu. 87 | Należy zauważyć, że podnoszenie wpłynie na deklarację zmiennej, ale nie na 88 | inicjalizację jej wartości. Wartość zostanie rzeczywiście przypisana po 89 | osiągnięciu instrukcji przypisania: 90 | 91 | ```js 92 | function do_something() { 93 | console.log(bar); // undefined 94 | var bar = 111; 95 | console.log(bar); // 111 96 | } 97 | 98 | // ...is implicitly understood as: 99 | 100 | function do_something() { 101 | var bar; 102 | console.log(bar); // undefined 103 | bar = 111; 104 | console.log(bar); // 111 105 | } 106 | ``` 107 | 108 | ## Źródła 109 | 110 | * [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var) 111 | * [scotch.io](https://scotch.io/courses/10-need-to-know-javascript-concepts/declaring-javascript-variables-var-let-and-const) 112 | -------------------------------------------------------------------------------- /data-types/var.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/data-types/var.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /events/keyboard-events.md: -------------------------------------------------------------------------------- 1 | # Zdarzenia związane z klawiaturą 2 | 3 | | Name | Description 4 | |----------|---------------------------------------------------------------------------------| 5 | | keypress | Jeśli został wciśnięty jakikolwiek klawisz oprócz Shift, Fn, CapsLock| 6 | | keyup | Jeśli został zwolniony jakikolwiek klawisz| 7 | | keydown | Jeśli został naciśnięty jakikolwiek klawisz| 8 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /events/practice.md: -------------------------------------------------------------------------------- 1 | # Eventy 2 | 3 | Przełącz się na branch `07-events` 4 | 5 | - Ćwiczenie 1 6 | 7 | Wpisz w terminalu polecenie `npm install` 8 | 9 | - Ćwiczenie 2 10 | 11 | * stwórz funkcję, która zbuduje drzewo DOM 12 | 13 | * stwórz funkcję, która spowoduje utworzenie elementu `button` 14 | 15 | * stwórz funkcję, dzięki której będzie możliwe korzystanie z nowoutworzonego 16 | buttona. Dzięki tej funkcji: 17 | 18 | - będziemy mogli zmieniać wartość napisu na przycisku 19 | 20 | - oraz będziemy mogli włączać i wyłączać dźwięk 21 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /functions/callback-hell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/functions/callback-hell.png -------------------------------------------------------------------------------- /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 18) { 134 | return true; 135 | } else { 136 | return confirm('Do you have permission from your parents?'); 137 | } 138 | } 139 | 140 | let age = prompt('How old are you?', 18); 141 | 142 | if ( checkAge(age) ) { 143 | alert( 'Access granted' ); 144 | } else { 145 | alert( 'Access denied' ); 146 | } 147 | ``` 148 | 149 | Możliwe jest użycie `return` bez wartości. To powoduje, że funkcja natychmiast 150 | się kończy. 151 | 152 | ```js 153 | function showMovie(age) { 154 | if ( !checkAge(age) ) { 155 | return; 156 | } 157 | 158 | alert( "Showing you the movie" ); // (*) 159 | // ... 160 | } 161 | ``` 162 | 163 | W powyższym kodzie, jeśli `checkAge(age)` zwraca wartość `false`, `showMovie()` 164 | nie przejdzie do alertu. 165 | 166 | ## Ważne wskazówki 167 | 168 | - Funkcja z pustym `return` lub bez niego zwraca wartość `undefined` 169 | 170 | ```js 171 | function doNothing() { /* empty */ } 172 | 173 | alert( doNothing() === undefined ); // true 174 | ``` 175 | 176 | ```js 177 | function doNothing() { 178 | return; 179 | } 180 | 181 | alert( doNothing() === undefined ); // true 182 | ``` 183 | 184 | - Nigdy nie dodawaj nowego wiersza między `return` a wartością 185 | 186 | ```js 187 | return 188 | (some + long + expression + or + whatever * f(a) + f(b)) 189 | ``` 190 | 191 | ```js 192 | return; 193 | (some + long + expression + or + whatever * f(a) + f(b)) 194 | ``` 195 | 196 | Jeśli chcemy, aby zwrócone wyrażenie było zawijane w wielu wierszach, 197 | powinniśmy zacząć je od tej samej linii co `return`. 198 | Lub przynajmniej umieść tam nawiasy otwierające w następujący sposób: 199 | 200 | ```js 201 | return ( 202 | some + long + expression 203 | + or + 204 | whatever * f(a) + f(b) 205 | ) 206 | ``` 207 | 208 | - Funkcje to akcje, więc ich nazwa jest zwykle czasownikiem. Powinien być krótki, 209 | możliwie jak najdokładniejszy i opisywać, co robi funkcja, 210 | - aby osoba czytająca kod otrzymała informację o tym, co robi funkcja. 211 | - Powszechną praktyką jest uruchamianie funkcji ze słownym przedrostkiem, 212 | który niejasno opisuje akcję. 213 | 214 | Nazwy mogą zaczynać się od: 215 | - `„get…”` - zwraca wartość, 216 | - `„calc…”` - oblicza coś, 217 | - `„tworzy…”` - tworzy coś, 218 | - `„sprawdza…”` - sprawdza coś i zwraca wartość logiczną itp. 219 | 220 | Przykładowe nazwy funkcji: 221 | - `showMessage(..)` // pokazuje komunikat 222 | - `getAge(..)` // zwraca wiek 223 | - `calcSum(..)` // oblicza sumę i zwraca wynik 224 | - `createForm(..)` // tworzy formularz 225 | - `checkPermission(..)` // sprawdza uprawnienia 226 | 227 | Po wprowadzeniu prefiksów rzut oka na nazwę funkcji pozwala zrozumieć, jaki 228 | rodzaj pracy wykonuje i jaką wartość zwraca. 229 | 230 | - Jedna funkcja, jedna akcja. 231 | Funkcja powinna robić dokładnie to, co sugeruje jej nazwa, nie więcej. 232 | 233 | Dwie niezależne akcje zwykle zasługują na dwie funkcje, nawet jeśli zwykle są 234 | wywoływane razem (w takim przypadku możemy wykonać trzecią funkcję, 235 | która wywołuje te dwie). Kilka przykładów złamania tej reguły: 236 | 237 | - `getAge()` - byłoby źle, gdyby wyświetlał `alert` z wiekiem 238 | (powinien się dostać tylko). 239 | - `createForm()` - byłoby źle, gdyby modyfikował dokument, dodając do niego 240 | formularz (powinien tylko go utworzyć i zwrócić). 241 | - `checkPermission()` - byłoby złe, gdyby wyświetlał komunikat o przyznaniu / 242 | odmowie dostępu (powinien tylko wykonać sprawdzenie i zwrócić wynik). 243 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /functions/practice.md: -------------------------------------------------------------------------------- 1 | # Funkcje 2 | 3 | Przełącz się na `branch 05-functions` 4 | 5 | --- 6 | 7 | - Ćwiczenie 1 8 | 9 | Napisz funkcję `min(a, b)`, która zwróci liczbę mającą mniejszą wartość. 10 | 11 | Wywołanie funkcji powinno mieć postać np. `min(2, 5) == 2`. 12 | 13 | --- 14 | 15 | - Ćwiczenie 2 16 | 17 | Napisz funkcję `pow(x, n)`, która zwraca `x` podniesione do potęgi `n`. 18 | 19 | --- 20 | 21 | - Ćwiczenie 3 22 | 23 | Napisz funkcję przyjmującą jeden parametr typu `string`. 24 | Funkcja ma zwracać ilość liter, z których składa się `string`. 25 | 26 | --- 27 | 28 | - Ćwiczenie 4 29 | 30 | Napisz funkcję, która zsumuje przekazaną do niej tablicę i zwróci wynik. 31 | 32 | --- 33 | 34 | - Ćwiczenie 5 35 | 36 | Napisz funkcję, która odwraca kolejność elementów w tablicy, 37 | która jest przekazywana do funkcji 38 | 39 | --- 40 | 41 | - Ćwiczenie 6 42 | 43 | Napisz funkcję łączącą dwie tablice 44 | 45 | --- 46 | 47 | - Ćwiczenie 7 48 | 49 | Napisz funkcję sprawdzającą jakiego typu jest parametr do niej przekazany 50 | 51 | --- 52 | 53 | - Ćwiczenie 8 54 | 55 | Stwórz dwie zmienne, które zawierają zmienne losowe: 56 | 57 | - sprawdź która jest większa 58 | - zaokrąglij każdą z nich w górę i w dół 59 | 60 | --- 61 | 62 | - Ćwiczenie 9 63 | 64 | Stwórz funkcję wypisującą aktualną datę i godzinę. 65 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /introduction/how-to-use-js.md: -------------------------------------------------------------------------------- 1 | # Umieszczanie kodu JavaScript w HTML 2 | 3 | Skrypty możemy wstawiać na stronę na 2 sposoby: 4 | 5 | - bezpośrednio w kodzie HTML: 6 | 7 | ```html 8 | 9 | 10 | 11 | 12 | Document 13 | 14 | 15 | . 16 | . 17 | . 18 | 21 | 22 | 23 | ``` 24 | 25 | - drugim sposobem wstawiania skryptu jest dołączenie zewnętrznego pliku, który 26 | zawiera nasz kod. Deklaracja skryptu jest podobna, jak przy wstawianiu w treści strony, 27 | jednak znacznik ``. 30 | 31 | ```html 32 | 33 | 34 | 35 | 36 | Document 37 | 38 | 39 | . 40 | . 41 | . 42 | 43 | 44 | 45 | ``` 46 | 47 | ## Która metoda jest lepsza? 48 | 49 | Wszystko zależy od tego, jaki chcemy osiągnąć cel. Powszechną praktyką jest 50 | dołączanie zewnętrznego pliku. 51 | 52 | Do niedawna, gdy protokół **HTTP/2** nie był tak powszechny, w celu optymalizacji 53 | ilości zapytań wysyłanych przez przeglądarkę do serwerów, jedną z praktyk było 54 | umieszczanie kodu JavaScript w pliku html. 55 | 56 | ## Asynchroniczne ładowanie skryptów 57 | 58 | Możesz spotkać się z sytuacją, gdy w znaczniku ` 63 | 64 | ``` 65 | 66 | Jednym ze sposobów na przyspieszenie wczytywania strony internetowej jest 67 | asynchroniczne ładowanie skryptów JavaScript. 68 | 69 | Atrybut `async` powoduje, że jeżeli przeglądarka czytając kod strony natrafi na 70 | plik ze skryptem zacznie go wczytywać w tle, równocześnie czytając dalszą część 71 | kodu strony. Jeżeli cały plik ze skryptem się wczyta, wtedy kod zostanie odpalony. 72 | 73 | Atrybut `defer` działa w miarę podobnie. Plik ze skryptem też będzie wczytywany 74 | w tle. Różnica jest taka, że jeżeli przeglądarka wczyta już cały plik ze skryptem, 75 | odpali go po załadowaniu całego dokumentu. 76 | 77 | ## Wstawianie skryptów w kodzie HTML 78 | 79 | Możliwe jest zainicjowanie kodu JS w sekcji ``. 80 | Jednak jedną z dobrych praktyk jest inicjowanie kodu JS przed tagiem zamykającym 81 | sekcję ``. 82 | 83 | Dzieje się tak z dwóch powodów: 84 | 85 | - w pierwszej kolejności użytkownik powinien dostać treść strony; 86 | - najczęściej skrypty JS działają na określonych elementach witryny, zatem 87 | optymalne jest załadowanie skryptów tuż po utwórzeniu wspomnianych elementów. 88 | 89 | ```html 90 | 91 | 92 | 93 | 94 | Document 95 | 96 | 97 | 98 | . 99 | . 100 | . 101 | 102 | 103 | 104 | ``` 105 | 106 | ## Komentowanie kodu 107 | 108 | W JavaScript mamy do dyspozycji dwa rodzaje komentarzy: 109 | 110 | - wielolinijkowy 111 | 112 | ```js 113 | /* 114 | komentarz składający się 115 | z wielu linii 116 | */ 117 | ``` 118 | 119 | - jednolinijkowy 120 | 121 | ```js 122 | //komentarz jednolinijkowy 123 | ``` 124 | -------------------------------------------------------------------------------- /introduction/js_external_file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/introduction/js_external_file.png -------------------------------------------------------------------------------- /introduction/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/introduction/js_logo.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /loops/do-while.md: -------------------------------------------------------------------------------- 1 | # Pętla `do...while` 2 | 3 | Instrukcja `do...while` tworzy pętlę, która wykonuje określoną instrukcję, 4 | dopóki warunek testu nie zostanie oceniony na `false`. Warunek jest oceniany 5 | po wykonaniu instrukcji, co powoduje wykonanie określonej instrukcji 6 | co najmniej raz. 7 | 8 | ```js 9 | var result = ""; 10 | var i = 0; 11 | 12 | do { 13 | i = i + 1; 14 | result = result + i; 15 | } while (i < 5); 16 | 17 | console.log(result); 18 | // expected result: "12345" 19 | ``` 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | ![for](for.png) 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 | -------------------------------------------------------------------------------- /loops/for.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/loops/for.png -------------------------------------------------------------------------------- /loops/practice.md: -------------------------------------------------------------------------------- 1 | # Pętle 2 | 3 | Przełącz się na branch `04-conditional-statements-and-loops` 4 | 5 | - Ćwiczenie 1 6 | 7 | Za pomocą pętli `for` wypisz w konsoli tekst 8 | `******` 9 | 10 | Gwiazdki powinny być w jednej linii. Skorzystaj tutaj z dodatkowej zmiennej, 11 | np. `let string`. 12 | 13 | --- 14 | 15 | - Ćwiczenie 2 16 | 17 | Za pomocą pętli `for` wypisz w konsoli tekst 18 | `12345678910` 19 | 20 | --- 21 | 22 | - Ćwiczenie 3 23 | 24 | Przepisz kod zmieniając pętlę `for` na `while` bez zmiany 25 | jego zachowania (wynik powinien pozostać taki sam). 26 | 27 | ```js 28 | for (let i = 0; i < 3; i++) { 29 | alert( `number ${i}!` ); 30 | } 31 | ``` 32 | 33 | --- 34 | 35 | - Ćwiczenie 4 36 | 37 | Używając pętli `for..of` przypisz imię dla każdego zwierzęcia 38 | 39 | ```js 40 | let animals = ['🐔', '🐷', '🐑', '🐇']; 41 | let names = ['Gertrude', 'Henry', 'Melvin', 'Billy Bob']; 42 | ``` 43 | 44 | --- 45 | 46 | - Ćwiczenie 5 47 | 48 | Używając pętli `for..in` wypisz w konsoli wszystkie wartości, 49 | które są przypisane do właściwości obiektu `country` 50 | 51 | ```js 52 | country = { 53 | "name": "Poland", 54 | "alpha2Code": "PL", 55 | "capital": "Warsaw", 56 | "region": "Europe", 57 | "subregion": "Eastern Europe", 58 | "population": 38437239, 59 | } 60 | ``` 61 | -------------------------------------------------------------------------------- /loops/while.md: -------------------------------------------------------------------------------- 1 | # Pętla `while` 2 | 3 | Instrukcja `while` tworzy pętlę, która wykonuje określoną instrukcję, 4 | o ile warunek testu zostanie oceniony jako `true`. 5 | Warunek jest oceniany przed wykonaniem instrukcji. 6 | 7 | ```js 8 | var n = 0; 9 | 10 | while (n < 3) { 11 | n++; 12 | } 13 | 14 | console.log(n); 15 | // expected output: 3 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /modern-features/classes.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/modern-features/classes.md -------------------------------------------------------------------------------- /modern-features/destructuring.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/modern-features/destructuring.md -------------------------------------------------------------------------------- /modern-features/operator-rest.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/modern-features/operator-rest.md -------------------------------------------------------------------------------- /modern-features/operator-spread.md: -------------------------------------------------------------------------------- 1 | # Spread Operator 2 | 3 | Spread operator rozbija strukturę na pojedyncze elementy. 4 | 5 | ## Przykład 6 | 7 | ```js 8 | const common = { 9 | entry: 'main.js', 10 | } 11 | 12 | const dev = { 13 | ...common, 14 | mode: 'development', 15 | } 16 | 17 | console.log(dev); 18 | /* 19 | { 20 | entry: 'main.js', 21 | mode: 'development', 22 | } 23 | */ 24 | ``` 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/create-object.md: -------------------------------------------------------------------------------- 1 | # Tworzenie obiektów 2 | 3 | Możesz utworzyć obiekt JavaScript na cztery różne sposoby : 4 | 5 | - używając literału obiektu 6 | - używając metody konstruktora 7 | - przy pomocy klas (ES6) 8 | - przy pomocy metody `Object.create()` 9 | 10 | ## Literał obiektu 11 | 12 | Zdefiniowanie `literału obiektu` jest najprostszym sposobem na utworzenie obiektu 13 | JavaScript. Ponieważ obiekty są zmiennymi, możesz tworzyć je w taki 14 | sam sposób jak zmienną.Na przykład poniższy kod tworzy obiekt o nazwie `user` 15 | z trzema właściwościami: `firstName`, `lastName` i `dateOfBirth`: 16 | 17 | ```js 18 | const user = { 19 | firstName: "John", 20 | lastName: "Smith", 21 | dateOfBirth: 1985 22 | }; 23 | ``` 24 | 25 | Jeśli otworzysz konsolę w przeglądarce internetowej, możesz skorzystać z 26 | `console.log()`, aby sprawdzić, czy obiekt został naprawdę utworzony: 27 | 28 | ```js 29 | console.log(user); 30 | // {firstName: "John", lastName: "Smith", dateOfBirth: 1985} 31 | ``` 32 | 33 | Możesz także dodać metodę do literału obiektu. Na przykład poniższa metoda 34 | `getName()` pobiera dwie właściwości obiektu `user` (`firstName` i `lastName`) 35 | i zwraca pełną nazwę użytkownika. Słowo kluczowe `this` odnosi się do 36 | bieżącego obiektu, którego właściwości wywołuje metoda. 37 | 38 | ```js 39 | const user = { 40 | firstName: "John", 41 | lastName: "Smith", 42 | dateOfBirth: 1985, 43 | getName: function(){ 44 | return "User's name: " + this.firstName + " " + this.lastName; 45 | } 46 | }; 47 | ``` 48 | 49 | Możesz sprawdzić metodę `getName()` w konsoli, używając tej samej notacji 50 | kropkowej. Nie zapomnij jednak wstawić nawiasów po nazwie metody, ponieważ 51 | w ten sposób JavaScript odróżnia metody od właściwości. Jeśli pominiesz nawiasy, 52 | konsola nie wykona metody, ponieważ będzie szukała właściwości o nazwie getName 53 | zamiast metody o nazwie `getName()`. 54 | 55 | ```js 56 | console.log(user.getName()); // User's name: John Smith` 57 | ``` 58 | 59 | Możliwe jest również użycie obiektów jako właściwości obiektów. 60 | Ta możliwość jest bardzo przydatna, gdy chcesz uporządkować dane przechowywane 61 | w obiekcie. Poniżej obiekt `user` zawiera właściwość `spokenLanguages`, 62 | która jest również obiektem. Możesz zobaczyć, że jest zdefiniowany dokładnie 63 | tak samo, jak każdy inny literał obiektu. 64 | 65 | ```js 66 | const user = { 67 | firstName: "John", 68 | lastName: "Smith", 69 | dateOfBirth: 1985, 70 | spokenLanguages: { 71 | native: "English", 72 | fluent: "Spanish", 73 | intermediate: "Chinese" 74 | } 75 | }; 76 | ``` 77 | 78 | Teraz, gdy wywołasz wartość właściwości `spokenLanguages`, konsola zwraca cały obiekt: 79 | 80 | ```js 81 | console.log(user.spokenLanguages); 82 | // {native: "English", fluent: "Spanish", intermediate: "Chinese"} 83 | ``` 84 | 85 | Możemy też dynamicznie dodawać nowe i modyfikować istniejące właściwości. 86 | 87 | ```js 88 | user.city = "London"; 89 | console.log(user); 90 | //{firstName: "John", lastName: "Smith", dateOfBirth: 1985, getName: ƒ, city: "London"} 91 | 92 | user.firstName = "David"; 93 | console.log(user); 94 | //{firstName: "David", lastName: "Smith", dateOfBirth: 1985, getName: ƒ, city: "London"} 95 | ``` 96 | -------------------------------------------------------------------------------- /objects/introduction.md: -------------------------------------------------------------------------------- 1 | # **Czym są obiekty** 2 | 3 | Obiekty w JavaScript są najważniejszym typem danych i stanowią 4 | elementy składowe języka. 5 | Obiekty różnią się znacznie od prymitywnych typów 6 | danych JavaScript (`number`, `string`, `boolean`, `null`, `undefined` i 7 | `symbol`) w tym sensie, że chociaż prymitywne typy danych przechowują po 8 | jednej wartości (w zależności od ich typów), to: 9 | 10 | - obiekty są bardziej złożone i każdy obiekt może zawierać dowolną kombinację 11 | prymitywnych typów danych, a także referencyjne typy danych. 12 | - obiekt jest referencyjnym typem danych. Zmienne, którym przypisano wartość 13 | referencji, otrzymują referencję lub wskaźnik do tej wartości. Odwołanie lub 14 | wskaźnik wskazuje miejsce w pamięci, w którym obiekt jest przechowywany. 15 | Zmienne tak naprawdę nie przechowują wartości. 16 | - obiekty w JavaScript mogą być zdefiniowane jako nieuporządkowany zbiór 17 | powiązanych danych, typów pierwotnych lub referencyjnych, w postaci par „klucz: 18 | wartość”. Te klucze mogą być zmiennymi lub funkcjami i nazywane są odpowiednio 19 | właściwościami i metodami w kontekście obiektu. 20 | 21 | Obiekt można utworzyć za pomocą nawiasów klamrowych `{…}` z opcjonalną listą 22 | właściwości. Właściwość to para `„klucz: wartość”`, gdzie klucz jest ciągiem 23 | (zwanym także „nazwą właściwości”), a wartość może być dowolna. 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /operators/arithmetics.md: -------------------------------------------------------------------------------- 1 | # Operatory arytmetyczne 2 | 3 | 4 | 5 | | Operator | Description | Example | 6 | |-------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------| 7 | | Remainder (%) | Binary operator. Returns the integer remainder of dividing the two operands.| 12 % 5 returns 2.| 8 | | Increment (++) | Unary operator. Adds one to its operand. If used as a prefix operator (++x), returns the value of its operand after adding one; if used as a postfix operator (x++), returns the value of its operand before adding one.| If x is 3, then ++x sets x to 4 and returns 4, whereas x++ returns 3 and, only then, sets x to 4.| 9 | | Decrement (--) | Unary operator. Subtracts one from its operand. The return value is analogous to that for the increment operator.| If x is 3, then --x sets x to 2 and returns 2, whereas x-- returns 3 and, only then, sets x to 2.| 10 | | Unary negation (-) | Unary operator. Returns the negation of its operand.| If x is 3, then -x returns -3.| 11 | | Unary plus (+) | Unary operator. Attempts to convert the operand to a number, if it is not already.| +"3" returns 3.+true returns 1.| 12 | | Exponentiation operator (**) | Calculates the base to the exponent power, that is, baseexponent | 2 ** 3 returns 8.10 ** -1 returns 0.1.| 13 | 14 | Źródło: [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators) 15 | 16 | ## Dodawanie (+) 17 | 18 | Operator dodawania generuje sumę operandów numerycznych lub konkatenacji łańcuchów. 19 | 20 | ### Operator: x + y 21 | 22 | Przykłady: 23 | 24 | ```js 25 | // Number + Number -> addition 26 | 1 + 2 // 3 27 | 28 | // Boolean + Number -> addition 29 | true + 1 // 2 30 | 31 | // Boolean + Boolean -> addition 32 | false + false // 0 33 | 34 | // Number + String -> concatenation 35 | 5 + 'foo' // "5foo" 36 | 37 | // String + Boolean -> concatenation 38 | 'foo' + false // "foofalse" 39 | 40 | // String + String -> concatenation 41 | 'foo' + 'bar' // "foobar" 42 | ``` 43 | 44 | ## Odejmowanie(-) 45 | 46 | Operator odejmowania odejmuje dwa operandy, powodując ich różnicę. 47 | 48 | ### Operator: x - y 49 | 50 | Przykłady: 51 | 52 | ```js 53 | 5 - 3 // 2 54 | 3 - 5 // -2 55 | 'foo' - 3 // NaN 56 | ``` 57 | 58 | ## Dzielenie(/) 59 | 60 | Operator podziału wytwarza iloraz swoich operandów, gdzie lewy operand jest dzielną, 61 | a prawy operand jest dzielnikiem. 62 | 63 | ### Operator: x / y 64 | 65 | Przykłady: 66 | 67 | ```js 68 | 1 / 2 // returns 0.5 in JavaScript 69 | 1 / 2 // returns 0 in Java 70 | // (neither number is explicitly a floating point number) 71 | 72 | 1.0 / 2.0 // returns 0.5 in both JavaScript and Java 73 | 74 | 2.0 / 0 // returns Infinity in JavaScript 75 | 2.0 / 0.0 // returns Infinity too 76 | 2.0 / -0.0 // returns -Infinity in JavaScript 77 | ``` 78 | 79 | ## Mnożenie(*) 80 | 81 | Operator mnożenia tworzy iloczyn operandów. 82 | 83 | ### Operator: x * y 84 | 85 | Przykłady: 86 | 87 | ```js 88 | 2 * 2 // 4 89 | -2 * 2 // -4 90 | Infinity * 0 // NaN 91 | Infinity * Infinity // Infinity 92 | 'foo' * 2 // NaN 93 | ``` 94 | 95 | ## Modulo(%) 96 | 97 | *Operator reszty zwraca resztkę pozostałą po podzieleniu jednego operandu przez 98 | drugi operand. To zawsze wymaga znaku dzielenia.* 99 | 100 | ### Operator: var1 % var2 101 | 102 | ```js 103 | 12 % 5 // 2 104 | -1 % 2 // -1 105 | 1 % -2 // 1 106 | NaN % 2 // NaN 107 | 1 % 2 // 1 108 | 2 % 3 // 2 109 | -4 % 2 // -0 110 | 5.5 % 2 // 1.5 111 | ``` 112 | 113 | ## Potęgowanie( ** ) 114 | 115 | Operator potęgowania zwraca wynik podniesienia pierwszego operandu do potęgi 116 | drugiego operandu. 117 | 118 | ### Operator: var1 ** var2 119 | 120 | Przykłady: 121 | 122 | ```js 123 | 2 ** 3 // 8 124 | 3 ** 2 // 9 125 | 3 ** 2.5 // 15.588457268119896 126 | 10 ** -1 // 0.1 127 | NaN ** 2 // NaN 128 | 129 | 2 ** 3 ** 2 // 512 130 | 2 ** (3 ** 2) // 512 131 | (2 ** 3) ** 2 // 64 132 | ``` 133 | -------------------------------------------------------------------------------- /operators/assignments.md: -------------------------------------------------------------------------------- 1 | # Operatory przypisania 2 | 3 | 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "manual-javascript", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "argparse": { 8 | "version": "1.0.10", 9 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 10 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 11 | "requires": { 12 | "sprintf-js": "~1.0.2" 13 | } 14 | }, 15 | "balanced-match": { 16 | "version": "1.0.0", 17 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", 18 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" 19 | }, 20 | "brace-expansion": { 21 | "version": "1.1.11", 22 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 23 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 24 | "requires": { 25 | "balanced-match": "^1.0.0", 26 | "concat-map": "0.0.1" 27 | } 28 | }, 29 | "commander": { 30 | "version": "2.9.0", 31 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz", 32 | "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=", 33 | "requires": { 34 | "graceful-readlink": ">= 1.0.0" 35 | } 36 | }, 37 | "concat-map": { 38 | "version": "0.0.1", 39 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 40 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" 41 | }, 42 | "deep-extend": { 43 | "version": "0.5.1", 44 | "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz", 45 | "integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==" 46 | }, 47 | "entities": { 48 | "version": "2.0.0", 49 | "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz", 50 | "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==" 51 | }, 52 | "esprima": { 53 | "version": "4.0.1", 54 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", 55 | "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" 56 | }, 57 | "fs.realpath": { 58 | "version": "1.0.0", 59 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 60 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" 61 | }, 62 | "get-stdin": { 63 | "version": "5.0.1", 64 | "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz", 65 | "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=" 66 | }, 67 | "glob": { 68 | "version": "7.1.6", 69 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", 70 | "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", 71 | "requires": { 72 | "fs.realpath": "^1.0.0", 73 | "inflight": "^1.0.4", 74 | "inherits": "2", 75 | "minimatch": "^3.0.4", 76 | "once": "^1.3.0", 77 | "path-is-absolute": "^1.0.0" 78 | } 79 | }, 80 | "graceful-readlink": { 81 | "version": "1.0.1", 82 | "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", 83 | "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=" 84 | }, 85 | "ignore": { 86 | "version": "5.1.4", 87 | "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz", 88 | "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==" 89 | }, 90 | "inflight": { 91 | "version": "1.0.6", 92 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 93 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", 94 | "requires": { 95 | "once": "^1.3.0", 96 | "wrappy": "1" 97 | } 98 | }, 99 | "inherits": { 100 | "version": "2.0.4", 101 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 102 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" 103 | }, 104 | "ini": { 105 | "version": "1.3.5", 106 | "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", 107 | "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" 108 | }, 109 | "js-yaml": { 110 | "version": "3.13.1", 111 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", 112 | "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", 113 | "requires": { 114 | "argparse": "^1.0.7", 115 | "esprima": "^4.0.0" 116 | } 117 | }, 118 | "jsonc-parser": { 119 | "version": "2.2.1", 120 | "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.2.1.tgz", 121 | "integrity": "sha512-o6/yDBYccGvTz1+QFevz6l6OBZ2+fMVu2JZ9CIhzsYRX4mjaK5IyX9eldUdCmga16zlgQxyrj5pt9kzuj2C02w==" 122 | }, 123 | "linkify-it": { 124 | "version": "2.2.0", 125 | "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz", 126 | "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==", 127 | "requires": { 128 | "uc.micro": "^1.0.1" 129 | } 130 | }, 131 | "lodash.differencewith": { 132 | "version": "4.5.0", 133 | "resolved": "https://registry.npmjs.org/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz", 134 | "integrity": "sha1-uvr7yRi1UVTheRdqALsK76rIVLc=" 135 | }, 136 | "lodash.flatten": { 137 | "version": "4.4.0", 138 | "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz", 139 | "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=" 140 | }, 141 | "markdown-it": { 142 | "version": "10.0.0", 143 | "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz", 144 | "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==", 145 | "requires": { 146 | "argparse": "^1.0.7", 147 | "entities": "~2.0.0", 148 | "linkify-it": "^2.0.0", 149 | "mdurl": "^1.0.1", 150 | "uc.micro": "^1.0.5" 151 | } 152 | }, 153 | "markdownlint": { 154 | "version": "0.19.0", 155 | "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.19.0.tgz", 156 | "integrity": "sha512-+MsWOnYVUH4klcKM7iRx5cno9FQMDAb6FC6mWlZkeXPwIaK6Z5Vd9VkXkykPidRqmLHU2wI+MNyfUMnUCBw3pQ==", 157 | "requires": { 158 | "markdown-it": "10.0.0" 159 | } 160 | }, 161 | "markdownlint-cli": { 162 | "version": "0.22.0", 163 | "resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.22.0.tgz", 164 | "integrity": "sha512-qRg6tK5dXWqkaFvEstz9YSQal1ECMgofrSZgdBOaPWG8cD50pk8Hs0ZpBCJ6SCHPKF71pCdtuSL2u82sIx2XWA==", 165 | "requires": { 166 | "commander": "~2.9.0", 167 | "deep-extend": "~0.5.1", 168 | "get-stdin": "~5.0.1", 169 | "glob": "~7.1.2", 170 | "ignore": "~5.1.4", 171 | "js-yaml": "~3.13.1", 172 | "jsonc-parser": "~2.2.0", 173 | "lodash.differencewith": "~4.5.0", 174 | "lodash.flatten": "~4.4.0", 175 | "markdownlint": "~0.19.0", 176 | "markdownlint-rule-helpers": "~0.7.0", 177 | "minimatch": "~3.0.4", 178 | "rc": "~1.2.7" 179 | } 180 | }, 181 | "markdownlint-rule-helpers": { 182 | "version": "0.7.0", 183 | "resolved": "https://registry.npmjs.org/markdownlint-rule-helpers/-/markdownlint-rule-helpers-0.7.0.tgz", 184 | "integrity": "sha512-xZByWJNBaCMHo7nYPv/5aO8Jt68YcMvyouFXhuXmJzbqCsQy8rfCj0kYcv22kdK5PwAgMdbHg0hyTdURbUZtJw==" 185 | }, 186 | "mdurl": { 187 | "version": "1.0.1", 188 | "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz", 189 | "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=" 190 | }, 191 | "minimatch": { 192 | "version": "3.0.4", 193 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 194 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", 195 | "requires": { 196 | "brace-expansion": "^1.1.7" 197 | } 198 | }, 199 | "minimist": { 200 | "version": "1.2.5", 201 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", 202 | "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" 203 | }, 204 | "once": { 205 | "version": "1.4.0", 206 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 207 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 208 | "requires": { 209 | "wrappy": "1" 210 | } 211 | }, 212 | "path-is-absolute": { 213 | "version": "1.0.1", 214 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 215 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" 216 | }, 217 | "rc": { 218 | "version": "1.2.8", 219 | "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", 220 | "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", 221 | "requires": { 222 | "deep-extend": "^0.6.0", 223 | "ini": "~1.3.0", 224 | "minimist": "^1.2.0", 225 | "strip-json-comments": "~2.0.1" 226 | }, 227 | "dependencies": { 228 | "deep-extend": { 229 | "version": "0.6.0", 230 | "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", 231 | "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" 232 | } 233 | } 234 | }, 235 | "sprintf-js": { 236 | "version": "1.0.3", 237 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 238 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" 239 | }, 240 | "strip-json-comments": { 241 | "version": "2.0.1", 242 | "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", 243 | "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" 244 | }, 245 | "uc.micro": { 246 | "version": "1.0.6", 247 | "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", 248 | "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==" 249 | }, 250 | "wrappy": { 251 | "version": "1.0.2", 252 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 253 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" 254 | } 255 | } 256 | } 257 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * docsify sw.js 3 | * =========================================================== 4 | * Copyright 2016 @huxpro 5 | * Licensed under Apache 2.0 6 | * Register service worker. 7 | * ========================================================== */ 8 | 9 | const RUNTIME = 'docsify' 10 | const HOSTNAME_WHITELIST = [ 11 | self.location.hostname, 12 | 'fonts.gstatic.com', 13 | 'fonts.googleapis.com', 14 | 'unpkg.com' 15 | ] 16 | 17 | // The Util Function to hack URLs of intercepted requests 18 | const getFixedUrl = (req) => { 19 | var now = Date.now() 20 | var url = new URL(req.url) 21 | 22 | // 1. fixed http URL 23 | // Just keep syncing with location.protocol 24 | // fetch(httpURL) belongs to active mixed content. 25 | // And fetch(httpRequest) is not supported yet. 26 | url.protocol = self.location.protocol 27 | 28 | // 2. add query for caching-busting. 29 | // Github Pages served with Cache-Control: max-age=600 30 | // max-age on mutable content is error-prone, with SW life of bugs can even extend. 31 | // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string. 32 | // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190 33 | if (url.hostname === self.location.hostname) { 34 | url.search += (url.search ? '&' : '?') + 'cache-bust=' + now 35 | } 36 | return url.href 37 | } 38 | 39 | /** 40 | * @Lifecycle Activate 41 | * New one activated when old isnt being used. 42 | * 43 | * waitUntil(): activating ====> activated 44 | */ 45 | self.addEventListener('activate', event => { 46 | event.waitUntil(self.clients.claim()) 47 | }) 48 | 49 | /** 50 | * @Functional Fetch 51 | * All network requests are being intercepted here. 52 | * 53 | * void respondWith(Promise r) 54 | */ 55 | self.addEventListener('fetch', event => { 56 | // Skip some of cross-origin requests, like those for Google Analytics. 57 | if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) { 58 | // Stale-while-revalidate 59 | // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale 60 | // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1 61 | const cached = caches.match(event.request) 62 | const fixedUrl = getFixedUrl(event.request) 63 | const fetched = fetch(fixedUrl, { cache: 'no-store' }) 64 | const fetchedCopy = fetched.then(resp => resp.clone()) 65 | 66 | // Call respondWith() with whatever we get first. 67 | // If the fetch fails (e.g disconnected), wait for the cache. 68 | // If there’s nothing in cache, wait for the fetch. 69 | // If neither yields a response, return offline pages. 70 | event.respondWith( 71 | Promise.race([fetched.catch(_ => cached), cached]) 72 | .then(resp => resp || fetched) 73 | .catch(_ => { /* eat any errors */ }) 74 | ) 75 | 76 | // Update the cache with the version we fetched (only for ok status) 77 | event.waitUntil( 78 | Promise.all([fetchedCopy, caches.open(RUNTIME)]) 79 | .then(([response, cache]) => response.ok && cache.put(event.request, response)) 80 | .catch(_ => { /* eat any errors */ }) 81 | ) 82 | } 83 | }) -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /working-with-DOM/DOM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/working-with-DOM/DOM.png -------------------------------------------------------------------------------- /working-with-DOM/DOM_table_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/working-with-DOM/DOM_table_example.png -------------------------------------------------------------------------------- /working-with-DOM/chessboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/working-with-DOM/chessboard.png -------------------------------------------------------------------------------- /working-with-DOM/counter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lukaszbasaj/manual-javascript/04da919df3d82950a6f476f547db00edffb5cc3e/working-with-DOM/counter.png -------------------------------------------------------------------------------- /working-with-DOM/creating-elements.md: -------------------------------------------------------------------------------- 1 | # Tworzenie nowych elementów 2 | 3 | W statycznej witrynie elementy są dodawane do strony przez bezpośrednie pisanie 4 | HTML w pliku `.html`. W dynamicznej aplikacji internetowej elementy i tekst są 5 | często dodawane za pomocą JavaScript. 6 | Metody `createElement()` i `createTextNode()` 7 | służą do tworzenia nowych węzłów w DOM. 8 | 9 | 10 | | Metoda/Właściwość | Opis | 11 | |------------------|------------------------------------------------| 12 | | createElement() | Utwórz nowy węzeł elementu| 13 | | createTextNode() | Utwórz nowy węzeł tekstowy| 14 | | node.textContent | Uzyskaj lub ustaw zawartość tekstową węzła elementu | 15 | | node.innerHTML | Pobierz lub ustaw zawartość HTML elementu | 16 | | node.innerText | Pobierz lub ustaw zawartość HTML elementu | 17 | | node.tagName | Zwróć nazwę tagu| 18 | | node.setAttribute | ustaw atrybut elementu| 19 | | node.getAttribute | Pobierz atrybut elementu| 20 | | node.hasAttribute | Sprawdź czy element ma dany atrybut| 21 | | removeAttribute | Usuń atrybut elementu| 22 | | node.dataset | Zwróć (obiekt) dataset, który przetrzymuje customowe atrybuty (data-...).| 23 | 24 | ## Wstawianie węzłów do DOM 25 | 26 | Aby zobaczyć nowe węzły tekstowe i elementy, które tworzymy w interfejsie, 27 | będziemy musieli wstawić je do dokumentu. Metody `appendChild()` i `insertBefore()` 28 | są używane do dodawania elementów na początek, środek lub koniec 29 | elementu nadrzędnego, a `replaceChild()` służy do zastąpienia 30 | starego węzła nowym węzłem. 31 | 32 | | Property/Method | Description| 33 | |---------------------|-----------------------------------------------------------------------| 34 | | node.appendChild() | Dodaj węzeł jako ostatnie dziecko elementu nadrzędnego| 35 | | node.insertBefore() | Wstaw węzeł do elementu nadrzędnego przed określonym węzłem rodzeństwa| 36 | | node.replaceChild() | Zastąp istniejący węzeł nowym węzłem| 37 | 38 | ## Usuwanie węzłów z DOM 39 | 40 | Teraz wiemy, jak tworzyć elementy, dodawać je do DOM i modyfikować istniejące elementy. 41 | Ostatnim krokiem jest nauczenie się usuwania istniejących węzłów z DOM. Węzły 42 | potomne można usunąć z elementu nadrzędnego za pomocą `removeChild()`, a sam 43 | węzeł można usunąć za pomocą `remove()`. 44 | 45 | | Metoda | Opis | 46 | |--------------------|-------------------| 47 | | node.removeChild() | Usuń węzeł potomny | 48 | | node.remove() | Usuń węzeł | 49 | 50 | Korzystając `removeChild()` i `remove()` możesz usunąć dowolny węzeł z DOM. 51 | Inną metodą usuwania elementów potomnych z DOM jest ustawienie właściwości 52 | `innerHTML` elementu nadrzędnego na pusty ciąg znaków („”). 53 | To nie jest preferowana metoda, ponieważ jest mniej wyraźna, 54 | ale możesz ją zobaczyć w istniejącym kodzie. 55 | 56 | ## Modyfikowanie atrybutów 57 | 58 | Atrybuty to wartości zawierające dodatkowe informacje o elementach HTML. 59 | Zazwyczaj występują w parach nazwa / wartość i mogą być niezbędne w zależności 60 | od elementu. Niektóre z najczęstszych atrybutów HTML to m.in. atrybut `src` 61 | znacznika `img`, `href` znacznika `a`, `class`, `id` i `style`. Elementy 62 | niestandardowe, które nie są częścią standardu HTML, zostaną poprzedzone 63 | atrybutem `data-`. 64 | 65 | W JavaScript mamy cztery metody modyfikowania atrybutów elementu: 66 | 67 | |Metoda|Opis|Przykład użycia| 68 | |-------------------|----------------------------------------------------|---------------------------------------------| 69 | |hasAttribute()|Zwraca wartość logiczną `true` lub `false`|element.hasAttribute('href');| 70 | |getAttribute()|Zwraca wartość określonego atrybutu lub `null` |element.getAttribute('href');| 71 | |setAttribute()|Dodaje lub aktualizuje wartość określonego atrybutu|element.setAttribute('href', 'index.html');| 72 | |removeAttribute()|Usuwa atrybut z elementu|element.removeAttribute('href');| 73 | 74 | Metody `hasAttribute()` i `getAttribute()` są zwykle używane z instrukcjami 75 | warunkowymi, a metody `setAttribute()` i `removeAttribute()` służą do 76 | bezpośredniej modyfikacji DOM. 77 | 78 | ## Modyfikowanie klas 79 | 80 | Atrybut klasy odpowiada selektorom klas CSS. Nie należy tego mylić z klasami ES6, 81 | specjalnym rodzajem funkcji JavaScript. Klasy CSS służą do stosowania stylów do 82 | wielu elementów, w przeciwieństwie do identyfikatorów, które mogą istnieć tylko 83 | raz na stronie. W JavaScript mamy właściwości `className` i `classList` do 84 | pracy z atrybutem `class`. 85 | 86 | |Metoda/Właściwość|Opis| Przykład użycia| 87 | |----------------------|--------------------------------------------------------|------------------------------------------| 88 | |className|Pobiera lub ustawia wartość klasy|element.className;| 89 | |classList.add()|Dodaje jedną lub więcej wartości klas|element.classList.add('active');| 90 | |classList.toggle()|Włącza lub wyłącza klasę| element.classList.toggle('active');| 91 | |classList.contains()|Sprawdza, czy istnieje wartość klasy|element.classList.contains('active');| 92 | |classList.replace()|Zastąp istniejącą wartość klasy nową wartością klasy|element.classList.replace('old', 'new');| 93 | |classList.remove()|Usuń wartość klasy|element.classList.remove('active');| 94 | 95 | ## Modyfikowanie stylów 96 | 97 | Właściwość `style` reprezentuje style wbudowane w elemencie HTML. Często style 98 | będą stosowane do elementów za pomocą arkusza stylów, ale czasami musimy 99 | bezpośrednio dodać lub edytować styl wbudowany. 100 | 101 | Właściwości CSS są zapisywane w kebab-case, czyli małych literach oddzielonych 102 | myślnikami. Należy zauważyć, że właściwości CSS kebab-case nie mogą być używane 103 | we właściwości stylu JavaScript. Zamiast tego zostaną zastąpione odpowiednikiem 104 | camelCase, czyli wtedy, gdy pierwsze słowo jest pisane małymi literami, 105 | a wszystkie kolejne słowa są pisane wielkimi literami. Innymi słowy, zamiast 106 | `text-align` użyjemy `textAlign` dla właściwości stylu JavaScript. 107 | 108 | ```js 109 | div.style.borderRadius = '50%'; 110 | div.style.display = 'flex'; 111 | div.style.justifyContent = 'center'; 112 | div.style.alignItems = 'center'; 113 | ``` 114 | 115 | --- 116 | -------------------------------------------------------------------------------- /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 | ![dom](DOM.png) 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 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
CarScooter
MotorBikeBus
60 | ``` 61 | 62 | ![dom-table-example](DOM_table_example.png) 63 | 64 | Przykładowe elementy DOM: 65 | 66 | ```js 67 | let val; 68 | 69 | val = document; 70 | val = document.all; 71 | val = document.all[2]; 72 | val = document.all.length; 73 | val = document.head; 74 | val = document.body; 75 | val = document.doctype; 76 | val = document.domain; 77 | val = document.URL; 78 | val = document.characterSet; 79 | val = document.contentType; 80 | ``` 81 | -------------------------------------------------------------------------------- /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 | ![chessboard](chessboard.png) 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 | ![counter](counter.png) 36 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------