ديفكوم- أنواع البيانات JavaScript Data Types التفاصيل

المقالات

أنواع البيانات JavaScript Data Types

-

بنحكي في هذا الدرس عن أنواع البيانات في JavaScript وكيفية الاستخدام والتطبيق، من الأمثلة على ذلك numbers, strings, objects وغيرها. وأنواع البيانات مهمه جدا في عالم البرمجة لان كل يتم التعامل مع حسب الاحتياج مثال ذلك اذا كنا بنتعامل مع الأسماء فا اكيد لازم نستخدم النوع string الأرقام اكيد نستخدم numbers وهكذا. واكيد بنطبق امثلة حتى نفهم الموضوع أكثر.

نطبق المثال التالي :

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let FirstName="Lareen"; // String
let Age =7;             // Number
let student={"FirstName":FirstName,"Age":Age}; // Object
document.write(student.FirstName + " ," + student.Age);
</script>
</body>
</html>

النتيجة

عرفنا في المثال السابق الأنواع التالية:

String ، number، object

واخر سطر طبعنا القيم على الشاشة.

النصوصJavaScript Strings

يتعامل JavaScript مع النصوص strings في حال كان محتوى variable بين علامات الاقتباس quotes (double او single)

مثال:

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let FirstName="Lareen"; // String double quotes 
let SecondName ='Layan' // String single quotes
document.write(FirstName);
document.write("<br>");
document.write(SecondName);
</script>
</body>
</html>

النتيجة:

عرفنا 2 متغير من نوع string الأول باستخدام double quotes والثاني باستخدام single quotes وطبعنا النتيجة على الشاشة.

ملاحظة: يمكن استخدام علامات الاقتباس (double او single) داخل string بشرط ان لا يكون البداية والنهاية نفسها.

مثال :

نعدل على المثال السابق الى :

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let FirstName="Lareen ' hatem"; // Print single quotes in String double quotes 
let SecondName ='Layan " hatem' // Print double quotes in String single quotes
document.write(FirstName);
document.write("<br>");
document.write(SecondName);
</script>
</body>
</html>

النتيجة:

الأرقام JavaScript Numbers

الارقام يمكن كتابتها بكسور عشريه decimals او دون كسور عشريه ارقام (صحيحه).

مثال:

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let Age  // Number 
let FirstName="Lareen"; // String double quotes
Age=11   // Number without decimals
document.write(FirstName +" Age:" + Age);
document.write("<br>");
let SecondName ='Layan' // String single quotes
Age=7.5  // Number with decimals
document.write(SecondName +" Age:" + Age);
</script>
</body>
</html>

النتيجة:

عرفنا متغير من نوع Number باسم Age ثم اضفنا قيم لهذا المتغير القيمه الأولى عدد صحيح يساوي 11 والقيمة الثانيه بكسر يساوي 7.5

المتغيرات JavaScript Booleans

المتغيرات من نوع Boolean تحتوي على قيمه واحده فقط من قيمتين صح او خطأ (true or false) ولا يمكن ان تحتوي غير ذلك.

يستخدم هذا النوع عادتا مع الشروط (conditional testing) للتحقق من قيمة معينه

مثال:

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let x = 50;
let y = 50;
let z = 60;
if(x == y)       // Returns true
{
    document.write("x = y is "+"True");
}
else 
{
    document.write("x = y is "+"false");
}
document.write("<br>");
if(x == z)       // Returns false
{
    document.write("x = z is "+"True");
}
else 
{
    document.write("x = z is "+"false");
}
</script>
</body>
</html>

النتيجة:

عرفنا 3 متغير بقيم مختلفة وبعدها عملنا تحقق من تساوي القيم اذا كانت القيم متساوية بتكون النتيجة True واذا كانت غير متساوية بتكون النتيجة false وطبعنا النتيجة على الشاشة.

المصفوفات JavaScript Arrays

المصفوفات بشكل عام مهمه جدا في لغات البرمجة حيث يمكن تخزين كميه من البيانات داخلها ويمكن الوصول اليها بسهوله والتعامل معها.

تكتب المصفوفات في JavaScript باستخدام اقواس مربعه square brackets وتكون Items داخلها مفصولة بفاصله commas.

مثال :

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
const PL = ["C#","F#","VB"];
PL.push("PHP")
document.write(PL[0]);
document.write("<br>");
document.write(PL[3]);
</script>
</body>
</html>

النتيجة:

في المثال عرفنا مصفوفه تحتوي على أسماء لغات البرمجة وفي البداية اضفنا 3 items . بعدها اضفنا item جديد باستخدام الكود

PL.push("PHP")

للوصول الى item داخل المصفوفة بنستخدم الكود:

Arrayname[item Index]

Arrayname هي اسم المصفوفة الي تم تعريفها

item Index مكان وجود item داخل المصفوفه.

ثم طبعنا قيمة item الأول والأخير.

Index لاول item في المصفوفة يبدأ ب 0 مشان هيك طبعنا اول item باستخدام الكود:

PL[0]

وآخر item باستخدام

PL[3]

في هذا المثال عندنا علم وعارفين كم item داخل المصفوفة مشان هيك من السهل طباعه اول واخر عنصر لكن في البرمجة ممكن تستخدم المصفوفات للعمل مع كميات كبيره من البيانات وممكن ما تكون عارف كم عدد items داخلها. بنحكي بالتفصيل لاحقا عن كيفية التعامل مع المصفوفات والوصول الى items داخلها حتي لو ما كنا عارفين هاي البيانات.

الكائنات JavaScript Objects

الكائنات Object في JavaScript متغيرات مفيدة جدا، يمكن تعريف كائن من نوع سيارة مثلا ثم إعطاء مجموعه من الخصائص لهذا الكائن مثل اللون، الموديل، رقم اللوحة ... الخ. ثم من السهولة التعامل مع هذه الخصائص للكائن

الكائنات Objects تكتب داخل اقواس curly braces {} والخصائص تكتب داخل هذه الاقواس (اسم الخاصية وقيمه الخاصية) متبوعة بفاصله commas.

مثال .

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Objects</h3>
<p id="Total"></p>
<script>
const StudentName = {firstName:"Mlak", lastName:"Hatem", age:1, eyeColor:"Green"};
document.write(StudentName.firstName + " is " + StudentName.age + " years old."+" eye color is" + StudentName.eyeColor);
document.write("<br>");
</script>
</body>
</html>

النتيجة:

عرفنا متغير باسم StudentName من نوع Object ثم اضفنا مجموعه من الخصائص لهذا object مثل الاسم الأول firstName ، الاسم الأخير lastName ، العمر age ولون العيون Green وبعدها طبعنا النتائج على الشاشة.

الأنواع ديناميكية JavaScript Types are Dynamic

أنواع البيانات في JavaScript ديناميكية. هذا يعني أنه JavaScript تتعامل مع نوع المتغير بناء على محتوى المتغير وبناء عليه يمكن استخدام نفس المتغير للاحتفاظ بأنواع بيانات مختلفة.

مثال:

let x;           // Now x is undefined
x = 50;           // Now x is a Number
x = "Mlak";      // Now x is a String

ملاحظة: لا يوجد ما يدل في JavaScript عند التعريف على نوع المتغير ، يعني JavaScript بتعرف على النوع حسب المحتوى.

مثال على ذلك :

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let FirstName="Lareen"; // String
let Age =7;             // Number
document.write(FirstName+Age);
document.write("<br>");
let student={"FirstName":FirstName,"Age":Age}; // Object
document.write(student.FirstName + " ," + student.Age);
</script>
</body>
</html>

لاحظ الكود التالي :

document.write(FirstName+Age);

تم طباعة رقم مع نص، في هذه الحالة يتم دمج القيم مع بعض ولا يتم عمل عمليات حسابيه.

ملاحظة : عند إضافة رقم ونص ، فإن JavaScript سيتعامل مع الرقم كنص.

مثال اخر

نفي المثال السابق نعدل عليه الى :

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let FirstName="Lareen"; // String
let Age =7;             // Number
let student=FirstName+Age+15;
document.write(student);
document.write("<br>");
student={"FirstName":FirstName,"Age":Age}; // Object
document.write(student.FirstName + " ," + student.Age);
</script>
</body>
</html>

النتيجة:

نفس النتيجة السابقة أي ارقام بعد string يتم التعامل معها على أساس انها string

تمام نعكس العملية ونشوف النتيجة

عدل الكود السابق الى

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Arithmetic Operators</h3>
<p id="Total"></p>
<script>
let FirstName="Lareen"; // String
let Age =7;             // Number
let student=Age+15+FirstName;
document.write(student);
document.write("<br>");
student={"FirstName":FirstName,"Age":Age}; // Object
document.write(student.FirstName + " ," + student.Age);
</script>
</body>
</html>

النتيجة:

لاحظ ان تم جمع اول رقمين 7+15 والنتيجة تم دمجها مع النص (العامل الأساسي هنا هو اول متغير اذا كان string بتم التعامل مع البقيه على أساس string )

التعرف على نوع The typeof Operator

حكينا ان المتغيرات في JavaScript ديناميكية يعني بتم التعرف عليها حسب نوع المحتوى، يمكن أيضا في JavaScript العثور على نوع المتغير باستخدام typeof operator، حيث يعمل هذا الامر على ارجاع نوع المتغير variable او التعبير expression.

مثال :

<!DOCTYPE html>
<html>
<body>
<h3>JavaScript typeof Operator</h3>
<p id="Total"></p>
<script>
document.write(typeof "");
document.write("<br>");
document.write(typeof "Lareen");
document.write("<br>");
document.write(typeof 'Layan');
document.write("<br>");
document.write(typeof '"Mlak');
document.write("<br>");
document.write(typeof (105+"hatem"));
document.write("<br>");
document.write(typeof '"0');
document.write("<br>");
document.write(typeof 0);
document.write("<br>");
document.write(typeof 100);
document.write("<br>");
document.write(typeof 100.25);
document.write("<br>");
document.write(typeof(105+5));
</script>
</body>
</html>