Quick Table of Contents
[Edit] الكائن 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 لأنه يحتويها جميعا![]() 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 لنوضح أكتر كيف أن النوافذ يتم التعامل معاها داخل الجافا سكريبت من خلال التعامل مع كائنات.
November 28, 2011
|
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
© Advanced Web Core. All rights reserved