JS / كتابة أول كود

الناشر :كودا فوكس -

كتابة أول كود جافاسكربت

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

في صفحات الويب المكتوبة بلغة HTML نستخدم الوسم <script> حتى نضيف كود جافاسكربت.
هذا الوسم يتيح لك كتابة كود جافاسكربت بشكل مباشر فيه أو تضمين ملف إمتداده .js يحتوي الكود.

JS - كتابة أول كود
الشكل العام لكود جافاسكربت

في حال كتابة كود الجافاسكربت بشكل مباشر في الوسم <script> فإنه يتم وضعها بداخله كما يلي:

<script>
    // هنا تكتب أي كود جافاسكربت
</script>

في حال كان كود الجافاسكربت موضوع بداخل ملف إمتداده .js فإنه يمكن تضمينه في الصفحة من خلال إضافة الخاصية src للوسم <script> و وضع مسار الملف كقيمة لها كما يلي:

<script src="هنا تضع مسار الملف"></script>

في كلا الحالتين، الوسم <script> بما فيه من كود مكتوب بلغة جافاسكربت يقال له سكربت اختصاراً و هذا المتعارف عليه.

أوامر أساسية في جافاسكربت

الأوامر التالية ستتعامل معها كثيراً أثناء دراسة جافاسكربت فهي تتيح لك رؤية مخرجات الأوامر التي تتعلمها.


الأمر document.write()

يتيح لك هذا الأمر طباعة أي شيء تريده في صفحات الويب (رقم، نص، عنصر جديد).

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<body>
        <h2>JavaScript document.write()</h2>
        <p>This function can be used to append new content at the end of the page.</p>
        <script>
            document.write('Added by JavaScript!');
        </script>
	</body>
</html>

النتيجة - ستجد هذا النص أضيف في آخر الصفحة.

Added by JavaScript!

الأمر alert()

يتيح لك هذا الأمر إظهار نافذة منبثقة يظهر فيها نص من اختيارك.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<body>
        <h2>JavaScript Alert Function</h2>
        <p>The alert will be shown everytime you load the page.</p>
        <script>
            alert('Hello World!');
        </script>
	</body>
</html>

الأمر document.getElementById()

يتيح لك هذا الأمر الوصول إلى عنصر موجود في صفحات الويب من خلال المعرّف id الذي قمت بإعطائه له.
بعد الوصول للعنصر يمكنك بسهولة تعديل تصميمه، تغيير خصائصه، حذفه إلخ..

في حال وجود أكثر من عنصر عندهم نفس الـ id فإن هذا الأمر سيتمكن من الوصول لأول عنصر يجده فقط.


الخاصية innerHTML

أي عنصر في صفحات الويب تصل له بواسطة جافاسكربت، يمكنك إعطاؤه محتوى جديد بواسطة هذه الخاصية.
المحتوى الذي تضعه يمكن أن يكون نص عادي أو نص يمثّل كود HTML مما يعني أنه يمكنك استخدامها لإضافة عناصر جديدة في الصفحة.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<body>
        <h2>JavaScript innerHTML Property</h2>
        <p id="demo"></p>
        <script>
            document.getElementById('demo').innerHTML = 'Added by <b>JavaScript</b>';
        </script>
	</body>
</html>

الخاصية style

أي عنصر تصل له في جافاسكربت، يمكنك تعديل تصميمه بواسطة هذه الخاصية.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<body>
        <h2>JavaScript Alert</h2>
        <p id="demo">JavaScript changed my color to red.</p>
        <script>
            document.getElementById('demo').style.color = 'red';
        </script>
	</body>
</html>

أسماء خصائص CSS نكتبها بأسلوب Camel Case عند التعامل معها بواسطة جافاسكربت و إليك بعض الأمثلة:

  • إذا كان إسم الخاصية يتألف من كلمة واحدة مثل display فإننا نقول style.display
  • إذا كان إسم الخاصية يتألف من أكثر من كلمة مثل margin-top فإننا نقول style.marginTop

الفرق بين وضع السكربت في الوسم <head> و الوسم <body>

يمكنك وضع السكربت في أي مكان تريده في الصفحة سواء بداخل <head> أو الوسم <body> و تستطيع وضع العدد الذي تريده من السكربتات و لكن عليك معرفة أن مكان وضعه قد يؤثر على عملها.

في حال وضع السكربت في الوسم <head> فهذا يعني أنه سيتم تنفيذ جميع أوامره قبل قيام المتصفح بعرض عناصر HTML الموجودة في الصفحة مما قد يسبب مشكلتين:

  1. إن كنت قد وضعت أمر يتنفذ على عنصر محدد في الصفحة فهذا الأمر سيؤدي إلى مشكلة سببها أنه حين يحاول الوصول للعنصر لن يجده، فهو لم يتم إضافته في الصفحة بعد.
  2. إذا كان حجم السكربت كبير فهذا سيجعل الصفحة تتطلب بعض الوقت ريثما يتم تحميل و تنفيذ السكربت مما قد يجعل المستخدم يظن أن الصفحة معلّقة و يخرج منها!

بالمقابل، إذا تم وضع السكربت في آخر الصفحة أو في آخر الوسم <body> فإنه بعد ظهور الصفحة بالكامل أمام المستخدم سيتم تنفيذ السكربت. لذا بالتأكيد وضع السكربت في نهاية الصفحة هو الخيار الأفضل و الذي ينصح باعتماده.

بالنسبة لنا نحن، في حال وجدتنا قد وضعنا السكربت بداخل الوسم <head> رغم أننا نصحنا بعدم فعل ذلك فكن على يقين أن حجم الكود صغير جداً و لا يسبب بطئ في تحميل الصفحة و الأهم من ذلك كله أن هدفنا يكون جعلك قادر على قراءة الكود بشكل أسهل.


وضع السكربت في الوسم <head>

في المثال التالي قمنا بوضع سكربت بداخل الوسم <head> مما يعني أنه سيحاول تنفيذ الأمر الموضوع فيه قبل أن يتم عرض محتوى الصفحة.
الأمر الموضوع في السكربت مهمته الوصول إلى العنصر الذي يملك id يساوي 'demo' و من ثم تغيير لونه إلى الأحمر.
سيفشل المتصفح في تنفيذ هذا الأمر لأنه حين يبحث عن العنصر لن يجده فهو سيتم إضافته في الصفحة بعد تنفيذ السكربت و ليس قبله.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <head>
        <script>
            document.getElementById('demo').style.color = 'red';
        </script>
    </head>
    <body>
        <h2>Javascript In The Head</h2>
        <p id="demo">My color will be changed to red if the script is executed.</p>
    </body>
</html>

وضع السكربت في الوسم <body>

في المثال التالي قمنا بوضع السكربت في آخر الوسم <body> مما يعني أنه سيتم تنفيذ الأمر الموضوع فيه بعدما تم بالفعل عرض محتوى الصفحة.
هذه المرة سينجح المتصفح بتنفيذ الأمر لذلك سيتم تغيير لون نص العنصر الذي يملك id يساوي 'demo' إلى الأحمر.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h2>Javascript In The Body</h2>
        <p id="demo">My color will be changed to red if the script is executed.</p>
        <script>
            document.getElementById('demo').style.color = 'red';
        </script>
    </body>
</html>

وضع السكربت في ملف خاص

التطبيق العملي لجافاسكربت في المشاريع الحقيقية يكون عادةً ما يتم بتجهيز ملف إسمه script.js و وضع كل أوامر جافاسكربت التي نحتاجها فيه. بعدها أي صفحة نحتاجه فيها نقوم بتضمينه في نهايتها.

السكربت الموجود في ملف ما و الذي تم تضمينه في صفحة الويب، بالنسبة للصفحة يسمى سكربت خارجي ( External JavaScript ).


في المثال التالي قمنا بوضع كود الجافاسكربت في ملف إسمه script.js و من ثم قمنا بتضمينه في آخر الصفحة.
السكربت يقوم بتغيير نص و لون العنصر الذي يملك id يساوي demo.

مثال

script.js 
document.getElementById('demo').innerHTML = 'This text is added by JavaScript';
document.getElementById('demo').style.color = 'red';
index.html
خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h2>External JavaScript</h2>
        <p id="demo">This text will be changed when the script is executed.</p>
        <script src="/tutorials/javascript/getting-started/script.js"></script>
    </body>
</html>

أفضل طريقة لكتابة كود جافاسكربت

بشكل عام، أي موقع تبنيه عليك تخصيص ملف واحد على الأقل إمتداده .js لتضع فيه أوامر جافاسكربت التي ستستخدمها في صفحات الموقع و من ثم تضمن هذا الملف بها بواسطة الوسم <script>.

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


فوائد وضع السكربت في ملف خاص

  • الكود يكون قابل للنقل و يمكن استخدامه في أكثر من مشروع.
  • قراءة الكود و التطوير عليه يكون أكثر سهولة.
  • قيام المتصفح بحفظ نسخة من الملف بشكل تلقائي بعد قيامه بتحميله أول مرة، مما يجعل الموقع يفتح بشكل أسرع في المرات القادمة.

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال