Coretan Sampel JavaScript yang 15 untuk Laman Web Anda

Artikel yang ditulis oleh:
  • Artikel Pilihan
  • Dikemaskini: Sep 23, 2019

JavaScript adalah digunakan di mana-mana dalam talian hari ini - untuk meningkatkan interaktiviti laman web, untuk mengesahkan maklumat, dan / atau untuk meningkatkan 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 dikonfigurasikan dan licin berkod tidak akan melambatkan laman web anda dan merosakkan pelayaran laman keseluruhan. Ini seterusnya menjejaskan kadar pulangan pelawat anda (disebabkan oleh pengalaman pengguna yang buruk) serta kedudukan enjin gelintar (disebabkan oleh kadar sambutan laman web lambat dan bot merangkak). Untuk membantu mengesahkan kes saya di sini, letakkan diri anda di kasut penonton. Sekiranya laman web yang anda kunjungi dimuat secara perlahan, sukar untuk mengemudi, dan secara keseluruhan, tidak menarik - adakah anda 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 memberi banyak faedah dan, seperti yang dinyatakan, ia digunakan oleh majoriti. Titik utama yang saya cuba untuk mendapatkan di sini adalah jangan hanya terus menambah ciri JavaScript ke laman web apabila mereka tidak perlu. Sesetengah laman web memerlukan lebih banyak JavaScript daripada yang lain; sesetengahnya hanya memerlukan sedikit sahaja - Hanya kerana satu laman web yang melakukannya tidak bermakna anda harus melakukan perkara yang sama.

Freebies: 15 Coretan JavaScript Percuma Untuk Laman Web Anda

Sekarang, mari turun ke barang yang anda datang ke sini - di bawah adalah senarai potongan JavaScript 15 yang akan meningkatkan tapak anda dalam fungsi atau penampilan. Kod akan dipecahkan kepada dua bahagian, fail kepala dan badan atau .js. Sekiranya tiada tajuk bahagian diberikan maka tidak diperlukan untuk coretan tertentu.

1. Memahami HTML5 Video

Sampel Pantas

<script type = "text / javascript"> fungsi memahami_video () {return !! document.createElement ('video'). canPlayType; // boolean} jika (! understands_video ()) {// Harus ada pelayar yang lebih tua atau IE. // Mungkin melakukan sesuatu seperti menyembunyikan kawalan HTML / HTML5 tersuai. Atau apapun ... videoControls.style.display = 'none'; } </ script>

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

<script type = "text / javascript"> / ** * Tetapkan Cookie dengan nama dan nilai yang diberikan. * * nama Nama cookie * nilai Nilai kuki * [luput] Tarikh tamat tempoh kuki (lalai: akhir sesi semasa) * [path] Jalan tempat kuki itu sah (lalai: jalan dokumen panggilan) * [ domain] Jika kuki mencukupi * (selamatkan: domain dokumen panggilan) * [selamat] Nilai boolean yang menunjukkan jika penghantaran kuki memerlukan set * penghantaran * fungsi setCookie (nama, nilai, tamat tempoh, jalan, domain, selamat) {document.cookie = name + "=" + escape (value) + ((expires)? "; expires =" + expires.toGMTString (): "") + ((path) "") + ((domain)? "; domain =" + domain: "") + ((selamat)? "; selamat": ""); } </ script> <script type = "text / javascript"> / ** * Dapatkan nilai cookie yang ditentukan. * * nama Nama kuki yang dikehendaki. * * Mengembalikan rentetan yang mengandungi nilai cookie tertentu, * atau batal jika kuki tidak ada. * / function getCookie (nama) {var dc = document.cookie; var prefix = name + "="; var begin = dc.indexOf (";" + awalan); jika (begin == -1) {begin = dc.indexOf (awalan); jika (mula! = 0) pulangan null; } else {begin + = 2; } var end = document.cookie.indexOf (";", bermula); jika (akhir == -1) {end = dc.length; } kembali unescape (dc.substring (mula + prefix.length, akhir)); } </ script> <script type = "text / javascript"> / ** * Menghapuskan cookie yang ditentukan. * * nama nama cookie * [jalan] jalan cookie (mestilah sama seperti jalan yang digunakan untuk membuat cookie) * [domain] domain cookie (harus sama dengan domain yang digunakan untuk membuat cookie) * / delete deleteCookie ( nama, jalan, domain) {if (getCookie (nama)) {document.cookie = name + "=" + ((path)? "; path =" + path: "") + ((domain) = "+ domain:" ") +"; tamat tempoh = Thu, 01-Jan-70 00: 00: 01 GMT "; }} </ script>

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

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

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:

<script type = "text / javascript"> function validateEmail (theForm) {if (/^w+([.-]?w+)*@w+([.-]?w+)*(w{2,3})+$ /.test(theForm.email-id.value)) {return (true); } alert ("Alamat e-mel tidak sah! Sila masukkan semula dengan teliti!"); kembali (palsu); } </ script>

Badan: <form onSubmit = "return validateEmail (this);" tindakan = ""> Alamat E-mel: <input type = "text" name = "emailid" /> <input type = "submit" value = "Submit" /> </ form>

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

<script type = "text / javascript"> fungsi 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 ("kembali palsu"); </ script>

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: <script type = "text / javascript"> writeRandomQuote = function () {var quotes = new Array (); sebut harga [0] = "Tindakan adalah ukuran sebenar kecerdasan."; sebut harga [1] = "Baseball mempunyai kelebihan yang besar terhadap kriket yang lebih cepat berakhir."; petikan [2] = "Setiap matlamat, setiap tindakan, setiap pemikiran, setiap perasaan satu pengalaman, sama ada secara sedar atau tidak dikenali, adalah percubaan untuk meningkatkan tahap ketenangan pikiran seseorang."; sebut harga [3] = "Kepala yang baik dan hati yang baik selalu merupakan kombinasi hebat."; var rand = Math.floor (Math.random () * quotes.length); document.write (petikan [rand]); } writeRandomQuote (); </ script>

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

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

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

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

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

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

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

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: <script type = "text / javascript"> showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // bulan adalah sifar berasaskan var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </ script>

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

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: <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}) /; sementara (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + ''); } var out = return n2 + n3; document.write (keluar); } </ script>

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

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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // lebih banyak pelayar yang patuh standard (mozilla / netscape / opera / IE7) menggunakan window.innerWidth dan window.innerHeight jika (typeof window.innerWidth! = 'undefined') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 dalam mod yang mematuhi piawaian (iaitu dengan dokument yang sah sebagai baris pertama dalam dokumen) lain jika (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // versi lama IE lain {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth, viewportheight = document.getElementsByTagName ('body') [0] .clientHeight} document.write ('<p> Lebar viewport anda' + viewportwidth + 'x' + viewportheight + '</ p>'); // -> </ script>

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

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

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

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

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

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.

Mengenai tetamu WHSR

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