Cara menggunakan mengapa javascript penting

Question

Formulir web memiliki hubungan klien-server. Mereka digunakan untuk mengirim data yang ditangani oleh server web untuk diproses dan disimpan. Formulir itu sendiri adalah klien, dan server adalah mekanisme penyimpanan apa pun yang dapat digunakan untuk menyimpan, mengambil, dan mengirim data saat dibutuhkan

Table of Contents Show

Penting untuk apa?
Bagaimana JavaScript berjalan?
Di mana JavaScript biasanya digunakan?
Mengapa JavaScript harus dipelajari dan dibutuhkan dalam pembuatan website?

Panduan ini akan mengajari Anda cara membuat formulir web dengan Next. js

Formulir HTML dibangun menggunakan

tag. Dibutuhkan sekumpulan atribut dan bidang untuk menyusun formulir untuk fitur seperti bidang teks, kotak centang, menu tarik-turun, tombol, tombol radio, dll.

Berikut sintaks formulir HTML

Front-end terlihat seperti ini

Tag HTML bertindak sebagai wadah untuk berbagai elemen seperti bidang text dan mengirimkan button. Mari kita pelajari masing-masing elemen ini

action. Atribut yang menentukan ke mana data formulir dikirim saat formulir dikirimkan. Ini biasanya URL (URL absolut atau URL relatif)
```
  Password:
  

  Submit
```
0. Menentukan metode HTTP, mis. e. ,
```
  Password:
  

  Submit
```
1 atau
```
  Password:
  

  Submit
```
2 digunakan untuk mengirim data saat mengirimkan formulir
. Elemen yang menentukan label untuk elemen formulir lainnya. Label membantu aksesibilitas, terutama untuk pembaca layar
. Elemen formulir yang banyak digunakan untuk menyusun bidang formulir. Itu sangat tergantung pada nilai atribut
```
  Password:
  

  Submit
```
5. Jenis input dapat berupa text,
```
  Password:
  

  Submit
```
7,
```
  Password:
  

  Submit
```
8,
```
  Password:
  

  Submit
```
9, dan lainnya
Merupakan tombol yang dapat diklik yang digunakan untuk mengirimkan data formulir

Suatu proses yang memeriksa apakah informasi yang diberikan oleh pengguna benar atau tidak. Validasi formulir juga memastikan bahwa informasi yang diberikan dalam format yang benar (mis. g. ada @ di bidang email). Ini adalah dua jenis

Sisi klien. Validasi dilakukan di browser
Sisi server. Validasi dilakukan di server

Meskipun kedua jenis ini sama pentingnya, panduan ini hanya berfokus pada validasi sisi klien

Validasi sisi klien selanjutnya dikategorikan sebagai

Bawaan. Menggunakan atribut berbasis HTML seperti

npx create-next-app

0,


  Password:
  

  Submit

5,

npx create-next-app

2,

npx create-next-app

3,

npx create-next-app

4, dll

Berbasis JavaScript. Validasi yang dikodekan dengan JavaScript

```
npx create-next-app
```
0. Menentukan kolom mana yang harus diisi sebelum mengirimkan formulir
```
  Password:
  

  Submit
```
5. Menentukan tipe data (mis. e nomor, alamat email, string, dll.)
```
npx create-next-app
```
2. Menentukan panjang minimum untuk string data teks
```
npx create-next-app
```
3. Menentukan panjang maksimum untuk string data teks

Jadi, formulir yang menggunakan atribut ini mungkin terlihat seperti

Dengan pemeriksaan validasi ini, ketika pengguna mencoba mengirimkan bidang kosong untuk Nama, itu memberikan kesalahan yang muncul tepat di bidang formulir. Demikian pula, nomor gulungan hanya dapat dimasukkan jika panjangnya 10-20 karakter

Validasi Formulir penting untuk memastikan bahwa pengguna telah mengirimkan data yang benar, dalam format yang benar. JavaScript menawarkan tingkat validasi tambahan bersama dengan atribut formulir asli HTML di sisi klien. Pengembang umumnya lebih suka memvalidasi data formulir melalui JavaScript karena pemrosesan datanya lebih cepat bila dibandingkan dengan validasi sisi server, namun validasi front-end mungkin kurang aman dalam beberapa skenario karena pengguna jahat selalu dapat mengirimkan data yang salah format ke server Anda

Contoh berikut menunjukkan penggunaan JavaScript untuk memvalidasi formulir


  Roll Number:
  

  Name:
  

  Submit

Tag skrip HTML digunakan untuk menyematkan JavaScript sisi klien apa pun. Itu bisa berisi pernyataan skrip sebaris (seperti yang ditunjukkan pada contoh di atas) atau menunjuk ke file skrip eksternal melalui atribut

npx create-next-app

9. Contoh ini memvalidasi nama dan nomor daftar pengguna. Fungsi


  First name:
  
  Last name:
  
  Submit

_0 tidak mengizinkan bidang nama kosong, dan nomor gulungan harus setidaknya tiga digit. Validasi dilakukan saat Anda menekan tombol Kirim. Anda tidak dialihkan ke halaman berikutnya sampai nilai yang diberikan benar

Validasi JavaScript dengan Ekspresi Reguler menggunakan atribut

npx create-next-app

4 HTML. Ekspresi reguler (umumnya dikenal sebagai RegEx) adalah objek yang menggambarkan pola karakter. Anda hanya dapat menerapkan atribut

npx create-next-app

_4 ke elemen . Dengan cara ini, Anda dapat memvalidasi nilai input menggunakan Ekspresi Reguler (RegEx) dengan menentukan aturan Anda sendiri. Sekali lagi, jika nilainya tidak sesuai dengan pola yang ditentukan, input akan memberikan kesalahan. Contoh di bawah menunjukkan penggunaan atribut

npx create-next-app

_4 pada elemen


  First name:
  
  Last name:
  
  Submit

5


  Password:
  

  Submit

Bidang formulir kata sandi hanya boleh berisi angka (0 hingga 9), huruf kecil (a hingga z) dan panjangnya tidak boleh lebih dari 15 karakter. Tidak ada karakter lain (#,$,&, dll. ) diijinkan. Aturan dalam RegEx ditulis sebagai


  First name:
  
  Last name:
  
  Submit

6

Untuk mempelajari lebih lanjut tentang formulir HTML, lihat MDN Web Docs

Di bagian berikut, Anda akan membuat formulir di React menggunakan Next. js

Buat Berikutnya baru. aplikasi js. Anda dapat menggunakannya untuk memulai dengan cepat. Di terminal baris perintah Anda, jalankan perintah berikut

npx create-next-app

Jawab pertanyaan untuk membuat proyek Anda, dan beri nama, contoh ini menggunakan


  First name:
  
  Last name:
  
  Submit

7. Berikutnya


  First name:
  
  Last name:
  
  Submit

_8 ke dalam direktori ini, dan jalankan perintah


  First name:
  
  Last name:
  
  Submit

9 atau

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

0 untuk memulai server pengembangan

Buka URL yang tercetak di terminal untuk memastikan bahwa aplikasi Anda berjalan dengan sukses

Klien dan server akan dibangun menggunakan Next. js. Untuk bagian server, buat titik akhir API tempat Anda akan mengirimkan data formulir

Lanjut. js menawarkan sistem perutean berbasis file yang dibangun di atas konsep halaman. File apa pun di dalam folder

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

1 dipetakan ke

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

2 dan akan diperlakukan sebagai titik akhir API, bukan halaman. Titik akhir API ini hanya akan menjadi sisi server

Buka

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

_1, buat file bernama

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

4 dan rekatkan kode ini yang ditulis di Node. js

Formulir ini

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

_5 fungsi akan menerima permintaan

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

6 dari klien (i. e. data formulir yang dikirimkan). Dan sebagai gantinya, itu akan mengirimkan respons

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

7 sebagai JSON yang akan memiliki nama depan dan belakang. Anda dapat mengakses titik akhir API ini di

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

8 atau mengganti URL localhost dengan penerapan Vercel aktual saat Anda menerapkan

Selain itu, Anda juga dapat melampirkan API ini ke database seperti MongoDB atau Google Sheets. Dengan cara ini, data formulir yang Anda kirimkan akan disimpan dengan aman untuk digunakan nanti. Untuk panduan ini, tidak ada database yang digunakan. Sebagai gantinya, data yang sama dikembalikan ke pengguna untuk mendemonstrasikan cara melakukannya

Anda sekarang dapat menggunakan titik akhir relatif

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

9 di dalam atribut action dari formulir. Anda mengirim data formulir ke server saat formulir dikirim melalui metode HTTP


  Password:
  

  Submit

2 (yang digunakan untuk mengirim data)


  First name:
  
  Last name:
  
  Submit

Jika Anda mengirimkan formulir ini, formulir ini akan mengirimkan data ke titik akhir API formulir

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

9. Server kemudian merespons, umumnya menangani data dan memuat URL yang ditentukan oleh atribut tindakan, menyebabkan pemuatan halaman baru. Jadi dalam hal ini Anda akan dialihkan ke

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

8 dengan respons berikut dari server

Anda telah membuat Berikutnya. js API Route untuk pengiriman formulir. Sekarang saatnya mengkonfigurasi klien (formulir itu sendiri) di dalam Next. js menggunakan Bereaksi. Langkah pertama adalah memperluas pengetahuan Anda tentang formulir HTML dan mengubahnya menjadi React (menggunakan JSX)

Berikut adalah bentuk yang sama dalam komponen fungsi React yang ditulis menggunakan JSX

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

Inilah yang berubah

Atribut

export default function PageWithoutJSbasedForm() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

_4 diubah menjadi

export default function PageWithoutJSbasedForm() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

5. (Karena

export default function PageWithoutJSbasedForm() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

4 adalah kata kunci yang terkait dengan loop "untuk" di JavaScript, elemen React menggunakan

export default function PageWithoutJSbasedForm() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

5 sebagai gantinya. )

Atribut action sekarang memiliki URL relatif yang merupakan titik akhir API formulir

Ini melengkapi struktur dasar Berikutnya Anda. formulir berbasis js

Anda dapat melihat seluruh kode sumber repo contoh formulir berikutnya yang kami buat di sini sebagai contoh yang berfungsi. Jangan ragu untuk mengkloningnya dan segera mulai. Demo ini dibuat dengan aplikasi buat-berikutnya, dan Anda dapat mempratinjau bentuk dasar gaya CSS di dalam file
export default function PageWithoutJSbasedForm() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}
9

JavaScript menghadirkan interaktivitas ke aplikasi web kami, tetapi terkadang Anda perlu mengontrol paket JavaScript agar tidak terlalu besar, atau pengunjung situs Anda mungkin telah menonaktifkan JavaScript

Ada beberapa alasan mengapa pengguna menonaktifkan JavaScript

Mengatasi kendala bandwidth
Meningkatkan masa pakai baterai perangkat (ponsel atau laptop).
Untuk privasi agar tidak terlacak dengan skrip analitik

Apa pun alasannya, menonaktifkan JavaScript akan memengaruhi sebagian fungsi situs, jika tidak seluruhnya

Selanjutnya buka direktori


  First name:
  
  Last name:
  
  Submit

_7. Di dalam direktori _1, buat file 2

Kiat Cepat. Di Selanjutnya. js, halaman adalah React Component yang diekspor dari file 3, 4, 5, atau 6 di direktori pages. Setiap halaman dikaitkan dengan rute berdasarkan nama filenya
Contoh. Jika Anda membuat _7, itu akan dapat diakses di 8

Mari gunakan kode yang sama dari atas

export default function PageWithoutJSbasedForm() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

Dengan JavaScript dinonaktifkan, saat Anda menekan tombol Kirim, sebuah peristiwa dipicu, yang mengumpulkan data formulir dan mengirimkannya ke titik akhir API formulir kami seperti yang ditentukan dalam atribut action dan menggunakan


  Password:
  

  Submit

2 HTTP


  Password:
  

  Submit

0. Anda akan dialihkan ke titik akhir

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

9 karena begitulah cara kerja formulir action

Data formulir akan dikirimkan ke server sebagai permintaan

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

6 ke fungsi penangan formulir yang tertulis di atas. Ini akan memproses data dan mengembalikan string JSON sebagai respons

export default function Form() {
  return (
    
      First Name
      

      Last Name
      

      Submit
    
  )
}

7 dengan menyertakan nama yang Anda kirimkan

Untuk meningkatkan pengalaman di sini, sebagai respons, Anda dapat mengarahkan pengguna ke halaman dan berterima kasih kepada mereka karena telah mengirimkan formulir

Di dalam _1, Anda akan membuat file lain bernama text7. Ini akan membuat halaman text_8 di Next Anda. aplikasi js

Sekarang, segera setelah formulir dikirimkan, kami mencegah perilaku default formulir untuk memuat ulang halaman. Kami akan mengambil data formulir, mengubahnya menjadi string JSON, dan mengirimkannya ke server kami, titik akhir API. Terakhir, server kami akan merespons dengan nama yang dikirimkan. Semua ini dengan fungsi dasar JavaScript ________57______9

Penting untuk apa?

Penting artinya sangat penting .

Bagaimana JavaScript berjalan?

Javascript cenderung sangat cepat karena dijalankan langsung di browser. Selain itu, sebagian besar browser utama mendukung kompilasi JIT (Just In Time), yang berarti tidak perlu mengompilasi kode sebelum menjalankannya.

Di mana JavaScript biasanya digunakan?

JavaScript digunakan di web, aplikasi seluler, dan pengembangan game sehingga menjadi salah satu yang patut Anda pelajari.

Mengapa JavaScript harus dipelajari dan dibutuhkan dalam pembuatan website?

Javascript yang akhirnya didukung oleh hampir semua browser yang sering digunakan, akhirnya menjadi bahasa pemrograman universal. Ini membuat pengembangan web lebih canggih, lebih dinamis, dan lebih interaktif.

kode javascript