JavaScript to tzw język skryptowy lub język programowania, który pozwala na wykorzystanie złożonych funkcji na stronach internetowych. Za każdym razem, gdy strona internetowa robi coś więcej niż tylko wyświetlanie statycznych informacji czyli np.: aktualizację treści, wyświetlanie interaktywnych map, animowanych grafik 2D czy też 3D itp. to można się założyć, że w te wszystkie magiczne zdarzenia z dużym prawdopodobieństwem zaangażowany jest JavaScript. JavaScript umożliwia tworzenie dynamicznie aktualizowanych treści, sterowanie multimediami, animowanie obrazów i praktycznie wszystko inne. JavaScript w pakiecie z HTML oraz CSS, to najbardziej popularny zestaw języków służących do budowy Front-endu.
W mocnym skrócie:
- HTML to język znaczników, którego używamy do projektowania struktury i nadawania znaczenia treściom internetowym. Tutaj definiujemy nagłówki, akapitów, tabele, osadzamy obrazy na stronie.
- CSS to język reguł stylów, używamy go do wystylizowania przygotowanej treści HTML, na przykład ustawiania kolorów tła i czcionek, położenia obrazów itp..
Przykład CSS:
<style>
#podaj_imie {
color:black;
}
</style>Przykład HTML:
<button id="podaj_imie" onclick="dodajImie()">Kliknij tutaj </button>
<div id="demo"></div>Przykład JavaScript:
<script>
const wit = document.querySelector('h1');
wit.addEventListener('click', dodajImie);
function dodajImie() {
let imie = prompt('Wpisz tutaj swoje imię');
if (imie != null) {
document.getElementById("demo").innerHTML =
"Witaj " + imie + "! Jak się masz dzisiaj?";
}
}
</script>A teraz sprawdź co się stanie jeśli połączymy te 3 języki w jeden wspólnie dzialający kod:
Język JavaScript po stronie klienta zapewnia kilku podstawowych funkcji programistycznych, które umożliwiają:
- Przechowywanie wartości wewnątrz zmiennych. Na przykład w powyższym przykładzie prosimy o wpisanie imienia, a następnie zapisanie imienia w zmiennej o nazwie imie.
- Operacje na fragmentach tekstu (w programowaniu określane jako „łańcuchy”). W powyższym przykładzie bierzemy ciąg znaków „Witaj (Imię) Jak się masz dzisiaj?” i łączymy go z wprowadzoną zmienną: imie.
- Uruchamianie kodu w odpowiedzi na określone zdarzenia występujące na stronie internetowej, tutaj użyliśmy zdarzenia kliknięcia: onclick.
Application Programming Interfaces (APIs)
Interfejsy (API) zapewniają dodatkowe funkconalności do wykorzystania w kodzie JavaScript. Interfejsy API to gotowe zestawy bloków kodu, które ułatwiają programiście konstruowanie programów, które w innym przypadku byłyby bardziej pracochłonne i bardzo trudne do wdrożenia. Ich przydatność można przyrównać do skręcania mebli z gotowego zestawu kupionego w sklepie meblowym. Czytasz instrukcję, sięgasz po kolejne elementy, skręcasz i szafa już jest gotowa! Tak samo jest z API.
Chcesz wiedzieć więcej o API? Przejdź do kolejnego artykułu.
