كيفية تعلم جافا سكريبت – الدليل النهائي
مرحبًا بك وتهانينا على رحلتك التعليمية لجافا سكريبت! تعد JavaScript لغة متعددة الاستخدامات بشكل لا يصدق ولن تتيح لك إنشاء مواقع ويب ديناميكية فحسب، بل ستفتح لك عالمًا جديدًا تمامًا من تطوير الويب.
تركز المقدمات القياسية لجافا سكريبت على الثلاثي HTML/CSS/JS.
هذه المعلومات مفيدة بالتأكيد؛ ومع ذلك، فإن هذا الدليل فريد من نوعه لأنه يشرح ماهية أطر عمل JavaScript (مثل Node.js و React)، ولماذا يجب عليك استخدامها، وكيفية اختيار واحد منها.
يعد فهم أطر عمل JS الخطوة الأولى نحو مهنة حقيقية في تطوير JS.
نبدأ بمفاهيم JavaScript الأساسية، ثم ننتقل إلى أطر العمل وكتالوج الدورة التدريبية والبرامج التعليمية العملية.
نوجهك أيضًا إلى أدلة JavaScript أكثر تقدمًا ومعلومات حول نوع الوظائف التي يمكنك الحصول عليها باستخدام JS. شكرًا لك على اختيار Pluralsight لمساعدتك في إتقان JavaScript!
تعلم جافا سكريبت في 7 خطوات
- هل JS مناسب لك؟
- اكتشف أطر عمل جافا سكريبت
- تعرف على تايب سكريبت
- التنزيلات للبدء باستخدام JavaScript
- خذ دورة جافا سكريبت
- استكشف البرامج التعليمية العملية لجافا سكريبت
- تعرف على ما يمكنك فعله باستخدام JavaScript
هل يجب أن تتعلم جافا سكريبت؟
قد تكون عملية تعلم لغة برمجة جديدة أمرًا مرهقًا، لذلك نحن نرد على بعض الاستفسارات الأكثر شيوعًا لراحة بالك بشأن هذه العملية.
ما هي جافا سكريبت؟
JavaScript هي لغة برمجة نصية لبناء مواقع الويب وتطبيقات الويب. إنها شائعة جدًا على مواقع الويب اليوم لدرجة أنها غالبًا ما تسمى “لغة برمجة الويب”.
تعمل JavaScript جنبًا إلى جنب مع لغتين أخريين، HTML وCSS، لإنشاء صفحات ويب ديناميكية وتجارب تفاعلية.
تم إنشاء JavaScript بواسطة Brendan Eich في عشرة أيام فقط في شهر مايو من عام 1995 أثناء عمله في شركة Netscape Communications Corporation.
كان يُطلق عليه في الأصل اسم Mocha وتم استخدامه لإضافة التفاعل إلى جانب العميل في صفحات الويب.
اكتسبت JavaScript شعبية سريعًا وتم توحيدها لاحقًا في مواصفات لغة ECMAScript. اليوم، يتم استخدامه ليس فقط لتطوير الويب من جانب العميل ولكن أيضًا من جانب الخادم من خلال Node.js ولإنشاء تطبيقات سطح المكتب والجوال.
هل من الصعب تعلم جافا سكريبت؟
يتم استخدام JavaScript
لإنشاء مواقع الويب وتطبيقات الويب لأجهزة سطح المكتب والأجهزة اللوحية والأجهزة المحمولة.
تتيح JavaScript ميزات مثل التحديثات المستمرة والرسوم المتحركة والوسائط المتعددة والعناصر التفاعلية وحتى تطوير الألعاب. في الأساس، إنه جزء من كود صفحة الويب الذي يجعلها تنبض بالحياة.
تتضمن ميزات JavaScript نماذج الاتصال وعربات التسوق والألعاب وملحقات المتصفح وتشغيل الفيديو والصوت والمزيد.
قد تكون لغة JavaScript صعبة، لكنها لغة رائعة للمبتدئين والمتعلمين ذاتيًا! تشترك JavaScript في بناء جملة مباشر مع لغات البرمجة المعروفة مثل C وJava، وبدرجة أقل مع Python.
كما أن لديها مجتمعًا كبيرًا يدعم تعلم اللغة من خلال تقديم المواد والدروس.
ولكن، مثل تعلم أي لغة برمجة، فإن إتقان JavaScript يستغرق وقتًا وجهدًا. قد تتطلب معرفة JavaScript المزيد من العمل إذا لم يكن لدى المتعلم خبرة سابقة في البرمجة.
قد يستغرق الأمر بضعة أشهر حتى تشعر بالراحة حقًا في اللغة، خاصة بدون خبرة سابقة في البرمجة.
ما هو HTML/CSS؟
HTML وCSS هي لغات برمجة تلعب أدوارًا رائدة في تطوير مواقع الويب. توفر لغة ترميز النص التشعبي، المعروفة أيضًا باسم HTML، بنية صفحة الويب ويمكن استخدامها لإنشاء صفحات ثابتة.
يتحكم CSS، الذي يشير إلى Cascading Style Sheets، في نمط صفحة الويب أو الصفحات المتعددة على الموقع في وقت واحد.
بشكل أساسي، يوفر HTML الوظيفة الأساسية للصفحة، ويتم استخدام CSS لعناصر التصميم، ويتيح JavaScript التفاعل والرسوم المتحركة.
هل يجب أن أتعلم HTML/CSS أولاً؟
هذا موضوع معقد، لذلك دعونا نعرض بعض الحقائق. إذا كنت تريد تطوير مواقع الويب، ففي مرحلة ما، ستحتاج إلى تعلم اللغات الثلاث – HTML وCSS وJavaScript.
ومع ذلك، ليس من الضروري أن تعرف HTML أو CSS للبدء في استخدام JavaScript.
يوصي بعض المبرمجين بتعلم HTML وCSS أولاً لأنهما ضروريان. لكن آخرين يشيرون إلى أن جافا سكريبت تعتبر بشكل عام مقدمة ممتازة للبرمجة للمبتدئين.
إليك مقالة رائعة من Northcoders حول سبب كون تعلم JS أولاً استراتيجية جيدة للعديد من المبرمجين.
من السهل أيضًا التعامل مع HTML وCSS عند البدء لأول مرة. على سبيل المثال، يمكنك العثور على أكواد HTML وCSS جاهزة لبدء مشروعك الأول على الويب.
يعد كود بدء تشغيل الويب الخاص بـ Pluralsight على GitHub نموذجًا معياريًا مجانيًا يوفر كل HTML الذي تحتاجه لبدء البرمجة في JS.
يمكنك نسخ هذه السطور ولصقها في محرر التعليمات البرمجية الخاص بك. وأيضًا، من خلال أطر عمل مثل Node.js، من الممكن تشغيل JavaScript بدون HTML.
ما هو إطار جافا سكريبت؟
إطار عمل JavaScript عبارة عن مكتبة مكتوبة مسبقًا توفر بنية لتعليمات JavaScript البرمجية وتلخص المهام الروتينية لتبسيط تطوير التطبيقات عبر الإنترنت.
يقدم مجموعة من القوالب والأدوات اللازمة لبناء مواقع الويب الديناميكية. تتيح الأطر إنشاء بنية تحتية للواجهة الأمامية والخلفية باستخدام JavaScript.
تُعد React وAngular وVue.js وNext.js وNode.js أطر عمل JavaScript الأكثر تفضيلاً وطلبًا في عام 2023. يتم تصنيف React كإطار عمل JavaScript على الرغم من أنها مكتبة.
ما الفرق بين مكتبة جافا سكريبت وإطار العمل؟
في البرمجة، كما هو الحال في الحياة، المكتبات هي مستودعات للموارد. ولكن بدلاً من الكتب، تحتوي مكتبات البرمجة على مجموعات من مقتطفات التعليمات البرمجية لمهام محددة.
وهذا يحفظ المبرمج من الاضطرار إلى تكرار نفس اللغة مرارًا وتكرارًا أو إنشاء وظائف معقدة من البداية. تتضمن أمثلة المكتبات الشائعة jQuery وReact.js.
كما هو الحال مع المكتبات، تسهل أطر العمل على المطورين معالجة مشكلات معينة وصعبة. بينما تقوم المكتبات وأطر العمل بنفس الشيء، تميل الأولى إلى ممارسة سيطرة أكبر على الأخيرة.
توفر الأطر البنية والوظيفة الأساسية للبرنامج.
ما هو رد الفعل؟
React هي مكتبة JavaScript شائعة تم تطويرها وصيانتها بواسطة Facebook. يستخدم DOM افتراضيًا لتحديث واجهة المستخدم بكفاءة ويقدم نهجًا تعريفيًا للبرمجة. كما أن لديها مجتمعًا واسعًا والعديد من المكتبات والأدوات المتاحة.
الميزة الأبرز في React هي أنها تسمح لك بكتابة HTML باستخدام JavaScript (بدلاً من كتابة JS إلى HTML كما كانت في البداية).
كما أنت على وشك أن تتعلم، تم إنشاء العديد من أطر العمل الشائعة من React. اطلع على هذه القطعة – React وGraphQL وRelay: مقدمة مختصرة – للتعمق أكثر في React.
الميزات الأساسية للرد
- المكونات: فئات أو وظائف JavaScript التي تمثل عناصر واجهة المستخدم القابلة لإعادة الاستخدام.
- JSX: ملحق نحوي لجافا سكريبت يُستخدم في React لوصف عناصر واجهة المستخدم
- الدعائم: المعلومات التي يتلقاها المكون من المكون الأصلي.
- الحالة: تنسيق بيانات محدث لإدارة حالة المكون.
- يمكن لـ React تحديث DOM الفعلي بفعالية بفضل DOM الافتراضي، وهو عبارة عن مواصفات في الذاكرة لشجرة واجهة المستخدم.
- يعد ComponentWillUnmount و componentDidMount أمثلة لطرق دورة الحياة التي يتم استدعاؤها في أوقات معينة طوال دورة حياة المكون.
- معالجة الأحداث: لإدارة تفاعلات المستخدم مع المكونات، تستخدم React معالجات الأحداث.
- تعتمد عناصر العرض بشكل مشروط على حالة المكون.
فيما يلي مثال على كود React:
class MyComponent extends React.Component { state = {count: 0}; handleClick = () => { this.setState({ count: this.state.count + 1 }); }; render () { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.handleClick}>Increase</button> </div> ); }}مزايا رد الفعل
- المكونات القابلة لإعادة الاستخدام: يعزز التطوير المعياري ويجعل من السهل إعادة استخدام الأجزاء ومشاركة التعليمات البرمجية بين المشاريع.
- يعمل DOM الافتراضي على تحسين سرعة التطبيق من خلال التحديث الفعال فقط للأجزاء التي تم تغييرها من واجهة المستخدم.
- مجتمع قوي: لدى React مجتمع مطور كبير وحيوي حيث يمكنك الحصول على المساعدة والتوجيه وثروة من المعلومات.
- الشعبية: إذا كنت تبحث عن تقنية موثوقة ومدعومة جيدًا، فإن React يعد خيارًا ممتازًا. العديد من الشركات، بما في ذلك Facebook وAirbnb وNetflix وغيرها، تستخدمها على نطاق واسع.
عيوب رد الفعل
- على الرغم من أن React سهلة للغاية، إلا أن التطبيقات الأكبر حجمًا التي تم إنشاؤها باستخدامها قد يكون من الصعب الحفاظ عليها ونموها من حيث التعقيد.
- تتمتع React بمنحنى تعليمي حاد، لكن فهمها قد يستغرق بعض الوقت، حتى بالنسبة للمحترفين ذوي الخبرة في JavaScript أو تطوير الويب.
- الاعتماد المفرط على JavaScript: يعد JavaScript مكونًا مهمًا في React. يمكن أن يكون هذا عيبًا لبعض المطورين، الذين يفضلون إنشاء معظم منطق التطبيقات الخاص بهم بلغة خلفية أكثر تقليدية.
- عبء الأداء: يمكن أن يؤثر استخدام React لـ DOM الافتراضي والتحديثات المتكررة لـ DOM الفعلي على الأداء، خاصة في التطبيقات الأكثر أهمية.
في النهاية، قرار استخدام React أم لا يجب أن يعتمد على الاحتياجات المحددة لمشروعك وتفضيلاتك كمطور.
ما هو الزاوي؟
Angular هو إطار عمل لبناء تطبيقات ويب قابلة للتطوير تم تطوير إطار Angular الحالي في البداية باسم AngularJS، وهو الآن مبني على TypeScript، والذي سنغطي المزيد عنه أدناه.
تمتلك Angular مكتبات وأدوات مطورة قوية للبناء والاختبار وتصحيح الأخطاء.
اعتمدت العديد من الشركات المهمة على نطاق واسع Angular، وهو أحد منتجات Google مفتوحة المصدر.
تعتمد مجموعة واسعة من خدمات الويب المعروفة على Angular لتطوير الواجهة الأمامية، مثل Gmail وPayPal وWeather.com وما إلى ذلك.
الميزات الأساسية للزاوية
يستخدم Angular وحدات لتقسيم التطبيق إلى أجزاء أصغر، كل منها بمكوناته وخدماته.
- تمثل المكونات كتل التطبيق Angular الأساسية، والتي تتكون من قالب وفئة وبيانات تعريفية.
- عند التواصل بين فئة المكون والقالب، يمكنك عرض بيانات المكون والتفاعل مع أحداث المستخدم. يُعرف هذا بربط البيانات.
- التوجيهات في Angular قم بتعديل سلوك ومظهر عنصر داخل القالب عن طريق تكرار المكونات أو إضافة أنماط إلى ميزات معينة.
- من ناحية أخرى، الخدمات هي منطق قابل لإعادة الاستخدام، مثل الوصول إلى البيانات أو معالجة الأخطاء، والتي يمكن مشاركتها بين المكونات.
- علاوة على ذلك، تعتمد Angular أيضًا على حقن التبعيات عن طريق إدخال التبعيات في مكون أو خدمة لزيادة نمطية الكود.
فيما يلي مثال لمكون Angular يعرض رسالة:
import {Component} from '@angular/core';@Component ({ selector: 'app-root', template: ` <h1>{{message}} </h1> `, styles: [` h1 { color: blue; } `]})export class AppComponent { message = 'Hello, Angular!';}في هذا المثال، @Component هو مصمم ديكور يوفر بيانات تعريف للمكون، مثل المحدد والقالب.
تحدد خاصية القالب بنية HTML للمكون، وخاصية الرسالة هي خاصية بيانات يتم عرضها في القالب باستخدام الربط.
تحدد خاصية الأنماط الأنماط الخاصة بالمكون. يتم تصدير فئة المكون AppComponent بحيث يمكن استخدامها في أجزاء مختلفة من التطبيق.
الخط السفلي
استخدم Angular إذا كنت تحتاج إلى تطبيقات معقدة وعالية الأداء وقابلة للتطوير عبر الإنترنت، عادةً في بيئة تجارية.
هل مازلت تشعر بالفضول بشأن Angular؟ تحقق من هذه المشاركات:
- تمت الإجابة على 15 سؤالًا زاويًا شائعًا
- الواجهة الأمامية مقابل الواجهة الخلفية: ما الفرق؟
- قم بتوسيع مهاراتك في JS باستخدام Angular
ما هو Next.js؟
Next.js هو إطار عمل مبني على React لإنشاء تطبيقات الويب. إنه مصمم لتحسين تجربة المطور بالإضافة إلى وظائف التطبيق وتفاعله.
فهو يساعد في المهام اليومية مثل التوجيه وجلب البيانات والتكامل مع تسهيل إنشاء تطبيقات أسرع مع تجربة مستخدم محسنة.
أحد الاستخدامات اليومية لـ Next.js هو تطوير مواقع Jamstack . Jamstack هو أسلوب لبناء مواقع الويب المُحسّنة لأهداف الأعمال الرقمية.
يسمح Jamstack للمطورين بإنشاء ميزات مثل تطبيقات الويب المعيارية وصفحات الويب المعروضة مسبقًا.
بشكل أساسي، تتمتع الصفحات التي تم إنشاؤها بهذه الطريقة بالعديد من فوائد الصفحات الثابتة، مثل السرعة، ولكنها لا تزال تحتوي على عناصر ديناميكية.
الميزات الأساسية لـ Next.js
- تم تصميم Next.js للعرض من جانب الخادم (SSR)، مما يعمل على تحسين الأداء وتحسين محركات البحث عن طريق إنشاء HTML تلقائيًا لكل صفحة على الخادم وإرساله إلى المتصفح.
- ويستخدم أيضًا التوجيه المستند إلى الملف، بحيث يتوافق كل ملف في دليل الصفحة مع مسار في التطبيق.
- يستخدم Next.js أيضًا الاستيراد الديناميكي، الذي يتيح تقسيم التعليمات البرمجية، مما يتيح التحميل البطيء لمكونات برنامج معينة لتعزيز الكفاءة.
فيما يلي مثال لصفحة Next.js التي تعرض رسالة:
import React from 'react';export default function Home () { return ( <div> <h1>Hello, Next.js! </h1> </div> );}في هذا المثال، يتم تعريف المكون الرئيسي على أنه تصدير افتراضي، والذي يمكن استيراده بسهولة إلى أجزاء التطبيق الأخرى. يُرجع المكون بنية HTML بسيطة باستخدام JSX، ويتم نقلها إلى JavaScript بواسطة Next.js.
يمكن الوصول إلى المكون الرئيسي من خلال / مسار التطبيق حيث يتم وضعه في دليل الصفحات ويسمى Index.js.
الخط السفلي
قد ترغب في اختيار Next.js إذا كنت تدير موقعًا تجاريًا على الويب وتحتاج إلى صفحات ويب سريعة وصديقة لتجربة المستخدم وتحسين محركات البحث، ولكنك لا ترغب بالضرورة في إعادة بناء موقع الويب بالكامل.
ما هو Vue.js؟
Vue.js ، والمشار إليه باسم Vue (يُلفظ كـ view)، هو إطار عمل جافا سكريبت مفتوح المصدر لكتابة واجهات المستخدم التي تركز على طبقة العرض ويمكن دمجها بسهولة مع المكتبات الأخرى أو المشاريع الحالية.
إنه إطار بسيط ومتعدد الاستخدامات.
تم إنشاء Vue بواسطة Evan You بعد العمل لدى Google واستخدام Angular في مشاريع مختلفة.
كان هدف إيفان هو استخدام أجزاء Angular التي استمتع بها وبناء شيء سهل الاستخدام، وخفيف الوزن، ولا يزال يحتفظ بالعديد من الجوانب والميزات المهمة لـ Angular.
يستخدم Vue بناء جملة قالب قائم على HTML يتيح ربط البيانات التفاعلية بـ DOM ويوسع عناصر HTML كمكونات قابلة لإعادة الاستخدام. يوفر Vue دعمًا أماميًا للتوجيه المجزأ من خلال حزمة Vue Router.
يعد Vue أيضًا إطار عمل تقدميًا، مما يعني أنه إذا كان لديك بالفعل تطبيق ويب حالي، فيمكنك ربط Vue بأحد أجزائه – مما قد يحتاج إلى تجربة مستخدم ديناميكية وأكثر تفاعلية. تتمتع Vue بخصائص أداء ممتازة.
الميزات الأساسية لبرنامج Vue
- يعد القالب والبرنامج النصي والتصميم أمثلة على أجزاء بناء التطبيقات القابلة لإعادة الاستخدام والمعروفة باسم المكونات. تستخدم القوالب بناء الجملة المستند إلى HTML لتحديد بنية المكون.
- يتيح لك Vue عرض بيانات المكون والاستجابة لإجراءات المستخدم باستخدام ربط البيانات، مما يتيح الاتصال بين البرنامج النصي للمكون والقالب.
- تعمل التوجيهات على تغيير سلوك ومظهر عنصر القالب، على سبيل المثال، عن طريق العرض المشروط للعناصر أو أنماط الربط.
- يتم استخدام الأساليب ذات الوظائف القابلة لإعادة الاستخدام والتي قد تتعامل مع أحداث المستخدم أو إجراء استعلامات API بواسطة المكونات.
- لزيادة الكفاءة، تسمح الخصائص المحسوبة للمستخدمين بتغيير قيمة الخاصية بناءً على خصائص أخرى.
- يقوم المراقبون بمراقبة التغييرات التي تطرأ على الممتلكات ويتفاعلون معها بمنطق فريد.
- يتم استخدام Mixins لتوفير منطق أو أنماط مشتركة، وهي عبارة عن مجموعات قابلة لإعادة الاستخدام من خيارات المكونات التي يمكن دمجها في مكونات أخرى.
- تتم إدارة التنقل داخل التطبيق وبين المكونات والمسارات المختلفة عن طريق التوجيه.
فيما يلي مثال على كود Vue.js:
<template> <div> {{message }} </div></template><script>export default { data () { return { message: 'Hello Vue.js!' } }}</script>في هذا المثال، تظهر الرسالة “Hello Vue.js!” يتم عرضه في عنصر div. يتم تخزين الرسالة في بيانات المكون ويتم عرضها ديناميكيًا باستخدام صيغة القوس المزدوج المتعرج .
الخط السفلي
يسمح Vue للتطبيقات بالتوسع بسرعة من خلال دعم المكونات القابلة لإعادة الاستخدام خارج الصندوق، ولكل منها HTML وCSS وJavaScript الخاص بها – وهذا يعني أنه يمكن تقسيم التطبيق إلى أجزاء وظيفية أصغر، والتي يمكن إعادة استخدامها لاحقًا.
ما هو Node.js؟
Node.js هي بيئة تشغيل جافا سكريبت مفتوحة المصدر ومتعددة الأنظمة الأساسية، حيث تقوم بتنفيذ كود جافا سكريبت خارج متصفح الويب. يسمح ببناء تطبيقات من جانب الخادم باستخدام JavaScript.
Node.js هو وقت التشغيل الأكثر استخدامًا من جانب الخادم، وExpress.js هو إطار العمل الأكثر استخدامًا من جانب الخادم؛ يتم الجمع بين كلاهما في كثير من الأحيان.
تم تصميم جافا سكريبت في البداية من أجل “البرمجة النصية من جانب العميل”، مما يعني أن التعليمات البرمجية تعمل على جهاز الكمبيوتر الخاص بالمستخدم، وعادةً ما يكون المتصفح الخاص به.
يصف موقع Node.js العقدة بأنها “وقت تشغيل جافا سكريبت غير متزامن يحركه الحدث”، ولكن ماذا يعني ذلك؟ دعونا نقسمها:
- يحركها الحدث: يعمل البرنامج على أساس المدخلات من المستخدم. على سبيل المثال، عندما يُطلب منك النقر على مربع، فهذا يعد حدثًا، والكود الذي يتبع نتيجة نقرتك يعتمد على الحدث.
- غير متزامن: يمكن للبرنامج التعامل مع أحداث متعددة في وقت واحد.
- وقت تشغيل JS: يقوم بهذه الأشياء أثناء تشغيل البرنامج في JS
التعريف لا يعبر عن مدى تنوع العقدة. هناك سبب وراء تحول شركات مثل Twitter وSpotify وReddit وLinkedIn، من بين العديد من الشركات الأخرى، إلى Node لتلبية احتياجات JS الخاصة بها من جانب الخادم.
تتضمن تطبيقاتها المتنوعة الدردشات في الوقت الفعلي، وتدفق البيانات، ولوحات المعلومات، والمدخلات في قائمة الانتظار.
الميزات الأساسية لل Node.js
أحد الخيارات الشائعة عند العمل مع Node.js هو استخدام إطار عمل Express.js. يجب عليك تثبيت Express عن طريق تشغيل الأمر npm install Express للقيام بذلك.
لإنشاء تطبيق Express، ابدأ بطلب الوحدة النمطية Express وإنشاء مثيل للتطبيق Express:
const express = require('express');const app = express ();للتعامل مع طلبات HTTP، يمكنك استخدام التابعين app.get() أو app.post() لتحديد نقاط النهاية وتحديد ما يجب أن يحدث عند تقديم الطلبات. على سبيل المثال:
app.get('/', (req, res) => { res.send('Hello World!');});فيما يلي كيفية استخدام Express لخدمة الملفات الثابتة مثل الصور وCSS وJavaScript files.static() الوسيطة:
app.use(express.static('public'));للتعامل مع بيانات النموذج المرسلة في الطلب، يمكنك استخدام البرنامج الوسيط لمحلل النص:
const bodyParser = require('body-parser');app.use(bodyParser.urlencoded({extended: true }));باستخدام محرك القالب، مثل Pug أو EJS، يمكنك تعيينه كمحرك العرض باستخدام app.set():
app.set('view engine', 'pug');لتقديم العروض، يمكنك استخدام التابع res.render() وتمرير اسم العرض وأي بيانات ينبغي استخدامها لإنشاء العرض:
app.get('/', (req, res) => { res.render('index', {title: 'My App'});});لبدء خادم Express، استخدم طريقة app.listen() وقم بإدخال رقم المنفذ:
app.listen(3000, () => { console.log ('Express app listening on port 3000!');});مسج: مكتبة جافا سكريبت
لا تعد JQuery إطار عمل، ولكنها مكتبة شائعة جدًا لبناء مواقع الويب لدرجة أننا شعرنا أنها تستحق بعض الاهتمام.
هدفها الأساسي هو مساعدة المطورين على القيام بالمزيد مع كتابة تعليمات برمجية أقل، ويجعل العمل مع أشياء مثل وثائق HTML والأحداث والرسوم المتحركة و Ajax أسهل بكثير.
المهام اليومية التي يمكنك تنفيذها باستخدام jQuery
- المستند جاهز: $(document).ready(function(){ … });
- المحددات: $(el)، $(‘#id’)، $(‘.class’)، $(‘element’)
- محدد السمات: $(‘[السمة=القيمة]’)
- الوصول إلى عنصر فرعي: $(el).children()
- الوصول إلى العنصر الأصلي: $(el).parent()
- الوصول إلى عنصر شقيق: $(el).siblings()
- البحث عن عنصر: $(el).find(‘element’)
- احصل على CSS: $(el).css(‘property’)
- تعيين CSS: $(el).css(‘property’, ‘value’)
- إضافة فئة: $(el).addClass(‘class’)
- إزالة فئة: $(el).removeClass(‘class’)
- تبديل فئة: $(el).toggleClass(‘class’)
- إخفاء عنصر: $(el).hide()
- إظهار عنصر: $(el).show()
- تبديل عنصر: $(el).toggle()
- التلاشي في عنصر: $(el).fadeIn()
- تلاشي عنصر: $(el).fadeOut()
- إخفاء التبديل: $(el).fadeToggle()
- انزلاق عنصر لأسفل: $(el).slideDown()
- تحريك عنصر لأعلى: $(el).slideUp()
- تحريك التبديل: $(el).slideToggle()
- النقر على عنصر: $(el).click(function(){ … });
- إدخال عنصر بالماوس: $(el).mouseenter(function(){ … });
- الفأرة تترك عنصرًا: $(el).mouseleave(function(){ … });
- تحريك العنصر: $(el).hover(function(){ … });
اختيار إطار جافا سكريبت
في نهاية المطاف، يجب أن يعكس اختيارك للإطار نوع العمل الذي تريد القيام به وكيف تريد إعداد نفسك لسوق العمل. ولهذا السبب قمنا باختيار أطر العمل الشائعة التي من المحتمل أن تراها في طلبات التوظيف.
بالإضافة إلى الطريقة التي تريد بها وضع نفسك كمطور، هناك بعض العوامل الأخرى التي يجب مراعاتها عند اختيار إطار العمل
- خلفيتك أو خلفية فريق التطوير الخاص بك ومؤهلاتك وأطر العمل الحالية.
- ما مدى أهمية الأداء؟ بعض الأطر تعمل بشكل أفضل من غيرها.
- يمكن لمجتمع كبير يحتوي على الكثير من الموارد والأدلة ومكتبات الجهات الخارجية تحسين تجربة التعلم واستخدام إطار العمل.
- يعد النظر إلى خرائط الطريق الخاصة بالأطر التي تفكر فيها أمرًا بالغ الأهمية لأن بعض الأطر يمكن أن يكون لها مستقبل أكثر أمانًا من غيرها.
TypeScript هي المرحلة التالية في تطور JavaScript. إنها لغة برمجة كائنية التوجه مبنية على جافا سكريبت والتي تضيف المزيد من الوظائف وسهولة الاستخدام إلى اللغة الأصلية.
يوفر TypeScript بناء جملة “الأنواع”، وهي طريقة أسهل للإشارة إلى الخصائص والوظائف المرتبطة بقيمة ما. يتم تحويل TypeScript إلى JavaScript ، مما يعني أنه يمكن تشغيله في أي مكان تستخدم فيه JS.
تحل TypeScript محل JavaScript بسرعة باعتبارها اللغة الأولى للمبرمجين في المقام الأول لأنها تعمل على تحسين تجربة المطور.
تركيبه أكثر وضوحًا ويسهل على المبرمجين تجنب الأخطاء؛ ويوفر المزيد من قابلية التوسع لفرق التطوير؛ ويجعل تصحيح الأخطاء أكثر قابلية للإدارة.
باختصار، يمكن استخدامه بالتبادل مع JavaScript في نفس الوقت لأنه يحل المشكلات الشائعة مع JS.
أمثلة على الآلة الكاتبة
// Declare variableslet variableName: dataType = value;// Basic typeslet num: number = 42;let cool: boolean = true;let str: string = "Hello, World!";// Declare arrayslet arr: number [] = [1, 2, 3];let arr: Array<number> = [1, 2, 3];// Declare tupleslet tuple: [string, number] = ["Hello", 42];// Declare enumenum Color {Red, Green, Blue};let c: Color = Color.Green;// Unionslet variableName: string | number = "Hello";// Functionsfunction add (a: number, b: number): number { return a + b;}// Declare an interfaceinterface Person { firstName: string; lastName: string;} let p: Person = {firstName: "John", lastName: "Doe"};// Declare a classclass Student { fullName: string; constructor (public firstName: string, public lastName: string) { this.fullName = firstName + " " + lastName; }} let s = new Student ("John", "Doe"); ما الذي أحتاج إلى تنزيله للبدء في استخدام JavaScript؟
دورة JavaScript الخاصة بـ Pluralsight : سترشدك دورة “البدء” إلى ما تحتاجه لبدء رحلة JS الخاصة بك. على أقل تقدير، سوف تحتاج إلى محرر التعليمات البرمجية.
يوفر لك محرر التعليمات البرمجية بيئة لإنشاء البرامج النصية. عدد قليل منها شعبية تشمل
بالإضافة إلى ذلك، إذا لم تكن مثبتة بالفعل على جهاز الكمبيوتر الخاص بك، فمن المحتمل أنك تريد تنزيل Git و Node.js. للحصول على دليل كامل لتثبيت هذه المكونات، قم بزيارة “تثبيت برنامج التطوير” عندما تقوم بتسجيل الدخول إلى Pluralsight.
- تحميل Node.js
- بالنسبة لـ Vue، قم بتثبيت Node.js أولاً ثم تحقق من دليل البدء السريع لـ Vue
- يتطلب Angular أيضًا Node.js، ويتم تثبيت Angular CLI عبر Node Package Manager (NPM)
المصدر: pluralsight
شاهد المزيد:
