Utwórz swoją pierwszą aplikację internetową: Podręcznik dla początkujących dotyczący tworzenia prostej aplikacji do notatek i licznika słów

Rozpoczęcie przygody z kodowaniem może wydawać się zniechęcające pośród przytłaczającego wyboru języków i frameworków. Możesz nawet pomyśleć o powierzeniu wszystkiego sztucznej inteligencji! Niemniej jednak programowanie dla sieci może być ekscytujące, dostępne i całkowicie darmowe!

Co zbudujesz

W tym samouczku utworzysz prostą aplikację internetową służącą do przechowywania notatek tekstowych i jednoczesnego liczenia znaków i słów w tych notatkach.

Ta aplikacja stale zapisuje dane, umożliwiając jej pobieranie tekstu nawet po odświeżeniu strony lub jej ponownym otwarciu. To praktyczne rozwiązanie do utrzymywania szybkiego dostępu do ważnego tekstu, czy to adresów, adresów URL, czy czegokolwiek innego.

Przykład prostej aplikacji internetowej wyświetlającej notatki zawierające wpisy w kalendarzu i listę adresów URL.

Ponadto aplikacja śledzi liczbę znaków i słów, zapewniając doskonałe wprowadzenie do manipulacji ciągami znaków. Podczas gdy aplikacja ma podstawowy projekt, ten samouczek wyposaża Cię w podstawowe umiejętności tworzenia aplikacji internetowych, odblokowując ogromne możliwości kodowania.

Jak to zbudujesz

Chociaż aplikacje internetowe mogą się znacznie różnić, zazwyczaj integrują trzy podstawowe technologie: HTML, CSS i JavaScript. Każdy z tych komponentów pełni kluczową funkcję w rozwoju sieci:

HTML: Jest to struktura Twojej aplikacji internetowej, określająca sposób organizacji treści. HTML definiuje, czy tekst jest akapitem, nagłówkiem czy elementem listy.
CSS: kaskadowe arkusze stylów dodają styl do Twojej zawartości, umożliwiając Ci zmianę kolorów, czcionek i układu. Możesz użyć CSS, aby pogrubić elementy, dostosować obramowania i umieścić elementy na ekranie.
JavaScript: Ten język programowania jest integralną częścią wprowadzania funkcjonalności do aplikacji internetowej. JavaScript może tworzyć interaktywne doświadczenia, takie jak pokazywanie/ukrywanie elementów lub budowanie złożonych aplikacji, takich jak gry.

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

Struktura aplikacji

Aplikacja, którą zamierzasz utworzyć, składa się z trzech prostych plików: index.html, styles.cssi script.js.

Nie ma zaawansowanych wymagań, aby uruchomić tę aplikację — wystarczy przeglądarka internetowa. Ponieważ jest to aplikacja front-end, nie ma potrzeby stosowania języków skryptowych back-end, takich jak PHP lub serwery lokalne. Po zakończeniu po prostu otwórz index.htmlw przeglądarce, aby zobaczyć swoją aplikację w akcji.

Ta aplikacja wykorzystuje interfejs API Web Storage do zapisywania tekstu, co pozwala na przechowywanie informacji bez konieczności zapisywania ich w plikach na dysku, gdyż JavaScript nie ma dostępu do systemu plików.

Jak zbudować notatnik

Zacznij od utworzenia trzech niezbędnych plików w tym samym katalogu. Alternatywnie możesz pobrać pliki z tego repozytorium GitHub .

Budowanie struktury za pomocą HTML

Plik index.htmlprzedstawia strukturę zawartości Twojej aplikacji. Zawiera odniesienia do plików CSS i JavaScript, umożliwiając przeglądarce ich połączenie w płynne działanie.

Podobnie jak każdy dokument HTML, główna struktura składa się z sekcji nagłówkowej zawierającej metadane oraz części głównej zawierającej treść:

<!DOCTYPE html> <html> <head> ...</head> <body> ...</body> </html>

Sekcja nagłówka zawiera krótkie metadane, w tym tytuł strony (widoczny na pasku tytułu przeglądarki) i link do styles.csspliku:

<title>Text</title> <link rel="stylesheet"href="styles.css"/>

Treść jest bardziej szczegółowa i zawiera kluczowe elementy:

<div id="counter"> words: <span id="words">0</span> / characters: <span id="chars">0</span> </div> <textarea id="text"autofocus="1"></textarea> <script src="script.js"></script>

Element div, zidentyfikowany jako „count”, zawiera liczbę słów i znaków. Pozostaje na górze i aktualizuje się dynamicznie w miarę zmian tekstu.

Ważne jest, aby zwrócić uwagę na użycie idatrybutów — ich unikalne wartości pomagają nadać tym elementom styl i określić ich funkcjonalność.

Zapewnia textareaobszar, w którym użytkownicy mogą wprowadzać tekst z autofocusatrybutem zapewniającym gotowość do pisania po załadowaniu strony. Na koniec HTML odwołuje się do script.jspliku.

W tym momencie otwórz index.htmlw przeglądarce. Jeszcze nie będzie działać i może nie wyglądać dobrze, ale sprawdzanie postępów na każdym etapie jest pomocne.

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

Sprawianie, że rzeczy wyglądają dobrze za pomocą CSS

Choć ta podstawowa aplikacja nie wymaga znaczących zmian w projekcie, możemy ulepszyć jej układ, nadając jej nieco stylu.

Najpierw ustalamy styl nadwozia, aby określić ogólny wygląd:

body { margin: 0; padding: 0; display: grid; min-height: 100vh; grid-template-rows: min-content 1fr; }

Ten CSS wykorzystuje układ siatki , aby rozmieścić liczbę słów i znaków w wąskim wierszu nad obszarem tekstowym. grid-template-rowsWłaściwość określa, że wiersz liczby powinien zajmować najmniejszą możliwą przestrzeń (min-content), podczas gdy obszar tekstowy wypełnia pozostałą przestrzeń (1fr).

Wiersz licznika otrzymuje podstawowy styl, aby odróżnić go od obszaru tekstowego, głównie za pośrednictwem tła:

#counter { font-family: sans-serif; background-color: #f7f7f7; text-align: center; width: 100%; padding: 0 0.5em 0; }

Obszar tekstowy jest stylizowany w taki sposób, aby zapewnić czytelność tekstu, pozostawiając odpowiednią ilość wolnego miejsca:

textarea { width: 100%; height: 100%; font-size: 16pt; padding: 1em; box-sizing: border-box; outline: 0; border: none; border-top: 1px solid #999; }

Aplikacja do robienia notatek z możliwością dostosowania stylów wyświetla pasek licznika u góry, a poniżej pełnowymiarowy obszar tekstowy.

Dodawanie funkcjonalności za pomocą JavaScript

Mając już podstawy, czas na dodanie funkcjonalności do aplikacji — kodu, który ją ożywi!

Zanim zagłębisz się w kodowanie, konieczne jest nakreślenie zamierzonej funkcjonalności. W przypadku tej aplikacji skupisz się na dwóch głównych celach:

Zatwierdź i odśwież wprowadzony tekst.
Dynamicznie aktualizuj liczbę znaków i słów.

Te funkcje wymagają aktualizacji pewnych elementów dokumentu. Dlatego zacznij od uzyskania odniesień do tych węzłów za pomocą getElementByIdmetody:

const words = document.getElementById("words"); const chars = document.getElementById("chars"); const textarea = document.getElementById("text");

Tutaj words, charsi textareaodpowiadają odpowiednim sekcjom w dokumencie, zidentyfikowanym na podstawie atrybutów ID.

Następnie wprowadź interaktywność, ustawiając aplikację tak, aby reagowała po zmianie tekstu:

textarea.addEventListener("input", function(ev) { localStorage.setItem("text", ev.target.value); update_counts(ev.target.value); });

Metoda addEventListenerwiąże funkcję, która ma zostać wyzwolona, gdy wystąpi określone zdarzenie. W tym przypadku, gdy użytkownik wejdzie w interakcję z textarea, zdarzenie „input” wyzwala funkcję.

Następnie API Web Storage jest używane do zachowania bieżącej zawartości textarea, dostępnej za pośrednictwem ev.target.value. setItemMetoda kojarzy klucz z danymi, które mają zostać zapisane.

Aby mieć pewność, że tekst zostanie załadowany po zainicjowaniu lub odświeżeniu aplikacji, dodaj kolejnego słuchacza:

window.addEventListener("load", function(ev) { var text = localStorage.getItem("text"); textarea.value = text; update_counts(text); });

Ten nasłuchiwacz odpowiada na zdarzenie ładowania okna. Po załadowaniu okna pobiera zapisany tekst i odpowiednio ustawia wartość pola tekstowego, wywołując update_counts()odświeżenie liczby słów i znaków.

Pozostała funkcjonalność mieści się w update_counts()funkcji, która wygląda następująco:

function update_counts(text) { chars.innerHTML = text.length; words.innerHTML = text.split(' ').length; }

W przeciwieństwie do textarea, zwykły tekst nie ma atrybutu wartości; dlatego innerHTMLzamiast tego używana jest właściwość. lengthWłaściwość ciągu pobiera całkowitą liczbę znaków.

Aby podzielić tekst na słowa, używamy text.split(' '), który dzieli ciąg przy każdym znaku spacji, tworząc tablicę słów. Właściwość długości powstałej tablicy podaje liczbę słów.

Jednak możesz napotkać kilka problemów z tym kodem:

Program nie będzie poprawnie liczył pojedynczych słów w wierszu bez otaczających je spacji.
Jeśli nie ma tekstu, funkcja błędnie zgłosi pojedyncze słowo, co wynika ze sposobu splitdziałania.

Aby rozwiązać pierwszy problem, rozważ podział na wyrażenie regularne, aby uwzględnić znaki odstępu: \s. Aby rozwiązać drugi problem, odfiltruj wszystkie puste ciągi:

words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;

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

Tworzenie użytecznych aplikacji internetowych można osiągnąć za pomocą zaledwie kilku podstawowych plików! Możesz rozszerzyć tę prostą aplikację do robienia notatek, integrując dodatkowe funkcje, takie jak wykorzystanie właściwości window.location do dostępu do adresów URL lub umożliwienie zapisywania wielu notatek przez zmianę nazw przekazywanych do localStorage.setItem.

Dodatkowe informacje

1. Jakie są wymagania wstępne dla tego samouczka dotyczącego aplikacji internetowej?

Wszystko, czego potrzebujesz, to podstawowa znajomość HTML, CSS i JavaScript. Narzędzia takie jak edytor tekstu (np. VSCode) i przeglądarka internetowa również będą pomocne.

2. Czy mogę zmodyfikować tę aplikację internetową, aby dodać więcej funkcji?

Oczywiście! Ten samouczek zapewnia podstawę. Możesz dodać funkcjonalność, taką jak zapisywanie wielu notatek, kategoryzowanie notatek, a nawet implementację funkcji wyszukiwania!

3. Jak działa API Web Storage?

Interfejs API Web Storage umożliwia aplikacjom internetowym przechowywanie danych w przeglądarce. Przechowuje dane w parach klucz-wartość, które są zachowywane nawet po zamknięciu przeglądarki, co ułatwia ich późniejsze pobranie.

Źródło i obrazy