Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 270 lines (267 sloc) 24.149 kb
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
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="http://f.fontdeck.com/s/css/jmBwByoYbwcbdS6OIMDcZ0MWIss/javascript.pl/23891.css" type="text/css" />
        <link href="css/main.css" type="text/css" rel="stylesheet">
        <title>JavaScript.pl - naucz się JavaScriptu!</title>
    </head>
    <body>
        <div id="wrapper">
            <div id="container">
                <div id="content">
                    <div class="articles">
                        <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>
                        <aside class="sidebar">
                            <h3>RSS</h3>
                            <ul><li><a href="https://github.com/ferrante/javascriptpl/commits/gh-pages.atom">RSS Atom</a></li></ul>
                            <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>
                            <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>
                            </ul>
                            <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>
                            <h3>Meetupy</h3>
                            <ul>
                                 <li><a href="http://meetjs.pl">MeetJS.pl</a></li>
                            </ul>
                            <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>
                            </ul>
                            <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>
                           <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>
                        </aside>
                        <!-- TIP 10 -->
                        <section class="article-list">
                            <article id="tip-10">
                                <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="#tip-10">#10</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>
                            <!-- TIP 9 -->
                            <article id="tip-9">
                                <header>
                                    <h1>Tworzenie wewnętrznego scope</h1>
                                    <span class="author"><a href="http://twitter.com/varjs">@varjs</a></span>
                                    <a class="tip-counter" href="#tip-9">#9</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>
                            <!-- TIP 8 -->
                            <article id="tip-8">
                                <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="#tip-8">#8</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>
                            <!-- TIP 7 -->
                            <article id="tip-7">
                                <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="#tip-7">#7</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-6">
                                <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="#tip-6">#6</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>
                            <!-- TIP 5 -->
                            <article id="tip-5">
                                <header>
                                    <h1>Zaprzyjaźnij się z operatorem porównania '==='</h1>
                                    <span class="author"><a href="http://twitter.com/lydiawil">@lydiawil</a></span>
                                    <a class="tip-counter" href="#tip-5">#5</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>
                            <!-- TIP 4 -->
                            <article id="tip-4">
                                <header>
                                    <h1>JSLint Twoim przyjacielem</h1>
                                    <span class="author"><a href="http://twitter.com/varjs">@varjs</a></span>
                                    <a class="tip-counter" href="#tip-4">#4</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>
                            <!-- TIP 3 -->
                            <article id="tip-3">
                                <header>
                                    <h1>parseInt("08")</h1>
                                    <span class="author"><a href="http://twitter.com/varjs">@varjs</a></span>
                                    <a class="tip-counter" href="#tip-3">#3</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>
                            <!-- TIP 2 -->
                            <article id="tip-2">
                                <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="#tip-2">#2</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>
                            <!-- TIP 1 -->
                            <article id="tip-1">
                                <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="#tip-1">#1</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>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <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>
Something went wrong with that request. Please try again.