15 Cuplikan Contoh JavaScript Keren

Artikel ditulis oleh:
  • Menampilkan Artikel
  • Diperbarui: 06 Maret 2012

Tinjauan Singkat Tentang JavaScript

JavaScript digunakan di mana-mana online hari ini - untuk meningkatkan interaktivitas situs web, untuk memvalidasi informasi, dan / atau untuk meningkatkan pandangan situs web. Javascript pertama kali muncul di 1995 dan telah berjalan jauh sejak saat itu dalam hal diterima dan bagaimana ia digunakan. Sintaks yang digunakan dalam JavaScript sangat dipengaruhi oleh C; tetapi Java, Pearl, Python, dan Skema juga memainkan perannya juga.

Apa itu JavaScript?

Ada klip YouTube lama yang menjawab pertanyaan dengan baik. Ini dia.

Tips Pemula: 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 untuk memahami bahwa JavaScript benar-benar akan menyebabkan bencana ketika digunakan dengan cara yang salah. JavaScript dengan kode yang tidak dikonfigurasi dengan baik dan tidak rapi akan memperlambat situs web Anda dan merusak navigasi situs secara keseluruhan. Ini pada gilirannya mempengaruhi tingkat pengembalian pengunjung Anda (karena pengalaman pengguna yang buruk) serta peringkat mesin pencari (karena tingkat respons situs web yang lambat). Untuk membantu memvalidasi kasus saya di sini, tempatkan diri Anda sebagai pemirsa. Jika situs web yang Anda kunjungi dimuat dengan lambat, sulit dinavigasi, dan secara keseluruhan, tidak menarik - apakah Anda akan kembali ke situs? Aku tidak akan.

Di bawah ini adalah daftar hal-hal kecil yang perlu dipertimbangkan ketika menambahkan JavaScript ke situs web 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 untuk menggunakan JavaScript di situs web Anda karena menyediakan banyak manfaat dan, seperti yang disebutkan, itu digunakan oleh mayoritas. Poin utama yang saya coba sampaikan di sini adalah jangan terus menambahkan fitur JavaScript ke situs saat tidak diperlukan. Beberapa situs akan membutuhkan lebih banyak JavaScript daripada yang lain; beberapa hanya membutuhkan lebih sedikit - Hanya karena satu situs melakukannya bukan berarti Anda harus melakukan hal yang sama.

Gratis: 15 Cuplikan JavaScript Keren Untuk Situs Web Anda

Cuplikan JavaScript

Sekarang, mari kita ke hal-hal yang Anda datangi di sini - di bawah ini adalah daftar cuplikan JavaScript 15 yang akan menyempurnakan situs Anda baik dalam fungsi maupun tampilannya. Kode akan dipecah menjadi dua bagian, kepala dan badan atau file .js. Jika tidak ada judul bagian yang diberikan, maka itu tidak diperlukan untuk potongan tertentu itu.

Memahami Video HTML5

Sampel Cepat

<Script type = "text / javascript">

function understands_video () {
return !! document.createElement ('video'). canPlayType; // boolean
}

if (! understands_video ()) {
// Harus browser yang lebih tua atau IE.
// Mungkin melakukan sesuatu seperti menyembunyikan kustom
// HTML5 mengontrol. Atau terserah…
videoControls.style.display = 'none';
}

</ Script>

Apa yang dilakukan cuplikan JavaScript?

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

Cookie JavaScript

Sampel Cepat

<Script type = "text / javascript">

/ **

* Menetapkan Cookie dengan nama dan nilai yang diberikan.

*

* Nama Nama cookie

* Nilai nilai dari cookie

* [kadaluarsa] Tanggal kadaluwarsa cookie (default: akhir dari sesi saat ini)

* [path] Path tempat cookie valid (default: jalur dokumen panggilan)

* Domain [domain] tempat cookie valid

* (default: domain dokumen panggilan)

* [Aman] nilai Boolean yang menunjukkan jika transmisi cookie membutuhkan

* transmisi aman

*/

function setCookie (nama, nilai, kedaluwarsa, jalur, domain, aman) {

document.cookie = name + "=" + escape (nilai) +

((berakhir)? "; expires =" + expires.toGMTString (): "") +

((Path) "; path =" + path: "") +

((domain)? "; domain =" + domain: "") +

((Aman) "; aman": "");

}

</ Script>

<Script type = "text / javascript">

/ **

* Mendapat nilai dari cookie yang ditentukan.

*

* nama Nama cookie yang diinginkan.

*

* Mengembalikan string yang berisi nilai cookie tertentu,

* atau null jika cookie tidak ada.

*/

function getCookie (nama) {

var dc = document.cookie;

var prefix = name + "=";

var begin = dc.indexOf (";" + prefix);

if (begin == -1) {

begin = dc.indexOf (awalan);

if (begin! = 0) kembalikan nol;

} Else {

mulai + = 2;

}

var end = document.cookie.indexOf (";", mulai);

if (end == -1) {

end = dc.length;

}

return unescape (dc.substring (awalan + prefix.length, end));

}

</ Script>

<Script type = "text / javascript">

/ **

* Menghapus cookie yang ditentukan.

*

* nama nama cookie

* Jalur [path] dari cookie (harus sama dengan jalur yang digunakan untuk membuat cookie)

* Domain [domain] cookie (harus sama dengan domain yang digunakan untuk membuat cookie)

*/

function deleteCookie (nama, jalur, domain) {

if (getCookie (nama)) {

document.cookie = nama + "=" +

((Path) "; path =" + path: "") +

((domain)? "; domain =" + domain: "") +

"; expires = Thu, 01-Jan-70 00: 00: 01 GMT";

}

}

</ Script>

Apa yang dilakukan cuplikan JavaScript?

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

Muat dulu gambar Anda

Sampel Cepat

<Script type = "text / javascript">

var images = new Array ();

function preloadImages () {

untuk (i = 0; i <preloadImages.arguments.length; i ++) {

images [i] = new Image ();

images [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 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 untuk menggulung.

Validasi E-mail

Sampel Cepat

Kepala:

<jenis skrip = "teks / javascript">
function validateEmail (theForm) {
if (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (.w {2,3}) + $ /. test (theForm.email-id.value)) {
return (true);
}
alert ("Alamat e-mail salah! Silakan masukkan lagi dengan hati-hati !.");
return (false);
}
</ Script>

Tubuh:

<form onSubmit = "return validateEmail (ini);" 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 E-mail yang diformat dengan benar dimasukkan dalam formulir, itu tidak dapat menjamin bahwa alamat E-mail itu nyata, tidak ada cara untuk mengeceknya dengan JavaScript.

Tanpa Klik-Kanan

Sampel Cepat

<jenis skrip = "teks / javascript">
function f1 () {
if (document.all) {return false; }
}
function 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 pemirsa untuk dapat mengklik kanan halaman Anda. Ini dapat mencegah pengguna rata-rata dari meminjam gambar atau kode dari situs Anda.

Tampilkan Kutipan Acak

Sampel Cepat

kepala:

<jenis skrip = "teks / javascript">
writeRandomQuote = function () {
var quotes = new Array ();
quotes [0] = "Tindakan adalah ukuran kecerdasan yang sebenarnya.";
quotes [1] = "Bisbol memiliki keuntungan besar dibandingkan kriket yang berakhir lebih cepat.";
quotes [2] = "Setiap tujuan, setiap tindakan, setiap pikiran, setiap perasaan yang dialami seseorang, entah itu diketahui secara sadar atau tidak sadar, adalah upaya untuk meningkatkan tingkat kedamaian pikiran seseorang.";
quotes [3] = "Kepala yang baik dan hati yang baik selalu merupakan kombinasi yang tangguh.";
var rand = Math.floor (Math.random () * quotes.length);
document.write (tanda kutip [rand]);
}
writeRandomQuote ();
</ Script>

Tubuh:

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

Apa yang dilakukan cuplikan JavaScript?

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

Link 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.

Menandai Halaman

Sampel Cepat

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

Apa yang dilakukan cuplikan JavaScript?

Cuplikan ini akan memungkinkan pengguna untuk mem-bookmark halaman Anda dengan mudah; yang harus mereka lakukan hanyalah mengeklik tautan. Fitur-fitur kecil seperti ini yang dapat meningkatkan keseluruhan pengalaman pemirsa Anda.

Tautan Laman 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 mencetak halaman Anda dengan mudah. Ini menggunakan fitur cetak cepat yang sudah disiapkan oleh browser Anda dan tidak menggunakan sumber daya sampai diklik.

Tampilkan Tanggal Terformat

Sampel Cepat

kepala:

<jenis skrip = "teks / javascript">
function showDate () {
var d = new Date ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // bulan berbasis nol
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 akan memungkinkan Anda untuk menampilkan tanggal saat ini di mana saja di halaman web Anda dan tidak perlu diperbarui. Cukup letakkan di tempatnya dan lupakan saja.

Koma Pemisah

Sampel Cepat

kepala:

<jenis skrip = "teks / javascript">
function 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. Potongan ini akan membuat angka Anda terlihat sama di seluruh papan. Yang harus Anda lakukan hanyalah menyalin garis badan di mana Anda ingin menambahkan nomor dan mengganti nomor di sana dengan nomor Anda.

Dapatkan Area Display dari Browser

Sampel Cepat

<Script type = "text / javascript">

<! -

var viewportwidth;

var viewportheight;

// browser yang lebih sesuai standar (mozilla / netscape / opera / IE7) menggunakan window.innerWidth dan window.innerHeight

if (typeof window.innerWidth! = 'undefined')

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 dalam mode standar compliant (yaitu dengan doctype yang valid sebagai baris pertama dalam dokumen)

else if (typeof document.documentElement! = 'undefined'

&& typeof document.documentElement.clientWidth! =

'undefined' && document.documentElement.clientWidth! = 0)

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// versi IE yang lebih lama

lain

{

viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth,

viewportheight = document.getElementsByTagName ('body') [0] .clientHeight

}

document.write ('<p> Lebar viewport Anda adalah' + viewportwidth + 'x' + viewportheight + '</ p>');

/ / ->

</ Script>

Apa yang dilakukan cuplikan JavaScript?

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

Redirect with Opsional Penundaan

Sampel Cepat

<jenis skrip = "teks / javascript">

setTimeout ("window.location.href =

'http://walkerwines.com.au/' ", 5 * 1000);

</ Script>

Apa yang dilakukan cuplikan JavaScript?

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

Deteksi iPhone

Contoh

<jenis skrip = "teks / 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.

Cetak Pesan ke Status Bar

Sampel Cepat

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

Apa yang dilakukan cuplikan JavaScript?

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

Artikel oleh WHSR Guest

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