پودیجا جاوا اسکریپت. جاوا اسکریپت - مشاهده رجیستری قدرت DOM اهمیت دارد

آخرین به روز رسانی: 11/1/2015

در نهایت، ما به کنترل‌کننده‌های رویداد درون خطی نگاه کردیم که در کد عنصر در پشت ویژگی‌های اضافی نشان داده شده‌اند:

اگرچه این روش به طور معجزه آسایی عمل می کند، اما کاستی های زیادی وجود دارد:

کد HTML با کد جاوا اسکریپت ترکیب می شود که ارتباط با آن برای توسعه، بهبود و نگهداری برنامه اهمیت بیشتری پیدا می کند.

مشترکین همچنین می توانند برای خلاقیت های موجود در وب سایت عناصر نصب شوند. p align="justify"> ایجاد پویا عناصر به این شکل امکان پردازش را از بین می برد

یک عنصر برای یک صفحه فقط می تواند یک توضیح به آن پیوست داشته باشد.

حذف کلکتور بدون تغییر کد امکان پذیر نیست

مشکلاتی که از استفاده مداوم از کلکتورها به وجود می آید نتیجه قدرت کلکتورها بود. همانطور که عناصر HTML دارای ویژگی هایی برای کنترل کننده ها هستند، در کد جاوا اسکریپت عناصر DOM می توانیم قدرت کنترل کننده هایی را که با ویژگی ها مطابقت دارند حذف کنیم:

تابع handler(e)( alert(e.type); ) document.getElementById("rect").onclick = handler;

در نتیجه کافی است که قدرت onclick را گرفته و به عملکرد آن که به آن کلکتور می گویند اختصاص دهیم. به همین دلیل، کد HTML با کد جاوا اسکریپت یکپارچه شده است.

همچنین شایان ذکر است که جمع‌آورنده تم مرورگر به طور خودکار یک شی رویداد را ارسال می‌کند، که تمام اطلاعات مربوط به موضوع را ذخیره می‌کند. بنابراین، می توانیم این شی را به تابع آشکارساز به عنوان یک پارامتر اختصاص دهیم.

علیرغم این واقعیت که مقامات دولتی احتمالاً مشکلات کمی در ارتباط با ویژگی های مختلف دارند، در عین حال این رویکرد بهینه نیز نیست. راه دیگر نصب سمپلر استفاده از سمعک است.

برای کار با شنوندگان، جاوا اسکریپت دارای یک شئ EventTarget است که به معنای addEventListener() (برای افزودن شنونده) و removeEventListener() برای حذف شنونده است. و قطعات عناصر HTML DOM نیز اشیاء EventTarget هستند و همچنین حاوی متدهایی هستند. در واقع، شنوندگان همان کارکردهای گردآورندگان را نشان می دهند.

متد addEventListener() دو پارامتر دارد: نام رویداد بدون پیشوند on و تابع listener برای آن رویداد. مثلا:

#rect( width:50px; height:50px; background-color: blue; ) var rect = document.getElementById("rect"); rect.addEventListener("کلیک"، تابع (e) (هشدار(e.type); ));

اینجاست که ایده کلیک دوباره مطرح می شود. همچنین می توانید از پارامتر دیگری از نام تابع استفاده کنید:

کنترل کننده تابع(e)( هشدار(e.type); ) var rect = document.getElementById("rect"); rect.addEventListener("کلیک"، handler);

سمعک به طور مشابه اضافه می شود:

Rect.removeEventListener("کلیک"، handler);

مزیت بهترین سیستم های شنوایی آنهایی است که می توانیم برای یک عملکرد خاص نصب کنیم:

Var کلیک = 0; تابع handlerOne(e)( alert(e.type); ) function handlerTwo(e)( clicks++; var newNode = document.createElement("p"); newNode.textContent = "فشرده شده" + کلیک ها؛ document.body.appendChild ( newNode var rect = document.getElementById("rect"); // اولین کنترلر rect.addEventListener را متصل می کند("click", handlerOne); // ضمیمه شنونده دیگری rect.addEventListener("click", handlerTwo);

پودیا - اینها کسانی هستند که آشکار شده اند و در حال تبدیل شدن هستند. به عنوان مثال، مرورگر هنگام بارگیری سند، هنگامی که کاربر مکان نما ماوس را در وب سایت حرکت می دهد یا کلیدی را روی صفحه کلید فشار می دهد، پیامی ایجاد می کند.

هر فرمی حالت متا دارد. ایده متا (یا کل شیء) - شیئی که ایده در آن نوشته شده است یا این ایده با آن مرتبط است.

برای هر موضوعی، می توانید یک تابع (یک یا چند) ثبت کنید که در صورت نامعتبر بودن موضوع، به طور خودکار توسط مرورگر فراخوانی می شود. عملکردی که برای پردازش ایده ها استفاده می شود شنیدن یا پردازش نامیده می شود.

حالت جستجو در شی مورد نظر ثبت می شود. سه راه برای ثبت یک مجموعه فرعی وجود دارد:

• روش Vikorist addEventListener() روی شی مورد نظر: elem.addEventListener("click", foo, false);
• با درج منبع قدرت شیء یعنی: elem.onclick = foo;

  شما می توانید با اختصاص دادن قدرت شی هدف به تابع، یک موتور جستجو را ثبت کنید. مقاماتی که ناشران به آنها اختصاص داده شده‌اند، نام‌هایی دارند که با پیشوند «روشن» شروع می‌شوند و نام‌های زیر را دنبال می‌کنند: کلیک کنید، تغییر دهید، و غیره: window.onload = تابع () ( هشدار ("صفحه کاملاً بارگذاری شده است. !") ;)

• مقدار ویژگی عنصر HTML هدف را مشخص کنید:

پهن کردن پایین مدلی است که در آن مشخص می شود که قسمت بالا کجاست و چگونه گسترش می یابد.

به طور کلی دو مدل تعریض وجود دارد. مدل اول «دامپینگ» نام دارد و مدل دیگر «دامپینگ» نام دارد.

در این مدل، سلسله مراتب از بزرگترین عنصر خاص (تودرتو) شروع می شود و سپس از طریق سلسله مراتب تا کوچکترین گره خاص بالا می رود. زهکشی تا شی پنجره ادامه خواهد داشت.

نام صفحه وب "استفاده سخت" است. let div = document.querySelector("div"); let body = document.querySelector("body"); let html = document.querySelector("html"); div.addEventListener("click", function() (alert("div"); ), false); body.addEventListener("click", function() (alert("body"); ), false); html.addEventListener("click", function() (alert("html"); ), false); document.addEventListener("click", function() (alert("document"); ), false); window.addEventListener("click", function () (alert("window"); ), false);

امتحان کن »

اگر روی یک عنصر کلیک کنید، کلیک به ترتیب زیر ظاهر می شود:

در این مدل، فرآیند از کوچکترین گره خاص (شیء پنجره) شروع می شود و سپس از طریق سلسله مراتب به خاص ترین عنصر نزول می کند.

بیایید نگاهی به کد صفحه وب جدید بیندازیم:

نام صفحه وب "استفاده سخت" است. let div = document.querySelector("div"); let body = document.querySelector("body"); let html = document.querySelector("html"); div.addEventListener("click", function () ( alert("div"); ), true); body.addEventListener("click", function () ( alert("body"); ), true); html.addEventListener("click", function() (alert("html"); ), true); document.addEventListener("click", function () ( alert("document"); ), true); window.addEventListener("click", function () ( alert("window"); ), true);

امتحان کن »

اگر روی یک عنصر کلیک کنید، کلیک به ترتیب بعدی ظاهر می شود.

تابعی که زمان برنامه را تعیین می کند موتور جستجو نامیده می شود. هر نوع پوست کتاب مخصوص به خود را دارد. نام جلد از کلمات on و نام زیر تشکیل شده است. به عنوان مثال، کنترل کننده کلیک، onclick نامیده می شود. Podіya نه در طرف دیگر، بلکه در یک عنصر خاص یافت می شود. بدیهی است که نمونه‌بردار یک تابع دائمی نیست. پنجره روی هر عنصری از صفحه قرار می گیرد.

روش های مختلفی برای اختصاص زیرمتن به یک عنصر وجود دارد. می توانید obobnik را به عنوان یک ویژگی اضافی تگ در نظر بگیرید. کدی که هنگام اعمال می تواند نمایش داده شود، روی ویژگی ارزش گذاری شده نوشته می شود. بیایید یک صفحه ایجاد کنیم، یک دکمه به آن اضافه کنیم و مهمتر از همه، یک موتور جستجو.

جاوا اسکریپت:

جاوا اسکریپت:

هنگامی که یک تابع به یک فرستنده اختصاص داده می شود، پس از نام تابع، تعظیم وجود ندارد. اگر بازوها را نصب کنید، این یک عملکرد مشخص نیست، بلکه یک فراخوان برای اقدام خواهد بود.

متد اصلی addEventListener() است که شنونده ای را به این عنصر اختصاص می دهد. او به حال احترام می گذارد. عفونت اغلب گیر نمی کند، اما جاوا اسکریپت ایده های جدیدی دارد که فقط با استفاده از این روش قابل پردازش هستند.

element.addEventListener (podia، تابع)

مولفه های:

پودیا - پودیا که باید کوتاه شود

تابع - تابعی که به یک جمع کننده تبدیل می شود

در پارامترهای این روش، نام زیرگروه ها در زبانه ها نوشته می شود و نیازی به نوشتن کلمه ای در مقابل آن نیست.

کد HTML:

جاوا اسکریپت:

متد removeEventListener() به شما امکان می دهد شنونده را حذف کنید.

element.removeEventListener (podia، تابع)

به عنوان یک عنصر اضافی برای روش در نظر گرفته شده، می توان تعدادی نمونه از همان نوع را در نظر گرفت. سپس باید پوست آنها را کاملا جدا کنید.

در طول ساعت استفاده از پوست، موضوع فرآیند تشکیل می شود. هدف شامل اطلاعات مربوط به محصول است. انواع مختلف اشیاء متفاوتی دارند. هیچ شکی در قدرتی که هر شیئی به وجود می آید وجود ندارد. به عنوان مثال، نوع قدرت، نوع انتقام است.

شی اقدام به عنوان یک پارامتر به تابع ارسال می شود که فرستنده است. برای دسترسی به یک شی، باید یک پارامتر برای تابع ایجاد کنید. از طریق این پارامتر یک نگاشت به شی وجود دارد. اگر تابع پارامترهای دیگر را پاس کند، آنگاه شی فرعی مسئول پارامتر اول است. شناسه دکمه ای که شناسه آن یک «دکمه» است قابل تغییر است. دسترسی به شی ممنوع است. به جای اطلاع از فشار دادن دکمه، نوع فشار نمایش داده می شود. اکنون خلاصه به این صورت خواهد بود:

بر روی دکمه کلیک کنید و نوع اپلیکیشن مورد نظر شما نمایش داده می شود.

همه اشیا در معرض قدرت currentTarget هستند. در اینجا او عنصری را که از آن ایده خواسته است، تغییر می دهد. شما نمی توانید اذیت شوید. Aje obrobnik به یک عنصر خاص اختصاص داده شده است. آیا باید این عنصر را بچرخانم؟ همه چیز در مرورگر پیچیده تر است. کم کم متوجه خواهید شد که چگونه مبارزه کنید. ویژگی های دیگر را بر اساس شرایط خاص بررسی خواهیم کرد.

اینها همه چیزهایی هستند که جاوا اسکریپت می تواند پشتیبانی کند.

مثال زیر تاریخ فشار دادن دکمه را نشان می دهد:

با کمک جاوا اسکریپت می‌توانیم صفحات وب پویا ایجاد کنیم.

اینها همه اقداماتی هستند که جاوا اسکریپت می تواند آشکار و اجرا کند.

عنصر پوست در وب سایت ممکن است عملکردهای مختلفی داشته باشد که ممکن است منجر به جاوا اسکریپت شود.

پردازش داده ها با استفاده از فرم های HTML

توجه: توابع باید همزمان با توابع انتخاب شوند و تا زمانی که عملکرد تکمیل نشود، تابع انتخاب نخواهد شد!

onLoad و onUnload

تخلفات onLoad و onUnload نیز اغلب مورد سوء استفاده قرار می‌گیرند، اگر به کوکی‌ها مربوط می‌شوند، که هنگام ورود کاربر به صفحه یا حذف آن، باید نصب شوند. به عنوان مثال، اگر ابتدا از صفحه خود بازدید کنید، می توانید یک پنجره درز ایجاد کنید، مانند پرسیدن نام یک کریستوواچ.

onFocus، onBlur و onChange

فیلدهای onFocus، onBlur و onChange اغلب هنگام تغییر فیلدهای فرم خراب می شوند.

روی MouseOver

تابع onmouseover را می توان به گونه ای پیکربندی کرد که وقتی کاربر ماوس را روی عنصر HTML می برد، عملکرد را فعال کند.

یادداشت نویسنده: هنگامی که صفحه وب جاوا اسکریپت آماده و آماده شد، یک آبشار کامل از رویدادها راه اندازی می شود، که وقتی مشتری شروع به تعامل با صفحه به روشی می کند، حتی تعداد بیشتری از آنها وجود دارد. می توانید با اسکرول کردن، کلیک کردن بر روی دکمه یا پر کردن فرم، روی صفحه کلیک کنید. برای اجرای آن در جاوا اسکریپت، به کد خاصی نیاز دارید که طراحی و می نویسید و در نتیجه با یکدیگر تعامل دارند.

Pods در JS را می توان به 4 گروه بزرگ تقسیم کرد:

گزینه‌های رابط کاربری: بپرسید که آیا با رابط کاربری مرورگر (دکمه‌های صفحه وب، که بخشی از رابط مرورگر است) تعامل دارید یا خیر. این مراحل را می توان انجام داد تا مواردی را که در سمت راست صفحه قرار دارند، صرف نظر از حساب کاربری، شامل شوند. چنین مراحلی شامل تغییر اندازه پنجره، پیمایش صفحه، بزرگ‌نمایی و افزایش محتوا است.

برای صفحه‌کلید، موش‌ها و صفحه‌های لمسی: وقتی کاربر دکمه‌های روی صفحه‌کلید را فشار می‌دهد یا رها می‌کند، ماوس، پد لمسی یا صفحه لمسی را لمس می‌کند، سؤال کنید.

Podii focus ta fori. اینها به ویژه با فرم ها مرتبط هستند: فیلد ورودی "فوکوس را حذف می کند" اگر کاربر آماده تعامل با آن باشد. سایر مراحل شامل ارسال فرم، تغییر مقدار فیلدهای فرم و غیره است.

جاوا اسکریپت. شروع سریع

کد ویژه ای که مخصوصاً برای یک عنصر DOM مناسب است، یک زیرنویس ایجاد می کند. JS سه راه برای ایجاد یک نظرسنجی دارد:

قدیمی ترین روش پیوند فیلدها، یکی از گسترده ترین سیستم ها. روش vikoryst ویژگی های خاصی را از توزیع استخراج می کند. مثلا:

در برنامه، پس از اینکه فیلد تمرکز را از بین برد، کاربر برای پر کردن فیلد بعدی (مثلاً با استفاده از TAB یا یک کلیک اولیه) عنصری به نام تابع checkName را که با JS نوشته شده است، پر می کند.
کدنویس های استاندارد HTML برای استفاده در توسعه روزانه توصیه نمی شوند، عمدتاً از طریق آنهایی که عملکرد را با نشانه گذاری ترکیب می کنند، که کار را پیچیده می کند و کد را بهبود می بخشد.

این تکنیک JS و طرح‌بندی را جدا می‌کند، اما آن را به هم متصل می‌کند - به هر صفحه می‌توان تنها یک تابع اختصاص داد. ورودی تجزیه کننده HTML معادل برای DOM خواهد بود:

var username = document.getElementbyId("username"); username.onblur = checkName;

Podii focus ta fori. اینها به ویژه با فرم ها مرتبط هستند: فیلد ورودی "فوکوس را حذف می کند" اگر کاربر آماده تعامل با آن باشد. سایر مراحل شامل ارسال فرم، تغییر مقدار فیلدهای فرم و غیره است.

onblur = checkName;

اصول اولیه جاوا اسکریپت را در یک برنامه کاربردی برای ایجاد یک برنامه وب بیاموزید

3. شنوندگان رویداد

روش فعلی اضافه کردن یک محو کننده که به شما امکان می دهد قابلمه را با همان عملکرد گرم کنید:

نام کاربری.

addEventListener("blur"، checkName، false);