أمثلة مستخدمة لـ JavaScript

تتضمن هذه الصفحة بعض الأمثلة على ما يمكن أن يفعله JavaScript.

ملاحظة:إذا كانت هذه الأمثلة تستخدم طرقًا لم تتعلموها بعد،رجاءًلا تقلق. ستعرفونها في الفصل التالي.

يمكن استخدام JavaScript لتغيير محتوى HTML

يستعيد طريقة getElementById() العنصر الذي يطابق معرفه القيمة المحددة.

يستخدم هذا المثال هذه الطريقة للبحث عن عنصر HTML (id="para")، وتغيير محتوى العنصر (innerHTML) إلى "Hello world":

document.getElementById("para").innerHTML = "Hello world";

يمكن استخدام JavaScript لتغيير قيمة الخاصية HTML

في هذا المثال، قام JavaScript بتغيير<img>علامةsrcقيمة الخاصية:

يمكن استخدام JavaScript لتغيير نمط HTML (CSS)

JavaScript styleيمكن استخدام الخاصية لضبط النمط الداخلي للعنصر.

document.getElementById("demo").style.color = "blue";

يمكن استخدام JavaScript لإخفاء العناصر HTML

يمكن إخفاء العناصر HTML من خلال تغيير نمط العرض.

document.getElementById("demo").style.display = "none";

يمكن استخدام JavaScript لعرض العناصر HTML

يمكن عرض العناصر HTML المخفية من خلال تغيير نمط العرض.

document.getElementById("demo").style.display = "block";

يمكن استخدام JavaScript لإنشاء نافذة إشعار

في هذا المثال، يخلق JavaScript نافذة تحذير.

alert("Hello world!");

يمكن لـ JavaScript إضافة معالج أحداث إلى المستند

في هذا المثال، يراقب JavaScript أحداث الضغط على الماوس ويستجيب لها.

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
{}

يمكن لـ JavaScript عرض الوقت

في هذا المثال، يعرض JavaScript الوقت الحالي.

var intervalID = setInterval(startTimer, 1000);
function startTimer() {
　　　　var date = new Date();
　　　　var x = document.getElementById("result");
　　　　x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
{}