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

المادة التي كتبها:
  • مقالات مميزة
  • تم التحديث: Sep 23 ، 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

1. فهم فيديو HTML5

عينة سريعة

<script type = "text / javascript"> function understandands_video () {return !! document.createElement ('video'). canPlayType؛ // boolean} if (! understandands_video ()) {// يجب أن يكون متصفحًا أقدم أو IE. // ربما تفعل شيئًا مثل إخفاء عناصر تحكم HTML5 المخصصة. أو أيا كان ... videoControls.style.display = 'none'؛ } </script>

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

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

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

عينة سريعة

<script type = "text / javascript"> / ** * يعين ملف تعريف الارتباط بالاسم والقيمة المعطاة. * * اسم اسم ملف تعريف الارتباط * القيمة قيمة ملف تعريف الارتباط * [تنتهي صلاحيته] تاريخ انتهاء صلاحية ملف تعريف الارتباط (الافتراضي: نهاية الجلسة الحالية) * [المسار] المسار حيث يكون ملف تعريف الارتباط صالحًا (الافتراضي: مسار مستند الاتصال) * [ المجال] المجال الذي يكون فيه ملف تعريف الارتباط صالحًا (الافتراضي: مجال مستند الاتصال) * [آمن] قيمة منطقية تشير إلى ما إذا كان نقل ملف تعريف الارتباط يتطلب نقلًا آمنًا * / set setGookie آمنًا (الاسم ، القيمة ، انتهاء الصلاحية ، المسار ، المجال ، آمن) {document.cookie = name + "=" + escape (value) + ((expires)؟ "؛ expires =" + expires.toGMTString (): "") + ((path)؟ "؛ path =" + path: "") + ((المجال)؟ "؛ domain =" + domain: "") + ((آمن)؟ "؛ secure": "")؛ } </script> <script type = "text / javascript"> / ** * الحصول على قيمة ملف تعريف الارتباط المحدد. * * اسم ملف تعريف الارتباط المطلوب. * * إرجاع سلسلة تحتوي على قيمة ملف تعريف الارتباط المحدد ، * أو لاغية في حالة عدم وجود ملف تعريف الارتباط. * / وظيفة getCookie (الاسم) {var dc = document.cookie؛ var prefix = name + "="؛ var start = dc.indexOf ("؛" + بادئة) ؛ if (start == -1) {تبدأ = dc.indexOf (بادئة) ؛ إذا (تبدأ! = 0) بإرجاع فارغة. } آخر {start + = 2؛ } var end = document.cookie.indexOf ("؛"، start)؛ if (end == -1) {end = dc.length؛ } إرجاع unescape (dc.substring (start + prefix.length، end))؛ } </script> <script type = "text / javascript"> / ** * حذف ملف تعريف الارتباط المحدد. * * اسم ملف تعريف الارتباط * [مسار] مسار ملف تعريف الارتباط (يجب أن يكون هو نفسه المسار المستخدم لإنشاء ملف تعريف الارتباط) * [مجال] مجال ملف تعريف الارتباط (يجب أن يكون هو نفسه المجال المستخدم لإنشاء ملف تعريف الارتباط) * / وظيفة deleteCookie ( الاسم ، المسار ، المجال) {if (getCookie (الاسم)) {document.cookie = name + "=" + ((path)؟ "؛ path =" + path: "") + ((domain)؟ "؛ domain = "+ مجال:" ") +" ؛ تنتهي صلاحيته = الخميس ، 01-Jan-70 00: 00: 01 GMT "؛ }} </script>

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

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

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

عينة سريعة

<script type = "text / javascript"> var images = new Array ()؛ function preloadImages () {for (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>

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

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

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

عينة سريعة

رأس:

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

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

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

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

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

عينة سريعة

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

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

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

6. عرض اقتباسات عشوائية

عينة سريعة

رئيس: <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>

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

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

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

عينة سريعة

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

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

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

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

عينة سريعة

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

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

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

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

عينة سريعة

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

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

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

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>

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

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

11. فاصل فاصل

عينة سريعة

رئيس: <script type = "text / javascript"> function addCommas (num) {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؛ دوكمنت (الخروج). } </script>

الجسم: <script type = "text / javascript"> addCommas ("4550989023")؛ </script>

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

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

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

عينة سريعة

<script type = "text / javascript"> <! - var viewportwidth؛ فار viewportheight. // أكثر المتصفحات المتوافقة مع المعايير (موزيلا / نتسكيب / أوبرا / 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! = 'undefined' && document.documentElement.clientWidth ! = 0) {viewportwidth = document.documentElement.clientWidth، viewportheight = document.documentElement.clientHeight} // الإصدارات القديمة من IE else {viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth ، viewportheight = ('body') [0] .clientHeight} document.write ('<p> عرض منفذ العرض الخاص بك هو' + viewportwidth + 'x' + viewportheight + '</p>')؛ // -> </script>

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

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

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

عينة سريعة

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

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

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

14. كشف فون

عينة

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

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

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

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

عينة سريعة

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

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

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

حول WHSR ضيف

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