path: root/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html

---
title: A first splash into JavaScript
slug: Learn/JavaScript/Pierwsze_kroki/A_first_splash
translation_of: Learn/JavaScript/First_steps/A_first_splash
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">Zaznajomiłeś się już nieco z teorią JavaScript i masz już pewne pojęcie co do zastosowania tego języka. Teraz zamierzamy udzielić Ci przyspieszonego kursu z podstawowych funkcji JavaScript'u poprzez ten, w pełni praktyczny, samouczek. Krok po kroku napiszesz tu prostą grę pod tytułem: "Zgadnij liczbę".</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Wymagania wstępne:</th>
   <td>Podstawowa umiejętność posługiwania się komputerem, podstawowa znajomość HTML i CSS, podstawowa znajomość czym jest JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Cel:</th>
   <td>Pierwsze doświadczenia w pisaniu kodu w JavaScript i zrozumienie- przynajmniej w podstawowym stopniu- z czym związane jest pisanie programu w JavaScript.</td>
  </tr>
 </tbody>
</table>

<p>Nie oczekujemy od Ciebie całkowitego zrozumienia kodu od zaraz - chcemy raczej przedstawić Ci nieco ogólniejsze spojrzenie i dać Ci odczuć sposób, w jaki działa JavaScript (jak również i inne języki programowania). W późniejszych artykułach wrócimy do użytych tu funkcjonalności w bardziej szczegółowy spsób.</p>

<div class="note">
<p>Wiele funkcjonalności, które zobaczysz w JavaScript, jest takich samych, jak w innych językach programowania (funkcje, pętle itd.) Składnia języka wygląda inaczej, ale zasada działania jest przeważnie ta sama.</p>
</div>

<h2 id="Myśleć_jak_programista">Myśleć jak programista</h2>

<p>Składnia danego języka nie jest - wbrew pozorom - najtrudniejszym aspektem, z jakim trzeba zmierzyć się podczas nauki programowania. Sprawą znacznie poważniejszą jest bowiem nauczyć się stosować posiadaną wiedzę do rozwiązywania problemów ze świata realnego. Musisz zacząć myśleć jak programista. Wiąże się to z patrzeniem na opisy oczekiwanego efektu działania programu, przemyśleniem, jakich konstrukcji kodu w tym celu użyć i zaplanowaniem, jak połączyć je wszystkie w efektywnie współpracującą całość.</p>

<p>Wymaga to połączenia ciężkiej pracy, doświadczenia ze składnią języków i praktyki - wraz z odrobiną kreatywności. Im więcej napiszesz kodu, tym lepszy w tym się staniesz. Nie możemy obiecać, że wypracujesz  w sobie "mózg programisty" w pięć minut, ale damy Ci wiele możliwości praktykowania myślenia jak programista w czasie trwania tego kursu.</p>

<p>Pamiętając o tym, przyjrzyjmy się ogólnie procesowi pisania kodu dzieląc go na poszczególne konkretne zadania. Posłuży nam w tym celu poniższy przykładowy program.</p>

<h2 id="Przykład_Gra_Zgadnij_liczbę">Przykład: Gra "Zgadnij liczbę"</h2>

<p>Oto przykład prostej gry:</p>

<div class="hidden">
<h6 id="Top_hidden_code">Top hidden code</h6>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Number guessing game<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
        <span class="selector token">html </span><span class="punctuation token">{</span>
            <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span>
        <span class="punctuation token">}</span>

        <span class="selector token">body </span><span class="punctuation token">{</span>
            <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50%</span><span class="punctuation token">;</span>
            <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span>
            <span class="property token">min-width</span><span class="punctuation token">:</span> <span class="number token">480</span>px<span class="punctuation token">;</span>
            <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span> auto<span class="punctuation token">;</span>
        <span class="punctuation token">}</span>

        <span class="selector token"><span class="class token">.lastResult</span> </span><span class="punctuation token">{</span>
            <span class="property token">color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
            <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">3</span>px<span class="punctuation token">;</span>
        <span class="punctuation token">}</span>
    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Number guessing game<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessField<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Enter a guess: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessField<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessField<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Submit guess<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guessSubmit<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>resultParas<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guesses<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastResult<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lowOrHi<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
    <span class="comment token">// Your JavaScript goes here</span>
    <span class="keyword token">let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span>
    <span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
    <span class="keyword token">let</span> resetButton<span class="punctuation token">;</span>

    <span class="keyword token">function</span> <span class="function token">checkGuess</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
      <span class="keyword token">let</span> userGuess <span class="operator token">=</span> <span class="function token">Number</span><span class="punctuation token">(</span>guessField<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="keyword token">if</span> <span class="punctuation token">(</span>guessCount <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
        guesses<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Previous guesses: '</span><span class="punctuation token">;</span>
      <span class="punctuation token">}</span>

      guesses<span class="punctuation token">.</span>textContent <span class="operator token">+</span><span class="operator token">=</span> userGuess <span class="operator token">+</span> <span class="string token">' '</span><span class="punctuation token">;</span>

      <span class="keyword token">if</span> <span class="punctuation token">(</span>userGuess <span class="operator token">===</span> randomNumber<span class="punctuation token">)</span> <span class="punctuation token">{</span>
        lastResult<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Congratulations! You got it right!'</span><span class="punctuation token">;</span>
        lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'green'</span><span class="punctuation token">;</span>
        lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
        <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>guessCount <span class="operator token">===</span> <span class="number token">10</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
        lastResult<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'!!!GAME OVER!!!'</span><span class="punctuation token">;</span>
        lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
        <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
        lastResult<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Wrong!'</span><span class="punctuation token">;</span>
        lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span>
        <span class="keyword token">if</span><span class="punctuation token">(</span>userGuess <span class="operator token">&lt;</span> randomNumber<span class="punctuation token">)</span> <span class="punctuation token">{</span>
          lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Last guess was too low!'</span> <span class="punctuation token">;</span>
        <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span>userGuess <span class="operator token">&gt;</span> randomNumber<span class="punctuation token">)</span> <span class="punctuation token">{</span>
          lowOrHi<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Last guess was too high!'</span><span class="punctuation token">;</span>
        <span class="punctuation token">}</span>
      <span class="punctuation token">}</span>

      guessCount<span class="operator token">++</span><span class="punctuation token">;</span>
      guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
    <span class="punctuation token">}</span>

    guessSubmit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> checkGuess<span class="punctuation token">)</span><span class="punctuation token">;</span>

    <span class="keyword token">function</span> <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
      guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
      guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
      resetButton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      resetButton<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Start new game'</span><span class="punctuation token">;</span>
      document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span>
      resetButton<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> resetGame<span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="punctuation token">}</span>

    <span class="keyword token">function</span> <span class="function token">resetGame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
      guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
      <span class="keyword token">const</span> resetParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.resultParas p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span> <span class="punctuation token">;</span> i <span class="operator token">&lt;</span> resetParas<span class="punctuation token">.</span>length <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
        resetParas<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
      <span class="punctuation token">}</span>

      resetButton<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span>
      guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
      guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
      guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
      guessField<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
      lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'white'</span><span class="punctuation token">;</span>
      randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span>
    <span class="punctuation token">}</span>
</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
</div>

<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>

<p>Nie krępuj się - pograj sobie chwilę. Zwróć uwagę na elementy tej gry zanim przejdziesz dalej.</p>

<p>Wyobraźmy sobie, że Twój szef postawił przed Tobą następujące zadanie:</p>

<blockquote>
<p>Chcę, żebyś napisał prostą grę typu "zgadnij liczbę". Gra powinna wybierać losową liczbę pomiędzy 1 a 100. Zadaniem gracza jest odgadnąć tę liczbę w najwyżej 10 próbach. Po każdej próbie gracz powinien otrzymać informację, czy zgadł, czy też nie i - jeśli nie odgadł, powinien dodatkowo dowiedzieć się, czy jego liczba miała wartość za małą, czy za dużą. Ponadto gracz powinien widzieć wybrane poprzednio przez siebie liczby. Gra ma się zakończyć gdy gracz poda prawidłową odpowiedź, lub gdy wykorzysta ostatnią próbę. Po zakończeniu gry gracz powinien mieć możliwośc rozpocząć ją od nowa.</p>
</blockquote>

<p>Zacznijmy od przedstawienia powyższego opisu w sposób bliższy myśleniu programisty i podzielmy go na proste pojedyncze zadania:</p>

<ol>
 <li>Wybierz losową liczbę z zakresu od 1 do 100.</li>
 <li>Zapisz numer próby, którą podejmuje gracz. Zacznij od 1.</li>
 <li>Podaj graczowi sposób, w jaki może odgadnąć tę liczbę.</li>
 <li>Gdy padnie odpowiedź zapisz ją gdzieś, aby użytkownik mógł widzieć swoje poprzednie próby.</li>
 <li>Sprawdź, czy padła prawidłowa odpowiedź.</li>
 <li>Jeśli tak:
  <ol>
   <li>Wyświetl gratulacje.</li>
   <li>Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).</li>
   <li>Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.</li>
  </ol>
 </li>
 <li>Jeśli nie i graczowi pozostały jeszcze próby:
  <ol>
   <li>Poinformuj o nieprawidłowej odpowiedzi.</li>
   <li>Pozwól podać kolejną odpowiedź.</li>
   <li>Zwiększ numer próby gracza o 1.</li>
  </ol>
 </li>
 <li>Jeśli nie i graczowi nie pozostała już ani jedna próba:
  <ol>
   <li>Poinformuj o zakończeniu gry.</li>
   <li>Zablokuj możliwość podawania dalszych odpowiedzi (to mogłoby namieszać w grze).</li>
   <li>Udostępnij narzędzie, którym gracz może ponownie uruchomić grę.</li>
  </ol>
 </li>
 <li>Gdy gra uruchomi się ponownie, upewnij się, że dane z poprzedniej gry zostały całkowicie usunięte i interfejs powrócił do stanu początkowego. Przejdź do punktu nr 1.</li>
</ol>

<p>Zróbmy kolejny krok i spróbujmy zamienić powyższe punkty w kod, który zbuduje naszą grę. W ten sposób zobaczysz w działaniu kilka funcji JavaScript.</p>

<h3 id="Przygotowanie">Przygotowanie</h3>

<p>Aby rozpocząć pracę potrzebujesz mieć na swoim komputerze kopię pliku <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). Otwórz go w edytorze tekstowym i jednocześnie w swojej przeglądarce. Plik ten zawiera nagłówek, akapit z krótką instrukcją gry, oraz (jeszcze nie działający) formularz do wprowadzania odpowiedzi.</p>

<p>Nasz kod będziemy pisać w bloku określonym znacznikiem {{htmlelement("script")}} u dołu pliku HTML:</p>

<pre class="brush: html">&lt;script&gt;

  // Twój kod JavaScript

&lt;/script&gt;
</pre>

<h3 id="Pojemniki_na_dane_-_zmienne">Pojemniki na dane - zmienne</h3>

<p>Zaczynamy. W pierwszej kolejności dodaj poniższe linijki kodu do bloku oznaczonego {{htmlelement("script")}}.</p>

<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1;

var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');

var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');

var guessCount = 1;
var resetButton;</pre>

<p>Ta część kodu definiuje zmienne i stałe niezbędne do pracy programu. Najprościej rzecz ujmując, zmienne są pojemnikami na wartości takie jak liczby, czy ciągi znaków. Zmienną tworzymy używając słowo kluczowe <code>let</code> (lub <code>var</code>), po którym wpisujemy nazwę tej zmiennej. Następnie możemy tej zmiennej przypisać wartość. Robimy to za pomocą znaku równości (<code>=</code>), po którego prawej stronie wpisujemy żądaną wartość. Więcej informacji na temat różnic pomiędzy słowami kluczowymi <code>let</code> i <code>var</code> możesz znaleźć w <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">tym artykule</a>. Stałe natomiast mają za zadanie przechować dane, które mają się nie zmieniać i tworzy się je podobnie jak zmienne, ale przy użyciu słowa kluczowego <code>const</code>. W naszym przykładzie użyjemy stałych do przechowania odnośników (referencji) do poszczególnych części naszego interfejsu użytkownika. Tekst w niektórych z nich może w którymś momencie ulec zmianie, jednak bloki kodu HTML, do których odnoszą się nasze stałe pozostaną niezmienne.</p>

<p>W naszym przykładzie:</p>

<ul>
 <li>Pierwsza zmienna — <code>randomNumber</code> — ma przypisaną losową liczbę z zakresu od 1 do 100, wybraną przez matematyczny algorytm.</li>
 <li>Każda z trzech kolejnych stałych zawiera referencje do konkretnych paragrafów w naszym kodzie HTML. Zostaną one użyte do wstawienia odpowiednich wartości w dalszej części kodu:
  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
&lt;p class="lastResult"&gt;&lt;/p&gt;
&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
 </li>
 <li>Następne dwie zmienne mają za zadanie przechować referencje do pola tekstowego i przycisku zatwierdzania odpowiedzi. Przydadzą się do wprowadzania i zatwierdzania kolejnych odpowiedzi gracza.
  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
 </li>
 <li>Nasze dwie ostatnie zmienne zawierają kolejno: wartość domyślną 1 (tej zmiennej użyjemy do liczenia ilości prób odpowiedzi), oraz referencję do przycisku "reset", który co prawda jeszcze nie istnieje, ale niebawem się to zmieni.</li>
</ul>

<div class="note">
<p>Na temat zmiennych i stałych będziesz dowiadywał się coraz więcej w toku trwania kursu, począwszy już od <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">tego artykułu</a>.</p>
</div>

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

<p>Wstaw następujący kod poniżej dodanego w poprzednim kroku:</p>

<pre class="brush: js">function checkGuess() {
  alert('I am a placeholder');
}</pre>

<p>Funkcje są blokami kodu "wielokrotnego użytku". Napisane raz, mogą być wywoływane wielokrotnie bez potrzeby ponownego pisania ich w całości. Ta cecha funkcji nie tylko oszczędza czas pisania kodu, ale również znacząco poprawia jego czytelność. Istnieje kilka sposobów definiowania funkcji. W tym przykładzie zajmiemy się jednym z prostszych. Rozpoczynamy od słowa kluczowego <code>function</code>, następnie piszemy nazwę naszej funkcji, a na jej końcu- nawiasy zwykłe. Potem wstawiamy dwa nawiasy klamrowe (<code>{ }</code>). To właśnie w nich zawarte jest ciało funkcji - kod, który będzie wykonywał się, ilekroć wywołamy tę funkcję.</p>

<p>Funkcje wywołuje się pisząc jej nazwę wraz z nawiasami zwykłymi.</p>

<p>Spróbujmy. Zapisz zmiany w swoim pliku z kodem i odśwież okno przeglądarki. Teraz przejdź do <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">konsoli JavaScript w narzędziach programisty</a> w przeglądarce i wprowadź tę linię:</p>

<pre class="brush: js">checkGuess();</pre>

<p>Po zatwierdzeniu klawiszem <kbd>Return</kbd>/<kbd>Enter</kbd>, powinno pojawić się okno alertu z tekstem: "<samp>I am a placeholder</samp>". Dzieje się tak, poniważ w naszym kodzie zdefiniowaliśmy funkcję, która uruchamia ten alert, kiedy tylko ją wywołamy.</p>

<div class="note">
<p>W  <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">dalszej części kursu</a> dowiesz się znacznie więcej o funkcjach.</p>
</div>

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

<p>Za pomocą operatorów w JavaScript możemy przeprowadzać porównania, dokonywać obliczeń, łączyć ze sobą ciągi znaków i robić wiele innych przydatnych rzeczy.</p>

<p>Jeśli jeszcze nie zapisałeś zmian w swoim pliku z kodem, oraz nie odświeżyłeś okna przeglądarki, zrób to teraz. Otwórz <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">konsolę Javascript w narzędziach programisty</a> w przeglądarce. Teraz będziesz mógł sprawdzić działanie operatorów. Przepisz dokładnie każde z poleceń z kolumny "Example" i zatwierdź każde z nich klawiszem <kbd>Return</kbd>/<kbd>Enter</kbd>. Obserwuj wyniki. Jeśli z jakiegoś powodu nie masz dostępu do  narzędzi programistycznych w Twojej przeglądarce, możesz użyć poniższej prostej konsoli:</p>

<div class="hidden">
<h6 id="Hidden_code">Hidden code</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JavaScript console&lt;/title&gt;
    &lt;style&gt;
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;


  &lt;/body&gt;

  &lt;script&gt;
    var geval = eval;

    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '&gt;';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);
      inputDiv.focus();

      if(document.querySelectorAll('div').length &gt; 1) {
        inputForm.focus();
      }

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }

    createInput();

  &lt;/script&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>

<p>Najpierw zajmiemy się operatorami arytmetycznymi:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Name</th>
   <th scope="col">Example</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+</code></td>
   <td>Dodawanie</td>
   <td><code>6 + 9</code></td>
  </tr>
  <tr>
   <td><code>-</code></td>
   <td>Odejmowanie</td>
   <td><code>20 - 15</code></td>
  </tr>
  <tr>
   <td><code>*</code></td>
   <td>Mnożenie</td>
   <td><code>3 * 7</code></td>
  </tr>
  <tr>
   <td><code>/</code></td>
   <td>Dzielenie</td>
   <td><code>10 / 5</code></td>
  </tr>
 </tbody>
</table>

<p>Operatora <code>+</code> możemy też użyć do łączenia ciągów znaków (takie działanie nazywa się w programowaniu <em>konkatenacją</em>). Wprowadź poniższe linie, oddzielając je klawiszem <code>Return / Enter </code>:</p>

<pre class="brush: js">var name = 'Bingo';
name;
var hello = ' says hello!';
hello;
var greeting = name + hello;
greeting;</pre>

<p>Dostępne są również pewne ułatwiające życie skróty, zwane złożonymi <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">operatorami przypisania</a>. Jeśli na przykład chcielibyśmy w prosty sposób dodać nowy ciąg tekstowy do już istniejącego, możemy napisać tak:</p>

<pre class="brush: js">name += ' says hello!';</pre>

<p>Co jest równoznaczne z:</p>

<pre class="brush: js">name = name + ' says hello!';</pre>

<p>Kiedy dokonujemy sprawdzenia prawda / fałsz (na przykład w instrukcjach warunkowych - zobacz {{anch("Instrukcje warunkowe", "poniżej")}}) używamy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operatorów porównania</a>. Na przykład:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Name</th>
   <th scope="col">Example</th>
  </tr>
  <tr>
   <td><code>===</code></td>
   <td>Ścisła równość (czy jest dokładnie tym samym?)</td>
   <td><code>5 === 2 + 4</code></td>
  </tr>
  <tr>
   <td><code>!==</code></td>
   <td>Różne od (czy nie jest tym samym?)</td>
   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
  </tr>
  <tr>
   <td><code>&lt;</code></td>
   <td>Mniejsze od</td>
   <td><code>10 &lt; 6</code></td>
  </tr>
  <tr>
   <td><code>&gt;</code></td>
   <td>Większe od</td>
   <td><code>10 &gt; 20</code></td>
  </tr>
 </thead>
</table>

<h3 id="Instrukcje_warunkowe"><a name="Instrukcje warunkowe">Instrukcje warunkowe</a></h3>

<p>Wrócmy teraz do naszej funkcji <code>checkGuess()</code>.  Z pewnością lepiej mogłaby nam się przysłużyć, gdyby jej działanie nie ograniczało się tylko do wyświetlenia komunikatu "placeholder". Mamy dla niej o wiele ważniejsze zadanie - chcemy, by sprawdzała każdą odpowiedź gracza i odpowiednio reagowała.</p>

<p>W tym celu zastąp obecną funkcję <code>checkGuess()</code> jej nową wersją:</p>

<pre class="brush: js">function checkGuess() {
  var userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';

  if (userGuess === randomNumber) {
    lastResult.textContent = 'Congratulations! You got it right!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Wrong!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess &lt; randomNumber) {
      lowOrHi.textContent = 'Last guess was too low!';
    } else if(userGuess &gt; randomNumber) {
      lowOrHi.textContent = 'Last guess was too high!';
    }
  }

  guessCount++;
  guessField.value = '';
  guessField.focus();
}</pre>

<p>Sporo kodu, prawda? Przyjrzyjmy mu się bliżej:</p>

<ul>
 <li>Pierwsza linia w ciele funkcji (linia nr 2) deklaruje zmienną <code>userGuess</code> i przypisuje jej wartość równą obecnej wartości wpisanej do pola tekstowego. Jednocześnie weryfikujemy tę wartość wbudowaną metodą <code>Number()</code>, aby mieć pewność, że wartość ta jest na pewno liczbą.</li>
 <li>Następnie, w liniach 3–5, napotykamy nasz pierwszy blok kodu z instrukcją warunkową. Instrukcja warunkowa pozwala nam uruchamiać inne części kodu, w zależności od tego, czy dany warunek zostanie spełniony, czy też nie. Być może przypomina to trochę funkcję, ale nią nie jest. Najprostsza instrukcja warunkowa rozpoczyna się słowem kluczowym <code>if</code>, po którym następują nawiasy zwykłe i dalej nawiasy klamrowe. Wewnątrz nawiasów zwykłych umieszczamy nasz warunek. Jeśli warunek jest spełniony (wartość <code>true</code>), uruchamiany jest kod wewnątrz nawiasów klamrowych. Jeśli nie (wartość <code>false</code>)  - kod w nawiasach klamrowych nie jest uruchamiany i przechodzimy do następnej części kodu. W tym przypadku następuje sprawdzenie, czy zmienna <code>guessCount</code> jest równa <code>1</code> (tzn., czy jest to pierwsza odpowiedź gracza):
  <pre class="brush: js">guessCount === 1</pre>
  Jeśli tak jest zmieniamy tekst paragrafu (akapitu) <code>guesses</code> na "<samp>Previous guesses: ".</samp> W przeciwnym wypadku - nie.</li>
 <li>Linia nr 6 dodaje aktualną wartośc zmiennej <code>userGuess</code> na końcu akapitu <code>guesses</code>, oraz białą spację aby oddzielić od siebie kolejne odpowiedzi.</li>
 <li>Kolejna część kodu (linie 8 - 24) wykonują kilka operacji sprawdzenia:
  <ul>
   <li>Pierwsza instrukcja <code>if(){ }</code> sprawdza, czy odpowiedź gracza jest równa wartości zmiennej <code>randomNumber</code> wybaranej losowo na początku naszego programu. Jeśli tak jest, oznacza to, że gracz odpowiedział poprawnie i gra jest zakończona. Możemy zatem pogratulować zwycięzcy użwając sympatycznego zielonego koloru, wyczyścić zawartość akapitu informującego czy podana liczba jest za mała lub za duża (paragraf <code>lowOrHi</code>) i uruchomić funkcję <code>setGameOver()</code>, o której opowiemy sobie za chwilę.</li>
   <li>Bezpośrednio pod właśnie opisaną instrukcją rozpoczynamy kolejny test, używając struktury <code>else if(){ }</code>. Sprawdza ona, czy obecna próba odpowiedzi gracza jest ostatnią (równą 10). Jeśli tak jest, program wykona te same operacje, co poprzednio, z tą różnicą, że zamiast gratulacji ma wyświetlić napis "game over".</li>
   <li>Ostatnia z instrukcji warunkowych ma postać  <code>else { }</code> i zawiera kod uruchamiany tylko w przypadku, gdy żaden z poprzednich warunków nie został spełniony (tzn., że gracz nie odgadł liczby, ale pozostały mu jeszcze próby). W tym przypadku poinformujemy go, że się pomylił i przeprowadzimy kolejne sprawdzenie, czy wpisana przez niego liczba była większa czy mniejsza od prawidłowej odpowiedzi. Oczywiście wyświetlimy odpowiedni komunikat</li>
  </ul>
 </li>
 <li>Trzy ostatnie linie naszej funkcji <code>checkGuess(){ }</code> (linie 26–28) przygotowują grę do przyjęcia kolejnej odpowiedzi. W tym celu zostaje dodane 1 do wartości zmiennej <code>guessCount</code>, aby "zużyć" jedną próbę gracza (<code>++</code> oznacza zwiększenie o 1 - inkrementację), wyczyszczone zostaje pole formularza i - aby gracz wygodnie mógł wprowadzić swoją następną odpowiedź - ustawiony zostaje w tym polu oczekujący kursor.</li>
</ul>

<h3 id="Zdarzenia_events">Zdarzenia (events)</h3>

<p>Udało nam się całkiem zgrabnie zaimplementować funkcję <code>checkGuess()</code>, jednak na razie nie wykona ona żadnej akcji z tej prostej przyczyny, że jeszcze jej nie wywołaliśmy. Funkcja ta ma zostać wywołana przy naciśnięciu przycisku "Submit guess". W tym celu użyjemy <strong>zdarzenia</strong>. Zdarzenie jest tym, co dzieje się w przeglądarce (np. kliknięcie przycisku, załadowanie strony, odtwarzanie filmu, itd.) i czego możemy użyć  w celu wywołania konkretnego bloku kodu. Konstrukty, które "nasłuchują", czy miało miejsce zdarzenie nazywane są <strong>detektorami zdarzeń</strong> (<strong>event listeners</strong>), a wywoływane w odpowiedzi na nie bloki kodu - <strong>modułami obsługi zdarzeń (event handlers).</strong></p>

<p>Do swojej funkcji <code>checkGuess()</code> dodaj poniższą linię:</p>

<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>

<p>W ten sposób dodałeś detektor zdarzenia do przycisku <code>guessSubmit</code>. Jest to metoda, która ma dwie dane wejściowe (zwane <em>argumentami</em>) zapisane w formie  ciągu znaków: typ zdarzenia, które ma zajść (w tym przypadku <code>click</code>), oraz fragment kodu, który ma zostać uruchomiony poprzez to zdarzenie (funkcja <code>checkGuess()</code>). Nazwę funkcji piszemy bez cudzysłowia. {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p>

<p>Zapisz i odśwież swój kod. Powinien już prawie w pełni działać. Pozostała jeszcze jedna kwestia: gdy odgadniesz właściwą odpowiedź, lub wykorzystasz wszystkie próby odpowiedzi, gra zostanie przerwana, ponieważ jak dotąd nie zdefiniowaliśmy funkcji <code>setGameOver()</code>, która ma zostać wywołana w przypadku zakończenia gry. Dodajmy zatem brakującą część kodu, aby nasza gra zyskała wszystkie funkcjonalności.</p>

<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3>

<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p>

<pre class="brush: js">function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start new game';
  document.body.appendChild(resetButton);
  resetButton.addEventListener('click', resetGame);
}</pre>

<ul>
 <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li>
 <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "<samp>Start new game</samp>", and add it to the bottom of our existing HTML.</li>
 <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li>
</ul>

<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p>

<pre class="brush: js">function resetGame() {
  guessCount = 1;

  var resetParas = document.querySelectorAll('.resultParas p');
  for (var i = 0 ; i &lt; resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}</pre>

<p>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p>

<ul>
 <li>Puts the <code>guessCount</code> back down to 1.</li>
 <li>Clears all the information paragraphs.</li>
 <li>Removes the reset button from our code.</li>
 <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li>
 <li>Removes the background color from the <code>lastResult</code> paragraph.</li>
 <li>Generates a new random number so that you are not just guessing the same number again!</li>
</ul>

<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p>

<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p>

<h3 id="Loops">Loops</h3>

<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p>

<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p>

<pre class="brush: js">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>

<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p>

<ol>
 <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li>
 <li><strong>An exit condition</strong>: Here we have specified <code>i &lt; 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li>
 <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li>
</ol>

<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p>

<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p');
for (var i = 0 ; i &lt; resetParas.length ; i++) {
  resetParas[i].textContent = '';
}</pre>

<p>This code creates a variable containing a list of all the paragraphs inside <code>&lt;div class="resultParas"&gt;</code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p>

<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3>

<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>var resetButton;</code> line near the top of your JavaScript, then save your file:</p>

<pre class="brush: js">guessField.focus();</pre>

<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p>

<p>Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p>

<p>In this particular case, we first created a <code>guessField</code> variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:</p>

<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre>

<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p>

<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p>

<pre class="brush: js">guessField.focus();</pre>

<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> variable contains a reference to a {{htmlelement("p")}} element, and <code>guessCount</code> contains a number.</p>

<h3 id="Playing_with_browser_objects">Playing with browser objects</h3>

<p>Let's play with some browser objects a bit.</p>

<ol>
 <li>First of all, open up your program in a browser.</li>
 <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li>
 <li>Type in <code>guessField</code> and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li>
 <li>Now type in the following:
  <pre class="brush: js">guessField.value = 'Hello';</pre>
  The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li>
 <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li>
 <li>Now try entering the following line:
  <pre class="brush: js">guesses.value</pre>
  The browser will return <samp>undefined</samp>, because paragraphs don't have the <code>value</code> property.</li>
 <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this:
  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
 </li>
 <li>Now for some fun stuff. Try entering the below lines, one by one:
  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
guesses.style.fontSize = '200%';
guesses.style.padding = '10px';
guesses.style.boxShadow = '3px 3px 6px black';</pre>
  Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li>
</ol>

<h2 id="Finished_for_now...">Finished for now...</h2>

<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
 <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
</ul>