نحن نعلم أن تطبيق JavaScript الكامل يجب أن يتكون من ثلاثة أجزاء: ECMASCRIPT (CORE) ، BOM (نموذج كائن المتصفح) ، ونموذج كائن المستند).
اليوم أتعلم بشكل رئيسي بوم ودوم.
بوم:
يوفر BOM العديد من الكائنات للوصول إلى وظائف المتصفح ، والتي لا علاقة لها بمحتوى صفحة الويب (هذا هو DOM Business). في الوقت الحاضر ، تم نقل BOM إلى مواصفات HTML5 بواسطة W3C.
كائن النافذة:
يمثل جوهر BOM مثيلًا للمتصفح. إنها واجهة للوصول إلى نافذة المتصفح من خلال JavaScript وكائن عالمي محدد بواسطة ECMASCript. هذا يعني أن أي كائن ، متغير ووظيفة محددة في صفحة الويب لها نافذة ككائن عالمي لها ، لذلك لديها إذن للوصول إلى طرق مثل paresinint (). (مقتطف من الارتفاع الثالث). علاوة على ذلك ، إذا كانت صفحة الويب تحتوي على إطارات ، فإن كل إطار يحتوي على كائن نافذة خاص به ويتم حفظه في مجموعة Frames (يبدأ الفهرس 0 ، LTR ، TTB).
بادئ ذي بدء ، فإن المتغيرات والوظائف في بيئة التنفيذ العالمية كلها أجناس وطرق لكائنات النوافذ. بالطبع ، هناك فرق بسيط بين المتغيرات العالمية وسمات النوافذ المحددة مباشرة. لا يمكن إعلان المتغيرات العالمية (بدقة ، فهي لا يمكن إعلانها بشكل صريح المتغيرات العالمية) ، في حين أن سمات النوافذ جيدة. بالإضافة إلى ذلك ، هناك تفاصيل أخرى يجب ملاحظة أن محاولة الوصول إلى المتغيرات غير المعلنة سوف تكون خطأ ، ولكن لا توجد مشكلة في استخدام كائنات النوافذ.
إذن ، ما هي الخصائص الشائعة أو طرق النافذة؟
1.NAME ، يحتوي كل كائن نافذة على سمة اسم ، تحتوي على اسم الإطار. عادة لفهم علاقات النوافذ والأطر.
2. طريقة وضع النافذة: Moveto (X إحداثيات الموضع الجديد ، Y إحداثيات من الموضع الجديد) ، MoveBy (الحركة الأفقية X ، الحركة العمودية Y). هاتان الطريقتان لا تنطبق على الإطار.
3. سمات حجم النافذة: عرض داخلي/ارتفاع (حجم منطقة الرؤية (ناقص عرض الحدود)/ *أي ، Safari ، Firefox */) ، العرض الخارجي/الارتفاع (إرجاع حجم نافذة المتصفح/ *أي ، Safari ، Firefox */). في Chrome ، يعيد كل من الداخلية والخارجية حجم منطقة العرض.
بالطبع ، يمكنك تغيير حجم النافذة بواسطة Resizeto (عرض نافذة جديد ، ارتفاع نافذة جديد) ، ResizeBy (حتى العرض الأصلي وزيادة y مقارنة بالارتفاع الأصلي). لا تنطبق طريقة أغنية الحب هذه على بنية الإطار.
4.Window.Open (عنوان URL ، هدف النافذة ، سلسلة الميزات ، ما إذا كانت الصفحة الجديدة تحل محل منطقية الصفحة التي تم تحميلها حاليًا في سجل المتصفح) للانتقال إلى عنوان URL معين أو فتح نافذة جديدة. إذا تم تحديد هدف النافذة ، وكان هدف النافذة هو اسم نافذة أو إطار موجود ، فسيتم تحميل عنوان URL المحدد في النافذة أو الإطار الذي تمت إعادة تسميته. خلاف ذلك ، سيتم تسمية النافذة الجديدة التي تفتح كنافذة الهدف. بالطبع ، الكلمات الرئيسية التي يمكن أن تحددها أهداف النافذة هي _self ، _parent ، _top ، _blank.
<a href = // www.vevb.com> انقر فوق لي </a> <script> var link = document.getElementSbyTagName ("a") [0] ؛ تنبيه (link.nodename) ؛ window.onload = function () {link.onclick = function () {window.open (link.href ، "good" ، "width = 400px ، height = 300px") ؛ العودة كاذبة }} </scriptلا يتم تفصيل الإعدادات المحددة لسلسلة الميزات هنا. إذا كنت مهتمًا ، يمكنك النقر هنا
5. كلغة واحدة ، لا تزال JS تسمح بتعيين قيم المهلة (تنفيذ الرمز بعد الحدث المحدد) وقيم وقت الفاصل (الحلقة بمجرد كل وقت محدد) لجدولة تنفيذ الرمز في لحظة محددة.
استدعاء المهلة: SetTimeOut (سلسلة رمز JS ، وقت مللي ثانية). كلغة واحدة متخلى ، لا يمكن لقائمة انتظار مهمة JS تنفيذ جزء واحد فقط من التعليمات البرمجية في وقت واحد. إذا كانت قائمة انتظار المهمة فارغة بعد الفاصل الزمني المحدد ، فسيتم تنفيذ سلسلة الكود. خلاف ذلك ، عليك الانتظار حتى يتم تنفيذ الكود السابق قبل التنفيذ.
var al = setTimeOut (function () {Alert ("good") ؛} ، 5000) ؛ تنبيه (AL) ؛ // 2هنا ، اتصلت بوظيفة مجهولة بعد 5 ثوان لإخراج جيد. ظهرت مربع تحذير في النافذة لإظهار 2. يمكن ملاحظة أن وظيفة setTimeOut () تُرجع معرفًا رقميًا ، وهو فريد من نوعه. بعد ذلك ، يمكننا مسح مكالمة المهلة من خلال هذا المعرف ، ويمكننا استخدام ClearTimeOut (ID) لمسحه.
المكالمة غير المباشرة: setInterval () ، والمعلمات التي تقبلها هي نفسها مثل setTimeOut () ، وأيضًا إرجاع معرف رقمي وتم مسحها باستخدام ClearTimeOut ().
6. طرق مربع الحوار النظام: ALERT () ، تأكيد () ، موجه () ، وما إلى ذلك ، مكتوبة في مدونتي السابقة ، انقر هنا
كائن الموقع
بدلاً من أن تكون كائنًا في BOM ، الموقع هو خاصية في كائن النافذة. بالطبع ، إنها أيضًا خاصية كائن المستند في DOM هي التي ستتم مناقشتها لاحقًا. وهذا هو ، window.location و document.location الرجوع إلى نفس الكائن.
قائمة سمة كائن الموقع ، يمكن تعديل هذه السمات تحميل صفحة جديدة وإنشاء سجل جديد في السجل. لن يؤدي استخدام location.replace () إلى إنشاء سجلات جديدة في السجلات التاريخية.
| التجزئة | "#محتويات" | عودة التجزئة في عنوان URL ، وليس "" |
| يستضيف | "www.google.com" | إرجاع اسم الخادم ورقم المنفذ (إن وجد) |
| اسم المضيف | "www.google.com" | إرجاع اسم الخادم بدون رقم المنفذ |
| HREF | "www.google.com" | إرجاع عنوان URL الكامل للصفحة الحالية ، ومكالمات التعيين () |
| اسم المسار | ''/wileycda/' | العودة إلى اسم الدليل |
| ميناء | "8080" | إرجاع رقم المنفذ ، إن لم يكن ، بإرجاع سلسلة فارغة |
| بروتوكول | "http:" | العودة إلى البروتوكول المستخدمة في الصفحة |
| يبحث | "؟ = javaScript" | إرجاع سلسلة الاستعلام ، بدءًا من علامة استفهام |
كائن Navigator: يتم استخدام معيار فعلي يستخدم لتحديد المتصفحات ، وخصائصه وطرقه بشكل أساسي لاكتشاف أنواع المتصفح.
الباقي مثل كائنات السجل (حفظ السجلات التاريخية) وكائنات الشاشة (تُظهر قدرات العميل). نظرًا لأن البرمجة في JS ليست فعالة للغاية ، فلن أكررها.
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
دوم:
DOM عبارة عن واجهة برمجة تطبيقات تمتد لـ HTML استنادًا إلى XML ، ويعتمد DOM على أشجار العقدة للتوسع.
بادئ ذي بدء ، من الضروري أن تكون واضحًا أن عقدة المستند هي عقدة الجذر لكل عقدة. تحتوي عقدة المستند وعقدة طفل واحدة فقط ، وهي HTML (عنصر المستند).
نوع العقدة:
يتم تطبيق واجهة في DOM1 بواسطة جميع أنواع العقدة (العقد النصية ، وعقد السمات ، وعقد العناصر) ، ويتم تطبيق هذه الواجهة كنوع عقدة في JS.
سمة nodetype ، مملوكة لكل عقدة. يدل على 12 قيمًا رقمية ، العنصر-1 ، السمة-2 ، نص-3 ...
سمة nodename ، لعقدة Node Element ، قيمة Nodename هي اسم التسمية.
سمة NodeValue ، لعقدة Node Element ، قيمة NodeValue فارغة.
علاقة العقدة: كل عقدة لديها سمة childnodes ، والتي تحفظ كائن nodelist (كائن صفيف الفئة). تحتوي كل عقدة على خاصية ParentNode ، مشيرة إلى العقدة الأصل. العقد في الأطفال لها نفس الوالدين. استخدم خصائص PreviSibling و Nextsibling للوصول إلى عقد الأخوة. في الوقت نفسه ، childnodes [0] == firstchild ، childnodes [childnodes.length-1] == LastChild.
عقدة التشغيل: AppendChild () ، وادفع عقدة إلى نهاية Nodelist ، وإرجاع العقدة المضافة حديثًا. insertbefore () ، وإرجاع عقدة إلى رأس Nodelist Unsonshift ، وإرجاع عقدة جديدة. ReplaceChild (Newchild ، TargetChild) ، يحل محل العقدة المستهدفة. لا تزال العقدة الأصلية في المستند ، ولكن لا يوجد موقع. removechild (tragetchild) ، يزيل العقدة ، والتأثير يشبه replacechild (). Clonechild (Boolean) ، عندما يكون صحيحًا ، يعني النسخ المتماثل الكامل (العقدة بأكملها وعقدة الطفل) ، يعني النسخ المتماثل الأساسي.
نوع المستند:
يمثل مستندًا ، وكائن المستند هو مثيل لـ HTMLDDocument (الموروث من نوع المستند) ، ويمثل صفحة HTML بأكملها. في الوقت نفسه ، يكون الكائن Douent أيضًا خاصية لكائن النافذة ، بحيث يمكن الوصول إليها ككائن عالمي. document.firstchild == html. document.body == الجسم. document.doctype ---> الإشارة إلى <! doctype>. doucment.title ---> document document.url ---> location.url.
العثور على العناصر: getElementById () ، getElementsByTagName () ، getElementSbyClassName ().
كتابة المستند: الكتابة () ، الكتابة () ، Open () ، Close ()
نوع العنصر:
GetAttribute () ، احصل على ميزة الفصل ، استخدم "Class" ، بدلاً من اسم className ، ويمكن الحصول على سمة الفصل عند استخدام element.className.
SetAttribute () ، يعين الميزة ، إذا كانت الميزة موجودة ، استبدلها. خلاف ذلك ، إنشاء.
removeAttribute () يزيل تمامًا خصائص العناصر.
CreateElement () ، إنشاء عنصر جديد.
نوع النص:
CreateTextNode () ، ينشئ العقد النصية. إذا تم توصيل عقدة النص بعقدة مواطن مجاورة ، فسيتم توصيل النصين بدون مسافات.
تكوين المقالة أعلاه من JavaScript ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------