إدراج جمل JS دون الحاجة الى وسم السيكربت
إدراج الجمل بدون السيكربت:
تعلمنا سابقاً أن إدراج أي جملة في الجافاسيكربت يتطلب مني أن أقوم بإدراج وسم السيكربت أولاً:
<script language="JavaScript">
لكن هل يمكن لي أن أستخدم جمل في لغة الجافاسيكربت دون الحاجة الى السيكربت نفسة؟
الإجابة نعم وذلك إن وضعنا الجمل الخاصة بالجافاسيكربت كقيمة داخل خاصية لوسم معين فمثلا خاصية onclick وهي خاصية للوسم <"input type="button> هل تذكرون هذا الوسم الخاص بتصميم الأزرار فمثلا لو أردنا تفعيل جملة فتح الطابعة في جافا سيكربت داخل وسم <input> دون أن ندرج السيكربت:
<html>
<body>
<input type="button" value="طباعة" onclick="print()">
</body>
</html>
هنا لم ندرج السيكربت للغة الجافاسيكربت رغم إستخدامنا لجملة الطباعة بإستخدام الطابعة وهي ()print كقيمة داخل الخاصية onclick فهل ستكون الشيفرة فعالة تتبع النتيجة:
فإذا قام المستخدم بالضغط على الزر فسيظهر له مربع حوار للطابعة لاحظ النتيجة:
<html>
<body>
<input type="button" value="طباعة" onclick="document.write(1+4)">
</body>
</html>
وهنا بعد الضغط على الزر ستظهر نتيجة حاصل جمع الرقمين:
إحلال جملة JS مكان جملة HTML:
يمكننا إستخدام جملة لتنفيذ أمر معين مكان وسم في HTML :
document.getElementById("ID-for-html tag").innerHTML="value"
وهي جملة مقسمة الى أربعة أقسام كما يلي:
1- document.getElementById: وهي الجملة الأساسية للغة JS وتعني أننا نريد أن نفوم بعملية إحلال لوسم معين في تصميم HTML من خلال ID الخاص بهذا الوسم.
2- ("ID-for-html tag"): هنا نقوم بوضع قيمة هذا ID فلو كان المصمم قد وضع ID للوسم قيمة raad فسيصبح هذا القسم بهذه الطريقة ("raad") علماً ان المصمم له حرية إختيار ID الوسم كما يشاء.
3- innerHTML: وهذا القسم يعني أننا سنقوم بعملية الإحلال من داخل تصميم HTML.
4- "value": وهنا يمكن للمبرمج أن يضع القيمة التي يريد الإستبدال بها فمثلا لو أرد أن تكون كلمة web45 فسوف يضعها داخل إشارات التنصيص المزدوجة "web45".
ولفهم ذلك أكثرمثلا لو أردت أن أغير ما هو مصمم داخل وسم <p> أقوم بإستخدام ID الخاص بهذا الوسم داخل جملة الجافاسكريبت JS واضع القيمة الجديدة value وكل ذلك سيكون كقيمة داخل خاصية onclick تتبع الشيفرة التالية:
<html>
<body>
<p id="raad"> HTMLهذه الفقره ضمن تصميم </p>
<input type="button" value="تحويل" onclick='document.getElementById("raad").innerHTML="JS لقد قمنا بالتحويل الى "'>
</body>
</html>
لنقوم بتفصيل ذلك أكثر:
لنقوم بتفسير ما حصل في الحقيقة هذه ليست صورة واحدة بل صورتين هما:
هنا السيارة تسير نحو اليمين وقد أسميتها pic_ltr.PNG أما الصورة الثانية:
و جعلت الصورة الأولى هي الاساس في خاصية src وأعطيت لهذا الوسم ID هو myPic أما عند الزر الأول:
جعلت الجملة تحل مكان وسم الصورة من خلال ID الخاص بوسم <img> ثم إستخدمت خاصية src. كبديل عن innerHTML سابقاً لأنني هنا أعمل على الصور وليس نص ثم أدخلت الصورة الثانية pic_rtl.PNG بين إشارات تنصيص مفردة وهذا ما فعلته في الزر الثاني مع إرجاع الصورة الأولى:
وبالتالي تصبح كامل الشيفرة كما يلي:
عند دخول جملة JS الى HTML يجب مرعاة المراوحة بين إشارة التنصيص المزدوجه والفردية.
أرجو أن أكون قد تمكنت من تبسيط المعلومة لك إذا واجهتك أي صعوبات أو أردت التعقيب على الموضوع أرجو منك أن تترك تعليقاتك لنا وسوف نقوم بالرد عليها لاحقا إن شاء الله .. عطلة نهاية أسبوع سعيدة والى لقاء قريب.