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

يستخدم الوسم <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