JavaScript

Java Script Print Object
طباعة الكائنات في لغة جافا سكريبت

ستتعلم في هذا الدرس كيفية طباعة الكائنات Print Object في لغة جافا سكريبت Java Script وايضاً طباعة خصائص الكائنات Print Object Properites عن طريق المفاتيح Object Properity Key

التاريخ

06 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1677

المواضيع

24
الشروحات chevron_left Java Script Print Object chevron_left JavaScript

Print Object
طباعة كائنات في لغة جافا سكريبت

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> Object Multi Line
كتابة خصائص الكائنات في عدة سطور في الجافاسكريبت

المسافات في فواصل الأسطر ليست مهمة ولا تسبب اي مشكلة. يمكن أن يمتد تعريف الكائن إلى عدة أسطر.

Multi Line

var plane = {
  type:"MS",
  model:"2001",
  color:"white"
};

يجب مراعاة الاتي :

عند انتهائك من برمجة التطبيق يجب ان تضغط ملف الجافا سكريبت js file حتي تقلل حجم الملف ليعلي من اداء تحميل صفحات الويب الخاصه بك,لان عندما يقوم المستخدم بطلب صفحة ويب فالمتصفح يقوم بعمل اكثر من طلب من السيرفر مثل صفحة ال html وصفحة ال js وصفحة ال css وجميع الملفات الاخري كالصور الخ فكل طلب له حجم وكلما كبر حجم الملف فان رد السيرفر يتم في وقت اطول بعكس اذا كان حجم الملف اصغر فالنتيجه هي سرعة الطلب.

</> Print Object or object property
طباعة الكائنات أو خصائصها في الجافاسكريبت

نستطيع طباعة البيانات الخاصة بالكائنات باستخدام عدة طرق مختلفة وهم 

  • طباعة أول عنصر عن طريق تحويل الكائن object الي مصفوفة باستخدام الدالة ( )values ثم طباعة اول عنصر باستخدام ال index 
  • طباعة أخر عنصر عن طريق تحويل الكائن object الي مصفوفة array ثم معرفة عدد العناصر الخاصة بها باستخدام دالة length لنتمكن من تحديد أخر عنصر بها 
  • نستطيع طباعة اي خاصية في الكائن عن طريق استخدام ال console باستخدام الدالة ( )console.log
  • نستطيع طباعة أي خاصية خاصة بكائن معين عن طريق تحديدها باستخدام ال Dot notation " .
  • نستطيع طباعة أي خاصية خاصة بكائن معين عن طريق تحديدها باستخدام الأقواس المربعة 

طباعة اول عنصر

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
document.write("first property value is " + Object.values(plane)[0]+"<br>");

طباعة أخر عنصر

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
var total =Object.values(plane).length;
document.write("last property value is " + Object.values(plane)[total - 1] + "<br>");

باستخدام ال console

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
console.log(plane.model);

باستخدام ال Dot notation

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
document.write(plane.model);

باستخدام الأقواس المربعة [ ]

var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
};
document.write("The Plane Color is " + plane['color']+"<br>");
document.write("The Plane model is " + plane['model']);

</> Accessing Object Properties
طباعة خاصية من الكائنات في الجافا سكريبت

هناك طريقتين لطباعة الكائنات Objects في لغة الجافا سكريبت :

  • الطريقة الاولي Dot notation : وهي الطريقة الشائعة عن طريق كتابة متغير ال object ثم نتبعه بمفتاح الخاصية property key
  • الطريقة الثانية Bracket notation : وهي عن طريق الاقواس المربعة square brackets [ ]

الطريقة الاولي dot notation

var plane = {type:"MS", model:2001, color:"white"};
document.write("The Plane Color is " + plane.color);
document.write("The Plane model is " + plane.model);

الطريقة الثانية Bracket notation

var plane= {type:"MS", model:2001, color:"white"};
document.write("The Plane Color is " + plane['color']);
document.write("The Plane model is " + plane['model']);

</> First and Last properties
اول واخر خاصية في الكائن في الجافاسكريبت

نستطيع الحصول علي قيم عناصر الكائن object باستخدام دالة ( )values 

نقوم باستخدام دالة length معها للحصول علي عدد عناصر الكائن لنتمكن من تحديد أخر عنصر وطباعته 

Example
var plane= {
  type:"MS", 
  model:2001, 
  color:"white"
}
var total =Object.values(plane).length;
document.write("first property value is " + Object.values(plane)[0]);
document.write("last property value is " + Object.values(plane)[total-1]);
</script>
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات