❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • أين تكتب كود الجافاسكربت
  • أوامر أساسية في جافاسكربت
  • الفرق بين وضع السكربت في الوسم <head> و الوسم <body>
  • وضع السكربت في ملف خاص
  • أفضل طريقة لكتابة كود جافاسكربت

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

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


الشكل العام لكود جافاسكربت

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

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

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

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

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

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

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


الأمر document.write()

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

مثال

<script>
document.write('Added by JavaScript!');
</script>
<script> document.write('Added by JavaScript!'); </script>

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

Added by JavaScript!
جرب الكود

الأمر alert()

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

مثال

<script>
alert('Hello World!');
</script>
<script> alert('Hello World!'); </script>
جرب الكود

الأمر document.getElementById()

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

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


الخاصية innerHTML

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

مثال

<script>
document.getElementById('demo').innerHTML = 'Added by <b>JavaScript</b>';
</script>
<script> document.getElementById('demo').innerHTML = 'Added by <b>JavaScript</b>'; </script>
جرب الكود

الخاصية style

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

مثال

<script>
document.getElementById('demo').style.color = 'red';
</script>
<script> document.getElementById('demo').style.color = 'red'; </script>
جرب الكود

أسماء خصائص 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>My color will be changed to red if the script is executed.</p>
</body>
</html>
<!DOCTYPE html> <html> <head> <script> document.getElementById('demo').style.color = 'red'; </script> </head> <body> <h2>Javascript In The Head</h2> <p>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>My color will be changed to red if the script is executed.</p>
<script>
document.getElementById('demo').style.color = 'red';
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> </head> <body> <h2>Javascript In The Body</h2> <p>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';
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="script.js"></script>
</body>
</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="script.js"></script> </body> </html>
جرب الكود

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

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

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


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

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