From b5a1d7e1a991751137582fff52274a2e88317fad Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 21 Aug 2023 14:39:12 +0330 Subject: [PATCH 1/9] line 1 --- 2-ui/4-forms-controls/4-forms-submit/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index c00c559c0..1d0957da2 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,4 +1,4 @@ -# Forms: event and method submit +# Forms: event و method submit The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript. From e76aa9e58e1f0c8ae03758e7d5247497f6557c37 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 21 Aug 2023 17:47:24 +0330 Subject: [PATCH 2/9] done article.md --- .../4-forms-submit/article.md | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index 1d0957da2..ba90b9a13 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,42 +1,42 @@ # Forms: event و method submit -The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript. +معمولا `submit` event زمانی فعال می‌شود که یک فرم submit می‌شود. معمولا برای اعتبارسنجی فرم قبل از اینکه به سمت سرور فرستاده شود یا لغو و پردازش آن در JavaScript استفاده می‌شود. -The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server. +متد `form.submit()` اجازه می‌دهد که فرستادن فرم از JavaScript آغاز شود. ما می‌توانیم از آن استفاده کنیم که به صورت پویا فرم‌های خودمان را ایجاد کنیم و به سرور بفرستیم. -Let's see more details of them. +بیایید جزئیات بیشتری از آن‌ها ببینیم. ## Event: submit -There are two main ways to submit a form: +دو راه اصلی برای submit کردن یک فرم وجود دارد. -1. The first -- to click `` or ``. -2. The second -- press `key:Enter` on an input field. +1. اولی -- کلیک کردن `` یا ``. +2. دومی -- فشار دادن `key:Enter` روی یک input field. -Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server. +هر دو کار باعث `submit` event روی فرم می‌شوند. Handler می‌تواند داده را چک کند، و اگر خطاییی باشد، آن‌ها را نشان دهد و `event.preventDefault()` را فراخوانی کند، آنگاه فرم به سمت سرور ارسال نخواهد شد. -In the form below: -1. Go into the text field and press `key:Enter`. -2. Click ``. +در فرم زیر: +1. به text field بعدی بروید و `key:Enter` را فشار دهید. +2. روی `` کلیک کنید. -Both actions show `alert` and the form is not sent anywhere due to `return false`: +هر دو فعالیت `alert` را نمایش می‌دهند و فرم به دلیل `return false` به هیچ جا فرستاده نمی‌شود: ```html autorun height=60 no-beautify
- First: Enter in the input field
- Second: Click "submit": + را بزنید enter ،input field در
+ را کلیک کنید "submit" دوم:
``` -````smart header="Relation between `submit` and `click`" -When a form is sent using `key:Enter` on an input field, a `click` event triggers on the ``. +````smart header="`click` و `submit` ارتباط میان" +.فعال می‌شود `` روی `click` event فرستاده می‌شود یک `key:Enter` با input field وقتی که یک فرم در یک -That's rather funny, because there was no click at all. +این نسبتا خنده‌دار است زیرا هیچ کلیکی اصلا وجود نداشته است. -Here's the demo: +در اینجا نسخه‌ی نمایشی هست: ```html autorun height=60
- +
``` @@ -45,11 +45,12 @@ Here's the demo: ## Method: submit -To submit a form to the server manually, we can call `form.submit()`. +برای اینکه یک فرم را به صورت دستی submit کنیم، می‌توانیم `form.submit()` را فراخوانی کنیم. -Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing. +آنگاه `submit` event ایجاد نمی‌شود. تصور می‌شود که اگر برنامه‌نویس `form.submit()` را فراخونی کند، آنگاه script خودش تمام پردازش‌های مربوطه را انجام می‌دهد. Sometimes that's used to manually create and send a form, like this: +گاهی اوقات معمول ایت است که یک فرم را با این روش ایجاد و ارسال کنند. ```js run let form = document.createElement('form'); @@ -58,7 +59,7 @@ form.method = 'GET'; form.innerHTML = ''; -// the form must be in the document to submit it +// شود submit باشد تا document فرم باید در document.body.append(form); form.submit(); From d74e530381b7967f7e425b697b8e040d24930611 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Tue, 22 Aug 2023 10:39:04 +0330 Subject: [PATCH 3/9] line 11 --- 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index bf6841c92..bd5f1eba2 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -4,10 +4,11 @@ importance: 5 # Modal form -Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`. +یک function `showPrompt(html, callback)` ایجاد کنید که فرمی با پیام `html`، یک input field و دکمه‌های `OK/CANCEL` داشته باشد. -- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value they entered. +- یک کاربر باید چیزی را در tex field تایپ کند و `key:Enter` را فشار دهد، آنگاه `callback(value)` با مقداری که وارد شده است فراخوانی می‌شود. - Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called. +- در غیر این صورت اگر کاربر `key:Esc` یا CANCEL را فشار دهد، `callback(null)` فراخوانی می‌شود. In both cases that ends the input process and removes the form. From b0b7eefce9d0694de47746bfb051cead753ac89f Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 23 Aug 2023 15:02:01 +0330 Subject: [PATCH 4/9] task.md done --- .../4-forms-submit/1-modal-dialog/task.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index bd5f1eba2..6cc6aa179 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -7,19 +7,18 @@ importance: 5 یک function `showPrompt(html, callback)` ایجاد کنید که فرمی با پیام `html`، یک input field و دکمه‌های `OK/CANCEL` داشته باشد. - یک کاربر باید چیزی را در tex field تایپ کند و `key:Enter` را فشار دهد، آنگاه `callback(value)` با مقداری که وارد شده است فراخوانی می‌شود. -- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called. - در غیر این صورت اگر کاربر `key:Esc` یا CANCEL را فشار دهد، `callback(null)` فراخوانی می‌شود. -In both cases that ends the input process and removes the form. +در هر دو صورت،‌این فرآیند input را تمام میکند و فرم را پاک میکند. -Requirements: +ملزومات: -- The form should be in the center of the window. -- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it. -- When the form is shown, the focus should be inside the `` for the user. -- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements. +- فرم باید در وسط پنجره باشد. +- فرم یک *modal* است. به عبارت دیگر، تا زمانی که کاربر آن را نبندد، هیچ تعاملی با بقیه‌ی صفحه مجاز نیست. +- وقتی فرم نمایش داده می‌شود، focus برای کاربر باید درون `` باشد. +- کلیدهای `key:Tab`/`key:Shift+Tab` باید فوکوس را بین form fieldها جابه‌جا کنند و اجازه ندهند که به عناصر دیگر صفحه برود. -Usage example: +مثال از استفاده: ```js showPrompt("Enter something
...smart :)", function(value) { @@ -27,8 +26,8 @@ showPrompt("Enter something
...smart :)", function(value) { }); ``` -A demo in the iframe: +نسخهی نمایشی در iframe: [iframe src="solution" height=160 border=1] -P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal. +پی‌نوشت: کد source documentای که ارائه شده HTML/CSS برای فرم با fixed positioning را دارد، اما این بر عهده‌ی شماست که آن را به modal تبدیل کنید. From 844a6489c774ddec3df373e07253e61ecd46e5b2 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 23 Aug 2023 15:02:17 +0330 Subject: [PATCH 5/9] Update task.md --- 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index 6cc6aa179..0fb6a26ef 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -30,4 +30,4 @@ showPrompt("Enter something
...smart :)", function(value) { [iframe src="solution" height=160 border=1] -پی‌نوشت: کد source documentای که ارائه شده HTML/CSS برای فرم با fixed positioning را دارد، اما این بر عهده‌ی شماست که آن را به modal تبدیل کنید. +پی‌نوشت: source documentای که ارائه شده HTML/CSS برای فرم با fixed positioning را دارد، اما این بر عهده‌ی شماست که آن را به modal تبدیل کنید. From 0ef2daa8b754b69b4c00b3e1bfcb9393272781a7 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 23 Aug 2023 15:07:18 +0330 Subject: [PATCH 6/9] solution.md done --- .../4-forms-submit/1-modal-dialog/solution.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md index 781ce5d58..9b85e1d1e 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md @@ -1,4 +1,4 @@ -A modal window can be implemented using a half-transparent `
` that covers the whole window, like this: +یک modal window می‌تواند بااستفاده از یک `
` نیمه‌شفاف که تمام پنچره را می‌پوشاند پیاده‌سازی شود،‌ مثل این: ```css #cover-div { @@ -13,8 +13,8 @@ A modal window can be implemented using a half-transparent `
} ``` -Because the `
` covers everything, it gets all clicks, not the page below it. +از آنجایی که `
` همه چیز را می‌پوشاند،آن تمام کلیک‌ها را می‌گیرد،نه صفحه‌ی زیر آن. -Also we can prevent page scroll by setting `body.style.overflowY='hidden'`. +همچنین با `body.style.overflowY='hidden'` می‌توانیم از scroll کردن صفحه جلوگیری کنیم. -The form should be not in the `
`, but next to it, because we don't want it to have `opacity`. +فرم نباید در `
` باشد، بلکه باید کنار آن باشد، زیرا نمی‌خواهیم که `opacity` داشته باشد. From 2e54a1f5ddb91e911e015290ddf0ffb684dc19c6 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 24 Aug 2023 19:03:45 +0330 Subject: [PATCH 7/9] Update article.md --- 2-ui/4-forms-controls/4-forms-submit/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md index ba90b9a13..5149163bf 100644 --- a/2-ui/4-forms-controls/4-forms-submit/article.md +++ b/2-ui/4-forms-controls/4-forms-submit/article.md @@ -1,4 +1,4 @@ -# Forms: event و method submit +# فرم‌ها: event و method submit معمولا `submit` event زمانی فعال می‌شود که یک فرم submit می‌شود. معمولا برای اعتبارسنجی فرم قبل از اینکه به سمت سرور فرستاده شود یا لغو و پردازش آن در JavaScript استفاده می‌شود. From 3afecd86aba549fd13dd734a5637d2acedc83ea4 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 24 Aug 2023 19:05:25 +0330 Subject: [PATCH 8/9] Update task.md --- 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md index 0fb6a26ef..7f6f129df 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md @@ -9,7 +9,7 @@ importance: 5 - یک کاربر باید چیزی را در tex field تایپ کند و `key:Enter` را فشار دهد، آنگاه `callback(value)` با مقداری که وارد شده است فراخوانی می‌شود. - در غیر این صورت اگر کاربر `key:Esc` یا CANCEL را فشار دهد، `callback(null)` فراخوانی می‌شود. -در هر دو صورت،‌این فرآیند input را تمام میکند و فرم را پاک میکند. +در هر دو صورت،‌ این فرآیند input را تمام میکند و فرم را پاک میکند. ملزومات: @@ -26,7 +26,7 @@ showPrompt("Enter something
...smart :)", function(value) { }); ``` -نسخهی نمایشی در iframe: +نسخه‌ای نمایشی در iframe: [iframe src="solution" height=160 border=1] From cbb5115a9d6928e26cc58cbcbb83e2a2ada1ee06 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 24 Aug 2023 19:06:08 +0330 Subject: [PATCH 9/9] Update solution.md --- 2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md index 9b85e1d1e..b9d877cb6 100644 --- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md +++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md @@ -13,7 +13,7 @@ } ``` -از آنجایی که `
` همه چیز را می‌پوشاند،آن تمام کلیک‌ها را می‌گیرد،نه صفحه‌ی زیر آن. +از آنجایی که `
` همه چیز را می‌پوشاند، آن تمام کلیک‌ها را می‌گیرد،نه صفحه‌ی زیر آن. همچنین با `body.style.overflowY='hidden'` می‌توانیم از scroll کردن صفحه جلوگیری کنیم.