diff options
Diffstat (limited to 'files/pl/learn/javascript')
12 files changed, 2807 insertions, 0 deletions
diff --git a/files/pl/learn/javascript/asynchronous/index.html b/files/pl/learn/javascript/asynchronous/index.html new file mode 100644 index 0000000000..5a445f8b99 --- /dev/null +++ b/files/pl/learn/javascript/asynchronous/index.html @@ -0,0 +1,67 @@ +--- +title: Asynchronous JavaScript +slug: Learn/JavaScript/Asynchronous +tags: + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - NeedsTranslation + - Promises + - TopicStub + - async + - asynchronous + - await + - callbacks + - requestAnimationFrame + - setInterval + - setTimeout +translation_of: Learn/JavaScript/Asynchronous +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> modules before attempting this.</p> + +<p>If you are not familiar with the concept of asynchronous programming, you should definitely start with the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> article in this module. If you are, then you can probably skip to the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> module.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> + <dd> + <p>In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.</p> + </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> + <dd>In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> + <dd>Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> + <dd>Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> + <dd>Promises can be somewhat complex to set up and understand, and so modern browsers have implemented <code>async</code> functions and the <code>await</code> operator. The former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside <code>async</code> functions to wait for promises before the function continues. This makes chaining promises simpler and easier to read.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> + <dd>To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li> +</ul> diff --git a/files/pl/learn/javascript/asynchronous/introducing/index.html b/files/pl/learn/javascript/asynchronous/introducing/index.html new file mode 100644 index 0000000000..d7fda6b10b --- /dev/null +++ b/files/pl/learn/javascript/asynchronous/introducing/index.html @@ -0,0 +1,279 @@ +--- +title: Introducing asynchronous JavaScript +slug: Learn/JavaScript/Asynchronous/Introducing +translation_of: Learn/JavaScript/Asynchronous/Introducing +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div> + +<p class="summary">W tym artykule po krótce omówimy problemy związane z synchronicznością JavaScriptu i zapoznamy się z innymi asynchronicznymi technikami, które napotkasz, pokazując jak mogą pomóc rozwiązać wymienione problemy.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Wymagania:</th> + <td>Podstawy obsługi komputera, rzetelna znajomość podstaw JavaScriptu.</td> + </tr> + <tr> + <th scope="row">Cel:</th> + <td>Zapoznanie się z asynchronicznym JavaScriptem, czym się różni od synchronicznego JavaScriptu i w jakich przypadkach warto go użyć</td> + </tr> + </tbody> +</table> + +<h2 id="Synchroniczny_JavaScript">Synchroniczny JavaScript</h2> + +<p>By pomóc nam zrozumieć czym <strong><a href="/en-US/docs/Glossary/Asynchronous">asynchroniczny</a></strong><a href="/en-US/docs/Glossary/Asynchronous"> </a>JavaScript jest, musimy pierw zrozumieć czym jest <a href="/en-US/docs/Glossary/Synchronous">synchroniczny </a>JavaScript. Ten rozdział podsumuje informacje które widzieliśmy w porzednim artykule.</p> + +<p>Wiele funkcji, które widzieliśmy w poprzednich modułach do nauki jest synchroniczna - uruchamiasz kod, a wynik jest zwracany tak szybko jak tylko przeglądarka może to zrobić. Spójrz na prosty przykład (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">przykład użycia</a> i <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">kod źródłowy</a>):</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); +btn.addEventListener('click', () => { + alert('You clicked me!'); + + let pElem = document.createElement('p'); + pElem.textContent = 'This is a newly-added paragraph.'; + document.body.appendChild(pElem); +}); +</pre> + +<p>W tym bloku każda linia jest wykonywana po kolei:</p> + +<ol> + <li>Pobieramy referencje do elementu {{htmlelement("button")}}, który jest już zdefiniowany w DOM'ie.</li> + <li>Dodajemy obserwatora zdarzeń <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> do niego, więc kiedy przycisk zostanie naciśnięty: + <ol> + <li>Wiadomość w funkcji <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> pojawi się w przeglądarce.</li> + <li>Kiedy zamkniemy wiadomość, stworzymy element typu {{htmlelement("p")}}.</li> + <li>Dodamuy do niego zawartość tekstową.</li> + <li>Na końcu dodamy akapit do ciała dokumentu HTML.</li> + </ol> + </li> +</ol> + +<p>Podczas gdy jest wykonywana każda z tych operacji, nic innego nie może się wydarzyć - renderowanie jest wstrzymane. Dzieje się to z powodu, który został opisany w <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">poprzednim rozdziale</a>, <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_is_single_threaded">JavaScript jest jednowątkowy</a>. Na głównym wątku nie można wykonywać kilku rzeczy na raz. Wszelkie inne działania są zablokowane dopóki nie zakończy obecnej operacji.</p> + +<p>W powyższym przykładzie, po kliknięciu przycisku akapit nie pojawi się dopóki nie wciśniesz przycisku OK w powiadomieniu. Możesz spróbować to samemu:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><<span class="pl-ent">button</span>>Click me</<span class="pl-ent">button</span>></pre> +</div> + +<p>{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}</p> + +<div class="blockIndicator note"> +<p><strong>Notatka</strong>: Ważnym jest by pamiętać, iż <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code>, choć jest bardzo użyteczny by zademonstrować blokowanie wątku przez synchroniczne operacje, toteż jego użycie w prawdziwych aplikacjach jest okropne i wskazuje na brak wyczucia smaku.</p> +</div> + +<h2 id="Asynchroniczny_JavaScript">Asynchroniczny JavaScript</h2> + +<p>Z powodów wymienionych wcześniej (np. blokowanie wątku), wiele funkcji Web API wykonuje kod asynchronicznie. Zwłaszcze te funkcje, które pobierają zasoby z zewnętrznego urządzenia, takie jak pliki z internetu, łączą się z bazą danych i zwracają z niej dane, łączą się ze strumieniem wideo z kamerki internetowej albo wyświetlają obraz w urządzeniach VR.</p> + +<p>Dlaczego to jest problem pracować na kodzie synchronicznym? Spójrz na krótki przykład. Kiedy pobierasz obrazek z serwera, nie możesz od razu zwrócić wyniku. To znaczy, że poniższy pseudokod nie będzie działać: </p> + +<pre class="brush: js notranslate">let response = fetch('myImage.png'); // fetch is asynchronous +let blob = response.blob(); +// display your image blob in the UI somehow</pre> + +<p>Jest to spowodowane tym, że nie wiesz ile dokładnie czasu zajmie Tobie pobieranie obrazka i kiedy spróbujesz wykonać drugą linię kodu to zostanie zwrócony błąd (może czasami, może za każdym razem) ponieważ odpowiedź (<code>response</code>) z serwera nie jest jeszcze gotowy. Zamiast tego Twój kod musi poczekać zanim odpowiedź zostanie zwrócona nim spróbuje na niej wykonać operacje.</p> + +<p>Wyróżniamy dwa główne typy składni asynchronicznego kodu w JavaScript'cie. Starsza wywołanie zwrotne(<code>callback</code>) oraz nowsza obietnice (<code>promise</code>). W następnych rozdziałach kolejno przyjrzymy się każdej z nich.</p> + +<h2 id="Async_callbacks">Async callbacks</h2> + +<p>Async callbacks are functions that are specified as arguments when calling a function which will start executing code in the background. When the background code finishes running, it calls the callback function to let you know the work is done, or to let you know that something of interest has happened. Using callbacks is slightly old-fashioned now, but you'll still see them in use in a number of older-but-still-commonly-used APIs.</p> + +<p>An example of an async callback is the second parameter of the {{domxref("EventTarget.addEventListener", "addEventListener()")}} method (as we saw in action above):</p> + +<pre class="brush: js notranslate">btn.addEventListener('click', () => { + alert('You clicked me!'); + + let pElem = document.createElement('p'); + pElem.textContent = 'This is a newly-added paragraph.'; + document.body.appendChild(pElem); +});</pre> + +<p>The first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fired.</p> + +<p>When we pass a callback function as an argument to another function, we are only passing the function's reference as an argument, i.e, the callback function is <strong>not </strong>executed immediately. It is “called back” (hence the name) asynchronously somewhere inside the containing function’s body. The containing function is responsible for executing the callback function when the time comes.</p> + +<p>You can write your own function containing a callback easily enough. Let's look at another example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p> + +<pre class="brush: js notranslate">function loadAsset(url, type, callback) { + let xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = type; + + xhr.onload = function() { + callback(xhr.response); + }; + + xhr.send(); +} + +function displayImage(blob) { + let objectURL = URL.createObjectURL(blob); + + let image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +} + +loadAsset('coffee.jpg', 'blob', displayImage);</pre> + +<p>Here we create a <code>displayImage()</code> function that simply represents a blob passed to it as an object URL, then creates an image to display the URL in, appending it to the document's <code><body></code>. However, we then create a <code>loadAsset()</code> function that takes a callback as a parameter, along with a URL to fetch and a content type. It uses <code>XMLHttpRequest</code> (often abbreviated to "XHR") to fetch the resource at the given URL, then pass the response to the callback to do something with. In this case the callback is waiting on the XHR call to finish downloading the resource (using the <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> event handler) before it passes it to the callback.</p> + +<p>Callbacks are versatile — not only do they allow you to control the order in which functions are run and what data is passed between them, they also allow you to pass data to different functions depending on circumstance. So you could have different actions to run on the response downloaded, such as <code>processJSON()</code>, <code>displayText()</code>, etc.</p> + +<p>Note that not all callbacks are async — some run synchronously. An example is when we use {{jsxref("Array.prototype.forEach()")}} to loop through the items in an array (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">see it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">the source</a>):</p> + +<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus']; + +gods.forEach(function (eachName, index){ + console.log(index + '. ' + eachName); +});</pre> + +<p>In this example we loop through an array of Greek gods and print the index numbers and values to the console. The expected parameter of <code>forEach()</code> is a callback function, which itself takes two parameters, a reference to the array name and index values. However, it doesn't wait for anything — it runs immediately.</p> + +<h2 id="Promises">Promises</h2> + +<p>Promises are the new style of async code that you'll see used in modern Web APIs. A good example is the <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, which is basically like a modern, more efficient version of {{domxref("XMLHttpRequest")}}. Let's look at a quick example, from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a> article:</p> + +<pre class="brush: js notranslate">fetch('products.json').then(function(response) { + return response.json(); +}).then(function(json) { + products = json; + initialize(); +}).catch(function(err) { + console.log('Fetch problem: ' + err.message); +});</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You can find the finished version on GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">see the source here</a>, and also <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">see it running live</a>).</p> +</div> + +<p>Here we see <code>fetch</code><code>()</code> taking a single parameter — the URL of a resource you want to fetch from the network — and returning a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>. The promise is an object representing the completion or failure of the async operation. It represents an intermediate state, as it were. In essence, it's the browser's way of saying "I promise to get back to you with the answer as soon as I can," hence the name "promise."</p> + +<p>This concept can take practice to get used to; it feels a little like {{interwiki("wikipedia", "Schrödinger's cat")}} in action. Neither of the possible outcomes have happened yet, so the fetch operation is currently waiting on the result of the browser trying to complete the operation at some point in the future. We've then got three further code blocks chained onto the end of the <code>fetch()</code>:</p> + +<ul> + <li>Two <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> blocks. Both contain a callback function that will run if the previous operation is successful, and each callback receives as input the result of the previous successful operation, so you can go forward and do something else to it. Each <code>.then()</code> block returns another promise, meaning that you can chain multiple <code>.then()</code> blocks onto each other, so multiple asynchronous operations can be made to run in order, one after another.</li> + <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> block at the end runs if any of the <code>.then()</code> blocks fail — in a similar way to synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> blocks, an error object is made available inside the <code>catch()</code>, which can be used to report the kind of error that has occurred. Note however that synchronous <code>try...catch</code> won't work with promises, although it will work with <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, as you'll learn later on.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You'll learn a lot more about promises later on in the module, so don't worry if you don't understand them fully yet.</p> +</div> + +<h3 id="The_event_queue">The event queue</h3> + +<p>Async operations like promises are put into an <strong>event queue</strong>, which runs after the main thread has finished processing so that they <em>do not block</em> subsequent JavaScript code from running. The queued operations will complete as soon as possible then return their results to the JavaScript environment.</p> + +<h3 id="Promises_versus_callbacks">Promises versus callbacks</h3> + +<p>Promises have some similarities to old-style callbacks. They are essentially a returned object to which you attach callback functions, rather than having to pass callbacks into a function.</p> + +<p>However, promises are specifically made for handling async operations, and have many advantages over old-style callbacks:</p> + +<ul> + <li>You can chain multiple async operations together using multiple <code>.then()</code> operations, passing the result of one into the next one as an input. This is much harder to do with callbacks, which often ends up with a messy "pyramid of doom" (also known as <a href="http://callbackhell.com/">callback hell</a>).</li> + <li>Promise callbacks are always called in the strict order they are placed in the event queue.</li> + <li>Error handling is much better — all errors are handled by a single <code>.catch()</code> block at the end of the block, rather than being individually handled in each level of the "pyramid".</li> + <li>Promises avoid inversion of control, unlike old-style callbacks, which lose full control of how the function will be executed when passing a callback to a third-party library.</li> +</ul> + +<h2 id="The_nature_of_asynchronous_code">The nature of asynchronous code</h2> + +<p>Let's explore an example that further illustrates the nature of async code, showing what can happen when we are not fully aware of code execution order and the problems of trying to treat asynchronous code like synchronous code. The following example is fairly similar to what we've seen before (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">see it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">the source</a>). One difference is that we've included a number of {{domxref("console.log()")}} statements to illustrate an order that you might think the code would execute in.</p> + +<pre class="brush: js notranslate">console.log ('Starting'); +let image; + +fetch('coffee.jpg').then((response) => { + console.log('It worked :)') + return response.blob(); +}).then((myBlob) => { + let objectURL = URL.createObjectURL(myBlob); + image = document.createElement('img'); + image.src = objectURL; + document.body.appendChild(image); +}).catch((error) => { + console.log('There has been a problem with your fetch operation: ' + error.message); +}); + +console.log ('All done!');</pre> + +<p>The browser will begin executing the code, see the first <code>console.log()</code> statement (<code>Starting</code>) and execute it, and then create the <code>image</code> variable.</p> + +<p>It will then move to the next line and begin executing the <code>fetch()</code> block but, because <code>fetch()</code> executes asynchronously without blocking, code execution continues after the promise-related code, thereby reaching the final <code>console.log()</code> statement (<code>All done!</code>) and outputting it to the console.</p> + +<p>Only once the <code>fetch()</code> block has completely finished running and delivering its result through the <code>.then()</code> blocks will we finally see the second <code>console.log()</code> message (<code>It worked :)</code>) appear. So the messages have appeared in a different order to what you might expect:</p> + +<ul> + <li>Starting</li> + <li>All done!</li> + <li>It worked :)</li> +</ul> + +<p>If this confuses you, then consider the following smaller example:</p> + +<pre class="brush: js notranslate">console.log("registering click handler"); + +button.addEventListener('click', () => { + console.log("get click"); +}); + +console.log("all done");</pre> + +<p>This is very similar in behavior — the first and third <code>console.log()</code> messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button. The previous example works in the same way, except that in that case the second message is blocked on the promise chain fetching a resource then displaying it on screen, rather than a click.</p> + +<p>In a less trivial code example, this kind of setup could cause a problem — you can't include an async code block that returns a result, which you then rely on later in a sync code block. You just can't guarantee that the async function will return before the browser has processed the sync block.</p> + +<p>To see this in action, try taking a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">our example</a>, and changing the fourth <code>console.log()</code> call to the following:</p> + +<pre class="brush: js notranslate">console.log ('All done! ' + image.src + 'displayed.');</pre> + +<p>You should now get an error in your console instead of the third message:</p> + +<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre> + +<p>This is because at the time the browser tries to run the third <code>console.log()</code> statement, the <code>fetch()</code> block has not finished running so the <code>image</code> variable has not been given a value.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: For security reasons, you can't <code>fetch()</code> files from your local filesystem (or run other such operations locally); to run the above example locally you'll have to run the example through a <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">local webserver</a>.</p> +</div> + +<h2 id="Active_learning_make_it_all_async!">Active learning: make it all async!</h2> + +<p>To fix the problematic <code>fetch()</code> example and make the three <code>console.log()</code> statements appear in the desired order, you could make the third <code>console.log()</code> statement run async as well. This can be done by moving it inside another <code>.then()</code> block chained onto the end of the second one, or by simply moving it inside the second <code>then()</code> block. Try fixing this now.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you get stuck, you can <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">find an answer here</a> (see it <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">running live</a> also). You can also find a lot more information on promises in our <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a> guide, later on in the module.</p> +</div> + +<h2 id="Conclusion">Conclusion</h2> + +<p>In its most basic form, JavaScript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. But web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). This means that you can let your code do several things at the same time without stopping or blocking your main thread.</p> + +<p>Whether we want to run code synchronously or asynchronously will depend on what we're trying to do.</p> + +<p>There are times when we want things to load and happen right away. For example when applying some user-defined styles to a webpage you'll want the styles to be applied as soon as possible.</p> + +<p>If we're running an operation that takes time however, like querying a database and using the results to populate templates, it is better to push this off the main thread and complete the task asynchronously. Over time, you'll learn when it makes more sense to choose an asynchronous technique over a synchronous one.</p> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li> +</ul> diff --git a/files/pl/learn/javascript/building_blocks/index.html b/files/pl/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..364b91c45e --- /dev/null +++ b/files/pl/learn/javascript/building_blocks/index.html @@ -0,0 +1,44 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">W tym module kontynuujemy omówienie najważniejszych, podstawowych funkcji języka Javascript. Zwrócimy uwagę na często spotykane typy bloków kodu, takie jak: pętle, funkcje oraz zdarzenia. Mogłeś zobaczyć te treści w poprzednim module, jednak tutaj omówimy je bardziej szczegółowo.</p> + +<h2 id="Wymagania">Wymagania</h2> + +<p>Przed rozpoczęciem tego modułu powinieneś znać podstawy <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML-a</a> oraz <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS-a</a>. Powinieneś również przyswoić treści zawarte w poprzednim module - <a href="/pl/docs/Learn/JavaScript/Pierwsze_kroki">Pierwsze kroki w Javascript</a></p> + +<p>Before starting this module, you should have some familiarity with the basics of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, and you should have also worked through our previous module, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</p> + +<div class="note"> +<p><strong>Informacja</strong>: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu na którym nie masz możliwości tworzenia własnych plików, możesz wypróbować przedstawione przykłady w programach online, takich jak: <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Przewodnik">Przewodnik</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Podejmowanie decyzji w kodzie — warunki</a></dt> + <dd>W każdym języku programowania kod musi podejmować decyje i odpowiednio reagować w zależności od wyniku operacji. Przykładem jest gra, w której jeżeli liczba graczy jest równa 0, wtedy gra się kończy. Inną aplikacją poglądową może być aplikacja pogodowa - jeżeli będziemy używać aplikacji rano, wtedy zostanie nam pokazany wschód słońca. Podziwiać gwiazdy i księżyć będziemy mogli podczas trwania nocy. W tym artykule odkryjemy jak działają struktury warunkowe w Javascript</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Pętle</a></dt> + <dd>Czasami będziesz potrzebować, aby zadanie zostało wykonane więcej niż raz - przykładem może być tutaj wyświetlenie listy nazwisk. W programowaniu pętle wykonują świetną robotę. W tym artykule spojrzymy na nie w kontekście języka Javascript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funkcje — wielokrotne wykorzystanie jednego bloku kodu</a></dt> + <dd>Inną podstawową koncepcją w kodowaniu jest funkcja. Funkcje umożliwiają przechowywanie fragmentu kodu, który jest odpowiedzialny za jedno zadanie. Do uruchomienia tego bloku kodu jest potrzebna krótka komenda - zamiast wielokrotnego pisania tego samego kodu. W tym artykule zbadamy podstawowe pojęcia dotyczące funkcji, takie jak: składnia, sposób wywołania, definiowanie funkcji, zasięg i parametry.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Zbuduj własną funkcję</a></dt> + <dd>W przeciwieństwie do poprzednich, czysto teoretycznych artykułów, ten artykuł przedstawia praktyczne wykorzystanie funkcji. Tutaj otrzymasz zadanie praktyczne, w której napiszesz własną, niestandardową funkcję. W międzyczasie wyjaśnimy też kilka przydatnych szczegółów związanych z funkcjami.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Funkcje zwracają wartości</a></dt> + <dd>Jest jeszcze jedna zasadnicza koncepcja, którą przedstawimy Ci w naszym kursie. Powiązana jest z funkcjami - zwracanie wartości. Niektóre funkcje nie zwracają konkretnej wartości po wykonaniu, a inne tak. Ważne jest, abyś zrozumiał jakie mogą być ich wartości, jak możesz je użyć w swoim kodzie oraz jak sprawdzić by Twoje własne funkcje zwróciły pomocne wartości.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Wprowadzenie do zdarzeń</a></dt> + <dd>Wydarzenia są akcjami, które występują w aplikacji podczas programowania, a które aplikacja pokaże Ci, abyś mógł na nie zareagować, jeżeli jest taka potrzeba. Przykładem jest tutaj sytuacja, w której użytkownik naciska przycisk na stronie internetowej, a Ty chciałbyś powiązać to wydarzenie z wyświetleniem informacyjnego okna. W tym ostatnim artykule poruszymy kilka ważnych tematów związanych z wydarzeniami i zobaczymy jak działają w przeglądarkach internetowych.</dd> +</dl> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Poniższe podsumowanie sprawdzi Twoje rozumienie podstaw języka Javascript z powyższego przewodnika.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeria zdjęć</a></dt> + <dd>Teraz, gdy przyjrzeliśmy się podstawowym elementom składowym JavaScript, przetestujemy Twoją wiedzę na temat pętli, funkcji, warunków i zdarzeń, budując dość popularny element, który zobaczysz na wielu stronach internetowych - galeria zdjęć z obsługą JavaScript .</dd> +</dl> diff --git a/files/pl/learn/javascript/client-side_web_apis/index.html b/files/pl/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..0d8a6ed2cd --- /dev/null +++ b/files/pl/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,37 @@ +--- +title: Interfejsy API działające po stronie klienta +slug: Learn/JavaScript/Client-side_web_APIs +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Pisząc skrypty JavaScript po stronie klienta dla stron internetowych lub aplikacji szybko napotkamy Interfejsy Programowania Aplikacji (ang. <strong>Application Programming Interface</strong> - <strong>API</strong>). API to są funkcje programistyczne do manipulowania różnymi aspektami przeglądarki i systemu operacyjnego, na którym działa strona, lub manipulowania danymi z innych stron lub serwisów. W tym module dowiemy się czym są interfejsy API i jak korzystać z najbardziej popularnych interfejsów API, które często można napotkać w swoich pracach rozwojowych. </p> + +<h2 id="Wymagania_wstępne">Wymagania wstępne</h2> + +<p>By w pełni skorzystać z tego modułu, powinno się przejść przez poprzednie moduły JavaScript z tej serii (<a href="/pl/docs/Learn/JavaScript/Pierwsze_kroki">Pierwsze kroki w JavaScript</a>, <a href="pl/docs/Learn/JavaScript/Building_blocks">Klocki JavaScript</a>, i <a href="pl/docs/Learn/JavaScript/Obiekty">Wprowadzenie do obiektów JavaScript</a>). Moduły te, tak czy inaczej wymagają wielokrotnego użycia prostego API ponieważ trudno jest napisać przykłady JavaScriptu po stronie klienta, które wykonują bez nich coś uzytecznego! Wchodzimy tutaj na wyższy poziom, zkaładając znajomość podstawowego języka JavaScript i zgłębiając często używane interfejsy webowe API trochę bardziej szczegółowo.</p> + +<p>Podstawowa wiedza o <a href="/en-US/docs/Learn/HTML">HTML</a> i <a href="/en-US/docs/Learn/CSS">CSS</a> będzie również użyteczna.</p> + +<div class="note"> +<p><strong>Uwaga</strong>: Jeśli pracujesz na urządzeniu, którym nie masz możliwości tworzenia swoich plików, możesz wypróbować przykłady kodu (większość z nich) w internetowych programach kodujących takich jak <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Przewodnik">Przewodnik</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Wprowadzenie do webowych interfejsów API</a></dt> + <dd>First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulowanie dokumentami</a></dt> + <dd>When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the {{domxref("Document")}} object. In this article, we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Pobieranie danych z serwera</a></dt> + <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Interfejsy API innych twórców</a></dt> + <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Rysowanie grafiki</a></dt> + <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to the Canvas API, and further resources to allow you to learn more.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Interfejsy API wideo i audio</a></dt> + <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt> + <dd>Modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.</dd> +</dl> diff --git a/files/pl/learn/javascript/index.html b/files/pl/learn/javascript/index.html new file mode 100644 index 0000000000..9109a05447 --- /dev/null +++ b/files/pl/learn/javascript/index.html @@ -0,0 +1,78 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Dla początkujących + - JavaScript + - Kodowanie + - Początkujący +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} <span lang="pl">To język programowania, który pozwala na zaimplementowanie skomplikowanych rzeczy na stronach internetowych. Za każdym razem, gdy strona internetowa robi coś więcej ponad wyświetlanie statycznych informacji, na które możesz popatrzeć - np. wyświetlanie bieżących aktualizacji treści, interaktywnych map, animowanych obrazów, Grafiki 2D/3D lub przewijanie wideo itp. - można założyć, że prawdopodobnie jest w to zaangażowany JavaScript.</span></p> + +<h2 id="Ścieżka_nauki">Ścieżka nauki</h2> + +<p><span lang="pl">JavaScript jest trudniejszy do nauczenia się niż powiązane technologie, takie jak</span> <a href="/pl/docs/Learn/HTML">HTML</a> oraz <a href="/pl/docs/Learn/CSS">CSS</a>. <span lang="pl">Zanim spróbujesz nauczyć się JavaScript, zalecamy zapoznanie się z przynajmniej tymi dwoma technologiami, a być może innymi. Zacznij od pracy poprzez następujące moduły:</span></p> + +<ul> + <li><a href="/pl/docs/Learn/Getting_started_with_the_web">Początek w Sieci</a></li> + <li><a href="/pl/docs/Web/Guide/HTML/Introduction">Wprowadzenie do HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a></li> +</ul> + +<p><span lang="pl">Posiadanie wcześniejszego doświadczenia z innymi językami programowania może również pomóc. </span></p> + +<p><span lang="pl">Po zapoznaniu się z podstawami JavaScript powinieneś móc uczyć się o bardziej zaawansowanych kwestiach, takich jak:</span></p> + +<ul> + <li><span lang="pl">Pogłębianie wiedzy o JavaScript, jak uczy</span> <a href="/pl/docs/Web/JavaScript/Guide">poradnik JavaScript</a></li> + <li><a href="/en-US/docs/Web/API">API Stron Internetowych</a></li> +</ul> + +<h2 id="Moduły">Moduły</h2> + +<p><span lang="pl">Ten temat zawiera następujące moduły, w sugerowanej kolejności ich pracy.</span></p> + +<dl> + <dt><a href="/pl/docs/Learn/JavaScript/First_steps">Pierwsze kroki z JavaScript</a></dt> + <dd><span lang="pl">W naszym pierwszym module JavaScript najpierw udzielamy odpowiedzi na podstawowe pytania, na przykład "co to jest JavaScript?", "Jak to wygląda?" i "co można zrobić" przed przejściem do pierwszego doświadczenia Pisania JavaScript. Następnie omówimy szczegółowo kluczowe funkcje języka JavaScript, takie jak zmienne, łańcuchy, liczby i tablice.</span></dd> + <dt><a href="/pl/docs/Learn/JavaScript/Building_blocks">Bloki budowy JavaScript</a></dt> + <dd><span lang="pl">W tym module kontynuujemy omówienie najważniejszych podstawowych funkcji języka JavaScript, zwracając uwagę na często spotykane rodzaje bloków kodu, takie jak stwierdzenia warunkowe, pętle, funkcje i zdarzenia. Widziałeś to już wcześniej, ale tylko cząstkowo - tutaj omówimy to wszystko jednoznacznie.</span></dd> + <dt><a href="/pl/docs/Learn/JavaScript/Objects">Wprowadzenie do obiektów JavaScript</a></dt> + <dd><span lang="pl">W JavaScript większość rzeczy to obiekty, od podstawowych funkcji JavaScript, takich jak ciągi znaków i tablice do interfejsów API przeglądarki na szczycie JavaScript. Można nawet tworzyć własne obiekty, aby zawęzić funkcje i zmienne do wydajnych pakietów. W JavaScript jest ważne, aby zrozumieć, czy chcesz poszerzyć swoją znajomość języka i napisać bardziej wydajny kod, dlatego udostępniliśmy ten moduł, aby Ci pomóc. Tutaj ukazujemy szczegółowo teorię obiektu i składnię, spójrzmy na sposób tworzenia własnych obiektów i wyjaśnijmy, jakie dane JSON są i jak z nimi pracować.</span></dd> +</dl> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asynchroniczny JavaScript</a></dt> + <dd> + <p>W tym module przyjrzymy się asynchronicznemu skryptowi JavaScript, dowiemy się dlaczego jest on ważny i jak można go wykorzystać do skutecznego radzenia sobie z potencjalnymi operacjami blokującymi, takimi jak pobieranie zasobów z serwera.</p> + </dd> +</dl> + +<dl> + <dt><a href="/pl/docs/Learn/JavaScript/Client-side_web_APIs">Interfejsy sieciowe stroną klienta</a></dt> + <dd><span lang="pl">Podczas pisania JavaScript po stronie klienta w witrynach internetowych lub w aplikacjach nie zajdzie się daleko jeszcze przed rozpoczęciem korzystania z interfejsów API - interfejsów do manipulowania różnymi aspektami przeglądarki i systemu operacyjnego, na którym działa witryna, a nawet danych z innych stron internetowych lub usług. W tym module zbadamy, jakie interfejsy API są i jak posługiwać się najpopularniejszymi interfejsami API często spotykanymi w pracach rozwojowych.</span></dd> +</dl> + +<h2 id="Rozwiązywanie_typowych_problemów_z_JavaScript"><span lang="pl">Rozwiązywanie typowych problemów z JavaScript</span></h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Użyj Javascript do rozwiązywania typowych problemów</a> <span lang="pl">zawiera linki do sekcji z treściami wyjaśniającymi sposób korzystania z JavaScript w celu rozwiązania bardzo typowych problemów podczas tworzenia strony internetowej.</span></p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<dl> + <dt><a href="/pl/docs/Web/JavaScript">JavaScript na MDN</a></dt> + <dd><span lang="pl">Główny punkt wejścia do podstawowej dokumentacji JavaScript na MDN - tutaj znajdziesz obszerne dokumenty referencyjne dotyczące wszystkich aspektów języka JavaScript oraz niektóre zaawansowane ćwiczenia skierowane do doświadczonych programistów.</span></dd> +</dl> + +<dl> + <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">Podstawy JavaScript w EXLskills</a></dt> + <dd>Ucz się JavaScript za darmo dzieki kursowi open-source EXLskills course, który zawiera wszystko, czego potrzebujesz, aby zacząć budować aplikacje w JS.</dd> +</dl> + +<dl> + <dt><a href="https://www.youtube.com/user/codingmath">Matematyka kodowania</a></dt> + <dd><span lang="pl">Doskonała seria instruktażowych materiałów wideo, do nauki matematyki, którą musisz zrozumieć by być efektywnym programistą,</span> zrobiona przez: <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> diff --git a/files/pl/learn/javascript/obiekty/index.html b/files/pl/learn/javascript/obiekty/index.html new file mode 100644 index 0000000000..9952e760a3 --- /dev/null +++ b/files/pl/learn/javascript/obiekty/index.html @@ -0,0 +1,47 @@ +--- +title: Wprowadzenie do obiektów JavaScript +slug: Learn/JavaScript/Obiekty +tags: + - JavaScript + - Objekt + - Początkujący + - samouczek +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">W JavaScript większość rzeczy jest obiektami, począwszy od najbardziej fundamentalnych rzeczy jak stringi czy tablice, na API przeglądarek zbudowanym na szczycie JavaScriptu kończąc. Możesz nawet stworzyć własne obiekty do hermetyzowania powiązanych funkcji i zmiennych w "pakietach", które będą działały jako podręczne kontenery. Obiektowość w JavaScripcie jest kluczowa do dalszego zrozumienia języka, dlatego też przygotowaliśmy ten moduł, aby ci pomóc. Na początku nauczymy cię teorii obiektowości i składni, później popatrzymy na to, jak tworzyć własne obiekty.</p> + +<h2 id="Wymagania">Wymagania</h2> + +<p>Zanim rozpoczniesz ten moduł powinieneś być nieco zaznajomiony z HTML i CSS. Radzimy przejść przez moduły <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Wprowadzenie do HTML</a> i <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS</a> zanim rozpoczniesz naukę JavaScriptu.</p> + +<p>Powinieneś również być nieco zaznajomiony z podstawami JavaScript zanim zaczniesz zgłębiać szczegóły dotyczące obiektów w tym języku. Zanim rozpoczniesz ten moduł zapoznaj się z <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript pierwsze kroki</a> i <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript budowanie bloków</a>.</p> + +<div class="note"> +<p><strong>Uwaga</strong>: Jeśli pracujesz na komputerze/tablecie/innym urządzeniu gdzie nie masz możliwości tworzenia swoich własnych plików, powinieneś wypróbować (większość) przykładów kodu w aplikacji webowej takiej jak <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Przewodniki">Przewodniki</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></dt> + <dd>W pierwszym artykule dotyczącym obiektów JavaScript przyjrzymy się podstawom składni dla obiektów i powrócimy do tematów, które przerabialiśmy wcześniej. Powtórzymy niektóre fakty, które wskazują, że wiele właściwości, którymi się już zajmowałeś, to faktycznie obiekty.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></dt> + <dd>Po zapoznaniu się z podstawami skupimy się teraz na obiektowym JavaScript (OOJS) - ten artykuł przedstawia podstawowe spojrzenie na teorię programowania obiektowego (OOP), następnie bada, w jaki sposób JavaScript emuluje klasy obiektów za pomocą funkcji konstruktora, oraz jak tworzone są instancje obiektów.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></dt> + <dd>Prototypy są mechanizmem, za pomocą którego obiekty JavaScript dziedziczą cechy od siebie i działają inaczej niż mechanizmy dziedziczenia w klasycznych obiektowych językach programowania. W tym artykule badamy tę różnicę, wyjaśniamy, jak działają łańcuchy prototypów, i przyglądamy się, w jaki sposób można użyć właściwości prototypu do dodania metod do istniejących konstruktorów</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Dziedziczenie w JavaScript</a></dt> + <dd>Po wyjaśnieniu większości pikantnych szczegółów OOJS, artykuł pokazuje, jak tworzyć "potomne" klasy obiektów (konstruktory), które dziedziczą cechy z ich klas "nadrzędnych". Ponadto przedstawiamy poradę dotyczącą tego, kiedy i gdzie możesz korzystać z OOJS</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Praca z JSON</a></dt> + <dd>JavaScript Object Notation (JSON) to standardowy format tekstowy służący do reprezentowania danych strukturalnych, oparty na składni obiektów JavaScript, ktory jest powszechnie używany do reprezentowania i przesyłania danych w witrynach internetowych (t.j. wysyłanie niektórych danych z serwera do klienta, dzięki czemu mogą one być wyświetlane na stronie internetowej). Spotkasz to dość często, więc w tym artykule podajemy wszystko, czego potrzebujesz, aby pracować z JSON przy użyciu JavaScript, w tym analizować JSON w celu uzyskania dostępu do zawartych w nim danych oraz pisanie własnego JSON.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Praktyka budowania obiektów</a></dt> + <dd>W poprzednich artykułach zapoznaliśmy się ze wszystkimi niezbędnymi teoriami obiektów JavaScript i szczegółami składni, co daje Ci solidną podstawę do rozpoczęcia. W tym artykule zagłębiamy się w praktyczne ćwiczenie, dając Ci trochę więcej praktyki w budowaniu niestandardowych obiektów JavaScript, które tworzą coś ciekawego i kolorowego - jakieś kolorowe podskakujące kuleczki.</dd> +</dl> + +<h2 id="Oceny">Oceny</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Dodajemy nowe funkcje do naszego demo z odbijającymi się piłkami</a></dt> + <dd>W tej części, jako punkt wyjścia, należy użyć demo odbijających się piłek z poprzedniego artykułu i dodać do niego kilka nowych i interesujących funkcji.</dd> +</dl> diff --git a/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html b/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html new file mode 100644 index 0000000000..0d0f49c69a --- /dev/null +++ b/files/pl/learn/javascript/pierwsze_kroki/a_first_splash/index.html @@ -0,0 +1,687 @@ +--- +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"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Number guessing game<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></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"></</span>style</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Number guessing game<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></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"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>Enter a guess: <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></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"><</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">></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"><</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"></</span>script</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></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"><script> + + // Twój kod JavaScript + +</script> +</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"><p class="guesses"></p> +<p class="lastResult"></p> +<p class="lowOrHi"></p></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"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></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"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + 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; + } + + </style> + </head> + <body> + + + </body> + + <script> + 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 = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + inputDiv.focus(); + + if(document.querySelectorAll('div').length > 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(); + + </script> +</html></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><</code></td> + <td>Mniejsze od</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>Większe od</td> + <td><code>10 > 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 < randomNumber) { + lowOrHi.textContent = 'Last guess was too low!'; + } else if(userGuess > 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 < 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 < 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 < 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 < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>This code creates a variable containing a list of all the paragraphs inside <code><div class="resultParas"></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> diff --git a/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html b/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html new file mode 100644 index 0000000000..1a88f2b797 --- /dev/null +++ b/files/pl/learn/javascript/pierwsze_kroki/co_poszlo_nie_tak/index.html @@ -0,0 +1,257 @@ +--- +title: Co poszło nie tak? Rozwiązywanie problemów w JavaScript +slug: Learn/JavaScript/Pierwsze_kroki/Co_poszlo_nie_tak +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Kiedy w poprzednim artykule budowałeś grę "Zgadnij numer", mogłeś stwierdzić, że ona po prostu nie działała. Nie martw się - ten artykuł ma na celu zatrzymanie cię przed wyrywaniem sobie włosów nad takimi problemami poprzez dostarczenie ci narzędzi do znajdowania i naprawienia błędów w programach napisanych w JavaScript.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Wymagania wstępne:</th> + <td>Podstawowa znajomość obsługi komputera, podstawowe rozumenie HTML i CSS oraz wiedza, czym jest JavaScript.</td> + </tr> + <tr> + <th scope="row">Cel:</th> + <td>Zdobycie umiejętności i odwagi do rozwiązywania prostych problemów w twoim własnym kodzie.</td> + </tr> + </tbody> +</table> + +<h2 id="Typy_błędów">Typy błędów</h2> + +<p>Każdy błąd w kodzie można w ogólności podzielić na dwa typy:</p> + +<ul> + <li><strong>Błędy składniowe: </strong> Są to literówki w twoim kodzie, które albo sprawią, że program w ogóle się nie uruchomi, albo przestanie działać w pewnym momencie - zwykle zostaną podane także wiadomości o błędzie. Zwykle naprawa ich nie jest trudno, tak długo jak znasz odpowiednie narzędzia i wiesz, co znaczą poszczególne komunikaty błędów!</li> + <li><strong>Błędy logiczne:</strong> Są to błedy, gdy składnia jest poprawna, ale kod zachowuje się inaczej niż chciałeś, aby to robił. Znaczy to, że program uruchamia się poprawnie, ale daje niepoprawne wyniki. Są to trudne błędy do naprawienia, gdyż często nie mają żadnej informacji, która by naprowadziła na źródło błędu.</li> +</ul> + +<p>No dobra, nie jest to <em>tak</em> proste - istnieją także inne czynniki, które różnicują błędy. Powyższa klasyfikacja wystarczy jednak w tym początkowym etapie twojej kariery. W kolejnej częsci przyjrzymy się tym dwóm typom błędów.</p> + +<h2 id="Błędogenny_przykład">Błędogenny przykład</h2> + +<p>Zaczniemy od naszej poprzedniej gry "Zgadnij numer" - tylko że tym razem będziemy zajmować się wersją w której umyślnie ukryto trochę błędów. Odwiedź GitHub i wykonaj lokalną wersję <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (Zobacz live demo <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">tutaj</a>).</p> + +<ol> + <li>Aby zacząć, otwój lokalną wersję w swoim ulubionym edytorze tekstu i w twojej przeglądarce.</li> + <li>Spróbuj zagrać w tę - odkryjesz że kiedy wciskasz przycisk "Zgadnij" - on po prostu nie działa!</li> +</ol> + +<div class="note"> +<p><strong>Notatka:</strong> Równie dobrze możesz mieć swoją wersję gry, która ci nie działa. Wiemy, że może chciałbyś ją naprawić, ale chcemy, abyś wykorzystał naszą wersję, dzięki czemu nauczysz się technik, których tu uczymy. Następnie możesz wykorzystać je do naprawienia własnego kodu.</p> +</div> + +<p>W tym miejscu spójrzmy na narzędzia developerskie, dokładniej konsolę debugowania, aby sprawdzić, czy występują błędy składniowe, a jeżeli tak - naprawić je. Poniżej znajdują się instrukcje, jak tego dokonać.</p> + +<h2 id="Naprawa_błędów_składniowych">Naprawa błędów składniowych</h2> + +<p>Wcześniej pokazaliśmy kilka prostych komend JavaScript, które wpisałeś do <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">konsoli JavaScript w narzędziach deweloperskich </a> (jeżeli nie pamiętasz jak je otworzyć, kliknij w link, aby sobie przypomnieć). Jej bardzo przydatną funkcją jest wyświetlanie błędów w momencie gdy interpreter JavaScript przeglądarki napotka na błąd. Wyruszmy na poszukiwanie błędów!</p> + +<ol> + <li>Idź do karty z otwartą stroną <code>number-game-errors.html</code> i otwórz konsolę JavaScript. Znajdziesz tam błąd:<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>Jest to prosty błąd do wytropienia, a przeglądarka daje wiele przydatnych wskazówek: (powyższy screen jest z Firefoxa, ale inne przeglądarki pokazują podobne informacje). Od lewej do prawej znajdują się: + <ul> + <li>Czerwony "x" dla pokazania, że jest to błąd.</li> + <li>Wiadomość błędu dla pokazania, co poszło nie tak: "TypeError: guessSubmit.addeventListener is not a function"</li> + <li>Link do "Learn More", który przekierowuje do strony na MDN, która wyjaśnia szczegółowo dany błąd.</li> + <li>Nazwa pliku JavaScript, która po kliknięciu kieruje do karty debuggera. Jeżeli klikniesz go, pokaże ci się dokładna linia z danym błędem.</li> + <li>Numer linii oraz znak, gdzie wystąpił błąd. W tym przypadku linia 86, znak 3.</li> + </ul> + </li> + <li>Spoglądając na linię 86, zobaczymy następujący kod: + <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre> + </li> + <li>The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn <em>name-of-feature</em>" on your favourite search engine. Here's a shortcut to save you some time in this instance: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li> + <li>So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight different in spelling or casing will cause an error. Changing <code>addeventListener</code> to <code>addEventListener</code> should fix this. Do this now.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> reference page for more details about this error.</p> +</div> + +<h3 id="Błędy_składniowe_-_podejście_drugie">Błędy składniowe - podejście drugie</h3> + +<ol> + <li>Zapisz stronę i odśwież - zobaczysz, że błąd zniknął.</li> + <li>Spróbuj teraz wpisać liczbę. Po kliknięciu na przycisk "Wyślij" zobaczysz... inny błąd!<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>Tym razem błąd to "TypeError: lowOrHi is null", on line 78. + <div class="note"><strong>Notatka</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> jest specjalną wartością, która oznacza "nic" bądź "brak wartości" A więc <code>lowOrHi</code> został zadeklarowany i zainicjalizowany - ale wartością pustą.</div> + + <div class="note"><strong>Notatka</strong>: Ten błąd pojawił się jak tylko strona została załadowana, dlatego że błąd wystąpił podczas wykonywania funkcji (w środku bloku <code>checkGuess() { ... }</code>). Jak dowiesz się później bardziej szczegółowo, kod wewnątrz funkcji jest wykonywany w innej przestrzeni niż kod poza funkcją. W tym przypadku kod nie został uruchomiony, a błąd wyrzucony do momentu, aż funkcja <code>checkGuess()</code> nie dotarła do linijki 86.</div> + </li> + <li>Popatrz na linię 78. Zobaczysz tam następujący kod: + <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre> + </li> + <li>W tej linii następuje próba ustawienia właściwości <code>textContent</code> zmiennej <code>lowOrHi</code> na tekst, ale to się nie powiodło ze względu na fakt, że <code>lowOrHi</code> nie jest tym, czego oczekujemy. Trzeba się dowiedzieć, dlaczego tak jest - wyszukajmy inne wystąpienia <code>lowOrHi</code>. Najwcześniejsze wystąpienie znajdziemy w linii 48: + <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre> + </li> + <li>W tej linii próbujemy przypisać zmiennej referencję do elementu w dokumencie HTML. Sprawdźmy, czy wartością tej zmiennej jest null po wykonaniu tej linijki. Aby to zrobić, dodaj ten kod w linii 49: + <pre class="brush: js">console.log(lowOrHi);</pre> + + <div class="note"> + <p><strong>Notatka</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> jest bardzo użyteczną funkcją do debugowania, której celem jest wypisanie wartości zmiennej do konsoli. W tym przypadku wypisze ona wartość<code>lowOrHi</code> do konsoli w takiej postaci, w jakiej została ona ustawiona w linii 48.</p> + </div> + </li> + <li>Zapisz plik i odśwież stronę. Po przejściu do konsoli zobaczysz efekt wywołania <code>console.log()</code>.<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">Możemy być pewni - w tym momencie wartością <code>lowOrHi</code> jest <code>null</code>. Oznacza to, że błąd jest zdecydowanie związany z linią 48.</li> + <li>Pomyślmy - co może być tutaj problemem? W linii 48 używamy <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> aby otrzymać referencję do elementu. Odbywa się to poprzez podanie selektora CSS jako parametr funkcji. W dalszej częsci pliku można znaleźć paragraf, którego referencji potrzebujemy: + <pre class="brush: js"><p class="lowOrHi"></p></pre> + </li> + <li>To oznacza, że potrzebujemy tu selektora klasy. Zaczyna się on kropką (.) - ale selektor, którego używamy w <code>querySelector()</code> (linia 48) nie ma kropki. To może być nasz błąd! Spróbuj zmienić <code>lowOrHi</code> na <code>.lowOrHi</code> w linii 48.</li> + <li>Zapisz i odśwież stronę. Teraz <code>console.log()</code> powinien wyświetlić element <code><p></code>, którego poszukiwaliśmy. Uff! Kolejny błąd naprawiony! Możesz już usunąć linię z <code>console.log()</code> (albo zostawić ją odniesienie na później - jak uważasz).</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> reference page for more details about this error.</p> +</div> + +<h3 id="Błędy_składniowe_-_podejście_trzecie">Błędy składniowe - podejście trzecie</h3> + +<ol> + <li>Teraz gdy spróbujesz zagrać w grę, powinno Ci się więcej powieść - gra będzie grywalna, do momentu końca gry - nieważne, czy poprzez znalezienie właściwej liczby czy skończenie się żyć.</li> + <li>W tym miejscu gra nie działa, a w konsoli pojawie się ten sam błąd, co na początku - "TypeError: resetButton.addeventListener is not a function"! Tym razem jednak jest wywoływany z linii 94.</li> + <li>Spójrzmy na linię 94. Można łatwo zauważyć, że mamy do czynienia z tym samym błędem, co wcześniej - wystarczy zmienić <code>addeventListener</code> na <code>.addEventListener</code>. Zrób to teraz.</li> +</ol> + +<h2 id="Błąd_logiczny">Błąd logiczny</h2> + +<p>Na tym etapie gra powinna być grywalna, ale po kilku uruchomieniach można łatwo zauważyć, że "losowa" liczba to zawsze 0 bądź 1. Nie jest to to, czego można od takiej gry oczekiwać!</p> + +<p>Musi to być jakiś problem z logiką aplikacji - gra nie zwraca błędu, jednak nie zachowuje się jak powinna.</p> + +<ol> + <li>Znajdźmy zmienną <code>randomNumber</code> i linie, w których zmienna jest zadeklarowana i jej wartość ustalona. To miejsce znajduje się w okolicach linii 44: + + <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre> + A linia, która generuje losową liczbę przed każdą grą, to linia 113: + + <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre> + </li> + <li>Aby sprawdzić czy to z tymi liniami jest problem, użyjmy naszego starego przyjaciela - polecenia <code>console.log()</code>. Wstaw następujący kod bezpośrednio pod wcześniej wymienionymi dwiema liniami kodu: + <pre class="brush: js">console.log(randomNumber);</pre> + </li> + <li>Zapisz i odśwież, następnie zagraj kilka razy - można zauważyć, że za każdym wywołaniem <code>randomNumber</code> jest równe 1.</li> +</ol> + +<h3 id="Praca_nad_logiką">Praca nad logiką</h3> + +<p>W celu naprawy tego błędu, należy najpierw pomyśleć, jak działa ten kod. Na samym początku wywołujemy <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, który generuje zmiennoprzecinkową liczbę pomiędzy 0 i 1, na przykład 0.5675493843.</p> + +<pre class="brush: js">Math.random()</pre> + +<p>Następnie uzyskaną liczbę podajemy jako parametr funkcji <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, której zadanie jest zaokrąglenie uzyskanej w parametrze liczby do największej liczby całkowitej równej bądź mniejszej od parametru. Następnie dodajemy 1 do wyniku:</p> + +<pre>Math.floor(Math.random()) + 1</pre> + +<p>Zaokrąglanie liczby zmiennoprzecinkowej w zakresie od 0 do 1 zawsze da 0 . Dodanie do niej 1 da więc wynik 1. Aby naprawić wynik zgodnie z wymaganiami, pomnóżmy naszą losową liczbę przez 100. Sprawi to, że dostaniemy losową liczbę od 0 do 99:</p> + +<pre class="brush: js">Math.floor(Math.random()*100);</pre> + +<p>Jeżeli dodamy 1, dostaniemy liczbę z przedziału od 1 do 100:</p> + +<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre> + +<p>Zmień obie linie zgodnie z tym wzorem, zapisz i odśwież stronę - gra powinna zachowywać się tak jak od niej tego oczekujemy!</p> + +<h2 id="Inne_popularne_błędy">Inne popularne błędy</h2> + +<p>Istnieją inne popularne błędy, na które natkniesz się w swoim kodzie. Ta sekcja zawiera listę najpopularniejszych z nich.</p> + +<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3> + +<p>Ten błąd oznacza, że zapomniałeś o średniku na końcu linii. Czasem może jednak być bardziej enigmatyczny. Przykładem może być zmiana tej linii:</p> + +<pre class="brush: js">var userGuess = Number(guessField.value);</pre> + +<p>na</p> + +<pre class="brush: js">var userGuess === Number(guessField.value);</pre> + +<p>Ten kod wyrzuca błąd, gdyż myśli, że chcesz zrobić coś innego. Musisz być pewny, że nie mieszasz znaku przypisania (<code>=</code>) — zapisuje on wartość w zmiennej, z operatorem dokładnego porównania, który testuje czy jedna wartość jest dokładnie równa drugiej - zwraca ona wynik w postaci zmiennej logicznej <code>true</code>/<code>false</code>.</p> + +<div class="note"> +<p><strong>Notatka</strong>: Aby dowiedzieć się więcej o tym błędzie, odwiedź naszą stronę <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a>.</p> +</div> + +<h3 id="Program_zawsze_twierdzi_że_wygrałeś_niezależnie_od_wprowadzonej_liczby">Program zawsze twierdzi, że wygrałeś, niezależnie od wprowadzonej liczby</h3> + +<p>Może to być objawem pomieszania operatorów przypisania i dokładnego porównania. Przykładowo jeżeli byśmy zmienili tę linię w funkcji <code>checkGuess()</code>:</p> + +<pre class="brush: js">if (userGuess === randomNumber) {</pre> + +<p>na</p> + +<pre class="brush: js">if (userGuess = randomNumber) {</pre> + +<p>ten test zawsze zwróciłby <code>true</code> (prawdę), co sprawiłoby, że program za każdym razem twierdziłby, że gra została przez Ciebie wygrana. Uważaj na błędy!</p> + +<h3 id="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3> + +<p>Ten błąd jest prosty — oznacza po prostu, że zapomniałeś dodać nawias zamykający na końcu funkcji/wywołania metody.</p> + +<div class="note"> +<p><strong>Notatka</strong>: Zobacz naszą stronę referencyjną: <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>, aby dowiedzieć się więcej o tym błędzie.</p> +</div> + +<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> + +<p>Ten błąd zwykle jest związany z niepoprawnie napisanym obiektem JavaScript. Tym razem jednak został spowodowany zmianą</p> + +<pre class="brush: js">function checkGuess() {</pre> + +<p>na</p> + +<pre class="brush: js">function checkGuess( {</pre> + +<p>Ten błąd spowodował, że przeglądarka zinterpretowała ten kod jako próbę podania wnętrza funkcji jako parametr funkcji. Uważaj na nawiasy!</p> + +<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3> + +<p>This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the <code>checkGuess()</code> function.</p> + +<h3 id="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3> + +<p>These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, <em>string</em> would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.</p> + +<p>For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!</p> + +<div class="note"> +<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p> +</div> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>A wieć to jest to - podstawy szukania błędów w prostych programach w JS. Nie zawsze znalezienie błędu jest tak proste , ale przynajmniej ten artykuł może ci pomóc w zaoszczędzeniu kilku godzin snu i pozwolić na szybsze postępy w nauce.</p> + +<h2 id="Zobacz_także">Zobacz także</h2> + +<div> +<ul> + <li>Istnieje wiele innych typów błędów, które nie zostały tu przedstawione - tworzymy artykuł o tym, co one dokładnie oznaczają -zobacz <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li> + <li>Jeżeli napotkasz błędy w swoim kodzie, co do których nie jesteś pewny, jak je rozwiązać - nawet po lekturze tego artykułu - możesz uzyskać pomoc. Zapytaj na <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, lub na kanale IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> na <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Opisz swój błąd, a my spróbujemy Ci pomóc. Przedstawienie Twojego kodu będzie równie pomocne w owocnym rozwiązaniu problemu.</li> +</ul> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> + +<p> </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> + +<p> </p> diff --git a/files/pl/learn/javascript/pierwsze_kroki/index.html b/files/pl/learn/javascript/pierwsze_kroki/index.html new file mode 100644 index 0000000000..ab90523dce --- /dev/null +++ b/files/pl/learn/javascript/pierwsze_kroki/index.html @@ -0,0 +1,61 @@ +--- +title: Pierwsze kroki w Javascript +slug: Learn/JavaScript/Pierwsze_kroki +tags: + - Artykuły + - Liczby + - Moduły + - Operatory + - Początkujący + - Przewodnik + - Pętle + - Zmienne +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">W pierwszym module, przed rozpoczęciem praktycznego pisania kodu w JavaScript, odpowiemy sobie na kilka fundamentalnych pytań takich jak: "czym jest JavaScript?", "czym się charakteryzuje?" oraz "co potrafi?". Następnie omówimy kilka kluczowych kwestii - zmienne, ciągi znaków, liczby oraz pętle w JavaScript.</p> + +<h2 id="Wymagania">Wymagania</h2> + +<p>Przed rozpoczęciem nauki tego modułu nie musisz posiadać żadnej wiedzy o JavaScript, ale powinieneś już znać podstawowe zagadnienia związane z HTML-em oraz CSS-em. Doradzamy Ci, abyś ukończył moduły przedstawione poniżej:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Rozpoczęcie przygody z programowaniem</a> (zawiera <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">podstawy JavaScriptu</a>). </li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Wprowadzenie do HTML-a</a>.</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Wprowadzenie do CSS-a</a>.</li> +</ul> + +<div class="note"> +<p><strong>Informacja</strong>: Jeżeli pracujesz na komputerze/tablecie/innym urządzeniu na którym nie masz możliwości tworzenia własnych plików, możesz wypróbować przedstawione przykłady w programach online, takich jak: <a href="http://jsbin.com/">JSBin</a> lub <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Przewodnik">Przewodnik</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript">Czym jest JavaScript?</a></dt> + <dd>Witamy w MDN-owym kursie JavaScript dla początkujących! W tym artykule spojrzymy na JavaScript jeszcze nieco ogólne i odpowiemy sobie na podstawowe pytania: "co to jest?" oraz "co robi?". To ważne, by znać cele stosowania tego języka.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/Learn/JavaScript/Pierwsze_kroki/A_first_splash">Pierwsze spojrzenie na JavaScript</a></dt> + <dd>Najpierw nauczysz się teorii JavaScript, oraz tego, co możesz zrobić za jego pomocą. Następnie przejdziesz przez instruktarz oparty o podstawowe cechy JavaScript, który będzie miał formę praktyczną - napiszesz prostą grę - "Zgadnij liczbę". Proces pisania pokażemy Ci krok po kroku.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Coś poszło nie tak? Rozwiązywanie problemów w JavaScript</a></dt> + <dd>Podczas pisania gry "zgadnij liczbę" z poprzedniego artykułu możesz natrafić na trudności, które spowodują problemy z jej poprawnym działaniem. Spokojnie - ten artykuł uchroni Cię przed wyrywaniem sobie włosów podczas sprawdzania swojego kodu. Pokażemy Ci kilka prostych sposóbów wykrywania i eliminowania błędów w programie napisanym w Javascript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Przechowywanie informacji, których potrzebujesz — Zmienne</a></dt> + <dd>Po przeczytaniu poprzednich artykułów powinieneś wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, oraz jak możesz używać go wraz z innymi internetowymi technologiami. Ten artykuł poprowadzi Cię przez podstawowe "bloki", którymi będziesz posługiwać się podczas pisania programu w Javascript - zmienne.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Podstawy działań w JavaScript — liczby i operatory</a></dt> + <dd>W tym miesjcu kursu porozmawiamy o działaniach w JavaScript - dowiesz się jak możesz łączyć operatory oraz przeczytasz o innych cechach języka, aby poprawnie korzystać z liczb.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Przechowywanie tekstu — ciągi znaków w JavaScript</a></dt> + <dd>Następnie skupimy swoją uwagę na string-ach - tak nazywają się ciągi tekstu w programowaniu. W tym artykule spojrzymy na najważniejsze rzeczy, które potrzebujesz wiedzieć o ciągach znaków w JavaScript. Są nimi: tworzenie "string-ów", używanie cudzysłowia, oraz łączenie ze sobą ciągów znaków.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Użyteczne metody w string-ach</a></dt> + <dd>Po zaznajomieniu się z podstawami string-ów czas podnieść poprzeczkę. Zaczniemy mysleć o pomocnych operacjach, które możemy wykonać na ciągach znaków poprzez wbudowane funkcje, takie jak: obliczanie długości ciągu znaków, łączenie i rozdzielanie, zastępowanie jednego znaku innym i wiele więcej.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Pętle</a></dt> + <dd>W ostatnim artykule tego modułu przyjrzymy się pętlom - następnym sposobie przechowywania informacji w pojedynczej zmiennej. Dowiesz się tutaj dlaczego są one ważne, odkryjesz jak je stworzyć, dodać i usunąć z nich dane. </dd> +</dl> + +<h2 id="Podsumowanie">Podsumowanie</h2> + +<p>Poniższe podsumowanie sprawdzi Twoje rozumienie podstaw języka Javascript z powyższego przewodnika.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Generator niemądrych opowieści</a></dt> + <dd>W tej części zastosujesz zdobytą wiedzę, zebraną w powyższych artykułach, do stworzenia aplikacji - "Generatora niemądrych opowieści". Baw się dobrze!</dd> +</dl> diff --git a/files/pl/learn/javascript/pierwsze_kroki/math/index.html b/files/pl/learn/javascript/pierwsze_kroki/math/index.html new file mode 100644 index 0000000000..3e5563d0da --- /dev/null +++ b/files/pl/learn/javascript/pierwsze_kroki/math/index.html @@ -0,0 +1,455 @@ +--- +title: Basic math in JavaScript — numbers and operators +slug: Learn/JavaScript/Pierwsze_kroki/Math +translation_of: Learn/JavaScript/First_steps/Math +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">At this point in the course we discuss math in JavaScript — how we can use {{Glossary("Operator","operators")}} and other features to successfully manipulate numbers to do our bidding.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain familiarity with the basics of math in JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Wszyscy_kochają_matematykę">Wszyscy kochają matematykę</h2> + +<p>Ok, może nie. Niektórzy kochają matematykę, inni nienawidzą od kiedy musieli nauczyć się tabliczki mnożenia i dzielenia przez liczby wielocyfrowe w szkole podstawowej, a częśc jest gdzieś pośrodku. Ale nikt z nas nie może zaprzeczyć, temu że matematyka jest fundamentalną częścią życia, bez której nie zajdzie się daleko. Jest to szczególnie prawdziwe kiedy uczymy się programowania w JavaScript (lub jakimkolwiek innym języku) - tak wiele z tego co robimy polega na przetwarzaniu danych liczbowych, obliczaniu nowych wartości i tak dalej, że nie będziesz zaskoczony, że JavaScript posiada w pełni funkcjonalny zestaw funkcji matematycznych.</p> + +<p>Artykuł omawia podstawy, które musisz znać na ten moment.</p> + +<h3 id="Typy_liczb">Typy liczb</h3> + +<p>W programowaniu, nawet na pozór łatwy system dziesiętny, który tak dobrze znamy jest bardziej skąplikowany niż mógłbyś sądzić. Używamy różnych terminów do opisania różnych typów liczb dziesiętnych, dla przykładu: </p> + +<ul> + <li><strong>Integers</strong> są to liczby całkowite, e.g. 10, 400, or -5.</li> + <li><strong>Floating point numbers</strong> (floats) have decimal points and decimal places, for example 12.5, and 56.7786543.</li> + <li><strong>Doubles</strong> are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places).</li> +</ul> + +<p>We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like:</p> + +<ul> + <li><strong>Binary</strong> — The lowest level language of computers; 0s and 1s.</li> + <li><strong>Octal</strong> — Base 8, uses 0–7 in each column.</li> + <li><strong>Hexadecimal</strong> — Base 16, uses 0–9 and then a–f in each column. You may have encountered these numbers before when setting <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">colors in CSS</a>.</li> +</ul> + +<p><strong>Before you start to get worried about your brain melting, stop right there!</strong> For a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever.</p> + +<p>The second bit of good news is that unlike some other programming languages, JavaScript only has one data type for numbers, both integers and decimals — you guessed it, {{jsxref("Number")}}. This means that whatever type of numbers you are dealing with in JavaScript, you handle them in exactly the same way.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Actually, JavaScript has a second number type, {{Glossary("BigInt")}}, used for very, very large integers. But for the purposes of this course, we'll just worry about <code>Number</code> values.</p> +</div> + +<h3 id="Its_all_numbers_to_me">It's all numbers to me</h3> + +<p>Let's quickly play with some numbers to reacquaint ourselves with the basic syntax we need. Enter the commands listed below into your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>.</p> + +<ol> + <li>First of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: + <pre class="brush: js notranslate">let myInt = 5; +let myFloat = 6.667; +myInt; +myFloat;</pre> + </li> + <li>Number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.</li> + <li>Now let's check that both our original variables are of the same datatype. There is an operator called {{jsxref("Operators/typeof", "typeof")}} in JavaScript that does this. Enter the below two lines as shown: + <pre class="brush: js notranslate">typeof myInt; +typeof myFloat;</pre> + You should get <code>"number"</code> returned in both cases — this makes things a lot easier for us than if different numbers had different data types, and we had to deal with them in different ways. Phew!</li> +</ol> + +<h3 id="Useful_Number_methods">Useful Number methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> object, an instance of which represents all standard numbers you'll use in your JavaScript, has a number of useful methods available on it for you to manipulate numbers. We don't cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you've read through this module a couple of times it is worth going to the object reference pages and learning more about what's available.</p> + +<p>For example, to round your number to a fixed number of decimal places, use the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> method. Type the following lines into your browser's <a href="/en-US/docs/Tools/Web_Console">console</a>:</p> + +<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364; +lotsOfDecimal; +let twoDecimalPlaces = lotsOfDecimal.toFixed(2); +twoDecimalPlaces;</pre> + +<h3 id="Converting_to_number_data_types">Converting to number data types</h3> + +<p>Sometimes you might end up with a number that is stored as a string type, which makes it difficult to perform calculations with it. This most commonly happens when data is entered into a <a href="/en-US/docs/Learn/Forms">form</a> input, and the <a href="/en-US/docs/Web/HTML/Element/input/text">input type is text</a>. There is a way to solve this problem — passing the string value into the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> constructor to return a number version of the same value.</p> + +<p>For example, try typing these lines into your console:</p> + +<pre class="brush: js notranslate">let myNumber = '74'; +myNumber + 3;</pre> + +<p>You end up with the result 743, not 77, because <code>myNumber</code> is actually defined as a string. You can test this by typing in the following:</p> + +<pre class="brush: js notranslate">typeof myNumber;</pre> + +<p>To fix the calculation, you can do this:</p> + +<pre class="brush: js notranslate">Number(myNumber) + 3;</pre> + +<h2 id="Arithmetic_operators">Arithmetic operators</h2> + +<p>Arithmetic operators are the basic operators that we use to do sums in JavaScript:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Purpose</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>Addition</td> + <td>Adds two numbers together.</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>Subtraction</td> + <td>Subtracts the right number from the left.</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Multiplication</td> + <td>Multiplies two numbers together.</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>Division</td> + <td>Divides the left number by the right.</td> + <td><code>10 / 5</code></td> + </tr> + <tr> + <td><code>%</code></td> + <td>Remainder (sometimes called modulo)</td> + <td> + <p>Returns the remainder left over after you've divided the left number into a number of integer portions equal to the right number.</p> + </td> + <td> + <p><code>8 % 3</code> (returns 2, as three goes into 8 twice, leaving 2 left over).</p> + </td> + </tr> + <tr> + <td><code>**</code></td> + <td>Exponent</td> + <td>Raises a <code>base</code> number to the <code>exponent</code> power, that is, the <code>base</code> number multiplied by itself, <code>exponent</code> times. It was first Introduced in EcmaScript 2016.</td> + <td><code>5 ** 2</code> (returns <code>25</code>, which is the same as <code>5 * 5</code>).</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: You'll sometimes see numbers involved in arithmetic referred to as {{Glossary("Operand", "operands")}}.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You may sometimes see exponents expressed using the older {{jsxref("Math.pow()")}} method, which works in a very similar way. For example, in <code>Math.pow(7, 3)</code>, <code>7</code> is the base and <code>3</code> is the exponent, so the result of the expression is <code>343</code>. <code>Math.pow(7, 3)</code> is equivalent to <code>7**3</code>.</p> +</div> + +<p>We probably don't need to teach you how to do basic math, but we would like to test your understanding of the syntax involved. Try entering the examples below into your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> to familiarize yourself with the syntax.</p> + +<ol> + <li>First try entering some simple examples of your own, such as + <pre class="brush: js notranslate">10 + 7 +9 * 8 +60 % 3</pre> + </li> + <li>You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example: + <pre class="brush: js notranslate">let num1 = 10; +let num2 = 50; +9 * num1; +num1 ** 3; +num2 / num1;</pre> + </li> + <li>Last for this section, try entering some more complex expressions, such as: + <pre class="brush: js notranslate">5 + 10 * 3; +num2 % 9 * num1; +num2 + num1 / 8 + 2;</pre> + </li> +</ol> + +<p>Some of this last set of calculations might not give you quite the result you were expecting; the section below might well give the answer as to why.</p> + +<h3 id="Operator_precedence">Operator precedence</h3> + +<p>Let's look at the last example from above, assuming that <code>num2</code> holds the value 50 and <code>num1</code> holds the value 10 (as originally stated above):</p> + +<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> + +<p>As a human being, you may read this as <em>"50 plus 10 equals 60"</em>, then <em>"8 plus 2 equals 10"</em>, and finally <em>"60 divided by 10 equals 6"</em>.</p> + +<p>But the browser does <em>"10 divided by 8 equals 1.25"</em>, then <em>"50 plus 1.25 plus 2 equals 53.25"</em>.</p> + +<p>This is because of <strong>operator precedence</strong> — some operators are applied before others when calculating the result of a calculation (referred to as an <em>expression</em>, in programming). Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the calculation is always evaluated from left to right).</p> + +<p>If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:</p> + +<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> + +<p>Try it and see.</p> + +<div class="note"> +<p><strong>Note</strong>: A full list of all JavaScript operators and their precedence can be found in <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p> +</div> + +<h2 id="Increment_and_decrement_operators">Increment and decrement operators</h2> + +<p>Sometimes you'll want to repeatedly add or subtract one to or from a numeric variable value. This can be conveniently done using the increment (<code>++</code>) and decrement (<code>--</code>) operators. We used <code>++</code> in our "Guess the number" game back in our <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> article, when we added 1 to our <code>guessCount</code> variable to keep track of how many guesses the user has left after each turn.</p> + +<pre class="brush: js notranslate">guessCount++;</pre> + +<div class="note"> +<p><strong>Note</strong>: These operators are most commonly used in <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">loops</a>, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">check it out live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">look at the source code</a> to see if you can spot the incrementors! We'll look at loops in detail later on in the course.</p> +</div> + +<p>Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:</p> + +<pre class="brush: js notranslate">3++;</pre> + +<p>So, you can only increment an existing variable. Try this:</p> + +<pre class="brush: js notranslate">let num1 = 4; +num1++;</pre> + +<p>Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, <em>then</em> increments the variable. You can see that it's been incremented if you return the variable value again:</p> + +<pre class="brush: js notranslate">num1;</pre> + +<p>The same is true of <code>--</code> : try the following</p> + +<pre class="brush: js notranslate">let num2 = 6; +num2--; +num2;</pre> + +<div class="note"> +<p><strong>Note</strong>: You can make the browser do it the other way round — increment/decrement the variable <em>then</em> return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use <code>++num1</code> and <code>--num2</code>.</p> +</div> + +<h2 id="Assignment_operators">Assignment operators</h2> + +<p>Assignment operators are operators that assign a value to a variable. We have already used the most basic one, <code>=</code>, loads of times — it simply assigns the variable on the left the value stated on the right:</p> + +<pre class="brush: js notranslate">let x = 3; // x contains the value 3 +let y = 4; // y contains the value 4 +x = y; // x now contains the same value y contains, 4</pre> + +<p>But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Purpose</th> + <th scope="col">Example</th> + <th scope="col">Shortcut for</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+=</code></td> + <td>Addition assignment</td> + <td>Adds the value on the right to the variable value on the left, then returns the new variable value</td> + <td style="white-space: nowrap;"><code>x += 4;</code></td> + <td style="white-space: nowrap;"><code>x = x + 4;</code></td> + </tr> + <tr> + <td><code>-=</code></td> + <td>Subtraction assignment</td> + <td>Subtracts the value on the right from the variable value on the left, and returns the new variable value</td> + <td style="white-space: nowrap;"><code>x -= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x - 3;</code></td> + </tr> + <tr> + <td><code>*=</code></td> + <td>Multiplication assignment</td> + <td>Multiplies the variable value on the left by the value on the right, and returns the new variable value</td> + <td style="white-space: nowrap;"><code>x *= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x * 3;</code></td> + </tr> + <tr> + <td><code>/=</code></td> + <td>Division assignment</td> + <td>Divides the variable value on the left by the value on the right, and returns the new variable value</td> + <td style="white-space: nowrap;"><code>x /= 5;</code></td> + <td style="white-space: nowrap;"><code>x = x / 5;</code></td> + </tr> + </tbody> +</table> + +<p>Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.</p> + +<p>Note that you can quite happily use other variables on the right hand side of each expression, for example:</p> + +<pre class="brush: js notranslate">let x = 3; // x contains the value 3 +let y = 4; // y contains the value 4 +x *= y; // x now contains the value 12</pre> + +<div class="note"> +<p><strong>Note</strong>: There are lots of <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">other assignment operators available</a>, but these are the basic ones you should learn now.</p> +</div> + +<h2 id="Active_learning_sizing_a_canvas_box">Active learning: sizing a canvas box</h2> + +<p>In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables <code>x</code> and <code>y</code>, which are initially both given a value of 50.</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p> + +<p>In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:</p> + +<ul> + <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li> + <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li> + <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li> + <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li> + <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li> + <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li> +</ul> + +<p>Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.</p> + +<h2 id="Comparison_operators">Comparison operators</h2> + +<p>Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use <strong>comparison operators</strong>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Purpose</th> + <th scope="col">Example</th> + </tr> + <tr> + <td><code>===</code></td> + <td>Strict equality</td> + <td>Tests whether the left and right values are identical to one another</td> + <td><code>5 === 2 + 4</code></td> + </tr> + <tr> + <td><code>!==</code></td> + <td>Strict-non-equality</td> + <td>Tests whether the left and right values are <strong>not</strong> identical to one another</td> + <td><code>5 !== 2 + 3</code></td> + </tr> + <tr> + <td><code><</code></td> + <td>Less than</td> + <td>Tests whether the left value is smaller than the right one.</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>Greater than</td> + <td>Tests whether the left value is greater than the right one.</td> + <td><code>10 > 20</code></td> + </tr> + <tr> + <td><code><=</code></td> + <td>Less than or equal to</td> + <td>Tests whether the left value is smaller than or equal to the right one.</td> + <td><code>3 <= 2</code></td> + </tr> + <tr> + <td><code>>=</code></td> + <td>Greater than or equal to</td> + <td>Tests whether the left value is greater than or equal to the right one.</td> + <td><code>5 >= 4</code></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>Note</strong>: You may see some people using <code>==</code> and <code>!=</code> in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from <code>===</code>/<code>!==</code>. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.</p> +</div> + +<p>If you try entering some of these values in a console, you'll see that they all return <code>true</code>/<code>false</code> values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:</p> + +<ul> + <li>Display the correct text label on a button depending on whether a feature is turned on or off</li> + <li>Display a game over message if a game is over or a victory message if the game has been won</li> + <li>Display the correct seasonal greeting depending what holiday season it is</li> + <li>Zoom a map in or out depending on what zoom level is selected</li> +</ul> + +<p>We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:</p> + +<pre class="brush: html notranslate"><button>Start machine</button> +<p>The machine is stopped.</p> +</pre> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); +const txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.textContent === 'Start machine') { + btn.textContent = 'Stop machine'; + txt.textContent = 'The machine has started!'; + } else { + btn.textContent = 'Start machine'; + txt.textContent = 'The machine is stopped.'; + } +}</pre> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Open in new window</a></strong></p> + +<p>You can see the equality operator being used just inside the <code>updateBtn()</code> function. In this case, we are not testing if two mathematical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.</p> + +<div class="note"> +<p><strong>Note</strong>: Such a control that swaps between two states is generally referred to as a <strong>toggle</strong>. It toggles between one state and another — light on, light off, etc.</p> +</div> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">Test your skills: Math</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.</p> + +<p>In the next article, we'll explore text and how JavaScript allows us to manipulate it.</p> + +<div class="note"> +<p><strong>Note</strong>: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> and <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> articles.</p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "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> diff --git a/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html b/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html new file mode 100644 index 0000000000..3898eb049c --- /dev/null +++ b/files/pl/learn/javascript/pierwsze_kroki/what_is_javascript/index.html @@ -0,0 +1,342 @@ +--- +title: Co to jest JavaScript? +slug: Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript +translation_of: Learn/JavaScript/First_steps/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"><p>Player 1: Chris</p></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></body></code>: + <pre class="brush: html notranslate"><script> + + // Kod JavaScript będzie tu umieszczony. + +</script></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 < 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></body></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><script src="script.js"></script></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><button onclick="createParagraph()">Kliknij mnie!</button></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 < 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 <body>. + +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 < 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> diff --git a/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html b/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html new file mode 100644 index 0000000000..d1b55aea20 --- /dev/null +++ b/files/pl/learn/javascript/pierwsze_kroki/zmienne/index.html @@ -0,0 +1,453 @@ +--- +title: Przechowywanie potrzebnych informacji — Zmienne +slug: Learn/JavaScript/Pierwsze_kroki/Zmienne +translation_of: Learn/JavaScript/First_steps/Variables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> + +<p>Po przeczytaniu kilku ostatnich artykułów, powinieneś juz wiedzieć czym jest JavaScript, co może dla Ciebie zrobić, jak używać go razem z innymi technologiami webowymi, oraz jak jego główne cechy wyglądają z wysokiego poziomu. W tym artykule, przejdziemy do fundamentów, poznamy jak wygląda pracowa z najbardziej podstawowym konceptem JavaScript - Zmiennymi. </p> + +<div></div> + +<table class="learn-box"> + <tbody> + <tr> + <th scope="row">Wymagania:</th> + <td>Podstawowa znajomość komputera, podstawowe rozumienie HTML i CSS, oraz rozumienie czym jest JavaScript.</td> + </tr> + <tr> + <th scope="row">Cel:</th> + <td>Zapoznać się z podstawami dotyczącymi zmiennych w JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Potrzebne_Narzędzia">Potrzebne Narzędzia</h2> + +<p>Podczas tego artykułu, będziesz wpisywać linie kodu aby sprawdzić swoje rozumienie zawartości. Jeśli używasz przeglądarki desktopowej, najlepszym miejscem na wpisanie próbnego kodu jest konsola JavaScript Twojej przeglądarki (zobacz: <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> aby zasięgnąć szczegółowych informacji, jak otworzyć to narzędzie).</p> + +<p>Niemniej jednak, zapewniliśmy również prostą konsolę JavaScript wbudowaną w poniższą stronę, abyś mógł wpisywać kod w przypadku gdy nie używasz przeglądarki z łatwym dostępem do konsoli JavaScript lub konsola wewnątrz strony jest dla Ciebie wygodniejsza.</p> + +<h2 id="Czym_jest_zmienna">Czym jest zmienna?</h2> + +<p>Zmienna jest to kontener na wartość, jak liczba, którą możemy użyć w sumowaniu lub łańcuch znaków, który możemy wykorzystać jako część zdania. Ale jedną rzeczą, która wyróżnia zmienne jest to, że ich wartość może ulec zmianie. Popatrzmy na prosty przykład:</p> + +<pre class="brush: html notranslate"><button>Press me</button></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('What is your name?'); + alert('Hello ' + name + ', nice to see you!'); +}</pre> + +<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>W tym przykładzie, naciśnięcie przycisku uruchamia kilka linijek kodu. Pierwsza linia powoduje pojawienie się okna na ekranie, które pyta o imię, a następnie przechowuje wartość w zmiennej. Druga linia wyświetla wiadomość powitalną zawierajaca imię pobrane ze zmiennej.</p> + +<p>Aby zrozumieć dlaczego jest to tak przydatne, pomyślmy o tym jak stworzylibyśmy ten przykład, nie używając zmiennej. W efekcie wygladałoby to mniej więcej tak:</p> + +<pre class="example-bad notranslate">var name = prompt('What is your name?'); + +if (name === 'Adam') { + alert('Hello Adam, nice to see you!'); +} else if (name === 'Alan') { + alert('Hello Alan, nice to see you!'); +} else if (name === 'Bella') { + alert('Hello Bella, nice to see you!'); +} else if (name === 'Bianca') { + alert('Hello Bianca, nice to see you!'); +} else if (name === 'Chris') { + alert('Hello Chris, nice to see you!'); +} + +// ... i tak dalej ...</pre> + +<p>Możesz nie rozumieć w pełni składni której tu używamy (jeszcze!), ale powinieneś być w stanie zrozumieć o co chodzi - jeśli nie moglibyśmy używać zmiennych, musielibyśmy implementować gigantyczny blok kodu, który sprawdzałby jakie było wpisane imię, a następnie wyświetlał odpowiednią wiadomość dla tego imienia. Oczywiście jest to całkowicie nieefektywne (kod jest znacznie większy, nawet dla tylko pięciu możliwych wyborów) i po prostu nie działałoby - nie mógłbyś przecież przechowywać wszystkich możliwych wyborów.</p> + +<p>Zmienne po prostu mają sens i jak tylko nauczysz się więcej o JavaScript, używanie ich stanie się dla Ciebie czyms naturalnym.</p> + +<p>Kolejna rzecz, która wyróżnia zmienne jest to, że mogą one zawierać prawie wszystko - nie tylko łańcuchy znaków i liczby. Zmienne moga również zawierać skomplikowane dane, a nawet całe funkcje do robienia niesamowitych rzeczy. Nauczysz sie o tym więcej, w ciągu kursu. </p> + +<div class="note"> +<p><strong>Uwaga</strong>: Mówimy że zmienne zawieraja wartości. Jest to ważne rozróżnienie. Zmienne nie są wartościami same w sobie; są kontenerami na wartości. Możesz je sobie wyobrazić jako kartonowe pudełka, w których możesz przechowywać rzeczy.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> + +<h2 id="Deklarowanie_zmiennej">Deklarowanie zmiennej</h2> + +<p>W celu użycia zmiennej, na początku musisz ją stworzyć - a dokładniej nazywa się to deklarowaniem zmiennej. Aby to zrobić, wpisujemy słowo kluczowe <code>var</code> albo <code>let</code> a następnie nazwę, którą chcesz żeby miała Twoja zmienna:</p> + +<pre class="brush: js notranslate">let myName; +let myAge;</pre> + +<p>Tutaj tworzymy dwie zmienne, które nazywają się <code>myName</code> i <code>myAge</code>. Spróbuj wpisać teraz te linie w konsoli Twojej przeglądarki lub w poniższej konsoli (możesz otworzyć <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">otworzyć tą konsolę</a> w oddzielnej karcie lub oknie jeśli wolisz). Nastepnie spróbuj stworzyć zmienną (lub dwie) z wybranymi przez Ciebie nazwami.</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + 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; + } + + </style> + </head> + <body> + + + </body> + + <script> + let geval = eval; + function createInput() { + let inputDiv = document.createElement('div'); + let inputPara = document.createElement('p'); + let inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + let result; + try { + result = geval(e.target.value); + } catch(e) { + result = 'error — ' + e.message; + } + + let outputDiv = document.createElement('div'); + let 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(); + + </script> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Uwaga</strong>: W JavaScript, wszystkie instrukcje kodu powinny być zakończone średnikiem (<code>;</code>) — Twój kod może działać poprawnie dla pojedynczych linii, ale prawdopodobnie nie będzie, jeśli napiszesz wiele linii kodu razem. Spróbuj wejść w nawyk wpisywania go.</p> +</div> + +<p>Możesz przetestować czy te wartości istnieją teraz w środowisku wykonawczym wpisując po prostu nazwę zmiennej, np.</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>Obecnie nie mają one wartości; są pustymi kontenerami. Kiedy wpisujesz nazwy zmiennych, powinieneś otrzymać zwróconą wartość <code>undefined</code>. Natomiast jesli one nie istnieją, dostaniesz informację o błedzie — spróbuj wpisać:</p> + +<pre class="brush: js notranslate">scoobyDoo;</pre> + +<div class="note"> +<p><strong>Uwaga</strong>: Nie pomyl zmiennej, która istnieje, ale nie ma zdefiniowanej wartości, ze zmienną, która wcale nie istnieje — to dwie zupełnie inne rzeczy. Wracając do porównania z pudełkami, które widziałeś wyżej — jeśli zmienna nie istnieje, to znaczy, że nie mamy żadnego kartonowego pudełka, do którego moglibyśmy wrzucić zawartość.<br> + Natomiast zmienna bez zdefiniowanej zawartości to po prostu puste pudełko. </p> +</div> + +<h2 id="Inicjalizacja_zmiennej">Inicjalizacja zmiennej</h2> + +<p>Kiedy już zadeklarujesz zmienną, możesz ją zainicjować nadając wartość. Robi się to, wpisując nazwę zmiennej, a następnie znak równości (<code>=</code>), poprzedzajacy wartość, którą chcesz jej nadać. Na przykład:</p> + +<pre class="brush: js notranslate">myName = 'Chris'; +myAge = 37;</pre> + +<p>Spróbuj teraz wrócić do konsoli i wpisać te linie. Powinieneś zobaczyć wartość, którą przypisałeś do zmiennej zwróconą w konsoli aby potwierdzić to w obu przypadkach. Znowu, możesz zwrócić wartości zmiennych po prostu wpisujac ich nazwy w konsoli — spróbuj ponownie:</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>Możesz zadeklarować i zainicjować zmienną w tym samym czasie, tak jak tu:</p> + +<pre class="brush: js notranslate">let myDog = 'Rover';</pre> + +<p>Tak prawdopodobnie będziesz robił najcześciej, jako że jest to szybsze niż wykonywanie dwóch czynności w dwóch oddzielnych linijkach.</p> + +<h2 id="Róznice_między_var_i_let">Róznice między var i let</h2> + +<p>Możesz się teraz zastanawiać "Po co nam dwa słowa kluczowe do deklarowania zmiennych? Po co nam var i let?".</p> + +<p>Powód jest historyczny. Kiedy JavaScript został stworzony, mogliśmy korzystać tylko z <code>var</code>. Takie deklarowanie zmiennych działa, ale niesie ze sobą kilka niechcianych błędów. Stworzono więc <code>let</code>, który jest obecnym standardem w języku JavaScript (to właśnie z niego powinniśmy korzystać). Główna róznica polega na tym, że <code>let</code> naprawia błędy, które mogliśmy napotkać podczas korzystania z <code>var</code>.</p> + +<p>A couple of simple differences are explained below. We won't go into all the differences now, but you'll start to discover them as you learn more about JavaScript (if you really want to read about them now, feel free to check out our <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let reference page</a>).</p> + +<p>For a start, if you write a multiline JavaScript program that declares and initializes a variable, you can actually declare a variable with <code>var</code> after you initialize it and it will still work. For example:</p> + +<pre class="brush: js notranslate">myName = 'Chris'; + +function logName() { + console.log(myName); +} + +logName(); + +var myName;</pre> + +<div class="note"> +<p><strong>Note</strong>: This won't work when typing individual lines into a JavaScript console, just when running multiple lines of JavaScript in a web document.</p> +</div> + +<p>This works because of <strong>hoisting</strong> — read <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> for more detail on the subject.</p> + +<p>Hoisting no longer works with <code>let</code>. If we changed <code>var</code> to <code>let</code> in the above example, it would fail with an error. This is a good thing — declaring a variable after you initialize it makes for confusing, harder to understand code.</p> + +<p>Secondly, when you use <code>var</code>, you can declare the same variable as many times as you like, but with <code>let</code> you can't. The following would work:</p> + +<pre class="brush: js notranslate">var myName = 'Chris'; +var myName = 'Bob';</pre> + +<p>But the following would throw an error on the second line:</p> + +<pre class="brush: js notranslate">let myName = 'Chris'; +let myName = 'Bob';</pre> + +<p>You'd have to do this instead:</p> + +<pre class="brush: js notranslate">let myName = 'Chris'; +myName = 'Bob';</pre> + +<p>Again, this is a sensible language decision. There is no reason to redeclare variables — it just makes things more confusing.</p> + +<p>For these reasons and more, we recommend that you use <code>let</code> as much as possible in your code, rather than <code>var</code>. There is no reason to use <code>var</code>, unless you need to support old versions of Internet Explorer with your code (it doesn't support <code>let</code> until version 11; the modern Windows Edge browser supports <code>let</code> just fine).</p> + +<div class="note"> +<p><strong>Note</strong>: We are currently in the process of updating the course to use <code>let</code> rather than <code>var</code>. Bear with us!</p> +</div> + +<h2 id="Updating_a_variable">Updating a variable</h2> + +<p>Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:</p> + +<pre class="brush: js notranslate">myName = 'Bob'; +myAge = 40;</pre> + +<h3 id="An_aside_on_variable_naming_rules">An aside on variable naming rules</h3> + +<p>You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.</p> + +<ul> + <li>You shouldn't use other characters because they may cause errors or be hard to understand for an international audience.</li> + <li>Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.</li> + <li>Don't use numbers at the start of variables. This isn't allowed and will cause an error.</li> + <li>A safe convention to stick to is so-called <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.</li> + <li>Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.</li> + <li>Variables are case sensitive — so <code>myage</code> is a different variable to <code>myAge</code>.</li> + <li>One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So, you can't use words like <code>var</code>, <code>function</code>, <code>let</code>, and <code>for</code> as variable names. Browsers will recognize them as different code items, and so you'll get errors.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find a fairly complete list of reserved keywords to avoid at <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> +</div> + +<p>Good name examples:</p> + +<pre class="example-good notranslate">age +myAge +init +initialColor +finalOutputValue +audio1 +audio2</pre> + +<p>Bad name examples:</p> + +<pre class="example-bad notranslate">1 +a +_12 +myage +MYAGE +var +Document +skjfndskjfnbdskjfb +thisisareallylongstupidvariablenameman</pre> + +<p>Error-prone name examples:</p> + +<pre class="example-invalid notranslate">var +Document +</pre> + +<p>Try creating a few more variables now, with the above guidance in mind.</p> + +<h2 id="Variable_types">Variable types</h2> + +<p>There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.</p> + +<p>So far we've looked at the first two, but there are others.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:</p> + +<pre class="brush: js notranslate">let myAge = 17;</pre> + +<h3 id="Strings">Strings</h3> + +<p>Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.</p> + +<pre class="brush: js notranslate">let dolphinGoodbye = 'So long and thanks for all the fish';</pre> + +<h3 id="Booleans">Booleans</h3> + +<p>Booleans are true/false values — they can have two values, <code>true</code> or <code>false</code>. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:</p> + +<pre class="brush: js notranslate">let iAmAlive = true;</pre> + +<p>Whereas in reality it would be used more like this:</p> + +<pre class="brush: js notranslate">let test = 6 < 3;</pre> + +<p>This is using the "less than" operator (<code><</code>) to test whether 6 is less than 3. As you might expect, it will return <code>false</code>, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.</p> + +<h3 id="Arrays">Arrays</h3> + +<p>An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:</p> + +<pre class="brush: js notranslate">let myNameArray = ['Chris', 'Bob', 'Jim']; +let myNumberArray = [10, 15, 40];</pre> + +<p>Once these arrays are defined, you can access each value by their location within the array. Try these lines:</p> + +<pre class="brush: js notranslate">myNameArray[0]; // should return 'Chris' +myNumberArray[2]; // should return 40</pre> + +<p>The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.</p> + +<p>You'll learn a lot more about arrays in <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">a future article</a>.</p> + +<h3 id="Objects">Objects</h3> + +<p>In programming, an object is a structure of code that models a real-life object. You can have a simple object that represents a box and contains information about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.</p> + +<p>Try entering the following line into your console:</p> + +<pre class="brush: js notranslate">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre> + +<p>To retrieve the information stored in the object, you can use the following syntax:</p> + +<pre class="brush: js notranslate">dog.name</pre> + +<p>We won't be looking at objects any more for now — you can learn more about those in <a href="/en-US/docs/Learn/JavaScript/Objects">a future module</a>.</p> + +<h2 id="Dynamic_typing">Dynamic typing</h2> + +<p>JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (numbers, strings, arrays, etc).</p> + +<p>For example, if you declare a variable and give it a value enclosed in quotes, the browser will treat the variable as a string:</p> + +<pre class="brush: js notranslate">let myString = 'Hello';</pre> + +<p>It will still be a string, even if it contains numbers, so be careful:</p> + +<pre class="brush: js notranslate">let myNumber = '500'; // oops, this is still a string +typeof myNumber; +myNumber = 500; // much better — now this is a number +typeof myNumber;</pre> + +<p>Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> — this returns the data type of the variable you pass into it. The first time it is called, it should return <code>string</code>, as at that point the <code>myNumber</code> variable contains a string, <code>'500'</code>. Have a look and see what it returns the second time you call it.</p> + +<h2 id="Constants_in_JavaScript">Constants in JavaScript</h2> + +<p>Many programming languages have the concept of a <em>constant</em> — a value that once declared can never be changed. There are many reasons why you'd want to do this, from security (if a third party script changed such values it could cause problems) to debugging and code comprehension (it is harder to accidently change values that shouldn't be changed and mess things up).</p> + +<p>In the early days of JavaScript, constants didn't exist. In modern JavaScript, we have the keyword <code>const</code>, which lets us store values that can never be changed:</p> + +<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; +const hoursInDay = 24;</span></span></span></span></pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> works in exactly the same way as <code>let</code>, except that you can't give a <code>const</code> a new value. In the following example, the second line would throw an error:</span></span></span></span></p> + +<pre class="brush: js notranslate">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">; +daysInWeek = 8;</span></span></span></span></pre> + +<h2 id="Summary">Summary</h2> + +<p>By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "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">The 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> |