البحث في الموقع

يهدِف هذا الدّليل إلى شرح طريقة كتابة سكربتات Shell لتحقيق أغراض مختلفة. يُمكن أن تُستخدم سكربتات Shell لتنفيذ أوامر عديدة، أمر واحد بمعطَيات Arguments كثيرة معقَّدة، أو واجهات أكثر سهولةً في الاستخدام لتوزيع عملك. في الأساس، تُستخدَم سكربتات Shell لتسهيل بعض الأعمال بتشغيلها آليًّا دون اللّجوء لإعادة كتابتها في كلّ مرة تحتاجها. أساسيّات كتابة سكربتات Shell1- تهيئة مجلّد العملمن الجيّد، قبل البدء في كتابة سكربتات Shell، إعدادُ مجلّد لوضعها فيه. يُنصَح بوضع السكربتات الشّخصيّة في مجلّد يوجد على المسار bin/~. ننشئ هذا المجلّد عبر الأمر التّالي: mkdir ~/binنُضيف مسار المجلّد إلى المتغيّر PATH وذلك بتعديل ملفّ etc/profile/ على النّحو التّالي: sudo nano /etc/profileونُضيف الأسطُر التّالية إلى الملفّ: PATH=$PATH:$HOME/bin export PATHاستخدم زرّي CTRL وO لحفظ التّعديلات، وCTRL+X للخروج من محرّر النّصوص nano. ثمّ نعتمد التّغييرات عبر تنفيذ الأمر: source /etc/profileبعض توزيعات لينكس لا تدعم أمر source، في هذه الحالة ينبغي إعادة تشغيل النّظام لاعتماد التّعديلات: sudo rebootملحوظة: للتّأكّد من اعتماد التّغييرات استخدِم الأمر التّالي: printenv PATHوتأكّد من وجود مسار مجلّد السكربتات ضمن المسارات العروضة (يُفصَل بين المسارات بنقطتيْن عموديّتيْن هكذا :). 2- إنشاء ملفّينبغي إنشاء ملفّ تنفيذيّ Executable file حتى يُمكن تشغيل السكربت. الأمران التّاليّان يؤدّيان هذه المهمّة؛ الأوّل ينشِئ ملفًّا والثّاني يجعله قابلًا للتّنفيذ: touch ~/bin/firstscript chmod +x ~/bin/firstscriptنفتح الملفّ بمحرّر نصوص nano للبدْء في إضافة الأوامر إلى السكربت: nano ~/bin/firstscriptتجب إضافة السّطر التّالي في بداية الملفّ حتّى يعرف النّظام أنّه سكربت Shell وبالتّالي ينفّذ الأوامر الموجودةَ فيه بالطّريقة الصّحيحة: #!/bin/shأصبح الملفّ الآن جاهِزًا ليستقبل أي أمر من أوامر لينكس، مثلًا: clear echo "Hello World!"نحفظ الملفّ (CTRL+O) ثمّ نخرج من محرّر النّصوص (CTRL+X). تكفي الآن كتابة اسم السكربت ثم الضّغط على Enter لتنفيذه: firstscriptلا يهمّ من أيّ المسارات نفّذت السكربت، مادام مجلّد العمل موجودًا ضمن متغيّر البيئة PATH. ينبغي أن تحصُل على النّتيجة التّاليّة: 3- مثال لسكربتيُعدّ التّشغيل الآليّ للأعمال المتكرّرة أحد أكثر المجالات الّتي تُستخدَم فيها سكربتات Shell. على سبيل المثال؛ إذا كنت دائمًا تنقل الكثير من الملفّات إلى مجلّد نسخ احتيّاطي Backup، وليكن backup/~، فإنّ بإمكانك إعداد سكربت ينقل أي ملفّ تحدّده إلى المجلّد المطلوب. بهذه الطّريقة يمكن أن تكتُب: filebackup file-name1 file-name2 ...فلنلقِ نظرة على ما نحتاج لمعرفته، قبل البدْء في كتابة السكربتات. أوّل ملحوظة هي أنّ سكربتات Shell لا تستخدم التّرميز الصّلب Hard coding. يعني هذا، في إطار مثالنا، أنّه يمكنك بسهولة تغيير مجلّد النّسخ الاحتيّاطي إذا أردت. كلّ ما عليك فعله هو تعديل أحد الأسطُر الأولى في ملفّ السكربت؛ حيثُ سيظهر المتغيّر الّذي سيخزّن مسار المجلّد مرةً واحدة فقط. لن تحتاج لتعديل ملفّ السكربت لتجربة التّعامل مع المتغيّرات، يمكن ذلك مباشرةً في سطر الأوامر عن طريق كتابة ما يلي: testvariable=teststringأعطينا القيمة teststring للمتغيّر testvariable. يطبع أمر echo محتوى المتغيّر (لاحِظ استخدام $ أمام اسم المتغيّر): echo $testvariableستظهر في سطر الأوامر قيمة المتغيّر testvariable أيّ teststring. يمكننا الآن بعد هذا الاختبار البسيط لعمل المتغيّرات البدءُ في كتابة السّكربت؛ الخطوات هي نفسُها الّتي تحّثنا عنها أعلاه: إنشاء الملفّ، جعله قابلًا للتّنفيذ، ثمّ البدْء في تحريره: touch ~/bin/filebackup chmod +x ~/bin/filebackup nano ~/bin/filebackupينبغي الانتباه إلى أنّ أي سطر يبدأ بعلامة # تعليق، أي أنّه لن يؤثّر على عمل السكربت إلا إذا أُتبعت # بعلامة تعجّب ! في السّطر الأوّل من برنامجك؛ في هذه الحالة يُطلق عليها اسم shebang والّتي شرحنا سابقًا أنّ نظام التّشغيل يعرف عن طريقها أنّ هذا الملفّ سكربت Shell ويُنفّذ الأوامر الموجودة فيه. يأخذ السكربت الشّكلَ التّالي: #!/bin/sh #Backup script #Description: makes a copy of any given file at the backup folder #Author: Your Name #Date: 8/10/2013 #Backup folder; set this variable to any folder you have write permissions on BACKUPFOLDER=~/backup #The script will make sure the folder exists mkdir -p $BACKUPFOLDER #Now the script will copy the given file to the folder cp -a $@ $BACKUPFOLDERنشرح، بعد حفظ الملفّ (CTRL+O) والخروج من محرّر النّصوص (CTRL+X)، عمل السكربت. الأسطُر الأولى كلّها تعليقات؛ عرّفنا بعدها متغيّرًا باسم BACKUPFOLDER نضع فيه مسار المجلّد حيث نُريد نسخ الملفّات. ننفّذ بعدها الأمر mkdir -p $BACKUPFOLDER الّذي يُنشئ مجلّدًا في المسار الموجود في المتغيّر BACKUPFOLDER، إذا كان المجلّد موجودًا مسبقًا لن تظهر أي رسالة خطأ نظرًا لاستخدام خيّار p-. تدلّ علامة @$ في الأمر التّالي، cp، على المعطيات الّتي يمرّرها المستخدِم أثناء تنفيذ السّكربت. لتمرير المعطيات للسكربت فإنّ المستخدِم يكتبها مباشرةً بعد اسم السكربت. يوجد مجلّد الحفظ (وِجهة النّسخ، في هذه الحالة قيمة المتغيّر BACKUPFOLDER) مباشرةً بعد المعطيات الّتي يمرّرها المستخدِم. لتجربة السكربت نفّذ ما يلي، على اعتبار أنّ file1 وfile ملفّان يوجدان في المجلّد حيثُ تنفّذ السكربت: filebackup file1 fileيمكنك إضافة ملفّات بالعدد الّذي تريد، بكتابة أسمائها بعد اسم السكربت، وستُنقَل جميعها إلى مجلّد النّسخ الاحتيّاطيّ. أوامر أساسيّة في Shellتوجد بعض الأوامر الأساسيّة لعرض المعلومات للمستخدِم، ولأخذها منه أيضًا. 1- أمر echoيُستخدَم أمر echo لعرض معلومات للمستخدِم، سواءٌ كانت هذه المعلومات نصًّا أو متغيّرات أو خليطًا من الاثنين. يُمكن استخدام الخيّاريْن n- وe- مع أمر echo؛ يمنع خيّار n- طباعة سطر جديد بعد النّصّ المعروض، أما خيّار e- فيُفعّل استخدام مجموعة الرموز التّالية داخل النّصّ: a\: صوت تحذير - Alert soundb\: فراغ للخلف Backspacec\: لا تطبع سطرًا جديدًاe\: مِحرف الخلوص Escape charactern\: سطر جديدr\: رجوع إلى السّطرt\: جدولة أفقيّة0xx\: محرف ASCII\\: خط مائل عكسي Backslash.على سبيل المثال، يؤدّي الأمران التّاليّان نفس الشّيئ بالضّبط (لاحِظ وجود النّص بين علامتيْ اقتباس): echo -e “Text\c” echo -n “Text”لعرض قيمة متغيّر عن طريق أمر echo أضف اسم المتغيّر مسبوقًا بعلامة $: string=World! echo "Hello $string"يُمكنك خلط نص، أوامر ومتغيّرات في سلسلة محارف String واحدة. يمكنك أيضًا كتابة أمر من سطر واحد يعرض نصًّا من أسطر عديدة؛ كلّ ما عليك فعله هو كتابة n\ في المكان الّذي تُريد بدْءَ سطرٍ جديد منه. 2- تهيئة النّصوص باستخدام أمر echoيُمكن لأمر echo عرض النّصوص وتهيئتها بألوان وأساليب متنوّعة؛ ولكنّ نتائج هذه التّهيئة قد لا تكون دومًا متشابهة في الطّرفيّات الموجودة. يجب الانتباه إلى أنّ بعض المستخدمين قد لا يرون نتيجة تهيئة النّصوص بنفس الطّريقة الّتي تظهر لديك. لا يُشكّل هذا الأمر، بما أنّ التّغيير ظاهريّ أساسًا، مشكلًا كبيرًا في غالب الأوقات. يُعرَّف كلُّ تخصيص (جعل الخطّ عريضًا Bold، وضع خطّ تحت النّص، أو تلوينه) بمتتاليّة من محارف الخلوص Escape characters، وهي مجموعة من الرّموز تتبع المِحرف `e\’، على النّحو التّالي: echo -e "This is \e[1mBold"ينتُج عن الأمر السّابق كتابة الجملة This is Bold مع تمييز كلمة Bold بخط عريض. يوضّح الجدول التّالي بعض الرّموز شائعة الاستخدام: خطّ عريضخطّ عاديّخطّ تحت النّصّعكس الألوانe[1m\e[2m\e[4m\e[7m\ يُمكن استخدام هذه الرّموز معًا للحصول على نصّ عريض ومخطوط تحته، ثمّ إعادة تعيين التّأثيرات باستخدام الرّمز e[0m\: echo -e "\e[4mThis \e[1mis\e[0m \e[7man example \e[0mstring"جرّب الأمر وشاهد عمل الرّموز. يعمل تلوين النّصوص بنفس الطّريقة حيثُ يوجد رمز لكلّ لون. تُدرج رموز الألوان مثل ما تُدرج رموز تهيئة النّص المذكورة في الفقرة السّابقة. يوضّح الجدول التّالي رموز الألوان الأكثر شيوعًا. يوجد رمز للون النّص وآخر لخلفيّته. أسودe[30m\e[40m\أحمرe[31m\e[41m\أخضرe[32m\e[42m\أصفرe[33m\e[43m\أزرقe[34m\e[44m\أرجوانيّe[35m\e[45m\سماويّe[36m\e[46m\رمادي فاتحe[37m\e[47m\اللّون الافتراضيّe[39m\e[49m\إن أردنا مثلًا نصًّا بلون أحمر فالرّمز هوe[31m\، أمّا إذا أردنا خلفيّة بلون أحمر فالرّمز هو e[41m\. يُمكنك استخدام ألوان مختلفة لكلّ من النّص والخلفيّة، كما أنّ بإمكانك استخدام رموز تهيئة النّصّ المذكورة في الفقرة السّابقة إلى جانب رموز ألوان النّصّ والخلفيّة. 3- أمر readيُستدعى أمر read لأخذ بيانات من المستخدِم. يسجّل أمر read كلّ ما يكتبه المستخدِم ابتداءً من استدعاء الأمر إلى أن يضغط على زرّ ENTER، يسجّله في متغيّر. يوجد معطًى واحد للاستخدام مع أمر read وهو اسم المتغيّر الّذي سيُحتفظ فيه بما يكتبه المستخدِم. في ما يلي مثال لسكربت مختصَر يُنشئ مجلّدًا بالاسم الّذي يختاره المستخدِم: #!/bin/bash read foldername mkdir foldernameيُمكن ملاحظة أنّ السكربت السّابق لا يمتلك أيّ واجهة للتّفاعل مع المستخدم. كيف يُمكن للمستخدِم أن يعرف مالّذي عليه كتابته؟ 4- مثال على سكربتسنطبّق، عبر المثال التّالي، كلّ ما تعلّمناه حتى الآن. سنعرِض رسائل مخصَّصة ومنسَّقة للمستخدِم، ثمّ نأخذ منه البيانات الّتي نحتاجها. عرضنا في بداية هذا الشّرح مثالًا لسكربت ينسخ احتيّاطيًّا مجموعة من الملفّات؛ سنعيد كتابة هذا السّكربت لنطلُب من المستخدِم مالملفّات الّتي يُريد نسخَها. نعدّ بدايةً الملفّ ونفتحه للتّحرير: touch ~/bin/filebackup2 chmod +x ~/bin/filebackup2 nano ~/bin/filebackup2ونُعيد كتابته بحيث تكون لديه واجهة مع المستخدِم: #!/bin/bash #Backup script 2.0 #Description: makes a copy of any given file at the backup folder #Author: Your Name #Date: 5/27/2015 #Request the backup folder from the user: echo -e "\e[1m\e[32mFile Backup Utility\n\e[39m\e[0mPlease input your backup folder:" read BACKUPFOLDER #The script will make sure the folder exists mkdir -p $BACKUPFOLDER #Request files to be backed up: echo -e "\e[47m\e[30mWhich files do you want backed up?\e[39m\e[49m" read FILES cp -a $FILES $BACKUPFOLDERيُظهر السكربت رسالة للمستخدِم، بطريقة منسَّقة، تدعوه أوّلًا لإدخال اسم المجلّد الّذي ستُحفَظ فيه النّسخ الاحتيّاطيّة ويحتفظ باسم المجلّد في المتغيّر BACKUPFOLDER، ثمّ يُنشئ السكربت المجلّد إن لم يكن موجودًا. الخطوة التّاليّة هيّ إظهار رسالة تطلُب من المستخدم إدراج أسماء الملفّات المُراد نسخُها ويحفظها في متغيّر باسم FILES. الخطوة الأخيرة هي نسخ الملفّات إلى المجلّد عبر الأمر cp. غطّينا في الفقرات السّابقة الأوامر الأساسيّة الّتي تُمكِّن من كتابة سكربتات تتفاعل مع المستخدِم حتّى يعلم بالضّبط كيف يعمل السكربت ومالمعلومات الّتي يطلُبها. ليست كلّ السكربتات تحتاج إلى واجهة مستخدِم؛ السكربت الأوّل الّذي كتبناه أسرع من الثّاني وأفضل في كثير من الأحيان. لا تُضِف واجهة استخدام إلّا للسكربتات الّتي يحتاج المستخدِم للمساعدة في استخدامها، في هذه الحالة ستحتاج لأمر echo. التّعليمات الشّرطيّة Conditional statementsتُعدّ التّعليمات الشّرطيّة من الأمور الّتي لا غنى عنها لأيّ لغة برمجة متكاملة. سنتطرّق في هذا الجزء من الدّرس لطريقة وضع شروط وتنفيذ أوامر عند تحقّق - أو عدم تحقّق - هذه الشّروط. 1- أمر ifتُستخدَم التّعليمات الشّرطيّة لوضع شروط تُنفَّذ عند تحقّقها إجراءات معيّنة. يوجد في Shell أمر if الّذي يُتبَع بعبارة ستُختَبَر صحّتها. يُمكن لهذا العبارة أن تكون عبارة منطقيّة، رمز خروج Exit code لأمر أو بعض الأمور الأخرى. عند العمل على رموز الخروج من أوامر فإن استخدامَها مباشِر: if ls folder then echo "Folder exists" fiإذا وُجد ملفّ باسم folder فإنّ السّكربت السّابق سيُنفّذ الأمر echo "Folder exists" لأنّ رمز الخروج من أمر ls في هذه الحالة هو 0 (يُشير الرّمز 0 إلى أنّه لا توجد أخطاء في تنفيذ الأمر). أمّا إذا لم يوجد المجلَّد فلن تُعرَض الرّسالة. يجب أن تتبع كلَّ تعليمة if بthen ,وتُختَم بfi. إذا أردت التّعامل مع عبارات منطقيّة في تعليمة if فستحتاج لأمر test. توجد في Shell العوامل Operators التّاليّة لمقارنة الأعداد: eq-: يُساويne-: لا يُساويlt-: أصغر منle-: أصغر من أو يُساويgt-: أكبر منge-: أكبر من أو يُساويتوجد طريقتان لكتابة أمر test: if test 4 -gt 3أو: if [ 4 -gt 3]تؤدّي الكتابتان نفس العمل تمامًا، كما أنّهما تحتاجان أيضًا لthen وfi. مثال: if [ 20 -lt 10 ] then echo "What?" fiإذا جرّبت تنفيذ السكربت السّابق فستُلاحِظ ألّا شيءَ يُعرَض على الشّاشة؛ لأنّ الشّرط غير متحقّق، فالعدد 20 ليس أصغر من 10. ماذا لو أردنا عرض رسالة للزّائر في حال عدم تحقّق الشرط، مثل ماهو الحال في المثال السّابق؟ 2- أمر elseتُضيف else بديلًا يُنفَّذ عند عدم تحقّق الشّرط في تعليمة if. طريقة الاستخدام: if [ 20 -lt 10 ] then echo "What?" else echo "No, 20 is greater than 10." fiفي هذا المثال نتحقّق من شرط “20 أصغر من 10”، في حال كان صحيحًا نطبع كلمة “?What”، أمّا إذا لم يكن صحيحًا فنطبع عبارة “No, 20 is greater than 10.” (أي لا، 20 أكبر من 10). يُمكن، إلى جانب العبارات المنطقيّة، مفارنة سلسلة محارف ضمن تعليمة if/else. تتطلّب مقارنة المحارف صيغةً مختلفة قليلًا عن مقارنة الأعداد، ولكنّها تسخدم أمر test أيضًا. في ما يلي صيغة مقارنة سلسلة محارِف: string = string: تكون العبارة صحيحة عندما تكون السّلسلتان متساويّتيْنstring != string: تكون العبارة صحيحة عندما لا تكون السّلسلتان متساويّتيْن.string: سلسلة غير خاويّة أو غير معرَّفةn string-: سلسلة معرَّفة وغير خاويّةz string-: سلسلة معرَّفة وغير خاويّةتوجد أيضًا طُرُق لاختبار خصائص الملفّات: s file-: تكون العبارة صحيحة إذا كان الملفّ file غير فارغ.f file-: عبارة صحيحة إذا كان الملفّ file موجودًا وليسd folder-: العبارة صحيحة إذا كان folder مجلّدًا وليس ملفًّا.w file-: عبارة صحيحة إذا كان يُمكن الكتابة في الملف filer file-: يتحقّق الشّرط عندما يكون الملفّ file للقراءة فقط.x file-: تختبر هل الملفّ قابل للتّنفيذ.3- تعليمات if متداخلة Nested if’sيُمكن كتابة تعليمة if كاملة ضمن تعليمة if أخرى، في ما يُعرف بتعليمات if متداخلة. نتعرّف على عمل بتعليمات if المتداخلة في المثال التّالي بالاستعانة بأمر read: #!/bin/bash echo "Input which file you want created" read file if [ -f $file ] then echo "The file already exists" else touch $file if [ -w $file ] then echo "The file was created and is writable" else echo "The file was created but isn't writable" fi fiيطلُبُ السكربت من المستخدِم إدخال اسم ملفّ ليُنشئه، ويخزّن اسم الملفّ في المتغيّر file؛ ثمّ يختبر إن كان الملفّ موجودًا f $file-، ويُظهر رسالة بذلك إن كانت نتيجة التّحقّق إيجابيّة وإلّا يُنشئ الملفّ (touch $file). بعد إنشاء الملفّ يختبر هل يُمكن الكتابة عليه (w $file-) وإذا كانت الإجابة نعم يطبع الرّسالة The file was created and is writable وإلّا يطبع رسالة مغايِرة The file was created but isn't writable. 4- مثال على سكربتنُكمل مع سكربت النّسخ الاحتيّاطي لتحسينه. تتضمّن هذه النّسخة اختبارًا لمعرفة ما إذا كان مجلّد النّسخ موجودًا (d $BACKUPFOLDER-) وما إذا كان لدى المستخدِم امتيّاز Privilege إنشاء مجلّد. نبدأ بإنشاء السّكربت وإعداده: touch ~/bin/filebackup3 chmod +x ~/bin/filebackup3 nano ~/bin/filebackup3ثمّ تحريره: #!/bin/bash #Backup script 3.0 #Description: makes a copy of any given file at the backup folder #Author: Your Name #Date: 9/29/2013 #Request the backup folder from the user: echo -e "\e[47m\e[1m\e[32mFile Backup Utility\n\e[39m\e[0m\e[47mPlease input your backup folder:" read BACKUPFOLDER #The script will make sure the folder exists if [ -d $BACKUPFOLDER ] then echo "You backup folder exists and will be used." else mkdir $BACKUPFOLDER if [ -d $BACKUPFOLDER ] then echo "Backup folder created successfully." else echo -e "I do not have the rights to create your backup folder.\nThis script will now exit." exit 1 #exit 1 is a command that exits the script with an error code fi fi #Request files to be backed up: echo -e "\e[30mWhich files do you want backed up?\e[39m\e[49m" read FILES if [ -n $FILES ] then cp -a $FILES $BACKUPFOLDER else echo "File does not exist." fiلاحِظ أمر exit الّذي يُستخدَم لإيقاف السّكربت مع رمز خطأ. يعرض السّكربت رسالة عندما لا يوجد مجلّد للنّسخ الاحتيّاطيّ، عند إنشائه، إن لم يكن بالإمكان إنشاؤه، وعند كتابة سلسلة محارف خاويّة لأسماء الملفّات. خاتمةيضع هذا الدّرس اللّبنات الأساسيّة الّتي تمكّن من كتابة سكربتات Shell يُمكن للمستخدِم التّفاعل معها. لا زال هناك الكثير لتعلّمه من أجل كتابة برامج Shell بإمكانيّات أكبر وحلول أكثر إبداعًا، إلّا أنّ إتقان المحتوى الموجود هنا خطوة أولى في الطّريق. ترجمة بتصرّف لسلسلة مقالات An Introduction to Shell Scripting

قدّمنا في الدرس السابق جافاسكريبت وذكرنا تموضعها في الوِب بالنسبة لـHTML وCSS، كما تحدّثنا عن واجهات برمجة التطبيقات الخاصّة بالمتصفّح وتلك القادمة من طرف ثالث. سنبدأ في هذا الجزء من الدرس النظر في بعض التعليمات البرمجية، وأثناء ذلك، يمكنك استكشاف ما يحدث فعليًا عند تشغيل شفرة جافاسكريبت في صفحتك. ما الذي تفعله جافاسكريبت على صفحتك؟ لنلخص بإيجاز قصة ما يحدث عند تنزيل صفحة وِب في المتصفح. عندما يُنزّل المتصفّح الشفرة التي كتبتها، والمكوّنة من وسوم HTML، أنماط CSS وتعليمات جافاسكريبت فإنه يشغّلها داخل بيئة تنفيذ (علامة تبويب Tab في المتصفح). تشبه هذه العملية المصنع الذي يأخذ المواد الخام (الشفرة) ويُخرج المنتح (صفحة وِب). يُنفّذ معالج جافاسكريبت JavaScript engine الموجود في المتصفّح تعليمات جافاسكريبت بعد أن تُجمَّع HTML وCSS وتوضعان في صفحة وِب. يضمن انتظار التجميع أنّ بنية الصفحة وتنسيقها موجودان بالفعل عند بدء تشغيل جافاسكريبت، أي أنه عند تشغيل جافاسكريبت تكون جميع تعليمات HTML وCSS موجودة ونفّذها المتصفّح. يعدّ هذا الأمر جيّدًا، إذ أن استخدام جافاسكريبت الشائع هو تعديل HTML و CSS ديناميكًيا لتحديث واجهة المستخدم، من خلال واجهة برمجة التطبيقات DOM التي تحدّثنا عنها في الدرس السابق؛ فإن نُزِّلت تعليمات جافاسكريبت وحاول المتصفّح تشغيلها قبل أن يكون هناك HTML و CSS فستحدث أخطاء. أمان المتصفح تعدّ كل علامة تبويب Tab في المتصفح دلوًا منفصلًا لتشغيل الشفرة (تسمى هذه الدلاء “بيئات التنفيذ” Execution environments من الناحية التقنية). يعني هذا أنه في معظم الحالات تُشغَّل الشفرة في كل علامة تبويب منفصلة عن الشفرات في بقية التبويبات، ولا يمكن للتعليمات البرمجية في علامة تبويب واحدة أن تؤثر مباشرة على التعليمات البرمجية في علامة تبويب أخرى - أو على موقع وِب آخر. هذا إجراء أمني جيد. لو لم يكن هذا هو الحال، لكان بإمكان القراصنة كتابة صفحات وِب مهمّتها سرقة المعلومات من المواقع الأخرى التي يزورها المتصفّح، وغيرها من هذه الأشياء السيئة. ملاحظة: هناك طرق لإرسال التعليمات البرمجية والبيانات بين مواقع وِب / علامات تبويب مختلفة بطريقة آمنة، ولكن هذه تقنيات متقدمة لن نغطيها في هذا الدرس. جافاسكريبت قيد التشغيل عندما يواجه المتصفح كتلة تعليمات برمجية من جافاسكريبت، فإنه يعمل بالترتيب، من أعلى إلى أسفل. وهذا يعني أنك تحتاج إلى توخي الحذر في الترتيب الذي تضعه فيه. على سبيل المثال، في شفرة جافاسكريبت التي شاهدناها في المثال الأول: var para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { var name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } قمنا باختيار فقرة نصية (السطر 1)، ثم استدعينا مستمع الحدث Event listener بتطبيق التابعaddEventListener على الفقرة النصية المُخزَّنة في المتغيّر para (السطر 3)؛ لذا عندما يُنقر على النص تُشغَّل كتلة التعليمات البرمجية في الدالة updateName(). تُسمّى كُتلة التعليمات البرمجية القابلة لإعادة الاستخدام باستدعاء اسمها “وظائف” أو “دوال” Functions. يُطلب من المستخدم اسم جديد ثم يُدرَج هذا الاسم في الفقرة لتحديث العرض. إذا بدّلت ترتيب أول سطرين من التعليمات البرمجية، فإن الشفرة البرمجية لن تعمل . ستحصُل بدلا من ذلك خطأ في وحدة تحكم المتصفح الخاصة بالمطورين Console: -TypeError: para is undefined. وهذا يعني أن الكائن para غير موجود بعد، لذلك لا يمكننا إضافة مستمع الحدث إليه. ملاحظة: هذا خطأ شائع جدًا. يجب أن تكون حذرًا أن الكائنات Objects المشار إليها في التعليمات البرمجية موجودة قبل محاولة استخدامها. الفرق بين التعليمات البرمجية المفسَّرة Interpreted و المُترجَمة Compiled لابد وأنك سمعت في سياق البرمجة بمصطلحيْ التفسير Interpretation و الترجمة Compilation. جافاسكريبت هي لغة مفسَّرة. تُشغَّل تعليمات جافاسكريبت البرمجية من أعلى إلى أسفل وتُرجَع نتيجة تشغيل التعليمات البرمجية على الفور. لست بحاجة لتحويل التعليمات البرمجية إلى شكل مختلف قبل أن يقوم المتصفح بتشغيلها. من ناحية أخرى، تُحوَّل الشفرة البرمجية للغات المترجمة إلى شكل آخر قبل أن يشغّلها الحاسوب. على سبيل المثال تُجمَّع C / C ++ في لغة Assembly التي يُشغّلها الحاسوب. لكلّ من المنهجيْن ميزات، لكنّها خارج نطاق هذا الدرس. جانب الخادوم Server Side و جانب العميل Client Side لابد وأنك سمعت بمصطلحي من جانب الخادوم وجانب العميل، خاصة في سياق تطوير الوِب: الشفرة من جانب العميل Client side هي شفرة تُشغَّل على حاسوب المستخدم. يُنزّل العميل التعليمات البرمجية التي ينفّذها المتصفّح ليعرض صفحة الوٍب. سنتحدّث في هذا الدرس عن جافاسكريبت من جانب العميل. من ناحية أخرى تُنفَّذ شفرة جانب الخادوم على الخادوم، ثم تُرسَل نتيجة التنفيذ إلى المتصفّح ليعرضها. مثال على لغات الوِب الشائعة من جانب الخادوم PHP وبايثون وروبي و ASP.NET. وجافاسكريبت! يمكن أيضا استخدام جافاسكريبت كلغة من جانب الخادوم، على سبيل المثال في بيئة Node.js الشائعة. يُستخدم مصطلح ديناميكي Dynamic لوصف كل من جافاسكريبت من جانب العميل واللغات من جانب الخادوم. تشير كلمة ديناميكي إلى القدرة على تحديث عرض صفحة الوِب أو التطبيق لإظهار أشياء مختلفة في ظروف مختلفة، وتوليد محتوى جديد حسب الطلب. تُنشِئ الشفرة من جانب الخادوم ديناميكيا محتوى جديدًا على الخادوم، سحب بيانات من قاعدة بيانات على سبيل المثال؛ في حين أن جافاسكريبت من جانب العميل تُنشِئ ديناميكيا محتوى جديدًا داخل المتصفح (العميل)، على سبيل المثال إنشاء جدول HTML جديد، وإدراج البيانات المطلوبة من الخادوم في ذلك الجدول، ثم عرض الجدول في صفحة وِب للمستخدم. يعمل المنهجان معًا عادة. يشار إلى صفحة الوِب التي لا يوجد بها محتوى ديناميكي بأنها ثابتة Static، حيث يظهر دائما نفس المحتوى بغضّ النظر عن الزائر. كيف تضيف جافاسكريبت إلى صفحتك؟ يتم تطبيق جافاسكريبت على صفحة HTML بطريقة مشابهة لـ CSS. في حين تستخدم CSS عناصر <link> لتطبيق الأنماط الخارجية وعناصر <style> لتطبيق الأنماط الداخلية على HTML، تحتاج جافاسكريبت إلى صديق واحد فقط في عالم HTML، العنصر <script>. دعونا نتعلم كيفية العمل. جافاسكريبت داخلي أنشئ مستند HTML بالمحتوى التالي <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <title>مثال تطبيقي لجافاسكريبت</title> </head> <body> <button>انقر هنا</button> </body> </html> </html> استعرض الملف في متصفح الوِب وفي محرر النصوص. سترى أن HTML أنشأت صفحة وِب بسيطة تحتوي على زر قابل للنقر. بعد ذلك، انتقل إلى محرر النصوص وأضف ما يلي مباشرة قبل وسم الإغلاق <body/>: <script> // سنضع تعليمات جافاسكريبت هنا </script> سنضيف الآن بعض جافاسكريبت داخل عنصر <script> لجعل الصفحة تفعل شيئا أكثر إثارة للاهتمام. أضف الشفرة التالية أسفل السطر // سنضع تعليمات جافاسكريبت هنا مباشرة: function createParagraph() { var para = document.createElement('p'); para.textContent = 'لقد نقرت على الزرّ!'; document.body.appendChild(para); } var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } احفظ الملف في محرّر النصوص ثم حدّث الصفحة على المتصفح. يجب أن الآن أن تظهر فقرة جديدة أسفل الزّر عند النقر عليه. ملاحظة: إذا لم يعمل المثال الخاص بك، راجع الخطوات مرة أخرى وتحقق من أنك فعلت كل شيء بشكل صحيح. هل حفظت الملف بامتداد html (مثلا lesson1.html)؟ هل أضفت العنصر <script> بعد علامة <body/> مباشرة؟ هل أدخلت جافاسكريبت تماما كما هو موضح؟ جافاسكريبت حساسة لحالة الأحرف +(صغيرة Lowercase أو كبيرة Uppercase)، لذلك تحتاج إلى إدخال الشفرة تماما كما هو مبين، وإلا فلن تعمل. جافاسكريبت خارجي ماذا لو أردنا وضع جافاسكريبت لدينا في ملف خارجي؟ دعونا نستكشف هذا الآن. أولا، أنشئ ملفًا جديدا في نفس المجلّد الذي يوجد به ملف HTML وسمّه script.js. تأكد من أنه يحتوي على امتداد اسم الملفjs، وهذه هي الطريقة التي يُتعرَّف بها على أننا أمام ملف يحوي شفرات برمجية مكتوبة بجافاسكريبت. بعد ذلك، انسخ كل النص البرمجي من الوسم <script> في ملف HTML (تلك التعليمات الموجودة في الخطوة 4 من الفقرة السابقة) وألصقه في الملف script.js ثم احفظ هذا الملف. الآن استبدل العنصر الحالي <script> بما يلي. <script src="script.js"></script> يصبح محتوى الملف HTML على النحو التالي: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <title>مثال تطبيقي لجافاسكريبت</title> </head> <body> <button>انقر هنا</button> <script src="script.js"></script> </body> </html> احفظ الملفّ ثم حدّث صفحة الوِب في المتصفح. ويجب أن تحصُل على نفس النتيجة تمامًا! ولكن الآن لدينا جافاسكريبت في ملف خارجي. يعدّ هذا عموما أمرا جيّدًا من حيث تنظيم التعليمات البرمجية الخاصة بك، وجعلها قابلة لإعادة الاستخدام عبر ملفات HTML متعددة. بالإضافة إلى HTML تصبح أسهل للقراءة دون وجود قطع ضخمة من السكربت ملقاة فيها. شفرات جافاسكريبت المضمنة في وسوم HTML تُكتَب شفرة جافاسكريبت أحيانا داخل HTML على النحو التالي: function createParagraph() { var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } <button onclick="createParagraph()">Click me!</button> استعرض المثال على Jsfiddle لهذا العرض التوضيحي نفس الوظائف التي عرضناها في الحالتيْن أعلاه، إلا أن عنصر <button> يتضمن خاصيّة onclick مضمنة لتشغيل وظيفة الدالة عند الضغط على زر. رجاءً لا تضمّن شفرات جافاسكريبت في وسوم HTML فهذه الطريقة من الممارسات السيئة (خلط HTML مع جافاسكريبت)، كما أنها غير فعالة لأن عليك أن تدرج الخاصيّة onclick="createParagraph()" على كل زر تريد تطبيق جافاسكريبت عليه. أما باستخدام شفرة جافاسكريبت منفصلة عن HTML فيمكنك تحديد كافة الأزرار باستخدام تعليمة واحدة. الشفرة التي استخدمناها أعلاه لهذا الغرض تبدو كما يلي: var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } قد يبدو هذا الأمر أطول قليلا من الخاصيّة onclick، ولكنه سيعمل على جميع الأزرار بغض النظر عن عدد الأزرار الموجودة في الصفحة وعدد العناصر التي أُضيفت أو أزيلت، فلا يلزم تغيير جافاسكريبت. ملاحظة: جرب تعديل ملف HTML وإضافة بضعة أزرار أخرى في الملف. عند إعادة التحميل، يجب أن تجد أن جميع الأزرار عند النقر عليها سوف تُظهر فقرة. هذا رائع أليس كذلك؟ التعليقات Comments كما هو الحال مع HTML و CSS، يمكنك كتابة تعليقات في شفرة جافاسكريبت وسيتجاهلها المتصفح. تُستخدم التعليقات لتقديم توضيحات لزملائك المطورين عن كيفية عمل الشفرة، كذلك تمثل مرجعًا لك عن التعليمات البرمجية التي كتبتها عندما تعود مثلًا بعد 6 أشهر لتتذكر مالذي فعلته. التعليقات مفيدة جدًا، ويجب عليك استخدامها في كثير من الأحيان، وخاصة بالنسبة للتطبيقات الكبيرة. هناك نوعان من التعليقات: تعليقات من سطر واحد، وتُكتَب بعد عموديْن مائليْن؛ مثلا: // هذا تعليق تعليق متعدّد الأسطر. يُكتَب بين المحارف / * و * / على النحو التالي: /* هذا تعليق هو الآخر */ تطبيق التعليقات على تعليمات جافاسكريبت السابقة: // دالة تنشئ فقرة جديدة وتضيفها إلى نهاية متن الصفحة function createParagraph() { var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } /* 1. نحصُل على مراجع بجميع الأزرار الموجودة في الصفحة ونضعها في مصفوفة 2. نمرّ على جميع الأزرار ونضيف إلى كلّ منها مستمعًا لحدث النقر تُنفَّذ الدالة ()createParagraph عندما ينقر على زرّ في الصفحة. */ var buttons = document.querySelectorAll('button'); for (var i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } كانت هذه خطوتك الأولى في عالم جافاسكريبت. لقد بدأنا بالمفاهيم النظرية فقط لجعلك تفهم لماذا تُستخدم جافاسكربت وما الأشياء التي يمكنك القيام بها باستخدام هذه اللغة. تعرّفت في هذا المقال على بضعة أمثلة من التعليمات البرمجية وتعلّمت كيفية تتفاهم لغةُ جافاسكريبت مع بقية التعليمات البرمجية على موقع الوِب. قد تبدو الآن جافاسكريبت شاقة بعض الشيء، ولكن لا تقلق - في هذه السلسلة من الدروس سوف نأخذك في خطوات بسيطة تمكّنك من المضي قدمًا في عالم جافاسكربت. ترجمة - بتصرف - للمقال What is JavaScript? الذي اشترك في كتابته مساهمو موزيللا.

سنتعرّف في هذا الدّرس على لغة البرمجة جافاسكربت من منظور عامّ وسنجيب على تساؤلاتك ماهي جافاسكربت؟ وما الذي تقوم بعمله في صفحات الوِب؟ و نتأكد من أن مفهوم جافاسكريبت قد أصبح واضحًا لديك. ملحوظة: يتوجَّه هذا الدرس، والدروس التي تليه - إلى من لديهم معرفة سابقة بأساسيّات التطوير للوِب: HTML وCSS. التعريف العام لجافاسكريبت تُعرَّف جافاسكريبت بأنّها لغة برمجة تسمح لك بتنفيذ أشياء معقدة على صفحات الوِب، تعدّ صفحات الوِب الحديثة أكثر من مجرد موقع يُظهر لك معلومات ثابتة تتصفحها، فهي - مثلًا - تعرض تحديثات المحتوى المباشرة، أو تعرض الخرائط التفاعلية، أو الرسومات المتحركة ثنائية أو ثلاثية الأبعاد، أو تمرّر ملفات الفيديو المصورة، وما إلى ذلك. تمثّل جافاسكريبت الطبقة الثالثة من طبقات تقنيات الوِب القياسية. الطبقتان الأوليان هما HTML وCSS. HTML هي لغة توصيف Markup نستخدمها لإنشاء محتوى الوِب وإضفاء معنى عليه، مثل تعريف الفقرات، العناوين وجداول البيانات أو تضمين الصور ومقاطع الفيديو في الصفحة. CSS هي لغة تعرّف قواعد الأنماط Style rules التي نستخدمها لتطبيق التصميم على المحتوى الذي تصفه HTML، على سبيل المثال، تعيين ألوان وخطوط الخلفية، ووضع محتوى ما في أعمدة متعددة. Javascript هي لغة برمجة تمكّنك من إنشاء محتوى حيوي وديناميكي، التحكم في الوسائط المتعددة، وتحريك الصور وأمورا وكل شيء آخر. حسنًا، ليس كل شيء، ولكن من المدهش ما يمكنك تحقيقه مع بضعة أسطر من شفرة جافاسكريبت. سنأخذ مثالًا يوضح كيفية بناء هذه الطبقات الثلاث فوق بعضها بشكل لطيف. لنأخذ تسمية نص بسيط كمثال. سنضع علامة عليه باستخدام HTML لإعطائه هيكلًا وغرضًا: <p>Player 1: Chris</p> النتيجة حتى الآن. سنضيف تحسينات على الشكل باستخدام CSS: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor:pointer; } أصبحت النتيجة الآن كالتالي. وأخيرًا، نضيف بضعة تعليمات جافاسكريبت لتنفيذ السلوك الديناميكي. var para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { var name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } غرضنا الآن ليس شرح التعليمات السابقة (سنفعل ذلك لاحقا) ولكن توضيح ما يمكن أن تضيفه جافاسكريبت لـHTML وCSS. عند النقر على النص تظهر نافذة تطلُب إدخال اسم ثم عند إدخال الاسم في النافذة المنبثقة والنقر على زر OK تأخذ النص وتطبعه أمام الجملة Player 1. استعرض المثال على Jsfiddle. الشفرة المصدرية الكاملة للمثال. التشغيل المباشر. يمكن لجافاسكريبت أن تفعل أكثر من ذلك بكثير؛ دعونا نستكشف مزيدًا من التفاصيل. مالذي يمكن لجافاسكريبت فعله حقا؟ تتكون لغة جافاسكريبت الأساسية من بعض ميزات البرمجة الشائعة التي تسمح لك بفعل أشياء مثل: تخزين قيم مفيدة داخل متغيرات Variables. في المثال السابق على سبيل المثال، نطلب من المستخدم ادخال اسم جديد ثم يُخزَّن هذا الاسم في متغير يسمى name. العمليات على أجزاء من النص (المعروفة باسم سلاسل المحارف Strings في البرمجة). في المثال أعلاه، نأخذ سلسلة المحارف Player 1: ونضمها إلى متغير الاسم المذكور أعلاه لإنشاء الجملة الكاملة، على سبيل المثال Player 1: Chris. تشغيل التعليمات البرمجية ردًا على أحداث معينة تحدث على صفحة وِب. في المثال أعلاه استخدمنا الحدث click الذي يخبرنا أن المستخدم نقر على النصّ ثم نشغّل الشفرة التي تعمل على تحديث النص. والكثير! ولكن ما هو أكثر إثارة هو وظيفة بُنيت على لبّ لغة جافاسكريبت الأساسي. تسمى APIs وهي اختصار لـ Application Programming Interface واجهات برمجة التطبيقات. تتيح لك واجهات برمجة التطبيقات (APIs) المزيد من القوة لاستخدامها في شفرة جافاسكريبت. تُعرّف واجهات برمجة التطبيقات (APIs) على أنها مجموعات جاهزة من الشفرات البرمجيّة تسمح لمطور البرامج بتنفيذ برامج سيكون من الصعب أو المستحيل تنفيذها من دون استخدام واجهة برمجة التطبيقات. لأوضح لك الفكرة، تخيل أنك تريد عمل رف خشبي للكتب، سيكون الأمر أسهل بكثير لو توافرت لك الألواح الخشبية والمسامير بالمقاسات المناسبة وما عليك سوى تجميعها معًا لعمل رف الكتب. في حين سيكون الأمر أصعب بكثير لو توجّب عليك أنت العثور على الخشب المناسب وتقطيعه إلى الحجم والشكل الصحيح وإيجاد قياس المسامير المناسب ومن ثم تجميعها معًا لعمل رف الكتب. هذا ما تسهل عمله واجهات برمجة التطبيقات. تنقسم واجهات برمجة التطبيقات (APIs) عمومًا إلى فئتين. واجهات برمجة التطبيقات الخاصّة بالمتصفّح Browser APIs: تُدمَج واجهات برمجة تطبيقات في المتصفّح لإعطائه القدرة على عرض البيانات من بيئة الحاسوب المحيطة به، أو القيام بأشياء معقدة مفيدة. فمثلا: تسمح لك واجهة برمجة تطبيقات DOM وهي اختصار لـ Document Object Model بمعالجة HTML و CSS، إنشاء، إزالة وتغيير HTML ، تطبيق أنماط Styles جديدة ديناميكيًّا على صفحتك، وما إلى ذلك. في كل مرة تُعرَض فيها نافذة منبثقة تظهر على صفحة، أو يُعرَض محتوى جديد -كما رأينا أعلاه في مثالنا السابق- فواجهة DOM هي المسؤولة عن ذلك. تستعيد واجهة برمجة التطبيقات Geolocation API معلومات الموقع الجغرافي، ممّا يفسّر كيف يمكن لخرائط جوجل Google Maps أن تعثُر على موقعك الجغرافي وترسمه على الخريطة. تسمح لك واجهات برمجة تطبيقات اللوحة Canvas و WebGL بإنشاء رسومات متحركة ثنائية الأبعاد وثلاثية الأبعاد. يقوم الأشخاص بأشياء مدهشة باستخدام تقنيات الوِب هذه. تسمح لك واجهات برمجة التطبيقات الصوتية والمرئية مثل HTMLMediaElement و WebRTC بالقيام بأشياء مثيرة للاهتمام حقًا مع الوسائط المتعددة، مثل تشغيل الصوت والفيديو مباشرة في صفحة وِب أو التقاط الفيديو من كاميرا الوِب الخاصة بك وعرضها على جهاز كمبيوتر شخص آخر (جرب العرض التوضيحي snapshot) ملاحظة: لن تعمل العديد من العروض التوضيحية المذكورة أعلاه في متصفح أقدم. عند التجربة، من الأفضل استخدام متصفح حديث مثل فايرفوكس أو كروم أو Edge أو Opera لتشغيل الشفرة. واجهة برمجة التطبيقات الخاصّة بطرف ثالث Third party APIs. لا تُضمَّن هذه الواجهات في المتصفح مبدئيًّا. وعليك عمومًا الحصول على التعليمات البرمجية والمعلومات من مكان ما على الوِب. فمثلا: تتيح لك واجهة برمجة تطبيقات تويتر Twitter API إجراء أشياء مثل عرض أحدث التغريدات على موقعك الإلكتروني. تسمح لك واجهة برمجة التطبيقات لخرائط غوغل Google Maps API بتضمين الخرائط المخصصة في موقعك على الوِب، وغير ذلك من الوظائف. ملاحظة: واجهات برمجة التطبيقات هذه متقدمة، ولن يتم تغطية أي منها في هذه الدّروس، ولكن الروابط الواردة أعلاه توفّر وثائق شاملة إذا كنت مهتمًا بمعرفة المزيد. يوجد الكثير لتعلّمه، لا تفقد حماسك. دراسة جافاسكريبت لمدة 24 ساعة لن تعطيك القدرة على بناء فيسبوك، خرائط غوغل أو إنستغرام. هناك الكثير من الأساسيات التي يجب تغطيتها أولًا. وهذا هو السبب في أنك هنا. سنكمل في الدرس السابق حديثنا عن جافاسكريبت وستكون فرصة على للنظر الفعلي في شفرات برمجية. ترجمة - بتصرف - للمقال What is JavaScript? الذي اشترك في كتابته مساهمو موزيللا.