مقدمة تفصيلية لجافا سكريبت: ثلاث طرق مقدمة

<input type = "button" value = "انقر فوقي لفتح العالم" onclick = "alert ('Hello World'). )" />

 <أتش تي أم أل>
  <title>الكتابة المضمنة بأسلوب JS</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <الجسم>
  <!--تبدأ طريقة الكتابة المضمنة لـ JS من 01-->
    <!--عند النقر بالماوس على الصورة، ستظهر نافذة منبثقة تظهر 1223-->
    <div class="img">
    حدث النقر:
      <img src="images/001.jpg" onclick="alert(1223)"></img>
    </div>
  <!--انتهى أسلوب الكتابة المضمنة لـ JS 01-->
  </الجسم>
</html>

نتيجة الإخراج:

2. طريقة المقدمة المضمنة (المقدمة الداخلية)

مكتوب في علامة البرنامج النصي

مرجع داخلي: يستخدم لكتابة كود js في علامة البرنامج النصي

• يمكن كتابة علامة البرنامج النصي في أي مكان على الصفحة

• عادةً ما يتم استخدام علامة البرنامج النصي في نهاية النص، أو بعد النص

(1) يمكن كتابتها في أي مكان؛

عندما نحتاج إلى الإشارة إلى البرنامج النصي في الرأس، ضعه في الرأس، وإلا ضعه في الأسفل، لأن وضعه في الرأس قد يؤثر على عرض المتصفح.

 <النص البرمجي>
    تنبيه ("مرحبا بالعالم!")؛
</script>

ملحوظة: بشكل عام، عند كتابة التمارين بنفسك، فإنك تستخدم [ Practice Use ] عندما تريد أن تكون كسولًا ولا تريد إعداد ملفات js.

عادة، عند العمل على مشاريعك الخاصة، ضعه في الأسفل، ولا يؤثر على ترتيب التحميل ويمكن تمييزه عن ملفات CSS، ولا يؤثر على عرض المتصفح، إذا قمت بوضعه في مكان آخر، فمن الأفضل استخدام onload.

 <أتش تي أم أل>
  <title>الكتابة المضمنة بأسلوب JS</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <الجسم>
  <!--js الكتابة المضمنة بدءًا من 02-->
  <div class="img">
    حدث النقر:
      <img src="images/002.jpg" id='yuansu'></img>
  </div>
  <!--طريقة الكتابة المضمنة لـ js 02 end-->
  </الجسم>
  <النص البرمجي>
    //js code// ابحث عن العنصر XX، وأضف بشكل عام معرفًا إلى العنصر 
    yuansuojb=document.getElementById('yuansu');    
    // أضف حدث yuansuojb.onclick=function(){ إلى عنصر xx
      // تنبيه مقطع الكود (1)؛
    }
    // حدث التشغيل</script>
</html>

نتيجة الإخراج:

3. طريقة التقديم الخارجي

استخدم src في علامة البرنامج النصي لإدخال الملفات الخارجية

خطوة:

• كتابة ملفات js مستقلة

• تمت الإشارة إليه من خلال علامات البرنامج النصي في الصفحة

(1) لا يمكن كتابة أي تعليمات برمجية في البرنامج النصي الذي يقدم ملفات JS خارجية

(2) استخدم بنية كود صفحة HTML لفصل أجزاء متعددة من كود JS خارج صفحة HTML، وهو أمر جميل ومريح لإعادة استخدام الملف.

 <script src="main.js"></script>

ملاحظة: كما هو الحال مع الأنماط المضمنة، يجب مراعاة وضعها في الأسفل والرأس على أساس كل حالة على حدة [ تُستخدم بشكل متكرر ]

استخدم src وليس href

اكتب كود js في ملف .js واقتبسه بتنسيق HTML

محتوى ملف .html هو كما يلي:

 <أتش تي أم أل>
  <title>طريقة كتابة الرابط الخارجي بأسلوب JS</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <الجسم>
  <div class="img">
    كتابة رابط خارجي-حدث النقر:
      <img src="images/003.jpg" id='yuansu'></img>
  </div>
  </الجسم>
  <script src='js/index.js'></script>
</html>

محتوى ملف .js هو كما يلي:

 //js code// ابحث عن العنصر XX، وأضف بشكل عام معرفًا إلى العنصر 
yuansuojb=document.getElementById('yuansu');    
// أضف حدث yuansuojb.onclick=function(){ إلى عنصر xx
  // مقطع الكود var str="hello World!!!";
  تنبيه (شارع)؛
}

نتيجة الإخراج: