navigate_before

Wróć do strony głównej

Możliwości JavaScript

JavaScript, będący jednym z trzech podstawowych języków stosowanych w tworzeniu stron internetowych (obok HTML i CSS), oferuje szeroki zakres możliwości, które pozwalają na dynamiczne interakcje użytkownika ze stroną. Poniżej przedstawiamy najważniejsze zastosowania i funkcje tego języka.

Manipulacja elementami HTML

JavaScript umożliwia modyfikację zawartości elementów HTML w czasie rzeczywistym. Przykładowo, poprzez manipulację atrybutami takimi jak display czy visibility można zmieniać wygląd i zachowanie elementów bez potrzeby przeładowywania całej strony.

<button onclick=document.getElementById('demo').innerHTML = 'Hello World'>Click me</button>
<p id=demo>Some placeholder text...</p>

Obsługa zdarzeń

Dzięki JavaScriptowi można reagować na różnego rodzaju zdarzenia występujące na stronie, np. kliknięcia myszą, naciśnięcia klawiszy czy ładowania strony. Umożliwia to dynamiczne dostosowywanie funkcjonalności strony do aktywności użytkownika.

<button onclick=myFunction()>Click me</button>

<script>
function myFunction() {
  alert(Hello World!);
}
</script>

Animacje i efekty wizualne

Dzięki JavaScriptowi możliwe jest tworzenie animacji oraz różnorodnych efektów wizualnych, które sprawiają, że strona staje się bardziej atrakcyjna dla użytkownika. Przykładem może być pojawianie się i znikanie elementów czy płynne przejścia między stanami.

<script>
function myMove() {
  var elem = document.getElementById(myAnimation);
  var pos = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + px;
      elem.style.left = pos + px;
    }
  }
}
</script>

Komunikacja z serwerem

JavaScript umożliwia asynchroniczną wymianę danych między klientem a serwerem poprzez tzw. AJAX (Asynchronous JavaScript and XML). Dzięki temu strona może pobierać lub przesyłać informacje bez konieczności przeładowywania całej treści.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById(demo).innerHTML =
    this.responseText;
  }
};
xhttp.open(GET, ajax_info.txt, true);
xhttp.send();

Tworzenie aplikacji webowych

Ostatnią z możliwości JavaScript jest tworzenie zaawansowanych aplikacji webowych, które oferują interaktywność i responsywność porównywalną do tradycyjnych aplikacji desktopowych. Dzięki narzędziom takim jak React czy Angular możliwe jest budowanie bogatych w funkcje witryn internetowych.

Obsługa formularzy

JavaScript umożliwia interaktywną obsługę formularzy na stronie internetowej. Dzięki temu można tworzyć walidację pól, reagować na zdarzenia takie jak przesyłanie danych czy zmiany wartości oraz dynamicznie manipulować zawartością formularza.

<form>
  <input type=text id=fname name=fname>
  <input type=submit value=Submit onclick=myFunction()>
</form>

<script>
function myFunction() {
  var x = document.getElementById(fname).value;
  document.getElementById(demo).innerHTML = You entered:  + x;
}
</script>

Tworzenie interaktywnych gier

JavaScript jest również stosowany do tworzenia prostych gier w przeglądarce internetowej. Można wykorzystać canvas do rysowania elementów, obsługę klawiatury i myszy oraz logikę gry.

<canvas id=myCanvas width=200 height=100 style=border:1px solid #000;>

<script>
var c = document.getElementById(myCanvas);
var ctx = c.getContext(2d);
ctx.font = 30px Arial;
ctx.fillText(Hello World,10,50);
</script>

Manipulacja obiektami JSON

JavaScript obsługuje obiekty JSON (JavaScript Object Notation), co umożliwia łatwe parsowanie i manipulację danymi w tej formie. Dzięki temu możliwe jest przesyłanie i odbieranie informacji w postaci tekstowej między klientem a serwerem, co stało się standardem komunikacji w aplikacjach webowych.

// Odpowiedź z serwera
var text = '{employees:[' +
'{firstName:John,lastName:Doe },' +
'{firstName:Anna,lastName:Smith},' +
'{firstName:Peter,lastName:Jones}]}';

var obj = JSON.parse(text);
document.getElementById(demo).innerHTML =
obj.employees[1].firstName +   + obj.employees[1].lastName;

Sprawdzanie poprawności danych

JavaScript może być wykorzystywany do sprawdzania poprawności danych wprowadzanych przez użytkownika. Można tworzyć skrypty, które walidują formularze i sprawdzają, czy podane wartości spełniają określone kryteria. Na przykład można sprawdzać, czy adres e-mail został wprowadzony w poprawnym formacie, czy hasło spełnia wymagane kryteria dotyczące długości i złożoności.

function validateForm() {
  var x = document.forms[myForm][email].value;
  if (x == ) {
    alert(Email must be filled out);
    return false;
  }
}
</script>

Obsługa lokalnego przechowywania danych

Za pomocą JavaScriptu możliwe jest przechowywanie danych na komputerze użytkownika bez konieczności wysyłania ich na serwer. Dzięki mechanizmom takim jak localStorage czy IndexedDB, możliwe jest zapisywanie informacji, które będą dostępne nawet po zamknięciu przeglądarki. Przykładem może być przechowywanie preferencji użytkownika czy stanu gry w trybie offline.

if (typeof(Storage) !== undefined) {
  // Local storage supported
  localStorage.setItem(username, JohnDoe);
} else {
  // Local storage not supported
}

Tworzenie interaktywnych map

JavaScript pozwala na manipulację elementami Canvas, co umożliwia tworzenie interaktywnych map i grafik. Jest to wykorzystywane m.in. do tworzenia map interaktywnych, gier typu platformówki czy innych elementów graficznych wymagających dynamicznego rysowania i obsługi zdarzeń.

var c = document.getElementById(myCanvas);
var ctx = c.getContext(2d);

c.addEventListener(click, function(event) {
  var x = event.clientX - c.offsetLeft;
  var y = event.clientY - c.offsetTop;
  
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2);
  ctx.fillStyle = red;
  ctx.fill();
});

Wykorzystanie bibliotek i frameworków

JavaScript posiada bogaty ekosystem bibliotek i frameworków ułatwiających pracę programistom. Przykładem mogą być popularne biblioteki takie jak jQuery, która ułatwia manipulację elementami DOM oraz obsługę zdarzeń; czy frameworki takie jak Vue.js czy React, które umożliwiają łatwe tworzenie aplikacji internetowych opartych na komponentach.

// Użycie jQuery do zmiany tła elementu po kliknięciu
$(document).ready(function(){
   $(button).click(function(){
     $(body).css(background-color, yellow);
   });
});

Parsowanie adresów URL

JavaScript pozwala na łatwe parsowanie adresów URL celem odzyskania poszczególnych elementów takich jak protokół, host, ścieżka czy parametry GET. Jest to przydatne m.in. podczas tworzenia własnych mechanizmów routingu w aplikacjach jednostronicowych (SPA).

var url_string = window.location.href; 
var url = new URL(url_string);
var protocol = url.protocol;
var host = url.host;
var path = url.pathname;
var params = url.searchParams.get(parameter)
console.log(protocol + // + host + path + params);

Tworzenie dynamicznych efektów

JavaScript daje możliwość tworzenia dynamicznych efektów na stronie internetowej. Możemy manipulować obiektami HTML, takimi jak animacje, przyciski czy obrazy. Przykładem może być animacja zmiany koloru tła po najechaniu myszką na element strony.

<script>
function changeColor(element) {
  element.style.backgroundColor = 'blue';
}

function revertColor(element) {
  element.style.backgroundColor = 'white';
}
</script>

<div onmouseover=changeColor(this) onmouseout=revertColor(this)>Najedź myszką, aby zobaczyć efekt</div>

Obsługa geolokalizacji

JavaScript umożliwia korzystanie z funkcji geolokalizacji w celu określenia położenia użytkownika. Dzięki temu można dostosować zawartość strony do lokalizacji, np. wyświetlać informacje o najbliższych punktach usługowych czy aktualnej pogodzie. Poniżej przedstawiono prosty przykład pobierania współrzędnych geograficznych.

if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    console.log('Pobrane współrzędne: ' + latitude + ', ' + longitude);
  });
} else {
  console.log('Twoja przeglądarka nie obsługuje geolokalizacji');
}

Animacje CSS3 za pomocą JavaScript

Za pomocą JavaScript możemy manipulować animacjami stworzonymi w CSS3. Możemy je uruchamiać, zatrzymywać lub zmieniać ich parametry w czasie rzeczywistym. Na przykładzie poniżej zostanie pokazane jak użyć JavaScript do startowania i zatrzymywania animacji rozmycia zdjęcia.

let img = document.getElementById('myImg');
img.addEventListener('click', function() {
  if(img.style.filter === 'blur(5px)') {
    img.style.filter = 'none';
  } else {
    img.style.filter = 'blur(5px)';
  }
});

Tworzenie nowoczesnych interfejsów użytkownika

JavaScript jest wykorzystywany do tworzenia nowoczesnych, responsywnych i interaktywnych interfejsów użytkownika. Dzięki bibliotekom takim jak React czy Vue.js możliwe jest budowanie zaawansowanych komponentów UI, takich jak listy z paginacją, formularze walidacyjne czy nawet całe systemy paneli administracyjnych. Poniżej znajduje się przykład prostego komponentu w React, który renderuje listę elementów.

class MyComponent extends React.Component {
  render() {
    return (
      <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
      </ul>
    );
  }
}

Dostosowywanie zachowania strony do różnych urządzeń

JavaScript jest niezbędny do tworzenia responsywnych witryn internetowych, które dobrze wyglądają i działają na różnych urządzeniach, od smartfonów po duże monitory. Większość frameworków front-endowych oferuje narzędzia do tworzenia responsywnych layoutów oraz obsługę mediów zapytania (media queries) w celu dopasowania zawartości do szerokości ekranu użytkownika. Zastosowanie takich rozwiązań pozwala na stworzenie stron internetowych o dobrym odbiorze zarówno na urządzeniach mobilnych, jak i desktopowych.

// Przykład użycia media query w CSS
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Interakcja z bazą danych i API

JavaScript umożliwia komunikację z serwerem poprzez wysyłanie żądań HTTP do API lub bezpośrednio do bazy danych. Popularnym sposobem odpytywania serwera jest wykorzystanie metody fetch() lub axios(). W poniższym przykładzie przedstawiono pobieranie danych z fikcyjnego API i ich wyświetlanie na stronie.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Zaawansowane efekty typograficzne

JavaScript może być używany do tworzenia zaawansowanych efektów typograficznych na stronie internetowej, takich jak animowane tytuły, zmieniające się układy tekstu czy nawet niestandardowe czcionki. Biblioteki takie jak Anime.js lub TypewriterJS umożliwiają łatwe dodawanie atrakcyjnych i interaktywnych efektów tekstowych.

var app = document.getElementById('typewriter');

var typewriter = new Typewriter(app, {
  loop: true
});

typewriter.typeString('Witaj na mojej stronie!')
  .pauseFor(2500)
  .deleteAll()
  .typeString('Zapraszam do lektury...')
  .pauseFor(2500)
  .start();

Rozwijanie aplikacji webowych o funkcjonalności offline

JavaScript daje możliwość implementacji funkcji pracy offline w aplikacjach webowych poprzez mechanizmy tzw. Service Workers oraz cache'owanie zasobów. Dzięki nim można zapewnić użytkownikom dostęp do treści nawet w przypadku braku połączenia sieciowego. Poniżej przedstawiono prosty przykład implementacji podstawowego Service Workera.

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(
      function(registration) {
        console.log('Service Worker zarejestrowany');
      },
      function(err) {
        console.log('Błąd podczas rejestracji Service Workera', err);
      }
    );
  });
}

Utworzenie animacji za pomocą HTML5 Canvas

HTML5 Canvas to potężne narzędzie, które pozwala na programowanie rysowania grafiki wektorowej. Jest wykorzystywane do tworzenia interaktywnych aplikacji i gier. Tworząc animacje za pomocą Canvas, można manipulować każdym elementem na płótnie, takim jak kształty, linie czy obrazy, co pozwala na stworzenie dynamicznych efektów wizualnych.

<canvas id=myCanvas width=200 height=100 style=border:1px solid #000;>

<script>
var c = document.getElementById(myCanvas);
var ctx = c.getContext(2d);
ctx.fillStyle = rgb(0, 0, 255);
ctx.fillRect(20, 20, 150, 100);
</script>

Parsowanie formularzy w JavaScript

JavaScript umożliwia analizę i przetwarzanie danych wprowadzanych przez użytkownika na formularzach. Możemy wykorzystać różne metody i własności aby uzyskać dostęp do wartości pól formularza i wykonać na nich operacje. Przykład poniżej pokazuje jak uzyskać wartość pola formularza oraz jak zmienić atrybuty styli CSS dla tego pola.

function validateForm() {
  var x = document.forms[myForm][fname].value;
  if (x == ) {
    alert(Pole musi zostać wypełnione);
    return false;
  }
}

Tworzenie interaktywnych interfejsów z wykorzystaniem frameworków

Współczesny rozwój aplikacji webowych sprawił, że istnieje wiele frameworków i bibliotek ułatwiających tworzenie interaktywnego i responsywnego UI. Takie biblioteki jak React.js czy Vue.js pozwalają na łatwe oraz szybkie implementowanie nowoczesnych rozwiązań UI w aplikacjach internetowych.

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Hello World!</p>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

Testowanie kodu JavaScript za pomocą jednostkowych testów

Dobrą praktyką jest pisanie testów jednostkowych dla kodu JavaScript. Narzędzia takie jak Jest czy Mocha pozwalają na pisanie automatycznych testów dla funkcji oraz modułów JS. W ten sposób można zapewnić jakość kodu i uniknąć błędów podczas rozwoju aplikacji.

function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Wykorzystanie Web Components

Web Components to zestaw technologii, który umożliwia tworzenie własnych niestandardowych elementów interfejsu użytkownika. Składają się z czterech głównych składników: Shadow DOM, HTML Templates, Custom Elements i HTML Imports. Dzięki nim programiści mogą tworzyć hermetyczne komponenty, które można wielokrotnie używać w aplikacjach internetowych.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: open});
    this.shadowRoot.innerHTML = 'Mój niestandardowy komponent';
  }
}

customElements.define('my-component', MyComponent);

Obsługa danych za pomocą LocalStorage

LocalStorage to mechanizm służący do przechowywania danych w przeglądarce internetowej. Umożliwia zapisywanie danych w postaci klucz-wartość na stałe lub tymczasowo. Programista może wykorzystać LocalStorage do przechowywania ustawień użytkownika, sesji logowania czy innych danych, które mają być dostępne nawet po zamknięciu przeglądarki.

// Zapisywanie wartości do LocalStorage
localStorage.setItem('username', 'john_doe');

// Odczytywanie wartości z LocalStorage
let username = localStorage.getItem('username');
console.log(username); // john_doe

Aplikacje Progressive Web Apps (PWA)

Progressive Web Apps (PWA) to strony internetowe lub aplikacje internetowe, które wykorzystują nowoczesne technologie webowe, aby zapewnić użytkownikom równie dobre doświadczenie jak tradycyjne aplikacje natywne. Dzięki obsłudze Service Workers, możliwości pracy offline oraz instalacji na ekran główny urządzenia PWA są coraz bardziej popularnym rozwiązaniem dla mobilnych i desktopowych aplikacji internetowych. Exemple:

Tworzenie customowych kształtów za pomocą Canvas API

Za pomocą JavaScriptu można wykorzystać Canvas API do rysowania niestandardowych kształtów i obrazów na płótnie HTML5. Umożliwia to tworzenie zaawansowanych grafik i animacji bez konieczności korzystania z dodatkowych bibliotek czy narzędzi. Przykłady wykorzystania Canvas API można znaleźć w grach internetowych, aplikacjach edytujących obrazy czy narzędziach projektowania.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

Parsowanie i manipulacja XML oraz JSON

JavaScript posiada wbudowane metody pozwalające na parsowanie oraz manipulację danymi tekstowymi w formatach XML oraz JSON. Pozwala to na odczytanie danych zwartych w tych formatach oraz konwersję ich do innej struktury danych wewnątrz aplikacji webowej.

// Parsowanie XML
var xmlString = '