Pernah kepikiran bagaimana cara ubah judul web ketika pindah tab menggunakan Javacsrip DOM Manipulation? Saya rasa gak pernah kepikiran deh wkwkwk, karna ini sebetulnya gak ada untungnya atau gak gunanya sama sekali. Akan tetapi, jika sudah belajar basic Javascript dan tidak tau mau lanjut ke materi mana. Alangkah baiknya kamu mempelajari tentang DOM Manipulation. Contoh nya seperti cara ubah judul web ketika pindah tab atau membuat efek loading website ketika dibuka.
Apa itu Dom Manipulation
Menurut saya, setelah membaca artikel-artikel DOM. DOM merupakan singkatan dari Document Object Model. Yang berarti teknik yang digunakan oleh developer terutama developer Javascript untuk membuat halaman web menjadi lebih interaktif. Itu kalo menurut saya ya, kalo copy pengertiannya nanti kena Plagiarisme heheh.
Mungkin kalian penasaran, apa saja contoh DOM Manipulation ? Berikut contoh dan penggunaanya:
- Window.addEvenListener(‘load’ , () => {aksi}); Ini fungsinya untuk membuat sebuah aksi ketika halaman me-load. Seperti di web ketika kamu masuk atau refress.
- Window.addEvenListener(‘blur’ , () => {aksi}); Ini fungsinya untuk membuat sebuah aksi ketika tab blur atau sedang berada pada tab lain, meng-klik address bar, atau apapun tombol diluar body seperti extensions, side panel, developer tools dan lain-lain. Contohnya pada web ini. Ketika kamu klik tab lain, title atau judul web ini otomatis berubah jadi “Mohon Kembali :(“.
- Window.addEvenListener(‘focus’ , () => {aksi}); Ini merupakan kebalikan dari ‘blur’ yang fungsinya untuk membuat sebuah aksi ketika tab focus atau sedang berada pada halaman ini. Title atau judul websitenya akan berubah menjadi normal kembali secara otomatis.
- Untuk contoh lainnya bisa kamu kunjungi di JavaScript HTML DOM by W3SCHOOL
Cara Ubah Judul Web ketika Pindah Tab di Js
Sebelum memulai, pastikan kamu sudah menyiapkan text editor baik itu Visuak Studio Code, Subime Text atau apapun itu namanya. Berikut cara ubah judul web ketika pindah tab di js:
Buat File HTML
Buatlah sebuah file dengan nama apapun, dan tidak lupa untuk menulis extensi (.)html setelah nama file. Setelah membuat nama file, sekarang kamu buat struktur html sederhana seperti dibawah code di bawah ini atau kamu bisa klik copy langsung. Jika kamu menggunakan Visual Studio Code, bisa langsung klik “!” lalu “tab”. Kamu juga bisa klik gambar dibawah untuk lebih jelas.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Cara ubah judul web ketika pindah tab di js</title>
</head>
<body>
<p>Ini body</p>
</body>
</html>Buat Javascript DOM
Selanjutnya, kamu buatlah script untuk manipulasinya. Kamu bisa menulis setelah tag penutup </p> atau sebelum tag penutup </body> atau buatlah di file terpisah dengan menambahkan isi script dalam tag <script src=”nama_file_js.js”>…</script> . Atau juga seperti yang sudah saya katakan, bisa langsung copy saja.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Cara ubah judul web ketika pindah tab di js</title>
</head>
<body>
<p>Ini body</p>
<script>
const myTitle = document.title;
window.addEventListener('blur' , () => {
document.title = 'Mohon Kembali :(';
})
window.addEventListener('focus' , () => {
document.title = myTitle;
})
</script>
</body>
</html>Berikut penjelasan perbarisnya:
- const myTitle = document.title; Untuk menampung atau mendeklarasikan nilai dari judul web pada saat normal. Dan nilai dari myTitle tidak bisa berubah karna mengunakan “const” bukan let ataupun var.
- Window.addEvenListener(” , () => {}); Metode untuk membuat event pada Window. Dengan memiliki 2 argumen yang terpisah oleh tanda koma. Yang pertama berada dalam tanda petik yang berfungsi untuk menulis jenis eventnya (untuk event lain bisa kamu pelajari di Event listing by Developer Mozzila dan artikel lain). Yang kedua setelah koma adalah function. Function berguna untuk melalukan aksi saat terjadi event pada target “Window”.
- { ….. } Ini adalah bagian terpenting. Dalam body kurung kurawa terdapat isi aksi dari function. Ketika blur(pindah tab), judul nya akan berubah jadi “Mohon Kembali :(“. Dan Ketika focus(kembali ke tab utama), judul akan kembali normal sesuai isi dari “Const myTitle”.
Kesimpulan Ubah Title Web Ketika Pindah Tab di Js
Setelah mengikuti cara ubah title web ketika pindah tab di js, saya rasa anda sudah menguasai javascript :). Memang tidak ada kerennya dari tutorial ini tapi semoga bermanaaf. “Saya harap kamu menulis code ini ketika memesan kopi 80 Ribu di Lobby Hotel sambil lihat orang kaya bekerja” ~ lord said.
Jangan lupa untuk membagikan artikel ini. Dapatkan tutorial coding lain dalam arsip blog dan coding kami.