Centrum wiedzy o technologiach i pracy w IT
javascript podstawy dla początkujących

Zobacz jak stawiać pierwsze kroki w JavaScript

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
Nie udało się zapisać Twojej subskrypcji. Spróbuj ponownie.
Udało się! Widzimy się niebawem – newsletter wysyłamy w każdy wtorek

Otrzymuj za darmo unikalne poradniki, dane i wiedzę o pracy w IT – dostarczane co tydzień

Klikając “Zapisz mnie” wyrażasz zgodę na otrzymywanie e-maili od redakcji, a także ofert partnerów oraz akceptujesz naszą Politykę prywatności.

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:

javascript podstawy

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):

prosty kod javascript
Zrzut wykonany w przeglądarce Opera

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:

podstawy javascript
Zrzut wykonany w przeglądarce Brave

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ć.

Total
1
Shares
_podobne artykuły