• Tentang Kami
  • Mengumumkan
  • Kebijakan Privasi
  • Hubungi kami
Berita MasterTrend
  • Rumah
    • BLOG
    • LAYANAN TEKNIS
    • TOKO
  • Tutorial
  • Perangkat keras
  • Permainan
  • Telepon genggam
  • Keamanan
  • Jendela
  • Kecerdasan buatan
  • Perangkat lunak
  • Jaringan
  • Berita
Tidak ada hasil
Lihat semua hasil
  • Rumah
    • BLOG
    • LAYANAN TEKNIS
    • TOKO
  • Tutorial
  • Perangkat keras
  • Permainan
  • Telepon genggam
  • Keamanan
  • Jendela
  • Kecerdasan buatan
  • Perangkat lunak
  • Jaringan
  • Berita
Tidak ada hasil
Lihat semua hasil
Berita MasterTrend
Tidak ada hasil
Lihat semua hasil
Awal Tutorial

Buat aplikasi web pertama Anda dan kuasai pemrograman tanpa stres 🚀💻

Wawasan MasterTrend oleh Wawasan MasterTrend
13 Mei 2025
di dalam Tutorial
Waktu membaca:Bacaan 10 menit
KE KE
0
Buat catatan + penghitung aplikasi web pertama Anda dengan mudah dan cepat
1
DIBAGIKAN
4
Pemandangan
Bagikan di FacebookBagikan di Twitter

Isi

  1. Buat aplikasi web pertama Anda: catatan + penghitung mudah dan cepat 📝⚡
  2. Apa yang Akan Anda Bangun
  3. Bagaimana Anda Akan Membangunnya?
  4. Struktur Aplikasi
  5. Cara Membuat Alat Pencatat
    1. Membangun Struktur dengan HTML
    2. Membuatnya Terlihat Bagus Dengan CSS
    3. Menambahkan Fungsionalitas dengan JavaScript
    4. Posting Terkait

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. 📄🔗

Contoh aplikasi web berbasis teks sederhana yang menampilkan catatan, termasuk entri kalender dan daftar URL.

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.

Beranda situs web.dev dengan sumber belajar untuk HTML, CSS, dan JavaScript.

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.

Tampilan aplikasi web pencatatan dengan gaya peramban default, yang memperlihatkan semua hal dikelompokkan di sudut kiri atas.

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;
}
Aplikasi pencatatan dengan gaya khusus menampilkan bilah penghitungan di bagian atas dengan area teks berukuran penuh di bawahnya.

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.

Aplikasi web dengan contoh teks, menunjukkan jumlah karakter dan kata yang akurat.

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. 🗒️🌍

Bagikan ini:
49IndonesiaLinkedInPinterestXBahasa Indonesia: RedditBahasa Indonesia: TumblrLangit biruBenangMembagikan
49
BAGIKAN

Posting Terkait

  • Cara memperbaiki kesalahan "Ada yang salah" di Twitter
  • Cara Mengunduh Video Tertanam Secara Gratis di Tahun 2024
  • Alat diagnostik terbaik untuk Windows 10/11
  • AMD Radeon RX 7000 5 dan 6 nanometer
  • Aspek Intel Alder Lake P dan U
  • Kecepatan dengan SSD solid state drive – PC dan Laptop
  • Boston Dynamics Atlas sedang beraksi
  • Struktur Direktori Linux, Dijelaskan
Tag: Konten EvergreenTipsTeknologi
Postingan Sebelumnya

Cara Menampilkan atau Menyembunyikan Perpustakaan di Windows 11: Panduan Langkah demi Langkah 🚀🔒

Publikasi berikutnya

Game RTS: Mengapa Studio Besar Meninggalkannya? 🎮🔥

Wawasan MasterTrend

Wawasan MasterTrend

Tim editorial kami membagikan ulasan mendalam, tutorial, dan rekomendasi untuk membantu Anda mendapatkan hasil maksimal dari perangkat dan alat digital Anda.

Publikasi berikutnya
Game RTS: 5 Judul Indie yang Tetap Menggunakan Strategi

Game RTS: Mengapa Studio Besar Meninggalkannya? 🎮🔥

5 2 suara
Peringkat Artikel
Berlangganan
Mengakses
Diberitahukan oleh
tamu

tamu

0 Komentar
Lebih kuno
Yang lebih baru Lebih banyak suara
Komentar online
Lihat semua komentar

Tetap Terhubung

  • 976 Penggemar
  • 118 Pengikut
  • 1,4 ribu Pengikut
  • 1,8 ribu Pelanggan

  • Kecenderungan
  • Komentar
  • Terakhir
Cara menambahkan jam ke desktop Windows 11 Anda: 3 trik yang sangat ampuh!

Cara Menambahkan Jam ke Desktop Windows 11 Anda: Raih Lebih Banyak Hal dalam Hitungan Menit! ⏱️

1 Mei 2025
12 Alternatif Terbaik untuk Lucky Patcher untuk Android

Alternatif Lucky Patcher: 12 Aplikasi yang Lebih Baik dan Mudah! 🎮⚡

12 Mei 2025
Cara Menggunakan DNS AdGuard di Android pada tahun 2024

Cara Menggunakan DNS AdGuard di Android pada tahun 2025

11 Februari 2025
Cara Menyimpan Item di Oblivion Remastered: 5 Trik yang Perlu Anda Ketahui! 🗝️💼

Cara menyimpan item di Oblivion Remastered tanpa kehilangan jarahan Anda 💎⚡

1 Mei 2025
Fitur Gmail di Android: Hemat Waktu dengan 5 Tips

Fitur Gmail di Android: 5 Trik yang Tidak Anda Ketahui! 📱✨

12
Perbaikan Motherboard - Perbaikan Motherboard

Perbaikan Motherboard Notebook

10
Instal Windows 11 Home tanpa Internet

Instal Windows 11 Home tanpa Internet

10
Cara Mencadangkan Driver di Windows 11/10 dalam 4 Langkah!

Cara Mencadangkan Driver di Windows 11/10: Hindari Kesalahan! 🚨💾

10
Nama Pengguna Acak Lindungi akun Anda hari ini

Nama pengguna acak: Kunci untuk menghindari peretasan massal 🛡️🚫

25 Juni 2025
Buka Yasuke Temukan Kofun rahasia yang akan mengubah permainan Anda!

Buka Yasuke: Temukan Kofun rahasia yang akan membuatmu mendominasi! 🥷💥

25 Juni 2025
Percepat laptop Anda 🚀 dengan 5 aplikasi gratis yang harus Anda coba sekarang

Percepat laptop Anda ⚡️ dan tingkatkan kinerjanya dalam 5 langkah mudah

24 Juni 2025
Tombol BIOS/UEFI: 10 Tombol Teratas untuk Akses Cepat

Kunci BIOS/UEFI: Pelajari cara memasukkannya dengan mudah dan tanpa kesalahan ⚡🔑

24 Juni 2025

Berita Terbaru

Nama Pengguna Acak Lindungi akun Anda hari ini

Nama pengguna acak: Kunci untuk menghindari peretasan massal 🛡️🚫

25 Juni 2025
6
Buka Yasuke Temukan Kofun rahasia yang akan mengubah permainan Anda!

Buka Yasuke: Temukan Kofun rahasia yang akan membuatmu mendominasi! 🥷💥

25 Juni 2025
4
Percepat laptop Anda 🚀 dengan 5 aplikasi gratis yang harus Anda coba sekarang

Percepat laptop Anda ⚡️ dan tingkatkan kinerjanya dalam 5 langkah mudah

24 Juni 2025
6
Tombol BIOS/UEFI: 10 Tombol Teratas untuk Akses Cepat

Kunci BIOS/UEFI: Pelajari cara memasukkannya dengan mudah dan tanpa kesalahan ⚡🔑

24 Juni 2025
4
Logo Berita MasterTrend

MasterTrend Info adalah sumber informasi teknologi terkini: temukan berita, tutorial, dan analisis tentang perangkat keras, perangkat lunak, permainan, perangkat seluler, dan kecerdasan buatan. Berlanggananlah ke buletin kami dan jangan lewatkan tren apa pun.

Ikuti kami

Telusuri Berdasarkan Kategori

  • Permainan
  • Perangkat keras
  • Kecerdasan buatan
  • Telepon genggam
  • Berita
  • Jaringan
  • Keamanan
  • Perangkat lunak
  • Tutorial
  • Jendela

Berita Terbaru

Nama Pengguna Acak Lindungi akun Anda hari ini

Nama pengguna acak: Kunci untuk menghindari peretasan massal 🛡️🚫

25 Juni 2025
Buka Yasuke Temukan Kofun rahasia yang akan mengubah permainan Anda!

Buka Yasuke: Temukan Kofun rahasia yang akan membuatmu mendominasi! 🥷💥

25 Juni 2025
  • Tentang Kami
  • Mengumumkan
  • Kebijakan Privasi
  • Hubungi kami

Hak Cipta © 2025 https://mastertrend.info/ - Semua hak dilindungi undang-undang. Semua merek dagang adalah milik pemiliknya masing-masing.

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
Tidak ada hasil
Lihat semua hasil
  • Permainan
  • Perangkat keras
  • Kecerdasan buatan
  • Telepon genggam
  • Berita
  • Jaringan
  • Keamanan
  • Perangkat lunak
  • Tutorial
  • Jendela

Hak Cipta © 2025 https://mastertrend.info/ - Semua hak dilindungi undang-undang. Semua merek dagang adalah milik pemiliknya masing-masing.

Komentar Info Penulis
:wpds_senyum::wpds_senyum::wpds_mengedipkan mata::wpds_mrgreen::wpds_netral::wpds_twisted::wpds_panah::kejutan wpds::wpds_tidak terhibur::wpds_keren::wpds_jahat::wpds_oops::wpds_razz::wpds_gulungan::wpds_menangis::wpds_eek::wpds_lol::wpds_mad::wpds_sedih::wpds_seru::pertanyaan_wpds::ide_wpds::wpds_hmm::wpds_memohon::wpds_wah::wpds_tertawa::wpds_konyol::wpds_iri::wpds_tutup:
wpDiscuz
Bahasa Indonesia: RedditLangit biruXIkan MasBerita Peretas
Bagikan ini:
Ikan MasVKontakteAda apaTelegramPesan singkatBerita PeretasGarisKurir
Instansi Mastodon Anda