We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

JavaScript to język programowania, który dodaje interaktywność do Twojej witryny (na przykład: gry, odpowiedzi po naciśnięciu przycisków lub wprowadzeniu danych do formularza, dynamiczne stylowanie, animacja). Ten artykuł pomoże Ci zacząć przygodę z tym ekscytującym językiem i da pojęcie o tym, co jest możliwe.

Czym naprawdę jest JavaScript?

JavaScript (w skrócie "JS") jest pełnoprawnym dynamicznym językiem programowania, który po dodaniu do dokumentu HTML, może dostarczyć dynamiczną interaktywność na stronach internetowych. Został stworzony przez Brendan'a Eich, współtwórce projektu Mozilla, Mozilla Foundation i Mozilla Corporation.

JavaScript jest niezwykle wszechstronny. Możesz zacząć z czymś małym, z karuzelami, galeriami obrazków, zmiennymi układami strony i odpowiedziami na kliknięcia przycisków. Z większym doświadczeniem, będziesz w stanie stworzyć gry, animowane grafiki 2D i 3D, kompleksowe aplikacjie oparte na bazach danych i wiele więcej!

JavaScript jest dość zwarty, ale jednocześnie bardzo elastyczny. Programiści napisali wiele różnych narzędzi na podstawowego rdzenia języka JavaScript, otwierając mnóstwo dodatkowych funkcjonalności przy minimalnym wysiłku. Obejmują one:

  • Browser Application Programming Interfaces (APIs) — API wbudowane w przeglądarki internetowe, zapewniające takie funkcjonalności jak dynamiczne tworzenie HTML i ustawianie stylów CSS, zbieranie i manipulowanie strumieniem wideo z kamery internetowej użytkownika lub generowanie grafiki 3D i próbek audio.
  • API innych firm umożliwiające programistom włączenie funkcjonalności w swoich witrynach od innych dostawców treści, takich jak Twitter czy Facebook.
  • Framework'i i biblioteki innych firm zewnętrznych, które możesz zaaplikować do swojego kodu HTML, umożliwiające szybkie tworzenie witryn i aplikacji internetowych.

Ponieważ ten artykuł ma być jedynie lekkim wprowadzeniem do JavaScript, nie będziemy mieszać Ci na tym etapie mówiąc szczegółowo o tym, jaka jest różnica między jądrem języka JavaScript a różnymi narzędziami wymienionymi powyżej. Możesz później nauczyć się tego wszystkiego szczegółowo, w naszym JavaScript learning area i w pozostałych artykułach MDN.

Poniżej przedstawimy kilka aspektów podstaw język, a także będziesz miał okazje pobawić się kilkoma funkcjonalnościami interfejsu API przeglądarki. Baw się dobrze!

Przykład "hello world"

Powyższa sekcja może brzmieć naprawdę ekscytująco i tak powinno być — JavaScript jest jedną z najbardziej żywych technologii internetowych i kiedy zaczniesz się nią dobrze posługiwać to twoje witryny internetowe wejdą w nowy wymiar mocy i kreatywności.

Jednak uzyskanie poczucia komfortowego używania JavaScript jest trudniejsze niż w przypadku korzystania z HTML i CSS. Być może lepiej będzie zacząć powoli i kontynuować pracę za pomocą małych konsekwentnych kroków. Na początek pokażemy, jak dodać do swojej strony podstawowy kod JavaScript, tworząc przykład "hello world!" (standard w podstawowych przykładach programowania).

Ważne: Jeśli nie podążałeś za wcześniejszą częścią naszego kursu, pobierz ten przykładowy kod i użyj go jako punktu wyjścia.

  1. Po pierwsze, przejdź do swojej strony testowej i utwórz nowy folder o nazwie „scripts” (bez cudzysłowów). Następnie w nowym folderze skryptów utwórz nowy plik o nazwiemain.js. Zapisz go w folrderze scripts.
  2. Następnie w pliku index.html wprowadź następujący element w nowej linii tuż przed zamknięciem tagu </body>:
    <script src="scripts/main.js"></script>
  3. To w zasadzie robi to samo co element <link> w CSS — dodaje JavaScript do strony, więc może mieć wpływ na HTML (wraz z CSS i czymkolwiek innym na stronie).
  4. Teraz dodaj następujący kod do pliku main.js:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Na koniec upewnij się, że pliki HTML i JavaScript są zapisane, a następnie załaduj index.html w przeglądarce. Powinieneś zobaczyć coś takiego:

Zanotuj: Powód, dla którego wstawiliśmy element <script> w dolnej części pliku HTML jest to, że elementy w HTML są ładowane przez przeglądarkę w kolejności pojawienia się ich w pliku. Jeśli JavaScript jest ładowany jako pierwszy i ma wpływać na HTML poniżej, może to nie zadziałać, ponieważ JavaScript byłby ładowany przed HTML na którym ma pracować. Dlatego umieszczenie kodu JavaScript w dolnej części strony HTML jest często najlepszą strategią.

Co się wydarzyło?

Twój tekst nagłówka został zmieniony na "Hello world!" przy użyciu JavaScript. Zrobiłeś to najpierw, używając funkcji zwanej querySelector() by chwycić referencje do nagłówka i przechowywać ją w zmiennej o nazwie myHeading. Jest to bardzo podobne do tego, co zrobiliśmy przy użyciu selektorów CSS. Kiedy chcesz coś zrobić z elementem, najpierw musisz go wybrać.

Następnie ustawiłeś wartość właściwościtextContent zmiennej myHeading (która reprezentuje zawartość nagłówka) na "Hello world!".

Zanotuj: Obie funkcje, których używałeś powyżej, są częścią Document Object Model (DOM) API, który pozwala na manipulowanie treścią strony.

Podstawy języka

Wytłumaczmy niektóre podstawowe cechy języka JavaScript, aby lepiej zrozumieć, jak to wszystko działa. Warto zauważyć, że te cechy są wspólne dla wszystkich języków programowania, więc jeśli opanujesz te podstawy, jesteś na dobrej drodze aby móc programować w czegokolwiek!

Ważne: W tym artykule spróbuj wprowadzać przykładowe linie kodu do konsoli JavaScript, aby zobaczyć, co się zdarzy. Więcej informacji na temat konsoli JavaScript można znaleźć w sekcji Discover browser developer tools.

Zmienne

Zmienne są kontenerami w których można zapisywać wartości. Zacznij od zadeklarowania zmiennej za pomocą słowa kluczowego var, a następnie dowolnej nazwy, której chcesz użyć:

var myVariable;

Zanotuj: Średnik na końcu wiersza wskazuje, gdzie kończy się instrukcja; jest to bezwzględnie wymagane, tylko w przypadku gdy musisz oddzielić poszczególne instrukcje w jednej linii. Jednak niektórzy uważają, że dobrą praktyką jest umieszczenie ich pod koniec każdej instrukcji. Istnieją inne zasady, kiedy należy i nie powinny się ich używać — po więcej szczegółów zobacz Your Guide to Semicolons in JavaScript.

Zanotuj: Możesz dowolnie nazwać zmienną, ale istnieją pewne zastrzeżone nazwy (zobacz w tym artykule o regułach nazewnictwa zmiennych). Jeśli nie jesteś pewien, możesz sprawdzić nazwę zmiennej, aby upewnić się, czy jest prawidłowa.

Zanotuj: JavaScript rozróżnia małe i duże litery — myVariablejest inną zmienną niż myvariable. Jeśli pojawiają się problemy w kodzie, sprawdź wielkość liter!

Po zadeklarowaniu zmiennej możesz nadać jej wartość:

myVariable = 'Bob';

Jeśli chcesz, możesz wykonać obydwie operacje w tej samej linii:

var myVariable = 'Bob';

Możesz pobrać wartość przez wywołanie zmiennej po nazwie:

var myVariable = 'Bob';

Po podaniu wartości zmiennej można ją później zmienić:

var myVariable = 'Bob';
myVariable = 'Steve';

Warto zauważyć, że zmienne mają różne typy danych:

Typ Wyjaśnienie Przykład
String Sekwencja tekstu znana jako ciąg znaków. Aby potwierdzić, że zmienna jest ciągiem, należy zamknąć jej wartość w cudzysłowiu. var myVariable = 'Bob';
Number Liczba. Liczby nie mają cudzysłowy wokół nich. var myVariable = 10;
Boolean Prawda / Fałsz. Słowa true i false to specjalne słowa kluczowe w JS i nie potrzebują cudzysłowów. var myVariable = true;
Array Konstrukcja, która pozwala na przechowywanie wielu wartości w jednym odniesieniu. var myVariable = [1,'Bob','Steve',10];
Odwołaj się do każdego elementu tej tablicy:
myVariable[0], myVariable[1], itd.
Object Zasadniczo cokolwiek. Wszystko w JavaScript jest obiektem i może być przechowywane w zmiennej. Pamiętaj o tym podczas nauki. var myVariable = document.querySelector('h1');
Również wszystkie powyższe przykłady.

Więc dlaczego potrzebujemy zmiennych? Cóż, zmienne są potrzebne, aby zrobić cokolwiek interesującego w programowaniu. Jeśli nie moglibyśmy zmieniać wartości, to nie możnaby zrobić nic dynamicznego, jak personalizacja powitania lub zmiana wyświetlanego obrazu w galerii.

Komentarze

Możesz umieścić komentarze w kodzie JavaScript, tak samo jak w CSS:

/*
Wszystko pomiędzy to komentarz.
*/

Jeśli Twój komentarz nie zawiera przerw między wierszami, często łatwiej jest umieścić go za dwoma ukośnikami:

// To jest komentarz

Operatory

Operator jest symbolem matematycznym, który generuje wynik w oparciu o dwie wartości (lub zmienne). W poniższej tabeli można zobaczyć niektóre z najprostszych operatorów oraz kilka przykładów, które można wypróbować w konsoli JavaScript.

Operator Wyjaśnienie Symbole Przykład
Dodawanie Służy do dodawania dwóch liczb lub sklejenia dwóch ciągów znaków. + 6 + 9;
"Hello " + "world!";
Odejmowanie, Mnożenie, Dzielenie Robią to, co można oczekiwać od nich w podstawowej matematyce. -, *, / 9 - 3;
8 * 2; // mnożenie w JS jest gwiazdką
9 / 3;
Przypisanie wartości Widzieliście już to: przypisuje wartość zmiennej. = var myVariable = 'Bob';
Znak równości Wykonuje test sprawdzający, czy dwie wartości są sobie równe i zwraca wynik true / false (Boolean). === var myVariable = 3;
myVariable === 4;
Zaprzeczenie, Nie równa się Zwraca logicznie odwrotną wartość tego, co poprzedza; zmienia true w false, itd. Kiedy jest używany wraz z operatorem równości, operator negacji sprawdza, czy dwie wartości nie są równe. !, !==

Podstawowe wyrażenie jest true, ale porównanie zwraca false, ponieważ zostało ono zanegowane:

var myVariable = 3;
!(myVariable === 3);

Tu testujemy "czy myVariable NIE równa się 3". To zwraca wartość false ponieważ myVariable JEST równa 3.

var myVariable = 3;
myVariable !== 3;

Istnieje wiele więcej operatorów, ale to wystarczy na razie. Jeśli chcesz zobacz pełną listę sprawdź w Expressions and operators.

Zanotuj: Mieszanie typów danych może powodować dziwne efekty podczas wykonywania obliczeń, dlatego należy uważać, aby prawidłowo odwoływać się do zmiennych i uzyskać spodziewane wyniki. Na przykład wprowadź "35" + "25" do konsoli. Dlaczego nie dostaniesz oczekiwanego rezultatu? Ponieważ znaki cudzysłowów zmieniają liczby w ciągi znaków, więc skończyłeś na łączeniu łańcuchów zamiast dodawać liczby. Jeśli wpiszesz, 35 + 25 otrzymasz poprawny wynik.

Warunki

Warunkami są struktury kodu, które pozwalają na sprawdzenie, czy wyrażenie zwraca true, czy nie, i uruchamia inny kod ujawniony przez jego wynik. Bardzo popularną formą warunku są instrukcje if ... else. Na przykład:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Wyrażenie wewnątrz if (...) jest testem — który używa operatora tożsamości (opisanego powyżej) w celu porównania zmiennej iceCream z ciągiem znaków chocolate, aby sprawdzić, czy te dwa są równe. Jeśli to porównanie zwróci true, uruchomiony zostanie pierwszy blok kodu. Jeśli porównanie nie jest prawdziwe, pierwszy blok jest pomijany, a drugi blok kodu, po wywołaniu else, jest uruchamiany.

Funkcje

Funkcje są sposobem na zapakowanie funkcjonalności, które chcesz wykorzystać ponownie. Gdy potrzebujesz procedury, zamiast pisać cały kod za każdym razem, możesz wywołać funkcję z nazwą funkcji. Powyżej widzieliście już niektóre zastosowania funkcji, na przykład:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Funkcje te, document.querySelector i alert, są wbudowane w przeglądarkę, aby używać w dowolnym momencie.

Jeśli widzisz coś, co wygląda jak nazwa zmiennej, ale ma nawiasy — () — po niej, to prawdopodobnie jest to funkcja. Funkcje często biorą argumenty — bity danych potrzebne do wykonywania ich pracy. Znajdują się one w nawiasach, oddzielone przecinkami jeśli jest więcej niż jeden argument.

Na przykład, funkcja alert () powoduje pojawienie się okna podręcznego wewnątrz okna przeglądarki, ale musimy dać mu ciąg znaków jako argument, aby powiedzieć użytkownikowi o tym, co należy wyświetlić w wyskakującym okienku.

Dobrą wiadomością jest możliwość zdefiniowania własnych funkcji — w następnym przykładzie napiszemy prostą funkcję, która przyjmuje dwie liczby jako argumenty i mnoży je:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Spróbuj uruchomić powyższą funkcję w konsoli, a następnie przetestuj kilka argumentów. Na przykład:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Zanotuj: return informuje przeglądarkę o zwróceniu zmiennej result z funkcji, dzięki czemu jest ona dostępna. Jest to konieczne, ponieważ zmienne zdefiniowane wewnątrz funkcji są dostępne tylko w tych funkcjach. Jest to tak zwany zakres zmiennej. (Poczytaj więcej o zakresie zmiennej.)

Zdarzenia

Prawdziwa interaktywność na stronie internetowej potrzebuje zdarzeń. Są to struktury kodu nasłuchające rzeczy, które dzieją się w przeglądarce i uruchamiajace kod w odpowiedzi. Najbardziej oczywistym przykładem jest zdarzenie kliknięcia, które jest uruchamiane przez przeglądarkę po kliknięciu na coś za pomocą myszy. Aby to zademonstrować, wpisz następujący kod w konsoli, a następnie kliknij na bieżącej stronie internetowej:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Istnieje wiele sposobów dołączania zdarzenia do elementu. Tutaj wybieramy element <html>, i ustawiamy obsługę jego właściwości onclick równą funkcji anonimowej (tj. bezimiennej), która zawiera kod, który ma być uruchamiany.

Zauważ że

document.querySelector('html').onclick = function() {};

jest równe temu

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

To jest po prostu krócej.

Doładowanie naszej przykładowej strony

Teraz omówiliśmy kilka podstawowych zasad JavaScript, dodajmy kilka ciekawych funkcji do naszej przykładowej witryny, aby zobaczyć, co jest możliwe.

Dodawanie zmieniarki obrazu

W tej sekcji dodajemy dodatkowy obraz do naszej witryny, korzystając z kilku innych funkcji DOM API, używając JavaScript, aby przełączać się między nimi, gdy klikniesz obraz.

  1. First of all, find another image you'd like to feature on your site. Be sure it is the same size as the first image, or as close as possible.
  2. Save this image in your images folder.
  3. Rename this image 'firefox2.png' (without quotes).
  4. Go to your main.js file, and enter the following JavaScript. (If your "hello world" JavaScript is still there, delete it.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Save all files and load index.html in the browser. Now when you click the image, it should change to the other one!

You store a reference to your <img> element in the myImage variable. Next, you make this variable's onclick event handler property equal to a function with no name (an "anonymous" function). Now, every time this element is clicked:

  1. You retrieve the value of the image's src attribute.
  2. You use a conditional to check whether the src value is equal to the path to the original image:
    1. If it is, you change the src value to the path to the 2nd image, forcing the other image to be loaded inside the <img> element.
    2. If it isn't (meaning it must already have changed), the src value swaps back to the original image path, to the original state.

Adding a personalized welcome message

Next we will add another bit of code, changing the page's title to a personalized welcome message when the user first navigates to the site. This welcome message will persist, should the user leave the site and later return — we will save it using the Web Storage API. We will also include an option to change the user and, therefore, the welcome message anytime it is required.

  1. In index.html, add the following line just before the <script> element:
    <button>Change user</button>
  2. In main.js, place the following code at the bottom of the file, exactly as written — this takes references to the new button and the heading, storing them inside variables:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Now add the following function to set the personalized greeting — this won't do anything yet, but we'll fix this in a moment:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    This function contains a prompt() function, which brings up a dialog box, a bit like alert(). This prompt(), however, asks the user to enter some data, storing it in a variable after the user presses OK. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser and later retrieve it. We use localStorage's setItem() function to create and store a data item called 'name', setting its value to the myName variable which contains the data the user entered. Finally, we set the textContent of the heading to a string, plus the user's newly stored name.
  4. Next, add this if ... else block — we could call this the initialization code, as it structures the app when it first loads:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    This block first uses the negation operator (logical NOT, represented by the !) to check whether the name data exists. If not, the setUserName() function is run to create it. If it exists (that is, the user set it during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name, as we did inside setUserName().
  5. Finally, put the below onclick event handler on the button. When clicked, the setUserName() function is run. This allows the user to set a new name, when they wish, by pressing the button:
    myButton.onclick = function() {
      setUserName();
    }
    

Now when you first visit the site, it will ask you for your username, then give you a personalized message. You can change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, keeping the personalized message there when you next open the site!

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

If you get stuck, you can compare your work with our finished example code on GitHub.

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic.

Autorzy i etykiety dokumentu

Etykiety: 
Autorzy tej strony: kosanr1, AdrianaOlszak
Ostatnia aktualizacja: kosanr1,