JavaScript في صفحات HTML | دروس HTML5


أمثلة جافا سكريبت

تجعل JavaScript صفحات HTML أكثر ديناميكية وتعزز تفاعل الصفحات مع المستخدم. تُستخدم JavaScript للبرمجة من جانب المستخدم، مما يعني أن شفرة JavaScript يتم تنفيذها بواسطة كمبيوتر المستخدم (وليس الخادم الذي توجد عليه صفحة الويب).


مثال على كود JavaScript في حالة النقر بزر واحد في HTML:

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

علامة <script> بتنسيق HTML

تُستخدم علامة <script> لتحديد البرامج النصية من جانب المستخدم (JavaScript)

تحتوي العلامة <script> إما على تعبيرات البرنامج النصي أو تشير إلى ملف نصي خارجي عبر السمة src.

تعد معالجة الصور والتحقق من صحة النموذج وتغييرات المحتوى الديناميكي من الاستخدامات الشائعة لجافا سكريبت.

لتحديد عنصر HTML، غالبًا ما يستخدم JavaScript معرف الطريقة (document.getElementById).

المثال التالي يضع العبارة "Hello JavaScript!" في عنصر بمعرف "demo":

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

بعض الأمثلة على JavaScript 

فيما يلي أمثلة لما يمكن أن تفعله JavaScript.

يمكن لـ JavaScript تعديل محتوى HTML:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

يمكن لـ JavaScript تغيير الأنماط في HTML:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

يمكن لـ JavaScript تغيير السمات في HTML:

document.getElementById("image").src = "picture.gif";

علامة <noscript> بتنسيق HTML

تشير العلامة <noscript> إلى المحتوى الخاص بالمستخدمين الذين قاموا بتعطيل ميزة البرنامج النصي للمتصفح أو الذين لا يدعم المستعرض الخاص بهم البرامج النصية من جانب المستخدم:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>


كلمات مفتاحية: