أول جافا سكريبت لي

مثال

 <!DOCTYPE html>
<html>
<body>
 
<h1> أول جافا سكريبت لي </h1>
 
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
انقر فوقي لعرض التاريخ والوقت.</button>
 
<p id="demo"></p>
 
</body>
</html>

علامة <script>
تُستخدم علامة <script> لتعريف برنامج نصي من جانب العميل (JavaScript).
يحتوي العنصر <script> إما على اكواد البرنامج النصي ، أو يشير إلى ملف نصي خارجي من خلال السمة src.
الاستخدامات الشائعة لجافا سكريبت هي معالجة الصور والتحقق من صحة النموذج والتغييرات الديناميكية للمحتوى.
لتحديد عنصر HTML ، غالبًا ما تستخدم JavaScript طريقة document.getElementById ().
يكتب مثال JavaScript هذا "Hello JavaScript!" في عنصر HTML بالمعرف = "demo":
مثال

 <!DOCTYPE html>
<html>
<body>
 
<h2> استخدم JavaScript لتغيير النص </h2>
<p> يكتب هذا المثال "Hello JavaScript!" في عنصر   الذي يحمل الايدي  "demo": </p>
 
<p id="demo"></p>
 
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 
 
</body>
</html>

نصيحة: يمكنك معرفة المزيد حول JavaScript في برنامج JavaScript التعليمي.
طعم جافا سكريبت A Taste of JavaScript
فيما يلي بعض الأمثلة لما يمكن لـ JavaScript القيام به:
مثال
يمكن لـ JavaScript تغيير المحتوى:

 <!DOCTYPE html>
<html>
<body>
 
<h1> My First JavaScript </h1>
 
<p> يمكن لجافا سكريبت تغيير محتوى عنصر HTML: </p>
 
<button type="button" onclick="myFunction()">Click Me!</button>
 
<p id = "demo"> هذا عرض توضيحي. </ p>
 
<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "مرحبا JavaScript!";
}
</script>
 
</body>
</html>

مثال
يمكن لـ JavaScript تغيير الأنماط style:

 <!DOCTYPE html>
<html>
<body>
 
<h1> My First JavaScript </h1>
 
<p id = "demo"> يمكن لـ JavaScript تغيير نمط عنصر HTML. </p>
 
<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>
 
<button type="button" onclick="myFunction()">Click Me!</button>
 
</body>
</html>

مثال
يمكن لـ JavaScript تغيير السمات (attributes):

 <!DOCTYPE html>
<html>
<body>
 
<h1> My First JavaScript </h1>
<p> هنا ، تغير JavaScript قيمة السمة src (المصدر) للصورة. </ p>
 
<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "https://www.w3schools.com/html/pic_bulboff.gif"
  } else {
    pic = "https://www.w3schools.com/html/pic_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>
 
<img id="myImage" src="https://www.w3schools.com/html/pic_bulboff.gif" width="100" height="180">
 
<p>
<button type="button" onclick="light(1)"> On</button>
<button type="button" onclick="light(0)"> Off</button>
</p>
 
</body>
</html>

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

 <!DOCTYPE html>
<html>
<body>
 
<p id="demo"></p>
 
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
 
<noscript> عذرًا ، متصفحك لا يدعم JavaScript! </noscript>
 
<p> سيعرض المتصفح الذي لا يدعم JavaScript النص المكتوب داخل عنصر noscript. </p>
 
</body>
</html>

الدرس السابق الدرس التالي

	<!DOCTYPE html>
	<html>
	<body>

	<h1> أول جافا سكريبت لي </h1>

	<button type="button"
	onclick="document.getElementById('demo').innerHTML = Date()">
	انقر فوقي لعرض التاريخ والوقت.</button>

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

	</body>
	</html>