Buat aplikasi web pertama Anda: catatan + penghitung mudah dan cepat 📝⚡

Memulai pemrograman mungkin terasa membingungkan, dengan begitu banyak bahasa, kerangka kerja, dan metodologi yang perlu dipertimbangkan. Terkadang mungkin tampak lebih mudah untuk mendelegasikan segalanya kepada AI. Jangan khawatir! Pemrograman untuk web bisa sederhana, menyenangkan, dan yang terbaik dari semuanya, sepenuhnya gratis! 🌐✨

Apa yang Akan Anda Bangun

Dengan mengikuti tutorial ini, Anda akan membuat aplikasi web sederhana untuk menyimpan catatan teks dan menghitung karakter dan kata.

Aplikasi akan menyimpan data tersebut, sehingga akan mengingat teks saat Anda memuat ulang atau membuka kembali halaman tersebut. Ini berarti Anda akan memiliki cara yang mudah untuk menyimpan teks apa pun yang ingin Anda rujuk nanti, seperti alamat, URL, dll. 📄🔗

Ia juga menghitung karakter dan kata, yang merupakan pengenalan yang baik untuk penanganan string (teks). Tentu saja, aplikasi ini sangat sederhana: itulah tujuannya! Namun dengan tutorial ini, Anda akan mempelajari dasar-dasar pengembangan aplikasi web, dan kemudian dunia akan menjadi milik Anda. 🦪💻

Bagaimana Anda Akan Membangunnya?

Meskipun aplikasi web sangat beragam, biasanya melibatkan tiga teknologi utama: HTML, CSS, dan JavaScript. Penting bagi Anda untuk memahami peran mereka sebelum memulai. 📚

• HTML: Hypertext Markup Language memungkinkan Anda menentukan struktur konten Anda. Dengan ini, Anda dapat menandai teks berdasarkan maknanya, dengan menunjukkan apakah teks tersebut merupakan paragraf, judul, atau item dalam daftar, misalnya.
• CSS: Cascading Style Sheets memungkinkan Anda mengatur gaya konten Anda. Dengan menggunakan bahasa ini, Anda dapat mewarnai paragraf dengan warna hijau, membuat semua tautan Anda tebal, atau menempatkan bilah sisi di samping artikel utama Anda. 🎨
• JavaScript: Dengan bahasa pemrograman ini, Anda dapat menambahkan fungsionalitas ke situs web Anda. Anda dapat mengatur tombol untuk memperlihatkan atau menyembunyikan bagian dokumen saat diklik, atau menerapkan pengolah kata atau permainan video yang lengkap. 🎮

Dia situs web.dev (ditulis oleh anggota tim Chrome) dan MDN, Jaringan Pengembang Mozilla, adalah dua sumber informasi yang sangat bagus tentang teknologi web fundamental.

Struktur Aplikasi

Aplikasi yang akan Anda buat akan terdiri dari tiga file sederhana: index.html, styles.css, dan script.js. 🗂️

Tidak ada persyaratan khusus untuk menjalankan aplikasi, Anda hanya memerlukan peramban web. Tidak ada fungsi backend, jadi Anda tidak memerlukan bahasa skrip seperti PHP atau server web lokal. Setelah selesai, Anda dapat membuka file index.html langsung di browser Anda dan semuanya akan baik-baik saja. 😊

Penting untuk dicatat bahwa aplikasi ini menyimpan teks Anda tanpa menuliskannya ke file tertentu di disk, karena JavaScript tidak dapat mengakses sistem file. Menggunakan Web Storage API, alternatif yang ampuh untuk cookie. 🍪💾

Cara Membuat Alat Pencatat

Buat tiga file berikut dalam direktori yang sama lalu buka index.html di peramban web. Atau, Anda dapat mengunduh file dari repositori GitHub ini. 📥

Membangun Struktur dengan HTML

File index.html mendefinisikan struktur konten aplikasi Anda dalam HTML. Sertakan referensi ke dua berkas lainnya sehingga browser dapat menggabungkannya untuk produk akhir.

Seperti semua dokumen HTML, struktur tingkat atas mencakup bagian kepala yang berisi metadata dan bagian badan yang berisi konten sebenarnya yang akan muncul di halaman:

Bahasa Indonesia>
<Bahasa Indonesia>
<kepala>
    ...
kepala>

<tubuh>
…
tubuh>
Bahasa Indonesia>

Metadata di kepala sangat singkat, hanya judul halaman (yang muncul di bilah judul browser Anda) dan referensi ke file styles.css:

    <judul>Teksjudul>
    <link rel="lembar gaya" href="gaya.css" />

Tubuh lebih rumit, tetapi hanya ada beberapa bagian penting:

    <membagi pengenal="menangkal">
        kata-kata: <menjangkau pengenal="kata-kata">0menjangkau>
        / karakter: <menjangkau pengenal="karakter">0menjangkau>
    membagi>

<area teks pengenal="teks" fokus otomatis="1">area teks>

<naskah sumber="skrip.js">naskah>

Elemen div berisi jumlah kata dan karakter aplikasi. Itu akan terletak di bagian atas aplikasi web dan akan diperbarui setiap kali teks berubah.

Perhatikan atribut id yang penting untuk operasi. Nilai id harus unik, sehingga aplikasi dapat menggunakannya untuk mengidentifikasi item tertentu. Melakukan hal ini dapat membantu kita menata elemen-elemen ini dan juga menargetkannya saat menambahkan fungsionalitas.

Textarea adalah elemen formulir bawaan yang memungkinkan Anda mengetik teks sederhana ke dalam peramban. Dengan atribut autofokus, Anda akan siap menulis segera setelah halaman dimuat. Terakhir, halaman tersebut merujuk pada berkas javascript, script.js.

Pada titik ini, Anda dapat membuka file index.html di peramban. Saat ini tidak akan ada yang bisa dilakukan, dan tampilannya pun tidak bagus, tetapi akan sangat membantu jika Anda menguji aplikasi di setiap tahap untuk memastikan dasar-dasarnya berfungsi seperti yang Anda harapkan.

Membuatnya Terlihat Bagus Dengan CSS

CSS memungkinkan Anda memberi gaya pada bagian-bagian halaman web Anda dengan menargetkan bagian-bagian tersebut dan menentukan nilai untuk properti seperti ukuran font dan warna latar belakang. Aplikasi contoh ini tidak memerlukan desain yang sangat canggih karena antarmukanya sangat mendasar. Namun, kita dapat menghaluskan bagian yang kasar dengan sentuhan gaya. 🎨✨

Pertama, tata bentuk tubuh untuk menentukan desain keseluruhan:

tubuh {
    batas: 0;
    lapisan: 0;
    menampilkan: jaringan;
    tinggi minimum: 100vh;
    templat-grid-baris: konten minimum 1dari Inggris;
}

CSS ini menggunakan tata letak grid untuk memposisikan jumlah kata dan karakter dalam baris sempit di atas textarea. Properti grid-template-rows menentukan bahwa baris hitungan harus sesingkat mungkin (min-content) dan textarea harus mengisi ruang yang tersisa (1fr).

Baris penghitung memiliki gaya dasar untuk membedakannya dari teks lainnya, terutama melalui latar belakangnya:

Penghitung # {
    keluarga font: tanpa serif;
    warna latar belakang: #f7f7f7;
    perataan teks: tengah;
    lebar: 100%;
    lapisan: 0.5 juta 0;
}

Terakhir, textarea ditata untuk menampilkan teks yang terbaca dengan cukup ruang untuk bernapas. Garis yang memisahkan jumlah dari teks sebenarnya adalah batas atas textarea ini.

area teks {
    lebar: 100%;
    tinggi: 100%;
    ukuran font: 16bagian;
    lapisan: 1di dalam;
    ukuran kotak: kotak batas;
    garis besar: 0;
    berbatasan: tidak ada;
    perbatasan atas: 1piksel padat #999;
}

Menambahkan Fungsionalitas dengan JavaScript

Setelah struktur dan gayanya siap, Anda siap menambahkan fungsionalitas: kode yang membuat aplikasi sederhana ini benar-benar melakukan sesuatu. 🛠️

Sebelum Anda mulai menulis kode yang paling sederhana sekalipun, ada baiknya Anda pahami apa yang ingin Anda lakukan. Dalam kasus ini, hanya ada beberapa persyaratan umum:

• Simpan teks yang dimasukkan dan muat ulang bila perlu.
• Perbarui jumlah karakter dan kata untuk menyediakan statistik waktu nyata. Bahasa Indonesia:

Kedua persyaratan tersebut melibatkan pembaruan elemen dalam dokumen. Jadi skrip dimulai dengan mendapatkan referensi ke node-node ini menggunakan metode getElementById:

konstan kata-kata = dokumen.dapatkanElementById("kata-kata");
konstan karakter = dokumen.dapatkanElementById("karakter");
konstan area teks = dokumen.dapatkanElementById("teks");

Perhatikan bahwa kata, karakter, dan teks adalah ID elemennya masing-masing dalam dokumen, yang ditetapkan dalam file HTML dengan atribut id.

Berikutnya, kita perlu aplikasi untuk bereaksi ketika teks diubah:

textarea.tambahkanEventListener("masukan", fungsi(setiap) { penyimpanan lokal.setItem("teks", ev.target.nilai); update_counts(ev.target.nilai); { {{nama pengguna}}});

Pendengar peristiwa merupakan fungsi yang akan dijalankan JavaScript secara otomatis saat peristiwa tertentu terjadi. Dalam kasus ini, kami melampirkan pendengar ke node textarea, yang dieksekusi saat peristiwa "input" terjadi. Yaitu, saat seseorang berinteraksi dengan textarea.

Berikutnya, kami menggunakan Web Storage API untuk menyimpan konten textarea saat ini, yang berasal dari ev.target.value. Dalam struktur ini, ev adalah objek yang mewakili peristiwa yang memicu pendengar, ev.target adalah simpul yang menerima peristiwa tersebut, dan ev.target.value adalah teks dari textarea tersebut.

Metode setItem mengambil dua parameter: nama kunci untuk dikaitkan dengan data dan data aktual untuk disimpan.

Berikutnya, kita memanggil update_counts() dan meneruskan teks yang sama. Kami akan menjelaskan fitur itu sebentar lagi.

Sekarang setelah kita menyimpan teks, Anda ingin memuatnya lagi saat aplikasi dibuka atau dimuat ulang. Kita dapat mengatasinya dengan menggunakan pendengar lain:

jendela.tambahkanPendengarAcara("memuat", fungsi(setiap) {
    apakah teks = penyimpananlokal.getItem("teks"); textarea.nilai = teks; update_counts(teks); });

Pendengar ini menangani peristiwa pemuatan yang terjadi pada objek jendela, representasi tingkat atas dari jendela peramban. Saat jendela dimuat, panggilan ke getItem() mengembalikan nilai teks yang tersimpan dari penyimpanan lokal. Kode ini kemudian menetapkan nilai textarea ke teks yang dimuat dan, seperti pendengar di atas, memanggil update_counts() dengan teks ini.

Pekerjaan yang tersisa dilakukan dalam fungsi update_counts() yang terlihat seperti ini:

fungsi perbarui_jumlah(teks) { chars.innerHTML = teks.panjang; kata-kata.innerHTML = teks.split(' ').panjang; }

Tidak seperti textarea, teks biasa tidak memiliki properti nilai, jadi kami menetapkan properti innerHTML sebagai gantinya. Properti panjang suatu string adalah properti baca-saja sederhana yang memberi kita jumlah karakter.

text.split(' ') membagi string pada karakter spasi, mengembalikan hasil sebagai array string. Seperti string, array memiliki properti panjang yang memberi kita jumlah elemen dalam suatu array.

Namun, jika Anda menguji kode ini, Anda mungkin menemukan beberapa kesalahan:

1. Ia tidak akan menghitung kata sendiri pada baris dengan benar, karena tidak ada karakter spasi di sekitarnya.
2. Tanpa teks sama sekali, ia akan melaporkan satu kata karena cara kerja pemisahan.

Untuk menyelesaikan masalah pertama, Anda dapat membaginya pada ekspresi reguler (\s berarti "karakter kosong") dan bukan spasi. Untuk menyelesaikan yang kedua, saring string kosong dari hasil:

    kata-kata.innerHTML = teks.split(/\S/).menyaring(fungsi(N) { kembali tidak!= ''Bahasa Indonesia: }).panjang;

Jika Anda tidak sepenuhnya memahami kalimat itu, periksa halaman MDN untuk membelah Dan menyaring.

Anda dapat membangun banyak aplikasi web yang berguna hanya dengan beberapa file. Anda juga dapat memperluas aplikasi catatan sederhana ini untuk menambahkan lebih banyak fungsi. Misalnya, Anda dapat menggunakan properti window.location untuk mengambil URL saat ini dan mendukung beberapa catatan dengan memvariasikan nama yang Anda berikan ke localStorage.setItem. 🗒️🌍