أنا تعلمت اساسيات جافا سكربت ، تعلمت اساسيات jquery , وايضا json و ajax
لكن هل يجب علي تعلم هذا كله؟ وماذا يجب أن اتعلم ايضا واريد أن امارس ما تعلمته.
افيدونا وارسموا لنا الطريق
8 Likes
السلام عليكم
إذا كنت فقط قد تعلمت الأساسيات إذا أنصحك بالمواصلة في تعلم هذه اللغة الرائعة وذلك بـ:
-
التوغل داخل البرمجة كائنية التوجه والتعمق فيها، لتتمكن من كتابة classes تستطيع من خلاله انشاء أشياء أو كائنات مثيلة لها تأخذ خصائصها ودوالها وتكتشف طريقة استخدام التفويض والتوارث لبناء تطبيقات ببنية جيدة.
-
تعلم الصيغة الجديدة ES6 واكتشاف مزاياها
-
تعلم طريقة كتابة اختبارات (test suits) عن طريق مجموعة من الدوال التي تتحقق مما إذا كانت أجزاء موقعك تعمل كما هو متوقع أم لا، واكتشاف مكاتب مثل مكتبة Jasmine الرائعة التي ستغنيك عن فعل ذلك يدويا.
-
مادمت قد تعلمت ajax فلا بد أن تعرف كيف تتعامل مع promises من أجل مايسمى بالعمل المتزامن
-
تعلم أطر أو مكتبات مثل
Angular
Ember
React
VueJS الخ -
تعلم كيف تجعل موقعك متاح حتى وإن طرأ هناك مشكلة في network أو فقدان الإتصال بالانترنت يعني Offline mode وذلك بتعلم استخدام خدمة service worker ولما لا تغتنم الفرصة لجعل موقعك قابل للتحميل على الموبايل وكأنه تطبيق فعلي وذلك بتعلم Progressive Web Application
-
تعلم Accessibility من أجل تجربة المستخدم أفضل خاصة لذوي الإحتياجات الخاصة (ضعف البصر أو السمع، إعاقة حركية إلخ)
-
تعلم كيفية جعل موقعك يعمل بكفاءة وسرعة عاليتين (performance)
وهناك أمور أخرى يجب عليك تعلمها لأنه وفي الأخير كل ما اكتشفت شيء هناك آلاف الأشياء في انتظارك لتعلمها
12 Likes
بماذا تنصحني أن ابدأ واذا كان لديك مصدر لاتعلم منه
كل الشكر
4 Likes
إبدأ بالتعمق في تعلم البرمجة الكائنية التوجه وكيفية انشاء objects من classes والتعامل معها، يوجد عدة مصادر تستطيع البحث عن دورات في اليوتوب مثل هذه الدورة : https://www.youtube.com/watch?v=4l3bTDlT6ZI&list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7
وبالنسبة لصيغة ES6 https://www.youtube.com/watch?v=0Mp2kwE8xY0&list=PL4cUxeGkcC9gKfw25slm4CUDUcM_sXdml
وكل ما تتعلم شيء عليك أن تطبقه وتتمرن عليه وتتعمق فيه جيدا لكي تتمكن من التعامل مع أي مشروع بسهولة حتى وإن كان الوقت ضيق تستطيع بناءه بكل أريحية
10 Likes
Dom and Bom
و اختار مكتبة اخري انا مثلا ناوي علي vuejs
6 Likes
تقريباً لارا @L.Da ذكرت جميع الأمور المهمة 
ما أعجبني في تعليقها تركيزها على المفاهيم أكثر من الأدوات، لأن الأغلبية العظمى من الناس يتوجهوا لتعلم الأدوات قبل المفاهيم الرئيسية 
هناك أيضاً مفهوم رئيسي في الجافاسكربت وهو نمط Functional Programming وهو كثير الاستعمال في الجافاسكربت (أنت تعلمت في البايثون نمط Objective Oriented Programming - OOP لأنها النمط كثير الاستعمال مع بايثون).
بالنسبة للأدوات الأخيرة التي تهم مطوري جافاسكربت والتي يجب عليك التعمق فيها:
- الـ runtime الأشهر مع جافاسكربت Node.js: https://nodejs.org/en/
- أدوات الـ bundling مثل webpack: https://webpack.js.org
- أدوات transpiling مثل babel: https://babeljs.io
وكما قالت لارا مع الوقت ستكتشف أنه يوجد أشياء أخرى لتعلمها دائماً 
9 Likes
لقد تعلمت ال oop في java script وهي قريبة جدا من python
لكن ما اثار انتباهي انه يوجد نمطين للبرمجة كائنية التوجه في جافا سكربت وهي
- Class
- Prototype
لكن ما الفرق في استخدامها.
يعني هل يكفي اذا استخدمت طريقة Class
؟؟
6 Likes
أكيد يكفي استعمال class، في الحقيقة الـ Javascript تختلف نوعا ما عن البايثون، لأنها في الأصل عبارة عن objects أو first class function، يعني لجعلها تعمل على طريقة OOP، كنا في ES5 ننشئ function بإسم يبدأ بـCapital letter على أساس أنه constructor:
// هنا تستطيع أن تحدد الخصائص في هذه الدالة على أساس أنها constructor
function Car(name, color, model) {
this.name = name;
this.color = color;
this.model = model;
this.status = false;
}
ومن ثم ننشئ methods على أساس prototype :
// Prototype 1 as first method of Car function
Car.prototype.turnOn = function turnOn() {
if (!this.status) {
return this.status = true;
} else {
console.log(this.name + " is already on");
}
};
// Prototype 2 as second method of Car function
Car.prototype.turnOff = function turnOff() {
if (this.status) {
return this.status = false;
} else {
console.log(this.name + " is already off");
}
};
لكن في صيغة ES6 تغيرت طريقة الكتابة لتصبح شبيهة بباقي اللغات مثل البايثون، لاحظ الفرق:
class Car {
// هنا تستطيع أن تحدد الخصائص في construction
constructor(name, color, model) {
this.name = name;
this.color = color;
this.model = model;
this.status = false;
}
// Proto 1 as 1st method of this class
turnOn() {
if (!this.status) {
return this.status = true;
} else {
console.log(`${this.name} is already on`)
}
}
// proto 2 as method
turnOff() {
if (this.status) {
return this.status = false;
} else {
console.log(`${this.name} is already off`)
}
}
}
لاحظ في الصيغة الجديدة جمعنا الدالة Car مع كل prototypes الخاصة بها داخل identifier باسم كلاس
اذا قمنا بانشاء object من هذا الكلاس مثلا:
let myCar = new Car("A1","White","Audi")
فنجد أن turnOn و turnOff هما prototype
7 Likes
انا احبذ استخدام طريقة ال class
وهي الانسب بالنسبة لي
4 Likes
نعم٬ يوجد syntax متشعب في جافاسكربت للقيام بنفس الشيء باكثر من طريقة.
لكن مالسبب؟
جافاسكربت (اللغة) تتبع منظمة ECMA والتي تنشأ ال standard للتكنولوجيا.
كل فترة تصدر نسخة جديدة من ECMAScript وهو يعتبر القوانين او specification التي تتبعها لغة جافاسكربت.
في السنوات الاخيرة اصدرت المنظمة ECMAScript 6 - ES6 (أو التسمية الأخرى ECMAScript2015) وهو يحتوي على عدة اشياء جميلة من ضمنها class syntax 
يعني في الماضي الطريقة الوحيدة لانشاء classes هي باستعمال prototype، لكن مع ES6 اضافوا class syntax ولكنها ليست شيء مختلف كلياً… هي في الآخر يتم تحويلها إلى prototype (لهذا تعرف بـ syntactic sugar بمعنى تغليفة حلوة ).
لاحظ في مرجع mozilla developer network (من أفضل مراجع تطوير الويب) تاريخ class: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Specifications
وهنا تاريخ prototype: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
يجدر الإشارة أن class syntax كونها من ضمن ECMAScript 2015 ليست مدعومة في كل المتصفحات ولتوفير الدعم يأتي هنا دور babel
بإمكانك الإطلاع على الدعم لهذه الخاصية من موقع Can I Use: https://caniuse.com/#feat=es6-class
7 Likes
مثلما قال أستاذنا الكريم @YaserAlnajjar فالصيغة الجديدة لا تدعمها كل المتصفحات
أكيد بما أنك تحبذ استخدام الصيغة الجديدة يمكنك استخدام أداة pollyfill التي تقوم بتغطية وإصلاح العيوب لتفادي ظهور أخطاء أو أعطاب في المتصفحات التي لا تدعم صيغة الجافاسكريبت الجديدة لأن هذه الأداة هي عبارة عن ملف javascript يحتوي على الدوال الغير محدثة والغير الموجودة فيها.
7 Likes
شكراً على هذا الاثراء @L.Da @YaserAlnajjar
سوف ابحث في موضوع pollyfill واذا كان هناك اي شيء غير واضح بالتأكبد سوف أعود لكم مع مودتي 
4 Likes
ياسر و لارا كفوا و وفوا وهذه مشاركتي معكم في هذا النقاش 
بجيب لك ملخص لأهم ما يجب عليك معرفته في الـ learning path الخاص بالجافاسكربت و المواضيع الي يجب عليك التركيز عليها قبل الألتفاف إلى أي شئ أخر وهي كالتالي:
1- كن ملم بشكل كامل عن الـ Syntax وفاهم للمفاهيم الرئيسية مثل الـ Hoisting, Scope, prototype, HTTP
2- كن متقن للـ DOM Manipulation و ملم عن الـ Shadow DOM
3- كن ملم عن الـ BOM
4- تعلم ES6
5- تعلم الـ Featch API
6- كن ملم عن الـ OOP
7- كن ملم عن Modular Javascript
8- كن ملم عن الـ Design pattern
من ثم بإمكانك الإنتقال للمستوى الاخر والتعامل مع أي Framework او library أو حتى Testing tool تريد بكل سهولة وسلاسة.
ونصيحتي لك لا ترهق نفسك بالتعلم النظري لأنه لحظي وراح تمل بسرعة ولكن جيب أفكار لتطبيقات معينة وحاول تشتغل عليها وبنفس الوقت تتعلم 
9 Likes
في الحقيقة أكون اخدعك اذا قلت لك بأنه لدي مصادر مرتبة وشاملة راح توصلك للإحتراف بدون تشتت فهذه هي المشكلة التي نحاول حلها في كورتابز.
لذا ان يكون لديك مصادر في يدك يعني انك ستكون مشتت بينها لكن أن يكون لديك في يدك الموضوع الذي تريد تعلمة فذلك يعني بأنك مركز وتستطيع توجية نفسك بين كل المصادر المتاحة من خلال البحث على الإنترنت.
لكن راح اعطيك بعض المصادر لتبدأ بها و التي ستفيدك في هذه المرحلة لبناء أسس قوية وحاول الأ تضيع بينها وألا ينتهي بك المطاف تدرسها كانها مادة جامعية فكلنا نعرف مصير تلك المواد 
الكتب:
1- You Don’t Know JS
2- Eloquent JavaScript
المواقع:
1- MDN
2-The Modern JavaScript Tutorial
6 Likes
3 Likes
اود معرفة الإجابة 
2 Likes
مرحباً بك ماجدة معنا في المجتمع 
الإجابة موجودة ضمن النقاش بالأعلى…
1 Like
اهلا الصراحة ما فاهمة حاجة من اللي تحكوه وكانه صيني
انا بس تعلمت شوية من الدروس في html and css
و اود التعمق اكثر و الفهم في تطبيقها بالتدرب على انشاء مواقع و محاولة التطبيق اكثر
فلهذا اريد منكم توجيهي او اعطائي تطبيقات اعملها مشاريع احاول كيفية القيام
اذا ممكن اريد ان ابرهن لنفسي اني تعلمت
شكرا
4 Likes