×
×

عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

منذ انطلاقتها عام 1995، تطورت لغة جافاسكريبت لتصبح، بلا شك، أحد أهم جوانب تجربة المستخدمة (User experience) في عالم الويب اليوم.

سنتعرف في هذه المقالة على هذه اللغة: ما هي؟ من أين نبدأ في تعلمها؟ وما أهم الموارد التي يستخدمها جمهور المطورين في التعامل معها؟ وأين نحن كمطورين عرب من كل ذلك؟

ما تفعله جافاسكريبت (وما لا تفعله)

جافاسكريبت ليست jQuery، وهي ليست فلاش أو أكشن سكريبت، كما أنها ليست جافا. جافاسكريبت لغة مستقلة.

جافاسكريبت هي لغة المستعرض، تحمّل كنص برمجي ضمن ملفات HTML أو كملفات مرتبطة معها، وهدفها إضافة التفاعلية لصفحات ثابتة. إنها ليست بديلاً عن لغات طرف المخدم (Server Side) مثل PHP و Ruby، كما أنها ليست بديلاً عن HTML و CSS وإنما تعمل معهما.

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

angry computer large عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

لكن الوضع تحسن، فقد ازدادت شعبية اللغة بشكل كبير بعد ظهور تقنية أجاكس (AJAX)، كما أصبحت المستعرضات تدعم ميزات جافاسكريبت بشكل متقارب، كما أصبح إيجاد الحلول البديلة أسهل، خصوصاً بوجود مكتبات تسعى لتقليص فوارق المستعرضات مثل jQuery و MooTools و Modernizr.

من أين أبدأ؟

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

المشكلة لدينا هو انعدام المواد التعليمية باللغة العربية تقريباً، باستثناء بعض مجموعات الامثلة المبرمجة بأنماط وتقنيات قديمة بعض الشيئ ولا تناسب عالم جافاسكريبت اليوم، بالإضافة لبعض الكتب التي تتفوق عليها المراجع الأجنبية بكل سهولة.

ابدأ مع كود أكاديمي

يصف الموقع نفسه بأنه “أسهل طريقة لتعلم البرمجة. إنه تفاعلي ومسل ويمكنك العمل عليه مع أصدقائك”. يقوم الموقع بإرشاد المستخدم عبر سطر أوامر لتعليمه عن طريق التجربة كما يتيح له متابعة تقدمه في التعلم.

codeacademy عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

شاهد مجموعة سكرين كاست عن جافاسكريبت

بقدم موقع appendTo  مجموعة من دروس الفيديو للمبتدئين في جافاسكريبت ومكتبتها الأشهر jQuery، الموقع ليس بحاجة لتسجيل.

appendto عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

تابع التعلم مع W3Schools

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

w3schools عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

أريد المزيد…

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

أضف أداة تطوير إلى مستعرضك

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

لعل أشهر هذه الأدوات وأكثرها تميزاً هي Firebug التي تعمل مع متصفح فايرفوكس، لكن إذا لم يكن متصفحك المفضل فلا داعي للقلق، فمعظم المتصفحات الكبيرة أصبحت تضم أدوات كهذه بإصداراتها أو تسمح بتنصيب إضافات مشابهة.

firebug عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

حاول بناء شيئ ما

بعد أن قمت بمتابعة الأمثلة في المواد التعليمية التي اخترتها، حان الوقت لتقف على رجليك وتحاول بناء شيئ من إبداعك وبمهاراتك، الاحتمالات لا حصر لها، لكن لا تنس أن جافاسكريبت وحدها لا تكفي وإنما ينبغي تعلم HTML و CSS في الوقت نفسه، وربما إحدى لغات طرف المخدم مثل PHP.

معرض صور: حاول بناء معرض صور يظهر مصغرات من الصور وعند الضغط على إحداها يقوم بتكبيرها، يمكنك معالجة خاصية alt لتظهر عنوان الصورة عند تكبيرها. حاول جعل التطبيق سهل الاستخدام والتخصيص عبر مصفوفة أو غرض (object) لتمرير إعدادات المعرض، وحاول بناء أكثر من مظهر (theme).

سكريبت للتحقق من صحة الإدخالات: قم ببناء نص برمجي (أو مجموعة نصوص) للتحقق من صحة المعلومات المدخلة إلى نماذج الويب (forms)، على سبيل المثال: التحقق من إدخال أحرف عربية فقط، التحقق من مطابقة كلمة مرور لتأكيدها، التحقق من صيغة البريد الإلكتروني… إلخ

سكريبت لتدوير العناصر الإخبارية: تعتبر هذه من الإضافات المحبوبة والتي تغني الصفحة الرئيسية لأي موقع (مثال)، موضوع كهذا سيمنحك مهارات جديدة فيما يتعلق بالتحريك (animation) باستخدام جافاسكريبت.

build something عالم جافاسكريبت الواسع: من أين ننطلق وإلى أين سنصل؟

تعلم كيف تستخدم إحدى مكتبات جافاسكريبت

بغض النظر عن مدى تقدمك باستخدام جافاسكريبت، سيأتي وقت تجد فيه أن محاولة بناء كل شيئ من العدم أمر بالغ الصعوبة، خصوصاً عند محاولة جعل منتجك يعمل على كافة المستعرضات، أو عند مواضيع متقدمة كالتحريك.

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

كلمة أخيرة

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

من المؤسف عدم وجود مراجع مناسبة باللغة العربية، ومن المعروف أنك بحاجة لتقوية لغتك الانكليزية في أي مجال عمل اليوم، لكن هذا ليس عذراً للتقصير في الترجمة والتأليف من قبلنا.

شارك من حولك من مطورين بما تعلمت، وتعلم منهم، وتابع المواقع والمدونات المتعلقة باهتمامك.

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

هذه المقالة تحوي عدة أجزاء مترجمة من هذه المقالة.

هذا الموضوع منقول من مدونتي.

  • 85818
  • آخر الأخبار العالمية
  • latest-it-news
Dubai, UAE