◢ⓊⓀⓄⒹⓄⓌⒶⓃⒾ◣ blog programistyczny

Aby przeliczyć wagę złota na cenę musimy znać szacunkową cenę danej próby. Formularz HTML Zacznijmy od stworzenia prostej strony HTML zawierającej formularz, w którym będzie wybierana próba złota oraz podawana do obliczenia waga: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Przelicznik Ceny Złota</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } </style> </head> <body> <h1>Przelicznik ceny złota użytkowego</h1> <p><label for="purity">Wybierz próbę złota:</label> <select id="purity"> <option value="333">333 (8 karatów)</option> <option value="375">375 (9 karatów)</option...

W tym wpisie stworzymy prosty licznik odliczający od podanej wartości. Kod HTML Zacznijmy od utworzenia kontenera dla licznika: <div class="counter-container"> <div id="counter" class="counter">100</div> </div> Kod CSS Utwórzmy jakieś efekty animowane dla licznika: .counter { font-size: 100px; transition: transform 0.3s ease, color 0.3s ease; } .fade { opacity: 0; transition: opacity 0.3s ease; } .bounce { animation: bounce 0.3s ease; } @keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } Kod JavaScript document.addEventListener('DOMContentLoaded', () => { const startNumber = 100; // Odliczamy od const countdownSpeed = 500; // Prędkość odliczania (w milisekundach) const counterElement = document.getElementById(...

Wczoraj wpadłem na pomysł, aby napisać jakiś artykuł o Touch events W JavaScript. W dobie smartfonów obsługa dotykowa to teraz podstawa, więc myślę, że dobrze będzie wiedzieć co nieco. Aby pokazać praktyczne wykorzystanie obsługi ekranu dotykiem stworzymy prostą grę. Zamierzenie jest takie - na ekranie mają zostać wyświetlone elementy (np. kółka) o różnych rozmiarach, poruszające się w różnych kierunkach. Po tapnięciu przez użytkownika danego elementu, ma on znikać. Po usunięciu wszystkich elementów użytkownik powinien zobaczyć stosowny komunikat. Kod HTML Zacznijmy od utworzenia prostego dokumentu HTML. Na tym etapie stworzymy od razu div z licznikiem usuniętych elementów oraz div z komunikatem o wygranej. Zostanie on wyświetlony, gdy użytkownik usunie wszystkie kółka z planszy. <!DOCTYPE html> <html lang="pl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...

Chesz wyświetlić na stronie numer telefonu, ale nie koniecznie od razu pełny? Jeśli tak, czytaj dalej. Gdy zajdzie potrzeba wyświetlenia numer telefonu na stronie internetowej, nie koniecznie trzeba wyświetlać go od razu w całości. Można utrudnić zbieranie numerów przez roboty i wyświetlić na starcie np. 3 pierwsze cyfry. Gdy zainteresowany użytkownik będzie potrzebował całego numeru może kliknąć "Pokaż pełny numer", który wtedy uzyska. W tym wpisie pokaże jak stworzyć właśnie taką formę prezentacji numeru telefonu. Zatem założenie jest takie: statycznie w kodzie html wstawiamy 3 pierwsze cyfry numeru i dopiero po kliknięciu w link "Pokaż cały numer" wyświetlony zostanie on w pełnej postaci. Kod HTML <p>Numer telefonu: <span id="phone">123 *** ***</span> <a href="#" id="showNumber">Pokaż cały numer</a> Kod JavaScript function showNumber(event) { const displayed = 0; if(event.type == 'cli...

Wraz z rozwojem technologii internetowych, coraz częściej spotykamy się z potrzebą przechowywania danych po stronie klienta. W HTML5 został wprowadzony mechanizm localStorage , który umożliwia przechowywanie danych w przeglądarce użytkownika. W tym artykule przyjrzymy się bliżej temu mechanizmowi i przedstawimy praktyczny przykład jego użycia. LocalStorage to mechanizm, który umożliwia przechowywanie danych w przeglądarce internetowej. Dane zapisane przy użyciu localStorage są trwałe i dostępne nawet po zamknięciu przeglądarki. Możemy przechowywać różne rodzaje danych, takie jak tekst, liczby, obiekty JavaScript itp. Zapisywanie danych Aby zapisać dane przy użyciu localStorage, możemy skorzystać z metody setItem() . Przykładowo, jeśli chcemy zapisać jakiś kolor, możemy użyć poniższego kodu: localStorage.setItem('color', '#000000'); Odczytywanie danych Aby odczytać dane zapisane w localStorage, możemy skorzystać z metody getItem() . Kontynuując nasz przykład, odczy...

W tym wpisie stworzymy kostkę 3D , czyli trójwymiarowy kwadrat lub jak kto woli - sześcian z użyciem CSS3. Ponadto dodamy obsługę JavaScript do obracania kostką za pomocą dotyku. Do czego może Ci się to przydać? Nie wiem ;) Poznasz praktyczne wykorzystanie właściwości CSS transform . Przykładowa kostka Kod Tworzenie kostki 3D zaczniemy od kodu HTML - trzeba utworzyć kontener dla kostki oraz jej 6 boków: <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face top" style="background-color:rgba(0,100,0, 0.4);"></div> <div class="face bottom" style="background-color:rgba(0,100,0, 0.4);"></div> <div class="face left"></div> <div class="face right"></div> </div> Kolejna rzecz to ostyl...

Moduły stanowią kluczowy element organizacji i zarządzania kodem w JavaScript. W tym artykule skoncentrujemy się na zaawansowanych technikach pracy z modułami, które pomogą w efektywnym zarządzaniu kodem i poprawie wydajności aplikacji. Dynamiczne ładowanie modułów Dynamiczne ładowanie modułów pozwala na importowanie modułów w trakcie działania aplikacji, zamiast wczytywania ich na etapie inicjalizacji. To przydatna technika w przypadku modułów, które są potrzebne tylko w określonych sytuacjach. W JavaScript możemy wykorzystać metodę import() do dynamicznego importowania modułów. W poniższym przykładzie moduł zostanie załadowany asynchronicznie w momencie, gdy będzie potrzebny, co może znacznie przyspieszyć ładowanie strony: import('./some-module.js').then(module => { // Kod obsługujący załadowany moduł module.showAlert(); }).catch(error => console.log('Wystąpił błąd')); Plik modułu (some-module.js): export function showAlert() { alert(...

Ręczne tworzenie tabel z dużą ilością danych jest czasochłonne i nudne, dlatego warto takie tabele generować dynamicznie np. za pomocą jQuery. W tym wpisie pokażę jak wygenerować wiersze i kolumny tabeli na bazie danych w JSON. Kod HTML Zacznijmy od stworzenia tabeli: <table id="table-cars" class="table table-striped"> <thead> <tr> </tr> </thead> <tbody> </tbody> </table> Oczywiście, aby tabela miała ładny wygląd trzeba ją sobie ostylować np. korzystając z Bootstrapa. Kod JavaScript / jQuery <script> $(document).ready(function () { // Przykładowe dane JSON var jsonData = { "headers": ["Marka", "Pojemność (l)", "Moc (KM)"], "data": [ {"marka": "Volkswagen", "pojemność": 1.6, "moc": 110}, ...

Zdarzyło Ci się kiedyś otrzymać wartość NaN w wyniku wywołania jakieś funkcji? Jeśli tak i nie wiesz co i dlaczego, to zapraszam do dalszej lektury. Wartość NaN czyli Not-A-Number jest wartością liczbową, ale nie jest poprawną liczbą. W praktyce oznacza to, że w przypadku błędu w funkcji np. przekazania złych argumentów i wykonania na nich operacji matematycznych lub użycia w niektórych funkcjach/wyrażeniach, zwróci ona właśnie NaN. Spójrz na ten prosty przykład: function cal(a, b) { return parseInt(a) + parseInt(b); } cal(10, 10); // Zwróci: 20 cal('test', 10); // Zwróci: NaN W powyższym przykładzie przekazujemy do funkcji cal dwa argumenty. Następnie konwertujemy przekazane argumenty na liczby całkowite i zwracamy ich sumę. Jeśli argumenty są błędne np. przekazany zostanie argument typu string funkcja zwróci wartość NaN. Kiedy zwracane jest NaN? Wartość NaN zwracana jest gdy: nie uda się konwersja liczb funkcjami takimi jak parseInt, Number; nie uda się zwrócić...

W JavaScript do sprawdzenia połączenia z internetem, czyli czy przeglądarka jest online, czy offline służy właściwość onLine obiektu navigator . navigator.onLine zwraca true , jeśli przeglądarka jest online, w przeciwnym razie zwracana jest wartość false . Istnieje też możliwość wykrycia zmiany stanu połączenia, należy w tym celu posłużyć się zdarzeniami online i offline obiektu window . Przykład użycia if(navigator.onLine) { alert('Jesteś połączony'); } else { alert('Jesteś offline'); } Praktyczne wykorzystanie W tym przykładzie stworzymy skrypt powiadomienia wyświetlanego na stronie w przypadku każdej zmiany stanu połączenia. function createNotification(text) { const notifi = document.createElement('div'); notifi.textContent = text; notifi.setAttribute('id', 'notification'); document.body.appendChild(notifi); } function removeNotification() { const notifi = document.getElementById('notification'); if(not...

Adblock działa na zasadzie filtrowania zawartości stron internetowych. Wykorzystuje listy filtrów, które zawierają reguły dotyczące elementów, które mają zostać zablokowane. Te reguły opierają się na różnych czynnikach, takich jak adresy URL, klasy CSS, identyfikatory, atrybuty elementów itp. Gdy użytkownik odwiedza stronę, Adblock analizuje kod i porównuje go z regułami z list filtrów. Jeśli element na stronie pasuje do reguł blokowania, Adblock usuwa go z widoku, co skutkuje brakiem wyświetlania reklam. Jest kilka sposobów na sprawdzenie czy Adblock jest włączony . W tym wpisie zaprezentuje dwa rozwiązania. Należy jednak pamiętać, że działanie różnych Adblocków może się od siebie różnić i niekoniecznie sposoby tu przedstawione mogą zadziałać. Metoda 1 Ta metoda to dynamiczne utworzenie jakiegoś elementu div z klasą np. "ad" i nadanie mu właściwości display: block . Jeśli Adblock będzie włączony taki div nie zostanie wyświetlony, a przeliczone style dlatego elementu będą ...

W tym krótkim wpisie pokażę jak zrobić formularz z nieaktywnym polem input text , które aktywować się będzie warunkowo - w tym przykładzie po zaznaczeniu odpowiedniego checkboksa. Formularz Tworząc formularz nadajemy tagom input text atrybut disabled co czyni je nieaktywnymi. W tagach input checkbox dodajemy atrybut onclick z wywołaniem funkcji setEnabled - będzie to funkcja ustawiająca dane pole tekstowe jako aktywne. <form action="" method="post"> <p><input type="checkbox" name="checkbox1" id="checkbox1" onclick="setEnabled(event);" /> marka</p> <p><input type="checkbox" name="checkbox2" id="checkbox2" onclick="setEnabled(event);" /> kolor</p> <p><input type="checkbox" name="checkbox3" id="checkbox3" onclick="setEnabled(event);" /> rocznik</p> <p><input type...

Kod QR (Quick Response) to popularny "nośnik informacji" w dzisiejszym cyfrowym świecie. Jest on wykorzystywany do przechowywania różnych rodzajów informacji takich jak np. adresy URL, dane kontaktowe, numery telefonów. W tym artykule dowiesz się, jak wygenerować kod QR za pomocą biblioteki qrcode w Node.js. Instalacja biblioteki qrcode Pierwszym krokiem jest zainstalowanie biblioteki qrcode , która umożliwia generowanie kodów QR w Node.js. Można to zrobić, uruchamiając polecenie `npm install qrcode` w swoim katalogu projektu. Po zainstalowaniu biblioteki możemy przejść do kodowania. Przykład użycia const qrcode = require('qrcode'); // Dane wejściowe const inputData = 'https://www.example.com'; // Generowanie kodu QR qrcode.toDataURL(inputData, function (err, url) { if (err) throw err; // Wyświetlanie kodu QR w konsoli console.log(url); // Zapisywanie kodu QR jako plik obrazu const fs = require('fs'); fs.writeFileSync('qrcode.pn...

W tym szybkim poradniku dowiesz się jak stworzyć przycisk "Idź do góry". Zadaniem przycisku jest płynne przewinięcie strony do górnej krawędzi okna przeglądarki. Kod HTML Zacznijmy od utworzenia przycisku: <button class="scroll-to-top" type="button" id="scroll-to-top">☝</button> Kod CSS Ostylujmy nasz przycisk: .scroll-to-top { display: none; z-index: 9999; position: fixed; bottom: 20px; right: 20px; border: 0; border-radius: 50%; background-color: #181818; width: 48px; line-height: 46px; text-align: center; font-size: 26px; } Kod JavaScript Obsługa przycisku: $(document).ready(function() { // Pokaż przycisk, gdy użytkownik scrolluje w dół $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#scroll-to-top').fadeIn(); } else { ...

Obiekt Window jest najwyższej w hierarchii obiektów Hhhh. Obiekt ten reprezentuje okno przeglądarki kartę z dokumentem DOM. Każda karta, w której uruchomiony jest kod hhh ma własny obiekt Window. Obiekt ten ma wiele metod i właściwości, w tym wpisie zostaną wymienione najczęściej używane według autora. Window metody alert Wyświetla okno dialogowe z komunikatem, jeśli został podany. setInterval Uruchamia stałe wywoływanie funkcji lub kodu z określonym opóźnieniem. clearInterval Anuluje wywoływanie funkcji lub kodu uruchomione przez setInterval. setTimeout Wywołuje funkcję lub kod po określonym czasie podanym w Mili sekundach. clearTimeout Anuluje odliczanie ustawione przez setTimeout. focus Ustawia okno bieżącym. blur Przesuwa focus z bieżącego okna. open Otwiera nowe okno. scroll Przewija okno według podanych koordynatów. scrollBy Przewija dokument według podanych koordynatów. scrollTo Przewija dokument do podanych koordynatów.

Wraz z rozwojem aplikacji internetowych, coraz częściej stajemy w obliczu potrzeby wykonywania skomplikowanych obliczeń w przeglądarce. Tradycyjne podejście, polegające na wykonywaniu wszystkich operacji w głównym wątku strony, może prowadzić do spadku wydajności i blokowania interfejsu użytkownika. Na szczęście, technologia HTML5 Web Workers oferuje rozwiązanie tego problemu. W tym artykule przyjrzymy się bliżej temu, czym są Web Workers i jak możemy z nich skorzystać w naszych aplikacjach. Wprowadzenie do Web Workers Web Workers to mechanizm wielowątkowego przetwarzania w przeglądarce, który umożliwia wykonywanie obliczeń w tle, niezależnie od głównego wątku strony. Dzięki temu, możemy uniknąć blokowania interfejsu użytkownika i poprawić wydajność naszych aplikacji. Web Workers działają w izolacji od głównego wątku, co oznacza, że nie mają dostępu do DOM-u strony. Jednak mogą komunikować się z głównym wątkiem za pomocą asynchronicznej komunikacji. Tworzenie i uruchamianie Web Work...

W tym wpisie stworzymy płynnie wysuwany panel boczny z menu strony lub inną zawartością. Kod HTML Zaczynamy od kodu HTML z przykładowym menu: <div id="menu" class="menu"> <button type="button" id="show-menu" class="show-menu" onclick="showMenu();"> <i class="menu-bar menu-bar-1"></i> <i class="menu-bar menu-bar-2"></i> <i class="menu-bar menu-bar-3"></i> </button> <div> <h3>Menu</h3> <ul> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> <li><a href="#">Menu item 5</a></li> </ul> </div> <!-- Tu wstawiasz za...

Gdy mamy do dyspozycji dane zwrócone w formacie JSON i chcemy użyć ich w kodzie JavaScript konieczne jest najpierw sparsowanie tego ciągu do obiektu JSON. Do parsowania ciągu na obiekt JSON w JavaScript służy metoda JSON.parse , która jako argument przyjmuje ciąg do sparsowania. Metoda ta zwraca obiekt JSON z nazwami właściwości opisanymi w ciągu JSON oraz ich wartościami. Przykład const data = '{"name" : "John", "age" : 30}'; const j = JSON.parse(data); alert(j.name); // Wyświetli 'John' alert(j.age); // Wyświetli: 30 alert(data); // Wyświetli: {"name" : "John", "age" : 30}

W celu pobrania lub ustawienia wartości atrybutu class dla elementu HTML można skorzystać z właściwości className . Przykład const div = document.getElementById('myDiv'); alert(myDiv.className); // Wyświetli 'myDiv' myDiv.className = 'test'; alert(myDiv.className); // Wyświetli 'test'

Do dynamicznej zmiany tytułu strony HTML należy użyć właściwości title obiektu Document . Dzięki właściwościom i metodom tego obiektu mamy dostęp do danych aktualnie wczytanej strony. Właściwość title pozwala odczytywać i zmieniać zawartość tagu <title>. Przykład <p>Zmień tytuł na <a href="#" onclick="return changeTitle('Test');">Test</a> | <a href="#" onclick="return changeTitle('Hello World!');">Hello World!</a></p> <script> function changeTitle(t) { document.title = t; alert('Tytuł zmieniony na: ' + document.title); return false; } </script> Co w efekcie da: Zmień tytuł na Test | Hello World!