Izveidojiet savu pirmo tīmekļa lietojumprogrammu: rokasgrāmata iesācējiem vienkāršas piezīmju lietotnes un vārdu skaitītāja izveidei

Kodēšanas ceļojuma sākšana var šķist biedējoša, ņemot vērā milzīgo valodu un sistēmu izvēli. Jūs pat varētu domāt par to, ka AI varētu visu apstrādāt! Tomēr programmēšana tīmeklim var būt aizraujoša, pieejama un pilnīgi bez maksas!

Ko jūs uzbūvēsit

Šajā apmācībā jūs izveidosit vienkāršu tīmekļa lietojumprogrammu, kas paredzēta teksta piezīmju glabāšanai, vienlaikus skaitot šajās piezīmēs esošās rakstzīmes un vārdus.

Šī lietojumprogramma pastāvīgi saglabā datus, ļaujot tai izgūt tekstu pat pēc lapas atsvaidzināšanas vai atkārtotas atvēršanas. Tas ir praktisks risinājums, lai nodrošinātu ātru piekļuvi svarīgam tekstam, neatkarīgi no tā, vai tās ir adreses, URL vai jebkas cits.

Piemērs vienkāršai teksta tīmekļa lietotnei, kurā tiek rādītas piezīmes, tostarp kalendāra ieraksts un URL saraksts.

Turklāt lietotne izseko rakstzīmju un vārdu skaitu, nodrošinot lielisku ievadu virkņu manipulācijās. Lai gan lietojumprogrammas dizains ir vienkāršs, šī apmācība sniedz jums pamata tīmekļa lietotņu izstrādes prasmes, paverot plašas kodēšanas iespējas.

Kā jūs to izveidosit

Lai gan tīmekļa lietojumprogrammas var ievērojami atšķirties, tās parasti integrē trīs būtiskas tehnoloģijas: HTML, CSS un JavaScript. Katrs no šiem komponentiem pilda svarīgu funkciju tīmekļa izstrādē:

HTML: šī ir jūsu tīmekļa lietojumprogrammas struktūra, kas nosaka satura organizēšanu. HTML nosaka, vai teksts ir rindkopa, virsraksts vai saraksta vienums.
CSS: kaskādes stila lapas piešķir jūsu saturam stilu, ļaujot mainīt krāsas, fontus un izkārtojumu. Varat izmantot CSS, lai padarītu elementus treknrakstā, pielāgotu apmales un novietotu elementus ekrānā.
JavaScript: šī programmēšanas valoda ir neatņemama sastāvdaļa funkcionalitātes ievadīšanai jūsu tīmekļa lietojumprogrammā. JavaScript var radīt interaktīvu pieredzi, piemēram, parādīt/slēpt elementus vai veidot sarežģītas lietojumprogrammas, piemēram, spēles.

Web.dev vietnes sākumlapa ar mācību resursiem HTML, CSS un JavaScript.

Lietotnes struktūra

Lietojumprogrammā, kuru gatavojaties izveidot, ir trīs vienkārši faili: index.html, styles.css, un script.js.

Lai palaistu šo lietotni, nav papildu prasību — pietiek ar tīmekļa pārlūkprogrammu. Tā kā šī ir priekšgala lietotne, nav vajadzīgas aizmugures skriptu valodas, piemēram, PHP vai vietējie serveri. Pēc pabeigšanas vienkārši atveriet to index.htmlsavā pārlūkprogrammā, lai redzētu, kā jūsu lietotne darbojas.

Šī lietotne izmanto Web Storage API, lai saglabātu tekstu, ļaujot tai saglabāt informāciju bez nepieciešamības rakstīt diska failos, jo JavaScript nav piekļuves failu sistēmai.

Kā izveidot piezīmju ņēmēju

Sāciet, izveidojot trīs nepieciešamos failus vienā direktorijā. Varat arī lejupielādēt failus no šīs GitHub krātuves .

Struktūras veidošana, izmantojot HTML

Failā index.htmlir izklāstīta jūsu lietotnes satura struktūra. Tajā ir iekļautas atsauces uz CSS un JavaScript failiem, ļaujot pārlūkprogrammai tos apvienot viendabīgā pieredzē.

Tāpat kā jebkurš HTML dokuments, galvenais ietvars sastāv no galvas sadaļas ar metadatiem un pamatteksta, kurā ir saturs:

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

Galvenajā sadaļā ir īsi metadati, tostarp lapas nosaukums (redzams pārlūkprogrammas virsrakstjoslā) un saite uz styles.cssfailu:

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

Korpuss ir detalizētāks, ieskaitot galvenās sastāvdaļas:

<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, kas apzīmēts kā “skaitītājs”, ir ietverts vārdu un rakstzīmju skaits. Tas paliek augšpusē un tiek dinamiski atjaunināts, mainoties tekstam.

Ir ļoti svarīgi ņemt vērā atribūtu izmantošanuid — to unikālās vērtības palīdz veidot šos elementus un pielāgot to funkcionalitāti.

Tas textareanodrošina apgabalu, kurā lietotāji var ievadīt tekstu ar autofocusatribūtu, nodrošinot, ka tas ir gatavs rakstīšanai pēc lapas ielādes. Visbeidzot, HTML atsaucas uz script.jsfailu.

Šajā brīdī atveriet index.htmlpārlūkprogrammā. Tas vēl nedarbosies un var izskatīties ne visai pareizi, taču ir noderīgi pārbaudīt progresu katrā posmā.

Piezīmju veikšanas tīmekļa lietotnes skats ar noklusējuma pārlūkprogrammas stiliem, kas parāda visu, kas ir salikts augšējā kreisajā stūrī.

Lai lietas izskatītos labi, izmantojot CSS

Lai gan šai pamata lietotnei nav nepieciešami lieli dizaina pielāgojumi, mēs varam uzlabot tās izkārtojumu, izmantojot dažus stilus.

Pirmkārt, mēs izveidojam ķermeņa stilu, lai iezīmētu kopējo izskatu:

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

Šajā CSS tiek izmantots režģa izkārtojums , lai sakārtotu vārdu un rakstzīmju skaitu šaurā rindā virs teksta apgabala. Rekvizīts grid-template-rowsnosaka, ka skaitīšanas rindai ir jāaizņem vismazāk vietas (minimālais saturs), kamēr teksta apgabals aizpilda atlikušo vietu (1fr).

Skaitītāja rinda saņem pamata stilu, lai to atšķirtu no teksta apgabala, galvenokārt ar fonu:

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

Teksta apgabals ir veidots tā, lai teksts būtu salasāms, nodrošinot pietiekamu atstarpi:

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

Piezīmju veikšanas lietotne ar pielāgotiem stiliem parāda skaitītāja joslu augšpusē ar pilna izmēra teksta apgabalu zemāk.

Funkcionalitātes pievienošana ar JavaScript

Tā kā pamatdarbs ir izveidots, ir pienācis laiks ieviest lietojumprogrammā funkcionalitāti — kodu, kas to atdzīvina!

Pirms iedziļināties kodēšanā, ir svarīgi ieskicēt paredzēto funkcionalitāti. Šajā lietojumprogrammā jūs koncentrēsities uz diviem galvenajiem mērķiem:

Turpiniet un atkārtoti ielādējiet ievadīto tekstu.
Dinamiski atjauniniet rakstzīmju un vārdu skaitu.

Šīm funkcijām ir jāatjaunina noteikti dokumenta elementi. Tāpēc sāciet, iegūstot atsauces uz šiem mezgliem, izmantojot getElementByIdmetodi:

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

Šeit words, chars, un textareaatbilst to attiecīgajām dokumenta sadaļām, kas identificētas pēc to ID atribūtiem.

Pēc tam ieviesiet interaktivitāti, iestatot lietotni reaģēt, kad teksts tiek mainīts:

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

Metode addEventListenersaista funkciju, lai aktivizētu, kad notiek noteikts notikums. Šādā gadījumā, tiklīdz lietotājs mijiedarbojas ar teksta apgabalu, notikums “ievade” aktivizē funkciju.

Pēc tam Web Storage API tiek izmantota, lai saglabātu teksta apgabala pašreizējo saturu, kuram var piekļūt, izmantojot ev.target.value. Metode setItemsaista atslēgu ar saglabājamajiem datiem.

Lai nodrošinātu teksta ielādi, kad lietotne tiek inicializēta vai atsvaidzināta, pievienojiet citu klausītāju:

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

Šis klausītājs reaģē uz loga ielādes notikumu. Pēc loga ielādes tas izgūst saglabāto tekstu un attiecīgi iestata teksta apgabala vērtību, vienlaikus izsaucot update_counts()vārdu un rakstzīmju skaita atsvaidzināšanu.

Pārējā funkcionalitāte atrodas funkcijā update_counts(), kas izskatās šādi:

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

Atšķirībā no teksta apgabala vienkāršajam tekstam trūkst vērtības atribūta; tādējādi innerHTMLīpašums tiek izmantots tā vietā. lengthVirknes rekvizīts izgūst kopējo rakstzīmju skaitu .

Lai sadalītu tekstu vārdos, mēs izmantojam text.split(' '), kas sadala virkni pie katras atstarpes rakstzīmes, veidojot vārdu masīvu. Iegūtā masīva garuma rekvizīts nodrošina vārdu skaitu.

Tomēr ar šo kodu var rasties dažas problēmas:

Tas nevar pareizi saskaitīt atsevišķus vārdus rindā bez atstarpes rakstzīmēm.
Ja teksta nav, tas neprecīzi ziņos par vienu vārdu splitdarbības veida dēļ.

Lai risinātu pirmo problēmu, apsveriet iespēju sadalīt parasto izteiksmi, lai ņemtu vērā atstarpes rakstzīmes: \s. Lai novērstu otro problēmu, filtrējiet visas tukšās virknes:

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

Tīmekļa lietotne ar teksta piemēru, kas parāda precīzu rakstzīmju un vārdu skaitu.

Noderīgu tīmekļa lietojumprogrammu izveidi var panākt tikai ar dažiem pamata failiem! Varat paplašināt šo vienkāršo piezīmju veikšanas lietotni, integrējot papildu funkcijas, piemēram, izmantojot rekvizītu window.location , lai piekļūtu vietrāžiem URL, vai ļaujot saglabāt vairākas piezīmes, mainot nosaukumus, kas tiek nodoti localStorage.setItem.

Papildu ieskati

1. Kādi ir šīs tīmekļa lietotnes apmācības priekšnoteikumi?

Viss, kas jums nepieciešams, ir pamatzināšanas par HTML, CSS un JavaScript. Noderīgi būs arī tādi rīki kā teksta redaktors (piemēram, VSCode) un tīmekļa pārlūkprogramma.

2. Vai varu modificēt šo tīmekļa lietotni, lai pievienotu citas funkcijas?

Pilnīgi noteikti! Šī apmācība nodrošina pamatu. Varat pievienot funkcionalitāti, piemēram, vairāku piezīmju saglabāšanu, piezīmju klasificēšanu kategorijās vai pat meklēšanas funkcijas ieviešanu!

3. Kā darbojas Web Storage API?

Web Storage API ļauj tīmekļa lietojumprogrammām saglabāt datus pārlūkprogrammā. Tas saglabā datus atslēgu-vērtību pāros, kas saglabājas pat pēc pārlūkprogrammas aizvēršanas, padarot tos viegli izguvi vēlāk.

Avots un attēli