عرض النتائج
تعرف الآن كيف تضع سكربتًا في الصفحة. المهارة التالية: أين يظهر الناتج؟ في الصفحة للزائر، في نافذة يجب إغلاقها، أو في Console لك وحدك. لغة واحدة، وأربعة أماكن مختلفة جدًا.
كيف تعرض نتائج JavaScript للمستخدم أو للمطور؟
للزائر حدّث عنصرًا موجودًا — textContent للنص العادي، وinnerHTML فقط عندما تحتاج علامات تكتبها أنت. للرسالة التي توقف الصفحة استدعِ window.alert. لتتبعك استخدم console.log. اعتبر document.write تيارًا قديمًا: مقبول أثناء قراءة الملف، وخطر بعد اكتمال التحميل لأنه قد يستبدل المستند كله.
أين يُرى الناتج؟
📊 أماكن شائعة لرؤية الناتج
| الطريقة | من يراه | افتراضي المبتدئ |
|---|---|---|
textContent على عنصر |
الزائر، في الصفحة | نعم — الناتج اليومي |
innerHTML على عنصر |
الزائر، مع وسوم HTML | فقط عندما تكون العلامات من عندك |
window.alert |
الزائر، في نافذة | نادر — الصفحة تتوقف حتى OK |
console.log |
أنت، في Console أدوات المطوّر | نعم للتتبع؛ الزائر لا يراه |
document.write |
تيار HTML | تجنّبه بعد التحميل |
على الصفحة (افتراضي الزائر)
ضع عنوانًا أو فقرة حقيقية في HTML. بعد تشغيل السكربت (نهاية الجسم كما في الدرس السابق) غيّر ذلك العقدة. يرى الزائر النص الجديد دون فتح DevTools.
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>
لماذا textContent أولًا
- إن فشل السكربت يبقى «Waiting…» في HTML
- علامات الاقتباس و
<تبقى نصًا لا وسومًا - رأيت النمط نفسه عندما وضعت السكربت في نهاية الجسم
- وحدة DOM تأتي لاحقًا؛ هنا يكفي «ضع الناتج هنا»
innerHTML — عندما يكون الناتج علامات
innerHTML يفسّر السلسلة كـ HTML. استخدمه عندما تضيف عمدًا وسومًا كتبتها. لا تضع إدخال المستخدم الخام في innerHTML. للاسم أو السعر يكفي textContent.
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>
document.write — اعرفه وقلّل استخدامه
document.write يرسل نصًا إلى تيار HTML أثناء قراءة الملف. إن استدعيته بعد اكتمال التحميل (مثل نقرة متأخرة) تفتح متصفحات كثيرة تيارًا جديدًا وتمسح الصفحة. لا تستخدمه للتحديثات. غيّر عنصرًا بدلًا من ذلك.
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>
افتح المثال، انقر الزر، ولاحظ اختفاء الفقرة الأولى. لذلك لن نعتمد document.write في أمثلة لاحقة من هذه الدورة.
alert — نافذة توقف الصفحة
window.alert (غالبًا alert) يفتح نافذة نظام. تنتظر الصفحة حتى يضغط الزائر OK. مفيد مرة لإثبات تشغيل السكربت. ضعيف كواجهة وحيدة: بلا تنسيق، مزعج بالتكرار، ويقطع قارئ الشاشة ولوحة المفاتيح. اكتب الرسائل الحقيقية في الصفحة.
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>
console.log — لك لا للزائر
Console أداة مطوّر. console.log يطبع هناك. المتسوق على الهاتف لا يراه. استخدمه لفحص رقم أو سلسلة أثناء التعلم. نجاح السجل لا يعني أن التطبيق «عرض الناتج».
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);
افتح DevTools (غالبًا F12)، اختر تبويب Console، حدّث الصفحة، واقرأ الأسطر. إن غيّرت console.log فقط وبقي العنوان «Waiting…»، فالزائر ما زال يرى «Waiting…».
جرّب بنفسك
- احفظ صفحة
textContent، افتحها، غيّر السلسلة وحدّث. - بدّل السطر إلى
innerHTMLمع وسم<strong>وتأكد أن الكلمة تظهر بخط عريض. - افتح Console وشغّل مثال
console.log— لا شيء جديد في جسم الصفحة. - شغّل مثال alert مرة، ثم استبدل التنبيه بتحديث عنوان حتى لا تتوقف الصفحة.
- اختياري: جرّب زر
document.writeلترى المسح — ثم احذف هذا النمط من ملفاتك.
أخطاء شائعة
- عرض الناتج بـ
console.logفقط ثم الحيرة من صفحة فارغة للمستخدم - وضع نص لم تكتبه (نماذج، روابط، دردشة) في
innerHTMLبدلtextContent - استدعاء
document.writeبعد التحميل وفقدان التخطيط alertمع كل ضغطة مفتاح- الخلط مع درس المكان: هناك أين يعيش السكربت؛ هنا أين يظهر الناتج
ملخص
- الافتراضي الظاهر للزائر: حدّث عنصرًا بـ
textContent innerHTMLيدرج علامات تتحكم بها — لا سلاسل غير موثوقةalertيوقف الصفحة؛ استخدمه قليلًاconsole.logللمطوّر في DevTools- لا تستخدم
document.writeبعد التحميل؛ قد يمسح المستند - تمرّن بنقل الرسالة نفسها من Console إلى alert ثم إلى العنوان
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى