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

บทความที่เขียนโดย:
  • บทความที่แนะนำ
  • อัปเดต: ก.ย. 23, 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type = "text / javascript"> ฟังก์ชั่น understands_video () {return !! document.createElement ('วิดีโอ') canPlayType; // boolean} if (! understands_video ()) {// ต้องเป็นเบราว์เซอร์รุ่นเก่าหรือ IE // บางทีทำอย่างเช่นซ่อนตัวควบคุม // HTML5 แบบกำหนดเอง หรืออะไรก็ตาม ... videoControls.style.display = 'none'; } </script>

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

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

2 คุกกี้ JavaScript

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

<script type = "text / javascript"> / ** * ตั้งค่าคุกกี้ด้วยชื่อและค่าที่กำหนด * * name ชื่อของคุกกี้ * ค่ามูลค่าของคุกกี้ * [หมดอายุ] วันหมดอายุของคุกกี้ (ค่าเริ่มต้น: สิ้นสุดเซสชันปัจจุบัน) * [เส้นทาง] เส้นทางที่คุกกี้ใช้งานได้ (ค่าเริ่มต้น: เส้นทางของเอกสารที่เรียก) * [ โดเมน] โดเมนที่คุกกี้ใช้งานได้ * (ค่าเริ่มต้น: โดเมนของเอกสารที่เรียก) * [ปลอดภัย] ค่าบูลีนที่ระบุว่าการส่งคุกกี้ต้องใช้การส่ง * ที่ปลอดภัย * / ฟังก์ชั่น setCookie (ชื่อค่าหมดอายุเส้นทางโดเมนปลอดภัย) {document.cookie = name + "=" + escape (ค่า) + ((หมดอายุ)? "; expires =" + expires.toGMTString (): "") + ((เส้นทาง)? "; path =" + พา ธ : "") + ((โดเมน)? "; domain =" + โดเมน: "") + ((ปลอดภัย)? "; ปลอดภัย": ""); } </script> <script type = "text / javascript"> / ** * รับค่าของคุกกี้ที่ระบุ * * ชื่อชื่อของคุกกี้ที่ต้องการ * * ส่งคืนสตริงที่มีค่าของคุกกี้ที่ระบุ * หรือ null หากไม่มีคุกกี้ * / function getCookie (ชื่อ) {var dc = document.cookie; คำนำหน้า var = ชื่อ + "="; var start = dc.indexOf (";" + คำนำหน้า); if (start == -1) {start = dc.indexOf (คำนำหน้า); if (start! = 0) return null; } else {start + = 2; } var end = document.cookie.indexOf (";", เริ่มต้น); if (end == -1) {end = dc.length; } คืน unescape (dc.substring (เริ่มต้น + prefix.length สิ้นสุด)); } </script> <script type = "text / javascript"> / ** * ลบคุกกี้ที่ระบุ * * ชื่อของคุกกี้ * [เส้นทาง] เส้นทางของคุกกี้ (ต้องเหมือนกับเส้นทางที่ใช้ในการสร้างคุกกี้) * โดเมน [โดเมน] ของคุกกี้ (ต้องเหมือนกับโดเมนที่ใช้ในการสร้างคุกกี้) * / function deleteCookie ( ชื่อ, เส้นทาง, โดเมน) {ถ้า (getCookie (ชื่อ)) {document.cookie = ชื่อ + "=" + ((เส้นทาง)? "; path =" + เส้นทาง: "") + (โดเมน)? "; โดเมน = "+ domain:" ") +"; หมดอายุ = Thu, 01-Jan-70 00: 00: 01 GMT "; }} </script>

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

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

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

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

<script type = "text / javascript"> var images = new Array (); ฟังก์ชัน preloadImages () {สำหรับ (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>

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

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

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

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

หัว:

<script type = "text / javascript"> ฟังก์ชั่น validateEmail (theForm) {ถ้า (/^w+(ه.-๑.]w+**[email protected]@@@@@@@@@@@@@+++++++++++++++$$$$$$$$α) /.test(theForm.email-id.value)) {return (true); } alert ("ที่อยู่อีเมลไม่ถูกต้องโปรดป้อนอีกครั้งอย่างระมัดระวัง!"); กลับ (false); } </script>

ร่างกาย: <form onSubmit = "return validateEmail (นี่);" การกระทำ = ""> ที่อยู่อีเมล: <input type = "text" name = "emailid" /> <input type = "submit" ค่า = "ส่ง" /> <input type = "reset" value = "Reset" /> </form>

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

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

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

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

<script type = "text / javascript"> function f1 () {if (document.all) {return false; }} ฟังก์ชัน f2 (e) {if (document.layers || (document.getElementById &! document.all)) {ถ้า (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 = ฟังก์ชั่นใหม่ ("return false"); </ script>

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

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

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

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

หัว: <script type = "text / javascript"> writeRandomQuote = function () {var quote = new Array (); เครื่องหมายคำพูด [0] = "การกระทำเป็นตัวชี้วัดอัจฉริยะที่แท้จริง"; อัญประกาศ [1] = "เบสบอลมีข้อได้เปรียบเหนือจิ้งหรีดที่กำลังจะสิ้นสุดเร็ว"; อัญประกาศ [2] = "ทุกเป้าหมายทุกการกระทำทุกความคิดทุกความรู้สึกประสบการณ์ไม่ว่าจะรู้ตัวหรือไม่รู้ตัวก็คือความพยายามที่จะเพิ่มระดับความสงบของจิตใจ"; เครื่องหมายคำพูด [3] = "สมองที่ดีและจิตใจที่ดีนั้นเป็นส่วนผสมที่น่าเกรงขามเสมอ"; var rand = Math.floor (Math.random () * เครื่องหมายคำพูดความยาว); document.write (คำพูด [แรนด์]); } writeRandomQuote (); </ script>

ร่างกาย: <script type = "text / javascript"> writeRandomQuote (); </script>

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

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

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

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

<a href="javascript:history.back(1)"> หน้าก่อนหน้า </a> | <a href="javascript:history.back(-1)"> หน้าถัดไป </a>

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

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

8 คั่นหน้า

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

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com', 'ชื่อไซต์ของคุณ' )"> เพิ่มในรายการโปรด </a>

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

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

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

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

<a href="javascript:window.print();"> พิมพ์หน้า </a>

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

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

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

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

หัว: <script type = "text / javascript"> function showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // เดือนเป็นศูนย์ var curr_year = d.getFullYear (); document.write (curr_date + "-" + curr_month + "-" + curr_year); } </script>

ร่างกาย: <script type = "text / javascript"> showDate (); </script>

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

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

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

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

หัว: <script type = "text / javascript"> function addCommas (จำนวน) {num + = ''; var n1 = num.split ('.'); var n2 = n1 [0]; var n3 = n1.length> 1? '' + n1 [1]: ''; var temp = / (d +) (d {3}) /; ในขณะที่ (temp.test (n2)) {n2 = n2.replace (temp, '' + ',' + ''); } var out = return n2 + n3; document.write (ออก); } </script>

ร่างกาย: <script type = "text / javascript"> addCommas ("4550989023"); </script>

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

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

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

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

<script type = "text / javascript"> <! - var viewportwidth; var viewportheight; // เบราว์เซอร์ที่สอดคล้องกับมาตรฐานเพิ่มเติม (mozilla / netscape / opera / IE7) ใช้ window.innerWidth และ window.innerHeight ถ้า (typeof window.innerWidth! = 'ไม่ได้กำหนด') {viewportwidth = window.innerWidth, viewportheight = window.innerHeight} / / IE6 ในโหมดที่เป็นไปตามมาตรฐาน (เช่นกับ doctype ที่ถูกต้องเป็นบรรทัดแรกในเอกสาร) อื่นถ้า (typeof document.documentElement! = 'undefined' && typeof document.documentElement.clientWidth! = 'undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight} // รุ่นเก่าของ IE อื่น {viewportwidth = document.getElementsByTagName ('เนื้อหา') [0] ('body') [0] .clientHeight} document.write ('<p> ความกว้างวิวพอร์ตของคุณคือ' + viewportwidth + 'x' + viewportheight + '</p>'); // -> </script>

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

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

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

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

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

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

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

14 ตรวจสอบ iPhone

ตัวอย่าง

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

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

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

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

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

<script language = "javascript" type = "text / javascript"> <! - window.status = "<พิมพ์ข้อความของคุณ>"; // -> </script>

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

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

เกี่ยวกับ WHSR Guest

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