Wprowadzenie do JavaScript
Rys Historyczny
JavaScript powstał w 1995 roku jako język do programowania stron internetowych w przeglądarce Netscape Navigator. Dziś jest wspierany przez wszystkie główne przeglądarki i umożliwia tworzenie nowoczesnych aplikacji internetowych, które działają bez przeładowywania strony.
Warto zaznaczyć, że JavaScript nie ma związku z językiem Java. Podobna nazwa była zabiegiem marketingowym, wykorzystującym popularność Javy w tamtym czasie. Po wyjściu poza Netscape, JavaScript został ustandaryzowany jako ECMAScript przez organizację Ecma International. W praktyce obie nazwy odnoszą się do tego samego języka.
JavaScript jest elastyczny, co ułatwia początkującym, ale utrudnia debugowanie, bo system nie zawsze wskazuje błędy. Mimo to, ta elastyczność pozwala na techniki niedostępne w bardziej rygorystycznych językach.
Język ewoluuje przez lata. Wersja ECMAScript 3 (2000-2010) była szeroko stosowana, a ambitna wersja 4 została porzucona ze względu na zbyt radykalne zmiany. Wersja 5 (2009) wprowadziła niewielkie ulepszenia, a ES6 (2015) dodała nowe funkcje. Od tego czasu aktualizacje pojawiają się co roku.
JavaScript nie jest ograniczony do przeglądarek. Używa się go w bazach danych (np. MongoDB, CouchDB) oraz poza przeglądarką, np. w środowisku Node.js do programowania serwerów i aplikacji desktopowych.
Ze względów bezpieczeństwa skrypty uruchamiane w przeglądarce mają pewne ograniczenia. Główne z nich to:
- JavaScript na stronie nie może czytać/zapisywać dowolnych plików na dysku twardym, kopiować ich ani uruchamiać programów.
- Istnieją sposoby interakcji z kamerą/mikrofonem i innymi urządzeniami, ale wymagają one wyraźnej zgody użytkownika.
- Różne okna/zakładki nie wiedzą o sobie nawzajem. JavaScript z jednej strony nie ma dostępu do innej, jeśli pochodzą z różnych witryn.
- JavaScript może łatwo komunikować się z serwerem, z którego pochodzi bieżąca strona, ale jego możliwość pobierania danych z innych witryn/domen jest ograniczona.
JavaScript jest zwykle używany do:
- Modyfikowania strony HTML i stylów.
- Reagowania na działania użytkownika, takie jak kliknięcia myszy, ruchy kursora, naciśnięcia klawiszy.
- Wysyłania żądań sieciowych do zdalnych serwerów, pobierania i przesyłania plików (technologie AJAX i COMET).
- Pobierania i ustawiania ciasteczek, zadawania pytań użytkownikowi, wyświetlania komunikatów.
- Rysowania w przeglądarce za pomocą elementu canvas (np. w grach przeglądarkowych).
JavaScript, jak każdy język programowania, ma swoje standardy, np. ES5 lub ES6. Każdy nowy standard dodaje nowe funkcje i reguły, a niektóre starsze techniki są oznaczane jako przestarzałe. Na przykład, ES5 to ECMAScript 2009, a ES6 to ECMAScript 2015. Problem polega na tym, że nie wszyscy użytkownicy aktualizują swoje przeglądarki, co spowalnia wprowadzanie nowych standardów. Jednak większość nowoczesnych przeglądarek obsługuje ES6, a narzędzia takie jak Babel.JS pozwalają na transpilację kodu ES6 do ES5.
Skrypty w przeglądarkach są wykonywane przez tzw. silniki JavaScript, np. V8 w Chrome i Operze, czy SpiderMonkey w Firefoxie. Te silniki optymalizują wykonanie kodu, przekształcając go w kod maszynowy.
Osadzanie JavaScript w HTML
JavaScript można osadzać w HTML za pomocą tagu <script>. Można go umieszczać w sekcji <head> lub przed zamknięciem </body>. Zaleca się umieszczanie skryptów na końcu dokumentu, aby uniknąć problemów z dostępem do elementów, które jeszcze nie zostały załadowane. Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Przykład JavaScript</title>
</head>
<body>
<div id="id_div">To jest div</div>
<script>
let obj = document.getElementById('id_div');
console.log(obj);
</script>
</body>
</html>Jeśli skrypt zostanie umieszczony przed elementem <div>, w konsoli pojawi się null, ponieważ element nie został jeszcze załadowany.
Zewnętrzne skrypty JavaScript
Skrypty można przechowywać w osobnych plikach z rozszerzeniem .js i podłączać je za pomocą atrybutu src:
<script src="js/ex1.js"></script>Jeśli plik znajduje się w podkatalogu js, ścieżka będzie wyglądać tak:
<script src="js/ex1.js"></script>Zalety zewnętrznych skryptów:
- Łatwość zarządzania kodem.
- Szybsze ładowanie stron dzięki cache'owaniu przez przeglądarkę.
Konsola deweloperska
Do debugowania skryptów przydatna jest konsola deweloperska, którą można otworzyć za pomocą klawisza F12 lub kombinacji Ctrl+Shift+I. Wyświetla ona błędy i informacje diagnostyczne. Przykład błędu:
let o = document.getElementById('id_div');
console.log(obj); // Błąd: obj nie jest zdefiniowanyKonsola pokaże błąd, że zmienna obj nie istnieje.