diff --git a/components/Nav.tsx b/components/Nav.tsx new file mode 100644 index 0000000..476a691 --- /dev/null +++ b/components/Nav.tsx @@ -0,0 +1,31 @@ +export default function NavBar() { + const menus = [ + { name: "later", href: "/" }, + { name: "later", href: "/docs" }, + ]; + + return ( + + ); +} diff --git a/courses/arrays/intro.md b/courses/arrays/intro.md index c4bc83f..eaca357 100644 --- a/courses/arrays/intro.md +++ b/courses/arrays/intro.md @@ -1,16 +1,19 @@ --- -sidebar_position: 1 +title: المصفوفات والتعامل معها +snippet: هو نوع بيانات في JavaScript يمثل بيانات مجموعة معا. +order: 1 --- -# المصفوفات والتعامل معها - -[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) هو نوع بيانات في JavaScript يمثل بيانات مجموعة معا. +[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) +هو نوع بيانات في JavaScript يمثل بيانات مجموعة معا. ## كتابة المصفوفات -باستخدام متغيرات مصفوفة JavaScript، يمكننا تخزين عدة أجزاء من البيانات في مكان واحد. +باستخدام متغيرات مصفوفة JavaScript، يمكننا تخزين عدة أجزاء من البيانات في مكان +واحد. -تبدأ تعريف المصفوفة بقوس مربع للفتح، وتنتهي بقوس مربع للإغلاق، وتضع فاصلة بين كل إدخال، كما يلي: +تبدأ تعريف المصفوفة بقوس مربع للفتح، وتنتهي بقوس مربع للإغلاق، وتضع فاصلة بين كل +إدخال، كما يلي: ```js const sandwich = ["peanut butter", "jelly", "bread"]; @@ -23,14 +26,16 @@ const sandwich = ["peanut butter", "jelly", "bread"]; ```js const teams = [["Bulls", 23], ["White Sox", 45]]; ``` -ويسمى هذا أيضًا بمصفوفة متعددة الأبعاد (Multidimensional Array). +ويسمى هذا أيضًا بمصفوفة متعددة الأبعاد (Multidimensional Array). ## التعامل مع المصفوفات يمكننا الوصول إلى البيانات داخل المصفوفات باستخدام الفهارس. -تتم كتابة فهارس المصفوفات بنفس تدوين الأقواس الذي تستخدمه السلاسل، باستثناء أنه بدلاً من تحديد حرف، فإنها تحدد إدخالاً في المصفوفة. مثل السلاسل النصية، تستخدم المصفوفات فهرسة صفرية، لذا فإن العنصر الأول في المصفوفة له فهرس يساوي 0. +تتم كتابة فهارس المصفوفات بنفس تدوين الأقواس الذي تستخدمه السلاسل، باستثناء أنه +بدلاً من تحديد حرف، فإنها تحدد إدخالاً في المصفوفة. مثل السلاسل النصية، تستخدم +المصفوفات فهرسة صفرية، لذا فإن العنصر الأول في المصفوفة له فهرس يساوي 0. ```js const array = [50, 60, 70]; @@ -38,16 +43,17 @@ console.log(array[0]); const data = array[1]; console.log(data); ``` -يطبع ```console.log(array[0])``` ```50```، وتكون ```data``` لها القيمة ```60```. +يطبع `console.log(array[0])` `50`، وتكون `data` لها القيمة `60`. ## تعديل بيانات المصفوفات -على عكس السلاسل النصية، فإن مدخلات المصفوفات قابلة للتغيير ويمكن تغييرها بحرية، حتى لو تم تعريف المصفوفة باستخدام ```const```. +على عكس السلاسل النصية، فإن مدخلات المصفوفات قابلة للتغيير ويمكن تغييرها بحرية، +حتى لو تم تعريف المصفوفة باستخدام `const`. ```js const Array = [50, 40, 30]; Array[0] = 15; ``` -لدينا الآن قيمة المصفوفة ```[30, 40, 15]```. +لدينا الآن قيمة المصفوفة `[30, 40, 15]`. diff --git a/courses/arrays/manipulate-arrays.md b/courses/arrays/manipulate-arrays.md index f77e821..3814808 100644 --- a/courses/arrays/manipulate-arrays.md +++ b/courses/arrays/manipulate-arrays.md @@ -1,14 +1,15 @@ --- -sidebar_position: 3 +title: التعامل مع المصفوفات +snippet: push, pop, shift, unshift +order: 3 --- -# التعامل مع المصفوفات - ## push -هناك طريقة سهلة لإلحاق البيانات بنهاية المصفوفة عبر طريقة ```()push```. +هناك طريقة سهلة لإلحاق البيانات بنهاية المصفوفة عبر طريقة `()push`. -تأخذ الطريقة ```()push``` وسيطًا واحدًا أو أكثر وتلحقها بنهاية المصفوفة بالترتيب الذي تظهر به. تقوم بإرجاع الطول الجديد للمصفوفة. +تأخذ الطريقة `()push` وسيطًا واحدًا أو أكثر وتلحقها بنهاية المصفوفة بالترتيب الذي +تظهر به. تقوم بإرجاع الطول الجديد للمصفوفة. ```js const arr1 = [1, 2, 3]; @@ -17,15 +18,20 @@ arr1.push(4, 5); const arr2 = ["Stimpson", "J", "cat"]; arr2.push(["happy", "joy"]); ``` -أصبح لـ ```arr1``` الآن القيمة``` [5, 4, 3, 2, 1]``` و ```arr2``` له القيمة ```[["happy", "joy"], "Stimpson", "J", "cat"]```. + +أصبح لـ `arr1` الآن القيمة`[5, 4, 3, 2, 1]` و `arr2` له القيمة +`[["happy", "joy"], "Stimpson", "J", "cat"]`. ## pop -هناك طريقة أخرى لتغيير البيانات في المصفوفة وهي باستخدام الدالة ```()pop```. +هناك طريقة أخرى لتغيير البيانات في المصفوفة وهي باستخدام الدالة `()pop`. -يتم استخدام ```()pop``` لإخراج قيمة من نهاية المصفوفة. يمكننا تخزين هذه القيمة المنبثقة عن طريق إسنادها إلى متغير. بمعنى آخر، يقوم .```()pop``` بإزالة العنصر الأخير من المصفوفة وإرجاع هذا العنصر. +يتم استخدام `()pop` لإخراج قيمة من نهاية المصفوفة. يمكننا تخزين هذه القيمة +المنبثقة عن طريق إسنادها إلى متغير. بمعنى آخر، يقوم .`()pop` بإزالة العنصر +الأخير من المصفوفة وإرجاع هذا العنصر. -يمكن إخراج أي نوع من المدخلات من المصفوفة - أرقام، أو سلاسل، أو حتى صفائف متداخلة. +يمكن إخراج أي نوع من المدخلات من المصفوفة - أرقام، أو سلاسل، أو حتى صفائف +متداخلة. ```js const threeArr = [1, 4, 6]; @@ -33,29 +39,37 @@ const oneDown = threeArr.pop(); console.log(oneDown); console.log(threeArr); ``` -سيعرض ```console.log``` الأول القيمة ```6``` ، وسيعرض الثاني القيمة ```[4, 1]```. + +سيعرض `console.log` الأول القيمة `6` ، وسيعرض الثاني القيمة `[4, 1]`. ## shift يقوم ()pop دائمًا بإزالة العنصر الأخير من المصفوفة. ماذا لو كنت تريد إزالة الأول؟ -وهنا يأتي دور ```()shift```. فهو يعمل تمامًا مثل ()pop، باستثناء أنه يزيل العنصر الأول بدلاً من الأخير. +وهنا يأتي دور `()shift`. فهو يعمل تمامًا مثل ()pop، باستثناء أنه يزيل العنصر +الأول بدلاً من الأخير. ```js const ourArray = ["Stimpson", "J", ["cat"]]; const removedFromOurArray = ourArray.shift(); ``` -```removeFromOURArray``` لها قيمة السلسلة ```Stimpson،``` و ```ourArray``` سيكون لها ```["J"، ["cat"]]```. + +`removeFromOURArray` لها قيمة السلسلة `Stimpson،` و `ourArray` سيكون لها +`["J"، ["cat"]]`. ## unshift -لا يمكنك فقط إزاحة العناصر من بداية المصفوفة، بل يمكنك أيضًا إلغاء إزاحة العناصر إلى بداية المصفوفة، أي إضافة عناصر أمام المصفوفة. +لا يمكنك فقط إزاحة العناصر من بداية المصفوفة، بل يمكنك أيضًا إلغاء إزاحة العناصر +إلى بداية المصفوفة، أي إضافة عناصر أمام المصفوفة. -يعمل ```()unshift``` تمامًا مثل ()push، ولكن بدلاً من إضافة العنصر في نهاية المصفوفة، يضيف ```()unshift``` العنصر في بداية المصفوفة. +يعمل `()unshift` تمامًا مثل ()push، ولكن بدلاً من إضافة العنصر في نهاية المصفوفة، +يضيف `()unshift` العنصر في بداية المصفوفة. ```js const ourArray = ["Stimpson", "J", "cat"]; ourArray.shift(); ourArray.unshift("Happy"); ``` -بعد ```shift``` سيكون لـ ```ourArray``` القيمة ```["J", "cat"]```. بعد ```unshift``` سيكون لـ ```ourArray``` القيمة ```["Happy"، "J"، "cat"]```. \ No newline at end of file + +بعد `shift` سيكون لـ `ourArray` القيمة `["J", "cat"]`. بعد `unshift` سيكون لـ +`ourArray` القيمة `["Happy"، "J"، "cat"]`. diff --git a/courses/arrays/multidimensional-index.md b/courses/arrays/multidimensional-index.md index 140e36f..09082e1 100644 --- a/courses/arrays/multidimensional-index.md +++ b/courses/arrays/multidimensional-index.md @@ -1,22 +1,26 @@ --- -sidebar_position: 2 +title: الوصول إلى المصفوفات متعددة الأبعاد +snippet: احدى طرق التفكير في المصفوفة متعددة الأبعاد +order: 2 --- -# الوصول إلى المصفوفات متعددة الأبعاد - -إحدى طرق التفكير في المصفوفة متعددة الأبعاد هي أنها مصفوفة من المصفوفات. عند استخدام الأقواس للوصول إلى المصفوفة الخاصة بك، تشير المجموعة الأولى من الأقواس إلى الإدخالات الموجودة في المصفوفة الخارجية (المستوى الأول)، ويشير كل زوج إضافي من الأقواس إلى المستوى التالي من الإدخالات بالداخل. +إحدى طرق التفكير في المصفوفة متعددة الأبعاد هي أنها مصفوفة من المصفوفات. عند +استخدام الأقواس للوصول إلى المصفوفة الخاصة بك، تشير المجموعة الأولى من الأقواس +إلى الإدخالات الموجودة في المصفوفة الخارجية (المستوى الأول)، ويشير كل زوج إضافي +من الأقواس إلى المستوى التالي من الإدخالات بالداخل. ```js const arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], - [[10, 11, 12], 13, 14] + [[10, 11, 12], 13, 14], ]; const subarray = arr[3]; const nestedSubarray = arr[3][0]; const element = arr[3][0][1]; ``` -في هذا المثال، ```subarray``` له القيمة ```[[10, 11, 12], 13, 14]```، و ```nestedSubarray``` له القيمة ```[10, 11, 12]```، و ```element``` له القيمة ```11``` . +في هذا المثال، `subarray` له القيمة `[[10, 11, 12], 13, 14]`، و `nestedSubarray` +له القيمة `[10, 11, 12]`، و `element` له القيمة `11` . diff --git a/courses/comments.md b/courses/comments.md index 2ed9944..90fa7bd 100644 --- a/courses/comments.md +++ b/courses/comments.md @@ -1,11 +1,9 @@ --- title: التعليقات -snippet: This is an excerpt of my first blog post. +snippet: تعد التعليقات طريقة رائعة لترك ملاحظات لنفسك order: 2 --- -# التعليقات - التعليقات عبارة عن أسطر من التعليمات البرمجية التي ستتجاهلها JavaScript عمدًا. تعد التعليقات طريقة رائعة لترك ملاحظات لنفسك وللأشخاص الآخرين الذين سيحتاجون لاحقًا إلى معرفة ما يفعله هذا التعليمات البرمجية. @@ -27,11 +25,9 @@ order: 2 متعدد الأسطر */ ``` -:::tip إضافة - + أثناء كتابة التعليمات البرمجية، يجب عليك إضافة تعليقات بانتظام لتوضيح وظيفة أجزاء من التعليمات البرمجية الخاصة بك. يمكن أن يساعد التعليق الجيد في إيصال الهدف من التعليمات البرمجية الخاصة بك، سواء بالنسبة للآخرين أو لنفسك في المستقبل. - -::: + diff --git a/courses/intro.md b/courses/intro.md index aeb6b40..e6f2bd5 100644 --- a/courses/intro.md +++ b/courses/intro.md @@ -1,11 +1,9 @@ --- title: قبل أن تبداء -snippet: ابداء رحلتك في عالم البرمجة +snippet: بداية مثالية لرحلتك في عالم البرمجة order: 1 --- -## استعمال الموقع - هذا الدرس يشكل بداية مثالية لرحلتك في عالم البرمجة باستخدام هذه اللغة القوية. سنرافقك خلال هذه الرحلة ونعرض لك كيفية الاستفادة القصوى من موقعنا لتحقيق أقصى فائدة من تعلم جافاسكربت. @@ -32,7 +30,7 @@ order: 1 استفسارك في المجتمع. أعضاء المجتمع الآخرين سيكونون سعداء بمساعدتك ومشاركة تجاربهم معك. هذا التفاعل يمكن أن يجعل عملية التعلم أكثر سهولة ومتعة. -recommended + أنضم الان! [قناه التلغرام](https://t.me/NakhlahJS), [جروب التلغرام](https://t.me/Unassisted) diff --git a/courses/numbers/_data.json b/courses/numbers/_data.json index c7e8616..095e4de 100644 --- a/courses/numbers/_data.json +++ b/courses/numbers/_data.json @@ -1,4 +1,4 @@ { - "label": "المصفوفات", + "label": "الأرقام", "order": 4 } diff --git a/courses/numbers/decimals.md b/courses/numbers/decimals.md index b773384..4c32bb2 100644 --- a/courses/numbers/decimals.md +++ b/courses/numbers/decimals.md @@ -1,23 +1,25 @@ --- -sidebar_position: 2 +title: إنشاء أرقام عشرية +snippet: يمكننا تخزين الأرقام العشرية في المتغيرات أيضا +order: 2 --- -# إنشاء أرقام عشرية - -يمكننا تخزين الأرقام العشرية في المتغيرات أيضا. يُشار أحيانًا إلى الأرقام العشرية على أنها أرقام الفاصلة العائمة أو الأعداد العشرية. +يمكننا تخزين الأرقام العشرية في المتغيرات أيضا. يُشار أحيانًا إلى الأرقام العشرية +على أنها أرقام الفاصلة العائمة أو الأعداد العشرية. ```js const ourDecimal = 5.7; // رقم عشري ``` -في JavaScript، يمكنك أيضًا إجراء عمليات حسابية باستخدام الأعداد العشرية، تمامًا مثل الأعداد الصحيحة. +في JavaScript، يمكنك أيضًا إجراء عمليات حسابية باستخدام الأعداد العشرية، تمامًا +مثل الأعداد الصحيحة. دعونا نقوم بإجراء عمليات حسابية باستخدام عددين عشريين معًا. ```js const prd = 2.0 * 0.0; -console.log(prd) // 0 +console.log(prd); // 0 const div = 1.0 / 2.0; -console.log(div) // 0.5 -``` \ No newline at end of file +console.log(div); // 0.5 +``` diff --git a/courses/numbers/intro.md b/courses/numbers/intro.md index 9944668..7a6c38d 100644 --- a/courses/numbers/intro.md +++ b/courses/numbers/intro.md @@ -1,61 +1,71 @@ --- -sidebar_position: 1 +title: الأرقام والتعامل معها +snippet: هو نوع بيانات في JavaScript يمثل بيانات رقمية. +order: 1 --- -# الأرقام والتعامل معها - -[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) هو نوع بيانات في JavaScript يمثل بيانات رقمية. +[Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) +هو نوع بيانات في JavaScript يمثل بيانات رقمية. ## الجمع -الآن لنحاول إضافة رقمين باستخدام JavaScript. -تستخدم JavaScript الرمز ```+``` كعامل إضافة عند وضعه بين رقمين. + +الآن لنحاول إضافة رقمين باستخدام JavaScript. تستخدم JavaScript الرمز `+` كعامل +إضافة عند وضعه بين رقمين. ```js const someNumber = 5 + 10; ``` -```someNumber``` الآن لديه القيمة ```15```. + +`someNumber` الآن لديه القيمة `15`. ## الطرح -يمكننا أيضًا طرح رقم من رقم آخر. -تستخدم JavaScript الرمز ```-``` للطرح. + +يمكننا أيضًا طرح رقم من رقم آخر. تستخدم JavaScript الرمز `-` للطرح. + ```js const someNumber = 12 - 6; ``` -سيكون لـ ```someNumber``` القيمة ```6```. + +سيكون لـ `someNumber` القيمة `6`. ## الضرب -يمكننا أيضًا ضرب رقم في آخر. -تستخدم JavaScript الرمز ```*``` لضرب رقمين. + +يمكننا أيضًا ضرب رقم في آخر. تستخدم JavaScript الرمز `*` لضرب رقمين. + ```js const someNumber = 13 * 13; ``` -سيكون لـ ```someNumber``` القيمة ```169```. + +سيكون لـ `someNumber` القيمة `169`. ## القسمه -يمكننا أيضًا قسمة رقم على آخر. -تستخدم JavaScript الرمز ```/``` للتقسيم. -يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل ```++```. +يمكننا أيضًا قسمة رقم على آخر. تستخدم JavaScript الرمز `/` للتقسيم. + +يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل `++`. ```js const someNumber = 16 / 2; ``` -سيكون لـ ```someNumber``` القيمة ```8```. + +سيكون لـ `someNumber` القيمة `8`. ## عامل الباقي -عامل الباقي ```%``` يعطي باقي قسمة رقمين. -في الرياضيات، يمكن التحقق من أن الرقم زوجي أو فردي عن طريق التحقق من باقي قسمة الرقم على 2. الأعداد الزوجية لها باقي 0، بينما الأرقام الفردية لها باقي 1. +عامل الباقي `%` يعطي باقي قسمة رقمين. + +في الرياضيات، يمكن التحقق من أن الرقم زوجي أو فردي عن طريق التحقق من باقي قسمة +الرقم على 2. الأعداد الزوجية لها باقي 0، بينما الأرقام الفردية لها باقي 1. ```js console.log(17 % 2); // 1 console.log(48 % 2); // 0 ``` - ## زيادة أو إنقاص رقم -يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل ```++```. +يمكنك بسهولة زيادة أو إضافة واحد إلى متغير باستخدام عامل التشغيل `++`. + ```js let i = 0; i++; // اصبح i = 1 @@ -63,12 +73,11 @@ i++; // اصبح i = 1 // i++ مساوي تماما الى ( i = i + 1 ); ``` -يمكنك بسهولة إنقاص أو تقليل متغير بمقدار واحد باستخدام عامل التشغيل ```--```. +يمكنك بسهولة إنقاص أو تقليل متغير بمقدار واحد باستخدام عامل التشغيل `--`. + ```js let i = 0; i--; // اصبح i = -1 // i-- مساوي تماما الى ( i = i - 1; ); ``` - - diff --git a/courses/variables/case-sensitivity-in-variables.md b/courses/variables/case-sensitivity-in-variables.md index ae9ff56..3c76d5a 100644 --- a/courses/variables/case-sensitivity-in-variables.md +++ b/courses/variables/case-sensitivity-in-variables.md @@ -1,11 +1,9 @@ --- title: فهم حساسية الحالة في المتغيرات -snippet: This is an excerpt of my first blog post. +snippet: في JavaScript، جميع المتغيرات وأسماء الوظائف حساسة لحالة الأحرف order: 4 --- -# فهم حساسية الحالة في المتغيرات - في JavaScript، جميع المتغيرات وأسماء الوظائف حساسة لحالة الأحرف. وهذا يعني أن التسميه مهمة. diff --git a/courses/variables/console.md b/courses/variables/console.md index 4ff0872..a4f49bf 100644 --- a/courses/variables/console.md +++ b/courses/variables/console.md @@ -1,19 +1,17 @@ --- title: الطباعة ووحده التحكم -snippet: This is an excerpt of my first blog post. +snippet: طباعة معلومات أو نص على الشاشة order: 2 --- -# الطباعة ووحده التحكم - إذا كنت ترغب في طباعة معلومات أو نص على الشاشة في JavaScript، يمكنك استخدام الدالة ()console.log -:::note ملاحظة + سنتعرف قريبًا على الدوال وكيفية عملها في المراحل القادمة -::: + تحدثنا في الدرس السابق عن المتغيرات إذا أردنا طباعة المتغير على الشاشة بلغة JavaScript. يمكنك عبر المثال التالي: diff --git a/courses/variables/intro.md b/courses/variables/intro.md index d1d24fc..5556d5e 100644 --- a/courses/variables/intro.md +++ b/courses/variables/intro.md @@ -1,11 +1,9 @@ --- title: المتغيرات والتعامل معها -snippet: This is an excerpt of my first blog post. +snippet: البيانات هي أي شيء له معنى بالنسبة للكمبيوتر order: 1 --- -# المتغيرات والتعامل معها - في علوم الكمبيوتر، البيانات هي أي شيء له معنى بالنسبة للكمبيوتر. توفر JavaScript ثمانية أنواع مختلفة من البيانات: @@ -18,11 +16,11 @@ order: 1 - [null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) - [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/symbol) -:::note ملاحظة + سنتعرف قريبًا على جميع المتغيرات بالتفصيل في مراحل قادمة -::: + ## تعريف المتغيرات diff --git a/courses/variables/the-var-let-const.md b/courses/variables/the-var-let-const.md index 3052adf..da1c44d 100644 --- a/courses/variables/the-var-let-const.md +++ b/courses/variables/the-var-let-const.md @@ -1,11 +1,9 @@ --- title: الاختلافات بين var، let، const -snippet: This is an excerpt of my first blog post. +snippet: إحدى أكبر مشكلات الإعلان عن المتغيرات order: 5 --- -# الاختلافات بين var، let، const - إحدى أكبر مشكلات الإعلان عن المتغيرات باستخدام الكلمة الأساسية `var` هي أنه يمكنك بسهولة استبدال إعلانات المتغيرات: @@ -61,12 +59,10 @@ PASSWORD = 987; // حدوث خطأ بسبب اعاده تعيين الأساسية `const`. يساعد هذا عندما تحاول عن طريق الخطأ إعادة تعيين متغير من المفترض أن يظل ثابتًا. -:::note ملاحظة - + من الشائع للمطورين استخدام معرفات المتغيرات الكبيرة للقيم غير القابلة للتغيير والأحرف الصغيرة أو CamelCase للقيم القابلة للتغيير - -::: + ## الخلاصة diff --git a/courses/variables/uninitialized-variables.md b/courses/variables/uninitialized-variables.md index edc8ed8..e416cf1 100644 --- a/courses/variables/uninitialized-variables.md +++ b/courses/variables/uninitialized-variables.md @@ -1,11 +1,9 @@ --- title: فهم المتغيرات غير المهيأة -snippet: This is an excerpt of my first blog post. +snippet: عندما يتم الإعلان عن متغيرات JavaScript، تكون قيمتها الأولية غير محددة order: 3 --- -# فهم المتغيرات غير المهيأة - عندما يتم الإعلان عن متغيرات JavaScript، تكون قيمتها الأولية غير محددة ( [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined) ). إذا أجريت عملية حسابية على متغير غير محدد فستكون النتيجة ( @@ -26,8 +24,8 @@ console.log(c); // "undefined String!" كما تلاحظ المخرجات داخل التعليقات السابقة. -:::note ملاحظة + سنتعرف قريبًا على العمليات الحسابيه على الارقام والسلاسل قريبا -::: + diff --git a/fresh.gen.ts b/fresh.gen.ts index f60e9f1..93ec628 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -6,9 +6,8 @@ import * as $_slug_ from "./routes/[slug].tsx"; import * as $_404 from "./routes/_404.tsx"; import * as $_app from "./routes/_app.tsx"; import * as $api_joke from "./routes/api/joke.ts"; -import * as $greet_name_ from "./routes/greet/[name].tsx"; import * as $index from "./routes/index.tsx"; -import * as $Counter from "./islands/Counter.tsx"; +import * as $Editor from "./islands/Editor.tsx"; import { type Manifest } from "$fresh/server.ts"; const manifest = { @@ -17,11 +16,10 @@ const manifest = { "./routes/_404.tsx": $_404, "./routes/_app.tsx": $_app, "./routes/api/joke.ts": $api_joke, - "./routes/greet/[name].tsx": $greet_name_, "./routes/index.tsx": $index, }, islands: { - "./islands/Counter.tsx": $Counter, + "./islands/Editor.tsx": $Editor, }, baseUrl: import.meta.url, } satisfies Manifest; diff --git a/islands/Counter.tsx b/islands/Counter.tsx deleted file mode 100644 index f3ea080..0000000 --- a/islands/Counter.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { Signal } from "@preact/signals"; -import { Button } from "../components/Button.tsx"; - -interface CounterProps { - count: Signal; -} - -export default function Counter(props: CounterProps) { - return ( -
- -

{props.count}

- -
- ); -} diff --git a/islands/Editor.tsx b/islands/Editor.tsx new file mode 100644 index 0000000..0df3554 --- /dev/null +++ b/islands/Editor.tsx @@ -0,0 +1,79 @@ +import { StateUpdater, useEffect, useState } from "preact/hooks"; +import { Button } from "../components/Button.tsx"; + +interface CounterProps { + preCode: string; + testCode: string; +} + +declare var window: Window & typeof globalThis; +interface Window { + editor: any; // Replace 'any' with the actual type of your 'editor' property +} + +export default function Editor(props: CounterProps) { + const [output, setOutput] = useState(""); + + useEffect(() => { + const initializeEditor = () => { + if (window.editor) { + window.editor.setValue(props.preCode); + } + }; + window.onload = initializeEditor; + return () => { + window.onload = null; + }; + }, []); + + function handleCodeClear() { + window.editor.setValue(""); + setOutput(""); + } + + function handleCodeRun() { + const code: string | undefined = window.editor.getValue(); + try { + const capturedOutput: string[] = []; + const originalConsoleLog = console.log; + console.log = (...args: any[]) => { + capturedOutput.push(args.map((arg) => JSON.stringify(arg)).join(" ")); + originalConsoleLog(...args); + }; + if (code) { + eval(code); + } + setOutput(`${capturedOutput.join("\n")}`); + console.log = originalConsoleLog; + } catch (error) { + setOutput(`${error}`); + } + } + + return ( + <> +
+ + +
+ +
+ 
+
+{output}
+
+
+
+ + ); +} diff --git a/routes/[slug].tsx b/routes/[slug].tsx index a3b8527..a27ceb6 100644 --- a/routes/[slug].tsx +++ b/routes/[slug].tsx @@ -4,6 +4,7 @@ import { Handlers } from "$fresh/server.ts"; import { PageProps } from "$fresh/server.ts"; import { CSS, render } from "$gfm"; import { Head } from "$fresh/runtime.ts"; +import Editor from "../islands/Editor.tsx"; export const handler: Handlers = { async GET(_req, ctx) { @@ -44,18 +45,15 @@ export default function CoursePage(props: PageProps) { - +