| الطريقة | الاستخدام | مثال |
|---|---|---|
| Console المتصفح | تجربة سريعة لسطر كود | F12 ثم Console |
| Script داخل HTML | كود قصير خاص بصفحة معينة | <script>...</script> |
| ملف .js خارجي | كود منظم يُعاد استخدامه | <script src="app.js"> |
| Node.js | تشغيل JS خارج المتصفح | node app.js |
لكتابة وتشغيل جافاسكريبت لا تحتاج تثبيت أي برنامج معقد — المتصفح نفسه هو بيئة التشغيل الجاهزة. توجد ثلاث طرق أساسية لتشغيل كود JavaScript: الأولى عبر وحدة تحكم المطور (Developer Console) بالضغط على F12 أو Ctrl+Shift+I ثم اختيار تبويب Console، حيث يمكنك كتابة أي سطر جافاسكريبت وتنفيذه فوراً — مثالية للتجربة السريعة.
الطريقة الثانية هي كتابة الكود داخل وسم script في ملف HTML، إما مباشرة بين الوسمين <script> و </script>، أو عبر الإشارة لملف خارجي بامتداد .js باستخدام الخاصية src. الطريقة الثالثة والأكثر احترافية هي استخدام محرر أكواد مثل Visual Studio Code، وهو مجاني ويدعم JavaScript بشكل ممتاز مع الإكمال التلقائي وتحديد الأخطاء أثناء الكتابة.
لبناء مشروع حقيقي، تحتاج عادة لتثبيت Node.js من الموقع الرسمي — وهو يمنحك أيضاً أداة npm (مدير الحزم) لتثبيت المكتبات، ويسمح لك بتشغيل ملفات .js مباشرة من الطرفية (Terminal) دون الحاجة لمتصفح، عبر الأمر node filename.js.
أفضل مكان لوضع وسم <script> في صفحة HTML هو قبل إغلاق وسم </body> مباشرة — هذا يضمن أن المتصفح يعرض محتوى الصفحة أولاً قبل تحميل وتنفيذ الجافاسكريبت، مما يُحسّن سرعة ظهور الصفحة للمستخدم.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>أول برنامج</title> |
| 6 | </head> |
| 7 | <body> |
| 8 | |
| 9 | <h1>صفحتي الأولى</h1> |
| 10 | |
| 11 | <!-- الجافاسكريبت هنا، قبل إغلاق body --> |
| 12 | <script> |
| 13 | console.log("مرحباً بالعالم!"); |
| 14 | </script> |
| 15 | |
| 16 | </body> |
| 17 | </html> |
مثال 1: التجربة السريعة عبر Console
| 1 | // جرّب هذا الكود مباشرة في Console المتصفح (F12) |
| 2 | console.log("مرحباً بالعالم!"); |
| 3 | console.log(2 + 2); |
| 4 | console.log("اسمي: " + "أحمد"); |
مثال 2: ملف جافاسكريبت خارجي
| 1 | // ملف script.js منفصل |
| 2 | function sayHello() { |
| 3 | console.log("مرحباً من ملف خارجي!"); |
| 4 | } |
| 5 | sayHello(); |
| 6 | |
| 7 | // وفي HTML: |
| 8 | // <script src="script.js"></script> |