Coretan Sampel JavaScript yang 15 untuk Laman Web Anda

Dikemas kini: 29 Apr 2021 / Artikel oleh: Tetamu WHSR

JavaScript adalah digunakan di mana-mana dalam talian hari ini - untuk meningkatkan interaktiviti laman web, untuk mengesahkan maklumat, dan / atau untuk memperbaiki pandangan laman web.

JavaScript pertama kali muncul di 1995 dan telah datang jauh sejak itu dari segi penerimaan dan bagaimana ia digunakan. Sintaks yang digunakan dalam JavaScript sangat dipengaruhi oleh C; tetapi Java, Pearl, Python, dan Skim juga memainkan peranannya.

Tips Pemula JavaScrip: Apa yang Anda Perlu Tahu?

Sebagai permulaan, beberapa asas yang perlu anda ketahui adalah:

  • JavaScript boleh dimatikan dalam penyemak imbas
  • JavaScript akan berjalan setiap kali halaman dimuatkan
  • JavaScript memerlukan masa untuk memuatkan sambungan internet yang perlahan
  • JavaScript masih berlari dari halaman cache
  • Anda boleh menjadi tuan rumah JavaScript dalam laman web atau secara luaran dari fail .js
  • JavaScript benar-benar berbeza daripada Java

Ia juga penting untuk memahami bahawa JavaScript sebenarnya akan membawa kepada bencana apabila ia digunakan dengan cara yang salah.

JavaScript yang dikonfigurasi dengan buruk dan tidak berfungsi akan melambatkan laman web anda dan merosakkan keseluruhan navigasi laman web. Ini seterusnya mempengaruhi kadar pengembalian pengunjung anda (kerana pengalaman pengguna yang buruk) dan juga kedudukan mesin pencari (kerana kadar tindak balas laman web yang lambat dan perayapan bot). Untuk membantu mengesahkan kes saya di sini, letakkan diri anda dalam pandangan penonton. Sekiranya laman web yang anda lawati dimuat dengan perlahan, sukar dinavigasi, dan secara keseluruhan, tidak menarik - adakah anda akan kembali ke laman web ini? Saya tidak akan.

Berikut adalah senarai kecil perkara yang perlu difikirkan apabila menambah JavaScript kepada laman web anda.

  • Adakah JavaScript diperlukan untuk tapak berfungsi dengan betul?
  • Apa yang akan dilihat oleh laman web jika JavaScript disekat?
  • Adakah JavaScript akan merosakkan prestasi pelayan?
  • Akan menambah bantuan JavaScript memindahkan tapak anda ke arah yang anda mahu ia pergi?

Tidak, saya tidak cuba menakutkan anda dengan perkara ini.

Malah, jangan takut gunakan JavaScript di laman web anda kerana ia memberikan banyak faedah dan, seperti yang disebutkan, ia digunakan oleh golongan majoriti. Perkara utama yang saya cuba sampaikan di sini adalah tidak hanya terus menambahkan ciri JavaScript ke laman web apabila tidak diperlukan. Beberapa laman web memerlukan lebih banyak JavaScript daripada yang lain; ada yang hanya memerlukan lebih sedikit - Hanya kerana satu laman web melakukannya tidak bermaksud anda harus melakukan perkara yang sama.

Freebies: 15 Coretan JavaScript Percuma Untuk Laman Web Anda

Sekarang, mari kita lihat barang-barang yang anda datang ke sini - di bawah ini adalah senarai 15 coretan JavaScript yang akan meningkatkan laman web anda dari segi fungsi atau penampilan. Kod tersebut akan dipecah menjadi dua bahagian, kepala dan badan atau fail .js. Sekiranya tidak ada tajuk bahagian yang diberikan, maka tidak diperlukan untuk potongan tersebut.

1. Memahami HTML5 Video

Sampel Pantas

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

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

Apa coretan JavaScript lakukan?

Coretan kecil ini akan menghalang laman web anda daripada cuba memaparkan video yang penyokongnya tidak dapat menyokong, menjimatkan lebar jalur dan kuasa pemprosesan anda.

2. Cookies JavaScript

Sampel Pantas

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

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

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

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

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

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

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

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

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

    if (end == -1) {

        end = dc.length;

    }

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

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

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

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

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

    }

}

Apa coretan JavaScript lakukan?

Coretan ini agak lama tetapi sangat berguna, ia akan membolehkan laman web anda menyimpan maklumat di komputer penonton kemudian membacanya pada satu masa lagi. Coretan ini boleh digunakan dalam pelbagai cara untuk mencapai tugas yang berbeza.

3. Pramuat imej anda

Sampel Pantas

var images = new Array();

function preloadImages(){

    for (i=0; i 

Apa coretan JavaScript lakukan?

Coretan ini akan menghalang laman web anda daripada mengalami masa yang janggal apabila ia hanya memaparkan sebahagian daripada laman web ini; ini bukan sahaja kelihatan buruk tetapi juga tidak profesional. Apa yang perlu anda lakukan ialah menambah imej anda ke bahagian preloadImages dan anda bersedia untuk melancarkan.

4. Pengesahan E-mel

Sampel Pantas

Ketua:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Badan: Alamat emel:

Apa coretan JavaScript lakukan?

Coretan ini akan mengesahkan bahawa alamat e-mel diformat dengan betul dimasukkan dalam bentuk, ia tidak dapat menjamin bahawa alamat e-mel adalah benar, tidak ada cara untuk memeriksa dengan JavaScript.

5. Tiada klik kanan

Sampel Pantas

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 = new function("return false");

Apa coretan JavaScript lakukan?

Coretan ini akan menghalang penonton daripada dapat mengklik kanan pada halaman anda. Ini boleh menggangu pengguna purata untuk meminjam imej atau kod dari laman web anda.

6. Paparkan Petikan Rawak

Sampel Pantas

Ketua:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Badan: writeRandomQuote();

Apa coretan JavaScript lakukan?

Ok jadi ini bukan coretan bahawa semua laman web akan digunakan tetapi ia boleh digunakan untuk memaparkan lebih daripada sekadar petikan rawak. Anda boleh menukar kandungan ok petikan kepada apa sahaja yang anda mahukan dan mempunyai imej atau teks rawak yang dipaparkan di mana saja di laman web anda.

7. Pautan Sebelumnya / Seterusnya

Sampel Pantas

Halaman Sebelumnya | Muka surat seterusnya

Apa coretan JavaScript lakukan?

Coretan ini hebat jika anda mempunyai banyak halaman pada artikel atau tutorial. Ia akan membolehkan pengguna menyemak imbas antara halaman dengan mudah. Ia juga kecil dan ringan dari sudut pandangan sumber.

8. Bookmark a Page

Sampel Pantas

Tambah ke Kegemaran

Apa coretan JavaScript lakukan?

Coretan ini akan membolehkan pengguna menanda halaman anda dengan mudah; Apa yang perlu mereka lakukan ialah klik pautan tersebut. Ciri-ciri kecil seperti ini yang dapat meningkatkan pengalaman keseluruhan penonton anda.

9. Pautan Halaman Cetakan Mudah

Sampel Pantas

Cetak Halaman

Apa coretan JavaScript lakukan?

Pautan kecil ini akan membolehkan pandangan anda untuk dengan mudah mencetak halaman anda. Ia menggunakan ciri cetak cepat yang telah ditetapkan oleh penyemak imbas anda dan tidak menggunakan sumber sehingga diklik.

10. Tunjukkan Tarikh Berformat

Sampel Pantas

Ketua:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Badan: showDate();

Apa coretan JavaScript lakukan?

Potongan ini akan membolehkan anda memaparkan tarikh semasa di mana sahaja di halaman web anda dan tidak perlu dikemas kini. Hanya letakkannya di tempat dan lupa.

11. Comma Separator

Sampel Pantas

Ketua:
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(out);
}


Badan: addCommas("4550989023");

Apa coretan JavaScript lakukan?

Coretan ini akan digunakan terutamanya oleh laman web yang sering menggunakan nombor. Coretan ini akan memastikan nombor anda kelihatan sama di seluruh papan. Apa yang perlu anda lakukan ialah menyalin garis tubuh di mana anda ingin menambah nombor dan menggantikan nombor di sana dengan nombor anda.

12. Dapatkan Kawasan Paparan Pelayar

Sampel Pantas

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

Apa coretan JavaScript lakukan?

Coretan ini akan membolehkan anda mendapatkan lebar dan ketinggian kawasan paparan dalam penyemak imbas anda. Ini akan memberikan pereka bentuk keupayaan untuk membuat dan menggunakan paparan yang berbeza berdasarkan saiz tetingkap pelayar pengguna.

13. Redirect dengan Kelewatan Pilihan

Sampel Pantas

setTimeout( "window.location.href =

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

Apa coretan JavaScript lakukan?

Potongan ini akan membolehkan anda mengalihkan penonton anda ke halaman lain dan ia mempunyai pilihan untuk menetapkan kelewatan. Penggunaan coretan ini cukup jelas dan ia adalah alat yang sangat berharga untuk mempunyai tali pinggang anda.

14. Mengesan iPhone

Contoh

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";

    }

}

Apa coretan JavaScript lakukan?

Potongan ini akan membolehkan anda mengesan jika penonton anda berada di iPhone atau iPod yang membolehkan anda memaparkan kandungan yang berbeza kepada mereka. Coretan ini tidak ternilai dengan seberapa besar pasaran mudah alih dan ia hanya akan terus berkembang.

15. Cetak Mesej ke Bar Status

Sampel Pantas

 
"; 
// --> 

Apa coretan JavaScript lakukan?

Potongan kecil ini akan membolehkan anda mencetak mesej ke bar status. Anda boleh memaparkan berita terkini atau penting di kawasan yang akan menangkap mata pengguna.

Baca lebih lanjut:

Mengenai tetamu WHSR

Artikel ini ditulis oleh penyumbang tetamu. Tontonan pengarang di bawah ini adalah miliknya sendiri dan mungkin tidak mencerminkan pandangan WHSR.