15 Cool JavaScript Sample Snippets

المادة التي كتبها:
  • مقالات مميزة
  • تحديث: مارس 06 ، 2012

نظرة عامة سريعة على JavaScript

يتم استخدام JavaScript في كل مكان عبر الإنترنت هذه الأيام - لتحسين تفاعل الموقع ، للتحقق من صحة المعلومات ، و / أو لتحسين توقعات موقع الويب. ظهرت JavaScript لأول مرة في 1995 وقد قطعت شوطًا طويلاً منذ ذلك الحين من حيث قبولها وكيفية استخدامها. بناء الجملة المستخدمة في جافا سكريبت تأثرت بشدة C ؛ لكن Java و Pearl و Python و Scheme لعبت دورها أيضًا.

ما هي JavaScript؟

هناك مقطع YouTube قديم يجيب على السؤال بشكل جيد. هنا يذهب.

نصائح للمبتدئين: ما تحتاج إلى معرفته؟

بالنسبة للمبتدئين ، هناك بعض الأساسيات التي تحتاج إلى معرفتها هي:

  • يمكن إيقاف تشغيل JavaScript في المستعرض
  • سيتم تشغيل JavaScript في كل مرة يتم فيها تحميل الصفحة
  • يستغرق جافا سكريبت بعض الوقت للتحميل على اتصال إنترنت بطيء
  • لا يزال يتم تشغيل JavaScript من الصفحات المخبأة
  • يمكنك استضافة JavaScript داخل صفحة ويب أو خارجيًا من ملف .js
  • جافا سكريبت يختلف تماما عن جافا

من المهم أيضًا أن نفهم أن جافا سكريبت ستؤدي في الواقع إلى كارثة عند استخدامها بطريقة خاطئة. سوف JavaScripts سيئة التكوين وقذرة تبطئ موقع الويب الخاص بك وتضر التنقل في الموقع العام. وهذا بدوره يؤثر على معدل عائد الزوار (بسبب تجربة المستخدم السيئة) وكذلك تصنيفات محرك البحث (بسبب بطء معدلات استجابة موقع الويب). للمساعدة في التحقق من صحة حالتي هنا ، ضع نفسك في مكان عارض. إذا تم تحميل موقع ويب كنت تزوره ببطء ، وكان من الصعب التنقل ، وبشكل عام ، غير جذاب - هل ستعود إلى الموقع؟ لن أفعل.

فيما يلي قائمة صغيرة من الأشياء التي يجب التفكير فيها عند إضافة JavaScript إلى موقع الويب الخاص بك.

  • هل JavaScript مطلوبة للموقع لكي يعمل بشكل صحيح؟
  • كيف سيبدو الموقع إذا تم حظر JavaScript؟
  • هل سيضر JavaScript بأداء الخادم؟
  • هل ستساعد إضافة JavaScript في نقل موقعك في الاتجاه الذي تريده؟

لا ، أنا لا أحاول تخويفك بهذه النقاط. في الواقع ، لا تخف من استخدام جافا سكريبت على مواقع الويب الخاصة بك لأنها توفر فوائد كثيرة ، وكما ذكرنا ، يتم استخدامها من قبل الأغلبية. النقطة الأساسية التي أحاول الوصول إليها هنا هي عدم الاستمرار في إضافة ميزات جافا سكريبت إلى أحد المواقع عندما تكون غير ضرورية. ستحتاج بعض المواقع إلى JavaScript أكثر من باقي المواقع ؛ يحتاج البعض فقط إلى أقل - لمجرد أن أحد المواقع يفعل ذلك لا يعني أنه يجب عليك فعل الشيء نفسه.

المجانية: 15 بارد جافا سكريبت المقتطفات لموقع الويب الخاص بك

مقتطف جافا سكريبت

الآن ، دعنا ننتقل إلى الأشياء التي أتيت إليها هنا - فيما يلي قائمة بمقتطفات 15 JavaScript التي تعمل على تحسين موقعك في أي وظيفة أو مظهر. سيتم تقسيم الرمز إلى قسمين ، ملف الرأس والجسم أو ملف .js. إذا لم يتم إعطاء عنوان القسم ، فلن تكون هناك حاجة لذلك المقتطف المحدد.

فهم فيديو HTML5

عينة سريعة

<script type="text/javascript">

الوظيفة understandands_video () {
return !! document.createElement ('video'). canPlayType؛ // منطقية
}

إذا (! understandands_video ()) {
// يجب أن يكون المتصفح القديم أو IE.
// ربما تفعل شيئا مثل إخفاء العرف
// HTML5 عناصر التحكم. أو أيا كان…
videoControls.style.display = 'none'؛
}

</ script>

ما الذي يفعله مقتطف جافا سكريبت؟

سيمنع هذا المقتطف الصغير موقع الويب الخاص بك من محاولة عرض فيديو لا يمكن للمتصفح دعمه ، مما يوفر لك النطاق الترددي ومعالجة الطاقة.

ملفات تعريف الارتباط JavaScript

عينة سريعة

<script type="text/javascript">

/ **

* يعين ملف تعريف الارتباط مع الاسم والقيمة المعطاة.

*

* اسم اسم ملف تعريف الارتباط

* قيمة قيمة ملف تعريف الارتباط

* [تنتهي صلاحيتها] تاريخ انتهاء صلاحية ملف تعريف الارتباط (الافتراضي: نهاية الجلسة الحالية)

* مسار [path] حيث يكون ملف تعريف الارتباط صالحًا (افتراضي: مسار وثيقة الاستدعاء)

* [النطاق] المجال حيث ملف تعريف الارتباط صالح

* (افتراضي: نطاق وثيقة الاستدعاء)

* [آمنة] قيمة منطقية تشير إلى ما إذا كان إرسال ملفات تعريف الارتباط يتطلب

* نقل آمن

*/

function setCookie (اسم ، قيمة ، منتهية الصلاحية ، مسار ، نطاق ، آمن) {

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

((تنتهي صلاحيتها)؟ "؛ expires =" + expires.toGMTString (): "") +

((مسار) "؛ مسار =" + مسار:؟ "") +

((domain)؟ "؛ domain =" + domain: "") +

((آمن) "؛ الآمن":؟ "")؛

}

</ script>

<script type="text/javascript">

/ **

* الحصول على قيمة ملف تعريف الارتباط المحدد.

*

* اسم اسم ملف تعريف الارتباط المطلوب.

*

* إرجاع سلسلة تحتوي على قيمة لملف تعريف ارتباط محدد ،

* أو خالٍ إذا كان ملف تعريف الارتباط غير موجود.

*/

وظيفة getCookie (الاسم) {

var dc = document.cookie ،

var prefix = name + "="؛

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

إذا (start == -1) {

start = dc.indexOf (prefix)؛

إذا كانت (start! = 0) تُرجع فارغة ؛

{} آخر

start + = 2؛

}

var end = document.cookie.indexOf ("؛"، begin)؛

if (end == -1) {

end = dc.length؛

}

العودة unescape (dc.substring (start + prefix.length، end))؛

}

</ script>

<script type="text/javascript">

/ **

* يحذف ملف تعريف الارتباط المحدد.

*

* اسم اسم ملف تعريف الارتباط

* مسار [path] لملف تعريف الارتباط (يجب أن يكون نفس المسار المستخدم لإنشاء ملف تعريف الارتباط)

* [نطاق] مجال ملف تعريف الارتباط (يجب أن يكون نفس المجال المستخدم لإنشاء ملف تعريف الارتباط)

*/

function deleteCookie (الاسم ، المسار ، المجال) {

if (getCookie (name)) {

document.cookie = name + "=" +

((مسار) "؛ مسار =" + مسار:؟ "") +

((domain)؟ "؛ domain =" + domain: "") +

"؛ expires = Thu و 01-Jan-70 00: 00: 01 GMT"؛

}

}

</ script>

ما الذي يفعله مقتطف جافا سكريبت؟

يعد هذا المقتطف طويلًا ولكنه مفيد جدًا ، حيث سيسمح لموقعك بتخزين المعلومات على جهاز الكمبيوتر الخاص بالمشاهد ثم قراءتها في وقت آخر. يمكن استخدام هذا المقتطف بعدة طرق مختلفة لإنجاز مهام مختلفة.

قبل تحميل الصور الخاصة بك

عينة سريعة

<script type="text/javascript">

var images = New Array ()؛

وظيفة preloadImages () {

لـ (i = 0؛ i <preloadImages.arguments.length؛ i ++) {

الصور [i] = new Image ()؛

الصور [i] .src = preloadImages.arguments [i]؛

}

}

preloadImages ("logo.jpg"، "main_bg.jpg"، "body_bg.jpg"، "header_bg.jpg")؛

</ script>

ما الذي يفعله مقتطف جافا سكريبت؟

سيمنع هذا المقتطف موقعك من الحصول على هذا الوقت المحرج عندما يعرض جزءًا فقط من الموقع ؛ هذا ليس فقط يبدو سيئا ولكن أيضا غير مهني. كل ما عليك القيام به هو إضافة الصور الخاصة بك إلى قسم preloadImages وأنت جاهز لبدء التنفيذ.

التحقق من صحة البريد الإلكتروني

عينة سريعة

رأس:

<script type="text/javascript">
وظيفة التحقق من صحة البريد الإلكتروني (theForm) {
إذا (/ ^ w + ([.-]؟ w +) * @ w + ([.-]؟ w +) * (. w {2,3}) + $ /. test (theForm.email-id.value)) {
العودة (صحيح)؛
}
alert ("عنوان بريد إلكتروني غير صالح! يرجى إدخاله مرة أخرى بعناية!") ؛
العودة (كاذبة)؛
}
</ script>

الجسم:

<form onSubmit = "return validateEmail (this)؛" العمل = "">
عنوان البريد الإلكتروني:
<input type = "text" name = "emailid" />
<إدخال نوع = "إرسال" value = "إرسال" />
<input type = "reset" value = "Reset" />
</ شكل>

ما الذي يفعله مقتطف جافا سكريبت؟

سوف يتحقق هذا المقتطف من صحة إدخال عنوان بريد إلكتروني منسق بشكل صحيح في نموذج ، ولا يمكن أن يضمن أن عنوان البريد الإلكتروني حقيقي ، ولا توجد طريقة للتحقق من ذلك باستخدام JavaScript.

لا انقر بزر الماوس الأيمن

عينة سريعة

<script type="text/javascript">
وظيفة f1 () {
if (document.all) {return false؛ }
}
وظيفة f2 (ه) {
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؛
}
آخر {
document.onmouseup = f2؛
document.oncontextmenu = f1؛
}
document.oncontextmenu = وظيفة جديدة ("return false") ؛
</ script>

ما الذي يفعله مقتطف جافا سكريبت؟

سيمنع هذا المقتطف المشاهد من التمكن من النقر بزر الماوس الأيمن على صفحتك. هذا يمكن أن يثني المستخدم العادي عن استعارة الصور أو الكود من موقعك.

عرض أسعار عشوائية

عينة سريعة

رئيس:

<script type="text/javascript">
writeRandomQuote = function () {
var quotes = new Array ()؛
علامات الاقتباس [0] = "الإجراء هو المقياس الحقيقي للذكاء."؛
علامات الاقتباس [1] = "تتمتع لعبة البيسبول بميزة كبيرة على لعبة الكريكيت بأنها انتهت عاجلاً."؛
علامات الاقتباس [2] = "كل هدف ، كل فعل ، كل فكر ، كل شعور يختبره المرء ، سواء كان ذلك بوعي أو بغير وعي ، هو محاولة لزيادة مستوى راحة البال."؛
علامات الاقتباس [3] = "الرأس الجيد والقلب الجيد هما دائمًا مزيج هائل."؛
var rand = Math.floor (Math.random () * quotes.length)؛
دوكمنت (يقتبس [راند])؛
}
writeRandomQuote ()؛
</ script>

الجسم:

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

ما الذي يفعله مقتطف جافا سكريبت؟

حسنًا ، هذا ليس مقتطفًا تستخدمه جميع المواقع ، ولكن يمكن استخدامه لعرض أكثر من مجرد اقتباسات عشوائية. يمكنك تغيير محتوى موافق على الاقتباس إلى ما تريد ، وعرض صور عشوائية أو نص في أي مكان على موقعك.

السابق / التالي الروابط

عينة سريعة

<a href="javascript:history.back(1)"> الصفحة السابقة </a> | <a href="javascript:history.back(-1)"> الصفحة التالية </a>

ما الذي يفعله مقتطف جافا سكريبت؟

يعد هذا المقتطف رائعًا إذا كان لديك صفحات متعددة في مقالة أو برنامج تعليمي. سيسمح للمستخدم بالتصفح بين الصفحات بسهولة. كما أنها صغيرة وخفيفة الوزن من وجهة نظر الموارد.

إشارة مرجعية صفحة

عينة سريعة

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com'،'Your Site Name')"> إضافة إلى المفضلة </a>

ما الذي يفعله مقتطف جافا سكريبت؟

سيتيح هذا المقتطف للمستخدم وضع إشارة مرجعية على صفحتك بسهولة ؛ كل ما عليهم فعله هو الضغط على الرابط. ميزاته الصغيرة مثل هذه يمكن أن تزيد من تجربة المشاهدين بشكل عام.

من السهل طباعة الصفحة رابط

عينة سريعة

<a href="javascript:window.print()؛"> طباعة الصفحة </a>

ما الذي يفعله مقتطف جافا سكريبت؟

سيسمح هذا الرابط الصغير بعروضك لطباعة صفحتك بسهولة. تستخدم ميزة الطباعة السريعة التي تم إعدادها بالفعل بواسطة متصفحك ولا تستخدم أي موارد حتى يتم النقر فوقها.

إظهار التاريخ المنسق

عينة سريعة

رئيس:

<script type="text/javascript">
وظيفة showDate () {
var d = تاريخ جديد () ؛
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>

ما الذي يفعله مقتطف جافا سكريبت؟

سيتيح لك هذا المقتطف عرض التاريخ الحالي في أي مكان على صفحة الويب الخاصة بك ولا يحتاج إلى تحديث. ببساطة وضعها في مكان ونسيانها.

فاصلة الفواصل

عينة سريعة

رئيس:

<script type="text/javascript">
وظيفة addCommas (الأسطوانات) {
الأسطوانات + = "؛
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؛
دوكمنت (الخروج).
}
</ script>

الجسم:

<script type = "text / javascript"> addCommas ("4550989023")؛ </script>

ما الذي يفعله مقتطف جافا سكريبت؟

سيتم استخدام هذا المقتطف بشكل أساسي بواسطة المواقع التي تستخدم الأرقام كثيرًا. هذا المقتطف سيبقي أرقامك تبدو كما هي في جميع المجالات. كل ما عليك فعله هو نسخ سطر النص حيث تريد إضافة رقم واستبدال الرقم هناك برقمك.

الحصول على منطقة العرض من المستعرض

عينة سريعة

<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 في وضع المعايير المتوافق (على سبيل المثال مع نوع مسار صالح كخط أول في الوثيقة)

آخر إذا كان (typeof document.documentElement! = 'undefined'

&& typeof document.documentElement.clientWidth! =

"غير معرف" && 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> عرض إطار العرض هو' + viewportwidth + 'x' + viewportheight + '</ p>') ؛

// ->

</ script>

ما الذي يفعله مقتطف جافا سكريبت؟

سيتيح لك هذا المقتطف الحصول على عرض وارتفاع مساحة العرض في متصفح طرق العرض. هذا سيمنح المصمم القدرة على إنشاء واستخدام شاشات عرض مختلفة استنادًا إلى حجم نافذة متصفح المستخدم.

إعادة التوجيه مع تأخير اختياري

عينة سريعة

<script type="text/javascript">

setTimeout ("window.location.href =

"http://walkerwines.com.au/" "، 5 * 1000)؛

</ script>

ما الذي يفعله مقتطف جافا سكريبت؟

سيتيح لك هذا المقتطف إعادة توجيه المشاهدين إلى صفحة أخرى ولديه خيار تعيين تأخير. يعتبر استخدام هذا المقتطف واضحًا جدًا وهو أداة قيمة للغاية في حزامك.

كشف فون

عينة

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

ما الذي يفعله مقتطف جافا سكريبت؟

سيتيح لك هذا المقتطف اكتشاف ما إذا كان المشاهد على iPhone أو iPod يسمح لك بعرض محتوى مختلف عليه. هذا المقتطف لا يقدر بثمن بمدى حجم سوق الهاتف المحمول ، وسوف يستمر في النمو فقط.

طباعة رسالة إلى شريط الحالة

عينة سريعة

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

ما الذي يفعله مقتطف جافا سكريبت؟

سيتيح لك هذا المقتطف الصغير طباعة رسالة إلى شريط الحالة. يمكنك عرض أخبار حديثة أو مهمة في منطقة ما ستجذب انتباه المستخدم.

المادة من جانب WHSR ضيف

كتب هذا المقال مساهٍ ضيف. وجهات نظر المؤلف أدناه هي خاصة به ، وقد لا تعكس آراء WHSR.

الحصول على اتصال: