تصميم موقع ويب لكل من دعم البرنامج النصي JavaScript وليس الدعم

Question

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

في رأيي طريقة واحدة لبدء التفكير في كيفية تصميم مثل هذه المواقع هي اكتشاف JavaScript في الصفحة الرئيسية، وإذا لم يتم تمكين إعادة التوجيه إلى إصدار آخر من موقع الويب الذي لا يقوم برمز JavaScript ويعمل مع HTML النقي (مثل Gmail)

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

ما رأيك بهذا؟ كيف يمكنك تصميم موقع ويب لدعم كلاهما؟

Answer 1

طريقة واحدة للتعامل مع هذا هو:

• أولا، قم بإنشاء الموقع، دون أي جافا سكريبت
• ثم، عندما تكون كل أعمال، أضف تحسينات جافا سكريبت حيث مناسبة

بهذه الطريقة، إذا تم تعطيل JS، فإن إصدار "الأول" من الموقع لا يزال يعمل.

يمكنك أن تفعل بالضبط نفس الشيء مع CSS، بطبيعة الحال - هناك حتى واحد "CSS عارية اليوم"كل يوم، توضح ما تبدو عليه المواقع بدون CSS ^^

مثال واحد ؟

• لديك نموذج HTML القياسي، الذي ينشر البيانات إلى الخادم الخاص بك عند تقديمه، وإعادة إنشاء الصفحة بواسطة الخادم يعرض رسالة مثل "شكرا لتشغيل الإشعال"
• ثم تضيف بعض الأشياء JS + AJAX: بدلا من إعادة تحميل الصفحة بأكملها أثناء تقديم النموذج، فإنك تقوم بطلب AJAX، فقط إرسال البيانات فقط؛ وفي المقابل، يعرض "شكرا على الاشتراك" دون إعادة تحميل الصفحة

في هذه الحالة، إذا تم تعطيل JavaScript، فإن الطريقة الأولى "القياسية" للقيام بالأشياء التي لا تزال تعمل.

هذا (جزء من) ما يسمى تحسين تدريجي

Answer 2

الطريقة المعتادة هي ما يسمى تحسين تدريجي.

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

HTML الأساسي هو دائما هناك للمتصفحات القديمة (أو أولئك الذين لديهم حاصرات البرنامج النصي، على سبيل المثال).

على سبيل المثال نموذج لنشر تعليق قد يبدو هذا:

<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>

ثم يمكنك تحسينه مع جافا سكريبت لجعله ajaxy

$('#myForm').submit(...);

من الناحية المثالية، يجب استخدام اتصال AJAX نفس التعليمات البرمجية مثل post-comment.php - إما عن طريق استدعاء نفس الملف أو عبر include, ، ثم ليس لديك لإرشاد رمز.

Answer 3

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

الشيء الوحيد الذي يجب أن تكون حذرا حول أشكالك: لا تثق في المرشحات في جافا سكريبت، دائما تصفية ذلك مرة أخرى على جانب الخادم، دائما!

Answer 4

استخدام تعزيز تدريجي، دراسة jQuery. لفهمها. يستغرق بعض الوقت حتى تحصل على رأسك حولها. على سبيل المثال فكرتك:

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

كيف تكتشف ما إذا تم تعطيل JavaScript؟ ليس مع جافا سكريبت، بوقيف ...

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

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

بعض الموارد الجيدة التي يجب أن تبدأ:

• فهم تعزيز التدريجي
• تعزيز تدريجي مع جافا سكريبت
• التحسين التدريجي المختبر

Answer 5

أفضل طريقة هي تصميم صفحة تعمل بشكل كاف دون JS. ثم أضف أu003Cscript> block at the bottom of the u003Cbody> section with code like this:

window.onload = function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    document.getElementById('someInputField').onchange = function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
    }
}

إدرس ال jQuery. أمثلة. أنها تظهر الكثير من الأشياء مثل هذا. وهذا ما يسمى "javascript غير مزعج". جوجل لذلك للعثور على المزيد من الأمثلة.

تحرير: إصدار مسج أعلاه هو:

$(document).ready(function() {
    // Do DOM manipulations to add JS functionality here.  For instance...
    $('#someInputField').change(function() {
        // Do stuff here that you can't do in HTML, like on-the-fly validation
   });
});

أضفت هذا فقط لإظهار الشعير السفلي من jQuery مقابل معالجة DOM القياسية. هناك فرق بسيط بين Window.Onload و Document.Ready، تمت مناقشته في مستندات JQuery والبرامج التعليمية.

Answer 6

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