Bagaimana Anda membuat fungsi di html?

Menambahkan JavaScript ke aplikasi Web adalah cara terbaik untuk menambahkan fitur yang meniru fitur yang ditemukan di aplikasi klien/server tanpa mengorbankan semua manfaat penerapan Web. Oracle Application Express menyertakan beberapa antarmuka bawaan yang dirancang khusus untuk menambahkan JavaScript

Ingatlah bahwa JavaScript tidak cocok untuk validasi intensif data. Misalnya, untuk memverifikasi bahwa sebuah nama terkandung dalam tabel database besar, Anda perlu menarik setiap catatan ke klien, membuat dokumen HTML yang sangat besar. Secara umum, operasi kompleks jauh lebih cocok untuk validasi Oracle Application Express sisi server daripada JavaScript

Tutorial ini menjelaskan beberapa skenario penggunaan untuk JavaScript dan menyertakan detail tentang cara mengimplementasikannya di aplikasi Anda

Bagian ini berisi topik-topik berikut

Memahami Cara Memasukkan Fungsi JavaScript

Ada dua tempat utama untuk menyertakan fungsi JavaScript

• Dalam atribut Header HTML suatu halaman

• Dalam file

  
  
      #TITLE#
      #HEAD#
      
  
  #FORM_OPEN#
  

  _4 yang direferensikan dalam template halaman

Topik pada bagian ini meliputi

Memasukkan JavaScript dalam Atribut Header HTML

Salah satu cara untuk memasukkan JavaScript ke dalam aplikasi Anda adalah dengan menambahkannya ke atribut Header HTML halaman. Ini adalah pendekatan yang bagus untuk fungsi yang khusus untuk halaman serta cara mudah untuk menguji fungsi sebelum Anda memasukkannya ke dalam file

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

Anda dapat menambahkan fungsi JavaScript ke halaman dengan memasukkan kode di atribut Header HTML di halaman Atribut Halaman

Untuk menambahkan kode JavaScript pada atribut HTML Header

1. Di beranda Workspace, klik ikon Application Builder

2. Pilih aplikasi

   Halaman beranda Aplikasi muncul, menampilkan kumpulan halamannya

3. Klik sebuah halaman

   Definisi Halaman untuk halaman itu muncul

4. Di bagian Halaman, klik ikon Edit atribut halaman

   Halaman Edit muncul

5. Gulir ke bawah ke bagian Header HTML

6. Masukkan kode ke HTML Header lalu klik Apply Changes

Misalnya, menambahkan kode berikut akan menguji fungsi yang dapat diakses dari mana saja di halaman saat ini

Termasuk JavaScript di a. File js Direferensikan oleh Template Halaman

Di Oracle Application Express Anda dapat mereferensikan file

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

Kode berikut menunjukkan cara memasukkan a. js di bagian header template halaman. Perhatikan baris

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

Tentang Mereferensikan Item Menggunakan JavaScript

Saat Anda mereferensikan item, pendekatan terbaik adalah mereferensikan nama item seperti yang ditentukan di dalam halaman. Perhatikan bahwa nama item berbeda dari label item. Nama item ditampilkan di Definisi Halaman dan label ditampilkan di halaman yang berjalan. Misalnya, jika Anda membuat item dengan nama

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

Merujuk item dengan nama item memungkinkan Anda menggunakan metode JavaScript

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

Memanggil JavaScript dari Tombol

Memanggil JavaScript dari tombol adalah cara yang bagus untuk mengonfirmasi permintaan. Oracle Application Express menggunakan teknik ini untuk operasi penghapusan sebagian besar objek. Misalnya, saat Anda menghapus tombol, muncul pesan JavaScript yang meminta Anda untuk mengonfirmasi permintaan Anda. Perhatikan contoh berikut

Contoh ini membuat fungsi untuk mengonfirmasi tindakan penghapusan lalu memanggil fungsi tersebut dari tombol. Perhatikan bahwa fungsi secara opsional mengirimkan halaman dan menetapkan nilai variabel internal

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

Perhatikan bahwa saat Anda membuat tombol, Anda harus memilih Action Redirect to URL without submiting page. Kemudian, Anda tentukan target URL, seperti berikut ini

confirmDelete('Would you like to perform this delete action?');

Mengubah Nilai Elemen Formulir

Dalam contoh berikut, ada empat kotak teks di suatu wilayah. Kotak teks keempat berisi jumlah dari tiga lainnya. Untuk menghitung jumlah ini, Anda menambahkan fungsi JavaScript ke atribut Header HTML, lalu memanggil fungsi tersebut dari tiga item pertama

Untuk menambahkan fungsi pada atribut Header HTML

1. Buka Definisi Halaman yang sesuai

2. Di bagian Halaman, klik ikon Edit atribut halaman

   Halaman Edit muncul

3. Di bagian Header HTML, masukkan berikut ini

4. Klik Terapkan Perubahan

Untuk memanggil fungsi dari ketiga item tersebut

1. Buka Definisi Halaman yang sesuai

2. Untuk setiap item

   1. Pilih nama item dengan mengkliknya

   2. Gulir ke bawah ke Elemen

   3. Di Atribut Elemen Formulir HTML, masukkan

      onchange="sumItems();"
      

   4. Klik Terapkan Perubahan

Membuat Validasi JavaScript Sisi Klien

Validasi sisi klien memberikan umpan balik langsung kepada pengguna menggunakan formulir. Salah satu validasi JavaScript yang sangat umum adalah bidang bukan nol. Jenis validasi ini bekerja dengan baik di header halaman daripada di

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

Sebelum memulai, Anda perlu mengimpor dan menginstal aplikasi OEHR Sample Objects untuk mengakses objek database sampel yang diperlukan. Lihat

Topik pada bagian ini meliputi

Buat Aplikasi pada Tabel OEHR_EMPLOYEES

Untuk membuat aplikasi baru pada tabel

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

1. Di halaman beranda Workspace, klik Application Builder

2. Klik Buat

3. Untuk Method, pilih Create Application lalu klik Next

4. Untuk Nama, tentukan yang berikut ini

   1. Nama - Masukkan

       
        // Then add the following to the "Form Element Attributes" Attribute of the item:
        onchange="displayValue('P1_FIRST_NAME');"
      

      _7

   2. Aplikasi - Terima default

   3. Buat Aplikasi - Pilih Dari awal

   4. Skema - Pilih skema tempat Anda menginstal objek sampel OEHR

   5. Klik Berikutnya

5. Tambahkan halaman yang berisi laporan dengan menentukan yang berikut di bagian Tambahkan Halaman

   1. Pilih Jenis Halaman - Pilih Laporan dan Formulir

   2. Nama Tabel - Pilih OEHR_EMPLOYEES

   3. Klik Tambahkan Halaman

   Halaman baru muncul dalam daftar di bagian atas halaman. Selanjutnya ganti nama halaman 2 menjadi Update Form

6. Untuk mengubah nama halaman 2

   1. Di bawah Buat Aplikasi di bagian atas halaman, klik nama halaman OEHR_EMPLOYEES untuk halaman 2 seperti yang ditunjukkan pada

      Definisi Halaman muncul

   2. Di Nama Halaman, masukkan

       
        // Then add the following to the "Form Element Attributes" Attribute of the item:
        onchange="displayValue('P1_FIRST_NAME');"
      

      8

   3. Klik Terapkan Perubahan

   4. Klik Berikutnya

7. Untuk Tabs, terima defaultnya, One Level of Tabs lalu klik Next

8. Untuk Shared Components, terima defaultnya, No, dan klik Next

9. Untuk Atribut, terima default untuk Skema Otentikasi, Bahasa, dan Preferensi Bahasa Pengguna Berasal Dari dan klik Berikutnya

10. Untuk User Interface, pilih Theme 2 dan klik Next

11. Klik Buat

    Halaman beranda Aplikasi muncul. Catatan aplikasi baru berisi tiga halaman

    • 1 - OEHR_EMPLOYEES

    • 2 - Perbarui Formulir

    • 101 - Masuk

Untuk melihat aplikasi

1. Klik ikon Jalankan Aplikasi seperti yang ditunjukkan pada

2. Saat diminta nama pengguna dan kata sandi, masukkan nama pengguna dan kata sandi ruang kerja Anda dan klik Login. Lihat

   Laporan standar muncul. Untuk melihat formulir pembaruan, klik tombol Buat atau ikon Edit

3. Klik Aplikasi pada bilah alat Pengembang untuk kembali ke halaman beranda Aplikasi

Tambahkan Fungsi ke Atribut Header HTML

Selanjutnya, Anda perlu menambahkan fungsi pada atribut Header HTML pada halaman 2 yang menampilkan pesan ketika kolom Nama Belakang tidak berisi nilai

Untuk menambahkan fungsi pada atribut Header HTML pada halaman 2

1. Di halaman beranda Aplikasi, klik 2 - Perbarui Formulir

   Definisi Halaman untuk halaman 2 muncul

2. Di bawah Halaman, klik ikon Edit atribut halaman seperti yang ditunjukkan di

   Halaman Edit muncul

3. Gulir ke bawah ke Tajuk HTML

   Perhatikan bahwa Header HTML sudah berisi skrip. Saat pengguna mengklik tombol Hapus, skrip ini menampilkan pesan berikut

   Would you like to perform this delete action?
   

4. Di Header HTML, gulir ke bawah dan tempatkan kursor Anda setelah tag terakhir

5. Setelah tag terakhir, masukkan skrip berikut

6. Di bagian atas halaman, klik Terapkan Perubahan

   Definisi Halaman untuk halaman 2 - Formulir Pembaruan muncul

Edit Item untuk Memanggil Fungsi

Selanjutnya, Anda perlu mengedit item

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

Untuk mengedit item

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue('P1_FIRST_NAME');"

1. Di bawah Item, klik P2_LAST_NAME

2. Gulir ke bawah ke Elemen

3. Dalam Atribut Elemen Formulir HTML, masukkan yang berikut ini

   onblur="notNull(this);"
   

4. Di bagian atas halaman, klik Terapkan Perubahan

   Definisi Halaman muncul. Selanjutnya, jalankan halaman

Uji Validasi dengan Menjalankan Halaman

Selanjutnya, navigasikan ke halaman 1 dan jalankan halaman tersebut

Untuk menguji validasi

1. Masukkan 1 di bidang Halaman di Definisi Halaman dan klik Buka

   Definisi Halaman untuk halaman 1 muncul

2. Klik ikon Jalankan Halaman di pojok kanan atas

3. Saat aplikasi muncul, klik Buat

   Formulir Pembaruan muncul

4. Posisikan kursor Anda di bidang Nama Belakang, lalu klik Buat. Pesan

   _1 muncul seperti yang ditunjukkan pada

Mengaktifkan dan Menonaktifkan Elemen Formulir

Sementara Oracle Application Express memungkinkan Anda untuk menampilkan item halaman secara kondisional, penting untuk dicatat bahwa halaman harus dikirimkan untuk setiap perubahan pada halaman yang akan dievaluasi. Contoh berikut menunjukkan cara menggunakan JavaScript untuk menonaktifkan elemen formulir berdasarkan nilai elemen formulir lainnya

Pertama, Anda menulis fungsi dan menempatkannya di atribut Header HTML halaman yang berisi formulir pembaruan Anda. Kedua, Anda memanggil fungsi dari item di halaman. Contoh berikut menunjukkan cara menambahkan fungsi JavaScript untuk mencegah pengguna menambahkan komisi kepada karyawan yang tidak berada di Departemen Penjualan (P2_DEPARTMENT_ID = 80)

Topik pada bagian ini meliputi

Tambahkan Fungsi ke Atribut Header HTML

Untuk menambahkan fungsi pada atribut Header HTML pada halaman 2

1. Buka Definisi Halaman untuk halaman 2

2. Di bawah Halaman, klik ikon Edit atribut halaman

   Halaman Edit muncul

3. Gulir ke bawah ke Tajuk HTML

4. Di Header HTML, gulir ke bawah dan tempatkan kursor Anda setelah tag terakhir

5. Setelah tag terakhir, masukkan skrip berikut

6. Klik Terapkan Perubahan

Edit Item untuk Memanggil Fungsi

Langkah selanjutnya adalah mengedit item

Untuk mengedit item

1. Di bawah Item, pilih P2_DEPARTMENT_ID

2. Gulir ke bawah ke Elemen

3. Dalam Atribut Elemen Formulir HTML, masukkan yang berikut ini

   
   
       #TITLE#
       #HEAD#
       
   
   #FORM_OPEN#
   

   _1

4. Klik Terapkan Perubahan

Ubah Item ke Daftar Pilih

Untuk mengubah

1. Di bawah Item, pilih P2_DEPARTMENT_ID

2. Dari daftar Tampilkan Sebagai di bagian Nama, pilih Pilih Daftar

3. Gulir ke bawah ke Daftar Nilai

4. Di bawah Daftar Nilai, tentukan yang berikut ini

   1. Dari Tampilan Null, pilih No

   2. Dalam definisi Daftar Nilai, masukkan

      
      
          #TITLE#
          #HEAD#
          
      
      #FORM_OPEN#
      

      _2

5. Klik Terapkan Perubahan

Tip

Buat Panggilan ke Fungsi disFormItems

Terakhir, Anda perlu membuat panggilan ke fungsi

Untuk membuat panggilan ke fungsi

1. Buka Definisi Halaman untuk halaman 2

2. Di bawah Halaman, klik ikon Edit atribut halaman

   Halaman Edit muncul

3. Temukan bagian Atribut Tampilan

4. Dari Fokus Kursor, pilih Jangan fokuskan kursor

   Memilih Jangan fokuskan kursor mencegah konflik antara JavaScript yang dihasilkan dan JavaScript khusus

5. Gulir ke bawah ke bagian Atribut Badan HTML

6. Di Atribut Badan HTML Halaman, masukkan berikut ini

   
   
       #TITLE#
       #HEAD#
       
   
   #FORM_OPEN#
   

   _3

7. Klik Terapkan Perubahan

8. Jalankan halaman

menunjukkan formulir yang telah diisi. Perhatikan bahwa ID Departemen ditampilkan sebagai daftar pilihan. Perhatikan juga bahwa bidang Komisi Pct tidak tersedia karena ID Departemen adalah Administrasi

Bagaimana cara menambahkan fungsi ke HTML?

Bagaimana cara memulai fungsi dalam HTML?

Bisakah HTML memiliki fungsi?

Apa itu fungsi dalam HTML?