الجلسة السابعة

كيف يمكن جعل صفحة الويب تبدأ باظهار رسالة عند التحميل أو التحديث؟
1. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  onload="alert('Page loaded!')"
2. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onload="alert('Page loaded!')";
3. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onload=alert('Page loaded!');
4. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  alert('Page loaded!');
5. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم head
  
  onload=alert('Page loaded!');
كيف يمكن اضافة قيمة عرض نافذة الصفحة بعد الجملة بمجرد تغيير حجم صفحة الويب (سواء طول أو عرض الصفحة)؟

Here whenever you resize the window, the function resizeW() will be triggered.
1. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  onresize="const output = document.getElementById('output'); output.innerHTML = window.innerWidth;"
2. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onresize="const output = document.getElementById('output'); output.innerHTML = window.innerWidth;"
3. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onresize= function(){resizeW()};
  function resizeW(){
  const output = document.getElementById('output');
  output.innerHTML = window.innerWidth;}
4. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onresize= function(){const output = document.getElementById('output');
  output.innerHTML = window.innerWidth;};
ما هي التغييرات الواجب اضافتها إلى الكود من أجل اظهار نافذة الـ confirm التأكيد عند الانتقال من الصفحة الحالية إلى صفحة أخرى عن طريق الضغط على رابط محدد أو التحديث
1. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  onbeforeunload="return confirm('Are you sure you want to close the tab?')"
2. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onbeforeunload="return confirm('Are you sure you want to close the tab?')"
3. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onbeforeunload= return confirm('Are you sure you want to close the tab?')
4. عن طريق اضافة الكود التالي كمحتوى ضمن وسم الـ script بعد الوسم body
  
  onbeforeunload= confirm('Are you sure you want to close the tab?')
كيف يمكن تغيير لون الخط عند الضغط على الجملة

Click this element
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor() {
  document.getElementById("elm1").style.color = "red";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor() {
  document.getElementById("elm1").style.color = "blue";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  function changeColor() {
  document.getElementById("elm1").style.color = "red";
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ p ذات المعرف id="elm1"
  
  function changeColor() {
  document.getElementById("elm1").style.color = "red";
  }
5. عن طريق اضافة الكود التالي ضمن وسم الـ p ذات المعرف id="elm1"
  
  onclick="document.getElementById('elm1').style.color = 'red';"
كيف يمكن تغيير لون الخط عند الضغط المزدوج على الجملة

Double click this element
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor1() {
  document.getElementById("elm2").style.color = "red";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor1() {
  document.getElementById("elm2").style.color = "blue";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  function changeColor1() {
  document.getElementById("elm2").style.color = "red";
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ p ذات المعرف id="elm2"
  
  function changeColor1() {
  document.getElementById("elm2").style.color = "red";
  }
5. عن طريق اضافة الكود التالي ضمن وسم الـ p ذات المعرف id="elm2"
  
  ondblclick="document.getElementById('elm2').style.color = 'red';
كيف يمكن تغيير الخلفية عند المرور بمؤشر الفأرة على الزر

Change Color
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor2() {
  document.getElementById("btn1").style.backgroundColor = "red";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor2() {
  document.getElementById("btn1").style.backgroundColor = "blue";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  function changeColor2() {
  document.getElementById("btn1").style.backgroundColor = "red";
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف id="btn1"
  
  function changeColor2() {
  document.getElementById("btn1").style.backgroundColor = "red";
  }
5. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف id="btn1"
  
  ondblclick="document.getElementById('btn1').style.backgroundColor = 'red';
كيف يمكن تغيير الخلفية عند المرور بمؤشر الفأرة على الزر وبعدها اعادة اللون الاصلي بمجرد الخروج من الزر

Change Color
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor3() {
  document.getElementById("btn2").style.backgroundColor = "red";
  }
  function reverseColor() {
  document.getElementById("btn2").style.backgroundColor = "white";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeColor3() {
  document.getElementById("btn2").style.backgroundColor = "blue";
  }
  function reverseColor() {
  document.getElementById("btn2").style.backgroundColor = "white";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ body
  
  function changeColor3() {
  document.getElementById("btn2").style.backgroundColor = "red";
  }
  function reverseColor() {
  document.getElementById("btn2").style.backgroundColor = "white";
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف id="btn2"
  
  function changeColor3() {
  document.getElementById("btn2").style.backgroundColor = "red";
  }
  function reverseColor() {
  document.getElementById("btn2").style.backgroundColor = "white";
  }
5. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف id="btn2"
  
  ondblclick="document.getElementById('btn2').style.backgroundColor = 'red';
  onmouseout="document.getElementById('btn2').style.backgroundColor = 'white';"
كيف يمكن إظهار وإخفاء الجملة

This is a popup
عند الضغط على زر الفأرة على الزر ذات المعرف btn4 وتحريرها
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function openPopup1() {
  document.getElementById("popup1").style.display = "block";
  }
  function closePopup() {
  document.getElementById("popup1").style.display = "none";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف btn4
  
  onmousedown="document.getElementById('popup1').style.display = 'block';" onmouseup="document.getElementById('popup1').style.display = 'none';"
3. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف btn4
  
  onmousedown="document.getElementById("popup1").style.display = "block";" onmouseup="document.getElementById("popup1").style.display = "none";"
4. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function openPopup1() {
  document.getElementById("popup1").style.display = "block";
  document.getElementById("popup1").style.display = "none";
  }
كيف يمكن إظهار إحداثيات الفأرة بمجرد المرور على العنصر ذات المعرف btn5
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function trackMouse() {
  var x = event.clientX;
  var y = event.clientY;
  document.getElementById("btn5").innerHTML = "Mouse position: " + x + ", " + y;
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف btn5
  
  onmousedown="document.getElementById('popup1').style.display = 'block';" onmouseup="document.getElementById('popup1').style.display = 'none';"
3. عن طريق اضافة الكود التالي ضمن وسم الـ button ذات المعرف btn5
  
  onmousemove="document.getElementById("btn5").innerHTML = "Mouse position: " + event.clientX + ", " + event.clientY;"
4. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function trackMouse() {
  document.getElementById("btn5").innerHTML = "Mouse position: " + event.clientX + ", " + event.clientY;
  }
5. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  var x = event.clientX;
  var y = event.clientY;
  document.getElementById("btn5").innerHTML = "Mouse position: " + x + ", " + y;
كيف يمكن تغيير خلفية النص الخاص بالعنصر ذات المعرف div2 بمجرد مرور مؤشر الفأرة على الجملة ومن ثم اعادته إلى لون أخر بمجرد خروج مؤشر الفأرة منه

This is a div
الخاصة بالعنصر ذات المعرف div2
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function enterColor() {
  document.getElementById("div2").style.backgroundColor = "blue";
  }
  function leaveColor() {
  document.getElementById("div2").style.backgroundColor = "red";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function enterColor() {
  document.getElementById("div2").style.backgroundColor = "blue";
  document.getElementById("div2").style.backgroundColor = "red";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  document.getElementById("div2").style.backgroundColor = "blue";
  document.getElementById("div2").style.backgroundColor = "red";
4. عن طريق اضافة الكود التالي ضمن وسم الـ div ذات المعرف div2
  
  onmouseenter="document.getElementById('div2').style.backgroundColor = 'blue';" onmouseleave="document.getElementById('div2').style.backgroundColor = 'red';"
المطلوب انشاء حدث يقوم بعد عدد مرات الضغط على مفاتيح لوحة المفاتيح واظهار العدد بشكل مستمر ضمن العنصر ذات المحدد output2
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  var count = 0;
  function keyPress() {
  var output2 = document.getElementById("output2");
  count++;
  output2.innerHTML = ", numberof times: " + count;
  }
2. عن طريق تغيير الصفة onkeypress ضمن الوسم textarea إلى onkeyup واضافة الكود التالي ضمن وسم الـ script
  
  var count = 0;
  function keyPress() {
  var output2 = document.getElementById("output2");
  count++;
  output2.innerHTML = ", numberof times: " + count;
  }
3. عن طريق تغيير الصفة onkeypress ضمن الوسم textarea إلى onkeydown واضافة الكود التالي ضمن وسم الـ script
  
  var count = 0;
  function keyPress() {
  var output2 = document.getElementById("output2");
  count++;
  output2.innerHTML = ", numberof times: " + count;
  }
4. عن طريق تغيير الصفة onclick ضمن الوسم textarea إلى onkeydown واضافة الكود التالي ضمن وسم الـ script
  
  var count = 0;
  function keyPress() {
  var output2 = document.getElementById("output2");
  count++;
  output2.innerHTML = ", numberof times: " + count;
  }
5. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  var count = 0;
  function keyPress() {
  count++;
  document.getElementById("output2").innerHTML = ", numberof times: " + count;
  }
كيف يمكن تغيير لون خلفية العنصر ذات المعرف in1 بمجرد تحديده للكتابة ضمنه
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function focusInput(event) {
  event.style.backgroundColor = "orange";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function focusInput(this) {
  this.style.backgroundColor = "orange";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function focusInput(fx) {
  fx.style.backgroundColor = "orange";
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف in1
  
  onfocus="this.style.backgroundColor = 'orange';"
5. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف in1
  
  onfocus="document.getElementById('in1').style.backgroundColor = 'orange';"
كيف يمكن تغيير لون خلفية العنصر ذات المعرف in2 بمجرد مغادرته والانتقال إلى عنصر أخر
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function blurInput() {
  document.getElementById('in2').style.backgroundColor = "red";
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function blurInput() {
  this.style.backgroundColor = "red";
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function blurInput(fx) {fx.style.backgroundColor = "red";
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف in2
  
  onblur="document.getElementById('in2').style.backgroundColor = 'red';"
5. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف in2
  
  onblur="this.style.backgroundColor = 'red';"
كيف يمكن اظهار الجملة التي تم كتابتها ضمن العنصر ذات المعرف in3 بمجرد مغادرته والانتقال إلى عنصر أخر ضمن رسالة نصية
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeInput(event) {
  alert(event.value);
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeInput(this) {
  alert(this.value);
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function changeInput(fx) {
  alert(fx.value);
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف in3
  
  onchange="alert(this.value);"
5. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف in3
  
  onchange="alert(document.getElementById('in3').value);"
كيف يمكن اظهار قيمة العنصر الذي تم تحديده ضمن العنصر ذات المعرف cars ضمن رسالة نصية
1. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function selectInput(event) {
  alert(event.value);
  }
2. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function selectInput(this) {
  alert(this.value);
  }
3. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function selectInput(fx) {
  alert(fx.value);
  }
4. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف cars
  
  onchange="alert(this.value);"
5. عن طريق اضافة الكود التالي ضمن وسم الـ input ذات المعرف cars
  
  onchange="alert(document.getElementById('cars').value);"
6. عن طريق اضافة الكود التالي ضمن وسم الـ script
  
  function selectInput() {
  alert(document.getElementById("cars").value);
  }

الجلسة السابعة

ليكن لدينا صفحة الويب المرفقة بالملف LAB7_Train.html والمطلوب : اختر الاجابات الصحيحة

ليكن لدينا صفحة الويب المرفقة بالملف LAB7_Train.html

والمطلوب : اختر الاجابات الصحيحة