You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/1-intro/article.md
+45Lines changed: 45 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,18 @@
1
1
# Wprowadzenie do JavaScriptu
2
2
3
+
<<<<<<< HEAD
3
4
Sprawdźmy, czym jest JavaScript, co możemy osiągnąć z jego pomocą i z jakimi innymi technologiami dobrze współpracuje.
5
+
=======
6
+
Let's see what's so special about JavaScript, what we can achieve with it, and what other technologies play well with it.
7
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
4
8
5
9
## Czym jest JavaScript?
6
10
11
+
<<<<<<< HEAD
7
12
*JavaScript* pierwotnie został stworzony z myślą o *"ożywieniu stron internetowych"*.
13
+
=======
14
+
*JavaScript* was initially created to "make web pages alive".
15
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
8
16
9
17
Programy napisane w tym języku nazywamy *skryptami*. Możemy je pisać bezpośrednio w kodzie HTML strony i uruchamiać podczas wczytywania strony.
10
18
@@ -24,11 +32,19 @@ Przeglądarka posiada wbudowany silnik, potocznie nazywany "wirtualną maszyną
24
32
25
33
Poszczególne silniki różnią się "nazwami kodowymi", na przykład:
26
34
35
+
<<<<<<< HEAD
27
36
-[V8](https://pl.wikipedia.org/wiki/V8_(silnik_JavaScript)) -- w Chromie i Operze.
28
37
-[SpiderMonkey](https://pl.wikipedia.org/wiki/SpiderMonkey) -- w Firefoksie.
29
38
- ... istnieją inne nazwy, jak "Trident" lub "Chakra" dla różnych wersji IE, "ChakraCore" dla Microsoft Edge, "Nitro" i "SquirrelFish" dla Safari itd.
30
39
31
40
Warto zapamiętać powyższe nazwy, ponieważ często przewijają się w artykułach programistycznych w Internecie. W tym także będą się pojawiać. Będziemy pisać, na przykład, że "funkcjonalność X jest wspierana przez silnik V8", co oznacza, że najprawdopodobniej zadziała w Chromie i Operze.
41
+
=======
42
+
-[V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome, Opera and Edge.
43
+
-[SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox.
44
+
- ...There are other codenames like "Chakra" for IE, "JavaScriptCore", "Nitro" and "SquirrelFish" for Safari, etc.
45
+
46
+
The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome, Opera and Edge.
47
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
32
48
33
49
```smart header="Jak działają silniki?"
34
50
@@ -59,11 +75,19 @@ Przeglądarkowy JavaScript może więc:
59
75
60
76
## Czego NIE potrafi Javascript w przeglądarce?
61
77
78
+
<<<<<<< HEAD
62
79
Możliwości przeglądarkowego JavaScriptu są ograniczone ze względu na bezpieczeństwo użytkownika. Celem jest zapobieganie dostępu do prywatnych danych użytkownika przez złośliwe strony.
80
+
=======
81
+
JavaScript's abilities in the browser are limited for the sake of a user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data.
82
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
63
83
64
84
Przykładami takich restrykcji są:
65
85
86
+
<<<<<<< HEAD
66
87
- JavaScript zawarty na stronie nie może odczytywać/zapisywać plików na dysku twardym, kopiować ich ani uruchamiać programów. Nie ma bezpośredniego dostępu do funkcji systemu operacyjnego.
88
+
=======
89
+
- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions.
90
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
67
91
68
92
Współczesne przeglądarki pozwalają na przetwarzanie plików, jednak dostęp jest ograniczony do sytuacji, w których użytkownik wykona odpowiednie akcje, np. "przeciągnie" plik do okna przeglądarki lub wybierze go poprzez element `<input>`.
69
93
@@ -84,9 +108,15 @@ Powyższe ograniczenia nie istnieją dla kodu JavaScript uruchamianego poza prze
84
108
Istnieją co najmniej *trzy* powody świetności JavaScriptu:
85
109
86
110
```compare
111
+
<<<<<<< HEAD
87
112
+ Pełna integracja z HTML-em i CSS-em.
88
113
+ Proste rzeczy można zrobić w prosty sposób.
89
114
+ Jest wspierany przez większość przeglądarek oraz domyślnie w nich włączony.
115
+
=======
116
+
+ Full integration with HTML/CSS.
117
+
+ Simple things are done simply.
118
+
+ Supported by all major browsers and enabled by default.
119
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
90
120
```
91
121
JavaScript jest jedyną technologią przeglądarkową, która posiada te trzy cechy.
92
122
@@ -106,15 +136,30 @@ Współczesne narzędzia pozwalają na szybką i przejrzystą transpilację, umo
106
136
107
137
Przykłady takich języków:
108
138
139
+
<<<<<<< HEAD
109
140
-[CoffeeScript](http://coffeescript.org/) jest "lukrem składniowym" (ang. *syntactic sugar*) dla JavaScriptu. Wprowadza krótszą składnie, pozwalając na pisanie precyzyjnego i bardziej przejrzystego kodu. Ma zwolenników wśród programistów języka Ruby.
110
141
-[TypeScript](http://www.typescriptlang.org/) skupia się na dodaniu "rygorystycznego typowania danych" w celu ułatwienia dewelopmentu i lepszego wsparcia dla skomplikowanych systemów. Jest rozwijany przez Microsoft.
111
142
-[Flow](http://flow.org/) również dodaje typy, ale w nieco inny sposób. Rozwijany przez Facebooka.
112
143
-[Dart](https://www.dartlang.org/) jest odrębnym językiem, posiadającym własny silnik, który działa poza przeglądarką (np. w aplikacjach mobilnych), ale może być także transpilowany do JavaScriptu. Rozwijany przez Google.
144
+
=======
145
+
-[CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
146
+
-[TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft.
147
+
-[Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
148
+
-[Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google.
149
+
-[Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
150
+
-[Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node.
151
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
113
152
114
153
Jest ich więcej. Rzecz jasna, nawet jeśli używamy któregoś z języków transpilowanych, powinniśmy znać JavaScript, aby lepiej rozumieć, co się dzieje w kodzie.
115
154
116
155
## Podsumowanie
117
156
157
+
<<<<<<< HEAD
118
158
- JavaScript został stworzony jako język tylko dla przeglądarek, jednak obecnie używa się go także w wielu innych środowiskach.
119
159
- Uplasował się na dogodnej pozycji jako najszerzej stosowany język przeglądarkowy o pełnej integrowalności z HTML-em i CSS-em.
120
160
- Istnieje wiele języków "transpilowanych" do JavaScriptu, które dodają konkretne funkcjonalności. Dobrze jest się z nimi zapoznać po nauce JavaScriptu, choćby pobieżnie.
161
+
=======
162
+
- JavaScript was initially created as a browser-only language, but it is now used in many other environments as well.
163
+
- Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated with HTML/CSS.
164
+
- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
Copy file name to clipboardExpand all lines: 1-js/01-getting-started/2-manuals-specifications/article.md
+12Lines changed: 12 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,20 +13,32 @@ Co roku wypuszczana jest nowa wersja specyfikacji. W międzyczasie wszelkie aktu
13
13
14
14
Aby dowiedzieć się czegoś o najświeższych funkcjonalnościach, wliczając w to te, które "są już prawie częścią standardu" (są na tzw. "etapie 3"), przejrzyj listę wniosków na <https://github.com/tc39/proposals>.
15
15
16
+
<<<<<<< HEAD
16
17
Jeśli piszesz kod dla przeglądarek, w [drugiej części](info:browser-environment) samouczka znajdziesz więcej materiałów.
18
+
=======
19
+
Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
20
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
17
21
18
22
## Podręczniki
19
23
24
+
<<<<<<< HEAD
20
25
-**Dokumentacja referencyjna JavaScript na MDN (Mozilla)** służy za poradnik z przykładami i innymi informacjami. Świetnie nadaje się do zgłębiania wiedzy na temat poszczególnych funkcjonalności języka, interfejsów itd.
26
+
=======
27
+
-**MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc.
28
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
21
29
22
30
Dostępna jest pod adresem <https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje>.
23
31
32
+
<<<<<<< HEAD
24
33
Mimo wszystko łatwiej jest wyszukiwać konkretne pojęcia w internecie. Wystarczy wpisać "MDN [pojęcie]", np. <https://google.com/search?q=MDN+parseInt>, aby znaleźć informacje o funkcji `parseInt`.
25
34
26
35
27
36
-**MSDN** – podręcznik od Microsoftu zawierający sporo informacji, m.in. o JavaScripcie (często nazywany JScriptem). Jeśli szukasz czegoś konkretnego z tematyki Internet Explorera, lepiej zajrzyj na <http://msdn.microsoft.com/>.
28
37
29
38
Można też przeszukać internet przy użyciu fraz "[pojęcie] MSDN" lub "[pojęcie] MSDN jscript", np. "RegExp MSDN".
39
+
=======
40
+
Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. <https://google.com/search?q=MDN+parseInt> to search for `parseInt` function.
: Stary standard HTML, czyli HTML4, wymagał, aby skrypty miały określony typ (`type`). Zwykle było to `type="text/javascript"`. Obecnie nie jest on już wymagany. Ponadto, w aktualnym standardzie HTML całkowicie zmieniło się jego znaczenie - teraz stosuje się go przy modułach javascriptowych. Ale to zaawansowany temat. O modułach będziemy mówić w innej części samouczka.
55
+
=======
56
+
The `type` attribute: <code><script <u>type</u>=...></code>
57
+
: The old HTML standard, HTML4, required a script to have a `type`. Usually it was `type="text/javascript"`. It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic, we'll talk about modules in another part of the tutorial.
: Ten atrybut służył do określenia języka skryptu. Obecnie nie ma on większego sensu, ponieważ JavaScript jest domyślnym językiem. Nie trzeba go używać.
@@ -73,12 +82,16 @@ Pliki skryptowe dołącza się do HTML-a za pomocą atrybutu `src`:
73
82
<scriptsrc="/ścieżka/do/skryptu.js"></script>
74
83
```
75
84
85
+
<<<<<<< HEAD
76
86
W tym przykładzie `/ścieżka/do/skryptu.js` to ścieżka bezwzględna do pliku, licząc od katalogu głównego strony. Można jednak podać ścieżkę względną, liczoną od położenia aktualnej strony. Na przykład, `src="skrypt.js"` odnosi się do pliku `"skrypt.js"` w tym samym folderze.
87
+
=======
88
+
Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder.
89
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
77
90
78
91
Oprócz tego mamy możliwość podania pełnego adresu URL, na przykład:
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/02-structure/article.md
+44-2Lines changed: 44 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,7 +45,11 @@ Istnieje kilka sytuacji, w których nowa linia nie oznacza, że powinien tam zna
45
45
alert(3+1+2);
46
46
```
47
47
48
+
<<<<<<< HEAD
48
49
Kod zwróci `6`, ponieważ JavaScript nie wstawi średnika na końcu linii. Wydaje się oczywistym, że jeśli linia kończy się wyrażeniem, na przykład plusem `"+"`, to mamy do czynienia z "niepełnym wyrażeniem" i średnik nie jest wymagany. I w tym przypadku działa to zgodnie z oczekiwaniami.
50
+
=======
51
+
The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended.
52
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
49
53
50
54
**Są jednak sytuacje, w których JavaScript błędnie zakłada, gdzie średnik jest rzeczywiście potrzebny.**
51
55
@@ -55,19 +59,31 @@ Błąd, który się pojawi w takim przypadku, jest trudny do wykrycia i naprawie
55
59
Jeśli ciekawi cię konkretny przykład takiego błędu, uruchom poniższy kod:
56
60
57
61
```js run
58
-
[1, 2].forEach(alert)
62
+
alert("Hello");
63
+
64
+
[1, 2].forEach(alert);
59
65
```
60
66
67
+
<<<<<<< HEAD
61
68
Nie musisz się zastanawiać, co oznaczają te nawiasy kwadratowe `[]` ani czym jest `forEach`. Będzie o tym później. Na tę chwilę musisz wiedzieć, że rezultatem będzie wyświetlenie najpierw `1`, a później `2`.
62
69
63
70
Teraz dodaj `alert` przed kodem i *nie* dodawaj średnika na końcu linii:
64
71
65
72
```js run no-beautify
66
73
alert("Tutaj będzie błąd")
74
+
=======
75
+
No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`.
67
76
68
-
[1, 2].forEach(alert)
77
+
Now let's remove the semicolon after the `alert`:
78
+
79
+
```js run no-beautify
80
+
alert("Hello")
81
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
82
+
83
+
[1, 2].forEach(alert);
69
84
```
70
85
86
+
<<<<<<< HEAD
71
87
Jeśli uruchomimy powyższy kod, zobaczymy tylko pierwszy `alert`, a następnie otrzymamy komunikat błędu w konsoli!
72
88
73
89
Wszystko jednak zacznie działać, gdy tylko umieścimy średnik po pierwszej instrukcji:
@@ -89,13 +105,34 @@ alert("Tutaj będzie błąd")[1, 2].forEach(alert)
89
105
```
90
106
91
107
To powinny być dwie oddzielne instrukcje, ale nie są. Takie łączenie jest po prostu błędne i może pojawić się również w wielu innych sytuacjach.
108
+
=======
109
+
The difference compared to the code above is only one character: the semicolon at the end of the first line is gone.
110
+
111
+
If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more.
112
+
113
+
That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement.
114
+
115
+
Here's how the engine sees it:
116
+
117
+
```js run no-beautify
118
+
alert("Hello")[1, 2].forEach(alert);
119
+
```
120
+
121
+
Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly.
122
+
123
+
This can happen in other situations also.
124
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
92
125
````
93
126
94
127
Zalecamy używanie średników nawet wtedy, gdy instrukcje są oddzielone nową linią. Społeczność programistów przyjęła taką właśnie zasadę. Zanotujmy to jeszcze raz -- _istnieje możliwość_ nie wpisywania średników w większości przypadków. Ale bezpieczniej jest -- szczególnie dla początkujących -- używać ich zawsze.
95
128
96
129
## Komentarze
97
130
131
+
<<<<<<< HEAD
98
132
Z czasem programy stają się coraz bardziej złożone. Przychodzi wtedy konieczność dodania _komentarzy_, które opisują, co robi kod i dlaczego.
133
+
=======
134
+
## Comments [#code-comments]
135
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
99
136
100
137
Komentarze mogą być umieszczane w dowolnym miejscu skryptu. Nie wpływają na wykonanie kodu, ponieważ silnik JavaScript je ignoruje.
101
138
@@ -135,8 +172,13 @@ alert('Witaj');
135
172
alert("świecie");
136
173
```
137
174
175
+
<<<<<<< HEAD
138
176
```smart header="Używaj skrótów klawiaturowych!"
139
177
W większości edytorów można zamienić jedną linię w komentarz za pomocą klawiszy `key:Ctrl+/` lub kilka linii za pomocą `key:Ctrl+Shift+/` (zaznacz fragment kodu i po prostu wciśnij te klawisze). Jeśli korzystasz z Maca, zamiast `key:Ctrl` użyj `key:Cmd`.
178
+
=======
179
+
```smart header="Use hotkeys!"
180
+
In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
181
+
>>>>>>> 3c934b5a46a76861255e3a4f29da6fd54ab05c8c
140
182
```
141
183
142
184
````warn header="Nie można zagnieżdżać komentarzy!"
0 commit comments