diff options
Diffstat (limited to 'files/pl/learn/javascript/first_steps/variables')
| -rw-r--r-- | files/pl/learn/javascript/first_steps/variables/index.html | 453 |
1 files changed, 453 insertions, 0 deletions
diff --git a/files/pl/learn/javascript/first_steps/variables/index.html b/files/pl/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..d1b55aea20 --- /dev/null +++ b/files/pl/learn/javascript/first_steps/variables/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> |