| # يوم | موضوعات |
|---|---|
| 01 | مقدمة |
| 02 | أنواع البيانات |
| 03 | Booleans ، المشغلين ، التاريخ |
| 04 | الشرطية |
| 05 | صفائف |
| 06 | حلقات |
| 07 | وظائف |
| 08 | أشياء |
| 09 | وظائف ترتيب أعلى |
| 10 | مجموعات وخرائط |
| 11 | التدمير والانتشار |
| 12 | تعبيرات منتظمة |
| 13 | طرق كائن وحدة التحكم |
| 14 | معالجة الخطأ |
| 15 | فصول |
| 16 | جيسون |
| 17 | مخزن الويب |
| 18 | وعود |
| 19 | إنهاء |
| 20 | كتابة رمز نظيف |
| 21 | دوم |
| 22 | معالجة كائن DOM |
| 23 | مستمعي الحدث |
| 24 | المشروع المصغر: النظام الشمسي |
| 25 | المشروع المصغر: تصور بيانات البلدان العالمية 1 |
| 26 | المشروع المصغر: تصور بيانات البلدان العالمية 2 |
| 27 | المشروع المصغر: محفظة |
| 28 | مشروع صغير: المتصدرين |
| 29 | المشروع المصغر: شخصيات متحركة |
| 30 | المشاريع النهائية |
؟؟؟ ترميز سعيد ؟؟؟
المؤلف: Asabeneh Yetayeh
يناير 2020
؟ إنجليزي ؟؟ الإسبانية ؟؟ إيطالي ؟؟ الروسية ؟؟ تركي ؟؟ أذربيجان ؟؟ كوري ؟؟ الفيتنامي ؟؟ البولندية ؟؟ البرتغالية
اليوم 2 >>
تهانينا على اتخاذ قرار بالمشاركة في 30 يومًا من تحدي برمجة JavaScript. في هذا التحدي ، سوف تتعلم كل ما تحتاجه لتكون مبرمج JavaScript ، وبشكل عام ، المفهوم الكامل للبرمجة. في نهاية التحدي ، ستحصل على شهادة إتمام تحدي برمجة برمجة برمجة 30 يومًا. في حال كنت بحاجة إلى مساعدة أو إذا كنت ترغب في مساعدة الآخرين ، فيمكنك الانضمام إلى مجموعة Telegram المخصصة.
يمثل تحدي 30DaysofjavaScript دليلًا لكل من المبتدئين ومطوري JavaScript المتقدمين. مرحبًا بك في JavaScript. JavaScript هي لغة الويب. أستمتع باستخدام JavaScript وتعليمه وآمل أن تفعل ذلك أيضًا.
في هذا التحدي خطوة بخطوة ، ستتعلم JavaScript ، لغة البرمجة الأكثر شعبية في تاريخ البشرية. يتم استخدام JavaScript لإضافة التفاعل إلى مواقع الويب ، لتطوير تطبيقات الأجهزة المحمولة وتطبيقات سطح المكتب والألعاب وفي الوقت الحاضر يمكن استخدام JavaScript للبرمجة من جانب الخادم والتعلم الآلي و AI .
زادت شعبية JavaScript (JS) في السنوات الأخيرة وكانت لغة البرمجة الرائدة على مدار السنوات العشر الماضية وهي لغة البرمجة الأكثر استخدامًا على جيثب.
هذا التحدي سهل القراءة ، مكتوبة باللغة الإنجليزية للمحادثة ، الانخراط ، المحفز ، وفي نفس الوقت ، يكون الأمر صعباً للغاية. تحتاج إلى تخصيص الكثير من الوقت لإنهاء هذا التحدي. إذا كنت متعلمًا بصريًا ، فيمكنك الحصول على درس الفيديو على قناة Washera YouTube. اشترك في القناة والتعليق وطرح أسئلة على Vides YouTube وتكون استباقية ، سوف يلاحظك المؤلف في النهاية.
يحب المؤلف أن يسمع رأيك في التحدي ، ومشاركة المؤلف من خلال التعبير عن أفكارك حول تحدي 30DaysofjavaScript. يمكنك ترك شهادتك على هذا الرابط
لا توجد معرفة مسبقة بالبرمجة لاتباع هذا التحدي. تحتاج فقط:
أعتقد أن لديك الدافع والرغبة القوية في أن تكون مطورًا وجهاز كمبيوتر وإنترنت. إذا كان لديك هذه ، فسيكون لديك كل شيء للبدء.
قد لا تحتاج إلى node.js في الوقت الحالي ولكن قد تحتاجها في وقت لاحق. تثبيت node.js.
بعد تنزيل نقر مزدوج وتثبيت
يمكننا التحقق مما إذا كانت العقدة مثبتة على جهازنا المحلي عن طريق فتح محطة أجهزتنا أو موجه الأوامر.
asabeneh $ node -v
v12.14.0عند إنشاء هذا البرنامج التعليمي ، كنت أستخدم الإصدار 12.14.0 ، ولكن الآن الإصدار الموصى به من Node.js للتنزيل هو V14.17.6 ، بحلول الوقت الذي تستخدم فيه هذه المادة ، قد يكون لديك إصدار Node.js أعلى.
هناك العديد من المتصفحات هناك. ومع ذلك ، أوصي بشدة Google Chrome.
قم بتثبيت Google Chrome إذا لم يكن لديك واحدة بعد. يمكننا كتابة رمز JavaScript الصغير على وحدة التحكم في المتصفح ، لكننا لا نستخدم وحدة التحكم في المتصفح لتطوير التطبيقات.
يمكنك فتح Google Chrome Console إما عن طريق النقر على ثلاث نقاط في الزاوية اليمنى العليا من المتصفح ، أو تحديد المزيد من الأدوات -> أدوات المطورين أو استخدام اختصار لوحة المفاتيح. أنا أفضل استخدام الاختصارات.
لفتح وحدة التحكم Chrome باستخدام اختصار لوحة المفاتيح.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
بعد فتح وحدة التحكم في Google Chrome ، حاول استكشاف الأزرار المحددة. سنقضي معظم الوقت على وحدة التحكم. وحدة التحكم هي المكان الذي يذهب فيه رمز JavaScript الخاص بك. يغير محرك Google Console V8 رمز JavaScript الخاص بك إلى رمز الجهاز. دعنا نكتب رمز JavaScript على وحدة التحكم في Google Chrome:
يمكننا كتابة أي رمز JavaScript على وحدة التحكم في Google أو أي وحدة تحكم متصفح. ومع ذلك ، لهذا التحدي ، نركز فقط على وحدة التحكم في Google Chrome. افتح وحدة التحكم باستخدام:
Mac
Command+Option+I
Windows:
Ctl+Shift+I لكتابة رمز JavaScript الأول ، استخدمنا وحدة Console.log () . مررنا وسيطة كبيانات إدخال ، وتعرض الوظيفة الإخراج. مررنا 'Hello, World' كبيانات إدخال أو وسيطة في وظيفة console.log ().
console . log ( 'Hello, World!' ) يمكن أن تأخذ وظيفة console.log() معلمات متعددة مفصولة بفواصل. يبدو أن بناء الجملة كما يلي: console.log(param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' ) كما ترون من رمز المقتطف أعلاه ، يمكن أن تأخذ console.log() وسيطات متعددة.
مبروك! لقد كتبت رمز JavaScript الأول باستخدام console.log() .
يمكننا إضافة تعليقات إلى الكود لدينا. التعليقات مهمة جدًا لجعل الكود أكثر قابلية للقراءة وترك الملاحظات في الكود لدينا. لا يقوم JavaScript بتنفيذ جزء التعليق من الكود الخاص بنا. في JavaScript ، أي خط نص يبدأ بـ // في JavaScript هو تعليق ، وأي شيء مغلق مثل هذا // هو أيضًا تعليق.
مثال: تعليق سطر واحد
// This is the first comment
// This is the second comment
// I am a single line commentمثال: تعليق متعدد الأسلحة
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/ لغات البرمجة تشبه اللغات البشرية. تستخدم اللغة الإنجليزية أو العديد من اللغة الكلمات والعبارات والجمل والجمل المركبة وغيرها من غيرها لنقل رسالة ذات معنى. المعنى الإنجليزي لبناء الجملة هو ترتيب الكلمات والعبارات لإنشاء جمل جيدة الشكل بلغة ما . التعريف الفني للجملة هو بنية العبارات في لغة الكمبيوتر. لغات البرمجة لها بناء جملة. JavaScript هي لغة برمجة ومثل لغات البرمجة الأخرى التي لديها بناء جملة خاص بها. إذا لم نكتب بناء جملة يفهمه JavaScript ، فسوف يرفع أنواعًا مختلفة من الأخطاء. سوف نستكشف أنواعًا مختلفة من أخطاء JavaScript لاحقًا. في الوقت الحالي ، دعونا نرى أخطاء بناء الجملة.
لقد ارتكبت خطأ متعمد. نتيجة لذلك ، ترفع وحدة التحكم أخطاء بناء الجملة. في الواقع ، بناء الجملة مفيدة للغاية. إنه يعلم نوع الخطأ الذي ارتكب. من خلال قراءة إرشادات ملاحظات الخطأ ، يمكننا تصحيح بناء الجملة وإصلاح المشكلة. تسمى عملية تحديد وإزالة الأخطاء من البرنامج تصحيح الأخطاء. دعونا نصلح الأخطاء:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' ) حتى الآن ، رأينا كيفية عرض النص باستخدام console.log() . إذا قمنا بطباعة النص أو السلسلة باستخدام console.log() ، فيجب أن يكون النص داخل عروض الأسعار المفردة أو عروض الأسعار المزدوجة أو backtick. مثال:
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) الآن ، دعنا نمارس المزيد من كتابة رموز JavaScript باستخدام console.log() على وحدة التحكم في Google Chrome لأنواع بيانات الأرقام. بالإضافة إلى النص ، يمكننا أيضًا إجراء حسابات رياضية باستخدام JavaScript. دعنا نفعل الحسابات البسيطة التالية. من الممكن كتابة رمز JavaScript على وحدة التحكم في Google Chrome مباشرة بدون وظيفة console.log() . ومع ذلك ، يتم تضمينه في هذه المقدمة لأن معظم هذا التحدي سيحدث في محرر نصوص حيث يكون استخدام الوظيفة إلزاميًا. يمكنك اللعب مباشرة مع التعليمات على وحدة التحكم.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3يمكننا كتابة رموزنا على وحدة التحكم في المتصفح ، ولكن لن يكون ذلك للمشاريع الأكبر. في بيئة عمل حقيقية ، يستخدم المطورون محرري الكود المختلفين لكتابة رموزهم. في 30 يومًا من تحدي JavaScript ، سنستخدم رمز Visual Studio.
Visual Studio Code هو محرر نصوص مفتوح المصدر شائع جدًا. أوصي بتنزيل رمز Visual Studio ، ولكن إذا كنت تؤيد المحررين الآخرين ، فلا تتردد في متابعة ما لديك.
إذا قمت بتثبيت رمز Visual Studio ، دعنا نبدأ في استخدامه.
افتح رمز Visual Studio بالنقر المزدوج على أيقونة. عندما تفتحه ، ستحصل على هذا النوع من الواجهة. حاول التفاعل مع الرموز المسمى.
يمكن إضافة JavaScript إلى صفحة ويب بثلاث طرق مختلفة:
تُظهر الأقسام التالية طرقًا مختلفة لإضافة رمز JavaScript إلى صفحة الويب الخاصة بك.
قم بإنشاء مجلد مشروع على سطح المكتب الخاص بك أو في أي مكان ، قم بتسميته 30 daysofjs وقم بإنشاء ملف index.html في مجلد المشروع. ثم الصق الكود التالي وفتحه في متصفح ، على سبيل المثال Chrome.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Inline Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!') " > Click Me </ button >
</ body >
</ html > الآن ، لقد كتبت فقط أول نص مضمّن. يمكننا إنشاء رسالة تنبيه منبثقة باستخدام وظيفة alert() المدمجة.
يمكن كتابة البرنامج النصي الداخلي في head أو body ، ولكن من المفضل وضعه على جسم وثيقة HTML. أولاً ، دعنا نكتب على الجزء الرئيسي من الصفحة.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ head >
< body > </ body >
</ html > هذه هي الطريقة التي نكتب بها نصًا داخليًا معظم الوقت. يعد كتابة رمز JavaScript في قسم الجسم هو الخيار الأكثر تفضيلًا. افتح وحدة التحكم في المتصفح لرؤية الإخراج من console.log() .
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
</ head >
< body >
< button onclick =" alert('Welcome to 30DaysOfJavaScript!'); " > Click Me </ button >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ body >
</ html > افتح وحدة التحكم في المتصفح لرؤية الإخراج من console.log() .
على غرار البرنامج النصي الداخلي ، يمكن أن يكون رابط البرنامج النصي الخارجي على الرأس أو الجسم ، ولكن من المفضل وضعه في الجسم. أولاً ، يجب علينا إنشاء ملف JavaScript خارجي مع ملحق .js. جميع الملفات التي تنتهي مع ملحق .js هي ملفات JavaScript. قم بإنشاء ملف مسمى مقدمة. js داخل دليل المشروع الخاص بك واكتب الكود التالي وربط ملف .js في أسفل الجسم.
console . log ( 'Welcome to 30DaysOfJavaScript' )البرامج النصية الخارجية في الرأس :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
< script src =" introduction.js " > </ script >
</ head >
< body > </ body >
</ html >البرامج النصية الخارجية في الجسم :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
</ head >
< body >
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
< script src =" introduction.js " > </ script >
</ body >
</ html > افتح وحدة التحكم في المتصفح لرؤية إخراج console.log() .
يمكننا أيضًا ربط ملفات JavaScript الخارجية المتعددة بصفحة ويب. قم بإنشاء ملف helloworld.js داخل مجلد 30DaySofJS واكتب الرمز التالي.
console . log ( 'Hello, World!' ) <!DOCTYPE html >
< html lang =" en " >
< head >
< title > Multiple External Scripts </ title >
</ head >
< body >
< script src =" ./helloworld.js " > </ script >
< script src =" ./introduction.js " > </ script >
</ body >
</ html >يجب أن يكون ملف Main.js الخاص بك أقل من جميع البرامج النصية الأخرى . من المهم جدًا أن تتذكر هذا.
في JavaScript وأيضًا لغات البرمجة الأخرى ، هناك أنواع مختلفة من أنواع البيانات. فيما يلي أنواع البيانات البدائية JavaScript: السلسلة ، الرقم ، المنطقية ، غير المحددة ، الفارغة ، والرمز .
مجموعة من حرف واحد أو أكثر بين اثنين من اقتباس واحد ، عروض أسعار مزدوجة ، أو backticks.
مثال:
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'القيمة المنطقية إما صحيحة أو خاطئة. أي مقارنات تُرجع قيمة منطقية ، وهي إما صحيحة أو خاطئة.
نوع البيانات المنطقية هو إما قيمة حقيقية أو خاطئة.
مثال:
true // if the light is on, the value is true
false // if the light is off, the value is falseفي JavaScript ، إذا لم نقم بتعيين قيمة لمتغير ، فإن القيمة غير محددة. بالإضافة إلى ذلك ، إذا كانت الوظيفة لا تعيد أي شيء ، فإنها تعود غير محددة.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetNULL في JavaScript يعني قيمة فارغة.
let emptyValue = null للتحقق من نوع بيانات متغير معين ، نستخدم مشغل typeof . انظر المثال التالي.
console . log ( typeof 'Asabeneh' ) // string
console . log ( typeof 5 ) // number
console . log ( typeof true ) // boolean
console . log ( typeof null ) // object type
console . log ( typeof undefined ) // undefined تذكر أن التعليق في JavaScript يشبه لغات البرمجة الأخرى. التعليقات مهمة في جعل الكود الخاص بك أكثر قابلية للقراءة. هناك طريقتان للتعليق:
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentالتعليقات المتعددة:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ المتغيرات هي حاويات البيانات. يتم استخدام المتغيرات لتخزين البيانات في موقع الذاكرة. عند الإعلان عن متغير ، يتم حجز موقع الذاكرة. عندما يتم تعيين متغير لقيمة (بيانات) ، سيتم ملء مساحة الذاكرة بهذه البيانات. لإعلان متغير ، نستخدم VAR أو LET أو COST كلمات رئيسية.
لمتغير يتغير في وقت مختلف ، نستخدم Let . إذا لم تتغير البيانات على الإطلاق ، فإننا نستخدم Const . على سبيل المثال ، لا تتغير PI ، اسم البلد ، الجاذبية ، ويمكننا استخدام Const . لن نستخدم VAR في هذا التحدي ولا أوصيك باستخدامه. إنها طريقة عرضة للخطأ لإعلان المتغير ، ولديه الكثير من التسرب. سنتحدث أكثر عن var و Let و Const بالتفصيل في أقسام أخرى (النطاق). في الوقت الحالي ، التفسير أعلاه يكفي.
يجب أن يتبع اسم متغير JavaScript صالح القواعد التالية:
فيما يلي أمثلة على متغيرات JavaScript صالحة.
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020يتبع المتغيرات الأولى والثانية في القائمة اتفاقية Camelcase للإعلان في JavaScript. في هذه المادة ، سوف نستخدم متغيرات Camelcase (CamelWithoneHump). نستخدم Camelcase (camelwithtwohump) لإعلان الفصول الدراسية ، سنناقش حول الفصول والأشياء في قسم آخر.
مثال على المتغيرات غير الصالحة:
first - name
1 _num
num_ # _1دعنا نعلن المتغيرات مع أنواع البيانات المختلفة. لإعلان متغير ، نحتاج إلى استخدام الكلمة الرئيسية Let أو const قبل الاسم المتغير. باتباع الاسم المتغير ، نكتب علامة متساوية (عامل تعيين) ، وقيمة (بيانات مخصصة).
// Syntax
let nameOfVariable = valueNameOfvRiable هو الاسم الذي يخزن بيانات مختلفة من القيمة. انظر أدناه للحصول على أمثلة التفاصيل.
أمثلة على المتغيرات المعلنة
// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
console . log ( firstName , lastName , country , city , age , isMarried ) Asabeneh Yetayeh Finland Helsinki 100 true // Declaring variables with number values
let age = 100 // age in years
const gravity = 9.81 // earth gravity in m/s2
const boilingPoint = 100 // water boiling point, temperature in °C
const PI = 3.14 // geometrical constant
console . log ( gravity , boilingPoint , PI ) 9.81 100 3.14 // Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
let name = 'Asabeneh' , job = 'teacher' , live = 'Finland'
console . log ( name , job , live ) Asabeneh teacher Finlandعند تشغيل ملف index.html في المجلد 01 يومًا ، يجب عليك الحصول على هذا:
؟ أنت مذهل! لقد أكملت للتو تحدي اليوم الأول وأنت في طريقك إلى العظمة. الآن قم ببعض التمارين لعقلك وعضلةك.
اكتب تعليق سطر واحد يقول ، يمكن أن تجعل التعليقات رمزًا قابلاً للقراءة
اكتب تعليقًا واحدًا آخر يقول ، مرحبًا بك في 30 يومًا
اكتب تعليقًا متعدد الأسلحة يقول ، يمكن أن تجعل التعليقات قابلة للقراءة ، وسهلة إعادة الاستخدام والمعلوماتية
قم بإنشاء ملف variable.js وإعلان المتغيرات وتعيين أنواع البيانات المنطقية وغير المحددة والخالية
قم بإنشاء ملف dataTypes.js واستخدم مشغل JavaScript TypeOF للتحقق من أنواع البيانات المختلفة. تحقق من نوع بيانات كل متغير
أعلن أربعة متغيرات دون تعيين القيم
أعلن أربعة متغيرات مع قيم مخصصة
إعلان المتغيرات لتخزين اسمك الأول واسم العائلة والحالة الزواجية والبلد والعمر في خطوط متعددة
إعلان المتغيرات لتخزين اسمك الأول واسم العائلة والحالة الزواجية والبلد والعمر في سطر واحد
إعلان اثنين من المتغيرات myage و yourage وقم بتعيين القيم الأولية لهما وتسجيلها إلى وحدة التحكم في المتصفح.
I am 25 years old.
You are 30 years old.؟ مبروك! ؟
اليوم 2 >>
