Ez az oktató olyan kezdőknek készült, akik szeretnék megtanulni, hogyan lehet egyszerű webalkalmazást létrehozni a JavaScript használatával. Ez segít megérteni a JavaScript és a HTML dokumentum közötti kölcsönhatást, és azt, hogy miként működnek együtt a webböngészőben az emberek számára látható dolgok megjelenítésében.

Ha teljesen nulla tapasztalata van a HTML-ben és a JavaScript-ben, akkor ne aggódjon. Végigvezetlek minden egyes kódsort, és mindent részletesen elmagyarázok. A lecke végére érve sokkal jobban meg kell értenie, hogyan működik a JavaScript a HTML-nel, hogy a weboldalak interaktívvá váljanak.

Ebben a projektben felépítünk egy véletlenszerű idézetgenerátort, amely véletlenszerű árajánlatot jelenít meg a felhasználó számára minden egyes gombnyomásra. A kezdéshez három alapvető dologra lesz szükség, amelyeket szinte mindig használnak minden webprojekthez:

• egy webböngésző
• szövegszerkesztő
• dolgok felépítésének vágya

Ehhez az oktatóanyaghoz a Google Chrome böngészőt, a Sublime Text 3 Editor-t fogom használni, és természetesen a saját vágyamat az építkezéshez és a tanításhoz. Bármilyen eszközt használhat, amellyel jól érzi magát.

Kezdjük el!

Az első dolog, amit meg fogunk tenni, létrehoz egy mappát, amely tartalmazza a projektet alkotó összes fájlunkat. Hozzon létre egy üres mappát az asztalon, és nevezze el „idézetgenerátornak”. Nyissa meg a Sublime Text elemet, és húzza a fájlt fenségessé . Most az oldalsávon keresztül elérhetővé kell tenni a mappát.

A legtöbb webes projekt legalább egy HTML-ből, JavaScript-ből és CSS-fájlból áll. Hozzuk létre ezeket a fájlokat az „idézetgenerátor” mappában.

Fenséges szövegben,Kattintson jobb gombbal az oldalsáv „quote generator” mappájára, majd kattintson az új fájl létrehozása elemre . Az alján egy beviteli sáv jelenik meg, amely megnevezi a fájlt. Írja be az „index.html” szót, és nyomja meg az Enter billentyűt. Most létrehozta az index.html fájlt. Ismételje meg ezt a lépést még kétszer , de hozzon létre egy „javascript.js” és „style.css” nevű fájlt (idézőjelek nélkül) . Fontos megbizonyosodni arról, hogy amikor egy fájlt megnevez, a betűk mindig kisbetűvel jelennek meg, hogy elkerülje a szövődményeket.

Most, hogy minden fájlunk be van állítva, hozzuk létre HTML-fájlunkat, amely webprojektünk alapjaként fog működni. Mielőtt bármit hozzáadhatnánk, az index.html fájlunkban egy csupasz csont HTML kóddal kezdjük.

Az alábbiakban látható a HTML fájlunk, amelyben nincs semmi. Ezt úgy gondolhatja, mint a HTML-csontvázunkat, amely el fogja helyezni az összes húst (tartalmat), amelyet később hozzáadunk.

Most össze kell kapcsolnunk a JavaScript fájlt a HTML dokumentumunkkal, hogy a JavaScript kódunk képes legyen kölcsönhatásba lépni a HTML dokumentummal. Szöveget is hozzáadunk a címkéket, adjon hozzá egy

elem, hozzon létre egy elem, amelynek azonosító neve „quoteDisplay”, és aelem egy onclick attribútummal, amelybe az „newQuote ()” szöveg kerül.

Lebontása

Ha zavart abban, hogy a HTML-kód egyes részei miként szolgálják a célját, akkor itt elmagyarázom neked. Ha pontosan tudja, hogy az egyes elemek mit csinálnak, és miért vannak ott, akkor a folytatáshoz ugorhat a következő szakaszra.

Először hozzáadtuk a „Quote Gen” szót a címkék. A címke a szöveget veszi közé, és megnyitásakor megjeleníti azt a webböngésző fülén.

Az első lépés során meg kell győződnünk arról, hogy közvetlenül a zárás előtt összekapcsoljuk a javascript.js fájlt a HTML-dokumentum alján. címke.

Másodszor létrehoztunk egy

elem, benne az „Simple Quote Generator”. Ez arra szolgál, hogy címet jelenítsen meg weboldalunkon.

Aztán létrehoztuk a elem, amelynek azonosító attribútuma „quoteDisplay”. A elem elválasztóként működik a HTML dokumentumoknál. Az elemek segítenek a weboldalon belüli tartalom rendezésében. Az id attribútum azonosítóként működik, így a JavaScript könnyen meg tudja ragadni és manipulálni tudja. Ebben az esetben a JavaScript használatával megragadjuk a „quoteDisplay” azonosítójú elemet, hogy idézeteket tegyünk a elem.

Ezt követően létrehozunk egy elem egy onclick attribútummal, paraméterként átadva az „newQuote ()” karaktert. Aelem, amint kitalálta, egy gomb, amely valamit megtehet, amikor rákattint. Az onclick attribútum segítségével beállíthatunk egy funkciót a gombhoz, így minden alkalommal, amikor rákattintunk a gombra, futtatja azt a függvényt, amelyet a„s onclick attribútumot.

Ebben az esetben minden alkalommal, amikor rákattint a gombra, a newQuote () függvény fut, természetesen még nem definiáltuk az newQuote () függvényt. Ha megnyitja a projektet egy böngészőben, és megnyomja a gombot, hiba lép fel a konzolon belül, mivel a funkció jelenleg nem létezik.

Végül itt van egy frissítő, hogy bemutassuk, hogyan néz ki jelenleg a teljes index.html fájlunk és mit hoz létre a webböngészőben. A projekt megnyitásához böngészővel nyissa meg az index.html fájlt.

Logikusan gondolkodni kód segítségével

Végre itt az ideje elkezdeni a javascript.js fájlunk JavaScript-jének kidolgozását, hogy kialakítsuk saját árajánlat-generáló funkcióinkat.

Mielőtt elkezdenénk a kódolást, gondolkodjunk el logikusan azon, hogy miként hozhatunk létre kóddal árajánlatot generáló gépet. Nem indulhatunk el úgy, hogy nem gondolkodunk először.

Ki kell találnunk, hogy mit akarunk, és mikor akarunk. Ehhez a projekthez árajánlatokat akarunk! Amikor akarjuk? Most akarjuk! Ó, erm ... azt akarom, hogy azt akarjuk, amikor a felhasználó megnyomja a gombot.

Most, hogy megoldottuk az első kérdést, fel kell tennünk a másodikat. Mik az idézetek? Mármint tényleg, mik ezek?

Köszönöm Jaden! Igen! Az idézetek betűkből állnak, amelyek szavakat alkotnak. A programozási világban a szavakat karakterláncokba sorolják, ezért idézeteinknek karakterláncoknak kell lenniük !

Mivel tudjuk, hogy több idézetünk lesz, és mindegyiket véletlenszerűen választjuk ki, a legjobb választás az lenne, ha tömbön belül több karakterláncot tárolunk .

Ha még nem tudta, akkor egy tömb elemeit a tömbindex számának meghívásával lehet lekérni . A technikai részletek nem tartoznak az oktatóanyag hatálya alá, de egyszerűsítve a tömb minden elemét időrendi sorrendben egész szám képviseli. A tömb első elemének indexszáma 0, utána minden elem eggyel feljebb megy.

Ahhoz, hogy véletlenszerű idézetet nyerjünk ki egy tömbből, most már tudjuk, hogy véletlenszerű számot kell előállítanunk, valahányszor a felhasználó rákattint a gombra. Ezután ezt a véletlenszerű számot használjuk arra, hogy lekérjünk egy idézetet a tömbből, és elhelyezzük az idézetet a HTML dokumentumban, amely viszont megjeleníti az idézetet a böngészőben a felhasználó számára.

Ez az! Megoldottuk, hogyan hozhatunk létre véletlenszerű árajánlat-generátort úgy, hogy logikusan gondolkodunk kódban! Az alábbiakban összefoglaljuk a projektünk logikáját:

1. Az idézetek több karakterlánc, amelyeket tömbben kell tárolni.
2. A gomb minden egyes megnyomásakor véletlenszerű egész számot kell létrehozni.
3. A számot az idéző ​​tömb tömbindexének ábrázolására használják.
4. Miután véletlenszerűen generált egész számunkkal lekérdeztük a tömbből a véletlenszerűen kiválasztott idézetet, elhelyezzük a HTML dokumentumban.

Kódolási idő!

Azta! Idáig eljutottunk és még nem kezdtük el programozni! Üdvözöljük a programozás világában!

Csak viccel.

Nem igazán.

Nagyon sok időt tölt majd kódolással ebben a karrierben (vagy hobbiban). De az a véleményem, hogy még több időt fog arra fordítani, hogy a programozási logikára és a problémák megoldására gondoljon. A programozás nem arról szól, hogy percenként 100 szót hackeljünk 20 percig a billentyűzeten. Az nem fog megtörténni.

Most, hogy minden logikánk nincsen útban. Kezdjük a kódolást. Most a javascript.js fájlon fogunk dolgozni .

Vagy létre kell hoznunk saját árajánlatokat, vagy másolnunk kell őket online forrásból.

Google-ba kerestem a „Legjobb idézetek” elemet, és az első 10-et átmásoltam egy webhelyről , majd vesszővel elválasztott tömbbe helyeztem őket. Ügyeljen arra, hogy az idézőjeleket egyetlen vagy dupla idézőjelbe tegye. Ha árajánlata aposztrófokból, egy- vagy dupla idézőjelekből áll, akkor előfordulhat, hogy visszafelé mutató karaktereket kell használnia, hogy elkerülje ezeket a karaktereket , hogy a JavaScript tudja, hogy a szimbólumok a karakterlánc részét képezik, és nem a kódolási szintaxist.

Amint az alábbi képen látható, meghatároztam egy „idézetek” nevű változót, és megegyeztem egy olyan tömbtel, amely tele van az interneten kiválasztott idézetekkel.

Most létre kell hoznunk a newQuote () függvényünket, amelyet korábban említettem az oktatóanyag HTML szakaszában. A newQuote () függvényünkhöz véletlenszerű egész számot kell generálnunk, amely 0 és az idézőjel tömb hossza között mozog . Az alábbiakban kifejtem.

Először meghívjuk a Math.floor () függvényt. A Math.floor () függvény befogad egy paramétert és lefelé kerekíti a számot a legközelebbi egész számra. Például, ha a Math.floor (5.7) hívást kapjuk, akkor az 5-öt ad vissza.

Másodszor, a Math.random () paraméterben adjuk át a Math.floor () fájlba. A Math.random () függvény véletlenszerű decimális számot generál 0 és 1 között.

Tehát tegyük fel, hogy ez megvan:

Ha ebben a helyzetben vigasztaljuk a randomNumber számunkat, akkor mindig 0 lesz. Ennek oka, hogy a Math.random () mindig 0 és 1 közötti tizedes lesz, például 0,4, 0,721, 0,98 és így tovább. Mivel a Math.random () paramétert adjuk át a Math.floor () fájlba, a Math.floor () mindig a legközelebbi tizedesjegyre kerekít, ezért minden 0 és 1 közötti tizedes mindig 0-ra tér vissza.

Mi értelme van ennek? Nos, a tömbindex-számok létrehozásához egész számokra van szükségünk, de véletlenszerű egész számokra van szükségünk. Véletlen egész számok előállításához és csak a 0 visszatérésétől való elszakadáshoz a véletlenszerű tizedest kell választanunk, és egész számmal kell megszorozni.

Most próbálkozzunk ilyesmivel:

Ha megvizsgáljuk a randomNumber naplót, az eredmények 1 és 19 között lesznek. Most felhasználhatnám a randomNumber jelenlegi állapotát, hogy előhívjak egy idézetet az idézőjelek tömbből, de csak akkor fog működni, ha a tömb indexszáma létezik a tömbben, különben hibát dobnak.

Például:

Jelenleg csak 10 karakterlánc van az idézőjelek tömbömben, így bármely 9 feletti szám meghatározatlanul visszatér, mivel nem létezik a tömbön belül.

A probléma megoldásához csak a Math.random () -t kell megszorozni az idézőjelek tömbjének hosszával. Ezzel annyi karakterláncot adhatunk hozzá vagy távolíthatunk el a tömbből, amennyit csak akarunk, és a randomNumber változónk mindig érvényes számot ad vissza, mivel a quotes.length metódust használjuk, hogy mindig megkapjuk a tömb aktuális hosszát.

Most szükségünk van arra, hogy a randomNumber értékét felhasználva véletlenszerűen lekérhessünk egy idézetet az idézetek tömbből, és elhelyezzük az idézetet a HTML dokumentumunkban, és megjelenítsük a felhasználóink ​​előtt.

Ne feledje, hogyan említettem, hogy HTML-t használunkAzonosítók lehetővé teszik a JavaScript számára a HTML elemek egyszerű megragadását és manipulálását? Nos, ezt tesszük most a korábban létrehozott HTML quoteDisplay azonosítóval.

A document.getElementById () használatával bármilyen karakterláncot átadhatunk, és a JavaScript átnézi a HTML dokumentumunkat, és lekéri azt felhasználásra, hogy bármit megtegyünk vele. A 'quoteDisplay' paraméterként átadjuk a HTML elemet, amelynek azonosítója: „quoteDisplay”.

Most az .innerHTML metódust fogjuk használni, hogy a tömbünkből véletlenszerűen lekért idézetet továbbítsuk értékként, amelyet hozzáadunk a HTML quoteDisplay elemhez.

A belső HTML értéket egyenlővé tesszük az idézőjelek tömbjével, a randomNumber változóval, amelyet tömb indexszámként adunk meg. Most elkészült az újQuote () függvényünk!

Küldetés teljesítve!

Ha elérte az oktatóanyag ezen részét, akkor befejezte a projektet! Gratulálunk! Gyakorlatilag készen áll a Véletlen Idézet Generátor felépítésével.

Most már csak annyit kell tennie, hogy megnyitja a projektet a böngészőben, és megnézze, hogy működik-e! Ehhez húzza az index.html fájlt a böngésző ablakába.

Nyomja meg a gombot, és véletlenszerű idézetet jelenít meg a képernyőn. Nyomja meg a gombot, ahányszor csak akarja. Minden alkalommal egy új idézettel kell felváltania a képernyőn megjelenő aktuális ajánlatot.

Hozzáadhat annyi idézetet, amennyit csak akar, az idézetek tömbbe.

Vessen egy pillantást a teljes projektfájljaink áttekintésére, amelyek egymás mellett alkotják ezt a Véletlen Idézet Generátort.

És most?

Létrehozott egy teljesen működőképes véletlenszerű árajánlat-generátort, és valószínűleg azon gondolkodik, hogy merre tovább.

Valószínűleg arra gondolsz, hogy ez a Véletlen Idézet Generátor nagyon unalmasnak tűnik, és valószínűleg senki sem használná. És teljesen igazad van. Ez a projekt elég egyszerűnek tűnik, és rajtad múlik, hogy változtat-e ezen.

Javíthatja ezt a projektet azáltal, hogy hozzáadja saját funkcióit és stílusát.

A bemutató elején létrehoztunk egy style.css fájlt, amelyet nem használtunk. A CSS-t arra használják, hogy a weboldalak szépek és színesek legyenek. Önön múlik, hogy kíván-e hozzáadni a CSS fájlhoz a stílushoz.

Kereshet néhány CSS oktatóanyagot további útmutatásért. Engedje szabadjára fantáziáját, és tegye magáévá ezt a projektet! Csinálj, amit akarsz! A kódolás varázslat és varázsló vagy, Harry!

Ha kíváncsi vagy, hogy mennyit változhat egy projekt CSS-sel és még néhány sor JavaScript-kóddal, nézd meg ennek a Véletlenszerű idézetek generátorának a saját verzióját, amelyet „Vízkereszt órának” neveztem elitt .

Ha tetszett ez az oktatóanyag, kattintson a szív gombra, és ossza meg! Nyugodtan hagyhat megjegyzést, kérdést vagy visszajelzést. Köszönöm és boldog kódolást!