Penggunaan fungsi DOCUMENT.GETELEMENTSBYTAGNAME pada PHP

Langkah pertama untuk mengetahui client-side-scripting adalah berkenalan dengan Javascript.

Berjumpa lagi dengan gua Hanas Bayu Pratama sebagai mentor web development. Kali ini gua akan membahas mengenai Javascript dan cara penulisannya

Sebelum melanjutkan ada baiknya kalian mengikuti tutorial sebelumnya mengenai Web Development — Pengenalan

Apa pengertian dan fungsi Javascript?

Javascript adalah bahasa client-side-scripting yang berarti kode yang ditulis berada pada bagian client (browser) dan tidak berada di server. Javascript dapat melakukan berbagai interaksi antara halaman website dengan pengguna melalui berbagai fungsi.

Javascript biasanya digunakan untuk membuat pemberitahuan berupa notifikasi atau alert, validasi form, efek, membuat game, animasi, dan hal lainnya yang berhubungan dengan aktivitas pengguna secara langsung.

Contoh pengggunaan Javascript agar website menjadi lebih atraktif adalah toko online seperti Tokopedia, Lazada, dan Bukalapak. Pada halaman utama Tokopedia, kalian pasti menemui lucky egg yang biasanya muncul dan kalian bisa pecahkan telurnya 😁😁😁. Selain itu, toko online pasti terdapat slider atau gambar yang dapat bergerak secara otomatis. Itu semua bisa terjadi karena menggunakan javascript.

SINTAKS (SYNTAX)

Semua bahasa pemrograman pasti mempunyai sintaks, lalu apa sintaks itu? Sintaks adalah aturan penulisan code pada bahasa pemrograman dan setiap bahasa pemrograman memiliki aturan penulisan code masing-masing.

Misalkan bahasa indonesia memiliki aturan penulisan dan pelafalan yang dikenal dengan EYD (Ejaan Yang Disempurnakan). Nah, penulisan dan pelafalan dalam bahasa Indonesia disebut sebagai sintaks bahasa Indonesia.

src: https://apptopia.com/google-play/app/cn.museedu.iden/intelligence

Lalu kita bandingkan sintaks bahasa Indonesia dengan bahasa Inggris atau bahasa lain. Tentu saja berbeda dari segi sintaksnya bukan? Nah bahasa pemrograman juga sama seperti bahasa manusia, kalau kita bandingkan bahasa pemrograman satu dengan yang lain, maka akan berbeda juga sintaksnya.

Meskipun berbeda sintaksnya antara bahasa Indonesia dan Inggris, akan tetapi kalau kita teliti lagi maka akan kita temukan bahwa mereka berdua memiliki kesamaan, yaitu memiliki kata benda, kata sifat, kata keterangan, subjek, predikat, dan objek yang menyusun kalimat.

Nah bahasa pemrograman juga sama, meskipun berbeda sintaksnya, akan tetapi bahasa pemrograman memiliki control flow yang sistemnya sama saja akan tetapi hanya berbeda sintaksnya.

CONTROL FLOW

Control Flow adalah sebuah cara untuk memberi tau program instruksi apa yang harus dijalankan. Control Flow memiliki perulangan (seperti for, foreach, while, dan do while) dan pengkondisian (if, else if,else, dan switch) didalamnya.

https://www.seasiainfotech.com/blog/difference-between-java-and-javascript/

Sebagai contoh kita bandingkan Java dengan Javascript (perlu diketahui bahwa Javascript bukan Java atau bahkan script nya Java 😁😁😁). Meskipun berbeda sintaks nya, akan tetapi keduanya memiliki control flow yang sama.

Lalu bagaimana caranya untuk menulis sintaks Javascript?

1. Internal Javascript jika ditulis pada halaman maka wajib menggunakan tag
   
   

   Dari sintaks diatas, disana terdapat sintaks sebagai berikut:

   1. var →untuk membuat variabel
   2. console.log → untuk menampilkan text,variabel atau boolean(true/false) di console(kalian tinggal klik kanan mouse lalu klik inspect atau ctrl+shift+i dan setelah itu pilih console).
   3. console.log(document) → untuk menampilkan seluruh element HTML di console.

   Kita bisa klik kanan pada mouse, setelah itu klik Inspect atau Ctrl + Shift + I pada keyboard. setelah itu kalian klik panel tab Console.

   External Javascript

   External Javascript adalah file Javascript yang terpisah, artinya file ini ditulis diluar dengan ekstensi file .js. Untuk menggunakannya kita harus mengetikkan src di dalam tag

   
   

   javascript_basic.js

   var x = 2019;var y = 2020;console.log(x);console.log("hello world");console.log("Hai, Nama Saya Hanas, saya adalah pengajar web periode " + x + "-" + y + " di Komandro CCIT FTUI");console.log(document);

   Hasilnya akan sama seperti internal Javascript. Selain itu, Javascript Juga bisa menampilkan dialog box yang disebut pop up box.

   Terdapat 3 jenis pop up box pada javascript, yaitu :

   alert

   Digunakan untuk menerima parameter berisi pesan yang akan dimunculkan pada pop up alertnya. Untuk contoh code javascriptnya bisa dilihat dibawah:

   alert('welcome..');

   Kalian bisa memblok sintaks Javascript sebelumnya lalu tekan “ctrl + /” untuk memberi komentar pada file Javascript kita agar sintaks sebelumnya menjadi command sehingga tidak aktif. Hasilnya akan seperti ini

   //alert('welcome..');

   tara, ini dia hasilnya

   jika alert nya lebih dari 1 maka akan seperti dibawah

   alert('welcome..');
   alert('welcome..');
   alert('welcome..');

   Jika muncul lebih dari 1 kali pop up box pada javascipt, maka browser akan menampilkan teks dengan tanda checklist disebelah kiri. Jika kita klik checklist tersebut lalu tekan OK maka dialog box tersebut tidak akan muncul lagi. Untuk mengulang kita tekan refresh dan tidak perlu checklist pesan tersebut agar dialog box muncul.

   prompt

   Sama seperti alert, prompt juga dapat memunculkan dialog pesan. akan tetapi prompt juga memiliki button ok dan cancel yang jika di klik dapat melakukan aksi yang berbeda.disini juga inputan berupa text box dimana nilai yang kita inputkan akan disimpan kedalam memori Sehingga kita membutuhkan variabel untuk menampung nilai tersebut yang nantinya akan dimunculkan ke dalam dialog box selanjutnya, atau pun di dalam tampilan teks di website.

   var day = parseInt(prompt("input a number of day"));
   if (day) {
    switch (day) {
     case 1:
      alert("Day is Monday");
      break;
     case 2:
      alert("Day is Tuesday");
      break;
     case 3:
      alert("Day is Wednesday");
      break;
     case 4:
      alert("Day is Thursday");
      break;
     case 5:
      alert("Day is Friday");
      break;
     case 6:
      alert("Day is Saturday");
      break;
     case 7:
      alert("Day is Sunday");
      break;
     default:
      alert("Not a valid number");
    }
   } else {
    alert("belum mengisi nomor");
   }

   Proses input nomor
   Hasil
   Hasil apabila tidak mengisi nomor.

   confirm

   Pop Up Box sebuah program biasanya akan menampilkan dialog box yang dimulai dari alert selamat datang, prompt inputan nama, dilanjutkan dengan confirm bahwa user akan memasukkan input lagi atau tidak. Kondisi ini akan terus berulang selama kita menekan tombol OK, dan akan berhenti pada saat konfirmasi kita tekan Cancel. untuk confirm kita menggunakan konsep control flow, khususnya pengkondisian.

   var again = true;
   while (again) {
    var name = prompt('input your name:');
    alert('hello ' + name);
    again = confirm('try again?');
   }
   alert('thank you..');

   Langkah pertama, prompt memasukkan nama.
   Lalu akan muncul alert dengan nama sesuai input.
   Akan muncul prompt untuk mencobanya kembali.
   Hasil apabila kita klik cancel.

   Untuk pop up box dan console.log pada Javascript, biasanya hanya digunakan untuk testing saja, yaitu untuk test code pada Javascript hasilnya sesuai ekspektasi atau tidak. Nah, bagaimana kalau kita berinteraksi dengan element HTML kita? Disinilah konsep dom dimulai.

   DOM (Document Object Model)

   DOM adalah sebuah metode yang dapat memperbolehkan akses dan perubahan suatu konten, struktur, dan style oleh script pada sebuah dokumen HTML.

   Pada metode DOM, setiap element html dipandang sebagai sebuah object. Elemen-elemen pada dokumen html membentuk sebuah object document yang merupakan object dari dokumen html itu sendiri. Dibawah ini adalah representasi HTML DOM dalam model pohon :

   src: https://www.researchgate.net/figure/Example-of-DOM-Node-Tree_fig1_254002847

   Manipulasi DOM

   Metode manipulasi DOM mengacu konten, struktur, dan style pada dokumen html dapat diakses atau bahkan dirubah dengan menggunakan sintaks yang ada dijavascript.

   Akses Element DOM

   Sebelum mulai melakukan manipulasi terhadap element-element DOM, tentunya kita harus terlebih dahulu memilih mana element yang akan kita ubah propertinya. Terdapat beberapa selector yang dapat kita gunakan untuk mengakses element DOM, yaitu:

   saran saya kalian baca terlebih dahulu Web Development Introduction — CSS karena konsep selector Javascript hampir mirip dengan selector css

   getElementById

   Fungsi ini biasanya digunakan untuk mengakses element HTML berdasarkan nilai property id pada element. Fungsi ini hanya bisa digunakan 1 kali dalam 1 dokumen. Apabila terdapat lebih dari satu element dengan id yang sama, maka hanya berfungsi pada element paling atas.

   Untuk contoh code, bisa dilihat dibawah (kali ini saya to the point ya, saya yakin kalian pasti sudah tahu bagaimana cara membuat html jika sudah mengunjungi Web Development Introduction — Belajar HTML)

   Hasil dari getElementById

   Untuk tag

   dapat dijalankan, karena dia berada diatas sebelum tag

   , sedangkan tag

   tidak dapat dijalankan karena attribute id sudah dipakai sebelumnnya. innerHTML sendiri fungsinya digunakan untuk menuliskan text html pada Javascript dan tanda document sebelum selector digunakan untuk menandai halaman HTML yang akan dikenai selector Javascript

   getElementsByTagName

   Fungsi ini digunakan untuk menyeleksi tag pada suatu dokumen html. Berbeda dengan getElementById yang hanya bisa menyeleksi 1 element pada dokumen html, getElementsByTagName dapat juga digunakan untuk menyeleksi banyak elemen dom dan ini terjadi karena selector ini mengandung konsep array.

   Saran saya kalian bisa ke Fundamental Programing — Array agar kalian memahami maksudnya.

   Sekarang kalian bisa melihat contoh dibawah:

   
   
   
   
    
   
   
    
   
     
   Inilah hasil dari selector tag pada javascript
   
     
   Inilah hasil dari selector tag pada javascript
   
     
   Inilah hasil dari selector tag pada javascript
   
     
   Inilah hasil dari selector tag pada javascript
   
    
   
    
   
   

   Nah, untuk menggunakan selector ini kita wajib banget menggunakan control flow agar dapat berjalan. Pada Javascript kita juga dapat menggunakan property css dengan syarat jika properti itu mengandung lebih dari 1 kata maka wajib awal dari kata keduanya huruf besar dan tidak ada spasi antar katanya. Jika kita menjalankan kode diatas, maka hasilnya seperti dibawah ini:

   Hasil Selector Tag

   Lalu kita juga bisa nih, untuk menyeleksi satu element menggunakan selector ini (hapus isi

   Jika kita jalankan, maka hasilnya seperti dibawah:

   tara, ini dia hasilnya

   getElementsByClassName

   Konsepnya sama seperti getElementsByTagName, akantetapi selector ini Dapat menyeleksi attribute class yang ada di element html.

   
   
   
    
   
   
    
   
     
   Ini untuk selector class pada javascript
   
     
   Ini untuk selector class pada javascript
   
     
   Ini untuk selector class pada javascript
   
     
   Ini untuk selector class pada javascript
   
    
   
    
   
   

   Hasilnya sama seperti menggunakan selector getElementsByTagName ya

   querySelector

   Selector ini hanya dapat digunakan untuk element pertama saja, mirip seperti getElementById ya, akan tetapi selector ini tidak hanya id saja yang dipilih, akan tetapi dapat menyeleksi semua tipe selector css dan hanya 1 element dokumen saja yang dapat dipilih. Dibawah ini adalah contoh pengimplementasian querySelector:

   
   
   
    
   
   
    
   
     
   Ini untuk selector querySelector pada javascript
   
     
   Ini untuk selector class pada javascript
   
     
   Ini untuk selector class pada javascript
   
     
   Ini untuk selector class pada javascript
   
    
   
    
   
   

   Hasil query selector.

   querySelectorAll

   Sama seperti querySelector, bedanya dia dapat menyeleksi banyak element html seperti contoh dibawah.

   
   
   
    
   
   
    
   
     
   Ini adalah querySelectorAll javascript
   
     
   Ini adalah querySelectorAll javascript
   
     
   Ini adalah querySelectorAll javascript
   
     
   Ini adalah querySelectorAll javascript
   
    
   
    
   
   

   tara, ini dia hasilnya

   Kalian juga bisa mencoba code dibawah (kalian coba sendiri ya agar kalian bisa mengetahui hasil dari kalian mengetikkannya).

   
   
   
    
    
    
    
   
   
    
   Text ini bisa berubah
   
    
   Tulisan Text ini dapat berubah
   
    Klik ini untuk menampilkan Alert 
    Klik ini untuk merubah text 
    Klik ini untuk memodifikasi text 
    
   
   

   Sekarang mari kita bahas library Javascript yaitu salah satunya JQuery.

   src: https://annexal.com/logoshowcase/fifth/jquery_logo/

   Apa sih JQuery itu?

   JQuery adalah library Javascript yang mana isinya adalah code javascript yang sudah dikembangkan oleh para developer sehingga kita tidak perlu banyak mengetik banyak code. Cukup dengan memanggil fungsi pada JQuery maka kita dapat menggunakannya untuk file kita.

   Apa kelebihan JQuery?

   1. Mudah di pahami.
   2. Kita cukup mengetik sintaks yang pendek untuk melakukan fungsi yang kompleks.
   3. Gratis.
   4. Ringan.

   Bagaimana Cara Menggunakan JQuery ?

   Secara online

   Cara menggunakannya yaitu dengan menghubungkan file html / php dengan link jquery secara langsung. dengan menggunakan cara ini maka JQuery hanya akan berjalan jika laptop kalian terkoneksi dengan internet karena file jquery yang dituju berada di server JQuery.

   Secara Offline

   Cara menggunakannya yaitu dengan mendownload file jquery, setelah itu kalian dapat menghubungkan file html / php dengan file jquery.

   Kemudian mendownload file JQuery bisa klik disini.

   https://jquery.com/download/

   Jika kalian klik kotak yang saya maksud maka akan muncul tampilan seperti dibawah

   https://code.jquery.com/jquery-3.4.1.min.js

   Tenang, itu sebenarnya cuma kodingan jQuery kok, buka virus ataupun malware. kalian tinggal klik kanan mouse, lalu save as kemudian simpan di folder

   untuk menghubungkan jquery sesuaikan tempat folder kalian menyimpan dan nama JQuery nya.

   Lalu bagaimana cara kita menggunakan fungsi yang ada di JQuery?

   Kalian bisa menggunakan fungsi JQuery didalam tag
   
   
   

   Kalau dilihat dari contoh, saya telah membuat element

   yang saya beri nama classnya container dan membuat tombol dengan nama classnya btn

   Kali ini saya akan jelaskan sintaks yang saya pakai untuk menjalankan fungsi pada JQuery.

   $(document).ready(function() {............})

   sintaks diatas digunakan untuk memberitahu bahwa JQuery akan dijalankan pada saat halaman sudah siap diload penuh. lalu aksi JQuery akan dijalankan jika halaman sudah siap.

   $(".btn").click(function() {
      $(".container").toggle()
   });

   Lalu sintaks diatas juga digunakan untuk memberikan aksi/event kepada element yang classnya btn ketika diklik.

   Tampilan sebelum di klik.

   Tampilan sesudah di klik.

   Pada contoh diatas, element yang ditampilkan dan disembunyikan saat tombol diklik adalah element yang memiliki class container.

   Setelah kita mengenal event pada JQuery, sekarang kita lanjut untuk mengenal Effect pada JQuery

   Effect pada javascript banyak jenisnya yaitu :

   1. hide()➡ fungsi ini untuk menyembunyikan element
   2. show()➡ fungsi ini untuk menampilkan element
   3. toggle()➡ fungsi ini perpaduan dari fungsi hide() dan show()
   4. fadeIn()➡ fungsi ini untuk menampilkan element dengan effect memudar
   5. fadeOut()➡fungsi ini untuk menyembunyikan element dengan effect memudar
   6. fadeToggle()➡ fungsi ini perpaduan dari fadeIn() dan fadeOut
   7. slideDown()➡ fungsi ini untuk menampilkan element dengan efek slide
   8. slideUp()➡fungsi ini untuk menyembunyikan element dengan efek slide
   9. slideToggle()➡fungsi ini perpaduan dari slideUp() dan slideDown()
   10. animate()➡fungsi ini untuk membuat efek animasi pada element

   Untuk mencobanya kalian tinggal ubah saja fungsi yang kita buat sebelumnya dengan cara merubah fungsi toggle() pada

   kode php getElementsByClassName querySelector Contoh penggunaan DOM W3School

   Reply 7 0 Chia sẻ