ملعب HTML وCSS وJavaScript

طريقة الاستخدام

1. بدّل بين محررات HTML وCSS وJavaScript بالأزرار أعلاه واكتب كودك.
2. تتحدّث المعاينة تلقائيًا عند توقفك عن الكتابة، أو أطفئ ذلك وانقر «تشغيل».
3. تحقق من وحدة التحكم للناتج والأخطاء، ثم انقر «تنزيل HTML» لحفظ صفحتك.

شرح الخيارات

البيئة المعزولة

تعمل المعاينة في بيئة معزولة لا يمكنها قراءة ملفات تعريف الارتباط أو التخزين الخاصين بهذا الموقع ولا يمكنها فتح مربعات حوار.

وحدة التحكم

تُظهر ناتج console.log وwarn وerror إضافة إلى الأخطاء غير الملتقطة بأرقام الأسطر، وتحتفظ بآخر 200 إدخال.

التنزيل

يدمج الأجزاء الثلاثة في ملف HTML واحد، مع الأنماط في وسم style والنص البرمجي في نهاية body.

كيف تتركّب الصفحة

تُدمج المحررات الثلاثة في مستند واحد، بهذا الترتيب. والتخطيط نفسه هو ما تحصل عليه عند النقر على «تنزيل HTML»، إلا أن النص البرمجي الصغير الذي يرسل ناتج وحدة التحكم إلى الصفحة تحت المعاينة لا يدخل في التنزيل.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

ولأن النص البرمجي يأتي بعد HTML الخاص بك، يمكنك استخدام document.getElementById مباشرة دون انتظار تحميل الصفحة. وتكتب في محرر HTML ما يخص داخل body فقط، وليس الوسوم html أو head أو body نفسها. والمعاينة عبارة عن iframe لا يملك إلا إذن تشغيل النصوص البرمجية، ولهذا تُحظر مربعات حوار alert والوصول إلى ملفات تعريف الارتباط الخاصة بهذا الموقع.

الأسئلة الشائعة

الخصوصية

تعمل هذه الأداة بالكامل داخل متصفحك. تُعالَج ملفاتك ونصوصك على جهازك ولا تُرفع أبدًا إلى خوادمنا.