Skip to main content

Koleksi kode javascript dan fungsinya

DAFTAR ISIBUKATUTUP
    Koleksi kode javascript dan fungsinya

    JavaScript atau disingkat JS merupakan bahasa pemrograman umum untuk menambahkan interaktivitas pada situs web. Bahasa ini berorientasi objek dan cocok untuk menciptakan efek animasi, form interaktif, game, dan aplikasi web. JavaScript juga digunakan dalam pembuatan aplikasi mobile. Ini adalah bahasa yang serbaguna dan mudah dipelajari, banyak digunakan oleh pengembang web dan mobile.

    Apa itu JavaScript?

    JavaScript adalah bahasa pemrograman diinterpretasi, artinya kode tidak diubah menjadi kode mesin sebelum dijalankan. Browser web menafsirkan kode ini, membuatnya lebih cepat untuk dimulai. Namun, kode JavaScript tidak dapat dioptimalkan untuk mesin tertentu.

    JavaScript adalah bahasa pemrograman yang berorientasi objek. Ini berarti bahwa kode JavaScript dibagi menjadi objek, yang masing-masing memiliki properti dan metode. Properti adalah data yang disimpan dalam objek, sedangkan metode adalah fungsi yang dapat dijalankan pada objek.

    Mengapa JavaScript penting?

    JavaScript penting karena memungkinkan pengembang web menambahkan interaktivitas dinamis pada situs. Juga bisa membuat game dan aplikasi web.

    Cara belajar JavaScript?

    Pelajari JavaScript dengan kursus online, buku, tutorial video, atau bergabung dengan komunitas JavaScript online.

    Penggunaan JavaScript?

    JavaScript digunakan di hampir semua situs web modern, game, dan aplikasi web. Bisa dijalankan di browser, server, dan perangkat mobile.

    Masa depan JavaScript?

    JavaScript terus berkembang dengan munculnya framework dan library baru. Ini akan tetap penting di pengembangan web dan mobile.

    Kesimpulannya, JavaScript penting dan serbaguna. Cocok untuk interaktivitas web, game, dan aplikasi. Mudah dipelajari dan populer di kalangan pengembang web dan mobile. Belajar JavaScript diperlukan bagi yang ingin menjadi pengembang web atau mobile.

    Beberapa kumpulan koleksi Javascript berikut ini merupakan kode JS kenangan semasa saya belajar Wap di Wapbuilder semisal Xtgem Wapka dan semacamnya. Dimana beberapa Platforms tersebut tidak mendukung untuk melakukan hal-hal yang kita inginkan dan salah satu solusinya ialah dengan memanfaatkan Javascript. Tidak terbatas pada Wapbuilder saja namun kode JS ini bekerja pada semua situs yang mendukung JS. Apa sajakah itu? Berikut ini macam-macam contoh namanya saya buat asal-asalan karena saya tidak tahu apa nama tepatnya dalam bahasa pemerograman.

    Link back auto atau Referrer
    Berfungsi buat mendeteksi secara otomatis darimana kunjungan halaman sebelumnya. Misal dari halaman A berkunjung ke halaman B maka pada halaman B otomatis mendeteksinya. Tidak hanya pada halaman lokal tapi juga lintas situs.

    Replace all atribute a
    Menimpa semua atribut a href. Berguna buat mengganti teks dan judul secara kolektif dalam link yang ingin di ganti.

    Replace text or link with Element Id
    Hampir sama fungsinya dengan yang diatas dan dibawah ini hanya saja ada sedikit perbedaan yaitu ini lebih simpel.

    Replace HTML, die to life or hidden
    Sangar ya namanya. Menghidupkan html yang mati menjadi aktif dan mematikan yang hidup dengan selektif berdasarkan Element By Id atau class id. Apapun yang dibungkus dalam class-id dapat di aktifkan/tidak-aktif/tersembunyi sesuai perintah.

    Show url page
    Hanya menampilkan url halaman situs.

    Showing JS anywhere
    Menampilkan sesuatu dimanapun. Berfungsi sebagai pemanggil. Misal meletakan teks/link tertentu di header dan teks/link tersebut dapat di tampilkan dalam post atau di footer atau dimanapun.

    Flying to Mouse
    Gambar atau iklan melayang (posisi dibawah layar) mengikuti mouse.

    Grab Post List Blog Blogger
    Menampilkan 10 daftar postingan (hanya link dan judul) blog Blogspot orang lain di situs/blog lain. Hampir sama dengan fitur Gadget di Blogger hanya saja ini memuat konten lebih cepat dibanding fitur tersebut.

    Loading Results
    Menampilkan Loading ketika halaman belum selesai terbuka secara sempurna. Script ini sangat bagus buat menyembunyikan link download yang ingin disembunyikan agar sulit di grab oleh situs lain. Bila dipasang pada situs kita begitu loading selesai link disembunyikan akan muncul namun ketika situs lain menggunakannya akan loading terus menerus, link download yang disembunyikan tidak akan terbuka.

    Only Show Year
    Script pendek untuk menampilkan Tahun secara otomatis yang biasanya dipasang pada kaki halaman dengan JS, © 2020 Misalnya.

    Show Hidden or Open Close
    Semacam Read More atau Baca Selengkapnya. Berfungsi memotong sebagian dari tulisan yang panjang. JS ini biasa digunakan buat menyembunyikan deskripsi pada grabing dimana biasanya deskripsi tersebut tidak banyak berguna buat dibaca namun sebagian lagi ada juga yang ingin membacanya sehingga pengunjung bisa memilih untuk Show or Hidden atau Open or Close.


    Download Semua JS di-atas, All in One!

    Sederhana semoga berguna. Buat sobat yang mau ambil silakan download diatas. Mohon maaf harus di download karena saya rada alergi kalau memasang/melihat kode berserakan di dalam posting hehe.


    Kode script untuk tampilkan/sembunyikan konten apapun


    Kode script untuk tampilkan/sembunyikan konten apapun

    Tampilkan dan Sembunyikan (show/hide) identik dengan Buka dan Tutup (open/close). Sederhananya konten apapun yang ingin ditampilkan dan disembunyikan dapat menggunakan kode ini. Umumnya yang sering kita lihat pada setiap situs bagian Sidebar atau Navigasinya rata2 menggunakan metode buka tutup dan rata2 kodenya mirip2 seperti ini.

    Dibawah ini contoh button yang apabila di klik konten akan terbuka dan di klik sekali lagi akan menutup.

    <button onclick="kontenSaya()">Tampilkan/Sembunyikan</button>

    <div id="kontainer" class="konten">
    Konten disini.
    </div>

    Button diatas hanya berfungsi bila memasang Javascript dibawah ini.

    <script>//<![CDATA[ 
    function kontenSaya(){
    var x = document.getElementById("kontainer");
    if (x.className === "konten"){
    x.className += " hide";
    }
    else
    {
    x.className = "konten";
    }
    //]]></script>

    Tanda kutip " dan hide sengaja diberi jarak satu spasi agar tidak mempengaruhi class 'konten'. Misal ".konten" memiliki width:90%, dengan tidak memberi spasi pada "hide" dia akan mempengaruhi ".konten" bisa2 seolah berubah menjadi width:100%.

    Fungsi //<![CDATA[  bertujuan agar tanda kutip (") tidak berubah menjadi tanda petik (')

    Class: "kontainer, hide, konten", bisa diubah sesuai selera.

    Pasang JS diatas ke paling bawah dalam Template, dibagian atas </body>

    Javascript diatas baru akan berfungsi setelah menambahkan CSS dibawah ini.

    <style>
    .konten{
    height:0;
    visibility:hidden;
    overflow:auto;
    transition:0.5s
    }
    .konten.hide{
    height:auto;
    visibility:visible
    }
    </style>

    Jika digunakan di Blogger sebaiknya pakai "visibility: hidden" jangan "display: none". Mengapa?
    1. Agar mudah dirender oleh sistem. Terkadang ada beberapa sistem yang menghapus DIV jika mendapati display:none.
    2. Agar tidak memberatkan font yang berujung bikin situs jadi berat. Terkadang Font kesulitan mendeteksi teks jika terdapat display:none.
    3. Agar dapat di crawl/index mesin telusur. Terkadang JS akan berubah menjadi link yang berpotensi jadi broken link.

    Namun jika ingin memakai css "display", begini cssnya. Kalau pakai css ini, css visibility diatas tidak usah dipakai.

    <style>
    .konten{
    display:none
    }
    .konten.hide{
    display:block
    }
    </style>

    Ini hanya css inti, tentu saja dapat ditambah lagi, misal:

    .konten{
    width..
    padding..
    margin..
    dll.
    }

    Jika menggunakan Blogger, Pasang css ke bagian daerah <skin>. Semoga bermanfaat!



    Cara membuat kode script JavaScript pengalih halaman


    Cara membuat kode script JavaScript pengalih halaman atau redirect page.

    Dengan script ini kita bisa mengalihkan satu domain ke domain lain (berguna untuk subdomain gratis yang tak bisa diutak-atik), atau dari halaman lain ke halaman lain, baik dalam sesama host (tempat/web/blog) maupun ke host lain.

    Misalnya mengalihkan alamat web/blog "A" ke web/blog "B".

    Atau mengalihkan url post Blog A ke url post di Blog B.

    Cara kerjanya adalah ketika url post Blog A di-klik akan teralihkan ke url post di Blog B.

    Secara default kode JavaScript pengalihan halaman seperti berikut ini:

    <script type='text/javascript'>
    var d='https://jaeyjoke.blogspot.com';
    d=d.replace(/.*\/\/[^\/]*/, '');
    location.href = 'https://jaeyzone.blogspot.com' + window.location.pathname;
    </script>

    Jika dibaca, script diatas kurang lebih berbunyi: menimpa/mengalihkan https://jaeyjoke.blogspot.com ke lokasi https://jaeyzone.blogspot.com

    Kode diatas hanya berfungsi untuk mengalihkan dari satu domain/subdomain ke domain/subdomain lainnya.

    Untuk mengalihkan dari satu url ke url lainnya, misalnya https://jaeyjoke.blogspot.com/2022/30/jaey-tamvan.html ke lokasi https://jaeyzone.blogspot.com/2022/30/jaey-cool.html maka tinggal ubah saja alamat pada kode default diatas.

    Sekali lagi, itu hanya berlaku untuk pengalihan satu url saja.

    Lalu bagaimana ketika ingin mengalihkan banyak url dengan alamat berbeda-beda, tentu kita tidak mungkin membuat kode sebanyak-banyaknya, seumpama url yang akan dialihkan ada 300 buah, masa iya kita membuat kode sampai 300 buah juga, tentu tidak.

    Untuk dapat mengalihkan banyak url kita perlu menambahkan Kode/Tag pendeteksi url halaman atau disebut juga kode untuk menampilkan url halaman.

    Kode script untuk menampilkan url halaman secara umum tidak kita bahas disini.

    Disini kita akan membahas Tag menampilkan url halaman di Blogger saja.

    Di Blogger, Tag global untuk menampilkan url halaman adalah <data:blog.url/>
    Memasang scriptnya boleh ditempatkan dimana saja dalam template.

    Dan, Tag khusus untuk menampilkan url post adalah <data:post.url/>
    Dan ini memasang scriptnya hanya ditempat tertentu saja.

    Silakan pilih salah satu sesuai keperluan, anggap saja kita sepakat memilih ini <data:blog.url/>

    Tag <data:blog.url/> jika dimasukkan kedalam JavaScript perlu diubah sedikit menjadi + data:blog.url + dan tanda petik (') diubah menjadi &#39; tujuannya agar kodenya selaras.

    <script type='text/javascript'>
    var d=&#39;+ data:blog.url +&#39;;
    d=d.replace(/.*\/\/[^\/]*/, &#39;&#39;);
    location.href = &#39;https://jaeyzone.blogspot.com&#39; + window.location.pathname;
    </script>

    Jika dibaca, script diatas kurang lebih berbunyi: url apapun yang ada di blog ini silakan timpa memenjadi alamat https://jaeyzone.blogspot.com dan alihkan ke lokasi https://jaeyzone.blogspot.com

    Seumpama script diatas dipasang ke dalam template di https://jaeyjoke.blogspot.com maka url lokal yang berawalan 'jaeyjoke' pada blog tersebut akan berubah menjadi 'jaeyzone' ketika di-klik, hanya url lokal saja yang berubah, seumpama ada url lain misal url facebook.com, dll diblog tersebut, tidak ikut berubah.

    Script diatas dapat dipasang ke dalam template diantara <head>..disini..</head>. Cara Tambahkan CSS dan HTML di Template Blogger

    Script JavaScript redirect page

    Selesai..

    Perkiraan kegunaan dari JavaScript pengalih halaman:

    1. Kebetulan https://jaeyjoke.blogspot.com ini di blokir oleh FB, tidak boleh dibagikan ke FB, dengan alasan melanggar ketentuan komunitas FB, menurutnya kata JOKE pada subdomain tersebut mirip artinya dengan hoax, jadi dianggap penyebar hoax. Diakali dengan short-link tidak bisa, satu-satunya cara memang harus berganti domain/subdomain tapi jika "malas atau alasan lain" maka saya rasa metode pengalihan ini dapat dimanfaatkan untuk mengatasi domain yang diblokir FB. Dengan cara membuat blog baru dan tempatkan kode diatas di blog baru tersebut (tapi belum saya coba).

    2. Kebetulan juga saya menggabungkan 3 blog menjadi satu. Dengan memanfaatkan kode pengalihan ini, visitor dari blog lainnya dapat ikut diarahkan ke blog ini, artinya kita tidak akan kehilangan visitor dari mesin pencari.

    3. Seumpama Blogspot tutup atau karena hal lain dan "kita" berpindah ke platform lain atau memiliki host pribadi, saya rasa kode pengalihan ini juga dapat dimanfaatkan namun dengan cara pemasangan yang berbeda, blog yang sudah tutup misalnya biasanya url-postnya akan tetap tersimpan dalam waktu tertentu di pencarian Google dan tidak benar-benar dihapus dalam waktu tertentu, cara pengalihan ini hanya berlaku jika menggunakan domain berbayar. Kita berasumsi blog lama dan blog baru memiliki format url berbeda sehingga diperlukan pengalihan.

    4. Ketiga hal diatas berlaku untuk dari satu blog ke blog lain, namun jika hanya ingin melakukan pengalihan internal kita tidak memerlukan kode diatas karena khusus pengalihan internal sudah disiapkan oleh Blogger. Semisal untuk pengalihan 404, broken-link, dll. Cara Membuat Pengalihan Khusus Di Blogger

    Catatan: Saya hanya belajar kode secara otodidak, jadi harap maklum seumpama kodenya tidak sesuai penulisan JavaScript yang benar, yang saya tau kodenya berfungsi dengan baik.



    Comments