• O nas
  • Ogłaszać
  • Polityka prywatności
  • Skontaktuj się z nami
Wiadomości MasterTrend
  • Dom
    • BLOG
    • SERWIS TECHNICZNY
    • SKLEP
  • Samouczki
  • Sprzęt komputerowy
  • Hazard
  • Telefony komórkowe
  • Bezpieczeństwo
  • Okna
  • Sztuczna inteligencja
  • Oprogramowanie
  • Sieci
  • Aktualności
Brak wyniku
Zobacz wszystkie wyniki
  • Dom
    • BLOG
    • SERWIS TECHNICZNY
    • SKLEP
  • Samouczki
  • Sprzęt komputerowy
  • Hazard
  • Telefony komórkowe
  • Bezpieczeństwo
  • Okna
  • Sztuczna inteligencja
  • Oprogramowanie
  • Sieci
  • Aktualności
Brak wyniku
Zobacz wszystkie wyniki
Wiadomości MasterTrend
Brak wyniku
Zobacz wszystkie wyniki
Start Samouczki

Stwórz swoją pierwszą aplikację internetową i opanuj programowanie bez stresu 🚀💻

Wgląd w MasterTrend przez Wgląd w MasterTrend
13 maja 2025 r.
W Samouczki
Czas czytania:Lectura de 10 minutos
DO DO
0
Łatwo i szybko stwórz swoją pierwszą aplikację internetową z notatkami i licznikiem
1
WSPÓLNY
4
Widoki
Udostępnij na FacebookuUdostępnij na Twitterze

Zawartość

  1. Stwórz swoją pierwszą aplikację internetową: notatki + licznik łatwo i szybko 📝⚡
  2. Co zamierzasz zbudować
  3. Jak zamierzasz to zbudować?
  4. Struktura aplikacji
  5. Jak zbudować notatnik
    1. Budowanie struktury za pomocą HTML
    2. Spraw, by wyglądały dobrze dzięki CSS
    3. Dodawanie funkcjonalności za pomocą JavaScript
    4. Powiązane posty

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:

  1. Program nie policzy poprawnie żadnego słowa w wierszu, ponieważ nie ma wokół niego żadnych znaków spacji.
  2. 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. 🗒️🌍

Podziel się tym:
49FacebookLinkedInPinterestXRedditTumblrBłękitne nieboWątkiUdział
49
AKCJE

Powiązane posty

  • Jak naprawić błąd „Coś poszło nie tak” na Twitterze
  • Jak bezpłatnie pobierać osadzone filmy w 2024 r.
  • Najlepsze narzędzia diagnostyczne dla systemu Windows 10/11
  • AMD Radeon RX 7000 5 i 6 nanometrów
  • Aspekty Intel Alder Lake P i U
  • Prędkość z dyskiem SSD – PC i Laptop
  • Boston Dynamics Atlas w akcji
  • Struktura katalogów Linuxa – wyjaśnienie
Tagi: Treść EvergreenPorady techniczne
Poprzedni post

Jak wyświetlić lub ukryć biblioteki w systemie Windows 11: przewodnik krok po kroku 🚀🔒

Następna publikacja

Gry RTS: Dlaczego duże studia z nich rezygnują? 🎮🔥

Wgląd w MasterTrend

Wgląd w MasterTrend

Nasz zespół redakcyjny udostępnia szczegółowe recenzje, poradniki i zalecenia, które pomogą Ci w pełni wykorzystać możliwości urządzeń i narzędzi cyfrowych.

Następna publikacja
Gry RTS: 5 tytułów niezależnych, które podtrzymują strategię

Gry RTS: Dlaczego duże studia z nich rezygnują? 🎮🔥

5 2 głosów
Ocena artykułu
Subskrybuj
Dostęp
Powiadomienie o
gość

gość

0 Uwagi
Więcej starożytności
Najnowszy Więcej głosów
Komentarze online
Zobacz wszystkie komentarze

Pozostań w kontakcie

  • 976 Fani
  • 118 Świta
  • 1,4 tys. Świta
  • 1,8 tys. Subskrybenci

  • Tendencje
  • Uwagi
  • Ostatni
Jak dodać zegar do pulpitu systemu Windows 11: 3 niezawodne sztuczki!

Jak dodać zegar do pulpitu systemu Windows 11: osiągnij więcej w ciągu kilku minut! ⏱️

1 maja 2025 r.
12 najlepszych alternatyw dla Lucky Patcher na Androida

Alternatywy dla Lucky Patcher: 12 lepszych i łatwiejszych w obsłudze aplikacji! 🎮⚡

12 maja 2025 r.
Jak przechowywać przedmioty w Oblivion Remastered: 5 sztuczek, które musisz znać! 🗝️💼

Jak przechowywać przedmioty w Oblivion Remastered, nie tracąc łupów 💎⚡

1 maja 2025 r.
Jak korzystać z AdGuard DNS na Androidzie w 2024 roku

Jak korzystać z AdGuard DNS na Androidzie w 2025 roku

11 lutego 2025 r.
Funkcje Gmaila na Androidzie: Oszczędzaj czas dzięki 5 wskazówkom

Funkcje Gmaila na Androidzie: 5 sztuczek, o których nie wiedziałeś! 📱✨

12
Naprawa płyty głównej - Naprawa płyty głównej

Naprawa płyty głównej notebooka

10
Instalacja systemu Windows 11 Home bez Internetu

Instalacja systemu Windows 11 Home bez Internetu

10
Jak wykonać kopię zapasową sterowników w systemie Windows 11/10 w 4 krokach!

Jak wykonać kopię zapasową sterowników w systemie Windows 11/10: unikaj błędów! 🚨💾

10
REPO Odkryj chaos i śmiech w każdej grze

REPO: Chaotyczna gra, którą każdy chce teraz wypróbować 🎮💥

Czerwiec 23, 2025
Agenci AI i automatyzacji Zwiększ swoją produktywność x5

Agenci AI i automatyzacji: oszczędzaj czas i pieniądze już teraz! ⚙️🚀

Czerwiec 23, 2025
Dysk flash USB i 6 niesamowitych zastosowań, których powinieneś spróbować już teraz

Pamięć USB Flash i 6 nieoczekiwanych zastosowań, które zmienią Twoje życie 💡🔥

Czerwiec 23, 2025
NARUSZENIE_DMA_WERYFIKATORA_STEROWNIKA

DRIVER_VERIFIER_DMA_VIOLATION: Napraw błąd BSOD w systemie Windows 11 już teraz ⚡🛠️

Czerwiec 22, 2025

Najnowsze wiadomości

REPO Odkryj chaos i śmiech w każdej grze

REPO: Chaotyczna gra, którą każdy chce teraz wypróbować 🎮💥

Czerwiec 23, 2025
14
Agenci AI i automatyzacji Zwiększ swoją produktywność x5

Agenci AI i automatyzacji: oszczędzaj czas i pieniądze już teraz! ⚙️🚀

Czerwiec 23, 2025
11
Dysk flash USB i 6 niesamowitych zastosowań, których powinieneś spróbować już teraz

Pamięć USB Flash i 6 nieoczekiwanych zastosowań, które zmienią Twoje życie 💡🔥

Czerwiec 23, 2025
9
NARUSZENIE_DMA_WERYFIKATORA_STEROWNIKA

DRIVER_VERIFIER_DMA_VIOLATION: Napraw błąd BSOD w systemie Windows 11 już teraz ⚡🛠️

Czerwiec 22, 2025
28
Logotyp wiadomości MasterTrend

MasterTrend Info to Twoje źródło wiedzy o technologii: odkryj wiadomości, samouczki i analizy dotyczące sprzętu, oprogramowania, gier, urządzeń mobilnych i sztucznej inteligencji. Zapisz się do naszego newslettera i nie przegap żadnych trendów.

Obserwuj nas

Przeglądaj według kategorii

  • Hazard
  • Sprzęt komputerowy
  • Sztuczna inteligencja
  • Telefony komórkowe
  • Aktualności
  • Sieci
  • Bezpieczeństwo
  • Oprogramowanie
  • Samouczki
  • Okna

Najnowsze wiadomości

REPO Odkryj chaos i śmiech w każdej grze

REPO: Chaotyczna gra, którą każdy chce teraz wypróbować 🎮💥

Czerwiec 23, 2025
Agenci AI i automatyzacji Zwiększ swoją produktywność x5

Agenci AI i automatyzacji: oszczędzaj czas i pieniądze już teraz! ⚙️🚀

Czerwiec 23, 2025
  • O nas
  • Ogłaszać
  • Polityka prywatności
  • Skontaktuj się z nami

Copyright © 2025 https://mastertrend.info/ - Wszelkie prawa zastrzeżone. Wszystkie znaki towarowe są własnością ich właścicieli.

wpDiscuz
es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
Brak wyniku
Zobacz wszystkie wyniki
  • Hazard
  • Sprzęt komputerowy
  • Sztuczna inteligencja
  • Telefony komórkowe
  • Aktualności
  • Sieci
  • Bezpieczeństwo
  • Oprogramowanie
  • Samouczki
  • Okna

Copyright © 2025 https://mastertrend.info/ - Wszelkie prawa zastrzeżone. Wszystkie znaki towarowe są własnością ich właścicieli.

RedditBłękitne nieboXMastodontWiadomości hakerskie
Podziel się tym:
MastodontWKWhatsAppTelegramSMSWiadomości hakerskieLiniaPosłaniec
Twoja instancja Mastodon