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

مثال

<!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>

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