Ostatnia aktualizacja 12 maja, 2023
Dowiedz się czym jest JavaScript, jak stawiać pierwsze kroki, a także sprawdź narzędzia do edycji kodu. JavaScript podstawy – czas start!
- Strony internetowe mogą prezentować się bardzo atrakcyjnie pod względem wizualnym nawet przy użyciu samego HTML i CSS
- Wtedy jednak będą dość statyczne, co często oznacza – nudne. Nie będą się ani dostosowywać, ani reagować na to co robisz
- Tymczasem dzisiejszy internet zdecydowanie nie jest statyczny. Strony, na które często zaglądasz – od Facebooka po Netfliksa – mają pewien stopień interaktywności i personalizacji. To zaś wykracza daleko poza możliwości języków HTML i CSS
- Pora na poznanie podstaw JavaScript
JavaScript podstawy, czyli co to właściwie jest
JavaScript to język programowania pozwalający na dodawanie do dokumentów interaktywności. Oto krótka lista rzeczy, które można zrobić za pomocą JavaScriptu:
- Modyfikowanie kodu HTML i CSS strony po jej załadowaniu
- Nasłuchiwanie zdarzeń, takich jak kliknięcie myszą, i wykonywanie na tej podstawie jakichś czynności
- Przesuwanie elementów po ekranie w interesujący sposób
- Przesyłanie danych między serwerem a przeglądarką
- Tworzenie gier, które działają bezpośrednio w przeglądarce
- Umożliwianie interakcji z kamerą internetową, mikrofonem i innymi urządzeniami
Gry takie jak Candy Crush używają JavaScriptu, podobnie jak Facebook, LinkedIn, Uber czy Netflix. To jeden z najpopularniejszych języków programowania.
A jak pisać w JS? Sposób pisania kodu jest dość prosty. Składamy ze sobą słowa, które często przypominają codzienny język angielski, aby powiedzieć przeglądarce, co ma zrobić. Weźmy taki przykład:
var defaultName = "JavaScript";
function sayHello(name) {
if (name === undefined) {
alert("Cześć!, " + defaultName + "!");
} else {
alert("Hej, " + name + "!");
}
}Jeśli nie wiesz, co oznaczają poszczególne elementy kodu – nie przejmuj się. Na tym etapie zwróć tylko uwagę na jego wygląd. Od razu zauważysz angielskie słowa, takie jak function (funkcja), if (jeśli), else (w przeciwnym razie), alert (alarm) czy name (nazwa). Oprócz tego kod zawiera nieco dziwne symbole i znaki, ale w dalszych częściach naszego kursu w pełni zrozumiesz, co oznaczają wszystkie te elementy. Póki co wystarczą te podstawowe informacje.
Ćwiczenie: przykład z JavaScript
Jeśli do tej pory jeszcze nic nie programowałeś, możesz czuć się nieprzygotowany do pisania kodu. Nie szkodzi – pora się przełamać. Jak szybko się przekonasz, JavaScript nie jest tak skomplikowany, jak może się wydawać.
Sprawdź: Przebranżowienie na IT
Zanim przejdziemy dalej, wiedz, że przyda ci się narzędzie do pisania kodu. To może być nawet systemowy Notatnik, ale polecamy raczej aplikacje, które pozwalają na wygodniejsze przeglądanie kodu. Wybierz takie narzędzie, jakie ci odpowiada:
W naszym poradniku wykorzystujemy Visual Studio Code, niemniej nic nie stoi na przeszkodzie, abyś korzystał z innego z polecanych narzędzi. Mają zbliżoną funkcjonalność i odpowiednie ćwiczenia wykonasz również w nich, jeśli zajdzie taka potrzeba.
Zainstaluj wybrane narzędzie, a następnie stwórz dokument HTML. Dokument ten będzie przechowywał kod JavaScript, który napiszesz. Utwórz w edytorze kodu pusty dokument HTML. Następnie wprowadź do niego zawartość:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>To mój pierwszy kod!</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
Jeśli zapiszesz ten plik na dysku, a następnie otworzysz w przeglądarce, zobaczysz całkowicie pustą stronę. To dobrze, bo właśnie stworzyłeś pusty dokument, w którym póki co nic się nie dzieje.
Zobacz: Big Data zarobki
Teraz wykorzystamy znacznik script, który działa jak kontener, w którym umieszczasz dowolny kod JavaScript, jaki planujesz uruchomić. W tym ćwiczeniu chcemy uruchomić kod, który wyświetli napis “To mój pierwszy kod!”. Pojawi się on podczas ładowania strony HTML.
Jak tego dokonać? Wewnątrz znacznika script dodaj następującą linię:
alert("To mój pierwszy kod!");Gotowy efekt powinien wyglądać tak:
Zapisz teraz swój plik jako HTML i otwórz go w przeglądarce. Po załadowaniu strony powinno pojawić się okno dialogowe z wyświetlonym napisem “To mój pierwszy kod!”. Powinno wyglądać mniej więcej tak (zależy od stosowanej przeglądarki):
I gotowe! Właśnie masz za sobą pierwszy krok w nauce JavaScriptu. Utworzyłeś działający przykład, który wykorzystuje JavaScript.
Pierwsza lekcja z podstaw JavaScript zaliczona
Teraz wypada jeszcze przeanalizować napisany kod – tak, abyś wiedział, co tak naprawdę stworzyłeś. A zatem: właśnie napisałeś bardzo proste polecenie (statement) w JavaScript. To polecenie tworzy logiczny zestaw instrukcji dla przeglądarki internetowej. W tym przypadku zastosowałeś tylko jedno polecenie (wspomniany alert), natomiast typowa aplikacja czy usługa online będzie miała takich poleceń o wiele więcej.
Sprawdź: Klawiatura do 500 zł
Wewnątrz poleceń często zobaczysz żargon programistyczny i nasz kod nie jest tutaj wyjątkiem. Jest w nim nazwa “alert”, która może być niejasna, natomiast odpowiada za to, że na ekranie coś się pojawia. Jej funkcja to przyciąganie uwagi poprzez wyświetlenie konkretnego alertu – w tym wypadku tekstu “To mój pierwszy kod!”.
Alert to pierwsza z funkcji z jakich skorzystaliśmy. W kolejnych etapach poradnika będziesz korzystał z wielu innych. Sama funkcja to z kolei fragment kodu, który wykonuje określoną czynność. Jaką konkretnie? To już zależy od ciebie. Jako programista będziesz samodzielnie definiować daną funkcję, albo będzie ona definiowana przez zewnętrzną bibliotekę lub przez sam framework JavaScript.
Za każdym razem, gdy będziesz miał do czynienia z fragmentami tekstu, które w świecie programistycznym nazywane są “łańcuchami znaków”, zawsze umieszczaj je w pojedynczym lub podwójnym cudzysłowie. To może wydaje się nieco dziwne, ale każdy język programowania ma swoje dziwactwa i trzeba je po prostu zaakceptować.
Teraz możesz jeszcze nieco poćwiczyć i wpisać inny tekst do swojej funkcji alert. Na przykład:
Ćwiczenie: funkcje JavaScript
Polecenie brzmi, aby napisać funkcję w JavaScript, która przyjmuje tablicę liczb jako argument i zwraca sumę wszystkich liczb w tablicy. Kod będzie wyglądał następująco:
function sumaTablicy(tablica) {
let suma = 0;
for(let i = 0; i < tablica.length; i++) {
suma += tablica[i];
}
return suma;
}
console.log(sumaTablicy([1, 2, 3, 4, 5])); // Wynik: 15Co się dzieje w powyższym kodzie?
- Definiujemy funkcję
sumaTablicy, która przyjmuje jeden argument,tablica. Ten argument powinien być tablicą liczb. - W ciele funkcji najpierw deklarujemy zmienną
sumai ustawiamy jej wartość początkową na 0. Będzie to nasza zmienna akumulatora, która będzie przechowywać sumę wszystkich liczb w tablicy. - Następnie używamy pętli
for, aby przejść przez każdy element tablicy. W każdej iteracji pętli dodajemy wartość aktualnego elementu tablicy (który jest liczbą) do naszej zmiennej akumulatorasuma. - Po przejściu przez wszystkie elementy tablicy, nasza zmienna
sumapowinna teraz zawierać sumę wszystkich liczb w tablicy. Zwracamy tę sumę jako wynik funkcji. - Na koniec testujemy naszą funkcję, wywołując ją z tablicą
[1, 2, 3, 4, 5]i wyświetlając wynik w konsoli. Oczekiwany wynik to 15, ponieważ 1 + 2 + 3 + 4 + 5 = 15.
To jest dość proste ćwiczenie, ale dobrze ilustruje kilka kluczowych koncepcji w JavaScript, takich jak funkcje, pętle for i tablice.
Podstawy JavaScript zaliczone! Dowiedziałeś się na przykładzie jak stworzyć prosty kod JavaScript. Przy okazji miałeś okazję sprawdzić czym są polecenia, funkcje i łańcuchy znaków. Już niedługo w serwisie pojawi się kolejny fragment naszego bezpłatnego kursu “JavaScript Podstawy”. Zapisz się na newsletter, aby niczego nie przegapić.
Czytaj także:
Welcome pack – co w nim umieścić?
Słuchawki bezprzewodowe nauszne – polecane modele
Blisko 60% badanych zauważa wyższą produktywność podczas pracy zdalnej
