كيف ومن أين تبدأ في تعلم لغة جافاسكريبت :المتطلبات
لغة جافاسكريبت :المتطلبات
مقدمة:
تعتبر كتابة كود جافا سكريبت أمرًا أساسيًا في تطوير الويب،يقدم هذا الدرس نظرة شاملة حول كيفية كتابة وتنفيذ كود جافا سكريبت باستخدام محررات الأكواد مثل notepad- Visual Studio Code.
ستتناول الخطوات الأساسية مثل إنشاء وتنظيم ملفات الجافا سكريبت، وتضمينها في صفحة HTML، واستخدام وحدة التحكم في المتصفح للاختبار.
سيساعد هذا الدرس المبتدئين في الدخول إلى عالم كتابة الشيفرة البرمجية باستخدام أداة تطويرية قوية وسهلة الاستخدام.
أين نكتب كود جافا سكريبت
يمكنك كتابة كود JavaScript في أي محرر نصوص يفضل عادةً لتطوير الويب.
هنا بعض المحررات الشائعة:
محررات النصوص:
Visual Studio Code:
هو محرر نصوص مفتوح المصدر وخفيف الوزن ومميز لتطوير الويب.
يوفر دعمًا ممتازًا لتطوير تطبيقات الويب باستخدام JavaScript.
Sublime Text:
محرر نصوص آخر يستخدم على نطاق واسع.
لتنزيل نسخة انقر هنا
Atom:
محرر نصوص آخر تم تطويره بواسطة GitHub.
بيئات تطوير متكاملة (IDEs):
WebStorm:
تم تصميمه خصيصًا لتطوير تطبيقات الويب ويدعم JavaScript بشكل كامل.
لتنزيل نسخة انقر هنا
محررات عبر الإنترنت:
يمكنك استخدام محررات النصوص عبر الإنترنت مثل JSFiddle أو CodePen لتجربة وتشغيل الكود JavaScript بسرعة ودون الحاجة إلى تثبيت برامج.
بمجرد كتابة كود JavaScript، يمكنك تضمينه في صفحة HTML الخاصة بك باستخدام عنصر <script>، وذلك عادةً داخل العنصر <head> أو <body> في صفحة HTML. على سبيل المثال:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web Page</title> <!-- Include your JavaScript file or write inline code --> <script src="path/to/your/script.js"></script> </head> <body> <!-- Your HTML content here --> </body> </html>
يمكنك أيضًا كتابة الكود مباشرة داخل العناصر <script> دون الحاجة إلى ملف خارجي:
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<!-- Inline JavaScript code -->
<script>
// Your JavaScript code here
alert("Hello, World!");
</script>
</head>
<body>
<!-- Your HTML content here -->
</body>
</html>
تأكد من أنك تمتلك ملف HTML يتضمن العنصر <script> لتضمين كود JavaScript وتشغيله على صفحتك.
خطوات كتابة كود جافا سكريبت في نوت باد
النوت باد برنامج ملحق بنسخ أنظمة التشغيل وندوز فهو موجود مع أي نسخة وندوز فلن تحتاج الى تثبيته
إليك خطوات بسيطة لكتابة كود JavaScript في Notepad على نظام التشغيل Windows:
فتح Notepad:
ابحث عن Notepad في قائمة “ابدأ” أو استخدم مفتاح البحث للعثور عليه.
كتابة الكود:
ابدأ بكتابة كود JavaScript الخاص بك في Notepad.
حفظ الملف:
بعد كتابة الكود، انقر فوق “ملف” في شريط القوائم واختر “حفظ باسم” (أو اضغط Ctrl + S).
حدد المجلد الذي تريد حفظ الملف فيه.
اختر اسم الملف مع امتداد “.html”، على سبيل المثال “index.html”. يمكنك استخدام الامتداد “.html” لأننا سنستضيف كود JavaScript داخل صفحة HTML.
اختيار نوع الملف:
قم بتحديد “جميع الملفات” في نافذة حفظ الملف لتأكيد أنك ستحفظه كملف HTML وليس كملف نصي عادي.
حفظ الكود:
انقر فوق “حفظ” لحفظ الملف.
فتح الملف في متصفح الويب:
افتح الملف الذي قمت بحفظه في متصفح الويب الخاص بك (انقر بزر الماوس الأيمن واختر “فتح باستخدام” ثم اختر متصفح الويب).
فحص نتائج الكود:
قم بفتح نافذة مطور الويب في متصفحك (اضغط F12 أو انقر بزر الماوس الأيمن واختر “فتح عناصر” أو “فتح مطور الويب”).
انتقل إلى علامة التبويب “Console” لرؤية أي رسائل أخطاء أو إخراج من الكود الخاص بك.
هذه الخطوات تمكنك من كتابة وتشغيل لغة JavaScript باستخدام Notepad.
ومن المهم أن تتأكد من حفظ الملف باسم “.html” لتمكين تضمين الكود داخل صفحة HTML.
مثال
بالطبع! إليك مثال متكامل لكتابة كود JavaScript داخل صفحة HTML باستخدام Notepad. يمكنك نسخ ولصق الكود التالي فص صفحة النوت باد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
<!-- Inline JavaScript code -->
<script>
// Your JavaScript code here
function greet() {
var name = prompt("What's your name?");
alert("Hello, " + name + "!");
}
</script>
</head>
<body>
<h1>Welcome to the JavaScript Example Page</h1>
<p>Click the button below to greet:</p>
<!-- Button to trigger the JavaScript function -->
<button onclick="greet()">Say Hello</button>
</body>
</html>
تظهر النوتب باد وبها كود الجافا سكربيت في الاطار الاحمر داخل وكود الاتش تي ام ال
هذا المثال يحتوي على صفحة HTML تحتوي على كود JavaScript بسيط. عند تشغيله في متصفح الويب، ستظهر صفحة ترحيب تحتوي على زر “Say Hello”، وعند النقر على الزر، سيتم فتح نافذة توجيه للمستخدم لإدخال اسمه، ثم سيتم عرض رسالة تحية باستخدام الاسم الذي تم إدخاله.
يمكنك حفظ هذا الكود في ملف باسم “index.html” وفتحه باستخدام متصفح الويب الخاص بك لرؤية النتيجة.
أين نضع كود الجافا سكريبت؟
يمكن وضع كود JavaScript في مواقع مختلفة داخل صفحة HTML، والمكان الذي تضع فيه الكود يؤثر على وقت تنفيذه وعلى تأثيره على صفحتك.
إليك بعض المواقع الشائعة لوضع كود JavaScript:
داخل عنصر <script> في <head>:
يمكنك وضع كود JavaScript داخل عنصر <script> داخل عنصر <head> في صفحة HTML.
هذا يعني أن الكود سيتم تحميل وتنفيذه عند بدء تحميل الصفحة.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript in Head Example</title>
<script>
// Your JavaScript code here
function greet() {
alert("Hello, World!");
}
</script>
</head>
<body>
<!-- Your HTML content here -->
</body>
</html>
داخل عنصر <script> في نهاية <body>:
يمكن كتابة كود حافا سكريبت داخل وسم Body
وضع العنصر <script> في نهاية <body> يسمح بتحميل محتوى الصفحة أولاً قبل تحميل وتنفيذ الكود، مما يمكن من تحسين وقت تحميل الصفحة.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript at End of Body Example</title>
</head>
<body>
<!-- Your HTML content here -->
<script>
// Your JavaScript code here
function greet() {
alert("Hello, World!");
}
</script>
</body>
</html>
كتابة كود جافا سكريبت في ملف خارجي:
يمكنك كتابة كود JavaScript في ملف خارجي وتضمينه في صفحة HTML باستخدام عنصر <script> مع الخاصية src.
هذا يفصل الكود عن صفحة HTML ويجعل الصفحة أكثر تنظيماً.
وهنا يجب اشاء ملفين ملف به كود الجافاسكريب وملف الخاص بصفحة الاتش تي ام ال ثم نستدعي ملف الجافاسكريبت داخل كود صفحة الاتش تي ام ال بكود الاستدعاء كما يلي
1)انشاء ملف الجافاسكريبت
مثال: main.js
// main.js
function greet() {
alert("Hello, World!");
}
2)انشاء صفحة الاتش تي ام ال
صفحة HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External JavaScript Example</title> <script src="path/to/main.js"></script> </head> <body> <!-- Your HTML content here --> </body> </html>
اختيار موقع وضع الكود يعتمد على احتياجات مشروعك ومتطلبات تحميل الصفحة وأداء التطبيق.
خطوات كتابة كود الجافا سكريبت في ملف خارجي :
مثال آخر
خطوات كتابة كود JavaScript في ملف خارجي وتضمينه في صفحة HTML:
1)إنشاء ملف JavaScript:
نقم بإنشاء ملف جديد ونحفظه بامتداد “.js”. على سبيل المثال، يمكنك تسميته “main.js”.
في هذا الملف، نقم بكتابة كود JavaScript الخاص بنا.
ملف: main.js
// main.js
function greet() {
var name = prompt("What's your name?");
alert("Hello, " + name + "!");
}
2)إنشاء ملف HTML وتضمين الملف الخارجي:
نقم بإنشاء ملف HTML جديد أو استخدام ملف HTML موجود، و قم بتضمين الملف الخارجي في عنصر <script> داخل <head> أو <body>.
ملف: index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External JavaScript Example</title> <!-- Include the external JavaScript file --> <script src="path/to/main.js"></script> </head> <body> <h1>Welcome to the JavaScript Example Page</h1> <p>Click the button below to greet:</p> <!-- Button to trigger the JavaScript function from the external file --> <button onclick="greet()">Say Hello</button> </body> </html>
يجب على الخاصية src في عنصر <script> أن تحتوي على المسار الصحيح إلى ملف JavaScript الخارجي.
3) فتح الملف HTML في متصفح الويب:
قم بفتح ملف HTML في متصفح الويب الخاص بك.
اختبار الكود:
قم بالنقر على الزر “Say Hello” واختبار الكود. ستظهر نافذة توجيه لإدخال اسم، وبعد إدخاله، ستظهر رسالة تحية.
هذه هي الخطوات الأساسية لكتابة كود JavaScript في ملف خارجي وتضمينه في صفحة HTML. يجعل هذا النهج الشيفرة أكثر تنظيماً ويسهل إعادة استخدامها في صفحات HTML أخرى.
خطوات كتابة كود جافا سكريبت في المتصفح
In the browser console
لكتابة وتنفيذ كود JavaScript في وحدة التحكم (console) في متصفح الويب، يمكنك اتباع الخطوات التالية:
فتح وحدة التحكم:
قم بفتح متصفح الويب الخاص بك (مثل Google Chrome أو Firefox أو Safari).
انقر بزر الماوس الأيمن في أي مكان على الصفحة واختر “فتح مطور الويب” أو “Inspect” أو ما شابه ذلك.
انتقل إلى علامة التبويب “Console”.
كتابة الكود:
قم بكتابة كود JavaScript مباشرة في وحدة التحكم.
// مثال بسيط
console.log("Hello, World!");
// مثال آخر: إنشاء دالة
function greet(name) {
console.log("Hello, " + name + "!");
}// استدعاء الدالة
greet("Omar");
تنفيذ الكود:
انقر على “Enter” لتنفيذ الكود المكتوب.
ستظهر النتائج مباشرة في وحدة التحكم.
يمكنك استخدام وحدة التحكم في المتصفح لاختبار قطع صغيرة من الكود، فحص قيم المتغيرات، وتنفيذ أوامر JavaScript على الفور.
يعد هذا أداة قوية لتطوير وفحص الشيفرة الخاصة بك أثناء العمل على صفحات الويب.
خطوات كتابة كود جافا سكريبت في فيجيوال ستديو كود:
كيفية كتابة كود جافا سكريبت في برنامج Visual Studio Code:
تثبيت برنامج Visual Studio Code:
إذا لم تكن قد قمت بتثبيت برنامج Visual Studio Code بعد، يمكنك تنزيله من الموقع الرسمي: Visual Studio Code.
فتح برنامج Visual Studio Code:
افتح برنامج Visual Studio Code بعد التثبيت.
إنشاء ملف جافا سكريبت جديد:
أنشئ ملف جافا سكريبت جديد عبر اختيار “File” > “New File” أو بالضغط على Ctrl + N.
احفظ الملف بامتداد “.js”. على سبيل المثال، احفظه باسم “app.js”.
كتابة الكود في الملف:
اكتب الكود الخاص بك في الملف الجديد. على سبيل المثال:
// app.js
function greet() {
var name = prompt("ما اسمك؟");
alert("مرحبًا، " + name + "!");
}
greet();
حفظ الملف:
احفظ ملف الجافا سكريبت عبر اختيار “File” > “Save” أو بالضغط على Ctrl + S.
فتح الطرفية المدمجة:
افتح الطرفية المدمجة في برنامج Visual Studio Code عبر اختيار “View” > “Terminal” أو بالضغط على ` (العلامة القريبة من زر الـ 1 على لوحة المفاتيح).
تشغيل ملف الجافا سكريبت:
في الطرفية المدمجة، قم بتشغيل ملف الجافا سكريبت باستخدام أمر node.
على سبيل المثال:
node app.js
يُفترض أنك قد قمت بتثبيت Node.js على جهاز الكمبيوتر الخاص بك.
تثبيت Node.js (إذا لزم الأمر):
إذا لم تكن قد قمت بتثبيت Node.js، يمكنك تنزيله من الموقع الرسمي: Node.js.
لتثبيت النود انقر هنا
اتبع التعليمات لتثبيته على نظام التشغيل الخاص بك.
التصحيح (اختياري):
يوفر برنامج Visual Studio Code ميزات قوية للتصحيح. يمكنك تعيين نقاط توقف، وفحص القيم المتغيرة، وتنفيذ الكود بشكل تفصيلي.
لاستخدام ميزة التصحيح، انقر على أيقونة “Run” و “Debug” في الشريط الجانبي، ثم انقر على “Run and Debug”. اختر “Node.js” كبيئة تشغيل.
هذا الإعداد يتيح لك كتابة واختبار كود جافا سكريبت باستخدام برنامج Visual Studio Code، مستفيدًا من ميزاته وامتداداته لتحسين تجربة التطوير.
اختبار اختيار من متعدد على هذا الدرس
اختبار بسيط حول كيفية كتابة كود جافا سكريبت في Visual Studio Code. سيتكون الاختبار من عدة أسئلة متعددة الاختيارات. يُرجى اختيار الإجابة الصحيحة لكل سؤال.
السؤال 1:
ما هو التمديد الذي يجب حفظ ملف جافا سكريبت به في Visual Studio Code؟
أ. .js
ب. .html
ج. .css
د. .vscode
السؤال 2:
في أي مكان يمكننا كتابة كود JavaScript في صفحة HTML ليتم تنفيذه عند تحميل الصفحة؟
أ. داخل <head>
ب. في أسفل <body>
ج. داخل <footer>
د. بجانب العنوان <title>
السؤال 3:
ما هي الطريقة الصحيحة لتضمين ملف جافا سكريبت خارجي في صفحة HTML باستخدام عنصر <script>؟
أ. <script src=”path/to/script.js”></script>
ب. <script link=”path/to/script.js”></script>
ج. <script href=”path/to/script.js”></script>
د. <script file=”path/to/script.js”></script>
السؤال 4:
كيف يمكننا فتح وحدة التحكم (console) في متصفح الويب لتنفيذ كود JavaScript أثناء تطوير الصفحة؟
أ. Ctrl + Shift + C
ب. Ctrl + Alt + J
ج. F12 أو النقر بزر الماوس الأيمن واختيار “فتح مطور الويب”
د. Alt + F4
السؤال 5:
ما هي الخطوة التي يمكن أن تساعد في تنظيم الشيفرة وجعلها أكثر قابلية للصيانة؟
أ. استخدام أكواد الألوان بشكل كبير
ب. تجميع كل الأكواد في ملف واحد
ج. استخدام ملفات الوحدات (Modules)
د. تجنب كتابة التعليقات
السؤال 6:
كيف يمكننا تشغيل ملف جافا سكريبت في وحدة التحكم باستخدام Node.js؟
أ. node app.js
ب. run app.js
ج. execute app.js
د. start app.js
الإجابات:
1-أ
2-أ
3-أ
4-ج
5-ج
6-أ
السؤال 7:
ما الأمر الذي يتيح لك فتح Integrated Terminal في Visual Studio Code؟
أ. Ctrl + Alt + T
ب. Ctrl + Shift + P واختيار “Integrated Terminal”
ج. Alt + T
د. Ctrl + Shift + I
السؤال 8:
كيف يمكنك تعليق سطر في كود JavaScript في Visual Studio Code؟
أ. // هذا تعليق
ب. /* هذا تعليق */
ج. # هذا تعليق
د. — هذا تعليق
السؤال 9:
ما هو الاختلاف بين <script> داخل <head> و <script> في أسفل <body> من حيث وقت تنفيذ الكود؟
أ. لا فرق، يتم تنفيذ الكود في نفس الوقت
ب. <script> في <head> يتم تنفيذه عند بدء تحميل الصفحة، أما <script> في أسفل <body> يتم تنفيذه بعد تحميل الصفحة
ج. <script> في أسفل <body> يتم تنفيذه عند بدء تحميل الصفحة، أما <script> في <head> يتم تنفيذه بعد تحميل الصفحة
د. الاختلاف يعتمد على سرعة الاتصال بالإنترنت
السؤال 10:
كيف يمكنك تشغيل Visual Studio Code في وضع التصحيح (debug mode) لتتبع تنفيذ كود JavaScript الخاص بك؟
أ. النقر على زر “Run” في شريط الأدوات العلوي
ب. النقر بزر الماوس الأيمن على الكود واختيار “Run in Debug Mode”
ج. النقر بزر الماوس الأيمن في Integrated Terminal واختيار “Debug”
د. النقر على زر “Debug” في الشريط الجانبي
السؤال 11:
كيف يمكنك إيقاف تنفيذ برنامج JavaScript في وحدة التحكم (console) في متصفح الويب؟
أ. Ctrl + C
ب. Ctrl + D
ج. stop()
د. quit()
السؤال 12:
ما هو الأمر الذي يستخدم لاستيراد وحدة (module) في ملف JavaScript؟
أ. import
ب. require
ج. include
د. load
الإجابات:
7-ب
8-أ
9-ب
10-ج
11-أ
12-ب