كيفية الاستخدام

By


يستخدم الوسم <script> لادراج كود جافاسكربت داخل صفحات HTML



كتابة الكود داخل صفحة الويب


في المثال التالي سيتم استخدام كود جافاسكربت داخل وسم <P> وسيتم عرض التاريخ الحالي ضمنه.

مثال
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>


ملاجظة : حاول أن تتجنب استخدام الكود الوظيفي document.write()في أكواد الجافاسكربت الضخمة لأن صفحة HTML ستفرط في كتابة الأكواد عند استخدام document.write() داخل كود وظيفي أو عند تحميل الصفحة . ولكن على أي حال يعتبر كتابة الكود الوظيفي document.write() أسهل طريقة لإظهار نتيجة كود الجافاسكربت .



تغيير عناصر HTML


في المثال التالي سيتم استخدام كود جافاسكربت داخل وسم <P> من خلال استدعاء اسم معين له وسيتم عرض التاريخ الحالي ضمنه.

مثال
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>


ملاحظة : يمكن للغة جافاسكربت معالجة عناصر HTML حيث تستخدم طريقة DOM الحصول على العنصر من خلال الآي دي الخاص به getElementById() أي من خلال اسم فريد يمكن استخدامه في الجافاسكربت تماماً مثل لغة CSS



مثال مشروح

يمكن استخدام الوسم <script> لإدراج كود جافاسكربت داخل صفحة HTML

بعد ادخال الوسم <script> يجب اضافة لاحقة لتعريف نوع لغة هذا السكربت .

يخبر بداية الوسم <script> ونهايته </script> أين سيبدأ كود الجافاسكربت واين سينتهي .
<html>
<body>
<h1> أول صفحة جافاسكربت </h1>
<p id="demo">هذه فقرة</p>
<script type="text/javascript">
هنا سيتم ادراج كود الجافاسكربت
</script>
</body>
</html>


يحتوي السطر بين بداية الوسم <script> ونهايته </script> كود الجافاسكربت الذي سيتم قرائته من قبل المتصفح .

وفي هذه الحالة سيقوم المتصفح باستبدال محتوى عنصر HTML بالآي دي demo وسيتم اظهار الوقت الحالي id="demo"
<html>
<body>
<h1>أول صفحة جافاسكربت</h1>
<p id="demo">هذه فقرة</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>

</body>
</html>


عند عدم استخدام الوسم <script> سيقوم المتصفح بإظهار الكود
"document.getElementById("demo").innerHTML=Date();" كنص عادي في الصفحة .



بعض المتصفحات لاتدعم لغة الجافاسكربت JavaScript


ان كان هناك بعض المتصفحات التي لاتدعم الجافاسكربت فعندها ستسبب الكثير من المشاكل .

لتجنب هذه المشاكل يمكن استخدام "تعليقات HTML" لإخفاء كود الجافاسكربت في حال كان المتصفح لايدعم الجافاسكربت JavaScript فقط قم بإضافة بداية كود التعليق والذي يبدأ <!-- قبل كود الجافاسكربت ثم قم بإضافة نهاية كود التعليق --> بعد الانتهاء من كتابة كود الجافاسكربت .

مثال
<html>
<body><script type="text/javascript">
<!--
document.getElementById("demo").innerHTML=Date();
//-->
</script>
</body>
</html>


تم اضافة "//" في نهاية الكود قبل اغلاق كود الملاحظة وهي اشارة ملاحظة أيضاً وقد تم إضافة هذا الرمز لتجنب تجاهل نهاية كود التعليق الخاص HTML

ليست هناك تعليقات:

إرسال تعليق