Stwórz swoją pierwszą aplikację internetową: notatki + licznik łatwo i szybko 📝⚡

Początki programowania mogą wydawać się przytłaczające, biorąc pod uwagę tak wiele języków, frameworków i metodologii, które trzeba wziąć pod uwagę. Czasami może się wydawać, że łatwiej będzie delegować wszystko sztucznej inteligencji. Nie martw się! Programowanie stron internetowych może być proste, przyjemne, a co najważniejsze, całkowicie darmowe! 🌐✨

Co zamierzasz zbudować

Postępując zgodnie z tym samouczkiem, utworzysz prostą aplikację internetową umożliwiającą przechowywanie notatek tekstowych oraz zliczanie znaków i słów.

Aplikacja zachowa dane, dzięki czemu zapamięta tekst, gdy ponownie załadujesz lub otworzysz stronę. Oznacza to, że będziesz mieć wygodny sposób na zapisanie dowolnego tekstu, do którego będziesz chciał się później odwołać, na przykład adresów, adresów URL itp. 📄🔗

Przykład prostej aplikacji internetowej opartej na tekście, która wyświetla notatki, zawierające wpisy w kalendarzu i listę adresów URL.

Zlicza również znaki i słowa, co stanowi dobre wprowadzenie do obsługi ciągów tekstowych. Oczywiście, aplikacja jest bardzo prosta: taki jest jej cel! Dzięki temu samouczkowi nauczysz się podstaw tworzenia aplikacji internetowych, a potem świat będzie stał przed Tobą otworem. 🦪💻

Jak zamierzasz to zbudować?

Mimo że aplikacje internetowe są bardzo zróżnicowane, zazwyczaj wykorzystują trzy główne technologie: HTML, CSS i JavaScript. Zanim zaczniesz, musisz koniecznie zrozumieć ich rolę. 📚

HTML: Hypertext Markup Language umożliwia zdefiniowanie struktury treści. Za jego pomocą można oznaczyć tekst według jego znaczenia, wskazując na przykład, czy jest to akapit, nagłówek czy element listy.
CSS: Kaskadowe arkusze stylów pozwalają na stylizowanie treści. Używając tego języka, możesz pokolorować akapit na zielono, pogrubić wszystkie linki lub umieścić pasek boczny obok głównego artykułu. 🎨
JavaScript: Dzięki temu językowi programowania możesz dodać funkcjonalność do swojej witryny internetowej. Możesz ustawić przyciski, które po kliknięciu pokażą lub ukryją części dokumentu, albo wdrożyć pełnoprawny edytor tekstu lub grę wideo. 🎮

On strona internetowa.dev (napisane przez członków zespołu Chrome) i MDN, sieć programistów Mozilli, to dwa doskonałe źródła informacji na temat podstawowych technologii internetowych.

Strona główna serwisu web.dev z materiałami do nauki języków HTML, CSS i JavaScript.

Struktura aplikacji

Aplikacja, którą zbudujesz, będzie się składać z trzech prostych plików: index.html, styles.css i script.js. 🗂️

Nie ma żadnych specjalnych wymagań, aby uruchomić aplikację, potrzebna jest tylko przeglądarka internetowa. Nie ma żadnych funkcji zaplecza, więc nie potrzebujesz języka skryptowego, takiego jak PHP, ani lokalnego serwera WWW. Po zakończeniu możesz otworzyć plik index.html bezpośrednio w przeglądarce i wszystko się ułoży. 😊

Należy pamiętać, że ta aplikacja zapisuje tekst bez zapisywania go w konkretnym pliku na dysku, ponieważ JavaScript nie ma dostępu do systemu plików. Korzysta z interfejsu API Web Storage, który jest skuteczną alternatywą dla plików cookie. 🍪💾

Jak zbudować notatnik

Utwórz następujące trzy pliki w tym samym katalogu, a następnie otwórz index.html w przeglądarce internetowej. Alternatywnie możesz pobrać pliki z to repozytorium GitHub. 📥

Budowanie struktury za pomocą HTML

Plik index.html definiuje strukturę zawartości Twojej aplikacji w formacie HTML. Dodaj odniesienia do pozostałych dwóch plików, aby przeglądarka mogła je połączyć w celu uzyskania produktu końcowego.

Podobnie jak we wszystkich dokumentach HTML, struktura najwyższego poziomu obejmuje sekcję nagłówka zawierającą metadane oraz sekcję treści zawierającą faktyczną treść, która pojawi się na stronie:

html>
<html>
<głowa>
    ...
głowa>

<ciało>
…
ciało>
html>

Metadane w nagłówku są bardzo krótkie i zawierają tylko tytuł strony (który pojawia się na pasku tytułu przeglądarki) oraz odwołanie do pliku styles.css:

    <tytuł>Teksttytuł>
    <połączyć rel="arkusz stylów" strona główna=„style.css” />

Ciało jest bardziej skomplikowane, ale składa się z zaledwie kilku ważnych części:

    <podział id="lada">
        słowa: <przęsło id="słowa">0przęsło>
        / postacie: <przęsło id="znaki">0przęsło>
    podział>

<pole tekstowe id="tekst" autofokus=«1»>pole tekstowe>

<scenariusz źródło=«skrypt.js»>scenariusz>

Element div zawiera liczbę słów i znaków w aplikacji. Będzie on umieszczony na górze aplikacji internetowej i będzie aktualizowany za każdym razem, gdy zmieni się tekst.

Należy zwrócić uwagę na atrybuty id, które są niezbędne do przeprowadzenia operacji. Wartość identyfikatora musi być unikatowa, aby aplikacja mogła jej użyć do zidentyfikowania konkretnego elementu. Dzięki temu możemy nadać tym elementom odpowiedni styl oraz określić ich przeznaczenie podczas dodawania funkcjonalności.

Obszar tekstowy to wbudowany element formularza umożliwiający wpisywanie prostego tekstu w przeglądarce. Dzięki funkcji autofokusa będziesz gotowy do pisania od razu po załadowaniu strony. Na końcu strona odwołuje się do pliku JavaScript script.js.

W tym momencie możesz otworzyć plik index.html w przeglądarce. Na razie nie będzie to miało żadnego znaczenia i nawet nie będzie to wyglądać dobrze, ale warto testować aplikację na każdym etapie, aby mieć pewność, że jej podstawowe funkcje działają zgodnie z oczekiwaniami.

Widok aplikacji internetowej do robienia notatek z domyślnymi stylami przeglądarki, pokazujący wszystko zgrupowane w lewym górnym rogu.

Spraw, by wyglądały dobrze dzięki CSS

CSS umożliwia stylizowanie części strony internetowej poprzez kierowanie ich na te części i określanie wartości dla właściwości, takich jak rozmiar czcionki i kolor tła. Ta przykładowa aplikacja nie wymaga bardzo wyrafinowanego projektu, ponieważ jej interfejs jest bardzo podstawowy. Możemy jednak złagodzić te nierówności odrobiną stylu. 🎨✨

Najpierw nadaj styl ciału, aby określić ogólny projekt:

ciało {
    margines: 0;
    wyściółka: 0;
    wyświetlacz: siatka;
    minimalna wysokość: 100w.h.;
    siatka-szablon-wiersze: minimalna zawartość 1z;
}

Ten CSS używa układ siatki aby umieścić liczbę słów i znaków w wąskim wierszu nad polem tekstowym. Właściwość grid-template-rows określa, że wiersz zliczający powinien być jak najkrótszy (min-content), a pole tekstowe powinno wypełniać pozostałą przestrzeń (1fr).

Rząd licznika ma podstawowy styl, który odróżnia go od reszty tekstu, głównie poprzez tło:

Licznik # {
    rodzina czcionek: bezszeryfowy;
    kolor tła: #f7f7f7;
    wyrównanie tekstu: centrum;
    szerokość: 100%;
    wyściółka: 0.5em 0;
}

Na koniec obszar tekstowy jest stylizowany tak, aby wyświetlał czytelny tekst, zapewniając jednocześnie wystarczająco dużo miejsca. Linia oddzielająca liczby od tekstu stanowi w rzeczywistości górną granicę tego obszaru tekstowego.

pole tekstowe {
    szerokość: 100%;
    wysokość: 100%;
    rozmiar czcionki: 16cz.;
    wyściółka: 1W;
    rozmiar pudełka: pole obramowania;
    zarys: 0;
    granica: nic;
    granica-góra: 1piksel solidny #999;
}

Aplikacja do robienia notatek z niestandardowymi stylami wyświetla pasek postępu u góry, a poniżej pełnowymiarowy obszar tekstowy.

Dodawanie funkcjonalności za pomocą JavaScript

Mając już strukturę i styl, możesz dodać funkcjonalność, czyli kod, który sprawi, że ta prosta aplikacja faktycznie coś zrobi. 🛠️

Zanim zaczniesz pisać nawet najprostszy kod, warto zrozumieć, co on będzie robił. W tym przypadku istnieje tylko kilka ogólnych wymagań:

Zapisz wprowadzony tekst i w razie potrzeby ponownie go załaduj.
Aktualizuj liczbę znaków i słów, aby uzyskać statystyki w czasie rzeczywistym. 📊

Oba wymagania wiążą się z aktualizacją elementów dokumentu. Skrypt rozpoczyna więc działanie od pobrania odniesień do tych węzłów za pomocą metody getElementById:

stała słowa = dokument.getElementById("słowa");
stała znaki = dokument.getElementById("znaki");
stała pole tekstowe = dokument.getElementById("tekst");

Należy pamiętać, że słowa, znaki i tekst to identyfikatory odpowiednich elementów w dokumencie, przypisane w pliku HTML za pomocą atrybutu id.

Następnie potrzebujemy, aby aplikacja reagowała, gdy tekst zostanie zmieniony:

textarea.addEventListener("wejście", funkcjonować(yw) { localStorage.setItem("tekst", ev.target.value); update_counts(ev.target.value); });

Nasłuchiwacz zdarzeń to funkcja, którą JavaScript automatycznie uruchamia po wystąpieniu określonego zdarzenia. W tym przypadku dołączamy obiekt nasłuchujący do węzła textarea, który jest wykonywany, gdy wystąpi zdarzenie „input”. Dzieje się tak, gdy ktoś wchodzi w interakcję z polem tekstowym.

Następnie używamy interfejsu API Web Storage, aby zapisać bieżącą zawartość pola tekstowego pochodzącą z ev.target.value. W tej strukturze ev jest obiektem reprezentującym zdarzenie, które wyzwoliło obiekt nasłuchujący, ev.target jest węzłem, który odebrał zdarzenie, a ev.target.value jest tekstem tego pola tekstowego.

Metoda setItem przyjmuje dwa parametry: nazwę klucza, który ma zostać skojarzony z danymi, i faktyczne dane, które mają zostać zapisane.

Następnie wywołujemy update_counts(), przekazując ten sam tekst. Wyjaśnimy tę funkcję za chwilę.

Teraz, gdy zapiszemy tekst, będziesz chciał go ponownie załadować po otwarciu lub przeładowaniu aplikacji. Możemy się tym zająć, używając innego słuchacza:

okno.addEventListener("obciążenie", funkcjonować(yw) {
    zmienna tekst = localStorage.getItem("tekst"); textarea.value = tekst; update_counts(tekst); });

Ten obiekt nasłuchujący obsługuje zdarzenie ładowania występujące w obiekcie okna, będącym reprezentacją najwyższego poziomu okna przeglądarki. Po załadowaniu okna wywołanie getItem() zwraca zapisaną wartość tekstową z pamięci lokalnej. Następnie ten kod ustawia wartość textarea na załadowany tekst i, podobnie jak powyższy obiekt nasłuchujący, wywołuje update_counts() z tym tekstem.

Pozostała praca wykonywana jest w funkcji update_counts(), która wygląda następująco:

funkcjonować aktualizacja_liczby(tekst) { chars.innerHTML = długość tekstu; słowa.innerHTML = tekst.split(' ').długość; }

W przeciwieństwie do pola tekstowego, zwykły tekst nie ma właściwości wartości, dlatego zamiast tego ustawiamy właściwość innerHTML. Właściwość length ciągu jest prostą właściwością tylko do odczytu, która podaje nam liczbę znaków.

text.split(' ') dzieli ciąg w miejscach spacji i zwraca wynik w postaci tablicy ciągów. Podobnie jak ciągi znaków, tablice mają właściwość długości, która informuje nas o liczbie elementów w tablicy.

Jeśli jednak przetestujesz ten kod, możesz zauważyć kilka błędów:

Program nie policzy poprawnie żadnego słowa w wierszu, ponieważ nie ma wokół niego żadnych znaków spacji.
Jeśli nie ma żadnego tekstu, zgłosi tylko jedno słowo, ponieważ tak działa podział.

Aby rozwiązać pierwszy problem, możesz podzielić zadanie używając wyrażenia regularnego (\s oznacza „spację”) zamiast spacji. Aby rozwiązać drugie zadanie, odfiltruj puste ciągi z wyniku:

    słowa.innerHTML = tekst.split(/\S/).filtr(funkcjonować(N) { powrót n != ''; }).długość;

Jeśli nie do końca rozumiesz ten wers, sprawdź strony MDN podział I filtr.

Aplikacja internetowa z przykładowym tekstem, pokazująca dokładną liczbę znaków i słów.

Można utworzyć wiele przydatnych aplikacji internetowych, korzystając zaledwie z kilku plików. Możesz także rozszerzyć tę prostą aplikację do robienia notatek, dodając więcej funkcji. Na przykład możesz użyć właściwość window.location aby pobrać bieżący adres URL i obsługiwać wiele notatek poprzez zmianę nazwy przekazywanej do localStorage.setItem. 🗒️🌍

Tagi: Treść Evergreen Porady techniczne