Javascript
Setiap script yang disediakan dibawah ini dilengkapi demo untuk menguji secara langsung masing-masing fungsi yang dihandle dari setiap script.
Script Copy to Clipboard
Menambahkan fungsi tombol copy - paste untuk multi elemen.
Dibawah ini contoh kode HTML untuk praktik membuat tombol dengan fungsi Copy to Clipboard yang bisa digunakan untuk banyak elemen (multi elemen).
Untuk demo disini kita membuat 2 tombol untuk menyalin 2 kode yang berbeda.
Dan sebagai target copy pada demo ini adalah menyalin kode HTML. Karena jika menyalin teks, nantinya informasi yang dijelaskan disini akan terasa tidak lengkap.
<ul style='list-style:none'>
<li>
<button onclick="handyCopier('copy-1')">Copy kode</button>
<div class="content" id="copy-1">
<i class="las la-question-circle"></i>
</div>
<textarea><i class='las la-question-circle'></i></textarea>
</li>
<li>
<button onclick="handyCopier('copy-2')">Copy kode</button>
<div class="content" id="copy-2">
<i class="las la-info-circle"></i>
</div>
<textarea><i class='las la-info-circle'></i></textarea>
</li>
</ul>
<style>
.content {display: none}
</style>Dengan kode HTML diatas akan didapatkan tampilan seperti dibawah ini.
Klik masing-masing tombol untuk demo Copy to Clipboard.
-
Copy kode
-
Copy kode
Perhatikan :
Kolom textarea yang terdapat pada demo diatas hanya tambahan saja sebagai media untuk memperlihatkan format kode yang akan disalin, BUKAN target copy. Kode target copy berada didalam elemen div class='content' sesuai dengan kode HTML demo yang ditampilkan diatas.
Agar kode yang disalin tidak terurai seperti ini :
<i class="las la-info-circle"></i>
Jangan meletakkan kode HTML sebagai target copy didalam elemen <textarea>
Karena elemen <textarea> hanya dikhususkan untuk teks saja, sehingga jika meletakkan kode kedalam elemen tersebut maka kode akan terurai (escaped / parsed.). Disarankan menggunakan elemen selain <textarea> apabila menempatkan kode sebagai target copy.
Kode script Copy to Clipboard:
Berikut ini javascript yang menghandle fungsi copy pada demo diatas, kode script ini siap pakai, tinggal copy-paste saja kedalam template. Letakkan diatas tag </body>
<script>//<![CDATA[
function handyCopier(elementId) {
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
alert("Berhasil disalin :" + aux.value);
document.body.removeChild(aux);
}
//]]></script>Script Add / Remove class
Fungsi tombol menambahkan / menghapus atribut class elemen.
Fungsi add/remove (menambah / menghilangkan) class ini menghandle 2 elemen yang berbeda sekaligus. Namun akan dieksekusi melalui 2 tombol, masing-masing 1 tombol untuk setiap elemen. Berikut ini kode tombol dengan fungsi onclick didalamnya
<button onclick='addClass()'>On</button>
<button onclick='removeClass()'>Off</button>Dibawah ini script yang akan menghandle fungsi add / remove class pada 2 tombol tersebut.
<script>//<![CDATA[
// elemen target
var a = document.querySelector(".elmn1");
var b = document.querySelector(".elmn2");
// fungsi yang menghandle penambahan class elemen
function addClass() {
a.classList.add("class1");
b.classList.add("class2");
}
// elemen target
var a = document.querySelector(".elmn1");
var b = document.querySelector(".elmn2");
// fungsi yang menghandle penghapusan class elemen
function removeClass() {
a.classList.remove("class1");
b.classList.remove("class2");
}
//]]></script>Tekan tombol eksekusi untuk melihat cara penggunaan sekaligus demo efek dari fungsi yang diterapkan oleh script tersebut.
Script Popup Window (Tombol).
Alih-alih membuka tautan dengan meninggalkan halaman saat ini dan membuka tab halaman baru, fungsi ini khusus untuk tombol agar memunculkan jendela baru dihalaman yang sama.
Klik tombol untuk melihat demonya:
Berikut ini markup elemen <button> yang sudah terpasang atribut onclick() didalam tag-nya atau disebut dengan onclick event.
<button onclick='toGoogle()'>Popup Demo</button>
Pada penulisan atribut event onclick='myFunction()'.
Value myFunction() dapat disesuaikan atau diganti dengan URL target seperti pada contoh kode HTML diatas. Ini berfungsi seperti identifier (pengidentifikasi) yaitu untuk mencocokkan teks yang dimasukkan sebagai value di atribut tersebut dengan function yang ditempatkan pada javascript.
Perhatikan baris nomor 2 kolom kode javascript dibawah ini.
Disitu terlihat function menyertakan teks yang sama dengan teks value pada atribut tombol diatas.
<script>
function toMyBlog() {
window.open(
"https://codingtemablogger.blogspot.com/",
"_blank",
"toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=300,width=800,height=600"
);
}
</script>
Sehingga apabila membuat beberapa tombol sejenis dengan target URL yang berbeda, tidak akan terjadi error pada saat tombol dieksekusi. Karena masing-masing tombol akan memiliki script pasangannya masing-masing melalui penyesuaian myFunction() tersebut.
Alasan script diatas hanya khusus untuk tombolAkan tetapi lebih karena :
Elemen tombol <button> tidak memerlukan atribut href yang berisi URL.
Sedangkan elemen <a> pada link, atribut href sifatnya wajib sehingga jika menggunakan script diatas akan menjadikan elemen link harus melepaskan atribut href untuk diletakkan didalam javascript.
CATATAN :
Tidak adanya atribut href pada elemen link mengakibatkan link tersebut tidak dapat di-crawl. Hal tersebut akan merugikan halaman dalam proses peng-index-an.
Lihat detailnya dihalaman : Link tidak dapat di-crawl
Script Popup Window (Link).
Pada elemen <a> link, fungsi onclick event langsung diletakkan didalam elemen. Sehingga tidak lagi menggunakan script terpisah seperti yang diterapkan pada tombol.
Contoh kode elemen link dengan onclick event<a class='pop-link' href='https://codingtemablogger.blogspot.com/' onclick="window.open(this.href, 'windowName', 'width=720, height=720, left=300, top=24, scrollbars, resizable'); return false;" rel='nofollow'>Demo</a>