path: root/files/pl/learn/javascript/first_steps/what_is_javascript/index.html

---
title: Co to jest JavaScript?
slug: Learn/JavaScript/First_steps/What_is_JavaScript
translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
original_slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">Witamy w MDN na kursie JavaScript dla początkujących! W tym pierwszym artykule przyjrzymy się JavaScript z pewnej odległości, odpowiadając na pytania w stylu "co to jest?" i "co on robi?" oraz upewnimy się, że rozumiesz cel, któremu służy JavaScript.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Wymagania wstępne:</th>
   <td>Podstawowa znajomość komputera, podstawowa znajomość HTML i CSS.</td>
  </tr>
  <tr>
   <th scope="row">Cel:</th>
   <td>Zapoznanie z istotą JavaScript, co on robi i jak jest dopasowywany do strony internetowej.</td>
  </tr>
 </tbody>
</table>

<h2 id="Definicja_ogólna">Definicja ogólna</h2>

<p>JavaScript to język programowania, który umożliwia wdrożenie na stronie internetowej skomplikowanych elementów, dzięki którym strona ta może nie tylko wyświetlać statyczne informacje, ale również obsługiwać zmianę treść odpowiednio do sytuacji, wyświetlać interaktywne mapy i animacje grafiki 2D/3D , wyświetlać video itd. Jest to trzecia warstwa standardowych technologii internetowych, z których dwie (<a href="/en-US/docs/Learn/HTML">HTML</a> i <a href="/en-US/docs/Learn/CSS">CSS</a>) omówiliśmy w innych częściach "Strefy nauki".</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>

<ul>
 <li>{{glossary("HTML")}} jest to język znaczników, który używa się do sformułowania dokumentu HTML (wyświetlanego jako strona przeglądarki) i strukturyzacji treści zawartej w dokumencie HTML, na przykład zdefiniowania akapitów, nagłówków i tabel danych czy osadzenia obrazów i wideo.</li>
 <li>{{glossary("CSS")}} jest to język reguł stylizacji, który używa się do stylizacji dokumentu HTML, na przykład ustawienia kolorów tła lub czcionki i układania treści w wielu kolumnach.</li>
 <li>{{glossary("JavaScript")}} jest to skryptowy język, który umożliwia  obsługę dynamicznego tworzenia treści na stronie internetowej, kontrolowanie multimediów, animację obrazów i prawie wszystko inne  (no dobrze, nie wszystko, ale to niesamowite, co można osiągnąć kilkoma liniami kodu JavaScript.)</li>
</ul>

<p>Te trzy warstwy układają się jedna na drugiej. Jako przykład weźmy prostą etykietę tekstową. Możemy ją oznaczyć używajac kodu HTML, aby nadać jej strukturę:</p>

<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>

<p>Następnie możemy dodać kod CSS, aby nadać ładny wygląd:</p>

<pre class="brush: css notranslate">p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>

<p>Na końcu możemy dodać kod Javascript, aby zaimplementować dynamiczne zachowanie:</p>

<pre class="brush: js notranslate">var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
</pre>

<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}</p>

<p>Kliknij na przycisk (etykietę tekstową), aby zobaczyć co się dzieje (na GitHub mozesz znależć kod źróðłowy i wersję demo — zobacz <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">kod źródłowy</a> lub <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">przykład na żywo</a>)!</p>

<p>JavaScript pozwala osiągać o wiele bardziej zaawansowane efekty - sprawdź poniżej jego możliwości.</p>

<h2 id="Co_można_zrobić">Co można zrobić?</h2>

<p>Rdzeń języka JavaScript składa się z kilku funkcjonalności, które umożliwiają wykonanie rzeczy, takich jak te: </p>

<ul>
 <li>Przechowywanie wartości w zmiennych. W powyższym przykładzie pytamy użytkownika o imię, które następnie zapisujemy w zmiennej o nazwie <code>name</code>.</li>
 <li>Operowanie na porcjach tekstu (zwanych w programowaniu "łańcuchami"). W powyższym przykładzie używamy łańcucha "Player 1: ", który łączymy ze zmienną <code>name</code>, aby stworzyć etykietę ''Player 1: Chris".</li>
 <li>Uruchamianie kodu w odpowedzi na określone zdarzenia zaistniałe na stronie internetowej. W naszym przykładzie użyliśmy zdarzenie {{Event("click")}} do wykrywania klknięć przycisku (etykiety tekstowej). Po kliknieciu przycisku, uruchamiany jest kod, który zmienia etykiete tekstową.</li>
 <li>I wiele więcej!</li>
</ul>

<p>Jeszcze bardziej ekscytująca jest możliwość stosowania tzw. interfejsów programowania aplikacji (<em>ang. Application Programming Interfaces - API</em>), działających na szczycie rdzenia języka JavaScript.</p>

<p>Interfejsy API są gotowymi zestawami bloków kodu, które umożliwiają programistom implementować programy, które w przeciwnym razie byłyby bardzo trudne do napisania przez programistę a nawet często niemożliwe do napisania przez niego. Spełniają one w programowaniu tą samą rolę, co gotowe segmenty mebli przy umeblowaniu domu — o wiele łatwiej jest wykorzystać gotowe panele i je poskręcać, niż samemu opracować projekt mebli, znaleźć drewno, pociąć go na deski, wysuszyć, przyciąć je na elementy swoich mebli i w końcu je samemu zmontować.</p>

<p>Interfejsy API dzielą się ogólnie na dwie kategorie:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>

<p><strong>Interfesy API przeglądarek internetowych</strong>, które są wbudowane w przeglądarki. Służą do udostępniania danych z komputera, ale też mogą wykonywać bardziej zaawansowane rzeczy. Na przykład:</p>

<ul>
 <li><a href="https://developer.mozilla.org/pl/docs/Web/API/Document_Object_Model">API DOM (Document Object Model) </a>pozwala manipulować kodem HTML i CSS, tworząc, usuwając i zmianiając kod HTML, dynamiczne dodając do strony nowe style. Za każdym razem kiedy widzisz wyskakujące okienko pojawiające się na stronie lub zmianę fragmentu treści strony, to właśnie sprawka API DOM.</li>
 <li><a href="https://developer.mozilla.org/pl/docs/Web/API/Geolocation">API Geolokalizacji</a> pozwala na pobranie informacji lokalizacyjnych i nie tylko. <a href="https://www.google.com/maps">Google Maps</a> używa tego API do znalezienieaTwojej lokalizacji i wyświetlenia jej na mapie.</li>
 <li><a href="https://developer.mozilla.org/pl/docs/Web/API/Canvas_API">API Canvas</a> i <a href="https://developer.mozilla.org/pl/docs/Web/API/WebGL_API">API WebGL</a> umożliwiają tworzenie animacji 2D i 3D. Ludzie tworzą naprawdę szalone rzeczy używając tych technologii - sprawdź sam - <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> i <a href="http://webglsamples.org/">webglsamples</a>.</li>
 <li>Interfejsy <a href="https://developer.mozilla.org/pl/Apps/Fundamentals/Audio_and_video_delivery">Audio i wideo</a>, takie jak {{domxref("HTMLMediaElement")}} czy <a href="/pl/docs/Web/API/WebRTC_API">WebRTC</a> umożliwiają robienie niezwykle interesujących rzeczy z multimediami, jak odtwarzanie wideo czy muzyki bezpośrednio na stronie internetowej, albo pobieranie transmisji wideo z Twojej kamery internetowej i wyświetlanie jej na stronie (sprawdź <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>).</li>
</ul>

<div class="note">
<p><strong>Uwaga: </strong>wiele z powyższych przykładów nie będzie działać w starszych przeglądarkach - podczas eksperymentowania warto używać najnowszych wersji przeglądarek takich jak Firefox, Chrome, Edge czy Opera. Powinieneś także brać pod uwagę konieczność testowania swoich rozwiązań w wielu przegladarkach. Kod, który działa dobrze w Chrome nie zawsze będzie działał w Edge. (sprawdź: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testowanie wieloprzegladarkowe</a>).</p>
</div>

<p><strong>Zewnętrzne interfejsy API</strong> nie są wbudowane w przeglądarki i trzeba samemu pobrać ich kod i informacje o zastosowaniu. Na przykład:</p>

<ul>
 <li><a href="https://dev.twitter.com/overview/documentation">API Twitter</a> umożliwia wyświetlania najnowszych tweetów na stronie internetowej.</li>
 <li><a href="https://developers.google.com/maps/">API Google Maps </a>daje możliwość wyświetlania map na stronie internetowej oraz dostarcza innych związanych funkcji.</li>
</ul>

<div class="note">
<p><strong>Uwaga: </strong> Interfesy API są zaawansowane i nie będziemy ich tu opisywać, możesz znaleźć o nich więcej informacji w module <a href="/pl/docs/Learn/JavaScript/Client-side_web_APIs">Interfejsy API działające po stronie klienta</a>.</p>
</div>

<p>W Internecie dostępnych jest bardzo dużo bibliotek API działających z przegladarkami internetowymi, ale jest to "temat na później". Nie zbudujesz następnego Facebooka czy Google Maps po 24 godzinach nauki JavaScriptu. Jest wiele zagadnień podstawowych, które musisz najpierw opanować. Ale przecież po to tu jesteś!</p>

<h2 id="Co_robi_JavaScript_na_stronie_internetowej">Co robi JavaScript na stronie internetowej?</h2>

<p>Tutaj zaczniemy faktycznie przyglądać się pewnemu kodowi i robiąc to, zbadamy, co takiego dzieje się po uruchomieniu tego kodu na stronie internetowej.</p>

<p>Przypomnijmy sobie, co dzieje się podczas ładowania strony internetowej w przeglądarce (pierwsz raz omówiliśmy to w artykule <a href="/pl/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Jak działa CSS</a>). Po załadowaniu strony internetowej (dokumentu HTML) do przeglądarki, zostaje uruchomioney jej kod (HTML, CSS i JavaScript) w środowisku wykonawczym tworzonym przez przeglądarkę (zakładka przegladarki). Jest to podobne do fabryki, która przyjmuje surowe materiały (kod) a wypuszcza gotowy produkt (stronę internetową).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>

<p>JavaScript jest wykonywany przez silnik JavaScriptu w przeglądarce, po tym jak HTML i CSS zostaną skompletowane w stronę internetową. To zapewnia to, że struktura i style strony są już na miejscu w momencie gdy JavaScript zaczyna pracę.</p>

<p>Jest to przydatne, jako że popularnym zastosowaniem JavaScriptu jest dynamiczne modyfikowanie HTMLa i CSSa aby edytować interfejs poprzez Document Object Model API. Jeżeli JavaScript załadowałby się i próbował wykonywać się przed tym jak HTML i CSS zostały załadowane, wtedy wystąpiłyby błędy.</p>

<h3 id="Bezpieczeństwo_przeglądarki">Bezpieczeństwo przeglądarki</h3>

<p>Każda karta przeglądarki jest swoim własnym kontenerem dla kodu, który w niej się wykonuje (te kontenery są nazywane technicznie "środowiskami wykonywania" (ang. "execution environments") - oznacza to, ze w większości przypadków kod w każdej karcie jest wykonywany oddzielnie i kod z jednej z kart nie jest w stanie bezpośrednio wpłynąć na ten wykonujący się w innej karcie. Jest to przykład dobrego środka bezpieczeństwa - jeżeli by tak nie było, wtedy możliwe stałoby się pisanie kodu, który wykradałby dane z innych witryn oraz  byłby w stanie wykonywać inne, podobnie złe rzeczy.</p>

<div class="note">
<p><strong>Notatka:  </strong>Istnieją sposoby na bezpieczne wysyłanie kodu i danych pomiędzy różnymi stronami/kartami. Wykraczają one jednak poziomem poza ten kurs i nie zostaną one tu omówione.</p>
</div>

<h3 id="Kolejność_wykonywania_kodu_JavaScript">Kolejność wykonywania kodu JavaScript</h3>

<p>Kiedy przeglądarka napotyka blok kodu JS, wykonuje go po kolei, od góry do dołu. Oznacza to, że musisz być ostrożny, w jakiej kolejności umieszczasz instrukcje. Aby ukazać to zjawisko, wróćmy do bloku kodu z pierwszego przykładu:</p>

<pre class="brush: js notranslate">var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}</pre>

<p>Na początku wybieramy pierwszy paragraf (linia 1), dołączamy do niego event listener (linia 3), aby kiedy zostanie on klinięty, blok  <code>updateName()</code> (linie 5- 8) został uruchomiony. Blok  <code>updateName()</code> (ten typ kodu możliwego do użycia ponownie jest nazywany funkcją) pyta użytkownika o nowe imię, po czym wstawia to podane imię do paragrafu, aby uaktualnić widok.</p>

<p>Jeżeli zamieniłbyś kolejność dwóch pierwszych linii kodu, przestałoby to działać - zamiast tego pojawiłby się błąd w konsoli przeglądarki - <code>TypeError: para is undefined</code>. Oznacza on, że ten obiekt jeszcze nie istnieje, a więc nie możemy dodać do niego event listenera.</p>

<div class="note">
<p><strong>Notatka:</strong> Jest to bardzo popularny błąd - musisz uważać na to, że obiekty do których istnieją odwołania istnieją przed tym jak cokolwiek z nimi zrobisz.</p>
</div>

<h3 id="Kod_interpretowany_kontra_kompilowany">Kod interpretowany kontra kompilowany</h3>

<p>Mogłeś usłyszeć pojęcie kodu <strong>interpretowanego</strong> i <strong>kompilowanego<strong>. </strong></strong>JavaScript jest językiem interpretowanym - kod jest wykonywany od góry do dołu i wynik jest zwracany natychmiastowo. Nie musisz transformować kodu w jakąś inną postać przed tym jak przeglądarka go wykona.</p>

<p>Języki kompilowane są natomiast transformowane (kompilowane) do innej formy przed ich wykonaniem. Dla przykładu C/C++ jest kompilowane do kodu assemblera, który jest następnie wykonywany przez komputer.</p>

<p>Oba te podejścia mają swoje wady i zalety, które nie zostaną tutaj omówione.</p>

<h3 id="Kod_server-side_kontra_client-side"><strong><strong>Kod server-side kontra client-side</strong></strong></h3>

<p>Mogłeś także słyszeć pojęcia <strong>server-side</strong> i <strong>client-side</strong>, szczególnie w odniesieniu do tworzenia stron internetowych. Kod client-side jest kodem, który jest wykonywany na komputerze użytkownika - kiedy strona jest wyświetlana, kod client-side jest pobierany, następnie uruchamiany i wyświetlany przez przeglądarkę. W tym module JavaScript mówimy jednoznacznie o <strong>client-side JavaScript</strong>.</p>

<p>Kod server-side jest natomiast wykonywany na serwerze, po czym wynik wykonania jest pobierany i wyświetlany przez przeglądarkę. Popularnymi przykładami języków server-side są PHP, Python, Ruby czy ASP.NET. I JavaScript! JavaScript może być także użyty jako język server-side, na przykład w popularnym środowisku Node.js - możesz więcej dowiedzieć się o tym w naszym poradniku <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a></p>

<p>Słowo<strong> dynamiczny</strong> jest użyte zarówno do opisania zarówno client-side JavaScript i języki server-side — odnosi się ono do możliwości uaktualnienia widoku strony/aplikacji, aby możliwe było pokazanie różnych rzeczy w różnych okolicznościach; generując nową zawartość w zależności od potrzeb. Kod server-side  dynamicznie generuje nową zawartość na serwerze, na przykład stworzenie nowej tabeli HTML, kiedy client-side JavaScript dynamicznie generuje nową zawartość, na przykład tworząc nową tabelę HTML, wstawiając dane pobrane z serwera, następnie pokazując użytkownikowi tabelę na stronie. Znaczenie słowa jest lekko inne, ale podobne,  w dwóch kontekstach użycia i te dwa podejścia (server-side i client-side) zwykle współpracują ramię w ramię.</p>

<p>Strona bez dynamicznie uaktualnianej zawartości nazywa się <strong>statyczną</strong> - zawsze pokazuje to samo.</p>

<h2 id="W_jaki_sposób_dodać_JavaScript_do_twojej_strony"><strong><strong>W jaki sposób dodać JavaScript do twojej strony?</strong></strong></h2>

<p>JavaScript jest dołączany do strony HTML w podobny sposób jak odbywa się to w wypadku CSS. Podczas gdy CSS używa elementów {{htmlelement("link")}} do dołączania zewnętrznych arkuszów i {{htmlelement("style")}} do dołączenia stylów bezpośrednio w dokumencie, JS potrzebuje tylko jednej rzeczy - elementu {{htmlelement("script")}}. Dowiedzmy się, jak to działa.</p>

<h3 id="Osadzony_JavaScript">Osadzony JavaScript</h3>

<ol>
 <li>Po pierwsze stwórz lokalną kopię naszego przykładowego pliku <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html. </a>Zapisz go gdzieś w katalogu.</li>
 <li>Otwórz plik w twojej przeglądarce i edytorze tekstu. Ujrzysz prostą stronę z przyciskiem, który można kliknąć.</li>
 <li>Następnie wejdź do edytora i dodaj następujący kod tuż przed końcem <code>&lt;/body&gt;</code>:
  <pre class="brush: html notranslate">&lt;script&gt;

  // Kod JavaScript będzie tu umieszczony.

&lt;/script&gt;</pre>
 </li>
 <li>Teraz dodamy trochę kodu w naszym elemencie  {{htmlelement("script")}}, aby strona wykonała coś bardziej interesującego  — dodaj poniższy kod bezpośrednio pod linią "// Kod JavaScript będzie tu umieszczony.":
  <pre class="brush: js notranslate">function stworzParagraf() {
  var para = document.createElement('p');
  para.textContent = 'Kliknąłeś przycisk!';
  document.body.appendChild(para);
}

var przyciski = document.querySelectorAll('button');

for (var i = 0; i &lt; przyciski.length ; i++) {
  przyciski[i].addEventListener('click', stworzParagraf);
}</pre>
 </li>
 <li>Zapisz plik i odśwież stronę w przeglądarce - teraz gdy klikniesz przycisk, nowy paragraf jest generowany i umieszczany poniżej.</li>
</ol>

<div class="note">
<p><strong><strong><strong>Notatka</strong>:</strong></strong> Jeżeli przykład nie działa, przejdź go znowu krok po kroku, sprawdzając czy zrobiłeś wszystko poprawnie. Czy zapisałeś swoją lokalną wersję początkowego kodu jako plik <code>.html</code>? Czy dodałeś element  {{htmlelement("script")}} tuż przed zamknięciem  <code>&lt;/body&gt;</code>? Czy wprowadziłeś kod JavaScript dokładnie tak, jak podane w przykłądzie?</p>

<p><strong>JavaScript uwzględnia wielkość liter i jest bardzo drobiazgowy, a więc musisz wprowadzić kod dokładnie tak,  jak zostało to pokazane. W innym wypadku może to nie zadziałać.</strong></p>
</div>

<div class="note">
<p><strong><strong><strong><strong><strong>Notatka</strong>:  </strong></strong></strong></strong>Możesz zobaczyć ten kod także na GitHubie jako <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">zobacz to także na żywo</a>).</p>
</div>

<h3 id="Zewnętrzny_JavaScript"><strong><strong>Zewnętrzny JavaScript</strong></strong></h3>

<p>Działa to świetnie, ale co by było, gdybyśmy chcieli umieścić nasz kod JavaScript w oddzielnym pliku? Zróbmy to teraz.<strong><strong> </strong></strong></p>

<ol>
 <li>Po pierwsze, stwórz nowy plik w tym samym katalogu, w którym umieściłeś twój plik HTML. Nazwij go <strong><code>script.js</code>  </strong>- upewnij się, że ma on rozszerzenie .js, jako że w ten sposób jest rozpoznawany jako JavaScript.</li>
 <li>Następnie przekopiuj wszystkie skrypty z obecnego {{htmlelement("script")}}<strong> </strong>i wklej je do pliku .js. Zapisz ten plik.<strong>  </strong></li>
 <li>Teraz zastąp obecny element {{htmlelement("script")}} poniższym kodem:
  <pre class="brush: html notranslate"><strong><strong>
</strong></strong>&lt;script src="script.js"&gt;&lt;/script&gt;</pre>
  <strong><strong> </strong></strong></li>
 <li>Zapisz i odśwież przeglądarkę - powinieneś zobaczyć to samo! Działa to w ten sam sposób, ale teraz mamy kod JavaScript w oddzielnym pliku. Jest to dobra praktyka organizowania kodu i umożliwiania jego ponownego wykorzystania między wieloma plikami HTML. Do tego HTML jest łatwiejszy do czytania bez bloków kodu pomiędzy.</li>
</ol>

<p><strong>Notatka</strong>: Możesz zobaczyć ten kod na GitHubie - <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html"> apply-javascript-external.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">Możesz zobaczyć to także na żywo tu</a>).</p>

<h3 id="Interpretowanie_kodu_JavaScript_inline"><strong><strong>Interpretowanie kodu JavaScript inline</strong></strong></h3>

<p>Czasami napotkasz kawałki prawdziwego kodu JavaScript pomiędzy kodem HTML. Może to wyglądać następująco:</p>

<pre class="brush: js example-bad notranslate"><strong><strong>
</strong></strong>function stworzParagraf() {
  var para = document.createElement('p');
  para.textContent = 'Kliknąłeś przycisk!';
  document.body.appendChild(para);
}</pre>

<pre class="brush: html example-bad notranslate"><strong><strong>
</strong></strong>&lt;button onclick="createParagraph()"&gt;Kliknij mnie!&lt;/button&gt;</pre>

<p>Możesz przetestować tę wersję poniżej:</p>

<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}</p>

<p>Ten przykład ma dokładnie tę samą funkcjonalność jak dwa poprzednie przykłady, za wyjątkiem tego, że element {{htmlelement("button")}} zawiera w sobie handler <strong><strong><code>onclick</code></strong></strong> . Sprawia to, że funkcja zostanie uruchomiona gdy zostanie wcisnięty przycisk.</p>

<p><strong><strong><strong>Jednakże nie rób tego! Zanieczyszczanie HTMLa poprzez JavaScript jest uważane za złą praktykę. Jest to również nieefektywne - musiałbyś załączać atrybut </strong><code>onclick="stworzParagraf()"</code><strong>  do każdego przycisku, dla którego miałaby zastosowanie funkcja. </strong></strong></strong></p>

<p>Używanie czystych konstrukcji JavaScript pozwala na wybranie wszystkich przycisków za pomocą jednej instrukcji. Kod, którego użyliśmy do wykonania tego wygląda następująco:</p>

<pre class="notranslate">var buttons = document.querySelectorAll('button');

for (var i = 0; i &lt; buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}</pre>

<p>Może to wyglądać na lekko dłuższe niż atrybut  <code>onclick</code>, ale zadziała to dla wszyskich przycisków, bez znaczenia ile ich jest na stronie i ile z nich zostanie dodane bądź usunięte. Kod JS nie musi być zmieniony.</p>

<div class="note">
<p><strong><strong><strong><strong><strong>Notatka:  </strong></strong></strong></strong></strong>Spróbuj edytować twoją wersję <code>apply-javascript.html</code> i dodaj kilka innych przycisków. Kiedy przeładujesz stronę, odkryjesz, że wszystkie przyciski tworzą paragraf po kliknięciu. Nieźle, co?</p>
</div>

<h2 id="Komentarze"><strong><strong><strong><strong>Komentarze</strong></strong></strong></strong></h2>

<p>Tak samo jak w HTML i CSS, możliwe jest pisanie komentarzy w kodzie JavaScript. Zostaną one zignorowane przez przeglądarkę - istnieją tylko po to, aby służyć pomocą tym, którzy współpracują przy tym kodzie (i tobie, kiedy po 6 miesiącach wrócić do kodu i nie będziesz pamiętać, co on robi). Komentarze są bardzo użyteczne i powinieneś używać ich często, szczególnie w dużych aplikacjach. Istniają dwa typy komentarzy:</p>

<ul>
 <li>Pojedynczy komentarz, pisany po podwójnym znaku / (//):
  <pre class="brush: js notranslate">// Jestem komentarzem!</pre>
  <strong><strong> </strong></strong></li>
 <li>Komentarz wielolinijkowy, który jest pisany pomiędzy /* a */:
  <pre class="brush: js notranslate"><strong><strong>
</strong></strong>/*
  Także jestem
  komentarzem
*/</pre>
  <strong><strong> </strong></strong></li>
</ul>

<p>Przykładowo możemy skomentować nasz ostatni kod JavaScript w ten sposób:</p>

<pre class="brush: js notranslate"><strong><strong>
</strong></strong>// Funkcja: tworzy nowy paragraf i dodaje na koniec &lt;body&gt;.

function stworzParagraf() {
  var para = document.createElement('p');
  para.textContent = 'Kliknąłeś przycisk!';
  document.body.appendChild(para);
}<strong>

</strong>/*
  1. Pobierz listę wskaźników na wszystke przyciski na stronie.
  2. Przejdź po wszystkich przycisków i dodaj każdemu z nich akcję pod klinięcie.

  Kiedy przycisk jest wciśnięty, funkcja stworzParagraf() zostanie wywołana.
*/

var przyciski = document.querySelectorAll('button');

for (var i = 0; i &lt; buttons.length ; i++) {
  przyciski[i].addEventListener('click', stworzParagraf);
}</pre>

<h2 id="Podsumowanie"><strong><strong><strong><strong>Podsumowanie</strong></strong></strong></strong></h2>

<p>A więc proszę bardzo, oto twój pierwszy krok w kierunku świata JavaScript. Zaczęliśmy właśnie teorię, aby przyzwyczaić cię do używania JavaScript i do tego, co z jego pomocą można zrobić. W czasie trwania kursu między innymi zobaczyłeś kilka przykładów i nauczyłeś się, jak JavaScript jest używany z resztą kodu na twojej stronie<strong>.</strong></p>

<p>JavaScript może wyglądać obecnie lekko odstraszająco, ale nie martw się - w tym kursie wprowadzimy cię w jego świat krok po kroku. W kolejnym artykule <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">zanurzysz się w praktycznej częsci</a>, poprzez budowanie twoich własnych przykładów kodu w JavaScript.</p>

<ul>
</ul>

<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>

<h2 id="W_tym_module"><strong>W tym module</strong></h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Co to jest JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Pierwszy skok do JavaScriptu</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Co poszło nie tak? Rozwiązywanie problemów JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Przechowywanie potrzebnych informacji - Zmienne</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Podstawowa matematyka w JavaScript - liczby i operatory</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Obsługa tekstu - ciągi znaków w JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Przydatne metody ciągów znaków</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Tablice</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Podsumowanie: Generator głupich historii</a></li>
</ul>