![\"Przyk\u0142ad](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"Przyk\u0142ad")
<\/figure>\nPonadto aplikacja \u015bledzi liczb\u0119 znak\u00f3w i s\u0142\u00f3w, zapewniaj\u0105c doskona\u0142e wprowadzenie do manipulacji ci\u0105gami znak\u00f3w. Podczas gdy aplikacja ma podstawowy projekt, ten samouczek wyposa\u017ca Ci\u0119 w podstawowe umiej\u0119tno\u015bci tworzenia aplikacji internetowych, odblokowuj\u0105c ogromne mo\u017cliwo\u015bci kodowania.<\/p>\n
Jak to zbudujesz<\/h2>\n
Chocia\u017c aplikacje internetowe mog\u0105 si\u0119 znacznie r\u00f3\u017cni\u0107, zazwyczaj integruj\u0105 trzy podstawowe technologie: HTML, CSS i JavaScript. Ka\u017cdy z tych komponent\u00f3w pe\u0142ni kluczow\u0105 funkcj\u0119 w rozwoju sieci:<\/p>\n
- \n
- HTML:<\/strong> Jest to struktura Twojej aplikacji internetowej, okre\u015blaj\u0105ca spos\u00f3b organizacji tre\u015bci. HTML definiuje, czy tekst jest akapitem, nag\u0142\u00f3wkiem czy elementem listy.<\/li>\n
- CSS:<\/strong> kaskadowe arkusze styl\u00f3w dodaj\u0105 styl do Twojej zawarto\u015bci, umo\u017cliwiaj\u0105c Ci zmian\u0119 kolor\u00f3w, czcionek i uk\u0142adu. Mo\u017cesz u\u017cy\u0107 CSS, aby pogrubi\u0107 elementy, dostosowa\u0107 obramowania i umie\u015bci\u0107 elementy na ekranie.<\/li>\n
- JavaScript:<\/strong> Ten j\u0119zyk programowania jest integraln\u0105 cz\u0119\u015bci\u0105 wprowadzania funkcjonalno\u015bci do aplikacji internetowej. JavaScript mo\u017ce tworzy\u0107 interaktywne do\u015bwiadczenia, takie jak pokazywanie\/ukrywanie element\u00f3w lub budowanie z\u0142o\u017conych aplikacji, takich jak gry.<\/li>\n<\/ul>\n
![\"Strona](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"Strona")
<\/figure>\nStruktura aplikacji<\/h2>\n
Aplikacja, kt\u00f3r\u0105 zamierzasz utworzy\u0107, sk\u0142ada si\u0119 z trzech prostych plik\u00f3w:
index.html<\/code>,styles.css<\/code>iscript.js<\/code>.<\/p>\nNie ma zaawansowanych wymaga\u0144, aby uruchomi\u0107 t\u0119 aplikacj\u0119 \u2014 wystarczy przegl\u0105darka internetowa. Poniewa\u017c jest to aplikacja front-end, nie ma potrzeby stosowania j\u0119zyk\u00f3w skryptowych back-end, takich jak PHP lub serwery lokalne. Po zako\u0144czeniu po prostu otw\u00f3rz
index.html<\/code>w przegl\u0105darce, aby zobaczy\u0107 swoj\u0105 aplikacj\u0119 w akcji.<\/p>\nTa aplikacja wykorzystuje interfejs API Web Storage do zapisywania tekstu, co pozwala na przechowywanie informacji bez konieczno\u015bci zapisywania ich w plikach na dysku, gdy\u017c JavaScript nie ma dost\u0119pu do systemu plik\u00f3w.<\/p>\n
Jak zbudowa\u0107 notatnik<\/h2>\n
Zacznij od utworzenia trzech niezb\u0119dnych plik\u00f3w w tym samym katalogu. Alternatywnie mo\u017cesz pobra\u0107 pliki z tego repozytorium GitHub<\/a> .<\/p>\n
Budowanie struktury za pomoc\u0105 HTML<\/h3>\n
Plik
index.html<\/code>przedstawia struktur\u0119 zawarto\u015bci Twojej aplikacji. Zawiera odniesienia do plik\u00f3w CSS i JavaScript, umo\u017cliwiaj\u0105c przegl\u0105darce ich po\u0142\u0105czenie w p\u0142ynne dzia\u0142anie.<\/p>\nPodobnie jak ka\u017cdy dokument HTML, g\u0142\u00f3wna struktura sk\u0142ada si\u0119 z sekcji nag\u0142\u00f3wkowej zawieraj\u0105cej metadane oraz cz\u0119\u015bci g\u0142\u00f3wnej zawieraj\u0105cej tre\u015b\u0107:<\/p>\n
\n<!DOCTYPE html><\/span>
\n<html><\/span>
\n<head><\/span>
\n...<\/head><\/span>
\n<body><\/span>
\n...<\/body><\/span>
\n<\/html><\/span>
\n<\/code><\/p>\nSekcja nag\u0142\u00f3wka zawiera kr\u00f3tkie metadane, w tym tytu\u0142 strony (widoczny na pasku tytu\u0142u przegl\u0105darki) i link do
styles.css<\/code>pliku:<\/p>\n
\n<title>Text<\/title><\/span>
\n<link rel=\"stylesheet\"href=\"styles.css\"\/><\/span>
\n<\/code><\/p>\nTre\u015b\u0107 jest bardziej szczeg\u00f3\u0142owa i zawiera kluczowe elementy:<\/p>\n
\n<div id=\"counter\"><\/span>
\nwords: <span id=\"words\">0<\/span><\/span>
\n\/ characters: <span id=\"chars\">0<\/span><\/span>
\n<\/div><\/span>
\n<textarea id=\"text\"autofocus=\"1\"><\/textarea><\/span>
\n<script src=\"script.js\"><\/script><\/span>
\n<\/code><\/p>\nElement
div<\/code>, zidentyfikowany jako \u201ecount\u201d, zawiera liczb\u0119 s\u0142\u00f3w i znak\u00f3w. Pozostaje na g\u00f3rze i aktualizuje si\u0119 dynamicznie w miar\u0119 zmian tekstu.<\/p>\nWa\u017cne jest, aby zwr\u00f3ci\u0107 uwag\u0119 na u\u017cycie
id<\/code>atrybut\u00f3w \u2014 ich unikalne warto\u015bci pomagaj\u0105 nada\u0107 tym elementom styl i okre\u015bli\u0107 ich funkcjonalno\u015b\u0107.<\/p>\nZapewnia
textarea<\/code>obszar, w kt\u00f3rym u\u017cytkownicy mog\u0105 wprowadza\u0107 tekst zautofocus<\/code>atrybutem zapewniaj\u0105cym gotowo\u015b\u0107 do pisania po za\u0142adowaniu strony. Na koniec HTML odwo\u0142uje si\u0119 doscript.js<\/code>pliku.<\/p>\nW tym momencie otw\u00f3rz
index.html<\/code>w przegl\u0105darce. Jeszcze nie b\u0119dzie dzia\u0142a\u0107 i mo\u017ce nie wygl\u0105da\u0107 dobrze, ale sprawdzanie post\u0119p\u00f3w na ka\u017cdym etapie jest pomocne.<\/p>\n![\"Widok](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"Widok")
<\/figure>\nSprawianie, \u017ce rzeczy wygl\u0105daj\u0105 dobrze za pomoc\u0105 CSS<\/h3>\n
Cho\u0107 ta podstawowa aplikacja nie wymaga znacz\u0105cych zmian w projekcie, mo\u017cemy ulepszy\u0107 jej uk\u0142ad, nadaj\u0105c jej nieco stylu.<\/p>\n
Najpierw ustalamy styl nadwozia, aby okre\u015bli\u0107 og\u00f3lny wygl\u0105d:<\/p>\n
\nbody {<\/span>
\n margin: 0;<\/span>
\n padding: 0;<\/span>
\n display: grid;<\/span>
\n min-height: 100vh;<\/span>
\n grid-template-rows: min-content 1fr;<\/span>
\n}<\/span>
\n<\/code><\/p>\nTen CSS wykorzystuje uk\u0142ad siatki<\/a> , aby rozmie\u015bci\u0107 liczb\u0119 s\u0142\u00f3w i znak\u00f3w w w\u0105skim wierszu nad obszarem tekstowym.
grid-template-rows<\/code>W\u0142a\u015bciwo\u015b\u0107 okre\u015bla, \u017ce \u200b\u200bwiersz liczby powinien zajmowa\u0107 najmniejsz\u0105 mo\u017cliw\u0105 przestrze\u0144 (min-content), podczas gdy obszar tekstowy wype\u0142nia pozosta\u0142\u0105 przestrze\u0144 (1fr).<\/p>\nWiersz licznika otrzymuje podstawowy styl, aby odr\u00f3\u017cni\u0107 go od obszaru tekstowego, g\u0142\u00f3wnie za po\u015brednictwem t\u0142a:<\/p>\n
\n#counter {<\/span>
\n font-family: sans-serif;<\/span>
\n background-color: #f7f7f7;<\/span>
\n text-align: center;<\/span>
\n width: 100%;<\/span>
\n padding: 0 0.5em 0;<\/span>
\n}<\/span>
\n<\/code><\/p>\nObszar tekstowy jest stylizowany w taki spos\u00f3b, aby zapewni\u0107 czytelno\u015b\u0107 tekstu, pozostawiaj\u0105c odpowiedni\u0105 ilo\u015b\u0107 wolnego miejsca:<\/p>\n
\ntextarea {<\/span>
\n width: 100%;<\/span>
\n height: 100%;<\/span>
\n font-size: 16pt;<\/span>
\n padding: 1em;<\/span>
\n box-sizing: border-box;<\/span>
\n outline: 0;<\/span>
\n border: none;<\/span>
\n border-top: 1px solid #999;<\/span>
\n}<\/span>
\n<\/code><\/p>\n![\"Aplikacja](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"Aplikacja")
<\/figure>\nDodawanie funkcjonalno\u015bci za pomoc\u0105 JavaScript<\/h3>\n
Maj\u0105c ju\u017c podstawy, czas na dodanie funkcjonalno\u015bci do aplikacji \u2014 kodu, kt\u00f3ry j\u0105 o\u017cywi!<\/p>\n
Zanim zag\u0142\u0119bisz si\u0119 w kodowanie, konieczne jest nakre\u015blenie zamierzonej funkcjonalno\u015bci. W przypadku tej aplikacji skupisz si\u0119 na dw\u00f3ch g\u0142\u00f3wnych celach:<\/p>\n
- \n
- Zatwierd\u017a i od\u015bwie\u017c wprowadzony tekst.<\/li>\n
- Dynamicznie aktualizuj liczb\u0119 znak\u00f3w i s\u0142\u00f3w.<\/li>\n<\/ul>\n
Te funkcje wymagaj\u0105 aktualizacji pewnych element\u00f3w dokumentu. Dlatego zacznij od uzyskania odniesie\u0144 do tych w\u0119z\u0142\u00f3w za pomoc\u0105
getElementById<\/code>metody:<\/p>\n
\nconst words = document.getElementById(\"words\");<\/span>
\nconst chars = document.getElementById(\"chars\");<\/span>
\nconst textarea = document.getElementById(\"text\");<\/span>
\n<\/code><\/p>\nTutaj
words<\/code>,chars<\/code>itextarea<\/code>odpowiadaj\u0105 odpowiednim sekcjom w dokumencie, zidentyfikowanym na podstawie atrybut\u00f3w ID.<\/p>\nNast\u0119pnie wprowad\u017a interaktywno\u015b\u0107, ustawiaj\u0105c aplikacj\u0119 tak, aby reagowa\u0142a po zmianie tekstu:<\/p>\n
\ntextarea.addEventListener(\"input\", function(ev) {<\/span>
\n localStorage.setItem(\"text\", ev.target.value);<\/span>
\n update_counts(ev.target.value);<\/span>
\n});<\/span>
\n<\/code><\/p>\nMetoda
addEventListener<\/code>wi\u0105\u017ce funkcj\u0119, kt\u00f3ra ma zosta\u0107 wyzwolona, \u200b\u200bgdy wyst\u0105pi okre\u015blone zdarzenie. W tym przypadku, gdy u\u017cytkownik wejdzie w interakcj\u0119 z textarea, zdarzenie \u201einput\u201d wyzwala funkcj\u0119.<\/p>\nNast\u0119pnie API Web Storage jest u\u017cywane do zachowania bie\u017c\u0105cej zawarto\u015bci textarea, dost\u0119pnej za po\u015brednictwem
ev.target.value<\/code>.setItem<\/code>Metoda kojarzy klucz z danymi, kt\u00f3re maj\u0105 zosta\u0107 zapisane.<\/p>\nAby mie\u0107 pewno\u015b\u0107, \u017ce tekst zostanie za\u0142adowany po zainicjowaniu lub od\u015bwie\u017ceniu aplikacji, dodaj kolejnego s\u0142uchacza:<\/p>\n
\nwindow.addEventListener(\"load\", function(ev) {<\/span>
\n var text = localStorage.getItem(\"text\");<\/span>
\n textarea.value = text;<\/span>
\n update_counts(text);<\/span>
\n});<\/span>
\n<\/code><\/p>\nTen nas\u0142uchiwacz odpowiada na zdarzenie \u0142adowania okna. Po za\u0142adowaniu okna pobiera zapisany tekst i odpowiednio ustawia warto\u015b\u0107 pola tekstowego, wywo\u0142uj\u0105c
update_counts()<\/code>od\u015bwie\u017cenie liczby s\u0142\u00f3w i znak\u00f3w.<\/p>\nPozosta\u0142a funkcjonalno\u015b\u0107 mie\u015bci si\u0119 w
update_counts()<\/code>funkcji, kt\u00f3ra wygl\u0105da nast\u0119puj\u0105co:<\/p>\n
\nfunction update_counts(text) {<\/span>
\n chars.innerHTML = text.length;<\/span>
\n words.innerHTML = text.split(' ').length;<\/span>
\n}<\/span>
\n<\/code><\/p>\nW przeciwie\u0144stwie do textarea, zwyk\u0142y tekst nie ma atrybutu warto\u015bci; dlatego
innerHTML<\/code>zamiast tego u\u017cywana jest w\u0142a\u015bciwo\u015b\u0107.length<\/code>W\u0142a\u015bciwo\u015b\u0107 ci\u0105gu pobiera ca\u0142kowit\u0105 liczb\u0119 znak\u00f3w.<\/p>\nAby podzieli\u0107 tekst na s\u0142owa, u\u017cywamy
text.split(' ')<\/code>, kt\u00f3ry dzieli ci\u0105g przy ka\u017cdym znaku spacji, tworz\u0105c tablic\u0119 s\u0142\u00f3w. W\u0142a\u015bciwo\u015b\u0107 d\u0142ugo\u015bci powsta\u0142ej tablicy podaje liczb\u0119 s\u0142\u00f3w.<\/p>\nJednak mo\u017cesz napotka\u0107 kilka problem\u00f3w z tym kodem:<\/p>\n
- \n
- Program nie b\u0119dzie poprawnie liczy\u0142 pojedynczych s\u0142\u00f3w w wierszu bez otaczaj\u0105cych je spacji.<\/li>\n
- Je\u015bli nie ma tekstu, funkcja b\u0142\u0119dnie zg\u0142osi pojedyncze s\u0142owo, co wynika ze sposobu
split<\/code>dzia\u0142ania.<\/li>\n<\/ol>\nAby rozwi\u0105za\u0107 pierwszy problem, rozwa\u017c podzia\u0142 na wyra\u017cenie regularne, aby uwzgl\u0119dni\u0107 znaki odst\u0119pu:
\\s<\/code>. Aby rozwi\u0105za\u0107 drugi problem, odfiltruj wszystkie puste ci\u0105gi:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"Aplikacja](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"Aplikacja")
<\/figure>\nTworzenie u\u017cytecznych aplikacji internetowych mo\u017cna osi\u0105gn\u0105\u0107 za pomoc\u0105 zaledwie kilku podstawowych plik\u00f3w! Mo\u017cesz rozszerzy\u0107 t\u0119 prost\u0105 aplikacj\u0119 do robienia notatek, integruj\u0105c dodatkowe funkcje, takie jak wykorzystanie w\u0142a\u015bciwo\u015bci window.location<\/a> do dost\u0119pu do adres\u00f3w URL lub umo\u017cliwienie zapisywania wielu notatek przez zmian\u0119 nazw przekazywanych do
localStorage.setItem<\/code>.<\/p>\nDodatkowe informacje<\/h3>\n
1. Jakie s\u0105 wymagania wst\u0119pne dla tego samouczka dotycz\u0105cego aplikacji internetowej?<\/strong><\/h4>\n
Wszystko, czego potrzebujesz, to podstawowa znajomo\u015b\u0107 HTML, CSS i JavaScript. Narz\u0119dzia takie jak edytor tekstu (np. VSCode) i przegl\u0105darka internetowa r\u00f3wnie\u017c b\u0119d\u0105 pomocne.<\/p>\n
2. Czy mog\u0119 zmodyfikowa\u0107 t\u0119 aplikacj\u0119 internetow\u0105, aby doda\u0107 wi\u0119cej funkcji?<\/strong><\/h4>\n
Oczywi\u015bcie! Ten samouczek zapewnia podstaw\u0119. Mo\u017cesz doda\u0107 funkcjonalno\u015b\u0107, tak\u0105 jak zapisywanie wielu notatek, kategoryzowanie notatek, a nawet implementacj\u0119 funkcji wyszukiwania!<\/p>\n
3. Jak dzia\u0142a API Web Storage?<\/strong><\/h4>\n
Interfejs API Web Storage umo\u017cliwia aplikacjom internetowym przechowywanie danych w przegl\u0105darce. Przechowuje dane w parach klucz-warto\u015b\u0107, kt\u00f3re s\u0105 zachowywane nawet po zamkni\u0119ciu przegl\u0105darki, co u\u0142atwia ich p\u00f3\u017aniejsze pobranie.<\/p>\n
- CSS:<\/strong> kaskadowe arkusze styl\u00f3w dodaj\u0105 styl do Twojej zawarto\u015bci, umo\u017cliwiaj\u0105c Ci zmian\u0119 kolor\u00f3w, czcionek i uk\u0142adu. Mo\u017cesz u\u017cy\u0107 CSS, aby pogrubi\u0107 elementy, dostosowa\u0107 obramowania i umie\u015bci\u0107 elementy na ekranie.<\/li>\n