diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 13:01:50 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-15 13:01:50 -0400 |
| commit | 037a4118c4324d39fdef8bd23f9dd21b02f50946 (patch) | |
| tree | 22dac72fd38b56df6f2caf0fb7f21cb187179e76 /files/pl/learn | |
| parent | 335d06b805fab26d8d4b3e1378e7722c12f715fe (diff) | |
| download | translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.gz translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.tar.bz2 translated-content-037a4118c4324d39fdef8bd23f9dd21b02f50946.zip | |
delete pages that were never translated from en-US (pl, part 1) (#1549)
Diffstat (limited to 'files/pl/learn')
5 files changed, 0 insertions, 1560 deletions
diff --git a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index f3814455b3..0000000000 --- a/files/pl/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Publikacja strony internetowej -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - GitHub - - Początkujący - - Silnik Aplikacji Google - - Uczyć się - - serwer internetowy - - sieć -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your simple sample code online with little effort.</p> -</div> - -<h2 id="Jakie_są_możliwości">Jakie są możliwości?</h2> - -<p dir="ltr" id="tw-target-text">Opublikowanie strony internetowej jest tematem złożonym, ponieważ istnieje wiele sposobów, aby to osiągnąć. W tym artykule nie probujemy udokumentować wszystkie możliwe metody. Zamiast tego wyjaśniamy zalety i wady trzech podejść, które są praktyczne dla początkujących. Następnie przechodzimy przez jedną metodę, która może działać od razu dla wielu użytkowników.</p> - -<h3 id="Getting_hosting_and_a_domain_name">Getting hosting and a domain name</h3> - -<p>To have more control over content and website appearance, most people choose to buy web hosting and a domain name:</p> - -<ul> - <li>Web hosting is rented file space on a hosting company's <a href="/en-US/Learn/What_is_a_web_server">web server</a>. You put website files on the web server. The web server provides website content to website visitors.</li> - <li>A <a href="/en-US/Learn/Understanding_domain_names">domain name</a> is the unique address where people find your website, such as <code>http://www.mozilla.org</code> or <code>http://www.bbc.co.uk</code>. You can rent your domain name for as many years as you want from a <strong>domain registrar</strong>.</li> -</ul> - -<p>Many professional websites go online this way.</p> - -<p>In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> for more details) to actually transfer the website files over to the server. FTP programs vary widely, but generally, you have to connect to your web server using details provided by your hosting company (typically username, password, hostname). Then the program shows you your local files and the web server's files in two windows, and provides a way for you to transfer files back and forth.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> - -<h4 id="Tips_for_finding_hosting_and_domains">Tips for finding hosting and domains</h4> - -<ul> - <li>MDN does not promote specific commercial hosting companies or domain name registrars. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available.</li> - <li>Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments.</li> - <li>There are also free services available like <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, and <a href="https://wordpress.com/">WordPress</a>. Sometimes you get what you pay for, but sometimes these resources are good enough for your initial experiments.</li> - <li>Many companies provide hosting and domains.</li> -</ul> - -<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine">Using an online tool like GitHub or Google App Engine</h3> - -<p>Some tools let you publish your website online:</p> - -<ul> - <li><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for storage in the <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to expose website code live on the web.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> for more information.</li> -</ul> - -<p>These options are usually free, but you may outgrow the limited feature-set.</p> - -<h3 id="Using_a_web-based_IDE_such_as_CodePen">Using a web-based IDE such as CodePen</h3> - -<p>There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript, and then display the result of that code as a website — all in one browser tab. Generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to share a technique with or ask for debugging help from colleagues in a different office), and free (for basic features). They host your rendered page at a unique web address. However, the features are limited, and these apps usually don't provide hosting space for assets (like images).</p> - -<p>Try playing with some of these examples to find out which one works best for you:</p> - -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://glitch.com/">Glitch</a></li> - <li><a href="http://jsbin.com/">JS Bin</a></li> - <li><a href="https://codepen.io/">CodePen</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> - -<h2 id="Publishing_via_GitHub">Publishing via GitHub</h2> - -<p>Now let's examine how to easily publish your site via GitHub Pages.</p> - -<ol> - <li>First of all, <a href="https://github.com/">sign up for GitHub</a> and verify your email address.</li> - <li>Next, you need to <a href="https://github.com/new">create a repository</a> to store files.</li> - <li>On this page, in the <em>Repository name</em> box, enter <em>username</em>.github.io, where <em>username</em> is your username. For example, our friend Bob Smith would enter <em>bobsmith.github.io</em>.<br> - Check the "<em>Initialize this repository with a README" </em>box. Then click <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>Drag and drop the content of your website folder into your repository. Then click <em>Commit changes</em>.<br> - - <div class="note"> - <p><strong>Note</strong>: Make sure your folder has an <code>index.html</code> file.</p> - </div> - </li> - <li> - <p>Navigate your browser to <em>username</em>.github.io to see your website online. For example, for the username <em>chrisdavidmills</em>, go to <a href="http://chrisdavidmills.github.io/"><em>chrisdavidmills</em>.github.io</a>.</p> - - <div class="note"> - <p><strong>Note</strong>: It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.</p> - </div> - </li> -</ol> - -<p>To learn more, see <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> - -<h2 id="Further_reading">Further reading</h2> - -<ul> - <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> - <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> - -<h2 id="W_tym_module"><font><font>W tym module</font></font></h2> - -<ul> - <li id="Installing_basic_software"><a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>Instalowanie podstawowego oprogramowania</font></font></a></li> - <li id="What_will_your_website_look_like"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><font><font>Jak będzie wyglądać Twoja strona internetowa?</font></font></a></li> - <li id="Dealing_with_files"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>Radzenie sobie z plikami</font></font></a></li> - <li id="HTML_basics"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics"><font><font>Podstawy HTML</font></font></a></li> - <li id="CSS_basics"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics"><font><font>Podstawy CSS</font></font></a></li> - <li id="JavaScript_basics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics"><font><font>Podstawy JavaScript</font></font></a></li> - <li id="Publishing_your_website"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website"><font><font>Publikowanie Twojej witryny</font></font></a></li> - <li id="How_the_web_works"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works"><font><font>Jak działa internet</font></font></a></li> -</ul> diff --git a/files/pl/learn/html/introduction_to_html/getting_started/index.html b/files/pl/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 1f40b24429..0000000000 --- a/files/pl/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,763 +0,0 @@ ---- -title: Rozpoczynanie pracy z HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div> -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> -</div> - -<p class="summary">W tym artykule omówimy podstawy HTMLa. Żeby ułatwić ci rozpoczęcie nauki, zapoznamy się z elementami, atrybutami i innymi ważnymi terminami, które być może obiły ci się o uszy. Opowiemy też, jak te terminy odnoszą się do HTMLa. Nauczysz się jaką strukturę mają elementy wykorzystywane w HTMLu, jak wygląda struktura całej strony oraz poznasz inne ważne właściwości języka. W międzyczasie będzie okazja, aby też samemu poeksperymentować z pisaniem kodu!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Warunki wstępne:</th> - <td>Podstawowa umiejętność obsługi komputera, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">posiadanie podstawowego oprogramowania</a> oraz typowa wiedza jak <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">pracować z plikami</a>.</td> - </tr> - <tr> - <th scope="row">Cel:</th> - <td>Zapoznanie się z językiem HTML oraz zastosowanie w praktyce kilku jego elementów</td> - </tr> - </tbody> -</table> - -<h2 id="Czym_jest_HTML">Czym jest HTML?</h2> - -<p>{{glossary("HTML")}} (Hypertext Markup Language) nie jest językiem programowania. Jest to <em>język znaczników</em>, który mówi przeglądarce jaką strukturę ma strona, którą odwiedzasz. Może być ona albo bardzo skomplikowana albo bardzo prosta. Zależy to wyłącznie od osoby piszącej stronę. Na HTML składa się kolekcja {{glossary("Element", "elementów")}}, która służy do opisywania i grupowania treści, dzięki której zachowuje się ona, lub wygląda, w określony sposób. Okalające treść {{glossary("Tag", "tagi")}} mogą sprawić, że treść stanie się ona hiperłączem do innej strony, zostanie napisana kursywą oraz wiele innych rzeczy. Dla przykładu, spójrzmy na ten tekst:</p> - -<pre class="notranslate">Mój kot jest bardzo humorzasty</pre> - -<p>Jeżeli chcielibyśmy aby ten tekst się wyróżniał, możemy wydzielić go do oddzielnego akapitu, za pomocą elementu {{htmlelement("p")}}:</p> - -<pre class="brush: html notranslate"><p>Mój kot jest bardzo humorzasty</p></pre> - -<div class="note"> -<p><strong>Notka</strong>: Tagi HTMLa nie rozróżniają wielkości liter. Dla przykładu, tag {{htmlelement("title")}} może zostać zapisany jako <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTlE></code>, etc. i nadal będzie działał. Jednakże dobrą praktyką jest pisanie nazw tagów małą literą, dla spójności, czytelność i kilku innych powodów</p> -</div> - -<h2 id="Anatomia_elementu_HTML">Anatomia elementu HTML</h2> - -<p>Zagłębmy się w nasz akapit, który napisaliśmy w poprzedniej sekcji:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>Anatomia tego elementu to:</p> - -<ul> - <li><strong>Tag otwierający:</strong> Składa się z nazwy elementu (w naszym przypadku <em>p</em>, pochodzącej od angielskiego słowa określającego akapit - <em>paragraph</em>), otoczonej nawiasami ostrokątnymi. Tag otwierający określa gdzie element się zaczyna, w tym przypadku gdzie zaczyna się akapit</li> - <li><strong>Zawartość:</strong> Jest nią to, co element ma przechowywać. W tym przypadku jest to treść akapitu</li> - <li><strong>Tag zamykający:</strong> Wygląda tak samo jak tag otwierający, z wyjatkiem posiadana przed nazwą ukośnika. Określa gdzie element się kończy. Jego brak może skutkować dziwacznymi błędami, więc szczególnie na początku nauki należy pamiętać o jego umieszczeniu</li> -</ul> - -<p>Podsumowując: Element to tag otwierający, po którym następuje jego treść, a po treści znajduje się tag zamykający</p> - -<h3 id="Aktywne_uczenie_się_tworzenie_twojego_pierwszego_elementu_HTML">Aktywne uczenie się: tworzenie twojego pierwszego elementu HTML</h3> - -<p>Zedytuj poniższą linijkę, otaczając ją tagami <code><em></code> oraz <code></em>.</code> Aby określić początek elementu, umieść tag otwierający <code><em></code> na początku linijki. Aby określić koniec elementu, umieść tag zamykający <code></em></code> na końcu linijki. Zrobienie tego powinno pokazać linijkę tekstu wypisaną kursywą!</p> - -<p>Jeżeli popełnisz błąd, możesz przywrócić pracę do stanu początkowego za pomocą przycisku <em>Reset</em>. Gdybyś nie wiedział jak wykonać to zadanie, możesz kliknąć w przycisk <em>Pokaż rozwiązanie</em>, aby zobaczyć gotowe rozwiązanie</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html notranslate"><h2>Podgląd na żywo</h2> -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Kod do edycji</h2> -<p class="a11y-label">Naciśnij ESC, aby zabrać fokus z pola wejścia (Tab wstawia znak tabulatora).</p> - -<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> - Ten oto tekst jest mój -</textarea> - -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Pokaż rozwiązanie" /> -</div> -</pre> - -<pre class="brush: css notranslate">html { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<em>This is my text.</em>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Zagnieżdżanie_elementów">Zagnieżdżanie elementów</h3> - -<p>Elementy mogą znajdować się wewnątrz innych elementów. Nazywa się to <em>zagnieżdżaniem</em>. Jeżeli chcielibyśmy zaznaczyć, że nasz kot jest <strong>bardzo</strong> humorzasty, możemy zamknąć słowo <em>bardzo</em> w elemencie {{htmlelement("strong")}}, który wytłuści podany mu tekst</p> - -<pre class="brush: html notranslate"><p>Mój kot jest <strong>bardzo</strong> humorzasty.</p></pre> - -<p>Zagnieżdżanie można zrobić w poprawny oraz niepoprawny sposób. W powyższym przykładzie otworzyliśmy najpierw element <code>p</code>, potem element <code>strong</code>. Aby zadnieżdżanie zadziałało, musimy najpier zamknąć element <code>strong</code>, a następnie element <code>p</code>.</p> - -<p>Poniżej znajduje się przykład <em>niepoprawnego</em> zagnieżdżania:</p> - -<pre class="example-bad brush: html notranslate"><p>Mój kot jest <strong>bardzo humorzasty.</p></strong></pre> - -<p><strong>Jeżeli tak jest otwarty w jakimś elemencie, musi też być w nim zamknięty</strong>. Jeżeli pomieszamy tagi zamykające, tak jak w powyższym przykładzie, przeglądarka będzie musiała zgadywać, o co nam chodziło. A to zgadywanie może prowadzić do nieoczekiwanych wyników</p> - -<h3 id="Elementy_blokowe_a_elementy_w_linii">Elementy blokowe, a elementy w linii</h3> - -<p>There are two important categories of elements to know in HTML: block-level elements and inline elements.</p> - -<ul> - <li>Block-level elements form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li> - <li>Inline elements are contained within block-level elements, and surround only small parts of the document’s content. (not entire paragraphs or groupings of content) An inline element will not cause a new line to appear in the document. It is typically used with text. For example, as an {{htmlelement("a")}} element (hyperlink) or emphasis elements such as {{htmlelement("em")}} or {{htmlelement("strong")}}.</li> -</ul> - -<p>Consider the following example:</p> - -<pre class="brush: html notranslate"><em>first</em><em>second</em><em>third</em> - -<p>fourth</p><p>fifth</p><p>sixth</p> -</pre> - -<p>{{htmlelement("em")}} is an inline element. As you see below, the first three elements sit on the same line, with no space in between. On the other hand, {{htmlelement("p")}} is a block-level element. Each <em>p</em> element appears on a new line, with space above and below. (The spacing is due to default <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> that the browser applies to paragraphs.)</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> - -<div class="note"> -<p><strong>Note</strong>: HTML5 redefined the element categories: see <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Element content categories</a>. While these definitions are more accurate and less ambiguous than their predecessors, the new definitions are a lot more complicated to understand than <em>block</em> and <em>inline. </em>This article will stay with these two terms.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: The terms <em>block</em> and <em>inline</em>, as used in this article, should not be confused with <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a> that have the same names. While the names correlate by default, changing the CSS display type doesn't change the category of the element, and doesn't affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Find useful reference pages that include lists of block and inline elements. See <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> and <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> -</div> - -<h3 id="Puste_elementy">Puste elementy</h3> - -<p>Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. For example, the {{htmlelement("img")}} element embeds an image file onto a page:</p> - -<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>This would output the following:</p> - -<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: Empty elements are sometimes called <em>void elements</em>.</p> -</div> - -<h2 id="Atrybuty">Atrybuty</h2> - -<p>Elements can also have attributes. Attributes look like this:</p> - -<p><img alt='&amp;amp;amp;amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Attributes contain extra information about the element that won't appear in the content. In this example, the <strong><code>class</code></strong> attribute is an identifying name used to target the element with style information.</p> - -<p>An attribute should have:</p> - -<ul> - <li>A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)</li> - <li>The attribute name, followed by an equal sign.</li> - <li>An attribute value, wrapped with opening and closing quote marks.</li> -</ul> - -<h3 id="Aktywne_uczenie_się_Dodawanie_atrybutów_do_elementu">Aktywne uczenie się: Dodawanie atrybutów do elementu</h3> - -<p>Another example of an element is {{htmlelement("a")}}. This stands for <em>anchor</em>. An anchor can make the text it encloses into a hyperlink. Anchors can take a number of attributes, but several are as follows:</p> - -<ul> - <li><strong><code>href</code></strong>: This attribute's value specifies the web address for the link. For example: <code>href="https://www.mozilla.org/"</code>.</li> - <li><strong><code>title</code></strong>: The <code>title</code> attribute specifies extra information about the link, such as a description of the page that is being linked to. For example, <code>title="The Mozilla homepage"</code>. This appears as a tooltip when a cursor hovers over the element.</li> - <li><strong><code>target</code></strong>: The <code>target</code> attribute specifies the browsing context used to display the link. For example, <code>target="_blank"</code> will display the link in a new tab. If you want to display the linked content in the current tab, just omit this attribute.</li> -</ul> - -<p>Edit the line below in the <em>Input</em> area to turn it into a link to your favorite website.</p> - -<ol> - <li>Add the <code><a></code> element.</li> - <li>Add the <code>href</code> attribute and the <code>title</code> attribute.</li> - <li>Specify the <code>target</code> attribute to open the link in the new tab.</li> -</ol> - -<p>You'll be able to see your changes update live in the <em>Output</em> area. You should see a link—that when hovered over—displays the value of the <code>title</code> attribute, and when clicked, navigates to the web address in the <code>href</code> attribute. Remember that you need to include a space between the element name, and between each attribute.</p> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html notranslate"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;A link to my favorite website.&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Atrybuty_logiczne">Atrybuty logiczne</h3> - -<p>Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the {{htmlattrxref("disabled", "input")}} attribute, which you can assign to form input elements. (You use this to <em>disable</em> the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:</p> - -<pre class="notranslate"><input type="text" disabled="disabled"></pre> - -<p>As shorthand, it is acceptable to write this as follows:</p> - -<pre class="brush: html notranslate"><!-- using the disabled attribute prevents the end user from entering text into the input box --> -<input type="text" disabled> - -<!-- text input is allowed, as it doesn't contain the disabled attribute --> -<input type="text"> -</pre> - -<p>For reference, the example above also includes a non-disabled form input element.The HTML from the example above produces this result:</p> - -<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Pomijanie_cudzysłowia_przy_wartościach_atrybutu">Pomijanie cudzysłowia przy wartościach atrybutu</h3> - -<p>If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. For example, if we revisit our link example from earlier, we could write a basic version with <em>only</em> the <code>href</code> attribute, like this:</p> - -<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>favorite website</a></pre> - -<p>However, as soon as we add the <code>title</code> attribute in this way, there are problems:</p> - -<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a></pre> - -<p>As written above, the browser misinterprets the markup, mistaking the <code>title</code> attribute for three attributes: a title attribute with the value <em>The</em>, and two Boolean attributes, <code>Mozilla</code> and <code>homepage</code>. Obviously, this is not intended! It will cause errors or unexpected behavior, as you can see in the live example below. Try hovering over the link to view the title text!</p> - -<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Always include the attribute quotes. It avoids such problems, and results in more readable code.</p> - -<h3 id="Cudzysłów_pojedynczy_czy_podwójny">Cudzysłów pojedynczy czy podwójny?</h3> - -<p>In this article you will also notice that the attributes are wrapped in double quotes. However, you might see single quotes in some HTML code. This is a matter of style. You can feel free to choose which one you prefer. Both of these lines are equivalent:</p> - -<pre class="brush: html notranslate"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing quotes that will go wrong:</p> - -<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>However, if you use one type of quote, you can include the other type of quote <em>inside</em> your attribute values:</p> - -<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>To use quote marks inside other quote marks of the same type (single quote or double quote), use <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML entities</a>. For example, this will break:</p> - -<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> - -<p>Instead, you need to do this:</p> - -<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> - -<h2 id="Anatomia_dokumentu_HTML">Anatomia dokumentu HTML</h2> - -<p>Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>Here we have:</p> - -<ol> - <li><code><!DOCTYPE html></code>: The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this: - - <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype. That is all you need to know!</li> - <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the page. It is sometimes known as the root element.</li> - <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for eveything you want to include on the HTML page, <strong>that isn't the content</strong> the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You'll learn more about this in the next article of the series.</li> - <li><code><meta charset="utf-8"></code>: This element specifies the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.</li> - <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.</li> - <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.</li> -</ol> - -<h3 id="Aktywne_uczenie_się_Dodawanie_paru_właściwości_do_dokumentu_HTML">Aktywne uczenie się: Dodawanie paru właściwości do dokumentu HTML</h3> - -<p>If you want to experiment with writing some HTML on your local computer, you can:</p> - -<ol> - <li>Copy the HTML page example listed above.</li> - <li>Create a new file in your text editor.</li> - <li>Paste the code into the new text file.</li> - <li>Save the file as <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p>You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially the page looks like this:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). Sharpen your skills by implementing the following tasks:</p> - -<ul> - <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> - <li>Edit the paragraph content to include text about a topic that you find interesting.</li> - <li>Make important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag.</li> - <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> - <li>Add an image to your document. Place it below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. Earn bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web).</li> -</ul> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html notranslate"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;This is my page&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; -} - -h1 { - color: blue; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -img { - max-width: 100%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js notranslate">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Białe_znaki_w_HTMLu">Białe znaki w HTMLu</h3> - -<p>In the examples above, you may have noticed that a lot of whitespace is included in the code. This is optional. These two code snippets are equivalent:</p> - -<pre class="brush: html notranslate"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p>No matter how much whitespace you use inside HTML element content (which can include one or more space character, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. So why use so much whitespace? The answer is readability.<br> - <br> - It can be easier to understand what is going on in your code if you have it nicely formatted. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you to choose the style of formatting (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> - -<h2 id="Znaki_specjalne_w_HTML">Znaki specjalne w HTML</h2> - -<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code.</p> - -<p>You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Literal character</th> - <th scope="col">Character reference equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p>The character reference equivalent could be easily remembered because the text it uses can be seen as less than for '&lt;' , quotation for ' &quot; ' and similarly for others. To find more about entity reference, see <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a> (Wikipedia).<br> - <br> - In the example below, there are two paragraphs:</p> - -<pre class="brush: html notranslate"><p>In HTML, you define a paragraph using the <p> element.</p> - -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> - -<p>In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <code><p></code> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.</p> - -<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long, as your HTML's <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">character encoding is set to UTF-8</a>.</p> -</div> - -<h2 id="Komentarze_HTML">Komentarze HTML</h2> - -<p>HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.</p> - -<p>To write an HTML comment, wrap it in the special markers <code><!--</code> and <code>--></code>. For example:</p> - -<pre class="brush: html notranslate"><p>I'm not inside a comment</p> - -<!-- <p>I am!</p> --></pre> - -<p>As you can see below, only the first paragraph displays in the live output.</p> - -<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Podsumowanie">Podsumowanie</h2> - -<p>You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.<br> - <br> - At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.</p> - -<div class="note"> -<p><strong>Note</strong>: As you start to learn more about HTML, consider learning the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language used to style web pages. (for example, changing fonts or colors, or altering the page layout) HTML and CSS work well together, as you will soon discover.</p> -</div> - -<h2 id="Zobacz_również">Zobacz również</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> -</ul> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<div></div> - -<h2 id="W_tym_module">W tym module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> diff --git a/files/pl/learn/javascript/first_steps/math/index.html b/files/pl/learn/javascript/first_steps/math/index.html deleted file mode 100644 index b1931711f1..0000000000 --- a/files/pl/learn/javascript/first_steps/math/index.html +++ /dev/null @@ -1,456 +0,0 @@ ---- -title: Basic math in JavaScript — numbers and operators -slug: Learn/JavaScript/First_steps/Math -translation_of: Learn/JavaScript/First_steps/Math -original_slug: Learn/JavaScript/Pierwsze_kroki/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/server-side/django/index.html b/files/pl/learn/server-side/django/index.html deleted file mode 100644 index 1eb4d61586..0000000000 --- a/files/pl/learn/server-side/django/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Django Web Framework (Python) -slug: Learn/Server-side/Django -tags: - - Beginner - - CodingScripting - - Intro - - Learn - - NeedsTranslation - - Python - - Server-side programming - - TopicStub - - django -translation_of: Learn/Server-side/Django ---- -<div>{{LearnSidebar}}</div> - -<p>Django is an extremely popular and fully featured server-side web framework, written in Python. This module shows you why Django is one of the most popular web server frameworks, how to set up a development environment, and how to start using it to create your own web applications.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module you don't need to have any knowledge of Django. Ideally, you would need to understand what server-side web programming and web frameworks are by reading the topics in our <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> module.</p> - -<p>A general knowledge of programming concepts and <a href="/en-US/docs/Glossary/Python">Python</a> is recommended, but is not essential to understanding the core concepts.</p> - -<div class="note"> -<p><strong>Note</strong>: Python is one of the easiest programming languages for novices to read and understand. That said, if you want to understand this module better, there are numerous free books and tutorials available on the Internet to help you out (new programmers might want to check out the <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> page on the python.org wiki).</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></dt> - <dd>In this first Django article we answer the question "What is Django?" and give you an overview of what makes this web framework special. We'll outline the main features, including some advanced functionality that we won't have time to cover in detail in this module. We'll also show you some of the main building blocks of a Django application, to give you an idea of what it can do before you set it up and start playing.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></dt> - <dd>Now that you know what Django is for, we'll show you how to set up and test a Django development environment on Windows, Linux (Ubuntu), and macOS — whatever common operating system you are using, this article should give you what you need to be able to start developing Django apps.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt> - <dd>The first article in our practical tutorial series explains what you'll learn, and provides an overview of the "local library" — an example website we'll be working through and evolving in subsequent articles.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt> - <dd>This article shows how you can create a "skeleton" website project as a basis, which you can then go on to populate with site-specific settings, urls, models, views, and templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt> - <dd>This article shows how to define models for the <em>LocalLibrary</em> website — models represent the data structures we want to store our app's data in, and also allow Django to store data in a database for us (and modify it later on). It explains what a model is, how it is declared, and some of the main field types. It also briefly shows a few of the main ways you can access model data.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt> - <dd>Now that we've created models for the <em>LocalLibrary </em>website, we'll use the Django Admin site to add some "real" book data. First we'll show you how to register the models with the admin site, then we'll show you how to login and create some data. At the end we show some ways in which you can further improve the presentation of the admin site.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt> - <dd>We're now ready to add the code to display our first full page — a home page for the <em>LocalLibrary</em> that shows how many records we have of each model type and provides sidebar navigation links to our other pages. Along the way we'll gain practical experience in writing basic URL maps and views, getting records from the database, and using templates.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt> - <dd>This tutorial extends our <em>LocalLibrary</em> website, adding list and detail pages for books and authors. Here we'll learn about generic class-based views, and show how they can reduce the amount of code you have to write for common use cases. We'll also go into URL handling in greater detail, showing how to perform basic pattern matching.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt> - <dd>This tutorial extends our <em>LocalLibrary</em> website, adding a session-based visit-counter to the home page. This is a relatively simple example, but it does show how you can use the session framework to provide persistent behaviour for anonymous users in your own sites.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt> - <dd>In this tutorial we'll show you how to allow users to login to your site with their own accounts, and how to control what they can do and see based on whether or not they are logged in and their <em>permissions</em>. As part of this demonstration we'll extend the <em>LocalLibrary</em> website, adding login and logout pages, and user- and staff-specific pages for viewing books that have been borrowed.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt> - <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Django, and in particular the easiest way to write forms to create, update, and delete model instances. As part of this demonstration we'll extend the <em>LocalLibrary</em> website so that librarians can renew books, and create, update, and delete authors using our own forms (rather than using the admin application).</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt> - <dd>As websites grow they become harder to test manually — not only is there more to test, but, as the interactions between components become more complex, a small change in one area can require many additional tests to verify its impact on other areas. One way to mitigate these problems is to write automated tests, which can easily and reliably be run every time you make a change. This tutorial shows how to automate <em>unit testing</em> of your website using Django's test framework.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt> - <dd>Now you've created (and tested) an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> - <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt> - <dd>Protecting user data is an essential part of any website design. We previously explained some of the more common security threats in the article <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> — this article provides a practical demonstration of how Django's built-in protections handle such threats.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessment will test your understanding of how to create a website using Django, as described in the guides listed above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></dt> - <dd>In this assessment you'll use some of the knowledge you've learned from this module to create your own blog.</dd> -</dl> diff --git a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html deleted file mode 100644 index 5ddb035fab..0000000000 --- a/files/pl/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Understanding client-side JavaScript frameworks -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks -tags: - - Beginner - - Frameworks - - JavaScript - - Learn - - NeedsTranslation - - TopicStub - - client-side -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.</p> - -<p class="summary">As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p> - -<p class="summary">In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:</p> - -<ul> - <li class="summary">Why should I use a framework? What problems do they solve for me?</li> - <li class="summary">What questions should I ask when trying to choose a framework? Do I even need to use a framework?</li> - <li class="summary">What features do frameworks have? How do they work in general, and how do frameworks' implementations of these features differ?</li> - <li class="summary">How do they relate to "vanilla" JavaScript or HTML?</li> -</ul> - -<p class="summary">After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.</p> - -<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> - -<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> - - -<div class="callout"> -<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="Introductory_guides">Introductory guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> - <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> - <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> -</dl> - -<h2 id="React_tutorials">React tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> - <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> - <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> - <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> - <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> - <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> - <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> - <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> -</dl> - -<h2 id="Ember_tutorials">Ember tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> - <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> - <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> - <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> - <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> - <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> - <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> -</dl> - -<h2 id="Vue_tutorials">Vue tutorials</h2> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p> - -<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> -</div> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> - <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> - <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> - <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> - <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> - <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> - <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> - <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> - <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> - <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> -</dl> - -<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2> - -<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p> - -<ul> - <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li> - <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li> - <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li> - <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li> -</ul> - -<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p> - -<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p> |