أفضل تلميحات JavaScript لتطوير الويب

أفضل تلميحات JavaScript لتطوير الويب

هل كنت تبحث عن بعض نصائح JavaScript الرائعة؟ سيحدد هذا المنشور مجموعة متنوعة من نصائح JS الممتعة والفعالة لمساعدتك على تعلم إحدى لغات البرمجة الأكثر استخدامًا على الإنترنت.

سنغطي موضوعات JavaScript التالية ؛

  • ArrayMethods في JS
  • إجراء طلبات API باستخدام JavaScript
  • نظرة عامة على حلقات `for` في JavaScript
  • مقدمة إلى Node.js

طرق الصفيف في JavaScript

تعتبر المصفوفة من أهم مكونات JavaScript وأي لغة برمجة بشكل عام. غالبًا ما يتم فهمه بشكل خاطئ كنوع بيانات خاص به ، فهو في الواقع مجموعة فرعية من Object، إلى جانب الوظائف. بعبارات بسيطة ، المصفوفة هي بنية بيانات مركبة يمكنها الاحتفاظ بكمية غير محدودة من القيم من أي نوع. كل قيمة من القيم مفهرسة عدديًا (أي لكل قيمة رقم يحدد موقعها في المصفوفة). هذا يجعل المصفوفة مرنة للغاية لتخزين البيانات وتنظيمها. يمكن للمصفوفات تخزين سلاسل أو أرقام أو عناصر أو حتى مصفوفات أخرى. سيعطي هذا المنشور نظرة عامة على بعض طرق مصفوفة JavaScript المضمنة الأكثر شيوعًا. يمكنك استخدام هذه الطرق أو الوظائف لمعالجة البيانات داخل المصفوفة والتعامل معها.

أفضل تلميحات JavaScript لتطوير الويب

concat()

أفضل concat() تسمح لنا الطريقة ، وهي اختصار لـ "concatenate" ، بربط مصفوفتين معًا:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق"] ؛
var Colors2 = ["أخضر" ، "أصفر" ، "بنفسجي"] ؛
â € <
document.write (colors.concat (colors2)) ؛
// الإخراج: "أسود ، أبيض ، أزرق ، أخضر ، أصفر ، بنفسجي"

 

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

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

الألوان = color.concat (colors1) ؛ 

 

push()

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

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق"] ؛
colors.push ("أخضر" ، "أصفر") ؛
â € <
document.write (ألوان) ؛
// الإخراج: "أسود ، أبيض ، أزرق ، أخضر ، أصفر"

 

الغاء الاعجاب concat(), push() هل قم بتحديث المصفوفة الأصلية بالقيم التي دفعتها إليها.

unshift()

على غرار push(), unshift() سيضيف قيمة جديدة أو أكثر إلى بداية من المصفوفة:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق"] ؛
color.unshift ("الأخضر") ؛
â € <
document.write (ألوان) ؛
// الإخراج: "أخضر ، أسود ، أبيض ، أزرق"

 

pop()

pop() هو معكوس push() طريقة ، من حيث أنها ستخرج أو تزيل العنصر الأخير من المصفوفة:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق"] ؛
colours.pop () ؛
â € <
document.write (ألوان) ؛
// الإخراج: "أسود ، أبيض" 

 

منذ pop() يزيل عنصرًا من مصفوفة ، من الشائع تخزين العنصر المحذوف في متغير آخر لاستخدامات أخرى:

var lastItem = colors.pop () ،
â € <
document.write (lastItem) ؛
// الإخراج: "أزرق"

 

shift()

وبالمثل، shift() سيزيل العنصر الأول في المصفوفة:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق"] ؛
colours.shift () ؛
â € <
document.write (ألوان) ؛
// الإخراج: "أبيض ، أزرق" ؛ 

 

يمكنك أيضا استخدام shift() جنبًا إلى جنب مع تخزين العنصر المحذوف في متغير جديد:

var firstItem = colors.shift () ،
â € <
document.write (firstItem) ؛
// الإخراج: "أسود" 

 

reverse()

كما يوحي الاسم، reverse() سيعكس التابع ترتيب القيم في المصفوفة:

var myArray = [1، 2، 3، 4، 5، 6، 7، 8، 9، 10] ؛
var عكسArray = myArray.reverse () ،
â € <
document.write (reverseArray) ؛
// الإخراج: 10، 9، 8، 7، 6، 5، 4، 3، 2، 1

 

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

join()

أفضل join() سينضم التابع array إلى جميع القيم في المصفوفة في سلسلة ، ثم يعيد السلسلة النصية:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق" ، "أخضر"] ؛
console.log (colors.join ()) ؛
// الإخراج: أسود ، أبيض ، أزرق ، أخضر 

 

هناك معلمة "فاصل" اختيارية يمكن تضمينها مع join(). تشير هذه المعلمة إلى حرف (أو مجموعة من الأحرف) لفصل كل قيمة في السلسلة. سيفصل المثال أدناه كل قيمة بفاصلة متبوعة بحرف مسافة بيضاء:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق" ، "أخضر"] ؛
console.log (colors.join ('،') ؛
// الإخراج: أسود ، أبيض ، أزرق ، أخضر 

 

join() لن يعدل المصفوفة الأصلية. ستحتاج إلى تعيين التعديل إلى متغير من أجل حفظه.

var colorList = colors.join ('،') ،
console.log (قائمة الألوان) ؛
// الإخراج: أسود ، أبيض ، أزرق ، أخضر
â € <
console.log (ألوان) ؛
// الإخراج: ["أسود" ، "أبيض" ، "أزرق" ، "أخضر"]
// أي ما زالت المجموعة الأصلية

 

sort()

sort() سيقوم بفرز قيم المصفوفة بترتيب أبجدي رقمي. sort() هل تحديث المصفوفة الأصلية:

var arr1 = [4، 9، 3، 2، 1] ؛
arr1.sort () ،
console.log (arr1) ؛
// الإخراج: [1، 2، 3، 4، 9]

 

sort() أوامر القيم فقط في وقت استدعاء الأسلوب. ستحتاج إلى الاتصال به مرة أخرى لإعادة الفرز إذا قمت بإضافة أو تعديل قيم في المصفوفة.

indexOf()

indexOf() سيعيد قيمة الفهرس لمصطلح البحث المقدم كمعامل سلسلة إلى الطريقة:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق" ، "أخضر"] ؛
colours.indexOf ('أبيض') ؛
// يُرجع 1

 

إذا لم يكن هناك تطابق فهرس لـ searchValue معامل، indexOf() سيعود -1:

ألوان متنوعة = ["أسود" ، "أبيض" ، "أزرق" ، "أخضر"] ؛
colours.indexOf ("برتقالي") ؛
// يُرجع -1

 

indexOf() حاله حساسه:

colours.indexOf ("أزرق") ؛
// يُرجع -1

 

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

var أسماء = ["مايكل" ​​، "جون" ، "سارة" ، "مايكل" ​​، "ماثيو"] ؛
names.indexOf ("مايكل" ​​، 2) ؛
// يُرجع 3 

 

slice()

أفضل slice() سيعيد التابع "شريحة" من المصفوفة ، يشار إليها بمعلمات اختيارية لنقاط البداية والنهاية. slice() يترك المصفوفة الأصلية دون تعديل:

أفضل slice() سيعيد التابع "شريحة" من المصفوفة. يمكنك الإشارة إلى نقاط البداية والنهاية عبر معلماتها الاختيارية. slice() يترك المصفوفة الأصلية دون تعديل:

ألوان var = ["أسود" ، "أبيض" ، "أزرق" ، "أخضر" ، "أرجواني" ، "برتقالي"] ؛
var colors2 = colors.slice (2 ، 5) ؛
console.log (colors2) ؛
// الإخراج: ["أزرق" ، "أخضر" ، "أرجواني"]
â € <
var Colors3 = colors.slice (1) ؛
console.log (colors3) ؛
// الإخراج: ["أبيض" ، "أزرق" ، "أخضر" ، "أرجواني" ، "برتقالي"] ؛
â € <
console.log (ألوان) ؛
// الإخراج: ["أسود" ، "أبيض" ، "أزرق" ، "أخضر" ، "أرجواني" ، "برتقالي"] ؛ 

 

filter()

filter() يشبه إلى حد ما slice() طريقة. الفرق الرئيسي هو أنه ينشئ مصفوفة جديدة بناءً على شروط معينة. يتم "تصفية" كل قيمة في المصفوفة التي تمرر شرطًا في المصفوفة الجديدة. يتم ضبط شرط التصفية عبر وظيفة رد الاتصال:

var someWords = ["easy"، "hard"، "encryption"، "community"، "total"، "fastidious"، "complexity"]؛
â € <
وظيفة checkSize (w) {
    طول الطول> 5 ؛
}
â € <
var bigWords = someWords.filter (checkSize) ؛
console.log (bigWords) ؛
// الإخراج: ["التشفير" ، "المجتمع" ، "الحساسية" ، "التعقيد"] 

 

يستخدم المثال أعلاه checkSize() وظيفة رد الاتصال لتصفية أي كلمات أقل من 6 أحرف. كما أنه يضع جميع القيم المتبقية في مصفوفة جديدة تسمى bigWords.

every()

أفضل every() سيتحقق التابع array لمعرفة ما إذا كانت كل قيمة في المصفوفة تمر بشرط أم لا. يتم توفير الحالة هنا أيضًا من خلال وظيفة رد الاتصال. إذا مرت ، ستعود الطريقة true، إذا لم يحدث ذلك ، فسوف يعود false:

var nums = [20، 31، 18، 500] ؛
â € <
دالة أكبر من 10 (قيمة) {
    قيمة الإرجاع> 10 ؛
}
â € <
console.log (nums.every (أكبر من 10)) ؛
// الإخراج: صحيح

 

يختبر المثال أعلاه لمعرفة ما إذا كانت كل قيمة في nums مجموعة أكبر من 10، عودة true.

isArray()

كما يوحي الاسم، .isArray() سيتحقق لمعرفة ما إذا كانت القيمة التي تم تمريرها إليها عبارة عن مصفوفة أم لا:

Array.isArray (['أزرق'، 'أصفر' 'أخضر'])؛ // يعود صحيحًا
Array.is Array (3) ؛ // إرجاع خطأ
Array.isArray ("مرحبًا") ؛ // إرجاع خطأ

 

findIndex()

findIndex() يكاد يكون عكس indexOf() طريقة. سيعيد فهرس القيمة الأولى في المصفوفة التي تفي بشرط. يتم ضبط الحالة عبر وظيفة رد الاتصال. إذا لم يتم العثور على قيمة تفي بالشرط ، فستعود الوظيفة -1.

var colours = ['black'، 'blue'، 'yellow'، 'green'، 'purple']؛
â € <
وظيفة أكبر من خمسة (هـ) {
    عودة الطول الإلكتروني> 5 ؛
}
â € <
var indexOfLargeValue = colors.findIndex (GreaterThanFive) ،
console.log (indexOfLargeValue) ،
// الإخراج: 2

 

forEach()

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

فار nums = [1 ، 2 ، 3 ، 5 ، 8 ، 13] ؛
var numsUpdated = [] ،
â € <
الوظيفة addTwo (e) {
    و + = 2 ؛
    numsUpdated.push (هـ) ؛
}
â € <
nums.forEach (addTwo) ؛
console.log (numsUpdated) ؛
// الإخراج: [3 ، 4 ، 5 ، 7 ، 10 ، 15]

 

هذا مشابه لاستخدام ملف for loop للتكرار عبر مصفوفة ، ببناء جملة أبسط قليلاً.

includes()

يمكنك استخدام includes() للتحقق مما إذا كانت مصفوفة معينة تحتوي على قيمة معينة أم لا. إذا كانت المصفوفة تعمل ، فسوف تعود true، إذا لم يحدث فسوف تعود false.

var colours = ['black'، 'blue'، 'yellow'، 'green'، 'purple']؛
â € <
console.log (colours.includes ('blue')) ؛
// الإخراج: صحيح
â € <
console.log (colours.includes ('red')) ؛
// الإخراج: خطأ

 

هناك معلمة ثانية اختيارية ، fromIndex. سيشير هذا إلى مكان بدء البحث من:

var colours = ['black'، 'blue'، 'yellow'، 'green'، 'purple']؛
â € <
console.log (colours.includes ('blue'، 2)) ؛
// الإخراج: خطأ
â € <
console.log (colours.includes ('blue'، 1)) ؛
// الإخراج: صحيح

 

lastIndexOf()

على غرار indexOf(), lastIndexOf() سيجد آخر مثيل لقيمة معينة في المصفوفة ، على عكس الأول. ستبدأ الطريقة في البحث من نهاية المصفوفة وتعمل في طريقها إلى البداية حتى يتم العثور على تطابق مناسب. إذا لم يتم العثور على تطابق ، ستعود الطريقة -1:

var food = ['sushi'، 'pizza'، 'cheeseburger'، 'sushi'، 'pasta']؛
â € <
console.log (food.lastIndexOf ('sushi')) ؛
// الإخراج: 3
â € <
console.log (food.lastIndexOf ('burrito')) ؛
// الإخراج: -1

 

.toString()

.toString() يشبه إلى حد ما .join() الطريقة ، حيث يمكن لكليهما إرجاع الفهرس الكامل للقيم كسلسلة. toString() هي طريقة أبسط بكثير. لا يحتوي على معلمات اختيارية لتحديد أحرف "فاصل" لوضعها بين كل قيمة. سيتم ببساطة فصل جميع القيم في المصفوفة بفاصلة (بدون مسافات). يمكن أن يكون هذا جيدًا أو سيئًا ، حسب التطبيق.

إجراء طلبات API باستخدام JavaScript

يعد التواصل مع واجهات برمجة التطبيقات الخاصة بهم أحد أهم مكونات التفاعل مع خدمات الجهات الخارجية ، إن لم يكن. الوقوف لاجل واجهة برمجة التطبيقات، هذه هي الطريقة الأساسية التي يمكن من خلالها لمواقع الويب والتطبيقات وخدمات الويب المختلفة التحدث مع بعضها البعض ، واستلام البيانات وإرسالها ذهابًا وإيابًا. سيكون هذا البرنامج التعليمي بمثابة مقدمة أساسية للاتصال بواجهة برمجة تطبيقات الويب عبر JavaScript ، والقدرة على الاستلام أو القراءة GET الطلبات التي تعرض البيانات بتنسيق JSON (أو جافا سكريبت تدوين كائن) شكل. يفترض هذا البرنامج التعليمي المعرفة الأساسية بكائنات JavaScript والوصول إلى الخصائص ، ولكنه مخصص للأفراد الذين ليس لديهم خبرة سابقة في العمل مع واجهات برمجة التطبيقات.

المُقدّمة

في هذا البرنامج التعليمي ، سنقوم باستعراض ملف واجهة برمجة تطبيقات جيبلي، والتي تم إنشاؤها لتعريف الأشخاص باستخدام واجهات برمجة التطبيقات (وكذلك لهواة أفلام Studio Ghibli).

يتم تقسيم واجهة برمجة التطبيقات إلى 5 وحدات أو مكونات مختلفة لفئات مختلفة من البيانات المتعلقة بـ Studio Ghibli (الأفلام والأشخاص والمواقع والأنواع والمركبات). يشار إلى كل عنصر من هذه المكونات رسميًا باسم نقطة النهاية. عند إجراء مكالمة إلى نقطة النهاية عبر GET (أو طريقة أخرى مماثلة ، مثل fetch) ، ستعيد نقطة النهاية مصفوفة من البيانات الخاصة بهذه الفئة ، بتنسيق JSON. على سبيل المثال ، قد تبدو نقطة نهاية الأفلام بالشكل التالي:

طلبات API مع JavaScript

سنأخذ نقطة النهاية للأفلام (متوفر هنا) ، قم بإجراء مكالمة عبر GET، ثم log أجزاء مختلفة من البيانات إلى console.

// أنشئ XMLHttpRequest جديدًا واحفظه في متغير
فار تسلم = جديد مدعوم()؛
â € <
// حدد نقطة النهاية التي نرغب في فتحها عبر طريقة "GET"
تسلم.جاكيت 
('احصل على', "https://ghibliapi.herokuapp.com/films", صحيح);
â € <
// نفذ الكود داخل الوظيفة بمجرد تحميل نقطة النهاية
تسلم.تفريغ = وظيفة () {
â € <
  // تحليل البيانات الواردة إلى تنسيق JSON  
  فار الوارد = JSON.تحليل(
.استجابة);
  
  // استخدم طريقة مصفوفة الخريطة للتكرار على كل فهرس في الأفلام
  // نقطة النهاية ، ثم الوصول إلى تاريخ releae والعنوان والطماطم الفاسدة 
  // يسجل من كل منها ، وتسجيلها في وحدة التحكم مع بعض الإضافات
  // تنسيق
  الوارد.رسم خريطة(أفلام => {
      يرجى العلم بأن يوجد سن محدد للمشاركة بهذه البطولات. الرجاء قراءة القواعد أدناه..سجل(أفلام.يوم الاصدار + ":" + أفلام.لقب + "- (" +  أفلام.rt_score + "٪ على Rotten Tomatoes)");
    })؛
};
â € <
// أرسل الطلب الفعلي ، لتنفيذ الوظيفة الموكلة إليه 
// "تلقي. تحميل"
تسلم.إرسال()؛    

يجب أن يؤدي إدخال الشفرة أعلاه في وحدة تحكم المتصفح ، أو عن طريق التشغيل كملف JavaScript مرتبط بصفحة ويب إلى إرجاع ما يلي:

طلبات API مع JavaScript

... حيث نعرض سنة الإصدار ، واسم الفيلم وتقييمه العام على Rotten Tomatoes (جنبًا إلى جنب مع بعض التنسيقات الإضافية لتحسين الوضوح)

وأوضح استدعاء API

الملاحظات الموثقة في البرنامج النصي أعلاه يجب أن تجعل معظم استدعاء API توضيحيًا ، لكن التلاعب بالبيانات داخلها receive.onload يستحق مزيد من التفاصيل.

أفضل .map() يتم استخدام المصفوفة للتكرار فوق كل فهرس فردي داخل نقطة نهاية الفيلم (أي كل فيلم). أ for يمكن استخدام loop هنا أيضًا أيضًا ، على الرغم من .map() يفعل نفس الشيء برمز أقل بكثير. .map() تأخذ وظيفة رد (مكتوبة هنا في بناء الجملة ES6). يتم تنفيذ الكود الموجود في وظيفة رد الاتصال لكل عنصر في نقطة النهاية ، واسترداد تاريخ إصداره (films.release_date)، عنوان (films.title) والنتيجة على Rotten Tomatoes (films.rt_score).

من أجل البساطة ، أ console.log يتم استخدام رسالة لكل عنصر ، ولكن يمكن بسهولة إضافة هذه البيانات إلى عناصر HTML على الصفحة ، أو فرزها بشكل أكبر باستخدام طرق المصفوفات الأخرى (على سبيل المثال تصفية الأفلام من الثمانينيات فقط). في حين أن هناك الكثير من العمل مع خدمات API ، فهذه نظرة عامة عالية المستوى على آليات استرداد البيانات من نقاط نهاية API.

نظرة عامة على حلقات `for` في JavaScript

نظرة عامة على حلقات `for` في JavaScript

أحد المبادئ الأساسية لبرمجة الكمبيوتر هو القول المأثور "جاف" أو "لا تكرر نفسك". في أي وقت تجد نفسك تعيد كتابة نفس الرمز مرارًا وتكرارًا ، فمن المحتمل أن تكون هناك طريقة أفضل لإعادة التحليل ، دون الحاجة إلى أسطر مكررة من نفس الرمز. إحدى أفضل الطرق لتحقيق ذلك هي عبر الحلقات. هناك عدة أنواع مختلفة من الحلقات ، وكلها موجودة بأشكال مختلفة في جميع لغات البرمجة. في هذا المنشور ، سنلقي نظرة على أحد أكثر أشكال الحلقات شيوعًا وإفادة ، وهو for عقدة.

مثال أساسي

كمقدمة لتوضيح أين تكون الحلقات مفيدة جدًا ، لنفترض أنك تريد طباعة "Hello World" إلى وحدة تحكم JavaScript. بدون استخدام حلقة ، يجب أن تكتب شيئًا على النحو التالي:

console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛ console.log ("Hello World") ؛

 

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

لـ (var i = 0؛ i <10؛ i ++) {console.log ("Hello World") ؛ }

 

المثال أعلاه هو ما يُعرف بـ for loop ، أحد أكثر أشكال الحلقات شيوعًا وإفادة.

أفضل for حلقة

هناك العديد من المكونات التي تدخل في كتابة أ for حلقة: العداد أو التعبير الأولي ، الشرط ، تعبير الزيادة ، والتشفير المطلوب تنفيذه داخل الحلقة. سنقوم بتفصيل المثال أعلاه الخاص بإنشاء حلقة تطبع "Hello World" على وحدة التحكم 10 مرات.

جميع الأخبار for الحلقات تبدأ بالكلمة الأساسية for، متبوعة بمجموعة من الأقواس ، ثم متبوعة بأقواس. يتم وضع الكود المطلوب تنفيذه داخل الأقواس. الهيكل العظمي لـ for يمكن رؤية الحلقة على النحو التالي:

لـ (counter؛ condition؛ increment) {// Code to execute يذهب هنا}

 

يجب تعيين العداد كمتغير ؛ في البرمجة يتم تعيين هذا بشكل متكرر على أنه i، على الرغم من أنه يمكن أن يكون x, n أو أي اسم متغير تسمح به اللغة. هذا يخبر الحلقة بقيمة البداية ، في هذه الحالة ، 0.

يخبر الجزء التالي من الحلقة JavaScript بالشرط: في هذه الحالة ، نفِّذ الحلقة طالما كانت قيمة i أقل من 10. ستتوقف الحلقة بمجرد أن تصل إلى 10. انها جدا من المهم أن يكون لديك مجموعة شرطية قبل محاولة تشغيل الحلقة الخاصة بك ، وإلا فسوف ينتهي بك الأمر بحلقة لا نهائية ، والتي ستؤدي في النهاية إلى زيادة التحميل وتعطل المتصفح.

الجزء الأخير من الحلقة بين قوسين هو الزيادة: i++. i++ هو اختصار في JavaScript لـ i += 1 or i = i + 1. بمعنى آخر ، تضيف 1 إلى قيمة i في كل مرة يتم تشغيل الحلقة. هذا أيضًا عنصر حاسم في الحلقة ، كما لو أنه لا يزيد فعليًا ، فلن ينتهي أيضًا.

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

لـ (var i = 1؛ i <= 10؛ i ++) {console.log ("الحلقة قيد التكرار الآن" + i) ؛ }

 

الكود أعلاه ، عند التشغيل ، سوف يطبع:

الحلقة قيد التكرار الآن 1 الحلقة الآن في حالة تكرار 2 الحلقة الآن في حالة تكرار 3 الحلقة الآن في حالة تكرار 4 الحلقة الآن في حالة تكرار 5 الحلقة قيد التكرار الآن 6 الحلقة قيد التكرار الآن 7 الحلقة الحلقة قيد التكرار الآن 8 الحلقة قيد التكرار الآن 9 الحلقة الآن في حالة التكرار 10

مقدمة إلى Node.js

مقدمة إلى Node.js

لقد قطع تطوير JavaScript شوطًا طويلاً منذ أن تم تقديمه لأول مرة في عام 1995 ، من قبل المؤسس المشارك لشركة Mozilla Brendan Eich. تم استخدام JavaScript في الأصل كلغة برمجة نصية من جانب العميل ، وقد وسع استخدامه ليشمل تطبيقات تتجاوز أهدافها الأصلية. لم تعد اللغة المستخدمة فقط من جانب العميل. مع إدخال Node.js ، يتم الآن استخدام JavaScript على جانب الخادم أيضًا ، لتحل محل الحاجة إلى لغات أخرى مثل PHP أو Python أو Ruby.

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

شرح Node.js

Node.js هو إطار عمل JavaScript أو مكتبة تم تطويرها لتكون قادرة على استخدام JavaScript كلغة برمجة نصية أساسية من جانب الخادم. إنها ليست لغة جديدة ، إنها ببساطة مجموعة فرعية من التعليمات البرمجية المكتوبة للغة JavaScript. تم إنشاؤه في الأصل بواسطة Ryan Dahl في عام 2009 ، وهو مبني على Google Chrome's JavaScript V8 Engine ، والذي تم تطويره في حد ذاته لتقديم أداء أفضل من محركات JavaScript الأخرى الحالية. Node.js هو مصدر مفتوح بالكامل ، ويعمل على كل نظام تشغيل ، ويتم تحسينه باستمرار من قبل مجتمع المطورين الكبير المحيط بالمشروع.

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

الميزات الأساسية لـ Node.js

فيما يلي بعض الميزات الأساسية لـ Node.js التي تنفصل عن أطر البرمجة النصية الأخرى:

البرمجة غير المتزامنة التي يحركها الحدث

تُستخدم واجهات برمجة التطبيقات كجزء من إطار عمل Node.js غير متزامن تمامًا ، ويُعرف أيضًا باسم non-blocking. هذا يعني أن Node.js لا تضطر أبدًا إلى الانتظار على واجهة برمجة تطبيقات معينة لإرسال البيانات دون الانتقال إلى مهمة أخرى. سينتقل Node.js إلى واجهة برمجة تطبيقات أخرى ، مع تتبع البيانات التي ما زالت تنتظر تلقيها من واجهات برمجة التطبيقات الأخرى.

عالية الأداء

Node.js سريع للغاية مقارنة بالبدائل الأخرى من جانب الخادم ، حيث تم بناؤه على محرك V8 من Google Chrome. اعتمادًا على الإصدارات التي تمت مقارنتها ، تفوقت Node.js على PHP و Python في الاختبارات المعيارية.

يتجنب التخزين المؤقت

تقوم تطبيقات Node.js دائمًا بإخراج البيانات على شكل أجزاء لتجنب التخزين المؤقت.

قابلة لل

تم تطوير Node.js لاستخدامه في كل من المشاريع الصغيرة وأنظمة المؤسسات الكبيرة. يستخدم Node.js نموذجًا مترابطًا واحدًا للسماح بالأحداث غير المتزامنة ، بينما تستخدم لغات الخادم الشائعة عددًا محدودًا من مؤشرات الترابط للتعامل مع طلبات البيانات. هذا يعني في النهاية أن Node.js يمكنه التعامل مع عدد أكبر من طلبات الخادم في وقت واحد مقارنة بإعداد خادم نموذجي مثل Apache HTTP.

Node.js في الممارسة

يتم استخدام Node.js لمجموعة واسعة من الاستخدامات ، من المشاريع مفتوحة المصدر أو الشركات الناشئة الصغيرة ، إلى شركات Fortune 500. قائمة مختصرة من الشركات التي تستخدم Node.js تشمل PayPal و Uber و Microsoft و eBay و GoDaddy.

ما هو أفضل Node.js

تتضمن بعض الاستخدامات التي يتألق فيها Node.js تطبيقات I / 0 المرتبطة ، مثل مراسلة الدردشة ، وخدمات تدفق البيانات مثل الفيديو المباشر ، وتطبيقات الوقت الفعلي المكثف للبيانات (DIRT) ، وتطبيقات الويب ذات الصفحة الواحدة ، والتطبيقات التي تستخدم الكثير من واجهات برمجة التطبيقات المستندة إلى JSON.

خلاصة

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

قد ترغب أيضًا في التحقق من هذا المورد الرائع الذي يقارن JavaScript مقابل PHP.

كاتب السيرة الذاتية

شارك Angelo في عالم تكنولوجيا المعلومات الإبداعي لأكثر من 20 عامًا. قام بإنشاء أول موقع ويب له في عام 1998 باستخدام Dreamweaver و Flash و Photoshop. وسع معرفته وخبرته من خلال تعلم مجموعة واسعة من مهارات البرمجة ، مثل HTML / CSS و Flash ActionScript و XML.

أكمل أنجيلو تدريبًا رسميًا مع برنامج CIW (مشرفي مواقع الإنترنت المعتمدين) في سيدني بأستراليا ، حيث تعلم الأساسيات الأساسية لشبكات الكمبيوتر ومدى ارتباطها بالبنية التحتية لشبكة الإنترنت العالمية.

بصرف النظر عن تشغيل Sunlight Media ، يستمتع Angelo بكتابة محتوى إعلامي يتعلق بتطوير الويب والتطبيقات والتسويق الرقمي والمواضيع الأخرى المتعلقة بالتكنولوجيا.

أضف تعليق

التعليقات خاضعة للإشراف. بريدك الإلكتروني يبقى خاصا. الحقول المطلوبة محددة *