Įdiekite savo pirmojo užduočių sąrašo programą: 8 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:46

Jei esate visiškai naujas kodavimas arba turite tam tikrą foninį kodavimą, jums gali kilti klausimas, nuo ko pradėti mokytis. Turite sužinoti, kaip, ką, kur koduoti, o tada, kai kodas bus paruoštas, kaip jį įdiegti, kad visi matytų.

Gera žinia ta, kad kodavimas nėra sudėtingas.

Tikslinė auditorija: ši pamoka skirta pradedantiesiems, norintiems pradėti kurti žiniatinklio kūrimo karjerą, turintiems bendrą žiniatinklio technologijų supratimą.

Sukūrimo laikas: 90 minučių.

Sunkumas: lengva.

1 žingsnis: ką mes sukursime?

Šios pamokos pabaigoje mes:

• Sukurkite paprastą užduočių sąrašo žiniatinklio programą naudodami HTML5.
• Integruokite „Bootstrap“su mūsų programa, kad pridėtumėte gerą išvaizdą ir greitą stilių.
• Naudokite „JavaScript“ir „JQuery“biblioteką, kad mūsų programai pridėtumėte dinamiško elgesio.
• Įdiekite mūsų programą debesyje naudodami „Ziet“/dabar.

Veiksmas:

2 veiksmas: įvadas į HTML, „Bootstrap“, „JavaScript“ir „JQuery“

Kas yra HTML?

Hiper teksto žymėjimo kalba (HTML) gali būti laikoma „interneto kalba“. HTML yra standartinė žymėjimo kalba, naudojama tinklalapiams kurti. Iš pradžių jis buvo skirtas dalintis moksliniais dokumentais. Per daugelį metų pritaikius HTML, buvo galima apibūdinti keletą kitų tipų dokumentų, kurie gali būti rodomi kaip interneto puslapiai internete.

Vienintelis reikalavimas, kurio reikia norint rodyti HTML puslapį, yra žiniatinklio naršyklė, pvz., „Microsoft Internet Explorer“(IE), „Mozilla Firefox“, „Google Chrome“ar „Apple Safari“.

Kas yra „Bootstrap“?

„Bootstrap“yra populiariausia HTML, CSS ir „JavaScript“sistema, skirta kurti reaguojančias, pirmąsias mobiliesiems skirtas svetaines. „Bootstrap“yra atvirojo kodo projektas, kurį sukūrė „Twitter“. jį sudaro CSS klasės, kurias galima pritaikyti elementams, kad jos būtų nuosekliai formuojamos, ir „JavaScript“kodas, kuris papildomai patobulina.

Kas yra „JavaScript“?

„JavaScript“yra programavimo kalba, naudojama žiniatinklio programų programavimui kliento pusėje. „JavaScript“kodą valdo naršyklė ir jis leidžia žiniatinklio programų programuotojams kurti dinaminį žiniatinklio turinį, pvz., Komponentus, kurie rodomi arba yra dinamiškai paslėpti, keisti išvaizdą ir patvirtinti vartotojo įvestį.

Kas yra JQuery?

„JQuery“yra greita, maža ir turtinga „JavaScript“biblioteka, todėl tokie dalykai kaip HTML dokumentų perėjimas ir manipuliavimas, įvykių tvarkymas, animacija yra daug paprastesni.

Visa „JQuery“galia pasiekiama naudojant „JavaScript“, todėl gerai išmanant „JavaScript“yra būtina norint suprasti, susisteminti ir derinti jūsų kodą.

Daugiau detalių:

HTML

„JavaScript“

JQuery

Bootstrap

3 žingsnis: pirmasis puslapis su HTML

1 ŽINGSNIS: sukurkite naują aplanką:

mkdir paprasta-todolist

2 ŽINGSNIS: sukurkite naują failą „simple-todolist“aplanke ir pavadinkite jį index.html.

cd paprastas-todolist

palieskite index.html

3 ŽINGSNIS: pridėkite šį kodą prie index.html.

Darbų sąrašas

Mano darbų sąrašas

4 ŽINGSNIS: naršyklėje atidarykite index.html.

Pamatysite, kad rodomas mano darbų sąrašas (žr. Aukščiau esančią nuotrauką).

4 žingsnis: „Bootstrap“pridėjimas

Šiame skyriuje į „index.html“puslapį pridėsime „Bootstrap“palaikymą, kad „To-Do List App“pridėtume greitą ir gerą stilių.

Pastaba: šioje programoje naudosime „Bootstrap 3“, o jūs naudojate bet kurią kitą CSS sistemą, pvz., Semantinę vartotojo sąsają.

1 ŽINGSNIS: pridėkite „Bootstrap“CSS failą prie galvos žymos:

2 ŽINGSNIS: kūno žymos pabaigoje pridėkite „Bootstrap“ir „JQuery CDN“scenarijų failus:

3 ŽINGSNIS: naršyklėje atidarykite index.html.

Sveikiname, keliais žingsniais sėkmingai įtraukėme „Bootstrap“palaikymą į savo puslapį.

5 veiksmas: užpildykite vartotojo sąsają

Sėkmingai pridėję „Bootstrap“palaikymą prie savo programos. Dabar tęskime ir konkuruokime su vartotojo sąsaja (vartotojo sąsaja), kad vartotojas galėtų pridėti naujų užduočių. Darbų sąrašas galės pridėti naujų elementų prie sąrašo, taip pat pašalinti esamus elementus.

1 ŽINGSNIS: pridėkite šį kodą prie index.html.

Pridėti naują užduotį Pridėti Išvalyti viską!

Mano užduočių sąrašas

2 ŽINGSNIS: naršyklėje atidarykite failą index.html.

6 veiksmas: logikos pridėjimas prie programos

Kai įvedate užduoties pavadinimą ir spustelite mygtuką Pridėti, šiuo metu nieko nevyksta. Pataisykime tai.

Pasibaigus šiam žingsniui, mes paversime savo index.html į dinamišką puslapį, todėl jis elgsis sąveikaujant su vartotojais.

1 ŽINGSNIS: sukurkite naują aplanką „simple-todolist“, pavadinkite jį js ir naują failo pavadinimą „script.js“tame aplanke:

mkdir js

cd js palieskite script.js

2 ŽINGSNIS: susiekite „script.js“su „index.html“, pridėdami šį kodą „head“žymos pabaigoje:

3 ŽINGSNIS: pridėkite šį kodą prie „script.js“failo

$ (dokumentas).ready (() => {

var užduotys = 0 $ ("#removeAll"). hide (); / * pridėti naują užduočių tvarkyklę */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {užduotys += 1; var elm = $ ("

• "); $ ("#mylist "). pridėti (elem); $ (" input "). val (" "); / * pašalinti unikalų užduočių tvarkyklę * / $ (". text-right "). on (" clikc ", funkcija (įvykis) {event.preventDefault (); event.stopPropagation (); užduotys -= 1; $ (this).parent.remove ();}); /* rodyti mygtuką„ RemoveAll “, kai turime daugiau nei 3 užduotys */ jei (užduotys> 2) {$ ("#remveAll"). show ();}/ *removeAll tvarkytojas */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". išjungta"). broliai ir seserys (). pašalinti (); užduotys = 0; $ ("#removeAll"). slėpti ();});}});});

  Pastaba: galite gauti kloną arba atsisiųsti kodo ZIP kodą iš mano „GitHub“saugyklos, o tai jus išgelbės nuo bakstelėjimo.

  git klonas github.com/ahmnouira/simple-todolist

  4 ŽINGSNIS: išbandykite kodą

  Atidarykite naršyklę ir įveskite užduotį, tada spustelėkite Pridėti, pamatysite, kad į sąrašą įtraukta nauja užduotis; jei pridėsite 3 užduotis, pastebėsite, kad rodomas aiškus mygtukasViskas, šis mygtukas leidžia mums pašalinti visas pridėtas užduotis, taip pat galite pašalinti tik vieną užduotį, spustelėję jos mygtuką.

  7 veiksmas: (neprivaloma) Įdiekite programą

  

  Iki šiol sukūrėme paprastą užduočių sąrašo programą, dabar atėjo laikas ją įdiegti debesyje ir dalintis savo darbu su kitais visame pasaulyje.

  Norėdami tai pasiekti, naudosime debesų platformą, pavadintą „ZEIT Now“.

  Kas yra ZEIT dabar?

  „ZEIt Now“yra debesų platforma, skirta statinėms svetainėms ir funkcijoms be serverio, ji leidžia kūrėjams priglobti akimirksniu diegiamas svetaines ir žiniatinklio paslaugas, visa tai atliekant be jokios konfigūracijos.

  1. Įdiekite dabar CLI

  Norėdami įdiegti naudodami „ZEIT Now“, turėsite įdiegti „Now CLI“.

  Svarbu: įsitikinkite, kad įdiegėte „npm“.

  npm -v # patikrinkite, ar npm įdiegta

  npm install -g now@latest # įdiegti paskutinę Now CLI versiją visame pasaulyje dabar -v # chech, jei įdiegta Now CLI, ir atsispausdinti jos versiją

  2. Diegti

  Viskas, ką jums reikia padaryti, tai pereiti į katalogą ir tada įdiegti programą su viena komanda:

  dabar --prod # diegti programą

  Įdiegę gausite peržiūros URL, priskirtą kiekvienam diegimui, kad galėtumėte bendrinti naujausius adreso pakeitimus.

  mano programa:

  8 žingsnis: Išvada

  Tai viskas!

  Nesivaržykite tyrinėti kodą, nustatydami naujas funkcijas ir išplėsdami programą, ir pasidalykite savo patirtimi bei klausimais komentarų srityje.

  Norėdami pamatyti daugiau mano darbų, apsilankykite mano atvirame šaltinyje „GitHub“.

  myYouTube.

  myLinkedIn

  Ačiū, kad turėjote laiko perskaityti mano instrukciją ^^.

  Geros dienos.

  Ahmedas Nouira