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

تم التحديث: 29 أبريل 2021 / مقال بقلم: WHSR Guest

إفشاء: WHSR يدعم القارئ. عندما تشتري من خلال روابطنا ، قد نربح عمولة.

جافا سكريبت هي تستخدم في كل مكان على الانترنت هذه الأيام - لتحسين تفاعل موقع الويب ، للتحقق من صحة المعلومات ، و / أو لتحسين آفاق موقع الويب.

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

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

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

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

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

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

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

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

لا ، أنا لا أحاول تخويفك بهذه النقاط.

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

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

الآن ، دعنا ننتقل إلى الأشياء التي جئت إلى هنا من أجلها - فيما يلي قائمة تضم 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';
}

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

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

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

    }

}

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

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

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

عينة سريعة

var images = new Array();

function preloadImages(){

    for (i=0; i 

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

سيمنع هذا المقتطف موقعك من الحصول على هذا الوقت المحرج عندما يعرض جزءًا فقط من الموقع ؛ هذا ليس فقط يبدو سيئا ولكن أيضا غير مهني. كل ما عليك القيام به هو إضافة الصور الخاصة بك إلى قسم 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.

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

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

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

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

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

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

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

عينة سريعة

الصفحة السابقة | الصفحة التالية

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

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

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

عينة سريعة

اضافة الى المفضلة

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

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

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

عينة سريعة

طباعة الصفحة

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

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

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

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

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

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

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

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

12. احصل على مساحة العرض في المتصفح

عينة سريعة

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

//-->

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

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

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

عينة سريعة

setTimeout( "window.location.href =

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

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

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

14. كشف فون

عينة

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

    }

}

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

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

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

عينة سريعة

 
"; 
// --> 

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

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

اقرأ أكثر:

حول WHSR ضيف

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