سنتناقش فى هذا الفصل أماكن وضع كود JavaScript فى HTML.


 

أولًا: وسم <script>

 

يتم وضع كود JavaScript بين وسمى <script> و <script/>. كالتالى:

<script>  
  document.write("Learn JavaScript is very Easy!");  
</script>

كان قديمًا يتم إستخدام سمة type، كالتالى:

<script type="text/javascript">  
  document.write("Learn JavaScript is very Easy!");  
</script>

سمة type غير مطلوبة. JavaScript هي لغة البرمجة النصية الافتراضية في HTML.

تُستخدم وظيفة ()document.write لعرض المحتوى الديناميكي من خلال JavaScript. سنتعرف عليه بالتفصيل لاحقًا.


 

ثانيًا: أماكن وضع كود JavaScript

 

توفر JavaScript ثلاثة أماكن لوضع كود JavaScript، وهم:

  1. داخل وسم <head> أو وسم <body>.
  2. ملف جافاسكريبت الخارجي External JavaScript.

 


 

1. داخل وسم <head>

 

دعونا نرى مثال لعرض alert بإستخدام كود JavaScript الموجود داخل وسم الـ <head>:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript in Head</title>
        <meta charset="UTF-8" />

        <script>
            function showAlert() {
                alert("Learning JavaScript is easy and fun!");
            }
        </script>
    </head>
    <body>

        <h2>JavaScript in Head</h2>
        <button type="button" onclick="showAlert()">Click to Show Alert</button>

    </body>
</html>

JavaScript in Head

توضيح المثال السابق:

  • تم إنشاء دالة بإستخدام كلمة function، ثم بعد ذلك كتبنا إسم الدالة showAlert.
  • بعد ذلك قُمنا بإستدعاء الدالة، وللقيام بذلك تحتاج إلى حدث Event. نحن هنا إستخدمنا حدث onclick لاستدعاء دالة ()showAlert.

 


Advertisements

 

2. داخل وسم <body>

 

دعونا نرى مثال أيضًا لعرض alert بإستخدام كود JavaScript الموجود داخل وسم الـ <body>:

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript in Body</title>
        <meta charset="UTF-8" />
    </head>
    <body>

        <h2>JavaScript in Body</h2>
        <button type="button" onclick="showAlert()">Click to Show Alert</button>

        <script>
            function showAlert() {
                alert("Learning JavaScript is easy and fun!");
            }
        </script>
    </body>
</html>

JavaScript in Head

من الناحية المثالية ، يجب وضع أكواد JavaScript في اسفل الصفحة ، قبل قفلة وسم الـ <body>؛ لأنه عندما يصادف المتصفح نصًا برمجيًا، فإنه يتوقف مؤقتًا عن عرض بقية الصفحة حتى يحلل النص البرمجي الذي قد يؤثر بشكل كبير أداء موقعك (performance).


 

3. ملف جافا سكريبت الخارجى – External JavaScript

 

يمكن أيضًا استخدام JavaScript كملفات خارجية.

ملفات JavaScript لها امتداد لملفها وهو (js.).

لاستخدام ملف JavaScript خارجي ، ضع اسم الملف في سمة src لوسم <script> (يمكن وضع الوسم فى الـ body أو الـ head).

 

مثال للتوضيح:

 

File: demo.js:

function showAlert() {
    alert("Learning JavaScript is easy and fun!");
}

File: index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>External JavaScript</title>
        <meta charset="UTF-8" />
        <script src="demo.js"></script>
    </head>
    <body>

        <h2>External JavaScript</h2>
        <button type="button" onclick="showAlert()">Click to Show Alert</button>

    </body>
</html>

لا يمكن أن تحتوي البرامج النصية الخارجية على وسوم <script>.


 

مزايا ملفات جافا سكريبت الخارجية

 

يتميز وضع أكواد JavaScript البرمجية في ملفات js الخارجية ببعض المزايا مقارنة بالبرامج النصية المضمنة:

  1. سيساعد فصل كود HTML وJavaScript على إدارة قاعدة التعليمات البرمجية بشكل أفضل.
  2. يمكن للمصممين العمل جنبًا إلى جنب مع المبرمجين المتوازيين دون تعارض في التعليمات البرمجية.
  3. يعمل بشكل جيد مع أنظمة التحكم في إصدار الكود المصدري الحديث مثل GIT و SVN.
  4. يمكن قراءة الكود بالإضافة إلى HTML بسهولة.
  5. يتم تخزين ملفات JavaScript الخارجية مؤقتًا بواسطة المتصفحات ويمكنها تسريع أوقات تحميل الصفحة.
  6. تتوفر العديد من حزم JavaScript الشائعة على أنها مستضافة على شبكات توصيل المحتوى cdn ويمكنك ببساطة الإشارة إليها باستخدام عنوان URL في src ، وبالتالي تجنب نسخ ملف js إلى المجلد المحلي.