نافذة
لا يعمل كائن النافذة كنطاق عالمي فحسب ، بل يمثل أيضًا نافذة متصفح.
يحتوي كائن النافذة على خصائص داخلية وخصائص داخلية ، والتي يمكن أن تحصل على العرض الداخلي وارتفاع نافذة المتصفح. يشير العرض والارتفاع الداخليين إلى العرض الصافي والارتفاع المستخدمين لعرض صفحة الويب بعد إزالة عناصر العنصر النائب مثل شريط القائمة ، شريط الأدوات ، الحدود ، إلخ.
التجديد:
عرض المنطقة المرئية لصفحة الويب: document.body.clientwidth ارتفاع المنطقة المرئية لصفحة الويب: document.body.clientheight عرض المنطقة المرئية لصفحة الويب: document.body.offsetwidth (بما في ذلك عرض الحافة والتمرير الكامل). document.body.scrollWidth ارتفاع النص الكامل لصفحة الويب: document.body.scrollheight ارتفاع صفحة الويب التي يتم طرحها: document.body.scrolltop أو jQuery (وثيقة) .Scrolltop () الجزء الأيسر من صفحة الويب: window.screen.hight عرض دقة الشاشة: window.screen.width الشاشة متوفرة مساحة العمل الارتفاع: window.screen.availheight الشاشة عرض مساحة العمل المتاحة: window.screen.availwidth أرقام لون الشاشة: Window.screen.colordepth على الشاشة/بوصة. $ (نافذة). HEIGHT () عرض نافذة المتصفح: $ (window) .width ()
خاص 1: حل لـ document.body.scrolltop هو دائمًا 0 var scrollpos ؛ if (typeof window.pageyoffset! = 'undefined') {scrollpos = window.pageyoffset ؛ } آخر إذا (typeof document.compatmode! = 'undefined' && document.compatmode! = 'backcompat') {scrollpos = document.documentElement.scrolltop ؛ } آخر إذا (typeof document.body! = 'undefined') {scrollpos = document.body.scrolltop ؛ } تنبيه (scrollpos) ؛ خاص 2: عرض النص الكامل لصفحة الويب: "+ document.body.scrollwidth ؛ ارتفاع النص الكامل لصفحة الويب:"+ document.body.scrollheight ؛ لا يمكن الحصول على الوظائف المذكورة أعلاه في بعض الأحيان ، لذا استخدم الطريقة التالية. var xscroll ، yscroll ؛ if (window.innerheight && window.scrollmaxy) {xScroll = document.body.scrollwidth ؛ yscroll = window.innerheight + window.scrollMaxy ؛ } if if (document.body.scrollheight> document.body.offsetheight) {// all explorer mac xscroll = document.body.scrollwidth ؛ yscroll = document.body.scrollheight ؛ } آخر {// explorer mac ... سيعمل أيضًا في Explorer 6 Strict و Mozilla و Safari XScroll = document.body.offsetWidth ؛ yscroll = document.body.offsetheight ؛ }الملاح
يمثل كائن Navigator معلومات المتصفح. وتشمل الخصائص الأكثر استخدامًا:
• navigator.appname: اسم المتصفح ؛
• navigator.appversion: نسخة المتصفح ؛
• Navigator.Language: اللغة التي وضعها المتصفح ؛
• navigator.platform: نوع نظام التشغيل ؛
• navigator.useragent: سلسلة وكيل المستخدم التي تم تعيينها بواسطة المتصفح.
من أجل كتابة رمز مختلف لمتصفحات مختلفة ، يحب المبتدئون استخدام إصدار المتصفح ، على سبيل المثال:
var width ؛ if (getIeversion (navigator.userAgent) <9) {width = document.body.clientwidth ؛} آخر {width = window.innerwidth ؛} ولكن قد يكون هذا غير دقيق في الحكم ومن الصعب أيضًا الحفاظ على الكود. الطريقة الصحيحة هي الاستفادة الكاملة من ميزة JavaScript في العودة undefined للخصائص غير الموجودة واستخدام مشغل الدائرة القصيرة مباشرة || لحساب:
var width = window.innerwidth || document.body.clientwidth ؛
شاشة
يمثل كائن الشاشة معلومات الشاشة. وتشمل الخصائص الشائعة:
• Screen.Width: عرض الشاشة ، بالبكسل ؛
• الشاشة. الرحيب: ارتفاع الشاشة ، بالبكسل ؛
• screen.colordepth: إرجاع عدد أرقام الألوان ، مثل 8 ، 16 ، 24.
موقع
يمثل كائن الموقع معلومات عنوان URL للصفحة الحالية. على سبيل المثال ، عنوان URL الكامل:
http://www.example.com:8080/path/index.html؟a=1&b=2#top
يمكن الحصول عليها باستخدام location.href . للحصول على قيم كل جزء من عنوان URL ، يمكنك كتابته مثل هذا:
الموقع. protocol ؛ // 'http'location.host ؛ // 'www.example.com' location.port ؛ // '8080'location.pathName ؛ // '/path/index.html'location.search ؛ // '؟ a = 1 & b = 2'location.hash ؛ // 'قمة'
لتحميل صفحة جديدة ، يمكنك استدعاء الموقع. Assign (). إذا كنت ترغب في إعادة تحميل الصفحة الحالية ، فمن المريح للغاية استدعاء MOTITION.RELOAD ().
وثيقة
يمثل كائن المستند الصفحة الحالية. نظرًا لأن HTML ممثلة كهيكل شجرة في المتصفح في شكل DOM ، فإن كائن المستند هو العقدة الجذرية لشجرة DOM بالكامل.
تتم قراءة سمة عنوان المستند من <title> xxx </title> في مستند HTML ، ولكن يمكن تغييرها بشكل ديناميكي:
يحتوي كائن المستند أيضًا على سمة ملف تعريف الارتباط ، والتي يمكن أن تحصل على ملفات تعريف الارتباط للصفحة الحالية.
ملف تعريف الارتباط هو معرف القيمة الرئيسية التي أرسلها الخادم. نظرًا لأن بروتوكول HTTP عديمي الجنسية ، يمكن للخادم التمييز بين طلب المستخدم الذي أرسله ، ويمكن تمييزه بواسطة ملفات تعريف الارتباط. عندما يقوم المستخدم بتسجيل الدخول بنجاح ، يرسل الخادم ملف تعريف ارتباط إلى المتصفح ، مثل user = abc123xyz (سلسلة مشفرة). بعد ذلك ، عندما يزور المتصفح موقع الويب ، فإنه سيقوم بإرفاق ملف تعريف الارتباط هذا برأس الطلب ، ويمكن للخادم التمييز بين المستخدم بناءً على ملف تعريف الارتباط.
يمكن لملفات تعريف الارتباط أيضًا تخزين بعض إعدادات موقع الويب ، مثل لغة الصفحة المعروضة ، إلخ.
يمكن لـ JavaScript قراءة ملفات تعريف الارتباط على الصفحة الحالية من خلال document.cookie:
document.cookie ؛ // 'v = 123 ؛ تذكر = صحيح ؛ تفضل = ZH '
نظرًا لأن JavaScript يمكنه قراءة ملفات تعريف الارتباط على الصفحة ، وعادة ما توجد معلومات تسجيل الدخول الخاصة بالمستخدم في ملفات تعريف الارتباط ، وهذا يخلق مخاطر أمان ضخمة. وذلك لأن إدخال رمز JavaScript التابع لجهة خارجية في صفحات HTML مسموح به:
<!-الصفحة الحالية موجودة في wwwexample.com-> <html> <head> <script src = "http://www.foo.com/jquery.js"> </script> </head> </html>
في حالة وجود رمز ضار في JavaScript من جهة خارجية تم تقديمه ، سيحصل موقع www.foo.com مباشرة على معلومات تسجيل دخول المستخدم لموقع www.example.com.
لحل هذه المشكلة ، يمكن للخادم استخدام httponly عند إعداد ملفات تعريف الارتباط. لن تتم قراءة ملفات تعريف الارتباط التي وضعت Httponly بواسطة JavaScript. يتم تنفيذ هذا السلوك من قبل المتصفح ، ويدعم المتصفحات الرئيسية خيار HTTPonly. من أجل ضمان الأمان ، يجب أن يصر الخادم دائمًا على استخدام httponly عند إعداد ملفات تعريف الارتباط.
document.write () فقط يخرج محتوى جديد إلى المستند
إذا تم تنفيذ document.write بعد تحميل المستند ، فسيتم كتابة صفحة HTML بأكملها:
المرجع: http://www.w3school.com.cn/tiy/t.asp؟f=js_write_over
دوم | وثيقة
// إرجاع العقدة مع معرف "اختبار": var test = document.getElementById ('test') ؛ // الحصول على جميع العقد الفرعية المباشرة تحت اختبار العقدة: var cs = test.children ؛ var first = test.firstelementchild ؛ الطريقة الثانية هي استخدام querySelector() و querySelectorAll() . تحتاج إلى فهم بناء جملة المحدد ثم استخدام الظروف للحصول على العقدة ، والتي تكون أكثر ملاءمة:
// احصل على العقدة مع معرف Q1 من خلال QuerySeletrate: var q1 = document.queryselector ('#q1') ؛ // احصل على جميع العقد في عقدة Q1 التي تلبي الشروط من خلال QuerySelectorAll: var ps = q1.queryselectarall ('div.highlighted> p') ؛بالمعنى الدقيق للكلمة ، تشير عقدة DOM هنا إلى العنصر ، ولكن عقدة DOM هي في الواقع عقدة. في HTML ، تتضمن العقدة أنواعًا كثيرة من العناصر ، والتعليق ، و CDATA_Section ، وما إلى ذلك ، وكذلك نوع مستند عقدة الجذر. ومع ذلك ، في معظم الأوقات ، نحن نهتم فقط بالعنصر ، أي العقدة التي تتحكم فعليًا في بنية الصفحة ، وتجاهل الأنواع الأخرى من العقد. تم ربط مستند عقدة الجذر تلقائيًا بمستند متغير عالمي.
تعديل دوم
تعديل CSS هو أيضا عملية شائعة. تتوافق سمة نمط عقدة DOM مع جميع CSSS ويمكن استردادها مباشرة أو ضبطها. نظرًا لأن CSS تسمح بأسماء مثل حجم الخط ، ولكنها ليست اسم خاصية صالحة لـ JavaScript ، يجب إعادة كتابتها باسم GavaScript:
// get <p id = "p-id"> ... </p> var p = document.getElementById ('p-id') ؛ // set css: p.style.color = '#ff0000' ؛ p.style.fontsize = '20px' ؛أدخل دوم
هناك طريقتان لإدراج عقدة جديدة. أحدهما هو استخدام AppendChild لإضافة عقدة طفل إلى آخر عقدة الطفل للعقدة الأصل. على سبيل المثال:
<!-هيكل html-> <p id = "js"> javaScript </p> <div id = "list"> <p id = "scheme"> مخطط </p> </viv>
إضافة <p id="js">JavaScript</p> إلى العنصر الأخير من <div id="list"> :
var js = document.getElementById ('js') ، list = document.getElementById ('list') ؛ list.appendchild (js) ؛الآن ، يصبح بنية HTML هكذا:
<!-هيكل html-> <div id = "list"> <p id = "scheme"> مخطط </p> <p id = "js"
نظرًا لأن عقدة js التي أدخلناها موجودة بالفعل في شجرة المستندات الحالية ، سيتم أولاً حذف هذه العقدة من موقعها الأصلي ثم إدراجها في موقع جديد.
في أكثر الأحيان ، سنقوم بإنشاء عقدة جديدة من الصفر وإدخالها إلى الموقع المحدد:
haskell = document.createElement ('p') ؛ يمكن إنشاء عقدة ديناميكية ثم إضافتها إلى شجرة DOM تحقيق العديد من الوظائف. على سبيل المثال ، يقوم الكود التالي بإنشاء عقدة <style> ويضيفها إلى نهاية العقدة <head> ، وبالتالي إضافة تعريف CSS جديد إلى المستند:
var d = document.createElement ('style') ؛ d.SetAttribute ('type' ، 'text/css') ؛ d.innerhtml = 'p {color: red}' ؛ document.getElementsByTagName ('head') [0] .appendchild (d) ؛أدخل قبل
ماذا لو أردنا إدخال العقد الفرعية في الموقع المحدد؟ يمكنك استخدام ParentElement.InserTbefore (newElement ، ReferenceElement) ؛ وسيتم إدخال عقدة الطفل قبل المرجعية.
في كثير من الأحيان ، من الضروري حلقة جميع أطفال العقدة الوالدية ، والتي يمكن تنفيذها عن طريق التكرار على سمة الأطفال:
var i ، c ، list = document.getElementById ('list') ؛ for (i = 0 ؛ i <list.children.length ؛ i ++) {c = list.children [i] ؛ // احصل على عقدة I-Th Child}حذف دوم
لحذف العقدة ، تحتاج أولاً إلى الحصول على العقدة نفسها والعقدة الأم ، ثم استدعاء عقدة الوالد لإزالة الحذف:
// احصل على العقدة المراد حذفها: var self = document.getElementById ('to-be-removed') ؛ // الحصول على العقدة الأصل: var parent = self.parentElement ؛ // delete: var readed = parent.removechild (self) ؛ تمت إزالته === الذات ؛ // حقيقيلقد لاحظت أنه على الرغم من أن العقدة المحذوفة لم تعد في شجرة المستندات ، إلا أنها لا تزال في الذاكرة ويمكن إضافتها إلى موقع آخر في أي وقت.
عندما تعبر طفلًا من عقدة الوالدين وتنفيذ عملية حذف ، كن على علم بأن سمة الأطفال هي سمة للقراءة فقط وسيتم تحديثها في الوقت الفعلي عندما تتغير عقدة الطفل. لذلك ، عند حذف العقد المتعددة ، من المهم ملاحظة أن سمات الأطفال تتغير طوال الوقت.
نموذج التشغيل
يشبه استخدام JavaScript لمعالجة النماذج تشغيل DOM ، لأن النموذج نفسه هو أيضًا شجرة DOM.
ومع ذلك ، يمكن أن يتلقى مربع إدخال النموذج ، مربع المنسدلة ، وما إلى ذلك إدخال المستخدم ، لذلك يمكن أن يؤدي استخدام JavaScript لتشغيل النموذج الحصول على المحتوى الذي أدخله المستخدم ، أو تعيين محتوى جديد لمربع الإدخال.
هناك بشكل أساسي عناصر التحكم في الإدخال التالية لأشكال HTML:
• مربع النص ، يتم استخدام <إدخال type = "text"> ، لإدخال النص ؛
• مربع كلمة المرور ، يتم استخدام <provail type = "password"> ، لإدخال كلمات المرور ؛
• مربع الراديو ، يتم استخدام <إدخال type = "Radio"> ، لتحديد عنصر ؛
• مربع الاختيار ، يتم استخدام <إدخال type = "checkbox"> لتحديد عناصر متعددة ؛
• يتم استخدام المربع المنسدل ، وهو <select> ، لتحديد عنصر ؛
• النص المخفي ، غير مرئي <input type = "hidden"> للمستخدم ، ولكن سيتم إرسال النص المخفي إلى الخادم عند تقديم النموذج.
احصل على القيمة
إذا حصلنا على مرجع إلى عقدة <prope> ، فيمكننا الاتصال مباشرةً للحصول على قيمة إدخال المستخدم المقابلة:
// <input type = "text" id = "email"> var input = document.getElementById ('email') ؛ input.value ؛ // "القيمة التي أدخلها المستخدم" يمكن تطبيق هذه الطريقة على text ، password ، hidden select . ومع ذلك ، بالنسبة إلى مربعات الراديو والاختيار ، value دائمًا ما تكون قيمة HTML PRITET ، وما نحتاج إلى الحصول عليه هو في الواقع ما إذا كان المستخدم قد "تم التحقق" من الخيار ، لذلك يجب استخدام checked للحكم:
// <billy> <input type = "radio" name = "weekday" id = "monday" value = "1"> Monday </billy> // <label> <input type = "radio" name = "weekday" id = "leugue" value = "2"> ugue> var mon = document.getElementByid ('monday') // '1'tue.value ؛ // '2'mon.checked ؛ // صحيح أو خطأضبط القيمة
تشبه تحديد القيمة الحصول على القيمة. للنص ، كلمة المرور ، مخفية وحدد ، يمكنك تعيين القيمة مباشرة:
// <input type = "text" id = "email"> var input = document.getElementById ('email') ؛ input.value = '[email protected]' ؛ // تم تحديث محتوى مربع النصللراديو ومربعات الاختيار ، قم بالتحقق من True أو False.
HTML5 عناصر التحكم
أضافت HTML5 عددًا كبيرًا من عناصر التحكم القياسية ، وتشمل تلك المستخدمة بشكل شائع التاريخ ، و DateTime ، و DateTime-Local ، واللون ، وما إلى ذلك.
<type type = "date" value = "2015-07-01">
<type type = "dateTime-local" value = "2015-07-01T02: 03: 04">
<type type = "color" value = "#ff0000">
لا يمكن للمتصفحات التي لا تدعم HTML5 التعرف على عناصر تحكم جديدة وستقوم بعرضها على أنها نوع = "نص". المستعرضات التي تدعم HTML5 سوف تحصل على سلاسل تنسيق. على سبيل المثال ، سيتم ضمان أن تكون قيمة إدخال Type = "Date" تاريخًا صالحًا بتنسيق yyyy-mm-dd ، أو سلسلة فارغة.
إرسال نموذج
أخيرًا ، يمكن لـ JavaScript التعامل مع تقديم النموذج بطريقتين (يتم تقديم طريقة Ajax في الفصل التالي).
الطريقة الأولى هي إرسال نموذج من خلال طريقة إرسال () لعنصر <Porm>. على سبيل المثال ، استجابةً لحدث <button> انقر فوق الحدث ، أرسل النموذج في رمز JavaScript:
<form id = "test-form"> <input type = "text" name = "test"> <button type = "button" onClick = "dosuBmitform ()"> إرسال </button> </form> <script> دالة dosubmitform () {var form = document.getElementById ('test-form') ؛ // يمكنك تعديل إدخال النموذج هنا ... // إرسال النموذج: form.submit () ؛} </script> عيب هذه الطريقة هو أنه يعطل التقديم الطبيعي للمتصفح. يقدم المتصفح النموذج عند النقر فوق <button type="submit"> افتراضيًا ، أو يضغط المستخدم على مفتاح Enter في مربع الإدخال الأخير. لذلك ، فإن الطريقة الثانية هي الاستجابة لحدث onsubmit لـ <form> نفسه وإجراء تغييرات عند تقديم النموذج:
<form id = "test-form" onsubmit = "return checkform ()"> <input type = "text" name = "test"> <button type = "submit"> إرسال </form> <script> checkform () {var form = document.getElementById ('test-form') ؛ // يمكنك تعديل مدخلات النموذج هنا ... // تابع إلى الخطوة التالية: Return True ؛} </script> لاحظ أن return true مطلوب لإخبار المتصفح بمواصلة تقديمه. إذا كانت return false ، فلن يستمر المتصفح في تقديم النموذج. يتوافق هذا الموقف عادة مع خطأ إدخال المستخدم ، ويتم مطالبة المستخدم برسائل الخطأ ويتم إنهاء النموذج.
عند التحقق من <input> ، استخدام كامل <input type="hidden"> لتمرير البيانات.
على سبيل المثال ، تريد العديد من نماذج تسجيل الدخول من المستخدمين إدخال أسماء المستخدمين وكلمات المرور ، ولكن ، لأسباب أمان ، لا تنقل كلمات مرور النص العادي عند إرسال النموذج ، ولكن MD5 من كلمة المرور. سيقوم مطورو JavaScript العاديون بتعديل <input> :
<form id = "login-form" method = "post" onsubmit = "return checkform ()"> <input type = "text" id = "username" name = "username"> <inputive type = "password" id = "password" name = "password"> button type = "president"> putrant </form> <script> // قم بتغيير النص العادي الذي أدخله المستخدم إلى MD5: pwd.value = tomd5 (pwd.value) ؛ // تابع إلى الخطوة التالية: إرجاع true ؛} </script>
يبدو أن هذه الطريقة على ما يرام ، ولكن عندما يدخل المستخدم كلمة المرور لإرسالها ، سيتم عرض مربع كلمة المرور فجأة من عدة * إلى 32 * (لأن MD5 لديه 32 حرفًا).
لعدم تغيير إدخال المستخدم ، يمكنك استخدام <input type="hidden"> للتنفيذ:
<form id = "login-form" method = "post" onsubmit = "return checkform ()"> <input type = "text" id = "username" name = "username"> <input type = "password" id = "inpoort-password> <input type =" hidden "id =" md5-password "name =" passwore> button " var input_pwd = document.getElementById ('input-password') ؛ var md5_pwd = document.getElementById ('md5-password') ؛ // قم بتغيير النص العادي الذي أدخله المستخدم إلى MD5: md5_pwd.value = tomd5 (input_pwd.value) ؛ // تابع إلى الخطوة التالية: إرجاع true ؛} </script>لاحظ أن <pection> مع معرف MD5-password name = "Password" ، في حين أن المعرف الذي أدخله المستخدم هو كلمة الإدخال بدون سمة الاسم. لن يتم إرسال بيانات بدون اسم <Input>.
ملفات التشغيل
في نماذج HTML ، فإن عنصر التحكم الوحيد الذي يمكنه تحميل الملفات هو <type = "file">.
ملاحظة: عندما يحتوي النموذج على <input type = "file"> ، يجب تحديد enctype للنموذج على أنه multipart/form-data ، ويجب تحديد الطريقة على أنها منشور ، بحيث يمكن للمتصفح أن يشفر بشكل صحيح وإرسال بيانات النموذج بتنسيق multiLt/form-data.
لأسباب أمان ، يسمح المتصفح للمستخدمين فقط بالنقر فوق <input type = "file"> لتحديد الملفات المحلية. استخدام JavaScript لتعيين القيمة لـ <input type = "file"> ليس له أي تأثير. عندما يختار المستخدم تحميل ملف ، لا يمكن لـ JavaScript الحصول على المسار الحقيقي للملف:
ملف ليتم تحميله:
عادة ، تتم معالجة الملفات التي تم تحميلها بواسطة خادم الواجهة الخلفية. يمكن لـ JavaScript التحقق من ملحق الملف عند إرسال النموذج لمنع المستخدمين من تحميل الملفات بتنسيقات غير صالحة:
var f = document.getElementById ('test-file-upload') ؛ var filename = f.value ؛ // 'c: /fakepath/test.png'if (! filename ||! (filename.endswith ('. العودة خطأ ؛}ملف API
نظرًا لأن JavaScript لديها عمليات محدودة للغاية على الملفات التي تم تحميلها من قبل المستخدمين ، وخاصة عدم القدرة على قراءة محتوى الملف ، يجب تنفيذ العديد من صفحات الويب التي تتطلب ملفات تشغيل باستخدام المكونات الإضافية الطرف الثالث مثل Flash.
مع شعبية HTML5 ، تتيح واجهة برمجة تطبيقات الملف المضافة حديثًا JavaScript لقراءة محتوى الملف والحصول على المزيد من معلومات الملف.
توفر واجهة برمجة تطبيقات ملف HTML5 كائنين رئيسيين: الملف و filereader ، والتي يمكنها الحصول على معلومات الملف وقراءة الملفات.
يوضح المثال التالي كيفية قراءة ملف صورة تم اختياره للمستخدم ومعاينة الصورة في <div>:
معاينة الصورة:
var fileInput = document.getElementById ('test-image-file') ، info = document.getElementById ('test-file-info') ، معاينة = document.getElementById ('test-dise-preview') ؛ // استمع إلى تغيير الأحداث: fileInput.adDeventListener ('Change' ، function () {// clear prossection image: fearile.style.backgroundImage = '' ؛ info.innerhtml = 'file:' + file.name + '<br>' Size: ' + file.size +' <br> ' +' modified: ' + file.lastmodifieddate ؛ ملف الصورة! في شكل dataurl: reader.readasdataurl (file) ؛}) ؛يوضح الرمز أعلاه كيفية قراءة محتويات الملف من خلال واجهة برمجة تطبيقات ملف HTML5. يتم قراءة الملف في شكل Dataurl سلسلة ، على غرار البيانات: Image/JPEG ؛ BASE64 ،/9J/4AAQSK ... (ترميز BASE64). غالبًا ما يتم استخدامه لضبط الصور. إذا كانت المعالجة من جانب الخادم مطلوبة ، فأرسل الأحرف بعد سلسلة Base64 إلى الخادم وفك تشفيرها باستخدام BASE64 للحصول على المحتوى الثنائي للملف الأصلي.
أتصل مرة أخرى
يوضح الرمز أعلاه أيضًا ميزة مهمة لـ JavaScript ، وهو وضع التنفيذ المفرد. في JavaScript ، يتم تنفيذ محرك تنفيذ JavaScript الخاص بالمتصفح دائمًا في وضع واحد متخلف عند تنفيذ رمز JavaScript ، مما يعني أنه في أي وقت ، من المستحيل على رمز JavaScript أن يتم تنفيذ أكثر من مؤشر ترابط واحد في نفس الوقت.
قد تسأل ، كيف تتعامل مع تعدد المهام في وضع واحد من الخيوط؟
في JavaScript ، يُطلق على تعدد المهام في الواقع غير متزامن ، مثل الكود أعلاه:
reader.readasdataurl (file) ؛
سيتم بدء عملية غير متزامنة لقراءة محتويات الملف. نظرًا لأنها عملية غير متزامنة ، لا نعرف متى تنتهي العملية في رمز JavaScript ، لذلك نحتاج إلى تعيين وظيفة رد الاتصال أولاً:
reader.onload = function (e) {// عند قراءة الملف ، تسمى هذه الوظيفة تلقائيًا:} ؛عند اكتمال قراءة الملف ، سيتصل محرك JavaScript تلقائيًا بوظيفة رد الاتصال التي حددناها. عند تنفيذ وظيفة رد الاتصال ، تمت قراءة الملف ، حتى نتمكن من الحصول على محتويات الملف بأمان داخل وظيفة رد الاتصال.
تتحدث المقالة أعلاه لفترة وجيزة عن كائن Browser JavaScript هو كل المحتوى الذي أشاركه معك. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.