لديك حساب بالفعل؟ دخول
دخول  سجل الأن 
مدرسة تطوير المواقع
جدول المحتويات
تابع الكائنات.
في هذا الفصل سندرس عدد من الكائنات الموجودة مسبقا في اللغة و هي كائنات معرفتها هامة و ستعتمد عليها و على دوالها بشكل أساسي في الفصول القادمه و في التطبيقات العملية ,كما أنه أيضا في هذا الفصل سنبدأ في أن نلمس كيف تستخدم الجافا سكريبت في التحكم في مكونات صفحة الإنترنت التي تظهر للمستخدم تمهيدا للفصول القادمة التي سيظهر فيها الهدف الأساسي للجافا سكريبت و هو جعل الصفحات متفاعلة مع المستخدم
[تحسين] المصفوفات و الأوتار و الأرقام
في الدروس السابقة تعرفنا على المصفوفات arrays و على الأوتار strings أو سميناها بالنصوص, و الأرقام numbers ,و لكل واحدة منهم طريقتين للإنشاء
الطريقة الأولى :
  • لإنشاء رقم var num=1
  • لإنشاء نص var txt="any text"
  • لإنشاء مصفوفةvar arr=[1,2,3]

و في هذه الحالة عند إستخدام typeof مع num و txt و arr في حالة الرقم سيكون الناتج number و في حالة النص سيكون الناتج string و في حالة المصفوفة سيكون الناتج object

أما الطريقة الثانية فهي إنشائهم ككائنات .
  • لإنشاء رقم var num =new Number(1)
  • لإنشاء نص var txt=new String("any txt")
  • لإنشاء مصفوفة var arr=new Array(1,2,3)

و في هذه المرة إذا إستخدمنا typeof مع num و txt و arr سيكون الناتج object .

و بما أنهم كائنات object إذن لكل منهم عدد من الدوال و الخصائص التي يمكن أن تستخدم مع كل منهم ,و من المفيد أنه بالنسبة لـلنصوص (strings) سواء كان النص معرف بالطريقة بالثانية و نوعه object أوالأولى و بالتالي نوعه string, فإنه يمكن إستخدام الدوال و الخصائص الخاصة بكائنه ٍString معه و سيتضح كيف ذلك في الجزء الخاص به في الدرس .

المصفوفات
الجداول التالية توضح بعض الخواص و الدوال الهامة الخاصة بالكائن Array
جدول الخصائص
الخاصيةالوصف
lengthتعرف من خلاله عدد عناصر المصفوفة

جدول الدوال
الدالةالوصف
concatتقوم بدمج مصفوفتين في مصفوفة واحدة
reverseتعكس ترتيب عناصر المصفوفة
joinتوصل عناصر المصفوفة ببعضها مكونة منها وتر واحد
popتحذف آخر عنصر من عناصر المصفوفة و ترجع قيمة هذا العنصر
pushتضيف عنصر جديد إلى نهاية المصفوفة و ترجع عدد عناصر المصفوفة الجديد
sortترتب عناصر المصفوفة


و هذا المثال تطبيق على كيفية إستخدام هذه الدوال و الخواص :
دوال المصفوفات
<html>
<head></head>

<body>
<script language="javascript" type="text/javascript">
var array1=new Array("asmaa","fatma","nada","sara");
var array2=new Array("hadeer","aliaa","asmaa","gehad");
var array=array1.concat(array2);
for(i in array)
{
	document.write(array[i]+"<br/>");
}
var array=array.reverse();
var string=array.join("-");

document.write(string);

array.pop();

var string=array.join("-");
document.write("<br/>"+string);
array.push("Amira");
var string=array.join("-");
document.write("<br/>"+string);
array.sort();
var string=array.join("-");
document.write("<br/>"+string);
document.write("<br/>"+"the length is:"+array.length);
</script>

</body>
</html>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

في المثال
  • قمنا بتعريف مصفوفتين array1 و array2 كل منهم تحتوى على بعض أسماء الفتايات .
  • بعد ذلك قمنا بدمج المصفوفتين في مصفوفة واحده array بإستخدام دالة concat 
    • var array=array1.concat(array2);
    ثم بعد ذلك عرضنا محتويات المصفوفة array بإستخدام for in و ستجدها ظهرت في أعلى صفحة الناتج(الصف الأول).

    asmaa , fatma , nada , sara , hadeer , aliaa , asmaa , gehad ,

  • في السطر 13إستخدمنا reverse لعكس ترتتيب المصفوفة 
    • var array=array.reverse();
    ثم قمنا بتحويلها إلى string بإستخدام الدالة join 
    var string=array.join("-");
    ثم عرضنا الناتج و سيظهر في الصف الثاني الناتج.

    gehad-asmaa-aliaa-hadeer-sara-nada-fatma-asmaa

    لاحظ البرامتر الذي يعطى للدالة "-" يمثل الفاصل الذي يوجد بين عناصر المصفوفة عندما تتحول لوتر .
  • في السطر 18 إستخدمنا pop لحذف العنصر الأخير من المصفوفة 
    • array.pop();
    و عند عرض محتويات المصفوفة ستكون كما في الصف الثالث :

    gehad-asmaa-aliaa-hadeer-sara-nada-fatma

  • في السطر 22 إستخدمنا push لإضافة عنصر جديد 
    • array.push("Amira");
    و عند عرض محتويات المصفوفة بعض إضافة العنصر ستكون كما في الصف الرابع:

    gehad-asmaa-aliaa-hadeer-sara-nada-fatma-Amira

  • في السطر 25 إستخدمنا sort لترتيب عناصر المصوفة أبجديا فتكون عناصر المصفوفة كما تعرض في الصف الخامس

    • Amira-aliaa-asmaa-fatma-gehad-hadeer-nada-sara

  • في السطر 28 إستخدمنا الخاصية length لنعرض طول المصفوفة 
    • document.write("<br/>"+"the length is:"+array.length);

Strings

جدول الخصائص
الخاصيةالوصف
lengthتعرف من خلالها عدد حروف الوتر
جدول الدوال
الدالةالوصف
toUpperCaseترجع النص بعد تحويل كل حروفه إلى حروف كبييرة
toLowerCaseترجع النص بعد تحويل كل حروفة إلى حروف صغيرة
charAtتعطيها رقم فترجع لك الحرف الذي ترتيبه في النص يساوي الرقم المعطى
substrترجع لك جزء من النص يبدأ من الحرف الذي ترتيبه الرقم الذي تعطيه لها
splitتحول النص إلى مصفوفة
indexOfتبحث في النص عن شيء تحدده لها
و الآن مع شرح كيف تستخدم هذه الدوال و الخصائص بالأمثلة : ملحوظة:في الأمثلة التالية يمكنك إستخدام أداة الـconsole تضع فيها الكود و سيظهر لك الناتج الذي يحدد عليه باللون الأصفر هنا.

خاصية length

"abcdefghijklmnopqrstuvwxyz".length;
فيــــكـــــون الـــنـــاتـــج 26

الدوال

toUpperCase()

var myString = "hello";
var myTransformedString = myString.toUpperCase();
myTransformedString;
فيــــكـــــون الـــنـــاتـــج "HELLO"

لاحظ أن النص المتحولة حروفه إلى حروف كبيرة يوجد في المتغير myTransformedString أما النص الأصلي فيبقى كما هو

myString;
فيــــكـــــون الـــنـــاتـــج "hello"

toLowerCase()

مثل toUpperCase لكنها تحول كل النص لحروف صغيرة.

charAt(x)

تأخذ أي رقم مكان x و ترجع الحرف الذي له ترتيب x كما بالأمثلة 
"abcde".charAt(0);
فيــــكـــــون الـــنـــاتـــج "a" 
"abcde".charAt(3);
فيــــكـــــون الـــنـــاتـــج "d"

في حالة كان x أكبر من عدد الحروف ترجع نص فارغ كما بالمثال:

"abcde".charAt(10);
فيــــكـــــون الـــنـــاتـــج ""

substr(x, y)

تأخذ رقم مكان x و هو رقم الحرف الذي سيبدأ من عنده الجزء الذي ترجعه الدالة أما المتغير y فهو إختياري و يحدد رقم الحرف الذي سينتهي عنده الجزءو الأمثلة التالية توضح كيفية عمل الدالة : 
"abcde".substr(0, 2);
فيــــكـــــون الـــنـــاتـــج "ab" 
"abcde".substr(1, 3);
فيــــكـــــون الـــنـــاتـــج "bcd" 
"abcde".substr(1, 3);
فيــــكـــــون الـــنـــاتـــج "bcd"

split(x, y)

تأخذ متغيرين أو واحد أو لا شيء كما بالأمثلة:

في حالة متغير واحد فإنه يكون الحرف الذي يتم الفصل عنده كما بالمثال يتم الفصل عند وجود الفاصلة ","

"a,b,c,d,e".split(",");
فيــــكـــــون الـــنـــاتـــج["a", "b", "c", "d", "e"]

للفصل عند وجود المسافة

"a sentence split by words".split(" ");
فيــــكـــــون الـــنـــاتـــج["a", "sentence", "split", "by", "words"]

للفصل عند وجودة علامة |

"|a|b|c|".split("|");
فيــــكـــــون الـــنـــاتـــج["", "a", "b", "c", ""]

في حالة عدم إعطاء أي متغيرات للدالة ترجع مصفوفة فيها عنصر واحد هو النص كما بالمثال:

"a,b,c,d,e".split();
فيــــكـــــون الـــنـــاتـــج["a,b,c,d,e"]

في حالة إعطاء متغيرين يكون الثاني عدد عناصر المصفوفة المطلوب كما بالمثال:

"a,b,c,d,e".split(",", 3);
فيــــكـــــون الـــنـــاتـــج["a", "b", "c"]

indexOf(substring, start)

الدالة تأخذ متغيرين الأول substring و هو أساسي و يكون النص الذي تريد أن تبحث عنه أما الثاني start فهو إختياري و يحدد رقم الحرف الذي تريد ان يبدأ البحث من عنده و الأمثلة التالية توضح كيف تعمل الدالة: 
"hello world".indexOf("world");
فيــــكـــــون الـــنـــاتـــج6 
"hello world".indexOf("World");
فيــــكـــــون الـــنـــاتـــج-1

عندما يكون الناتج 1- يعني ذلك أنه لا يوجد ما تبحث عنه في النص لاحظ أن كلمة World تختلف عن world في أن الحرف الأول كبير في الأولى و لذا تعتبر كلمة مختلفة .

"hello world".indexOf("o", 5);

فيــــكـــــون الـــنـــاتـــج7

لاحظ أن البحث بدأ من أول الحرف الخامس فيكون أول حرف o يقابل الدالة ترتيبه 7 ولا تنظر لـ o الموجودة في hello لأنها قبل الحرف الذي له الترتيب 5.



[تحسين] الكائن window.
عرضنا من قبل في درس الكائنات الموجودة مسبقا. مخططا للكائنات الموجودة في الجافا سكريبت و التي تعتمد في عملها عليهم و المخطط كان يقسم الكائنات حسب النوع و الوظيفة فهناك كائنات خاصة بأساس اللغة نفسها Language , ودرسنا منها Math و Date و Array و String .و كائنات خاصة بالمتصفح و محتوياته و التي كانت تحت التصنيف navigator, و من الآن سنبدأ في دراسة هذا الجزء navigator و الذي فهممه هو مفتاح تحكم الجافا سكريبت في محتويات صفحة الويب.

سنبدأ بدراسة الكائن window في هذ الدرس و الذي تحدثنا عنه من قبل في درس الكائنات الموجودة مسبقا.و قلنا أن الدوال و المتغيرات التي تقوم بتعرفيها بدون أن تكون داخل دالة أخرى أو كائن تكون عبارة عن دوال methods و خواص للكائن window ,ولا يقف الأمر عند هذا الحد فقط,إن الكائن window يمثل نافذة المتصفح التي تحتوى على الصفحة و كما تحتوى نافذة المتصفح داخلها كل شيء في الموقع فإن الكائن window أيضا هو الكائن الشامل global الذي يتحتوى كل الكائنات الأخرى سواء كانت في في الجزء الأيمن من مخطط الكائنات الموجودة مسبقا.أو على الجانب الأيسر و لتشعر بذلك بنفسك جرب هذا الكود في الـconsole
window.Math.PI
و ستجد أنه يرجع لك قيمة الثابت PI و يتضح من هذا الكود أن Math كأنه يوجد داخل window و كذلك حال كل الكائنات الأخرى,و لأن كل شيء يمكن أن يبدأ بwindow لا تحتاج في أغلب الأحوال لأن تكتبها إلا في حالات نادرة كالموجودة بالمثال التالي: 
var myVar = "global variable";
function myFunc() {
var myVar = "scoped variable";
console.log(myVar);
console.log(window.myVar);
}
myFunc();
وإذا وضعت هذا الكود في الكنسول ستجد أن الناتج الذي سيظهر لك

"scoped variable"

"global variable"

و كما ترى في المثال إحتجنا لأن نسبق myVar بـ window لنميز المتغير العام عن المتغير الخاص بالدالة myVar . في كل الكائنات التي درسناها سابقا و التي كانت ضمن النصف الأيمن Language ,دوالها و خصائصها ليس لها علاقة بالمتصفح و محتوياته فمثلا أنت تعرف مصفوفة لعدد من الأرقام ثم يمكنك أن تستخدم concat لتدمج معها مصفوفة أخرى و إلى آخره مما كنا نفعله في هذا النوع من الكائنات .أما الجزء الأيسر و الذي سنبدأ في دراسته دواله و خصائصه تتعلق بالمتصفح و محتويات الصفحه و الشكل التالي يوضح كائناته و سترى أن كلها تتفرع من window لأنه يحتويها جميعا في الدروس السابقة إستخدمنا دوال من الكائن window مثل alert و confirm و prompt و كانت كل هذه الدوال تخرج لك نوافذ و هذا يوضح كيف أن الكائنات الموجودة في هذا الشكل تقوم بالربط بين مكونات لها وجود في المتصفح مثل النافذه و بيانات في لغة الجافا سكريبت الأساسية ,و أيضا تعاملنا مع دالة document.write() والتي أيضا كانت تقوم بطباعة بيانات نصية من اللغة إلى صفحة الويب ,سندرس الكائن document بالتفصيل في الفصل التالي أما الآن فسنأخذ مثالين من الكائنات المتفرعة من window الموجودة بالشكل و هما navigator و location .

navigator

الكائن navigator يمدنا بمعلومات عن المتصفح الذي نستخدمه مثل نوعه و إصداره و نظام التشغيل الذي يعمل عليه و يتم ذلك من خلال عدد من الخواص فيه: لمعرفة إسم المتصفح نستخدم : 
navigator.appName
لمعرفة الإصدار نستخدم: 
navigator.appVersion
لمعرفة نظام التشغيل نستخدم: 
navigator.platform
و يمكنك تجربة هذه الأكواد في الكنسول .

location

يختص بعنوان الصفحة . ولنأخذ مثال على الكائن location لنرى كيف أن تغيير قيمة خاصية يؤدي إلى تغيير شيء في نافذة المتصفح . إليك المثال ,قم بنسخ الكود و ضعه في ملف html و قم بتجربته لأنه لا يصلح لأن تجربه في محرر الأكواد. 
<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>
<body>
    <script  type="text/javascript">
  if (confirm("Do you want to go to Google?")) {
    location = "http://www.google.com";
} else {
    location.reload(true);
}
  </script>
</body>
</html>
و عند تجربة الكود سيظهر لك صندوق يسألك Do you want to go to Google? إذا ضغطت ok سترجع دالة confirm القيمة true و بالتالي سينفذ السطر 
    location = "http://www.google.com";
و في هذه الحالة ستجد أنه تم فتح موقع جوجل بجعل قيمة location تساوي "http://www.google.com" أما إن قمت بالضغط على cancel فسينفذ السطر : 
 location.reload();

و في هذه الحالة سيتم إعادة تحميل الصفحة و سيظهر لك الصندوق ثانية
و مفتاح فهم هذا الكود هو أن تعرف أن location كائن يختص بعنوان الصفحة يعطيك معلومات عنه كما أنه تغير قيمته يؤدي إلى تغيير العنوان كما رأيت و له دوال و خواص متعلقة بالعنوان مثل الدالة التي إستخدمناها reload و التي تعيد تحميل العنوان ,و لن نستفيض الآن في شرح الكائن location فالغرض من المثال هو أن يتجسد لك كيف أنه من خلال تغيير بعض القيم بالجافا سكريبت تتغير أشياء في الصفحة و كيف أن الجافا سكريبت تتحكم في صفحات الويب.و في الدرس التالي سنرجع للكائن window نفسه و نستخدم أحد دواله و هي open لنوضح أكتر كيف أن النوافذ يتم التعامل معاها داخل الجافا سكريبت من خلال التعامل مع كائنات.

[تحسين] برمجة النوافذ المنبثقة.
في هذا الدرس سنستخدم دالة من دوال الكائن window و هي دالة open لنفتح نافذة منبثقة و نعرف كيف يتم التعامل معها و عمليا لم تعد فكرة جيدة أن تجعل في الموقع نوافذ منبثقة حيث أنها تزعج المتسخدم كما أن معظم المتصفحات صارت تمنعها و لكن الغرض من الدرس هو توضيح كيف أن الكائن يعبر عن النافذة و يمكن من خلاله التحكم فيها و برمجتها .

دالة open() تقبل متغيرات أولها يكون العنوان الذي ستفتحه فيها أما البقية فتحكم خصائص النافذة مثل العرض و الإرتفاع و غيرها ,الشيء المهم في دالة open أنها ترجع كائن يشبه الكائن window و من خلال هذا الكائن يمكنك برمجة كل شيء فيها و لنوضح هذا بالمثال:
قم بنسخ الكود وضعه و احفظه كصفحة html .
<!DOCTYPE html>

<html>
<head>
    <title>Page 1</title>
    <script type="text/javascript">
    var childWindow = open("", "", "height=300");
    
    childWindow.document.write("Hello, new Window!<br/>");
    childWindow.document.write("How are you today?");
    </script>
</head>
<body>
    
</body>
</html>

عند فتح ملف الhtml الذي يحتوى الكود فإنه سيتم فتح نافذة فرعية(تأكد من أن المتصفح يسمح بالنوافذ المنبثقة) إرتفاع النافذه كما هو محدد في دالة open في السطر 7 يساوي "height=300"

و ستجد أن ناتج الدالة open يتم إرجاعه في المتغير childWindow و بذلك يمثل childWindow النافذه المفتوحه و من خلاله يمكن برمجتها, ففي السطر التاسع و العاشر لكي نطبع نص في النافذة المنبثقة إستخدمناchildWindow أولا ثم document.write 
    childWindow.document.write("Hello, new Window!<br/>");
    childWindow.document.write("How are you today?");
لاحظ أنك عندما كنت تريد طباعة نص في النافذة الأساسية تستخدم 
document.write()
و التي هي نفسها 
window.document.write()
و أن childWindow هي أيضا كائن داخل الكائن window و له و مماثل له أي داخله نفس الكائنات.و أيضا يمكننا أن نكتب أمر الطباعه فيه هكذا 
 window.childWindow.document.write("Hello, new Window!<br/>");
و كتابة الكود بهذه الطريقة توضح كيف أن childWindow خاصية في window أي موجود داخله و أيضا توضح أن له نفس خصائص window مثل document و يمكننا التحكم في أمور كثيرة في النافذة المنبثقة من خلال الكائن childWindow فإذا فتحت الكنسول في النافذة الأساسية و كتبت فيه هذا الأمر 
childWindow.resizeTo(10, 10)

ستجد أن النافذة الصغرى تقلصت أبعادها إلى 10 في 10 و هذا يوضح كيف يمكنك التحكم في النافذة من خلال دوال الكائن childWindow و الآن أظن أنك جاهز للإنتقال للجزء الممتع فعلا في الجافا سكريبت و الذي سيبدأ من أول الفصل التالي.
العودة الى القائمة