path: root/files/pl/learn/getting_started_with_the_web/javascript_basics/index.html

---
title: Podstawy JavaScript
slug: Learn/Getting_started_with_the_web/JavaScript_basics
tags:
  - Początkujący
translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>JavaScript to język programowania, który dodaje interaktywność do Twojej witryny (na przykład: gry, odpowiedzi po naciśnięciu przycisków lub wprowadzeniu danych do formularza, dynamiczne stylowanie, animacja). Ten artykuł pomoże Ci rozpocząć przygodę z tym ekscytującym językiem oraz przedstawi przedsmak tego, co dzięki niemu jest możliwe.</p>
</div>

<h2 id="Czym_naprawdę_jest_JavaScript">Czym naprawdę jest JavaScript?</h2>

<p>{{Glossary("JavaScript")}} (w skrócie "JS") jest pełnoprawnym {{Glossary("Dynamic programming language", "dynamicznym językiem programowania")}}, który po dodaniu do dokumentu {{Glossary("HTML")}}, może dostarczyć dynamiczną zawartość do stron internetowych. Został stworzony przez Brendan'a Eich, współtwórcę projektu Mozilla, Mozilla Foundation i Mozilla Corporation.</p>

<p>JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków. Z większym doświadczeniem, będziesz w stanie stworzyć gry, animowane grafiki 2D i 3D, kompleksowe aplikacje oparte na bazach danych i wiele więcej!</p>

<p>JavaScript jest dość zwarty, ale jednocześnie bardzo elastyczny. Programiści napisali wiele różnych narzędzi z wykorzystaniem rdzenia języka JavaScript, otwierając mnóstwo dodatkowych funkcjonalności przy minimalnym wysiłku. Obejmują one:</p>

<ul>
 <li>Browser Application Programming Interfaces ({{Glossary("API","APIs")}}) — API wbudowane w przeglądarki internetowe, zapewniające takie funkcjonalności jak dynamiczne tworzenie HTML i ustawianie stylów CSS, zbieranie i manipulowanie strumieniem wideo z kamery internetowej użytkownika lub generowanie grafiki 3D i próbek audio.</li>
 <li>API innych firm umożliwiające programistom dołączenie do swoich witryn funkcjonalności pochodzących od innych dostawców treści, takich jak Twitter czy Facebook.</li>
 <li>Frameworki i biblioteki innych firm zewnętrznych, które możesz  wykorzystać w swoim kodzie HTML, by umożliwić sobie szybkie tworzenie witryn i aplikacji internetowych.</li>
</ul>

<p>Ponieważ ten artykuł ma być jedynie lekkim wprowadzeniem do JavaScript, nie będziemy mieszać Ci na tym etapie mówiąc szczegółowo o tym, jaka jest różnica między jądrem języka JavaScript, a różnymi narzędziami wymienionymi powyżej. Możesz później nauczyć się tego wszystkiego szczegółowo, w naszym <a href="/en-US/docs/Learn/JavaScript">JavaScript learning area</a> i w pozostałych artykułach MDN.</p>

<p>Poniżej przedstawimy kilka aspektów podstaw języka, będziesz miał także okazje pobawić się kilkoma funkcjonalnościami interfejsu API przeglądarki. Baw się dobrze!</p>

<h2 id="Przykład_hello_world">Przykład "hello world"</h2>

<p>Powyższa sekcja może brzmieć naprawdę ekscytująco i tak powinno być — JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.</p>

<p>Jednak uzyskanie poczucia komfortu w używaniu JavaScript jest trudniejsze niż w przypadku korzystania z HTML i CSS. Być może lepiej będzie zacząć powoli i kontynuować pracę za pomocą małych konsekwentnych kroków. Na początek pokażemy, jak dodać podstawowy kod JavaScript do Twojej strony tworząc przykład "hello world!" (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">standard w podstawowych przykładach programowania</a>).</p>

<div class="warning">
<p><strong>Ważne</strong>: Jeśli nie podążałeś za wcześniejszą częścią naszego kursu, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">pobierz ten przykładowy kod</a> i użyj go jako punktu wyjścia.</p>
</div>

<ol>
 <li>Po pierwsze, przejdź do swojej strony testowej i utwórz nowy folder o nazwie „scripts” (bez cudzysłowów). Następnie w nowym folderze skryptów utwórz nowy plik o nazwie <code>main.js</code>. Zapisz go w folrderze <code>scripts</code>.</li>
 <li>Następnie w pliku <code>index.html</code> wprowadź następujący element w nowej linii, tuż przed zamknięciem tagu <code>&lt;/body&gt;</code>:
  <pre>&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
 </li>
 <li>W zasadzie, ten kod działa identycznie, jak element {{htmlelement("link")}} w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).</li>
 <li>Teraz dodaj następujący kod do pliku <code>main.js</code>:
  <pre>var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';</pre>
 </li>
 <li>Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj <code>index.html</code> w przeglądarce. Powinieneś zobaczyć coś takiego:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png"></li>
</ol>

<div class="note">
<p><strong>Notatka</strong>: Powód, dla którego wstawiliśmy element {{htmlelement("script")}} w dolnej części pliku HTML jest to, że elementy w HTML są ładowane przez przeglądarkę w kolejności pojawienia się ich w pliku. Jeśli JavaScript jest ładowany jako pierwszy i ma wpływać na HTML poniżej, może to nie zadziałać, ponieważ JavaScript byłby ładowany przed HTML na którym ma pracować. Dlatego umieszczenie kodu JavaScript w dolnej części strony HTML jest często najlepszą strategią.</p>
</div>

<h3 id="Co_się_wydarzyło">Co się wydarzyło?</h3>

<p>Twój tekst nagłówka został zmieniony na "Hello world!" przy użyciu JavaScript. Zrobiłeś to najpierw, używając funkcji zwanej <code>{{domxref("Document.querySelector", "querySelector()")}}</code> by chwycić referencje do nagłówka i przechowywać ją w zmiennej o nazwie <code>myHeading</code>. Jest to bardzo podobne do tego, co zrobiliśmy przy użyciu selektorów CSS. Kiedy chcesz coś zrobić z elementem, najpierw musisz go wybrać.</p>

<p>Następnie ustawiłeś wartość właściwości<code>{{domxref("Node.textContent", "textContent")}}</code> zmiennej <code>myHeading</code> (która reprezentuje zawartość nagłówka) na "Hello world!".</p>

<div class="note">
<p><strong>Zanotuj</strong>: Obie funkcje, których używałeś powyżej, są częścią <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, który pozwala na manipulowanie treścią strony.</p>
</div>

<h2 id="Podstawy_języka">Podstawy języka</h2>

<p>Wytłumaczmy niektóre podstawowe cechy języka JavaScript, aby lepiej zrozumieć, jak to wszystko działa. Warto zauważyć, że te cechy są wspólne dla wszystkich języków programowania, więc jeśli opanujesz te podstawy, jesteś na dobrej drodze aby móc programować w czymkolwiek!</p>

<div class="warning">
<p><strong>Ważne</strong>: W tym artykule spróbuj wprowadzać przykładowe linie kodu do konsoli JavaScript, aby zobaczyć, co się zdarzy. Więcej informacji na temat konsoli JavaScript można znaleźć w sekcji <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p>
</div>

<h3 id="Zmienne">Zmienne</h3>

<p>{{Glossary("Variable", "Zmienne")}} są kontenerami w których można zapisywać wartości. Zacznij od zadeklarowania zmiennej za pomocą słowa kluczowego <code>var</code>, a następnie dowolnej nazwy, której chcesz użyć:</p>

<pre class="brush: js">var myVariable;</pre>

<div class="note">
<p><strong>Zanotuj</strong>: Średnik na końcu wiersza wskazuje, gdzie kończy się instrukcja; jest to bezwzględnie wymagane tylko w przypadku, gdy musisz oddzielić poszczególne instrukcje w jednej linii. Jednak niektórzy uważają, że dobrą praktyką jest umieszczenie ich pod koniec każdej instrukcji. Istnieją inne zasady kiedy należy, a kiedy nie powinno się ich używać — po więcej szczegółów zobacz <a href="https://www.codecademy.com/blog/78">Your Guide to Semicolons in JavaScript</a>.</p>
</div>

<div class="note">
<p><strong>Zanotuj</strong>: Możesz dowolnie nazwać zmienną, ale istnieją pewne zastrzeżone nazwy (zobacz <a href="http://www.codelifter.com/main/tips/tip_020.shtml">w tym artykule o regułach nazewnictwa zmiennych</a>). Jeśli nie jesteś pewien, <a href="https://mothereff.in/js-variables">możesz sprawdzić nazwę zmiennej</a>, aby upewnić się, czy jest prawidłowa.</p>
</div>

<div class="note">
<p><strong>Zanotuj</strong>: JavaScript rozróżnia małe i duże litery — <code>myVariable</code>jest inną zmienną niż <code>myvariable</code>. Jeśli pojawiają się problemy w kodzie, sprawdź wielkość liter!</p>
</div>

<p>Po zadeklarowaniu zmiennej możesz nadać jej wartość:</p>

<pre class="brush: js">myVariable = 'Bob';</pre>

<p>Jeśli chcesz, możesz wykonać obydwie operacje w tej samej linii:</p>

<pre>var myVariable = 'Bob';</pre>

<p>Możesz pobrać wartość przez wywołanie zmiennej po nazwie:</p>

<pre class="brush: js">myVariable;</pre>

<p>Po podaniu wartości zmiennej można ją później zmienić:</p>

<pre>var myVariable = 'Bob';
myVariable = 'Steve';</pre>

<p>Warto zauważyć, że zmienne mają różne <a href="/en-US/docs/Web/JavaScript/Data_structures">typy danych</a>:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row">Typ</th>
   <th scope="col">Wyjaśnienie</th>
   <th scope="col">Przykład</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">{{Glossary("String")}}</th>
   <td>Sekwencja tekstu znana jako ciąg znaków. Aby potwierdzić, że zmienna jest ciągiem, należy zamknąć jej wartość w apostrofach.</td>
   <td><code>var myVariable = 'Bob';</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Number")}}</th>
   <td>Liczba. Liczb nie zamyka się w apostrofach.</td>
   <td><code>var myVariable = 10;</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Boolean")}}</th>
   <td>Prawda / Fałsz. Słowa <code>true</code> i <code>false</code> to specjalne słowa kluczowe w JS i nie potrzebują apostrofów.</td>
   <td><code>var myVariable = true;</code></td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Array")}}</th>
   <td>Konstrukcja, która pozwala na przechowywanie wielu wartości w jednym odniesieniu.</td>
   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
    Odwołaj się do każdego elementu tej tablicy:<br>
    <code>myVariable[0]</code>, <code>myVariable[1]</code>, itd.</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Object")}}</th>
   <td>Zasadniczo cokolwiek. Wszystko w JavaScript jest obiektem i może być przechowywane w zmiennej. Pamiętaj o tym podczas nauki.</td>
   <td><code>var myVariable = document.querySelector('h1');</code><br>
    Również wszystkie powyższe przykłady.</td>
  </tr>
 </tbody>
</table>

<p>Więc dlaczego potrzebujemy zmiennych? Cóż, zmienne są potrzebne, aby zrobić cokolwiek interesującego w programowaniu. Jeśli nie moglibyśmy zmieniać wartości, to nie możnaby zrobić nic dynamicznego, jak personalizacja powitania lub zmiana wyświetlanego obrazu w galerii.</p>

<h3 id="Komentarze">Komentarze</h3>

<p>Możesz umieścić komentarze w kodzie JavaScript, tak samo jak w CSS:</p>

<pre class="brush: js">/*
Wszystko pomiędzy to komentarz.
*/</pre>

<p>Jeśli Twój komentarz nie zawiera przerw między wierszami, często łatwiej jest umieścić go za dwoma ukośnikami:</p>

<pre class="brush: js" style="font-size: 14px;">// To jest komentarz
</pre>

<h3 id="Operatory">Operatory</h3>

<p><code>{{Glossary("Operator")}}</code> jest symbolem matematycznym, który generuje wynik w oparciu o dwie wartości (lub zmienne). W poniższej tabeli można zobaczyć niektóre z najprostszych operatorów oraz kilka przykładów, które można wypróbować w konsoli JavaScript.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row">Operator</th>
   <th scope="col">Wyjaśnienie</th>
   <th scope="col">Symbole</th>
   <th scope="col">Przykład</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Dodawanie</th>
   <td>Służy do dodawania dwóch liczb lub sklejenia dwóch ciągów znaków.</td>
   <td><code>+</code></td>
   <td><code>6 + 9;<br>
    "Hello " + "world!";</code></td>
  </tr>
  <tr>
   <th scope="row">Odejmowanie, Mnożenie, Dzielenie</th>
   <td>Robią to, co można oczekiwać od nich w podstawowej matematyce.</td>
   <td><code>-</code>, <code>*</code>, <code>/</code></td>
   <td><code>9 - 3;<br>
    8 * 2; // mnożenie w JS jest gwiazdką<br>
    9 / 3;</code></td>
  </tr>
  <tr>
   <th scope="row">Przypisanie wartości</th>
   <td>Widzieliście już to: przypisuje wartość zmiennej.</td>
   <td><code>=</code></td>
   <td><code>var myVariable = 'Bob';</code></td>
  </tr>
  <tr>
   <th scope="row">Znak równości</th>
   <td>Wykonuje test sprawdzający, czy dwie wartości są sobie równe i zwraca wynik <code>true</code> / <code>false</code> (Boolean).</td>
   <td><code>===</code></td>
   <td><code>var myVariable = 3;<br>
    myVariable === 4;</code></td>
  </tr>
  <tr>
   <th scope="row">Zaprzeczenie, Nie równa się</th>
   <td>Zwraca logicznie odwrotną wartość tego, co poprzedza; zmienia <code>true</code> w <code>false</code>, itd. Kiedy jest używany wraz z operatorem równości, operator negacji sprawdza, czy dwie wartości <em>nie</em> są równe.</td>
   <td><code>!</code>, <code>!==</code></td>
   <td>
    <p>Podstawowe wyrażenie jest <code>true</code>, ale porównanie zwraca <code>false</code>, ponieważ zostało ono zanegowane:</p>

    <p><code>var myVariable = 3;<br>
     !(myVariable === 3);</code></p>

    <p>Tu testujemy "czy <code>myVariable</code> NIE równa się 3". To zwraca wartość <code>false</code> ponieważ <code>myVariable</code> JEST równa 3.</p>

    <p><code><code>var myVariable = 3;</code><br>
     myVariable !== 3;</code></p>
   </td>
  </tr>
 </tbody>
</table>

<p>Istnieje wiele więcej operatorów, ale to wystarczy na razie. Jeśli chcesz zobacz pełną listę sprawdź w <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a>.</p>

<div class="note">
<p><strong>Zanotuj</strong>: Mieszanie typów danych może powodować dziwne efekty podczas wykonywania obliczeń, dlatego należy uważać, aby prawidłowo odwoływać się do zmiennych i uzyskać spodziewane wyniki. Na przykład wprowadź <code>"35" + "25"</code> do konsoli. Dlaczego nie dostaniesz oczekiwanego rezultatu? Ponieważ znaki cudzysłowów zmieniają liczby w ciągi znaków, więc skończyłeś na łączeniu łańcuchów zamiast dodawać liczby. Jeśli wpiszesz, <code>35 + 25</code> otrzymasz poprawny wynik.</p>
</div>

<h3 id="Warunki">Warunki</h3>

<p>Warunkami są struktury kodu, które pozwalają na sprawdzenie, czy wyrażenie zwraca <code>true</code>, czy nie, i uruchamia inny kod ujawniony przez jego wynik. Bardzo popularną formą warunku są instrukcje <code>if ... else</code>. Na przykład:</p>

<pre class="brush: js">var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}</pre>

<p>Wyrażenie wewnątrz <code>if (...)</code> jest testem — który używa operatora tożsamości (opisanego powyżej) w celu porównania zmiennej <code>iceCream</code> z ciągiem znaków <code>chocolate</code>, aby sprawdzić, czy te dwa są równe. Jeśli to porównanie zwróci <code>true</code>, uruchomiony zostanie pierwszy blok kodu. Jeśli porównanie nie jest prawdziwe, pierwszy blok jest pomijany, a drugi blok kodu, po wywołaniu <code>else</code>, jest uruchamiany.</p>

<h3 id="Funkcje">Funkcje</h3>

<p>{{Glossary("Function", "Funkcje")}} są sposobem na zapakowanie funkcjonalności, które chcesz wykorzystać ponownie. Gdy potrzebujesz procedury, zamiast pisać cały kod za każdym razem, możesz wywołać funkcję z nazwą funkcji. Powyżej widzieliście już niektóre zastosowania funkcji, na przykład:</p>

<ol>
 <li>
  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
 </li>
 <li>
  <pre class="brush: js">alert('hello!');</pre>
 </li>
</ol>

<p>Funkcje te, <code>document.querySelector</code> i <code>alert</code>, są wbudowane w przeglądarkę, aby używać w dowolnym momencie.</p>

<p>Jeśli widzisz coś, co wygląda jak nazwa zmiennej, ale ma nawiasy — <code>()</code> — po niej, to prawdopodobnie jest to funkcja. Funkcje często biorą {{Glossary("Argument", "argumenty")}} — bity danych potrzebne do wykonywania ich pracy. Znajdują się one w nawiasach, oddzielone przecinkami jeśli jest więcej niż jeden argument.</p>

<p>Na przykład, funkcja <code>alert ()</code> powoduje pojawienie się okna podręcznego wewnątrz okna przeglądarki, ale musimy dać mu ciąg znaków jako argument, aby powiedzieć użytkownikowi o tym, co należy wyświetlić w wyskakującym okienku.</p>

<p>Dobrą wiadomością jest możliwość zdefiniowania własnych funkcji — w następnym przykładzie napiszemy prostą funkcję, która przyjmuje dwie liczby jako argumenty i mnoży je:</p>

<pre class="brush: js">function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}</pre>

<p>Spróbuj uruchomić powyższą funkcję w konsoli, a następnie przetestuj kilka argumentów. Na przykład:</p>

<pre class="brush: js">multiply(4,7);
multiply(20,20);
multiply(0.5,3);</pre>

<div class="note">
<p><strong>Zanotuj</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> informuje przeglądarkę o zwróceniu zmiennej <code>result</code> z funkcji, dzięki czemu jest ona dostępna. Jest to konieczne, ponieważ zmienne zdefiniowane wewnątrz funkcji są dostępne tylko w tych funkcjach. Jest to tak zwany {{Glossary("Scope", "zakres")}} zmiennej. (Poczytaj <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">więcej o zakresie zmiennej</a>.)</p>
</div>

<h3 id="Zdarzenia">Zdarzenia</h3>

<p>Prawdziwa interaktywność na stronie internetowej potrzebuje zdarzeń. Są to struktury kodu nasłuchające rzeczy, które dzieją się w przeglądarce i uruchamiajace kod w odpowiedzi. Najbardziej oczywistym przykładem jest zdarzenie kliknięcia, które jest uruchamiane przez przeglądarkę po kliknięciu na coś za pomocą myszy. Aby to zademonstrować, wpisz następujący kod w konsoli, a następnie kliknij na bieżącej stronie internetowej:</p>

<pre>document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}</pre>

<p>Istnieje wiele sposobów dołączania zdarzenia do elementu. Tutaj wybieramy element {{htmlelement("html")}} i ustawiamy obsługę jego właściwości <code>onclick</code> równą funkcji anonimowej (tj. bezimiennej), która zawiera kod, który ma być uruchamiany.</p>

<p>Zauważ że</p>

<pre>document.querySelector('html').onclick = function() {};</pre>

<p>jest równe temu</p>

<pre>var myHTML = document.querySelector('html');
myHTML.onclick = function() {};</pre>

<p>To jest po prostu krócej.</p>

<h2 id="Podrasowanie_naszej_przykładowej_strony">Podrasowanie naszej przykładowej strony</h2>

<p>Omówiliśmy kilka podstawowych zasad JavaScript, dodajmy kilka ciekawych funkcji do naszej przykładowej witryny, aby zobaczyć, co jest możliwe.</p>

<h3 id="Dodawanie_zmieniarki_obrazu">Dodawanie zmieniarki obrazu</h3>

<p>W tej sekcji dodajemy dodatkowy obraz do naszej witryny, korzystając z kilku innych funkcji DOM API, używając JavaScript, aby przełączać się między nimi, gdy klikniesz obraz.</p>

<ol>
 <li>Na samym początku znajdź inne zdjęcie, które chciałbyś pokazać na stronie. Upewnij się, że jest tego samego rozmiaru, co pierwsze - albo przynajmniej jak najbliżej się da.</li>
 <li>Zachowaj zdjęcie w swoim katalogu <code>images</code>.</li>
 <li>Nazwij je 'firefox2.png' (bez apostrofów).</li>
 <li>Otwórz swój plik <code>main.js</code>, następnie dopisz następujący kod (jeżeli nadal znajduje się tam skrypt "witaj, świecie" - usuń go).
  <pre>var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
    } else {
      myImage.setAttribute ('src','images/firefox-icon.png');
    }
}</pre>
 </li>
 <li>Zapisz wszystko i otwórz <code>index.html</code> w przeglądarce. Teraz gdy klikniesz na obrazek, zmieni on się w inny!</li>
</ol>

<p>Przechowujesz odwołanie do elementu {{htmlelement("img")}} w zmiennej <code>myImage</code>. Następnie ustawiasz dla tej zmiennej obsługę zdarzenia <code>onclick</code> jako funkcję bez nazwy (finkcja anonimowa). Teraz za każdym razem, gdy kliknięty zostanie ten element:</p>

<ol>
 <li>Pobierasz wartość atrybutu <code>src</code> tego obrazu.</li>
 <li>Za pomocą wyrażenia warunkowego sprawdzasz, czy wartość <code>src</code> jest równa ścieżce do oryginalnego obrazu:
  <ol>
   <li>Jeśli tak, zmienisz wartość <code>src</code> na ścieżkę do drugiego obrazu, zmuszając drugi obraz do załadowania do elementu {{htmlelement("img")}}.</li>
   <li>Jeśli nie (to oznacza, że ​​już musiała się zmienić), wartość <code>src</code> zmienia się z powrotem na ścieżkę oryginalnego obrazu, do stanu oryginalnego.</li>
  </ol>
 </li>
</ol>

<h3 id="Dodanie_spersonalizowanej_wiadomości_powitalnej">Dodanie spersonalizowanej wiadomości powitalnej</h3>

<p>Następnie dodamy kolejny fragment kodu, zmieniając tytuł strony na spersonalizowaną wiadomość powitalną, gdy użytkownik po raz pierwszy odwiedzi witrynę. Ta wiadomość powitalna będzie trwała, nawet jeśli użytkownik opuści witrynę, a później wróci - zapiszemy ją za pomocą interfejsu <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>. Będzie również zawierać opcję zmiany użytkownika, a zatem będziemy mogli zmienić wiadomość powitalną w dowolnym momencie.</p>

<ol>
 <li>W pliku <code>index.html</code>, dodaj następujący wiersz tuż przed elementem {{htmlelement("script")}}:

  <pre>&lt;button&gt;Change user&lt;/button&gt;</pre>
 </li>
 <li>Na końcu pliku <code>main.js</code>, umieść następujący kod, dokładnie tak, jak napisano — pobiera on odwołania do nowego przycisku i nagłówka, przechowując je w zmiennych:
  <pre>var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');</pre>
 </li>
 <li>Teraz dodaj następującą funkcję, aby ustawić spersonalizowane powitanie — to jeszcze nic nie zrobi, ale poprawimy to za chwilę:
  <pre>function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}</pre>
  Ta funkcja zawiera funkcję <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, która wyświetla okno dialogowe, przypominające komunikat <code>alert()</code>. Jednak ten komunikat <code>prompt()</code>, prosi użytkownika o wprowadzenie danych i zapisanie ich w zmiennej po naciśnięciu przycisku <strong>OK</strong><em>.</em> W takim przypadku prosimy użytkownika o podanie jego nazwy. Następnie wywołujemy interfejs API o nazwie <code>localStorage</code>, który pozwala nam przechowywać dane w przeglądarce, a następnie je odzyskać. Używamy funkcji <code>setItem()</code> dla localStorage, aby utworzyć i przechować element danych o nazwie <code>'name'</code>, ustawiając jego wartość jako wartość zmiennej <code>myName</code> która zawiera dane wprowadzone przez użytkownika. Na koniec ustawiamy <code>textContent</code> nagłówka jako string, oraz nowo zapisaną nazwę użytkownika.</li>
 <li>Następnie dodaj poniższy blok <code>if ... else</code>, który możemy nazwać kodem inicjalizacji, ponieważ tworzy strukturę aplikacji podczas pierwszego ładowania:
  <pre>if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}</pre>
  W tym bloku najpierw używamy operatora negacji (logiczne NIE, reprezentuje znak wykrzyknika !) aby sprawdzić, czy obiekt <code>name</code> istnieje. Jeśli nie, to uruchamiana jest funkcja <code>setUserName()</code>, aby go utworzyć. Jeśli on istnieje (to znaczy, że użytkownik ustawił go podczas poprzedniej wizyty), pobieramy zapisaną nazwę za pomocą <code>getItem()</code> i ustawiamy <code>textContent</code> nagłówka jako string oraz nazwę użytkownika, podobnie jak robiliśmy to w <code>setUserName()</code>.</li>
 <li>Na koniec poniższą funkcję przypisujemy do zdarzenia <code>onclick</code> przycisku. Kiedy zostanie on kliknięty, zostanie uruchomiona funkcja <code>setUserName()</code>. Dzięki temu użytkownik może ustawić nową nazwę, kiedy chce, naciskając przycisk:
  <pre>myButton.onclick = function() {
  setUserName();
}
</pre>
 </li>
</ol>

<p>Teraz, kiedy po raz pierwszy odwiedzisz witrynę, poprosi ona o podanie nazwy użytkownika, a następnie otrzymasz spersonalizowaną wiadomość. Możesz zmienić nazwę w dowolnym momencie, naciskając przycisk. Dodatkowym bonusem jest to, że nazwa utrzymuje się po zamknięciu strony, zachowując spersonalizowaną wiadomość przy następnym otwarciu strony! Dzieje się tak, ponieważ nazwa przechowywana jest w localStorage.</p>

<h2 id="Wniosek">Wniosek</h2>

<p>Jeśli wykonałeś wszystkie instrukcje zawarte w tym artykule, powinieneś otrzymać stronę, która wygląda mniej więcej tak (możesz również <a href="https://mdn.github.io/beginner-html-site-scripted/">zobaczyć naszą wersję tutaj</a>):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png"></p>

<p>Jeśli utkniesz, możesz porównać swoją pracę z naszym <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">gotowym przykładowym kodem na GitHub</a>.</p>

<p>Ledwo zarysowaliśmy powierzchnię JavaScript. Jeśli lubisz grać i chcesz posunąć się jeszcze dalej, przejdź do naszego <a href="/pl/docs/Learn/JavaScript">następnego tematu kursu JavaScript</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>