` disappear when we click it. +یک کد جاوا‌اسکریپتی به `button` اضافه کنید تا `

` در زمان کلیک شدن مخفی شود. -The demo: +دمو: [iframe border=1 src="solution" height=80] diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md index cded5b622..b69020042 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md @@ -1,5 +1,5 @@ -Can use `this` in the handler to reference "the element itself" here: +برای دسترسی به "خود عنصر" می‌توانیم درون کنترل‌کننده از `this` استفاده کنیم: ```html run height=50 - + ``` diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md index 9ee8f18e1..15b1d6404 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Hide self +# مخفی کردن خود عنصر -Create a button that hides itself on click. +یک button بسازید که وقتی کلیک می‌شود خودش را مخفی کند. ```online -Like this: - +مثل این: + ``` diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md index d569f0e4d..98cf4fc68 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md @@ -1,8 +1,8 @@ -The answer: `1` and `2`. +جواب: `1` و `2`. -The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function. +کنترل‌کننده اول اجرا می‌شود زیرا توسط `removeEventListener` حذف نمی‌شود. برای حذف کنترل‌کننده باید دقیقا خود تابعی که استفاده کردیم را به ورودی بدهیم. و در این کد یک تابع جدید به عنوان ورودی استفاده شده که فقط شبیه هستند، اما یک تابع نیستند. -To remove a function object, we need to store a reference to it, like this: +برای حذف یک شئ تابع باید آنرا در یک متغیر به عنوان مرجع ذخیره کنیم. مانند: ```js function handler() { @@ -13,4 +13,4 @@ button.addEventListener("click", handler); button.removeEventListener("click", handler); ``` -The handler `button.onclick` works independently and in addition to `addEventListener`. +کنترل‌کننده `button.onclick` جدا و علاوه بر `addEventListener` کار می‌کند. diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md index f8cd75d5a..653c96852 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Which handlers run? +# کدام کنترل‌کننده اجرا شود؟ -There's a button in the variable. There are no handlers on it. +یک دکمه درون متغیر ذخیره شده. ولی هیچ کنترل‌کننده به آن اختصاص نیافته. -Which handlers run on click after the following code? Which alerts show up? +با توجه به کد زیر، کدام کنترل‌کننده بعد از کلیک اجرا می‌شود؟ کدوم پیغام نمایش داده می‌شود؟ ```js no-beautify button.addEventListener("click", () => alert("1")); diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index b04cb8231..3f78573aa 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -1,11 +1,11 @@ -First we need to choose a method of positioning the ball. +اول نیاز داریم که روش قرارگیری توپ را انتخاب کنیم. -We can't use `position:fixed` for it, because scrolling the page would move the ball from the field. +نمی‌توانیم از `position:fixed` به این منظور استفاده کنیم. چون اسکرول کردن صفحه باید توپ را در زمین جابجا کند. -So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned. +پس باید از `position:absolute` استفاده کنیم و برای اینکه از موقعیت توپ مطمئن شویم، روش قرارگیری `field` را نیز تنظیم می‌کنیم. -Then the ball will be positioned relatively to the field: +در این صورت، توپ نسبت به زمین قرار گرفته می‌شود: ```css #field { @@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field: #ball { position: absolute; - left: 0; /* relative to the closest positioned ancestor (field) */ + left: 0; /* نسبت به نزدیکترین والدی که موقعیت آن تنظیم شده (field) */ top: 0; - transition: 1s all; /* CSS animation for left/top makes the ball fly */ + transition: 1s all; /* انیمیشن‌های CSS برای چپ/بالا، انگار توپ پرتاب شده */ } ``` -Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now. +حال باید مقدارهای درستی به `ball.style.left/top` بدهیم. این مقدار نسبت به زمین خواهد بود. -Here's the picture: +مانند این تصویر: ![](move-ball-coords.svg) -We have `event.clientX/clientY` -- window-relative coordinates of the click. +ما `event.clientX/clientY` را داریم، مختصات اشاره‌گر موس نسبت به پنجره. -To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width: +برای اینکه مقدار `left` مختصات اشاره‌گر موس در زمان کلیک را نسبت به زمین بگیریم، باید چپ زمین و عرض حاشیه را از هم کم کنیم. ```js let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor. +معمولا، `ball.style.left` به معنی "حاشیه چپ عنصر" (توپ) است. پس اگر که به `left` مقدار دهیم، پس گوشیه توپ، و نه وسط آن زیر موس قرار می‌گیرد. -We need to move the ball half-width left and half-height up to make it center. +باید که توپ را به اندازه نصف طولش به چپ، و به اندازه نصف ارتفاع آن به بالا ببریم تا وسط قرار گیرد. -So the final `left` would be: +پس مقدار نهایی `left` به صورت زیر است: ```js let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2; ``` -The vertical coordinate is calculated using the same logic. +مختصات عمودی نیز با همین منطق محاسبه می‌شود. -Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS. +لطفا توجه کنید که طول/ارتفاع توب باید در زمانی که به `ball.offsetWidth` معلوم باشد. پس باید در HTML یا CSS آنها را مقدار دهی کنیم. diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html index 3ebe8739e..c25185051 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html @@ -27,7 +27,7 @@ - Click on a field to move the ball there. + روی زمین کلیک کنید تا توپ حرکت کند.
@@ -39,29 +39,29 @@ diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html index 07adbf985..de645fe2c 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/source.view/index.html @@ -8,21 +8,21 @@ - The button code (may need to adjust CSS): + کد دکمه (ممکن است که نیاز به تغییر CSS داشته باشید):

Horse

The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.

اسب

اسب یا باره یکی از دو زیرگونه‌های اسب وحشی است. این جانور پستاندار و فَردسُم است و به تیره اسبیان تعلق دارد. فرگشت اسب از ۴۵ تا ۵۵ میلیون سال پیش به این سو آغاز شده‌است، گذشتهٔ اسب‌های بزرگ و تک‌سم امروزی به جانورانی کوچک‌جثه و چندسم بازمی‌گردد.

Donkey

The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.

الاغ

الاغ یا درازگوش جانوری اهلی از خانوادهٔ اسبیان است. خر وحشی آفریقایی جد وحشی خرهای اهلی است. این حیوان حدود ۵۰۰۰ سال پیش در مصر یا بین‌النهرین اهلی شد. انسان‌ها از این حیوان بیشتر برای بارکشی استفاده می‌کنند.

Cat

The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin. +

گربه

گُربه یک گونهٔ اهلی گوشت‌خوار از پستانداران است که جثهٔ کوچکی دارد. گربه تنها گونهٔ اهلی در خانوادهٔ گربه‌ایان است و برای تمیز دادن آن از اعضای وحشی این خانواده، اغلب از آن تحت عنوان گربهٔ خانگی یاد می‌شود.

diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md index 152cf41fe..48a1303ba 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Add a closing button +# دکمه بسته‌شدن اضافه کنید -There's a list of messages. +لیستی از پیام‌ها موجود است. -Use JavaScript to add a closing button to the right-upper corner of each message. +با استفاده از جاوااسکریپت یک دکمه بستن به گوشه بالا راست هر پیام اضافه کنید. -The result should look like this: +نتیجه باید چنین چیزی باشد: [iframe src="solution" height=450] diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md index 1c6b52cea..175ba07c3 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md @@ -1,17 +1,17 @@ -The images ribbon can be represented as `ul/li` list of images ``. +نوار عکس‌ها را می‌توان به عنوان یک لیست `ul/li‍` شامل عکس‌ها `` نشان داد. -Normally, such a ribbon is wide, but we put a fixed-size `

` around to "cut" it, so that only a part of the ribbon is visible: +معمولا، چنین نوار عریض است، اما ما یک `

` با سیز ثایت دور قرار می‌دهیم تا آنرا "ببریم". با اینکار فقط قستمی از آن نمایش داده می‌شود: ![](carousel1.svg) -To make the list show horizontally we need to apply correct CSS properties for `

`, like `display: inline-block`. +برا اینکه لیست را افقی نمایش دهیم باید خصوصیات CSS‌ درستی را برای `

` نسبت دهیم. مثلا `display: inline-block`. -For `` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it. +برای `` باید `display` را تغییر دهیم. چرا که مقدار پیشفرض آن `inline` است. فضای رزورشده اضافی زیر عناصر `inline` قرار دارد (برای "letter tail" ها)، برای حذف آن می‌توانیم از `display:block` کمک بگیریم. -To do the scrolling, we can shift `

` has a fixed width, so "extra" images are cut. +‍`

` بیرونی طول ثابتی دارد. پس عکس‌های "اضافه" برش داده می‌شوند. -The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `

` and style things inside it. +همه‌ی این اسلایدر یک حزء گرافیکی مستقل روی صحفه است. پس بهتر است آنرا درون یک `

` قرار دهیم و اجزای درون آنرا استایل دهیم diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html index 2c6073316..eb2142751 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html @@ -27,7 +27,7 @@

diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css index 75c68f01a..f20ab02e5 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css @@ -30,9 +30,9 @@ ul { ul img { width: 130px; height: 130px; - display: block; /* removes extra space near images */ + display: block; /* حذف فاصله‌های اضافی نزدیک عکس‌ها */ } ul li { - display: inline-block; /* removes extra space between list items + display: inline-block; /* حذف فاصله اضافی بین آیتم‌های لیست */ } diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md index a6adbffa5..d04f51d14 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md @@ -2,12 +2,12 @@ importance: 4 --- -# Carousel +# اسلایدر -Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows. +یک "اسلایدر چرخشی" بسازید. نوار از عکس‌ها که با کلیک بر روی فلش‌ها پیمایش می‌شوند. [iframe height=200 src="solution"] -Later we can add more features to it: infinite scrolling, dynamic loading etc. +بعدا می‌توانیم امکانات دیگری به آن اضافه کنیم: پیمایش بی‌نهایت، بارگزاری پویا و ... -P.S. For this task HTML/CSS structure is actually 90% of the solution. +پی‌نوشت: برای این تکلیف ساختار HTML/CSS تقریبا 90% راه حل است. diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index 19394e49e..58cc9f1f9 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -1,256 +1,256 @@ -# Introduction to browser events +# درامدی بر رویدادهای مرورگر -*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM). +*یک رویداد* نشانه‌ای از چیزی است که اتفاق افتاده است. همه‌ی عناصر درخت DOM این نشانه‌ها را تولید می‌کنند (اما رویدادها محدود به درخت DOM نیستند). -Here's a list of the most useful DOM events, just to take a look at: +در اینجا صرفا برای آشنایی اولیه، لیستی از پرکاربردترین رویدادهای DOM اورده شده: -**Mouse events:** -- `click` -- when the mouse clicks on an element (touchscreen devices generate it on a tap). -- `contextmenu` -- when the mouse right-clicks on an element. -- `mouseover` / `mouseout` -- when the mouse cursor comes over / leaves an element. -- `mousedown` / `mouseup` -- when the mouse button is pressed / released over an element. -- `mousemove` -- when the mouse is moved. +**رویدادهای موس:** +- `click` -- زمانی که موس روی یک عنصر کلیک می‌کند (دستگاه‌های لمسی این رویدادها هنگام ضربه زدن ایجاد می‌کنند). +- `contextmenu` -- زمانی که موس روی یک عنصر راست‌کلیک می‌کند. +- `mouseover` / `mouseout` -- زمانی که اشاره‌گر موس روی/بیرون یک عنصر می‌رود.. +- `mousedown` / `mouseup` -- زمانی که کلید موس روی عنصر فشرده/رها می‌شود. +- `mousemove` -- زمانی که اشاره‌گر موس حرکت می‌کند. -**Keyboard events:** -- `keydown` and `keyup` -- when a keyboard key is pressed and released. +**رویدادهای صفحه‌کلید:** +- `keydown` و `keyup` -- زمانی که یک کلید از صفحه‌کلید فشرده/رها می‌شود. -**Form element events:** -- `submit` -- when the visitor submits a `

`. -- `focus` -- when the visitor focuses on an element, e.g. on an ``. +**رویدادهای عناصر form:** +- `submit` -- زمانی که بازدیدکننده یک `` را ثبت می‌کند. +- `focus` -- زمانی بازدیدکننده روی یک عنصر تمرکز کند, برای مثال یک ``. -**Document events:** -- `DOMContentLoaded` -- when the HTML is loaded and processed, DOM is fully built. +**رویدادهای :** +- `DOMContentLoaded` -- زمانی که سند HTML لود و پردازش شود، همچنین درخت DOM نیز کاملا تشکیل شده است. -**CSS events:** -- `transitionend` -- when a CSS-animation finishes. +**رویدادهای CSS:** +- `transitionend` -- زمانی که یک انیمیشن CSS تمام می‌شود. -There are many other events. We'll get into more details of particular events in next chapters. +رویدادهای متعدد دیگری نیز وجود دارد. درباره جزئیات مخصوص به هرکدام از رویدادها در بخش‌های بعدی صحبت می‌کنیم. -## Event handlers +## کنترل‌کننده‌های رویدادها -To react on events we can assign a *handler* -- a function that runs in case of an event. +برای واکنش به این رویداد‌ها باید یک *کنترل‌کننده* به آن اختصاص دهیم -- یک تابع که در زمان اتفاق افتادن یک رویداد اجرا می‌شود. -Handlers are a way to run JavaScript code in case of user actions. +کنترل‌کننده‌ها یک روش برای اجرای کدهای JavaScript در جواب به رفتارهای کاربر هستند. -There are several ways to assign a handler. Let's see them, starting from the simplest one. +چندین راه برای اختصاص کنترل‌کننده‌ها وجود دارد. برای آشنا شدن با آنها، از ساده‌ترین روش شروع می‌کنیم. -### HTML-attribute +### صفت HTML -A handler can be set in HTML with an attribute named `on`. +یک کنترل‌کننده می‌تواند درون HTML با یک صفتی به نام `on` تعریف شود. -For instance, to assign a `click` handler for an `input`, we can use `onclick`, like here: +برای مثال اگر بخواهیم یک کنترل‌کننده `click` برای یک `input` اختصاص دهیم، مشابه مثال زیر از `onclick` استفاده می‌کنیم: ```html run - + ``` -On mouse click, the code inside `onclick` runs. +در زمان کلیک موس، کدی که داخل `onclick` است اجرا خواهد شد. -Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we forget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Click!")"`, then it won't work right. +توجه کنید که داخل `onclick` ما از سینگل کوتیشن استفاده کردیم، چون که خود صفت درون یک دابل‌کوتیشن تعریف شده. اگر فراموش کنیم که کد داخل یک صفت است و از دابل‌کوتیشن استفاده کنیم، مثل این: `onclick="alert("کلیک!")"`، کد ما کار نخواهد کرد. -An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there. +صفت HTML جای آنچنان مناسبی برای نوشتن کد‌های طولانی نیست. پس بهتر است یک تابع جاوااسکریپت ایجاد کنیم و درون این صفت آنرا صدا بزنیم. -Here a click runs the function `countRabbits()`: +اینجا یک کلیک، تابع `countRabbits()` را فراخوانی می‌کند: ```html autorun height=50 - + ``` -As we know, HTML attribute names are not case-sensitive, so `ONCLICK` works as well as `onClick` and `onCLICK`... But usually attributes are lowercased: `onclick`. +همانطور که می‌دانیم، صفت‌های HTML به بزرگی و کوچکی حروف (case-sensitive) وابسته نیستند، پس ‍`ONCLICK` مانند `onClick` و `onCLICK` کار می‌کند ... اما معمولا صفت‌ها با حروف کوچک نوشته می‌شوند، مانند: `onclick`. -### DOM property +### خاصیت DOM -We can assign a handler using a DOM property `on`. +ما با استفاده از یک خاصیت DOM به نام `on` می‌توانیم یک کنترل‌کننده تعریف کنیم. -For instance, `elem.onclick`: +برای مثال، `elem.onclick`: ```html autorun - + ``` -If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property. +اگر که کنترل‌کننده توسط یک صفت HTML تعریف‌شده باشد، مرورگر آنرا می‌خواند و یک تابع جدید از مقدار آن صفت ایجاد می‌کند و آنرا به خاصیت متناظر DOM اختصاص می‌دهد. -So this way is actually the same as the previous one. +پس این روش درواقع شبیه روش قبلی است. -These two code pieces work the same: +این دو قطعه کد همانند هم عمل می‌کنند: 1. Only HTML: ```html autorun height=50 - + ``` 2. HTML + JS: ```html autorun height=50 - + ``` -In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference. +در مثال اولی، ما از صفت HTML برای مقدار دهی به `button.onclick` استفاده کردیم، درصورتی که در مثال دوم، این کار با کد انجام شده. تنها تفاوتشان همین است. -**As there's only one `onclick` property, we can't assign more than one event handler.** +**از آنجایی که فقط یک خاصیت `onclick` روی عنصر وجود دارد، نمی‌توانیم بیشتر از یک کنترل‌کننده‌ برای این رویداد تعریف کنیم.** -In the example below adding a handler with JavaScript overwrites the existing handler: +در مثال زیر، وقتی که یک کنترل‌کننده توسط جاواسکریپت به عنصر اختصاص می‌دهیم، می‌بینیم که جایگزین کنترل‌کننده قبلی می‌شود. ```html run height=50 autorun - + ``` -To remove a handler -- assign `elem.onclick = null`. +برای برداشتن یا حذف یک کنترل کننده، می‌توانیم از `elem.onclick = null` استفاده کنیم. -## Accessing the element: this +## دسترسی به عنصر: this -The value of `this` inside a handler is the element. The one which has the handler on it. +مقدار `this` داخل یک کنترل‌کننده خود عنصر است. عنصری که کنترل‌کننده روی آن تعریف شده. -In the code below `button` shows its contents using `this.innerHTML`: +در کد زیر `button` محتویات خود را با `this.innerHTML` نمایش می‌دهد: ```html height=50 autorun - + ``` -## Possible mistakes +## اشتباهات احتمالی -If you're starting to work with events -- please note some subtleties. +اگر که به تازگی می‌خواهید با رویدادها کار کنید، به این نکات مهم توجه کنید. -We can set an existing function as a handler: +ما می‌توانیم تابعی که از قبل تعریف شده و وجود دارد را به عنوان کنترل‌کننده استفاده کنیم. ```js function sayThanks() { - alert('Thanks!'); + alert('ممنونم!'); } elem.onclick = sayThanks; ``` -But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`. +اما مراقب باشید: تابع باید به صورت `sayThanks` به خاصیت DOM اختصاص یابد، نه به صورت `sayThanks()`. ```js -// right +// درست button.onclick = sayThanks; -// wrong +// اشتباه button.onclick = sayThanks(); ``` -If we add parentheses, then `sayThanks()` becomes is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work. +اگر که ما پرانتزها را اضافه کنیم تابع `sayThanks()` صدا زده می‌شود. پس مورد دوم درواقع *خروجی* حاصل از اجرای تابع را، که `undefined` است (چون تابع چیزی را باز نمی‌گرداند)، به عنوان کنترل‌کننده به `onclick` اختصاص می‌دهد، که قاعدتا کار نمی‌کند. -...On the other hand, in the markup we do need the parentheses: +...از سوی دیگر، ما در کد HTML به پرانتز ها نیاز داریم: ```html ``` -The difference is easy to explain. When the browser reads the attribute, it creates a handler function with body from the attribute content. +توضیح و توجیه این تفاوت آسان است. زمانی که مرورگر مقدار صفت را می‌خواند، یک کنترل‌کننده با بدنه‌‌ای شامل محتویات آن صفت می‌سازد. -So the markup generates this property: +پس چیزی شبیه این خاصیت ایجاد می‌شود: ```js button.onclick = function() { *!* - sayThanks(); // <-- the attribute content goes here + sayThanks(); // <-- محتویات صفت اینجا قرار می‌گیرد */!* }; ``` -**Don't use `setAttribute` for handlers.** +**برای کنترل‌کننده‌ها از `setAttribute` استفاده نکنید.** -Such a call won't work: +این چنین فراخوانی‌ای کار نخواهد کرد: ```js run no-beautify -// a click on will generate errors, -// because attributes are always strings, function becomes a string +// یک کلیک روی باعث بروز خطا می‌شود، +// چون که صفت‌ها همیشه رشته هستند، و تابع تبدیل به رشته می‌شود document.body.setAttribute('onclick', function() { alert(1) }); ``` -**DOM-property case matters.** +**بزرگی و کوچکی حروف برای خاصیت‌های DOM اهمیت‌دارد.** -Assign a handler to `elem.onclick`, not `elem.ONCLICK`, because DOM properties are case-sensitive. +کنترل‌کننده‌ ‌را به `elem.onclick` اختصاص دهید، نه به `elem.ONCLICK`، چونکه خصوصیات عناصر DOM به بزرگی و کوچکی حروف حساس هستند. ## addEventListener -The fundamental problem of the aforementioned ways to assign handlers -- we can't assign multiple handlers to one event. +مشکل اساسی با روش‌هایی که در بالا درباره تعریف و اختصاص دادن کنترل‌کننده‌ها گفته شد، این است که نمی‌توانیم چند گنترل‌کننده‌ را به یک رویداد اختصاص دهیم. -Let's say, one part of our code wants to highlight a button on click, and another one wants to show a message on the same click. +فرض کنیم که یک قسمت از کد می‌خواهد که دکمه‌ای را هنگام کلیک شدن، هایلایت کند، و کد دیگری که می‌خواهد در زمان همان کلیک پیغامی را نمایش دهد. -We'd like to assign two event handlers for that. But a new DOM property will overwrite the existing one: +معمولا می‌خواهیم که دو کنترل‌کننده برای آن تعریف کنیم. ولی می‌دانیم که مقداردهی خاصیت DOM مقدار قبلی را رونویسی می‌کند: ```js no-beautify input.onclick = function() { alert(1); } // ... -input.onclick = function() { alert(2); } // replaces the previous handler +input.onclick = function() { alert(2); } // جایگزین کنترل‌کننده قبلی می‌شود ``` -Developers of web standards understood that long ago and suggested an alternative way of managing handlers using special methods `addEventListener` and `removeEventListener`. They are free of such a problem. +توسعه‌دهندگان استاندارهای وب خیلی وقت پیش متوجه این موضوع شدند و یک راه حل جایگزین برای مدیریت کنترل‌کننده‌‌ها با استفاده از متد‌های مخصوص `addEventListener` و `removeEventListener` پیشنهاد دادند. این دو متد مشکل بالا را نخواهند داشت. -The syntax to add a handler: +سینتکس و چگونگی اضافه کردن یک کنترل‌کننده: ```js element.addEventListener(event, handler, [options]); ``` `event` -: Event name, e.g. `"click"`. +: نام رویداد, برای مثال `"click"`. `handler` -: The handler function. +: تابع کنترل‌کننده. `options` -: An additional optional object with properties: - - `once`: if `true`, then the listener is automatically removed after it triggers. - - `capture`: the phase where to handle the event, to be covered later in the chapter . For historical reasons, `options` can also be `false/true`, that's the same as `{capture: false/true}`. - - `passive`: if `true`, then the handler will not call `preventDefault()`, we'll explain that later in . +: یک شئ به عنوان ورودی اختیاری با خصوصیات زیر: + - `once`: اگر `true` باشد, کنترل‌کننده بعد از اولین اجرا از روی عنصر حذف می‌شود. + - `capture`: مرحله‌ای که کنترل‌کننده در آن عمل می‌کند, در این مورد در قسمت صبحت می‌شود. به دلایلی, `options` می‌تواند `false/true` باشد, که مشابه همان `{capture: false/true}` خواهد بود. + - `passive`: اگر `true` باشد, کنترل‌کننده تابع `preventDefault()` را صدا نخواهد زد، درباره این موضوع بعدا در قسمت صحبت خواهیم کرد. -To remove the handler, use `removeEventListener`: +برای حذف یک کنترل کننده از `removeEventListener`‌ استفاده می‌کنیم: ```js element.removeEventListener(event, handler, [options]); ``` -````warn header="Removal requires the same function" -To remove a handler we should pass exactly the same function as was assigned. +````warn header="حذف کردن دقیقا به همان تابع نیاز خواهد داشت" +برای حذف یک کنترل‌کننده ما باید دقیقا همان تابعی که به عنوان کنترل‌کننده اختصاص داده بودیم را به تابع بدهیم. -This doesn't work: +کد زیر کار نمی‌کند: ```js no-beautify -elem.addEventListener( "click" , () => alert('Thanks!')); +elem.addEventListener( "click" , () => alert('ممنونم!')); // .... -elem.removeEventListener( "click", () => alert('Thanks!')); +elem.removeEventListener( "click", () => alert('ممنونم!')); ``` -The handler won't be removed, because `removeEventListener` gets another function -- with the same code, but that doesn't matter, as it's a different function object. +کنترل‌کننده حذف نمی‌شود، چونکه `removeEventListener` تابع دیگری دریافت کرده. درست است که کدهای آنها مشابه است، اما مهم نیست، چرا که یک شئ‌تابع متفاوت است. -Here's the right way: +این روش درست است: ```js function handler() { - alert( 'Thanks!' ); + alert( 'ممنون!' ); } input.addEventListener("click", handler); @@ -258,112 +258,112 @@ input.addEventListener("click", handler); input.removeEventListener("click", handler); ``` -Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`. +توجه کنید، اگر که ما تابع کنترل‌کننده‌را درون یک متغیر ذخیره نکنیم، نمی‌توانیم آنرا حذف کنیم. راهی برای "بازخوانی" کنترل‌کننده‌هایی که با `addEventListener` اختصاص داده‌ می‌شوند وجود ندارد. ```` -Multiple calls to `addEventListener` allow to add multiple handlers, like this: +با چند بار صدا زدن `addEventListener` می‌توانیم چندین کنترل‌کننده برای یک رویداد اختصاص دهیم. مانند: ```html run no-beautify - + ``` -As we can see in the example above, we can set handlers *both* using a DOM-property and `addEventListener`. But generally we use only one of these ways. +همانطور که در مثال‌های بالا میبینیم، می‌توانیم کنترل‌کننده‌ها را با *هر دو* روش استفاده از خاصیت DOM و `addEventListener` اختصاص دهیم. اما معمولا از یکی از این دو روش استفاده می‌کنیم. -````warn header="For some events, handlers only work with `addEventListener`" -There exist events that can't be assigned via a DOM-property. Only with `addEventListener`. +````warn header="برای بعضی از رویدادها، کنترل‌کننده‌ها فقط با `addEventListener` کار می‌کنند" +رویدادهایی وجود دارند که نمی‌توان با استفاده از خاصیت DOM برای آنها کنترل‌کننده اختصاص داد. فقط با `addEventListener`. -For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and DOM is built. +برای مثال، رویداد `DOMContentLoaded` که زمانی اتفاق می‌افتد که سند بارگزاری شده و درخت DOM ساخته شده. ```js -// will never run +// هیچ‌وقت اجرا نمی‌شود document.onDOMContentLoaded = function() { - alert("DOM built"); + alert("درخت DOM ساخته شد"); }; ``` ```js -// this way it works +// با این روش کار می‌کند document.addEventListener("DOMContentLoaded", function() { - alert("DOM built"); + alert("درخت DOM ساخته شد"); }); ``` -So `addEventListener` is more universal. Although, such events are an exception rather than the rule. +پس رویداد `addEventListener` کلی‌تر است. هرچند, این چنین رویداد‌هایی بیشتر استثنا هستند تا یک قانون. ```` -## Event object +## شئ رویداد -To properly handle an event we'd want to know more about what's happened. Not just a "click" or a "keydown", but what were the pointer coordinates? Which key was pressed? And so on. +برای اینکه بتوانیم بهتر یک رویداد را کنترل کنیم باید در مورد اینکه چه اتفاقی اتفاده اطلاعات بیشتری داشته باشیم. اینکه فقط "click" یا "keydown" اتفاق افتاده کافی نیست، بلکه مختصات اشاره‌گر موس، اینکه کدام کلید فشرده شده، و ... اهمیت دارد. -When an event happens, the browser creates an *event object*, puts details into it and passes it as an argument to the handler. +زمانی که یک رویداد اتفاق می‌افتد، مرورگر یک *شئ رویداد (event object)* ایجاد می‌کند، جزئیاتی درباره رویداد را درون آن قرار می‌دهد و به عنوان ورودی به کنترل کننده ارسال می‌کند. -Here's an example of getting pointer coordinates from the event object: +این یک نمونه از گرفتن مختصات اشاره‌گر از شئ رویداد است: ```html run - + ``` -Some properties of `event` object: +بعضی از خصوصیات شئ `event`: `event.type` -: Event type, here it's `"click"`. +: نوع رویداد، در اینجا `"click"` است. `event.currentTarget` -: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then we can get the element from `event.currentTarget`. +: عنصری که رویداد را کنترل می‌کند. دقیقا همان `this` است، مگر اینکه کنترل کننده یک تابع پیکانی (arrow function) باشد، یا اینکه `this` به چیز دیگری مقید شده باشد، در این صورت می‌توانیم عنصر را از `event.currentTarget` بگیریم. `event.clientX / event.clientY` -: Window-relative coordinates of the cursor, for pointer events. +: مختصات اشاره‌گر موس نسبت به پنجره برای رویدادهای مربوط به اشاره‌گر موس. -There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when we come to different events in details. +خصوصیات بیشتری نیز وجود دارد. خیلی از آنها به نوع رویداد بستگی دارند: رویدادهای صفحه‌کلید یک مجموعه خصوصیت دارند، رویدادهای اشاره‌گر موس یک مجموعه دیگر. درباره آنها در آینده بیشتر یاد خواهیم گرفت و درباره جزئیات هرکدام بحث می‌کنیم. -````smart header="The event object is also available in HTML handlers" -If we assign a handler in HTML, we can also use the `event` object, like this: +````smart header="شئ رویداد در کنترل‌کننده‌های HTML نیز وجود دارد" +اگر که یک کنترل‌کننده را درون HTML تعریف کنیم، می‌توانیم از شئ `event` استفاده کنیم، مانند: ```html autorun height=60 - + ``` -That's possible because when the browser reads the attribute, it creates a handler like this: `function(event) { alert(event.type) }`. That is: its first argument is called `"event"`, and the body is taken from the attribute. +این امکان‌پذیر است زیرا زمانی که مرورگر صفت را می٬خواند، یک کنترل‌کننده مانند: `function(event) {alert(event.type) }` می‌سازد. که یعنی: اولین آرگومان `"event"` نام دارد و بدنه‌ی تابع از صفت گرفته شده است. ```` -## Object handlers: handleEvent +## اشیاء کنترل‌کننده: handleEvent -We can assign not just a function, but an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called. +نه تنها می‌توانیم تابع را به عنوان کنترل‌کننده‌ها استفاده کنیم، بلکه می‌توانیم با استفاده از `addEventListener` اشياء را نیز به عنوان کنترل‌کننده اختصاص دهیم. زمانی که رویدادی اتفاق می‌افتد خصوصیت `handleEvent` آن شئ صدا زده می‌شود. -For instance: +برای مثال: ```html run - + ``` -As we can see, when `addEventListener` receives an object as the handler, it calls `obj.handleEvent(event)` in case of an event. +همانطور که میبینید زمانی که `addEventListener` یک شئ را به کنترل‌کننده دریافت می‌کند، `obj.handleEvent(event)` را در صورت اتفاق افتادن آن رویداد صدا می‌زند. -We could also use a class for that: +همچنین می‌توانیم از یک کلاس برای این کار استفاده کنیم: ```html run - + ``` -Here the same object handles both events. Please note that we need to explicitly setup the events to listen using `addEventListener`. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events. +اینجا یک شئ هر دو رویداد را کنترل می‌کند. توجه کنید که برای اینکار باید دقیقا از `addEventListener` برای اختصاص کنترل‌کننده استفاده کنیم. `menu` فقط `mousedown` و `mouseup` را کنترل می‌کند و در صورت وقوع رویدادهای دیگر کاری انجام نمی‌دهد. -The method `handleEvent` does not have to do all the job by itself. It can call other event-specific methods instead, like this: +متد `handleEvent` قرار نیست که همه‌ی کارها را خودش انجام دهد. می‌تواند بقیه متد‌های مربوط به رویدادها را صدا بزند. برای مثال: ```html run - + ``` -Now event handlers are clearly separated, that may be easier to support. +اکنون، کنترل‌کننده‌ها به وضوح جدا شده‌اند. در آینده برای ارتقا کد کار آسانتری خواهیم داشت. -## Summary +## خلاصه -There are 3 ways to assign event handlers: +۳ راه برای اختصاص کنترل‌کننده‌ها به رویدادها وجود دارد: -1. HTML attribute: `onclick="..."`. -2. DOM property: `elem.onclick = function`. -3. Methods: `elem.addEventListener(event, handler[, phase])` to add, `removeEventListener` to remove. +1. صفت‌های HTML: `onclick="..."`. +2. خصوصیت DOM: `elem.onclick = function`. +3. متدها: `elem.addEventListener(event, handler[, phase])` برای اضافه کردن, `removeEventListener` برای حذف کردن. -HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there. +صفت‌های HTML کاربرد خیلی کمی دارند، چرا که نوشتن کد جاوااسکریپت وسط یک تگ HTML مقداری عجیب به نظر می‌رسد. همچنین نمی‌شود کد زیادی در آنجا نوشت. -DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing. +صفت‌های DOM برای استفاده مناسب است، اما نمی‌توانیم بیشتر از یک کنترل‌کننده برای یک رویداد خاص استفاده کنیم. در بیشتر اوقات این محدودیت برای ما مهم نیست. -The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transitionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. +اما راه آخر قابل انعطاف‌ترین راه است، اما نوشتن بیشتری نسبت به دو روش قبل دارد. تعداد کمی از رویدادها فقط با این روش کار می‌کنند. مثل `transitionend` و `DOMContentLoaded` (در آینده درباره‌ آن صحبت می‌کنیم). همچنین `addEventListener` اشیا را نیز به عنوان کنترل‌کننده قبول می‌کند. در این حالت متد `handleEvent` در صورت اتفاق افتادن رویداد صدا زده می‌شود. -No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened. +بدون توجه به این که از کدام روش برای اختصاص دادن کنترل‌کننده‌ به رویداد استفاده کنید، همیشه یک شئ رویداد به عنوان اولین ورودی دریافت خواهد کرد. این شئ شامل اطلاعات و جزئیاتی درباره اینکه چه اتفاقی افتاده است. -We'll learn more about events in general and about different types of events in the next chapters. +درباره کلیت رویدادها و تفاوت انواع آنها در بخش‌های بعدی یاد خواهیم گرفت.