forked from lucjan/javascriptpl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
292 lines (285 loc) · 21.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="/css/main.css" rel="stylesheet" />
<link href="http://f.fontdeck.com/s/css/jmBwByoYbwcbdS6OIMDcZ0MWIss/javascript.pl/23891.css" rel="stylesheet" />
<link href="/favicon.png" rel="icon" type="image/png" />
<title>JavaScript.pl - naucz się JavaScriptu!</title>
</head>
<body class="language-javascript">
<div class="wrap">
<div class="content columns">
<header class="page-header">
<h2><a href="http://javascript.pl">JavaScript.pl</a></h2>
<p class="about">Strona zawiera porady i ciekawostki dotyczące programowania w JavaScript, jak i linki do ważnych stron, konferencji, i profili opiniotwórczych osób z polskiego community. Projekt jest hostowany na <a href="https://github.com/ferrante/javascriptpl">GitHubie</a> - każdy może pomóc w jego tworzeniu. Jego inicjatorem jest <a href="http://ferrante.pl">Damian Wielgosik</a> (<a href="http://twitter.com/varjs">@varjs</a>).</p>
</header>
<div class="column first">
<section class="article-list">
<article id="tip-11">
<header>
<h1>Losowa liczba z podanego zakresu</h1>
<span class="author"><a href="http://twitter.com/vokiel">@vokiel</a></span>
<a class="tip-counter" href="/articles/losowa-liczba-z-podanego-zakresu.html">#11</a>
</header>
<p>Czasami musimy wygenerować losową liczbę całkowitą z podanego zakresu. Niestety dostępna funkcja <code>Math.random();</code> generuje liczby z przedziału 0-1. Własna implementacja funkcji <em>rand</em> może wyglądać tak:</p><pre><code>
function rand( min, max ){
min = parseInt( min, 10 );
max = parseInt( max, 10 );
if ( min > max ){
var tmp = min;
min = max;
max = tmp;
}
return Math.floor( Math.random() * ( max - min + 1 ) + min );
}</code></pre>
<p>Kolejność parametrów w zasadzie nie ma znaczenia.</p>
</article><article id="tip-10">
<header>
<h1>Zaprzyjaźnij się z operatorem porównania '==='</h1>
<span class="author"><a href="http://twitter.com/lydiwil">lydiawil</a></span>
<a class="tip-counter" href="/articles/zaprzyjaznij-sie-z-operatorem-porownania-.html">#10</a>
</header>
<p>W innych językach programowania przeważnie porównujemy ze sobą elementy za pomocą podwójnego znaku równości '=='. Jednak ten operator nie uwzględnia typu porównywanych obiektów (JS próbuje przekształcić obiekty na wspólny typ), z czego może wyniknąć wiele nieoczekiwanych błedów w kodzie.</p>
<pre><code>0 == "0" // => true
![] == [] // => true
undefined == null // => true</code></pre>
<p>Dobrą praktyką jest używanie potrójnego znaku równości, który uwzględnia także typ porównywanych elementów. Pozwala to na wyeliminowanie z kodu wielu niejasności. </p>
<pre><code>0 === "0" // => false
![] === [] // => false
undefined === null // => false</code></pre>
</article><article id="tip-9">
<header>
<h1>Jak uzyskać pustą tablicę bez tworzenia nowej?</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/jak-uzyskac-pusta-tablice-bez-tworzenia-nowej.html">#9</a>
</header>
<p>Załóżmy, że dysponujesz gotową tablicą i chcesz usunąć jej wszystkie elementy. Z reguły robi się to tak:</p>
<pre><code>var arr = [1, 2, 3];
// ...
arr = [];</code></pre>
<p>Jest to dobry pomysł, ale jeśli zależy nam na optymalizacji nawet tak trywialnego przypadku (sprawdza się to w kontekście developmentu gier, gdzie najlepiej zużywać jak najmniej pamięci) możemy skorzystać z właściwości <em>length</em>:</p>
<pre><code>var arr = [1, 2, 3];
arr.length = 0;
console.log(arr); // []</code></pre>
<p>W ten sposób korzystamy zawsze z tej samej struktury danych i przy okazji unikamy tworzenia nowej tablicy.</p>
</article><article id="tip-8">
<header>
<h1>Tworzenie wewnętrznego scope</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/tworzenie-wewnetrznego-scope.html">#8</a>
</header>
<p>Dzięki automatycznemu wywoływaniu anonimowych funkcji możesz łatwo wprowadzić wewnętrzny scope zmiennych, dzięki czemu będą one dostępne tylko w tej funkcji.</p>
<pre><code>(function() {
var privateVar = 1;
})();
console.log(privateVar); // undefined</code></pre>
</article><article id="tip-7">
<header>
<h1>Jak sprawdzić, czy zmienna jest tablicą?</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/jak-sprawdzic-czy-zmienna-jest-tablica.html">#7</a>
</header>
<p>Sprawdzenie, czy zmienna jest tablicą było w JavaScript nie do końca prostym zadaniem. Niestety, <em>typeof</em> nie daje nam jednoznacznej odpowiedzi, ponieważ zwraca to samo dla tablic i obiektów:</p>
<pre><code>var arr = [1, 2, 3];
var obj = {};
typeof arr; // "object"
typeof obj; // "object"</code></pre>
<p>W ECMAScript 3 sprawdzaliśmy, czy zmienna jest tablicą następująco:</p>
<pre><code>var arr = [1, 2, 3];
if (Object.prototype.toString.call(arr) === "[object Array]") {}</code></pre>
<p>Na szczęście najnowsza wersja ECMAScript 5 wprowadza funkcję <em>Array.isArray</em>:</p>
<pre><code>var arr = [1, 2, 3];
if (Array.isArray(arr)) {}</code></pre>
</article><article id="tip-6">
<header>
<h1>Zapomnij o jQuery, jest querySelector</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/zapomnij-o-jquery-jest-queryselector.html">#6</a>
</header>
<p>Największą zaletą frameworka jQuery był łatwy sposób pobierania elementów drzewa DOM według selektorów CSS. Na przykład:</p>
<pre><code>var news = $("div.news");</code></pre>
<p>Ładowanie całego jQuery tylko dla takiej funkcjonalności jest często przerostem formy nad treścią. Z łatwością możesz skorzystać z <em>document.querySelectorAll</em>:</p>
<pre><code>var news = document.querySelectorAll("div.news"); // wszystkie elementy div.news
var news = document.querySelector("div.news"); // tylko pierwszy element</code></pre>
<p>Sprawdź wsparcie dla querySelector wśród współczesnych przeglądarek na <a href="http://caniuse.com/#feat=queryselector">canIUse.com</a>.</p>
</article><article id="tip-5">
<header>
<h1>Największy i najmniejszy element w tablicy</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/najwiekszy-i-najmniejszy-element-w-tablicy.html">#5</a>
</header>
<p>Przyjmijmy, że mamy do czynienia z następującą tablicą:</p>
<pre><code>var arr = [1, 2, 3];</code></pre>
<p>Jak znaleźć jej największą wartość? Zapewne do głowy przychodzi Ci pętla i dodatkowa zmienna przechowująca aktualnie największy element. W JavaScript można to zrobić kompleksowo, przy pomocy <em>Math.max</em>:</p>
<pre><code>var arr = [1, 2, 3];
Math.max.apply(null, arr); // 3</code></pre>
<p>Podobnie da się zrobić z najmniejszą wartością, wykorzystując <em>Math.min</em>:</p>
<pre><code>var arr = [1, 2, 3];
Math.min.apply(null, arr); // 1</code></pre>
</article><article id="tip-4">
<header>
<h1>"for in" nie dla tablic</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/for-in-nie-dla-tablic.html">#4</a>
</header>
<p>Pamiętaj, że pętle for in stworzone są tylko i wyłącznie do iteracji po obiektach:</p>
<pre><code>var obj = { key : 1 };
for (var i in obj) {
console.log(i); // "key"
}</code></pre>
<p>For in używany z tablicami będzie iterował również przez własności <em>.prototype</em> tablicy, co jest efektem niepożądanym.</p>
</article><article id="tip-3">
<header>
<h1>Tworzenie tablic i obiektów</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/tworzenie-tablic-i-obiektow.html">#3</a>
</header>
<p>Zapomnij o tworzeniu tablic i obiektów w, wydawałoby się, klasyczny sposób:</p>
<pre><code>var arr = new Array();
var obj = new Object();</code></pre>
<p>W JavaScript robi się to następująco:</p>
<pre><code>var arr = [];
var obj = {};</code></pre>
<p>JavaScript umożliwia tworzenie tych struktur natywnie, nie musimy dodatkowo wołać ich konstruktora. Poza tym można je nadpisać, co może przysporzyć dużo problemów:</p>
<pre><code>var Object = null;</code></pre>
</article><article id="tip-2">
<header>
<h1>parseInt("08")</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/parseint08.html">#2</a>
</header>
<p>Pamiętaj, że <em>parseInt</em> traktuje stringa jako liczbę w systemie ósemkowym, jeśli na jego początku pojawi się "0". Dobrą praktyką jest umieszczanie zawsze "10" jako drugiego argumentu, który mówi, że powinniśmy sparsować liczbę w systemie dziesiętnym.</p>
<pre><code>parseInt("08"); // 0
parseInt("08", 10); // 8</code></pre>
</article><article id="tip-1">
<header>
<h1>JSLint Twoim przyjacielem</h1>
<span class="author"><a href="http://twitter.com/varjs">varjs</a></span>
<a class="tip-counter" href="/articles/jslint-twoim-przyjacielem.html">#1</a>
</header>
<p>Bardzo popularnym rozwiązaniem pozwalającym sprawdzać poprawność kodu pod względem dobrych praktyk jest <a href="http://jslint.com">JSLint</a> autorstwa <a href="http://crockford.com">Douglasa Crockforda</a>.</p><p>Alternatywnym projektem dla JSLint jest... <a href="http://jshint.com/">JSHint</a>.</p>
<p>Oba projekty można użyć w systemach continuous integration, które mogą np. sprawdzać po każdym commicie, czy kod jest poprawny.</p>
</article> </section>
</div>
<aside class="sidebar column last">
<div>
<h3>RSS</h3>
<ul><li><a href="https://github.com/ferrante/javascriptpl/commits/gh-pages.atom">RSS Atom</a></li></ul>
</div
><div>
<h3>Nauka</h3>
<ul>
<li><a href="http://www.html5rocks.com/en/">HTML5 Rocks</a></li>
<li><a href="https://developer.mozilla.org/pl/docs/JavaScript">MDN Mozilla</a></li>
<li><a href="http://ferrante.pl/category/tech/javascript/">Vademecum Ferrante.pl</a></li>
<li><a href="http://www.w3.org/community/webed/wiki/Main_Page">W3 Web Education</a></li>
</ul>
</div
><div>
<h3>Książki</h3>
<ul>
<li><a href="http://shop.oreilly.com/product/9780596517748.do">Douglas Crockford, Javascript: The Good Parts</a></li>
<li><a href="http://shop.oreilly.com/product/9780596806767.do">Stoyan Stefanov, Javascript Patterns</a></li>
<li><a href="http://shop.oreilly.com/product/0636920025245.do">Nicholas C. Zakas, Maintainable JavaScript</a></li>
<li><a href="http://smashingnode.com/">Guillermo Rauch, Smashing Node.js</a></li>
</ul>
</div
><div>
<h3>Blogi</h3>
<ul>
<li><a href="http://blog.end3r.com">Andrzej Mazur</a></li>
<li><a href="http://ferrante.pl">Damian Wielgosik</a></li>
<li><a href="http://chemikpil.pl/">Michał Maćkowiak</a></li>
</ul>
</div
><div>
<h3>Meetupy</h3>
<ul>
<li><a href="http://meetjs.pl">MeetJS.pl</a></li>
</ul>
</div
><div>
<h3>Konferencje</h3>
<ul>
<li><a href="http://falsyvalues.com">Falsy Values</a></li>
<li><a href="http://front-trends.com">Front-Trends</a></li>
<li><a href="http://ongamestart.com">OnGameStart</a></li>
<li><a href="http://www.nodeconf.com/">NodeConf</a></li>
<li><a href="http://2012.jsconf.eu/">JSConf.eu</a></li>
</ul>
</div
><div>
<h3>Śledź ich na Twitterze</h3>
<ul class="twitter-recommendations">
<li><a href="http://twitter.com/varjs"><img src="http://twitter.com/api/users/profile_image?screen_name=varjs" alt="Damian Wielgosik"></a></li>
<li><a href="http://twitter.com/ard"><img src="http://twitter.com/api/users/profile_image?screen_name=ard" alt="Szymon Pilkowski"></a></li>
<li><a href="http://twitter.com/KamilTrebunia"><img src="http://twitter.com/api/users/profile_image?screen_name=KamilTrebunia" alt="Kamil Trebunia"></a></li>
<li><a href="http://twitter.com/szafranek"><img src="http://twitter.com/api/users/profile_image?screen_name=szafranek" alt="Krzysztof Szafranek"></a></li>
<li><a href="http://twitter.com/end33r"><img src="http://twitter.com/api/users/profile_image?screen_name=end33r" alt="Andrzej Mazur"></a></li>
<li><a href="http://twitter.com/bartaz"><img src="http://twitter.com/api/users/profile_image?screen_name=bartaz" alt="Bartek Szopka"></a></li>
<li><a href="http://twitter.com/rafaelk"><img src="http://twitter.com/api/users/profile_image?screen_name=rafaelk" alt="Rafał Kukawski"></a></li>
<li><a href="http://twitter.com/Kosmotaur"><img src="http://twitter.com/api/users/profile_image?screen_name=Kosmotaur" alt="Marek Stasikowski"></a></li>
<li><a href="http://twitter.com/zbraniecki"><img src="http://twitter.com/api/users/profile_image?screen_name=zbraniecki" alt="Zbigniew Braniecki"></a></li>
<li><a href="http://twitter.com/michalbe"><img src="http://twitter.com/api/users/profile_image?screen_name=michalbe" alt="Michal Budzynski"></a></li>
<li><a href="http://twitter.com/dreame4"><img src="http://twitter.com/api/users/profile_image?screen_name=dreame4" alt="Adam Babik"></a></li>
<li><a href="http://twitter.com/pornelski"><img src="http://twitter.com/api/users/profile_image?screen_name=pornelski" alt="Kornel"></a></li>
<li><a href="http://twitter.com/riddle"><img src="http://twitter.com/api/users/profile_image?screen_name=riddle" alt="Peter"></a></li>
<li><a href="http://twitter.com/marcoos"><img src="http://twitter.com/api/users/profile_image?screen_name=marcoos" alt="Marek Stępień"></a></li>
<li><a href="http://twitter.com/ravbaker"><img src="http://twitter.com/api/users/profile_image?screen_name=ravbaker" alt="Rafał Piekarski"></a></li>
<li><a href="http://twitter.com/wbednarski"><img src="http://twitter.com/api/users/profile_image?screen_name=wbednarski" alt="Wojciech Bednarski"></a></li>
<li><a href="http://twitter.com/medikoo"><img src="http://twitter.com/api/users/profile_image?screen_name=medikoo" alt="Mariusz Nowak"></a></li>
<li><a href="http://twitter.com/singlespl"><img src="http://twitter.com/api/users/profile_image?screen_name=singlespl" alt="Radoslaw Benkel"></a></li>
<li><a href="http://twitter.com/daniula"><img src="http://twitter.com/api/users/profile_image?screen_name=daniula" alt="Daniel Mendalka"></a></li>
<li><a href="http://twitter.com/kaaes"><img src="http://twitter.com/api/users/profile_image?screen_name=kaaes" alt="Kasia Drzyzga"></a></li>
<li><a href="http://twitter.com/lydiawil"><img src="http://twitter.com/api/users/profile_image?screen_name=lydiawil" alt="Lidia Wilczynska /Ly"></a></li>
<li><a href="http://twitter.com/zalun"><img src="http://twitter.com/api/users/profile_image?screen_name=zalun" alt="Piotr Zalewa"></a></li>
<li><a href="http://twitter.com/I_am_Tomasz"><img src="http://twitter.com/api/users/profile_image?screen_name=I_am_Tomasz" alt="Tomasz Tunik"></a></li>
<li><a href="http://twitter.com/ludwiczakpawel"><img src="http://twitter.com/api/users/profile_image?screen_name=ludwiczakpawel" alt="Paweł Ludwiczak"></a></li>
<li><a href="http://twitter.com/qvist"><img src="http://twitter.com/api/users/profile_image?screen_name=qvist" alt="Grzegorz Kaliciak"></a></li>
<li><a href="http://twitter.com/chemikpil"><img src="http://twitter.com/api/users/profile_image?screen_name=chemikpil" alt="Michał Maćkowiak"></a></li>
<li><a href="http://twitter.com/powczarek"><img src="http://twitter.com/api/users/profile_image?screen_name=powczarek" alt="Przemek Owczarek"></a></li>
<li><a href="http://twitter.com/reinmarpl"><img src="http://twitter.com/api/users/profile_image?screen_name=reinmarpl" alt="Piotrek Koszuliński"></a></li>
<li><a href="http://twitter.com/gustaff_weldon"><img src="http://twitter.com/api/users/profile_image?screen_name=gustaff_weldon" alt="Gustaff Weldon"></a></li>
<li><a href="http://twitter.com/adamjodlowski"><img src="http://twitter.com/api/users/profile_image?screen_name=adamjodlowski" alt="Adam Jodłowski"></a></li>
<li><a href="http://twitter.com/krzychukula"><img src="http://twitter.com/api/users/profile_image?screen_name=krzychukula" alt="Krzysztof Kula"></a></li>
<li><a href="http://twitter.com/lukas_nowacki"><img src="http://twitter.com/api/users/profile_image?screen_name=lukas_nowacki" alt="lukas nowacki"></a></li>
<li><a href="http://twitter.com/rafalfilipek"><img src="http://twitter.com/api/users/profile_image?screen_name=rafalfilipek" alt="Rafał Filipek"></a></li>
<li><a href="http://twitter.com/Datrio"><img src="http://twitter.com/api/users/profile_image?screen_name=Datrio" alt="Dariusz Siedlecki"></a></li>
<li><a href="http://twitter.com/sasklacz"><img src="http://twitter.com/api/users/profile_image?screen_name=sasklacz" alt="Jakub Siemiatkowski"></a></li>
<li><a href="http://twitter.com/fridek"><img src="http://twitter.com/api/users/profile_image?screen_name=fridek" alt="Sebastian Poręba"></a></li>
<li><a href="http://twitter.com/m4r00p"><img src="http://twitter.com/api/users/profile_image?screen_name=m4r00p" alt="Marek Pawlowski"></a></li>
<li><a href="http://twitter.com/maciejmalecki"><img src="http://twitter.com/api/users/profile_image?screen_name=maciejmalecki" alt="Maciej Małecki"></a></li>
<li><a href="http://twitter.com/LukaszWojcik"><img src="http://twitter.com/api/users/profile_image?screen_name=LukaszWojcik" alt="Łukasz Wójcik"></a></li>
<li><a href="http://twitter.com/DoctorLex"><img src="http://twitter.com/api/users/profile_image?screen_name=DoctorLex" alt="Lech Wilczyński"></a></li>
<li><a href="http://twitter.com/naugtur"><img src="http://twitter.com/api/users/profile_image?screen_name=naugtur" alt="Ζbγѕzеk"></a></li>
<li><a href="http://twitter.com/karolinaszczur"><img src="http://twitter.com/api/users/profile_image?screen_name=karolinaszczur" alt="Karolina Szczur"></a></li>
<li><a href="http://twitter.com/afterdesign"><img src="http://twitter.com/api/users/profile_image?screen_name=afterdesign" alt="Rafał Malinowski"></a></li>
<li><a href="http://twitter.com/theanxy"><img src="http://twitter.com/api/users/profile_image?screen_name=theanxy" alt="Wojtek Zając"></a>
</li>
</ul>
</div
><div>
<h3>Różne</h3>
<ul>
<li><a href="https://www.facebook.com/groups/217169631654737/">Polska grupa JS News na Facebooku</a></li>
<li><a href="http://js.gd/">JS Goodies</a></li>
</ul>
</div>
</aside>
</div>
</div>
<script src="/js/prism.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-600043-18']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>