2024208494886170954365459073536587125329324600425355324472245929212525005525530030271027810172575929800065427858557245242200073127892960531555

الخميس، 27 أغسطس 2020

لغة JavaScript تنفيذ الجمل البرمجية داخل أوسمة HTML - الدرس الثالث


 

إدراج جمل JS دون الحاجة الى وسم السيكربت


إدراج الجمل بدون السيكربت:

تعلمنا سابقاً أن إدراج أي جملة في الجافاسيكربت يتطلب مني أن أقوم بإدراج وسم السيكربت أولاً:

<script language="JavaScript">


لكن هل يمكن لي أن أستخدم جمل في لغة الجافاسيكربت دون الحاجة الى السيكربت نفسة؟ 


الإجابة نعم وذلك إن وضعنا الجمل  الخاصة بالجافاسيكربت كقيمة داخل خاصية لوسم معين فمثلا خاصية onclick وهي خاصية للوسم  <"input type="button>  هل تذكرون هذا الوسم الخاص بتصميم الأزرار فمثلا لو أردنا تفعيل جملة فتح الطابعة  في جافا سيكربت داخل وسم <input> دون أن ندرج السيكربت:


<html>

<body>

  <input type="button" value="طباعة" onclick="print()">

</body>

</html>



هنا لم ندرج السيكربت للغة الجافاسيكربت رغم إستخدامنا لجملة الطباعة بإستخدام الطابعة وهي ()print  كقيمة داخل الخاصية onclick فهل ستكون الشيفرة فعالة تتبع النتيجة:




فإذا قام المستخدم بالضغط على الزر فسيظهر له مربع حوار للطابعة لاحظ النتيجة:




لنقوم بتجربة جملة أخرى للجافاسيكربت فمثلا لوأردنا طباعة حاصل جمع رقمين كمثل 1+4 عند ضغط المستخدم على الزر  فستكون الشيفرة كما يلي:

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


لنقوم بتفصيل ذلك أكثر:




أما نتيجة هذه الشيفرة فهي كما يلي:



أما بعد الضغط على الزر سوف يقوم JS بعملية الإحلال:




الأن ما رأيك أن نبرمج زرين يقوم كل منهم بتغير أتجاة صورة معينة من خلال إحلال JS مكانهما تتبع النتائج التالية عند الضغط على الزر الأول:



ثم عند الضغط على الزر الثاني:



لنقوم بتفسير ما حصل في الحقيقة هذه ليست صورة واحدة بل صورتين هما:


هنا السيارة تسير نحو اليمين  وقد أسميتها pic_ltr.PNG أما الصورة الثانية:

وهنا السيارة تسير نحو اليسار وقد أسميتها pic_rtl.PNG  واقد ادرجت وسم الصورة في HTML وحددت أحدى هاتين الصورتين كصورة أساسية وبحجم معين لغايات النتسيق كما هو واضح في الشيفرة:


<img id="myPic" src="pic_ltr.PNG" style="width:100px">


و جعلت الصورة الأولى هي الاساس في خاصية src وأعطيت لهذا الوسم ID هو myPic أما عند الزر الأول:



<input type="button" value="الى اليسار"onclick="document.getElementById('myPic').src='pic_rtl.PNG'">


جعلت الجملة تحل مكان وسم الصورة من خلال ID الخاص بوسم <img> ثم إستخدمت خاصية src. كبديل عن innerHTML سابقاً لأنني هنا أعمل على الصور وليس نص ثم أدخلت الصورة الثانية pic_rtl.PNG بين إشارات تنصيص مفردة وهذا ما فعلته في الزر الثاني مع إرجاع الصورة الأولى:



<input type="button" value="الى اليمين"onclick="document.getElementById('myPic').src='pic_ltr.PNG'">


وبالتالي تصبح كامل الشيفرة كما يلي:


<html>
<body>

<h2> يمكنك تدوير العربة</h2>
<img id="myPic" src="pic_ltr.PNG" style="width:100px">
<P><P>
<input type="button" value="الى اليسار" onclick="document.getElementById('myPic').src='pic_rtl.PNG'">

<input type="button" value="الى اليمين" onclick="document.getElementById('myPic').src='pic_ltr.PNG'">

</body>
</html>


بالطبع يجب مراعاة وجود الصور وملف الشيفرة في نفس المجلد كما قد شرحنا في درس إدراج الصور.

للتوضيح أكثر تمعن في الصورة وهي لنفس الشيفرة:

وبدقة أكثر:


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



----------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------

كافة الحقوق محفوظة لـ مدونة رعد: لإثراء المعرفة التقنية 2019