Анхны хийх ажлын жагсаалтын програмыг байршуулах: 8 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:02

Хэрэв та код бичих ажилд цоо шинээр орсон эсвэл арын кодчилолтой бол хаанаас сурч эхлэхээ бодож байж магадгүй юм. Та хэрхэн, юуг, хаана кодлох, дараа нь код бэлэн болмогц түүнийг хэрхэн бүхэлд нь харуулахын тулд хэрхэн яаж ашиглахаа сурах хэрэгтэй.

За, сайн мэдээ бол кодлох нь тийм ч хэцүү биш юм.

Зорилтот үзэгчид: Энэхүү заавар нь вэб хөгжүүлэлтийн чиглэлээр карьераа эхлүүлэх хүсэлтэй, вэб технологийн талаар ерөнхий ойлголттой хүмүүст зориулагдсан болно.

Бүтээх хугацаа: 90 минут.

Хэцүү байдал: хялбар.

Алхам 1: Бид юу бүтээх вэ?

Энэхүү сургалтын төгсгөлд бид:

• HTML5 ашиглан хийх ёстой ажлын жагсаалтын вэб програмыг бий болгох.
• Үзэсгэлэнтэй, хурдан сарлагийн саваг нэмэхийн тулд Bootstrap -ийг манай програмтай нэгтгээрэй.
• JavaScript болон JQuery номын санг ашиглан манай програмд динамик зан үйлийг нэмж оруулаарай.
• Ziet/now ашиглан манай програмыг үүлэн дотор байрлуулна уу.

Үйлдэлд:

Алхам 2: HTML, Bootstrap, JavaScript & JQuery -ийн танилцуулга

HTML гэж юу вэ?

Hyper Text Markup Language (HTML) -ийг "интернетийн хэл" гэж ойлгож болно. HTML бол вэб хуудас үүсгэхэд хэрэглэгддэг стандарт тэмдэглэгээний хэл юм. Энэ нь анх шинжлэх ухааны баримт бичгүүдийг хуваалцах зориулалттай байв. Олон жилийн туршид HTML -д дасан зохицсоны ачаар интернэтэд вэб хуудас хэлбэрээр харуулах боломжтой бусад хэд хэдэн төрлийн баримт бичгийг тайлбарлах боломжтой болсон.

HTML хуудсыг үзүүлэхэд шаардагдах цорын ганц шаардлага бол Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome эсвэл Apple Safari гэх мэт вэб хөтөч юм.

Bootstrap гэж юу вэ?

Bootstrap бол хамгийн анхны HTML, CSS, JavaScript -ийн хүрээ бөгөөд хариу үйлдэл үзүүлэх чадвартай, гар утасны анхны вэбсайтуудыг бий болгох явдал юм. Bootstrap бол Twitter -ийн боловсруулсан нээлттэй эхийн төсөл юм. Энэ нь элементүүдийг тууштай загварчлахад ашиглаж болох CSS ангиуд болон нэмэлт сайжруулалт хийдэг JavaScript кодоос бүрдэнэ.

JavaScript гэж юу вэ?

JavaScript бол вэб програм дээр үйлчлүүлэгч талын програмчлалд ашигладаг програмчлалын хэл юм. JavaScript кодыг хөтөч ажиллуулдаг бөгөөд вэб програмын програмистуудад динамикаар харуулсан эсвэл нуусан бүрэлдэхүүн хэсэг, гадаад төрхийг өөрчлөх, хэрэглэгчийн оролтыг баталгаажуулах гэх мэт динамик вэб контент бүтээх боломжийг олгодог.

JQuery гэж юу вэ?

JQuery нь хурдан, жижиг, онцлог шинж чанартай JavaScript номын сан бөгөөд HTML баримт бичгийг дамжуулах, удирдах, үйл явдал зохицуулах, хөдөлгөөнт дүрс гэх мэт зүйлсийг илүү хялбар болгодог.

JQuery -ийн бүх хүчийг JavaScript -ээр дамжуулан олж авдаг тул JavaScript -ийг сайн мэддэг байх нь таны кодыг ойлгох, бүтэцлэх, дибаг хийхэд чухал ач холбогдолтой юм.

Дэлгэрэнгүй мэдээллийг:

HTML

JavaScript

JQuery

Bootstrap

Алхам 3: HTML бүхий таны анхны хуудас

АЛХАМ1: шинэ хавтас үүсгэх:

mkdir энгийн-todolist

АЛХАМ2: энгийн todolist хавтас дотор шинэ файл үүсгээд index.html гэж нэрлэнэ үү.

cd энгийн-todolist

index.html дээр дарна уу

Алхам3: index.html дээр дараах кодыг нэмнэ үү.

Хийх зүйлсийн жагсаалт

Миний хийх зүйлсийн жагсаалт

АЛХАМ 4: Хөтөч дээрээ index.html -ийг нээнэ үү.

Та миний хийх ёстой ажлын жагсаалтыг харах болно (дээрх зургийг үзнэ үү).

Алхам 4: Bootstrap нэмэх

Энэ хэсэгт бид хийх зүйлсийн жагсаалтын аппликейшнд хурдан, сайн загвар оруулахын тулд index.html хуудсандаа Bootstrap дэмжлэгийг оруулах болно.

Анхааруулга: Энэ програмд бид Bootstrap 3 -ийг ашиглах болно, та Semantic UI гэх мэт бусад CSS системийг ашигладаг.

АЛХАМ1: Bootstrap CSS файлыг толгой хаягаар нэмнэ үү:

АЛХАМ2: Үндсэн хаягийн төгсгөлд Bootstrap болон JQuery CDN скрипт файлуудыг нэмнэ үү.

АЛХАМ 3: Хөтөч дээрээ index.html -ийг нээнэ үү.

Баяр хүргэе, бид хэдхэн алхамаар хуудсандаа Bootstrap дэмжлэгийг амжилттай нэмлээ.

Алхам 5: UI -ийг бөглөнө үү

Бид програмдаа Bootstrap дэмжлэгийг амжилттай нэмсний дараа. Одоо үргэлжлүүлээд хэрэглэгчид шинэ үүрэг даалгавар өгөхийн тулд UI (Хэрэглэгчийн интерфэйс) дээр өрсөлдье. Хийх зүйлсийн жагсаалт нь жагсаалтад шинэ зүйл нэмж оруулахаас гадна одоо байгаа зүйлсийг устгах боломжтой болно.

АЛХАМ1: index.html дээр дараах кодыг нэмнэ үү.

Шинэ даалгавар нэмнэ үү Бүгдийг цэвэрлэ!

Миний ажлын жагсаалт

АЛХАМ2: index.html файлыг хөтөч дээрээ нээнэ үү.

Алхам 6: Логикийг апп -д нэмж оруулна уу

Та ажлын нэрийг оруулаад Нэмэх товчийг дарахад одоогоор юу ч болоогүй байна. Үүнийг засъя.

Энэ алхмын төгсгөлд бид index.html -ийг динамик хуудас болгон хувиргах бөгөөд ингэснээр хэрэглэгчийн харилцан үйлчлэлд хандах болно.

АЛХАМ1: энгийн-todolist дотор шинэ фолдер үүсгэж, түүнийг js гэж нэрлэнэ үү.

mkdir js

cd js touch script.js

Алхам2: толгой хаягийн төгсгөлд дараах кодыг нэмж script.js -ийг index.html руу холбоно уу.

АЛХАМ 3: script.js файлд дараах кодыг нэмнэ үү

$ (баримт бичиг).ready (() => {

var task = 0 $ ("#removeAll"). hide (); / * шинэ даалгавар боловсруулагч нэмэх */ $ ("#add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {task += 1; var elm = $ ("

• $) clikc ", function (event) {event.preventDefault (); event.stopPropagation (); task -= 1; $ (this).parent.remove ();}); ажлууд */ if (task> 2) {$ ("#remveAll"). show ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". идэвхгүй"). дүү нар (). remove (); task = 0; $ ("#removeAll"). hide ();});}});});

  Тэмдэглэл: Та миний GitHub репозитороос кодын хуулбарыг татаж авах эсвэл татаж авах боломжтой бөгөөд энэ нь таныг товшихоос аварна.

  git clone github.com/ahmnouira/simple-todolist

  Алхам 4: кодыг туршиж үзээрэй

  Хөтөчөө нээгээд даалгавраа оруулаад Нэмэх дээр дарна уу, та жагсаалтад шинэ даалгавар оруулах болно, хэрэв та 3 даалгавар нэмбэл clearAll товчлуур гарч ирснийг анзаарах болно, энэ товчлуур нь бүх нэмэгдсэн ажлуудыг устгах боломжийг бидэнд олгоно. Мөн товчлуур дээр дарж худалдан авалт хийх ганц ажлыг л устгах боломжтой.

  Алхам 7: (Заавал биш) Аппликешныг байршуулна уу

  

  Одоогийн байдлаар бид хийх ёстой зүйлсийн жагсаалтын энгийн аппликейшн бүтээсэн бол одоо үүнийг үүлэн дотор байрлуулж, дэлхийн бусад улс орнуудтай хийсэн ажлаа хуваалцах цаг болжээ.

  Үүнийг хийхийн тулд бид ZEIT Now нэртэй үүл платформыг ашиглах болно.

  ZEIT одоо юу вэ?

  ZEIt Now бол статик сайтууд болон Сервергүй функцүүдэд зориулсан үүл платформ бөгөөд хөгжүүлэгчид энэ бүгдийг тэг тохиргоогоор шууд байршуулдаг вэбсайт, вэб үйлчилгээг байршуулах боломжийг олгодог.

  1. Одоо суулгах CLI

  ZEIT Now -ийг ашиглахын тулд Now CLI -ийг суулгах шаардлагатай болно.

  чухал: npm суулгасан эсэхээ шалгаарай.

  npm -v # npm суулгасан эсэхийг шалгаарай

  npm install -g now@latest # Now CLI -ийн сүүлийн хувилбарыг дэлхий даяар одоо суулгаарай -V # chech хэрэв Now CLI суулгасан бол түүнийгээ хэвлэ.

  2. Байрлуулах

  Та хийх ёстой зүйл бол директор руу шилжиж, дараа нь ганц тушаалаар програмаа байршуулах явдал юм.

  now --prod # програмыг байршуулна

  Байршуулсны дараа та хаягийн доорх хамгийн сүүлийн өөрчлөлтүүдийг хуваалцах зорилгоор байршуулалт бүрт оноосон URL -г авах болно.

  миний апп:

  Алхам 8: Дүгнэлт

  Энэ бол энэ бүх зүйл юм!

  Шинэ функцуудыг тохируулж, програмыг өргөжүүлж кодоо судалж, сэтгэгдэл хэсэгт өөрийн туршлага, асуултаа хуваалцаарай.

  Миний бүтээлүүдээс илүү ихийг үзэхийг хүсвэл GitHub дээрх нээлттэй эх сурвалж руу зочилно уу.

  myYouTube.

  myLinkedIn

  Миний зааврыг унших зав гаргаж байгаад баярлалаа ^^.

  Өдрийг сайхан өнгөрүүлээрэй.

  Ахмед Нуира