15 Cuplikan Sampel JavaScript Gratis untuk Situs Web Anda

Artikel ditulis oleh:
  • Menampilkan Artikel
  • Diperbarui: Sep 23, 2019

JavaScript adalah digunakan di mana-mana online hari ini - untuk meningkatkan interaktivitas situs web, untuk memvalidasi informasi, dan / atau untuk meningkatkan tampilan situs web.

JavaScript pertama kali muncul di 1995 dan telah jauh sejak saat itu dalam hal diterima dan bagaimana digunakan. Sintaks yang digunakan dalam JavaScript sangat dipengaruhi oleh C; tetapi Java, Pearl, Python, dan Scheme juga memainkan perannya juga.

Tips Pemula JavaScrip: Apa yang Perlu Anda Ketahui?

Sebagai permulaan, beberapa hal mendasar yang perlu Anda ketahui adalah:

  • JavaScript dapat dimatikan di browser
  • JavaScript akan berjalan setiap kali halaman dimuat
  • JavaScript membutuhkan waktu untuk memuat koneksi internet yang lambat
  • JavaScript masih dijalankan dari halaman dalam cache
  • Anda dapat menginangi JavaScript di halaman web atau secara eksternal dari file .js
  • JavaScript sama sekali berbeda dari Java

Penting juga dipahami bahwa JavaScript benar-benar akan menyebabkan bencana jika digunakan dengan cara yang salah.

JavaScripts dengan kode yang tidak dikonfigurasi dengan baik dan ceroboh akan memperlambat situs web Anda dan merusak keseluruhan navigasi situs. Ini pada gilirannya mempengaruhi tingkat pengembalian pengunjung Anda (karena pengalaman pengguna yang buruk) serta peringkat mesin pencari (karena tingkat respons situs web yang lambat dan perayapan bot). Untuk membantu memvalidasi kasus saya di sini, tempatkan diri Anda pada posisi penonton. Jika situs web yang Anda kunjungi dibuka dengan lambat, sulit dinavigasi, dan secara keseluruhan, tidak menarik - apakah Anda akan kembali ke situs? Saya tidak akan.

Di bawah ini adalah daftar kecil hal-hal untuk dipikirkan saat menambahkan JavaScript ke situs Anda.

  • Apakah JavaScript diperlukan agar situs berfungsi dengan baik?
  • Seperti apa situs itu jika JavaScript diblokir?
  • Apakah JavaScript akan merusak kinerja server?
  • Apakah menambahkan JavaScript akan membantu memindahkan situs Anda ke arah yang Anda inginkan?

Tidak, saya tidak mencoba menakut-nakuti Anda dengan poin-poin ini.

Bahkan, jangan takut gunakan JavaScript di situs web Anda karena memberikan banyak manfaat dan, sebagaimana disebutkan, itu digunakan oleh mayoritas. Poin utama yang saya coba sampaikan di sini adalah jangan hanya terus menambahkan fitur JavaScript ke situs ketika mereka tidak perlu. Beberapa situs memerlukan lebih banyak JavaScript daripada yang lain; beberapa hanya perlu kurang - Hanya karena satu situs melakukannya bukan berarti Anda harus melakukan hal yang sama.

Gratis: Cuplikan JavaScript Keren 15 Untuk Situs Web Anda

Sekarang, mari kita lihat hal-hal yang Anda datangi di sini - di bawah ini adalah daftar cuplikan JavaScript 15 yang akan meningkatkan situs Anda baik dalam fungsionalitas maupun penampilan. Kode akan dipecah menjadi dua bagian, file kepala dan tubuh atau .js. Jika tidak ada judul bagian yang diberikan maka tidak diperlukan untuk cuplikan khusus itu.

1. Memahami Video HTML5

Sampel Cepat

<script type = "text / javascript"> fungsi understands_video () {return !! document.createElement ('video'). canPlayType; // boolean} if (! understands_video ()) {// Harus browser yang lebih lama atau IE. // Mungkin lakukan sesuatu seperti sembunyikan kontrol khusus // HTML5. Atau apa pun ... videoControls.style.display = 'tidak ada'; } </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan kecil ini akan mencegah situs web Anda mencoba menampilkan video yang tidak dapat didukung browser, menghemat bandwidth dan kekuatan pemrosesan.

2. Cookie JavaScript

Sampel Cepat

<script type = "text / javascript"> / ** * Menetapkan Cookie dengan nama dan nilai yang diberikan. * * nama Nama cookie * nilai Nilai cookie * [kedaluwarsa] Tanggal kedaluwarsa cookie (default: akhir sesi saat ini) * [path] Path tempat cookie tersebut valid (default: path dokumen panggilan) * [ domain] Domain tempat cookie valid * (default: domain dokumen panggilan) * [aman] Nilai Boolean yang menunjukkan jika transmisi cookie memerlukan * transmisi aman * / fungsi setCookie (nama, nilai, kedaluwarsa, jalur, domain, aman) {document.cookie = name + "=" + escape (nilai) + ((kedaluwarsa)? "; expires =" + expires.toGMTString (): "") + ((path)? "; path =" + path: "") + ((domain)? "; domain =" + domain: "") + ((aman)? "; secure": ""); } </script> <script type = "text / javascript"> / ** * Mendapat nilai cookie yang ditentukan. * * nama Nama cookie yang diinginkan. * * Mengembalikan string yang berisi nilai cookie yang ditentukan, * atau null jika cookie tidak ada. * / function getCookie (nama) {var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf (";" + awalan); if (begin == -1) {begin = dc.indexOf (prefix); jika (mulai! = 0) mengembalikan nol; } else {begin + = 2; } var end = document.cookie.indexOf (";", begin); if (end == -1) {end = dc.length; } return unescape (dc.substring (begin + prefix.length, end)); } </script> <script type = "text / javascript"> / ** * Menghapus cookie yang ditentukan. * * nama nama cookie * path [path] cookie (harus sama dengan path yang digunakan untuk membuat cookie) * [domain] domain cookie (harus sama dengan domain yang digunakan untuk membuat cookie) * / fungsi deleteCookie ( name, path, domain) {if (getCookie (name)) {document.cookie = name + "=" + ((path)? "; path =" + path: "") + ((domain)? "; domain = "+ domain:" ") +"; kedaluwarsa = Kam, 01-Jan-70 00: 00: 01 GMT "; }} </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini sedikit panjang tetapi sangat berguna, ini akan memungkinkan situs Anda untuk menyimpan informasi di komputer pemirsa kemudian membacanya di waktu lain. Cuplikan ini dapat digunakan dengan berbagai cara untuk menyelesaikan berbagai tugas.

3. Preload gambar Anda

Sampel Cepat

<script type = "text / javascript"> var images = new Array (); function preloadImages () {for (i = 0; i <preloadImages.arguments.length; i ++) {images [i] = Gambar baru (); gambar [i] .src = preloadImages.arguments [i]; }} preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg"); </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan mencegah situs Anda memiliki waktu yang canggung ketika hanya menampilkan sebagian dari situs; ini tidak hanya terlihat buruk tetapi juga tidak profesional. Yang harus Anda lakukan adalah menambahkan gambar Anda ke bagian preloadImages dan Anda siap menggulung.

4. Validasi E-mail

Sampel Cepat

Kepala:

<script type = "text / javascript"> function validateEmail (theForm) {if (/^w+([.-[?w+)*@w+([.-[?w+)*(.w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } lansiran ("Alamat email tidak valid! Silakan masukkan lagi dengan hati-hati !."); return (false); } </script>

Tubuh: <form onSubmit = "return validateEmail (this);" action = ""> Alamat Email: <input type = "text" name = "emailid" /> <input type = "submit" value = "Kirim" /> <input type = "reset" value = "Reset" /> </form>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan memvalidasi bahwa alamat email yang diformat dengan benar dimasukkan dalam formulir, itu tidak dapat menjamin bahwa alamat email itu asli, tidak ada cara untuk memeriksanya dengan JavaScript.

5. Tanpa Klik Kanan

Sampel Cepat

<script type = "text / javascript"> function f1 () {if (document.all) {return false; }} fungsi f2 (e) {if (document.layers || (document.getElementById &! document.all)) {if (e.which == 2 || e.which == 3) {return false; }}} if (document.layers) {document.captureEvents (Event.MOUSEDOWN); document.onmousedown = f1; } else {document.onmouseup = f2; document.oncontextmenu = f1; } document.oncontextmenu = fungsi baru ("return false"); </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan mencegah pengunjung untuk mengklik kanan pada halaman Anda. Ini dapat mencegah rata-rata pengguna dari meminjam gambar atau kode dari situs Anda.

6. Tampilkan Kutipan Acak

Sampel Cepat

kepala: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); quotes [0] = "Tindakan adalah ukuran nyata dari kecerdasan."; quotes [1] = "Baseball memiliki keunggulan besar dibandingkan kriket karena lebih cepat berakhir."; quotes [2] = "Setiap tujuan, setiap tindakan, setiap pemikiran, setiap perasaan yang dialami seseorang, baik secara sadar atau tidak diketahui, adalah upaya untuk meningkatkan tingkat ketenangan pikiran seseorang."; quotes [3] = "Kepala yang baik dan hati yang baik selalu merupakan kombinasi yang hebat."; var rand = Math.floor (Math.random () * quotes.length); document.write (kutipan [rand]); } writeRandomQuote (); </script>

Tubuh: <script type = "text / javascript"> writeRandomQuote (); </script>

Apa yang dilakukan cuplikan JavaScript?

Oke jadi ini bukan cuplikan yang digunakan semua situs tetapi dapat digunakan untuk menampilkan lebih dari sekadar kutipan acak. Anda dapat mengubah konten ok tanda kutip untuk apa pun yang Anda inginkan dan memiliki gambar acak atau teks yang ditampilkan di mana saja di situs Anda.

7. Tautan Sebelumnya / Berikutnya

Sampel Cepat

<a href="javascript:history.back(1)"> Halaman Sebelumnya </a> | <a href="javascript:history.back(-1)"> Halaman Berikutnya </a>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini sangat bagus jika Anda memiliki beberapa halaman pada artikel atau tutorial. Ini akan memungkinkan pengguna menjelajah antar halaman dengan mudah. Ini juga kecil dan ringan dari sudut pandang sumber daya.

8. Tandai halaman

Sampel Cepat

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'Nama Situs Anda')"> Tambahkan ke Favorit </a>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan memungkinkan pengguna untuk menandai halaman Anda dengan mudah; yang harus mereka lakukan adalah mengklik tautannya. Fitur kecilnya seperti ini yang dapat meningkatkan pengalaman keseluruhan pemirsa Anda.

9. Tautan Halaman Cetak Mudah

Sampel Cepat

<a href="javascript:window.print();"> Cetak Halaman </a>

Apa yang dilakukan cuplikan JavaScript?

Tautan kecil ini akan memungkinkan pandangan Anda untuk dengan mudah mencetak halaman Anda. Ini menggunakan fitur cetak cepat yang sudah disiapkan oleh browser Anda dan tidak menggunakan sumber daya sampai diklik.

10. Tampilkan Tanggal Terformat

Sampel Cepat

kepala: <script type = "text / javascript"> function showDate () {var d = Date baru (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // bulan adalah nol berbasis var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

Tubuh: <script type = "text / javascript"> showDate (); </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini memungkinkan Anda untuk menampilkan tanggal saat ini di mana saja di halaman web Anda dan tidak perlu diperbarui. Cukup letakkan di tempatnya dan lupakan.

11. Pemisah Koma

Sampel Cepat

kepala: <script type = "text / javascript"> fungsi addCommas (num) {num + = ''; var n1 = num.split ('.'); var n2 = n1 [0]; var n3 = n1.length> 1? '.' + n1 [1]: ''; var temp = / (d +) (d {3}) /; while (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + '')); } var out = return n2 + n3; document.write (keluar); } </script>

Tubuh: <script type = "text / javascript"> addCommas ("4550989023"); </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan digunakan terutama oleh situs yang sering menggunakan angka. Cuplikan ini akan membuat angka Anda terlihat sama di seluruh papan. Yang harus Anda lakukan adalah menyalin garis tubuh di mana Anda ingin menambahkan nomor dan mengganti nomor di sana dengan nomor Anda.

12. Dapatkan Area Tampilan Peramban

Sampel Cepat

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // peramban yang lebih sesuai standar (mozilla / netscape / opera / IE7) gunakan window.innerWidth dan window.innerHeight if (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 dalam mode standar yang sesuai (yaitu dengan DOCTYPE yang valid sebagai baris pertama dalam dokumen) selain itu jika (ketik document.documentElement! = 'Tidak terdefinisi' && typeof document.documentElement.clientWidth! = 'Tidak terdefinisi' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // versi IE lain yang lebih lama {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidthnameTaglight.y ('body') [0] .clientHeight} document.write ('<p> Lebar viewport Anda adalah' + viewportwidth + 'x' + viewportheight + '</p>'); // -> </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini memungkinkan Anda mendapatkan lebar dan tinggi area tampilan di browser tampilan Anda. Ini akan memberi desainer kemampuan untuk membuat dan menggunakan tampilan yang berbeda berdasarkan ukuran jendela browser pengguna.

13. Redirect dengan Delay Opsional

Sampel Cepat

<script type = "text / javascript"> setTimeout ("window.location.href = 'http://walkerwines.com.au/'", 5 * 1000); </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan memungkinkan Anda untuk mengarahkan pemirsa Anda ke halaman lain dan memiliki opsi untuk mengatur penundaan. Penggunaan potongan ini cukup jelas dan merupakan alat yang sangat berharga untuk dimiliki di ikat pinggang Anda.

14. Deteksi iPhone

Contoh

<script type = "text / javascript"> if ((navigator.userAgent.match (/ iPhone / i)) || (navigator.userAgent.match (/ iPod / i))) {if (document.cookie.indexOf ( "iphone_redirect = false") == -1) {window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR"; }} </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan memungkinkan Anda mendeteksi apakah pemirsa Anda menggunakan iPhone atau iPod yang memungkinkan Anda menampilkan konten yang berbeda kepada mereka. Potongan ini sangat berharga dengan seberapa besar pasar seluler dan hanya akan terus tumbuh.

15. Cetak Pesan ke Bilah Status

Sampel Cepat

<script language = "javascript" type = "text / javascript"> <! - window.status = "<TYPE YOUR MESSAGE>"; // -> </script>

Apa yang dilakukan cuplikan JavaScript?

Cuplikan kecil ini memungkinkan Anda untuk mencetak pesan ke bilah status. Anda dapat menampilkan berita terbaru atau penting di area yang akan menarik perhatian pengguna.

Tentang Tamu WHSR

Artikel ini ditulis oleh seorang kontributor tamu. Pandangan penulis di bawah sepenuhnya miliknya sendiri dan mungkin tidak mencerminkan pandangan WHSR.