Terapkan Aplikasi Senarai Perkara Pertama Yang Anda Perlu Dilakukan: 8 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Sekiranya anda benar-benar baru dalam pengekodan atau mempunyai pengekodan latar belakang, anda mungkin tertanya-tanya di mana hendak memulakan pembelajaran. Anda perlu belajar bagaimana, apa, di mana kod dan kemudian, setelah kod itu siap, bagaimana menyebarkannya untuk dilihat secara keseluruhan.

Nah, berita baiknya adalah bahawa pengekodan tidak sukar.

Pemirsa Sasaran: Tutorial ini ditujukan untuk pemula yang ingin memulakan karier dalam pengembangan web, memiliki pemahaman tentang teknologi web secara umum.

Masa Binaan: 90 Minit.

Kesukaran: Mudah.

Langkah 1: Apa yang Akan Kita Bina?

Pada akhir tutorial ini, kami akan:

• Buat Aplikasi Web Senarai Perkara Yang Harus Dilakukan dengan menggunakan HTML5.
• Gabungkan Bootstrap dengan aplikasi kami untuk menambah gaya yang cantik dan pantas.
• Gunakan perpustakaan JavaScript dan JQuery untuk menambahkan beberapa tingkah laku dinamik ke aplikasi kami.
• Terapkan aplikasi kami di cloud menggunakan Ziet / sekarang.

Dalam Tindakan:

Langkah 2: Pengenalan HTML, Bootstrap, JavaScript & JQuery

Apa itu HTML?

Hyper Text Markup Language (HTML) boleh dianggap sebagai "bahasa internet". HTML adalah bahasa markup standard yang digunakan untuk membuat laman web. Ia pada asalnya dirancang untuk berkongsi dokumen saintifik. Penyesuaian ke HTML selama bertahun-tahun menjadikannya sesuai untuk menerangkan beberapa jenis dokumen lain yang dapat dipaparkan sebagai laman web di internet.

Satu-satunya syarat yang diperlukan untuk menampilkan halaman HTML adalah penyemak imbas web, seperti Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, atau Apple Safari.

Apa itu Bootstrap?

Bootstrap adalah kerangka HTML, CSS, dan JavaScript yang paling popular untuk membina laman web pertama mudah alih yang responsif. Bootstrap adalah projek sumber terbuka yang dikembangkan oleh Twitter. ia terdiri daripada kelas CSS yang dapat diterapkan pada elemen untuk menggayakannya secara konsisten dan kod JavaScript yang melakukan peningkatan tambahan.

Apa itu JavaScript?

JavaScript adalah bahasa pengaturcaraan yang digunakan untuk pengaturcaraan pihak klien dalam aplikasi web. Kod JavaScript dijalankan oleh penyemak imbas dan membolehkan pengaturcara aplikasi web membina kandungan web yang dinamik, seperti komponen yang menunjukkan atau disembunyikan secara dinamis, mengubah penampilan, dan mengesahkan input pengguna.

Apa itu JQuery?

JQuery adalah perpustakaan JavaScript yang cepat, kecil, dan kaya dengan ciri-ciri, ia menjadikan perkara seperti penyebaran dokumen HTML, dan manipulasi, pengendalian acara, animasi menjadi lebih mudah.

Semua kekuatan JQuery diakses melalui JavaScript, jadi memiliki pemahaman yang kuat tentang JavaScript, sangat penting untuk memahami, menyusun, dan menyahpepijat kod anda.

Untuk Maklumat Lanjut:

HTML

JavaScript

JQuery

Tali kasut

Langkah 3: Halaman Pertama Anda Dengan HTML

LANGKAH1: buat folder baru:

mkdir sederhana-todolist

LANGKAH2: buat fail baru di dalam folder senarai mudah dan namakan index.html.

cd sederhana-todolist

indeks sentuh.html

LANGKAH3: tambahkan kod berikut ke index.html.

Senarai yang hendak dibuat

Senarai Yang Harus Dilakukan Saya

LANGKAH4: Buka index.html pada penyemak imbas anda.

Anda akan melihat Senarai Yang Harus Saya Lakukan dipaparkan (lihat foto di atas).

Langkah 4: Menambah Bootstrap

Di bahagian ini kami akan menambahkan sokongan Bootstrap ke halaman index.html kami, untuk menambahkan gaya cepat dan bagus ke Aplikasi Daftar Yang Harus Dilakukan.

Perhatian: Dalam aplikasi ini kami akan menggunakan Bootstrap 3, anda menggunakan kerangka CSS lain, seperti U Semantic.

LANGKAH 1: tambahkan fail CSS Bootstrap di tag kepala:

LANGKAH2: tambahkan fail skrip Bootstrap dan CDQ JQuery di hujung tag badan:

LANGKAH3: Buka index.html pada penyemak imbas anda.

Tahniah, kami berjaya menambahkan sokongan Bootstrap ke halaman kami dalam beberapa langkah.

Langkah 5: Lengkapkan UI

Selepas kami berjaya menambahkan sokongan Bootstrap ke aplikasi kami. Sekarang mari kita teruskan dan bersaing UI (Antaramuka Pengguna) untuk membiarkan pengguna menambah tugas baru. Senarai Yang Perlu Dilakukan akan dapat menambahkan item baru ke dalam senarai, serta membuang item yang ada.

LANGKAH1: tambahkan kod berikut ke index.html.

Tambah Tugasan Baru Tambah Hapus Semua!

Senarai Tugas Saya

LANGKAH2: buka fail index.html pada penyemak imbas anda.

Langkah 6: Menambah Logik ke Aplikasi

Apabila anda memasukkan nama tugas dan klik pada butang Tambah, tidak ada yang berlaku buat masa ini. Mari betulkan.

Pada akhir langkah ini, kami akan mengubah index.html kami ke halaman dinamik, sehingga akan berperilaku kepada interaksi pengguna.

LANGKAH 1: buat folder baru di dalam senarai mudah-todolist, beri nama js dan nama fail baru itu script.js di dalam folder itu:

mkdir js

cd js sentuhan skrip.js

LANGKAH2: pautkan script.js ke index.html dengan menambahkan kod berikut di hujung tag kepala:

LANGKAH3: tambahkan kod berikut ke fail script.js

$ (dokumen). sudah (() => {

tugas var = 0 $ ("# removeAll"). hide (); / * tambahkan pengendali tugas baru * / $ ("# add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {task + = 1; var elm = $ ("

• "); $ (" # mylist "). append (elem); $ (" input "). val (" "); / * hapus pengendali tugas yang unik * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); task - = 1; $ (this).parent.remove ();}); / * tunjukkan removeAll butang apabila kita mempunyai lebih daripada 3 task * / if (task> 2) {$ ("# remveAll"). tunjukkan ();} / * removeAll handler * / $ ("# removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (".abled"). adik beradik (). remove (); task = 0; $ ("# removeAll"). hide ();});}});});

  Catatan: Anda boleh mendapatkan klon atau memuat turun kod ZIP dari repositori GitHub saya, ini dapat menjimatkan anda daripada mengetuk.

  git klon github.com/ahmnouira/simple-todolist

  LANGKAH4: menguji kod

  Buka penyemak imbas anda dan masukkan tugas kemudian klik Tambah, anda akan melihat tugas baru ditambahkan ke dalam senarai, jika anda menambahkan 3 tugas anda akan melihat bahawa butang clearAll muncul, butang ini membolehkan kami membuang semua tugas yang ditambahkan, anda juga boleh membuang hanya satu tugas beli dengan mengklik butangnya.

  Langkah 7: (Pilihan) Terapkan Aplikasi

  

  Sejauh ini kami membina aplikasi senarai todo sederhana, kini saatnya untuk menyebarkannya di cloud dan berkongsi kerja kami dengan orang lain di seluruh dunia.

  Untuk mencapai ini, kami akan menggunakan platform awan yang dipanggil ZEIT Now.

  Apa itu ZEIT Sekarang?

  ZEIt Now adalah platform cloud untuk laman web statik dan Fungsi Tanpa Server, ia membolehkan pemaju untuk mengehoskan laman web dan perkhidmatan web yang digunakan dengan serta-merta, semuanya dengan konfigurasi sifar.

  1. Pasang Sekarang CLI

  Untuk menggunakan dengan ZEIT Now, anda perlu memasang Now CLI.

  penting: Pastikan anda memasang npm.

  npm -v # periksa sama ada pemasangan npm

  npm install -g now @ terkini # pasang versi terakhir Now CLI secara global sekarang -v # chech jika CLI Now dipasang dan cetak versi

  2. Menyebarkan

  Yang harus anda lakukan ialah beralih ke direktori dan kemudian menggunakan aplikasi anda dengan satu arahan:

  sekarang --prod # menyebarkan aplikasinya

  Setelah digunakan, anda akan mendapat URL pratonton yang diberikan pada setiap penerapan untuk berkongsi perubahan terkini di bawah alamat.

  aplikasi saya:

  Langkah 8: Kesimpulannya

  Itu sahaja yang ada!

  Jangan ragu untuk meneroka kodnya dengan menetapkan ciri baru dan mengembangkan aplikasinya, serta berkongsi pengalaman dan pertanyaan anda di kawasan komen.

  Untuk melihat lebih banyak karya saya, sila lawati sumber terbuka saya di GitHub.

  myYouTube.

  myLinkedIn

  Terima kasih kerana meluangkan masa untuk membaca arahan saya ^^.

  Semoga hari anda indah.

  Ahmed Nouira