ตัวอย่างโค้ด 15 ฟรี JavaScript สำหรับเว็บไซต์ของคุณ

อัปเดต: 29 เม.ย. 2021 / บทความโดย: WHSR Guest

JavaScript คือ ใช้ทุกที่ออนไลน์ในทุกวันนี้ - เพื่อปรับปรุงการโต้ตอบของเว็บไซต์เพื่อตรวจสอบข้อมูลและ / หรือปรับปรุงมุมมองของเว็บไซต์

JavaScript ปรากฏตัวครั้งแรกใน 1995 และมาไกลตั้งแต่นั้นมาในแง่ของการยอมรับและการใช้งาน ไวยากรณ์ที่ใช้ใน JavaScript ได้รับอิทธิพลอย่างมากจาก C; แต่ Java, Pearl, Python และ Scheme ก็มีส่วนร่วมเช่นกัน

เคล็ดลับการเริ่มต้น JavaScrip: สิ่งที่คุณต้องรู้

สำหรับผู้เริ่มต้นข้อมูลพื้นฐานบางอย่างที่คุณต้องรู้ ได้แก่

  • สามารถปิด JavaScript ได้ในเบราว์เซอร์
  • JavaScript จะทำงานทุกครั้งที่โหลดหน้าเว็บ
  • JavaScript ใช้เวลาโหลดในการเชื่อมต่ออินเทอร์เน็ตที่ช้า
  • JavaScript ยังคงรันอยู่จากหน้าแคช
  • คุณสามารถโฮสต์ JavaScript ภายในหน้าเว็บหรือภายนอกจากไฟล์. js
  • JavaScript แตกต่างจาก Java อย่างสิ้นเชิง

สิ่งสำคัญคือต้องเข้าใจว่า JavaScript จะนำไปสู่ความเสียหายเมื่อใช้งานผิดวิธี

JavaScript ที่กำหนดค่าไม่ดีและมีการเข้ารหัสที่ไม่เป็นระเบียบจะทำให้เว็บไซต์ของคุณช้าลงและทำให้การนำทางไซต์โดยรวมเสียหาย ซึ่งจะส่งผลต่ออัตราการกลับมาของผู้เยี่ยมชมของคุณ (เนื่องจากประสบการณ์ของผู้ใช้ที่ไม่ดี) รวมถึงการจัดอันดับของเครื่องมือค้นหา (เนื่องจากอัตราการตอบกลับเว็บไซต์ที่ช้าและการรวบรวมข้อมูลของบอท) เพื่อช่วยในการตรวจสอบกรณีของฉันที่นี่ให้สวมบทบาทของผู้ดู หากเว็บไซต์ที่คุณเข้าเยี่ยมชมโหลดช้านำทางยากและโดยรวมแล้วไม่น่าสนใจคุณจะกลับไปที่เว็บไซต์หรือไม่ ฉันจะไม่

ด้านล่างเป็นรายการสิ่งเล็ก ๆ ที่ควรพิจารณาเมื่อเพิ่ม JavaScript ใน เว็บไซต์ของคุณ.

  • จำเป็นต้องใช้ JavaScript หรือไม่เพื่อให้เว็บไซต์ทำงานได้อย่างถูกต้องหรือไม่
  • ไซต์จะมีลักษณะอย่างไรหาก JavaScript ถูกบล็อก
  • JavaScript จะเป็นอันตรายต่อประสิทธิภาพของเซิร์ฟเวอร์หรือไม่
  • การเพิ่ม JavaScript จะช่วยย้ายเว็บไซต์ของคุณไปในทิศทางที่คุณต้องการหรือไม่

ไม่ฉันไม่ได้พยายามทำให้คุณกลัวกับประเด็นเหล่านี้

อันที่จริงอย่ากลัวที่จะ ใช้ JavaScript บนเว็บไซต์ของคุณ เนื่องจากให้ประโยชน์มากมายและดังที่ได้กล่าวไปแล้วมันถูกใช้โดยคนส่วนใหญ่ ประเด็นสำคัญที่ฉันพยายามจะข้ามไปที่นี่คือไม่เพียง แต่เพิ่มคุณสมบัติ JavaScript ในไซต์ต่อไปเมื่อไม่จำเป็น บางไซต์ต้องการ JavaScript มากกว่าส่วนที่เหลือ บางคนก็ต้องการน้อยลง - เพียงเพราะไซต์เดียวทำมันไม่ได้หมายความว่าคุณควรทำเช่นเดียวกัน

Freebies: 15 สุดยอดตัวอย่าง JavaScript สำหรับเว็บไซต์ของคุณ

ตอนนี้เรามาดูเนื้อหาที่คุณมาที่นี่ด้านล่างนี้คือรายการตัวอย่าง JavaScript 15 รายการที่จะช่วยปรับปรุงไซต์ของคุณทั้งในด้านการทำงานหรือรูปลักษณ์ โค้ดจะถูกแบ่งออกเป็นสองส่วนคือส่วนหัวและส่วนของไฟล์หรือไฟล์. js หากไม่มีการระบุชื่อหัวข้อก็ไม่จำเป็นสำหรับตัวอย่างข้อมูลนั้น

1 ทำความเข้าใจกับวิดีโอ HTML5

ตัวอย่างรวดเร็ว

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';
}

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างเล็ก ๆ น้อย ๆ นี้จะป้องกันเว็บไซต์ของคุณจากการพยายามแสดงวิดีโอที่เบราว์เซอร์ไม่สามารถรองรับได้ช่วยให้คุณประหยัดแบนด์วิดท์และพลังการประมวลผล

2 คุกกี้ JavaScript

ตัวอย่างรวดเร็ว

/**

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

    }

}

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้มีความยาวเล็กน้อย แต่มีประโยชน์มากมันจะช่วยให้เว็บไซต์ของคุณเก็บข้อมูลในคอมพิวเตอร์ของผู้ดูจากนั้นอ่านในอีกช่วงเวลาหนึ่ง ตัวอย่างนี้สามารถใช้ในหลาย ๆ วิธีเพื่อทำงานที่แตกต่างกัน

3 โหลดรูปภาพของคุณล่วงหน้า

ตัวอย่างรวดเร็ว

var images = new Array();

function preloadImages(){

    for (i=0; i 

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะป้องกันเว็บไซต์ของคุณจากการมีเวลาที่น่าอึดอัดใจเมื่อมันแสดงเพียงส่วนหนึ่งของเว็บไซต์; สิ่งนี้ไม่เพียงดูไม่ดี แต่ยังไม่เป็นมืออาชีพ สิ่งที่คุณต้องทำคือการเพิ่มภาพของคุณไปยังส่วน preloadImages และคุณพร้อมที่จะม้วน

4 การตรวจสอบอีเมล

ตัวอย่างรวดเร็ว

หัว:


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);
}


ร่างกาย: ที่อยู่อีเมล:

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะตรวจสอบว่าที่อยู่อีเมลที่มีรูปแบบถูกต้องป้อนในแบบฟอร์มไม่สามารถรับประกันได้ว่าที่อยู่อีเมลเป็นของจริงไม่มีวิธีตรวจสอบด้วย JavaScript

5 ไม่มีการคลิกขวา

ตัวอย่างรวดเร็ว

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

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะป้องกันไม่ให้ผู้ดูสามารถคลิกขวาบนหน้าของคุณ สิ่งนี้สามารถกีดกันผู้ใช้โดยเฉลี่ยจากการยืมภาพหรือรหัสจากเว็บไซต์ของคุณ

6 แสดงการเสนอราคาแบบสุ่ม

ตัวอย่างรวดเร็ว

หัว:
  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();


ร่างกาย: writeRandomQuote();

ข้อมูลโค้ด JavaScript ทำอะไร?

ตกลงดังนั้นนี่ไม่ใช่ตัวอย่างที่ไซต์ทั้งหมดจะใช้ แต่สามารถใช้เพื่อแสดงมากกว่าราคาแบบสุ่ม คุณสามารถเปลี่ยนเนื้อหาให้เป็นคำพูดสำหรับสิ่งที่คุณต้องการและแสดงรูปภาพหรือข้อความแบบสุ่มที่ใดก็ได้บนไซต์ของคุณ

7 ลิงค์ก่อนหน้า / ถัดไป

ตัวอย่างรวดเร็ว

หน้าก่อน | หน้าต่อไป

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้ดีมากถ้าคุณมีหลายหน้าในบทความหรือบทช่วยสอน จะช่วยให้ผู้ใช้เรียกดูระหว่างหน้าได้อย่างง่ายดาย นอกจากนี้ยังมีขนาดเล็กและน้ำหนักเบาจากมุมมองของทรัพยากร

8 คั่นหน้า

ตัวอย่างรวดเร็ว

เพิ่มในรายการโปรด

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะช่วยให้ผู้ใช้สามารถคั่นหน้าของคุณได้อย่างง่ายดาย สิ่งที่พวกเขาต้องทำคือคลิกที่ลิงก์ คุณสมบัติเล็ก ๆ น้อย ๆ เช่นนี้ที่สามารถเพิ่มประสบการณ์โดยรวมของผู้ชมของคุณ

9 ลิงค์พิมพ์หน้าง่าย

ตัวอย่างรวดเร็ว

พิมพ์หน้า

ข้อมูลโค้ด JavaScript ทำอะไร?

ลิงค์เล็ก ๆ นี้จะช่วยให้มุมมองของคุณพิมพ์หน้าของคุณได้อย่างง่ายดาย มันใช้คุณสมบัติการพิมพ์อย่างรวดเร็วติดตั้งแล้วโดยเบราว์เซอร์ของคุณและไม่มีการใช้ทรัพยากรจนกว่าจะมีการคลิก

10 แสดงวันที่จัดรูปแบบ

ตัวอย่างรวดเร็ว

หัว:
  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);
  }


ร่างกาย: showDate();

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะช่วยให้คุณสามารถแสดงวันที่ปัจจุบันที่ใดก็ได้บนหน้าเว็บของคุณและไม่จำเป็นต้องมีการปรับปรุง เพียงแค่ใส่ในสถานที่และลืมมัน

11 ตัวคั่นจุลภาค

ตัวอย่างรวดเร็ว

หัว:
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);
}


ร่างกาย: addCommas("4550989023");

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะใช้เป็นหลักโดยเว็บไซต์ที่ใช้ตัวเลขบ่อย ตัวอย่างนี้จะทำให้ตัวเลขของคุณเหมือนกันทั่วกระดาน สิ่งที่คุณต้องทำคือคัดลอกบรรทัด body ที่คุณต้องการเพิ่มตัวเลขและแทนที่หมายเลขนั้นด้วยหมายเลขของคุณ

12 รับพื้นที่แสดงผลของเบราว์เซอร์

ตัวอย่างรวดเร็ว

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

//-->

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะช่วยให้คุณรับความกว้างและความสูงของพื้นที่แสดงผลในเบราว์เซอร์มุมมองของคุณ สิ่งนี้จะช่วยให้นักออกแบบสามารถสร้างและใช้จอแสดงผลที่แตกต่างกันตามขนาดของหน้าต่างเบราว์เซอร์ของผู้ใช้

13 เปลี่ยนเส้นทางด้วยตัวเลือกที่ล่าช้า

ตัวอย่างรวดเร็ว

setTimeout( "window.location.href =

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

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างนี้จะช่วยให้คุณเปลี่ยนเส้นทางผู้ดูไปยังหน้าอื่นและมีตัวเลือกในการตั้งค่าความล่าช้า การใช้ตัวอย่างนี้เป็นคำอธิบายที่ค่อนข้างชัดเจนและเป็นเครื่องมือที่มีค่ามากสำหรับการมีเข็มขัดของคุณ

14 ตรวจสอบ iPhone

ตัวอย่าง

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

    }

}

ข้อมูลโค้ด JavaScript ทำอะไร?

ข้อมูลโค้ดนี้จะช่วยให้คุณสามารถตรวจสอบว่าผู้ดูของคุณอยู่ใน iPhone หรือ iPod หรือไม่เพื่อให้คุณสามารถแสดงเนื้อหาที่แตกต่างออกไปได้ ข้อมูลโค้ดนี้มีค่ายิ่งสำหรับตลาดโทรศัพท์มือถือที่มีขนาดใหญ่และเป็นเพียงการเติบโตอย่างต่อเนื่องเท่านั้น

15 พิมพ์ข้อความไปยังแถบสถานะ

ตัวอย่างรวดเร็ว

 
"; 
// --> 

ข้อมูลโค้ด JavaScript ทำอะไร?

ตัวอย่างเล็ก ๆ นี้จะช่วยให้คุณพิมพ์ข้อความไปยังแถบสถานะ คุณสามารถแสดงข่าวล่าสุดหรือสำคัญในพื้นที่ที่จะดึงดูดสายตาของผู้ใช้

อ่านเพิ่มเติม:

เกี่ยวกับ WHSR Guest

บทความนี้เขียนขึ้นโดยผู้สนับสนุนแขก มุมมองของผู้เขียนด้านล่างนี้เป็นของตนเองหรืออาจไม่สะท้อนมุมมองของ WHSR

เชื่อมต่อ: