To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

Witamy w MDN na kursie JavaScript dla początkujących! W tym pierwszym artykule przyjrzymy się JavaScript z pewnej odległości, odpowiadając na pytania w stylu "co to jest?" i "co on robi?" oraz upewnimy się, że rozumiesz cel, któremu służy JavaScript.

Wymagania wstępne: Podstawowa znajomość komputera, podstawowa znajomość HTML i CSS.
Cel: Zapoznanie z istotą JavaScript, co on robi i jak jest dopasowywany do strony internetowej.

Definicja ogólna

JavaScript to język programowania, który umożliwia wdrożenie na stronie internetowej skomplikowanych elementów, dzięki którym strona ta może nie tylko wyświetlać statyczne informacje, ale również obsługiwać zmianę treść odpowiednio do sytuacji, wyświetlać interaktywne mapy i animacje grafiki 2D/3D , wyświetlać video itd. Jest to trzecia warstwa standardowych technologii internetowych, z których dwie (HTML i CSS) omówiliśmy w innych częściach "Strefy nauki".

  • HTML jest to język znaczników, który używa się do sformułowania dokumentu HTML (wyświetlanego jako strona przeglądarki) i strukturyzacji treści zawartej w dokumencie HTML, na przykład zdefiniowania akapitów, nagłówków i tabel danych czy osadzenia obrazów i wideo.
  • CSS jest to język reguł stylizacji, który używa się do stylizacji dokumentu HTML, na przykład ustawienia kolorów tła lub czcionki i układania treści w wielu kolumnach.
  • JavaScript jest to skryptowy język, który umożliwia  obsługę dynamicznego tworzenia treści na stronie internetowej, kontrolowanie multimediów, animację obrazów i prawie wszystko inne  (mo dobrze, nie wszystko, ale to niesamowite, co można osiągnąć kilkoma liniami kodu JavaScript.)

Te trzy warstwy układają się jedna na drugiej. Jako przykład weźmy prostą etykietę tekstową. Możemy ją oznaczyć używajac kodu HTML, aby nadać jej strukturę:

<p>Player 1: Chris</p>

Następnie możemy dodać kod CSS, aby nadać ładny wygląd:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor:pointer;
}

Na końcu możemy dodać kod Javascript, aby zaimplementować dynamiczne zachowanie:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Kliknij na przycisk (etykietę tekstową), aby zobaczyć co się dzieje (na GitHub mozesz znależć kod źróðłowy i wersję demo — zobacz kod źródłowy lub przykład na żywo)!

JavaScript pozwala osiągać o wiele bardziej zaawansowane efekty - sprawdź poniżej jego możliwości.

Co można zrobić?

Rdzeń języka JavaScript składa się z kilku funkcjonalności, które umożliwiają wykonanie rzeczy, takich jak te: 

  • Przechowywanie wartości w zmiennych. W powyższym przykładzie pytamy użytkownika o imię, które następnie zapisujemy w zmiennej o nazwie name.
  • Operowanie na porcjach tekstu (zwanych w programowaniu "łańcuchami"). W powyższym przykładzie używamy łańcucha "Player 1: ", który łączymy ze zmienną name, aby stworzyć etykietę ''Player 1: Chris".
  • Uruchamianie kodu w odpowedzi na określone zdarzenia zaistniałe na stronie internetowej. W naszym przykładzie użyliśmy zdarzenie click do wykrywania klknięć przycisku (etykiety tekstowej). Po kliknieciu przycisku, uruchamiany jest kod, który zmienia etykiete tekstową.
  • I wiele więcej!

Jeszcze bardziej ekscytująca jest możliwość stosowania tzw. interfejsów programowania aplikacji (ang. Application Programming Interfaces - API), działających na szczycie rdzenia języka JavaScript.

Interfejsy API są gotowymi zestawami bloków kodu, które umożliwiają programistom implementować programy, które w przeciwnym razie byłyby bardzo trudne do napisania przez programistę a nawet często niemożliwe do napisania przez niego. Spełniają one w programowaniu tą samą rolę, co gotowe segmenty mebli przy umeblowaniu domu — o wiele łatwiej jest wykorzystać gotowe panele i je poskręcać, niż samemu opracować projekt mebli, znaleźć drewno, pociąć go na deski, wysuszyć, przyciąć je na elementy swoich mebli i w końcu je samemu zmontować.

Interfejsy API dzielą się ogólnie na dwie kategorie:

Interfesy API przeglądarek internetowych, które są wbudowane w przeglądarki. Służą do udostępniania danych z komputera, ale też mogą wykonywać bardziej zaawansowane rzeczy. Na przykład:

  • API DOM (Document Object Model) pozwala manipulować kodem HTML i CSS, tworząc, usuwając i zmianiając kod HTML, dynamiczne dodając do strony nowe style. Za każdym razem kiedy widzisz wyskakujące okienko pojawiające się na stronie lub zmianę fragmentu treści strony, to właśnie sprawka API DOM.
  • API Geolokalizacji pozwala na pobranie informacji lokalizacyjnych i nie tylko. Google Maps używa tego API do znalezienieaTwojej lokalizacji i wyświetlenia jej na mapie.
  • API Canvas i API WebGL umożliwiają tworzenie animacji 2D i 3D. Ludzie tworzą naprawdę szalone rzeczy używając tych technologii - sprawdź sam - Chrome Experiments i webglsamples.
  • Interfejsy Audio i wideo, takie jak HTMLMediaElement czy WebRTC umożliwiają robienie niezwykle interesujących rzeczy z multimediami, jak odtwarzanie wideo czy muzyki bezpośrednio na stronie internetowej, albo pobieranie transmisji wideo z Twojej kamery internetowej i wyświetlanie jej na stronie (sprawdź Snapshot demo).

Uwaga: wiele z powyższych przykładów nie będzie działać w starszych przeglądarkach - podczas eksperymentowania warto używać najnowszych wersji przeglądarek takich jak Firefox, Chrome, Edge czy Opera. Powinieneś także brać pod uwagę konieczność testowania swoich rozwiązań w wielu przegladarkach. Kod, który działa dobrze w Chrome nie zawsze będzie działał w Edge. (sprawdź: Testowanie wieloprzegladarkowe).

Zewnętrzne interfejsy API nie są wbudowane w przeglądarki i trzeba samemu pobrać ich kod i informacje o zastosowaniu. Na przykład:

  • API Twitter umożliwia wyświetlania najnowszych tweetów na stronie internetowej.
  • API Google Maps daje możliwość wyświetlania map na stronie internetowej oraz dostarcza innych związanych funkcji.

 

Uwaga:  Interfesy API są zaawansowane i nie będziemy ich tu opisywać, możesz znaleźć o nich więcej informacji w module Interfejsy API działające po stronie klienta.

 

W Internecie dostępnych jest bardzo dużo bibliotek API działających z przegladarkami internetowymi, ale jest to "temat na później". Nie zbudujesz następnego Facebooka czy Google Maps po 24 godzinach nauki JavaScriptu. Jest wiele zagadnień podstawowych, które musisz najpierw opanować. Ale przecież po to tu jesteś!

 

Co robi JavaScript na stronie internetowej?

Tutaj zaczniemy faktycznie przyglądać się pewnemu kodowi i robiąc to, zbadamy, co takiego dzieje się po uruchomieniu tego kodu na stronie internetowej.

Przypomnijmy sobie, co dzieje się podczas ładowania strony internetowej w przeglądarce (pierwsz raz omówiliśmy to w artykule Jak działa CSS). Po załadowaniu strony internetowej (dokumentu HTML) do przeglądarki, zostaje uruchomioney jej kod (HTML, CSS i JavaScript) w środowisku wykonawczym tworzonym przez przeglądarkę (zakładka przegladarki). Jest to podobne do fabryki, która przyjmuje surowe materiały (kod) a wypuszcza gotowy produkt (stronę internetową).

 

JavaScript jest wykonywany przez silnik JavaScriptu w przeglądarce, po tym jak HTML i CSS zostaną skompletowane w stronę internetową. To zapewnia to, że struktura i style strony są już na miejscu w momencie gdy JavaScript zaczyna pracę.

Jest to przydatne, jako że popularnym zastosowaniem JavaScriptu jest dynamiczne modyfikowanie HTMLa i CSSa aby edytować interfejs poprzez Document Object Model API. Jeżeli JavaScript załadowałby się i próbował wykonywać się przed tym jak HTML i CSS zostały załadowane, wtedy wystąpiłyby błędy.

Bezpieczeństwo przeglądarki

Każda karta przeglądarki jest swoim własnym kontenerem dla kodu, który w niej się wykonuje (te kontenery są nazywane technicznie "środowiskami wykonywania" (ang. "execution environments") - oznacza to, ze w większości przypadków kod w każdej karcie jest wykonywany oddzielnie i kod z jednej z kart nie jest w stanie bezpośrednio wpłynąć na ten wykonujący się w innej karcie. Jest to przykład dobrego środka bezpieczeństwa - jeżeli by tak nie było, wtedy możliwe stałoby się pisanie kodu, który wykradałby dane z innych witryn oraz  byłby w stanie wykonywać inne, podobnie złe rzeczy.

Notatka:  Istnieją sposoby na bezpieczne wysyłanie kodu i danych pomiędzy różnymi stronami/kartami. Wykraczają one jednak poziomem poza ten kurs i nie zostaną one tu omówione.

Kolejność wykonywania kodu JavaScript

Kiedy przeglądarka napotyka blok kodu JS, wykonuje go po kolei, od góry do dołu. Oznacza to, że musisz być ostrożny, w jakiej kolejności umieszczasz instrukcje. Aby ukazać to zjawisko, wróćmy do bloku kodu z pierwszego przykładu:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Na początku wybieramy pierwszy paragraf (linia 1), dołączamy do niego event listener (linia 3), aby kiedy zostanie on klinięty, blok  updateName() (linie 5- 8) został uruchomiony. Blok  updateName() (ten typ kodu możliwego do użycia ponownie jest nazywany funkcją) pyta użytkownika o nowe imię, po czym wstawia to podane imię do paragrafu, aby uaktualnić widok.

Jeżeli zamieniłbyś kolejność dwóch pierwszych linii kodu, przestałoby to działać - zamiast tego pojawiłby się błąd w konsoli przeglądarki - TypeError: para is undefined. Oznacza on, że ten obiekt jeszcze nie istnieje, a więc nie możemy dodać do niego event listenera.

Notatka: Jest to bardzo popularny błąd - musisz uważać na to, że obiekty do których istnieją odwołania istnieją przed tym jak cokolwiek z nimi zrobisz.

Kod interpretowany kontra kompilowany

Mogłeś usłyszeć pojęcie kodu interpretowanego i kompilowanego. JavaScript jest językiem interpretowanym - kod jest wykonywany od góry do dołu i wynik jest zwracany natychmiastowo. Nie musisz transformować kodu w jakąś inną postać przed tym jak przeglądarka go wykona.

Języki kompilowane są natomiast transformowane (kompilowane) do innej formy przed ich wykonaniem. Dla przykładu C/C++ jest kompilowane do kodu assemblera, który jest następnie wykonywany przez komputer.

Oba te podejścia mają swoje wady i zalety, które nie zostaną tutaj omówione.

Kod server-side kontra client-side

Mogłeś także słyszeć pojęcia server-side i client-side, szczególnie w odniesieniu do tworzenia stron internetowych. Kod client-side jest kodem, który jest wykonywany na komputerze użytkownika - kiedy strona jest wyświetlana, kod client-side jest pobierany, następnie uruchamiany i wyświetlany przez przeglądarkę. W tym module JavaScript mówimy jednoznacznie o client-side JavaScript.

Kod server-side jest natomiast wykonywany na serwerze, po czym wynik wykonania jest pobierany i wyświetlany przez przeglądarkę. Popularnymi przykładami języków server-side są PHP, Python, Ruby czy ASP.NET. I JavaScript! JavaScript może być także użyty jako język server-side, na przykład w popularnym środowisku Node.js - możesz więcej dowiedzieć się o tym w naszym poradniku Dynamic Websites – Server-side programming

Słowo dynamiczny jest użyte zarówno do opisania zarówno client-side JavaScript i języki server-side — odnosi się ono do możliwości uaktualnienia widoku strony/aplikacji, aby możliwe było pokazanie różnych rzeczy w różnych okolicznościach; generując nową zawartość w zależności od potrzeb. Kod server-side  dynamicznie generuje nową zawartość na serwerze, na przykład stworzenie nowej tabeli HTML, kiedy client-side JavaScript dynamicznie generuje nową zawartość, na przykład tworząc nową tabelę HTML, wstawiając dane pobrane z serwera, następnie pokazując użytkownikowi tabelę na stronie. Znaczenie słowa jest lekko inne, ale podobne,  w dwóch kontekstach użycia i te dwa podejścia (server-side i client-side) zwykle współpracują ramię w ramię.

Strona bez dynamicznie uaktualnianej zawartości nazywa się statyczną - zawsze pokazuje to samo.

W jaki sposób dodać JavaScript do twojej strony?

JavaScript jest dołączany do strony HTML w podobny sposób jak odbywa się to w wypadku CSS. Podczas gdy CSS używa elementów <link> do dołączania zewnętrznych arkuszów i <style> do dołączenia stylów bezpośrednio w dokumencie, JS potrzebuje tylko jednej rzeczy - elementu <script>. Dowiedzmy się, jak to działa.

Osadzony JavaScript

  1. Po pierwsze stwórz lokalną kopię naszego przykładowego pliku apply-javascript.html. Zapisz go gdzieś w katalogu.
  2. Otwórz plik w twojej przeglądarce i edytorze tekstu. Ujrzysz prostą stronę z przyciskiem, który można kliknąć.
  3. Następnie wejdź do edytora i dodaj następujący kod tuż przed końcem </body>:
    <script>
    
      // Kod JavaScript będzie tu umieszczony.
    
    </script>
  4. Teraz dodamy trochę kodu w naszym elemencie  <script>, aby strona wykonała coś bardziej interesującego  — dodaj poniższy kod bezpośrednio pod linią "// Kod JavaScript będzie tu umieszczony.":
    function stworzParagraf() {
      var para = document.createElement('p');
      para.textContent = 'Kliknąłeś przycisk!';
      document.body.appendChild(para);
    }
    
    var przyciski = document.querySelectorAll('button');
    
    for (var i = 0; i < przyciski.length ; i++) {
      przyciski[i].addEventListener('click', stworzParagraf);
    }
  5. Zapisz plik i odśwież stronę w przeglądarce - teraz gdy klikniesz przycisk, nowy paragraf jest generowany i umieszczany poniżej.

Notatka: Jeżeli przykład nie działa, przejdź go znowu krok po kroku, sprawdzając czy zrobiłeś wszystko poprawnie. Czy zapisałeś swoją lokalną wersję początkowego kodu jako plik .html? Czy dodałeś element  <script> tuż przed zamknięciem  </body>? Czy wprowadziłeś kod JavaScript dokładnie tak, jak podane w przykłądzie?

JavaScript uwzględnia wielkość liter i jest bardzo drobiazgowy, a więc musisz wprowadzić kod dokładnie tak,  jak zostało to pokazane. W innym wypadku może to nie zadziałać.

NotatkaMożesz zobaczyć ten kod także na GitHubie jako apply-javascript-internal.html (zobacz to także na żywo).

Zewnętrzny JavaScript

Działa to świetnie, ale co by było, gdybyśmy chcieli umieścić nasz kod JavaScript w oddzielnym pliku? Zróbmy to teraz.

  1. Po pierwsze, stwórz nowy plik w tym samym katalogu, w którym umieściłeś twój plik HTML. Nazwij go script.js  - upewnij się, że ma on rozszerzenie .js, jako że w ten sposób jest rozpoznawany jako JavaScript.
  2. Następnie przekopiuj wszystkie skrypty z obecnego <script> i wklej je do pliku .js. Zapisz ten plik. 
  3. Teraz zastąp obecny element <script> poniższym kodem:
    
    <script src="script.js"></script>
  4. Zapisz i odśwież przeglądarkę - powinieneś zobaczyć to samo! Działa to w ten sam sposób, ale teraz mamy kod JavaScript w oddzielnym pliku. Jest to dobra praktyka organizowania kodu i umożliwiania jego ponownego wykorzystania między wieloma plikami HTML. Do tego HTML jest łatwiejszy do czytania bez bloków kodu pomiędzy.

Notatka: Możesz zobaczyć ten kod na GitHubie -  apply-javascript-external.html i script.js (Możesz zobaczyć to także na żywo tu).

Interpretowanie kodu JavaScript inline

Czasami napotkasz kawałki prawdziwego kodu JavaScript pomiędzy kodem HTML. Może to wyglądać następująco:


function stworzParagraf() {
  var para = document.createElement('p');
  para.textContent = 'Kliknąłeś przycisk!';
  document.body.appendChild(para);
}

<button onclick="createParagraph()">Kliknij mnie!</button>

Możesz przetestować tę wersję poniżej:

Ten przykład ma dokładnie tę samą funkcjonalność jak dwa poprzednie przykłady, za wyjątkiem tego, że element <button> zawiera w sobie handler onclick . Sprawia to, że funkcja zostanie uruchomiona gdy zostanie wcisnięty przycisk.

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you wanted the JavaScript to apply to.

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:


var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

This might look a bit longer than the onclick attribute, but this will work for all buttons no matter how many are on the page, and how many are added or removed. The JavaScript does not need to be changed.

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

Comments

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after 6 months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

  • A single line comment is written after a double forward slash (//), e.g.
    
    // I am a comment
  • A multi-line comment is written between the strings /* and */, e.g.
    
    /*
      I am also
      a comment
    */

So for example, we could annotate our last demo's JavaScript with comments like so:


// Function: creates a new paragraph and append it to the bottom of the HTML body.

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Get references to all the buttons on the page and sort them in an array.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Summary

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

JavaScript may seem a bit daunting right now, but don't worry — in this course we will take you through it in simple steps that will make sense going forward. In the next article we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

In this module

Autorzy i etykiety dokumentu

 Autorzy tej strony: mat-bi, asbud, maciej-w
 Ostatnia aktualizacja: mat-bi,