إعداد بيئة العمل وأول برنامج

اعداد بيئة جافاسكريبتاول برنامج javascriptتشغيل جافاسكريبتnode.js تثبيتconsole javascript

جدول مرجعي سريع

الطريقة	الاستخدام	مثال
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> مباشرة — هذا يضمن أن المتصفح يعرض محتوى الصفحة أولاً قبل تحميل وتنفيذ الجافاسكريبت، مما يُحسّن سرعة ظهور الصفحة للمستخدم.

الصياغة (Syntax)

syntax

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

التجربة السريعة عبر 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>

نصائح احترافية

—ضع وسم <script> قبل إغلاق </body> مباشرة لتحسين سرعة تحميل الصفحة.
—استخدم الخاصيتين defer أو async مع script في head إذا أردت تحميلاً غير معطّل للصفحة.
—VS Code مع إضافة "Live Server" يمنحك تجربة تطوير سريعة مع إعادة تحميل تلقائية.
—تثبيت Node.js يمنحك بيئة تطوير احترافية ومدير حزم npm للمشاريع الحقيقية.

الدرس السابق

ما هي جافاسكريبت؟

الدرس التالي

المخرجات وطرق العرض

الطريقة

الاستخدام

مثال

Console المتصفح

تجربة سريعة لسطر كود

F12 ثم Console

Script داخل HTML

كود قصير خاص بصفحة معينة

ملف .js خارجي

كود منظم يُعاد استخدامه

Node.js

تشغيل JS خارج المتصفح

node app.js