ตัวอย่างตัวอย่าง JavaScript CoolNumber 15

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

ภาพรวมอย่างรวดเร็วใน JavaScript

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

JavaScript คืออะไร?

มีคลิป YouTube เก่า ๆ ตอบคำถามดีๆ นี่ไป

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

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

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

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

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

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

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

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

JavaScript Snippet

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

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

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

<script type="text/javascript">

ฟังก์ชั่น understands_video () {
return !! document.createElement ('วิดีโอ'). canPlayType; // บูลีน
}

if (! understands_video ()) {
// ต้องเป็นเบราว์เซอร์รุ่นเก่าหรือ IE
// อาจจะทำอะไรที่เหมือนกำหนดซ่อนเอง
// HTML5 ควบคุม หรืออะไรก็ตาม ...
videoControls.style.display = 'none';
}

</ script>

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

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

คุกกี้ JavaScript

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

<script type="text/javascript">

/ **

* ตั้งค่าคุกกี้ที่มีชื่อและค่าที่กำหนด

*

* ชื่อชื่อคุกกี้

* value ค่าของคุกกี้

* [หมดอายุ] วันหมดอายุของคุกกี้ (ค่าเริ่มต้น: สิ้นสุดเซสชันปัจจุบัน)

* [เส้นทาง] เส้นทางที่คุกกี้ถูกต้อง (ค่าเริ่มต้น: เส้นทางของเอกสารการโทร)

* [โดเมน] โดเมนที่คุกกี้ถูกต้อง

* (ค่าเริ่มต้น: โดเมนของเอกสารการโทร)

* [ปลอดภัย] ค่าบูลีนระบุว่าการส่งคุกกี้ต้องการ a

* การส่งผ่านแบบปลอดภัย

*/

ฟังก์ชัน setCookie (ชื่อค่าหมดอายุเส้นทางโดเมนปลอดภัย) {

document.cookie = ชื่อ + "=" + หนี (ค่า) +

(หมดอายุ)? "; expires =" + expires.toGMTString (): "") +

((เส้นทาง) "; เส้นทาง =" เส้นทาง +: "") +

(โดเมน)? "; domain =" + domain: "") +

((รักษาความปลอดภัย) "; การรักษาความปลอดภัย": "");

}

</ script>

<script type="text/javascript">

/ **

* ได้รับค่าของคุกกี้ที่ระบุ

*

* ชื่อชื่อของคุกกี้ที่ต้องการ

*

* ส่งกลับสตริงที่มีค่าของคุกกี้ที่ระบุ,

* หรือเป็นค่า null หากไม่มีคุกกี้

*/

ฟังก์ชัน getCookie (ชื่อ) {

var dc = document.cookie;

คำนำหน้า var = ชื่อ + "=";

var begin = dc.indexOf (";" + คำนำหน้า);

if (begin == -1) {

เริ่มต้น = dc.indexOf (คำนำหน้า);

if (begin! = 0) return null;

} else {

เริ่ม + = 2;

}

var end = document.cookie.indexOf (";" เริ่มต้น);

if (end == -1) {

end = dc.length;

}

return unescape (dc.substring (เริ่ม + prefix.length สิ้นสุด));

}

</ script>

<script type="text/javascript">

/ **

* ลบคุกกี้ที่ระบุ

*

* ชื่อชื่อคุกกี้

* เส้นทาง [path] ของคุกกี้ (ต้องเหมือนกับเส้นทางที่ใช้สร้างคุกกี้)

โดเมน * ของโดเมนเนมของคุกกี้ (ต้องเหมือนกับโดเมนที่ใช้สร้างคุกกี้)

*/

ฟังก์ชัน deleteCookie (ชื่อเส้นทางโดเมน) {

ถ้า (getCookie (ชื่อ)) {

document.cookie = ชื่อ + "=" +

((เส้นทาง) "; เส้นทาง =" เส้นทาง +: "") +

(โดเมน)? "; domain =" + domain: "") +

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

}

}

</ script>

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

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

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

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

<script type="text/javascript">

var images = new อาร์เรย์ ();

preloadImages ฟังก์ชัน () {

สำหรับ (i = 0; i <preloadImages.arguments.length; i ++) {

ภาพ [i] = รูปภาพใหม่ ();

ภาพ [i] .src = preloadImages.arguments [i];

}

}

preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

</ script>

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

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

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

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

หัว:

<script type="text/javascript">
function validateEmail (theForm) {
ถ้า (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. ทดสอบ (theForm.email-id.value)) {
กลับ (true);
}
การแจ้งเตือน ("ที่อยู่อีเมลไม่ถูกต้อง! โปรดป้อนอีกครั้งอย่างระมัดระวัง!");
กลับ (false);
}
</ script>

ร่างกาย:

<form onSubmit = "return validateEmail (นี่);" การกระทำ = "">
ที่อยู่ E-mail:
<input type = "text" name = "emailid" />
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Reset" />
</ form>

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

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

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

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

<script type="text/javascript">
ฟังก์ชั่น f1 () {
if (document.all) {return false; }
}
ฟังก์ชั่น 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 = ฟังก์ชั่นใหม่ ("return false");
</ script>

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

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

แสดงคำพูดแบบสุ่ม

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

หัว:

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

ร่างกาย:

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

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

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

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

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

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

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

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

คั่นหน้า

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

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

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

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

ลิงก์ของหน้าพิมพ์ง่าย

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

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

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

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

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

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

หัว:

<script type="text/javascript">
ฟังก์ชั่น 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 ทำอะไร?

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

ตัวคั่นด้วยเครื่องหมายจุลภาค

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

หัว:

<script type="text/javascript">
ฟังก์ชั่น 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 ที่คุณต้องการเพิ่มตัวเลขและแทนที่หมายเลขนั้นด้วยหมายเลขของคุณ

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

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

<script type="text/javascript">

<! -

var viewportwidth;

var viewportheight;

/ / เบราว์เซอร์ที่รองรับมาตรฐานมากขึ้น (mozilla / netscape / opera / IE7) ใช้ window.innerWidth และ window.innerHeight

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

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 ในโหมดที่เป็นไปตามมาตรฐาน (เช่นกับ doctype ที่ถูกต้องเป็นบรรทัดแรกในเอกสาร)

else if (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 ('body') [0] .clientWidth,

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

}

document.write ('<p> ความกว้างของ viewport คือ' + viewportwidth + 'x' + viewportheight + '</ p>');

/ / ->

</ script>

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

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

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

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

<script type="text/javascript">

setTimeout ("window.location.href ="

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

</ script>

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

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

ตรวจสอบ iPhone

ตัวอย่าง

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

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

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

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

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

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

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

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

เกี่ยวกับ WHSR Guest

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