HTML Javascript

Tag <skrip> HTML

Tag HTML <script>digunakan untuk mendefinisikan skrip sisi klien (JavaScript).

Apa maksudnya?

Didalam menuliskan kode javascript didalam file html. Mesti diawali tag pembuka script dan tag penutup script. Agar kode perintah javascript dapat berjalan.

Elemen tersebut <script> berisi pernyataan skrip, atau menunjuk ke file skrip eksternal melalui src atribut. Kegunaan umum JavaScript adalah manipulasi gambar, validasi formulir, dan perubahan konten dinamis.

Untuk memilih elemen HTML, JavaScript paling sering menggunakan 

document.getElementById()metode ini.

Contoh JavaScript ini menulis "Halo JavaScript!" menjadi elemen HTML dengan id="demo":

Contoh JavaScript jika kita ketik code di console

Contoh javascript mengubah konten html

Perubahan setelah di klik tombol Click me! Akan muncul text halo js

Contoh Javascript mengubah gaya

Setelah diklik, akan ada perubahan.

Read More

Browser Object Model dan Document Object Model Javascript

Pendahuluan Browser Object Model dan Document Object Model

Apabila anda sudah mempelajari bahasa JavaScript. Anda sudah memahami bagaimana membuat program dengan bahasa ini. Lantas, bagaimana JavaScript mempunyai pengaruh terhadap aspek front-end, yaitu halaman web? Dalam modul inilah kita akan menemukan peran dari JavaScript dalam membangun halaman web menjadi interaktif.

Pada materi ini, kita akan mempelajari hal baru, yaitu Browser Object Model (BOM) dan Document Object Model (DOM). BOM dan DOM memiliki kemampuan mengubah laman web menjadi dinamis. Hal ini tidak dapat dicapai hanya dengan menggunakan HTML dan CSS saja. Pada akhir modul ini, Anda diharapkan dapat:

1. Mengetahui peranan BOM dalam halaman web.

2. Mengetahui beragam member dari BOM beserta fungsinya.

3. Mengetahui peranan DOM dalam halaman web.

4. Mengetahui struktur dari DOM Tree dalam halaman web.

5. Memahami cara memanipulasi konten website melalui teknik manipulasi DOM.

Cara JavaScript Mengontrol Website dan Browser?

Setelah membaca materi sebelumnya, maka akan muncul pertanyaan “Bagaimana JavaScript mengontrol sebuah website atau browser?” Jawabannya ada dua, dan keduanya akan kita bahas di modul ini, yakni melalui Browser Object Model (BOM) dan Document Object Model (DOM).

Browser Object Model = Model yang bertujuan untuk mengontrol pencarian atau browser

Cara mengontrol Browser menggunakan BOM itu bagaimana?

Dengan memberikan perintah-perintah khusus ke pencarian atau browser.

Contoh ngasih perintah-perintah khusus ke browser bagaimana?

dari sumber https://sko.dev/referensi/javascript/apa-itu-browser-object-model

Perintah-perintah yang digunakan BOM untuk mengontrol browser (disebut Object dalam BOM) yakni sebagai berikut:

1. window: Ini adalah objek global, dan semua yang lain (termasuk dokumen itu sendiri dengan DOM) berada di dalamnya.

console.log(window.innerHeight); //mendapatkan tinggi jendela

2. navigator: Object ini mewakili browser itu sendiri dan memungkinkan kamu mendapatkan informasi tentangnya.

console.log(navigator.userAgent); //mendapatkan informasi tentang browser

3. screen: Representasi dari layar pengguna, memungkinkan kamu mendapatkan informasi seperti resolusi.

console.log(screen.width); //mendapatkan lebar layar

4. screen: Representasi dari layar pengguna, memungkinkan kamu mendapatkan informasi seperti resolusi.

console.log(location.href); //mendapatkan URL halaman saat ini

5. history: Memberikan akses ke riwayat browser.

history.back(); //mengarahkan browser untuk kembali ke halaman sebelumnya

Dari contoh perintah diatas bisa kita perjelas, untuk memberikan perintah melalui atribut mesti ada method nya:

console.log(); adalah methodnya. Sedangkan, (windows)(screen)(location) adalah attributnya.

Adapun beberapa method lainnya seperti:

alert(); yakni Membuat sebuah pop-up dengan pesan teks yang disediakan.

prompt(); yakni Membuat pop-up dengan formulir input text.

confirm(); Membuat pop-up dengan pilihan ‘OK’ atau ‘Cancel’.

Cara kedua adalah DOM. DOM sama seperti BOM. Perbedaannya adalah kita menggunakan global objek bernama document. Melalui global objek ini, kita bisa menangkap seluruh elemen dalam dokumen HTML guna memanipulasi konten HTML melalui method getElementById(). Method ini akan menangkap elemen berdasarkan value dari atribut id. Sebagai contoh, kita mengubah konten elemen HTML berikut ini.

karena cara menggunakan nya hampir sama dengan BOM. Maka kita bisa memberikan perintah-perintah object DOM sebagai berikut: 

document.getElementById('hello').innerHTML = 'I love you';

Perbedaannya jelas, kalau BOM itu menggunakan method dan diikuti attribut, sedangkan DOM itu menggunakan global objek yakni document diikuti method dan attribut berisi value.

Pada contoh yang kita pelajari di atas merupakan contoh yang sangat sederhana. Kita dapat melakukan lebih banyak hal lainnya, seperti mengubah konten elemen, memberikan event tertentu pada elemen, dan sebagainya.

Melalui contoh di atas, kita telah menggunakan console milik browser untuk menjalankan kode program JavaScript. Tentunya jika kita mengembangkan website tidak menggunakan pendekatan seperti ini. Ada cara lain dalam menulis kode JavaScript, yakni melalui berkas HTML secara langsung.

Read More

Menjalankan JavaScript di Website

Kita hanya perlu menggunakan tag <script> sebagai pembuka dan tag </script> sebagai penutup.

Ada dua cara untuk memasukkan kode JavaScript ke dalam berkas HTML kita, yakni secara internal dan external. Hmm, tampaknya terdengar familier? Betul! Hal ini mirip dengan cara menyematkan berkas CSS ke dokumen HTML, bukan?

Andaikan kita ingin meminta input dari user pada sebuah box yang muncul. Input tersebut berisi nama dari user dan akan kita munculkan kembali nama dari user tersebut pada sebuah box. Berikut adalah bentuknya dalam kode JavaScript:

const tamu = prompt('Siapakah Anda?');

alert('Selamat datang ' + tamu + '!');

Internal JavaScript

Pertama, kita akan membahas cara menulis sintaks untuk memasukkan kode JavaScript secara internal terlebih dahulu. Caranya cukup mudah layaknya menulis CSS secara internal pada berkas HTML. Cukup tuliskan kode JavaScript kita diantara tag pembuka dan penutup (<script> dan </script>).

Contohnya adalah sebagai berikut.

 

Cukup sederhana, bukan?

External JavaScript 

Berikutnya kita akan membahas bagaimana memasukkan kode JavaScript ke dalam berkas HTML secara eksternal. Sama seperti memasukkan CSS secara eksternal pada berkas HTML, kita perlu menulis lokasi berkas berekstensi .js (dot js) pada atribut src di dalam tag <script> alias tag pembuka. 

Sebagai contoh, kita akan memisahkan kode JavaScript sebelumnya pada berkas terpisah yang bernama welcome.js. Dengan demikian, untuk memasukkan welcome.js ke dalam berkas index.html dapat dituliskan seperti berikut.

Pada tahap ini, pasti kita akan bertanya-tanya, "Kenapa tidak menggunakan JavaScript internal saja? Padahal kan sama saja dan cara eksternal terkesan lebih kompleks!". Pertanyaan yang bagus!

Jawabannya sama dengan ketika kita ingin mengimplementasikan CSS secara internal dan eksternal. Kita menggunakan implementasi internal jika baris atau kompleksitas kode JavaScript sedikit atau rendah.

Namun, perlahan kita akan dibuat pusing jika jumlah kode JavaScript kita banyak serta memiliki kompleksitas yang tinggi. Salah satu kelebihan implementasi JavaScript secara eksternal adalah memudahkan kita untuk memperbaiki laman web ketika terdapat bugs atau error dan menambah konten ketika diperlukan. Kita pun dapat menggunakan berkas javascript pada multiple dokumen HTML sehingga kita tidak perlu menduplikasi kode. Tentu, hal ini sama seperti berkas CSS.

Contohnya pada halaman utama W3C. Jika kita melihat berkas HTML-nya, terdapat sebuah elemen <script> yang merujuk ke sebuah berkas JavaScript eksternal.

Jika kita telaah kembali, di dalamnya terdapat kode JavaScript yang berisi perintah untuk memanipulasi struktur HTML mereka. Oleh karena itu, sebaiknya kita menggunakan cara JavaScript eksternal supaya dapat digunakan berulang kali.

 

Peletakkan Elemen Script Harus Tepat

Walaupun implementasi JavaScript secara internal maupun eksternal terlihat mirip dengan CSS internal dan eksternal, tetapi terdapat perbedaan mendasar. Perbedaannya adalah kode CSS diletakkan dalam elemen <style> yang berada di dalam elemen <head>, sedangkan kode JavaScript diletakkan dalam elemen <script> yang terdapat di bagian akhir elemen <body>. Mengapa demikian?

Implementasi JavaScript ke dalam HTML akan berbeda jika dibandingkan dengan implementasi CSS. Hal tersebut karena tag <style> harus berada di dalam tag <head> yang membuat elemen-elemen pada dokumen HTML akan bergantung pada konten dalam CSS. Sehingga, langkah paling logis adalah mempersiapkan konten CSS terlebih dahulu.

Berbeda dengan JavaScript, jika website kita tidak memerlukan JavaScript untuk menampilkan halaman web, maka sebaiknya tag <script> diletakkan sebelum bagian akhir dari sebuah berkas HTML. Mengapa demikian? Karena jika meletakkannya di awal, semua konten HTML tidak akan dijalankan sebelum semua kode JavaScript yang berada pada tag <script> selesai dijalankan. Ambil contoh isi berkas HTML berikut:

 

Jika dijalankan pada browser prosesnya akan seperti berikut.

https://d17ivq9b7rppb3.cloudfront.net/original/academy/2021042616411086d8b1ce403a35617d2d11fa30bede97.gif

Jika diperhatikan kembali pada tampilan di atas, kita harus menekan tombol "OK" terlebih dahulu supaya dapat menampilkan konten HTML. Hal ini dikarenakan elemen script dijalankan terlebih dahulu sehingga dokumen HTML belum di-render secara menyeluruh.

Anda harus benar-benar mempertimbangkan posisi peletakan tag <script> pada berkas HTML-nya. Jika tidak hati-hati, maka bisa saja tampilan halaman web menjadi tertunda dan dapat membuat pengalaman yang tidak mengenakkan bagi user yang sedang mengunjungi website kita.

Apakah ini berarti tag <script> harus selalu diletakkan di bagian akhir berkas HTML? Tidak juga. Jika tampilan halaman web Anda bergantung terhadap kode JavaScript, sebaiknya letakkan di bagian yang sesuai.

Read More