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

popup چیست؟

در زبان جاوا اسکریپت سه نوع popup داریم: Alert box و Confirm box و Prompt box. این popup ها کادر هایی هستند روی صفحه ظاهر می شوند و چیزی از کاربر می خواهند، یا چیزی به او می گویند و ... .

نوع اول: Alert Box

زمانی از این مورد استفاده می کنیم که می خواهیم مطمئن شویم کاربر ما حتما اطلاعات خاصی را میبیند و از کنارش رد نمی شود. زمانی که یک alert box برای کاربر نمایش داده شود تا زمانی که روی OK کلیک نکند نمی تواند با سایت ارتباط داشته باشد. ساختار کلی Alert Box ها به این شکل است:

window.alert("sometext");

البته نیازی به نوشتن ()window.alert به صورت کامل نیست و می توانید قسمت Window را حذف کنید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">اینجا کلیک کنید</button>

<script>
function myFunction() {
  alert("سلام! من یک alert box هستم!");
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نوع دوم: Confirm Box

Confirm Box ها معمولا زمانی استفاده می شوند که شما می خواهید کاربر چیزی را تایید یا قبول کند. Confirm Box ها دو دکمه ی OK و Cancel دارند و کاربر حتما باید یکی از آن ها را انتخاب کند به طوری که اگر OK را انتخاب کند مقدار true و اگر Cancel را انتخاب کند مقدار false را برمیگرداند. ساختار کلی این دستور به این شکل است:

window.confirm("sometext");

دستور ()window.confirm نیز می تواند به صورت خلاصه نوشته شود. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body dir='rtl' align='center'>

<h2>JavaScript Confirm Box</h2>


<button onclick="myFunction()">روی این دکمه کلیک کنید</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("یک گزینه را انتخاب کنید")) {
    txt = "شما OK را انتخاب کردید!";
  } else {
    txt = "شما Cancel را انتخاب کردید!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نوع سوم: Prompt Box

نوع آخر popup ها در جاوا اسکریپت Prompt Box ها هستند و زمانی استفاده می شوند که می خواهید کاربر قبل از ورود به وب سایت شما مقدار خاصی را وارد کند (به طور مثال به سوالی جواب بدهد و ...). در Prompt Box ها یک فیلد برای ورود اطلاعات و دو دکمه ی OK و Cancel وجود دارد و کاربر حتما باید یکی از آن ها را انتخاب کند به طوری که اگر مقداری وارد کرده باشد و سپس OK را بزند آن مقدار برگردانده می شود و اگر Cancel را بزند مقدار null برگردانده می شود. این دستور دارای ساختار زیر است:

window.prompt("sometext","defaultText");

همچنان می توانید قسمت window را از دستور حذف کنید. مثال:

<!DOCTYPE html>
<html>
<body dir='rtl' align='center'>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  var person = prompt("لطفا نام خود را وارد کنید:", "هری پاتر");
  if (person == null || person == "") {
    txt = "کاربر عملیات را لغو کرد.";
  } else {
    txt = "سلام " + person + "! حالت چطوره؟";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: اگر در این popup ها نیاز به اضافه کردن line break (کاراکتر رفتن به خط بعد - معادل اینتر) داشتید می توانید در قسمت مورد نظرتان n\ را اضافه کنید. مثال:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>
<p>Line-breaks in a popup box.</p>

<button onclick="alert('سلام\nحالت چطوره؟')">اینجا را کلیک کنید</button>

</body>
</html>

مشاهده ی خروجی در JSBin

ممکن است در کد های فارسی کمی به هم ریختگی ظاهری وجود داشته باشد بنابراین نگاهی به مثال انگلیسی نیز بیندازید:

<button onclick="alert('Hello\nHow are you?')">Try it</button>

رویدادهای زمان بندی

شیء window به ما اجازه می دهد تا کد ها را در بازه های زمانی مختلف و مشخص اجرا کنیم. به این بازه های زمانی رویداد های زمان بندی می گوییم. دو متد اصلی آن نیز (setTimeout(function, milliseconds و (setInterval(function, milliseconds هستند که هر دو متعلق به شیء Window از DOM می باشند.

متد setTimeout

متد (setTimeout(function, milliseconds دو پارامتر می گیرد که اولی یک تابع است و دومی زمان به میلی ثانیه است که بازه ی زمانی برای اجرای تابع را مشخص می کند. به طور مثال به کد زیر گفته ایم که پس از 3 ثانیه تابع را اجرا کند:

<!DOCTYPE html>
<html>
<body>

<p>پس از کلیک روی دکمه ی زیر بعد از 3 ثانیه یک پیام برایتان به نمایش در می آید</p>

<button onclick="setTimeout(myFunction, 3000);">کلیک کنید</button>

<script>
function myFunction() {
  alert('سلام');
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

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

سوال: چطور اجرای این کد را متوقف کنیم؟

پاسخ: با استفاده از تابع ()clearTimeout می توانید این کار را انجام دهید. این تابع ساختار زیر را دارد:

window.clearTimeout(timeoutVariable)

طرز کار این تابع به این صورت است که متغیر برگشتی از setTimeout را دریافت می کند:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

تا زمانی که تابع درون setTimeout اجرا نشده باشد می توانید با دستور ()clearTimeout آن را متوقف کنید:

<!DOCTYPE html>
<html>
<body dir='rtl' align='center'>

<p>روی دکمه ی "کلیک کنید" کلیک کنید و 3 ثانیه صبر کنید. یک پیام به شما نمایش داده می شود.</p>
<p>روی دکمه ی "توقف" کلیک کنید تا جلوی اجرای آن را بگیرید.</p>
<p>برای متوقف کردن آن باید قبل از اتمام 3 ثانیه روی این دکمه کلیک کنید.</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">کلیک کنید</button>

<button onclick="clearTimeout(myVar)">توقف</button>

<script>
function myFunction() {
  alert("سلام کاربر گرامی");
}
</script>
</body>
</html>

مشاهده ی خروجی در JSBin

متد setInterval

متد ()setInterval دو آرگومان میگیرد که اولی یک تابع است و دومی زمان (در واحد میلی ثانیه). کار این متد این است که تابع مورد نظر ما را هر فلان میلی ثانیه تکرار می کند. بنابراین تفاوت آن با setTimeout در این است که تابع را تا بی نهایت بار تکرار می کند. ساختار این متد به شکل زیر است:

window.setInterval(function, milliseconds);

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<p dir='rtl'>هنگامی که روی دکمه ی زیر کلیک کنید، پیام "سلام به شما" هر 3 ثانیه یک بار برایتان نمایش داده می شود.</p>

<button onclick="myFunction()">Try it</button>

<script>
var myVar;

function myFunction() {
  myVar = setInterval(alertFunc, 3000);
}

function alertFunc() {
  alert("سلام به شما");
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

هر یک ثانیه معادل با هزار میلی ثانیه است. ما در کد بالا گفته ایم که هر 1000 میلی ثانیه، ساعت را از کاربر بگیر و بروزرسانی کن بنابراین نتیجه، یک ساعت دیجیتال خواهد بود که مرتب آپدیت می شود.

سوال: چطور اجرای این کد را متوقف کنیم؟

پاسخ: باز هم با استفاده از تابع ()clearTimeout می توانید این کار را انجام دهید. به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

شما هر زمان که روی دکمه ی stop time کلیک کنید، بروزرسانی ساعت دیجیتال ما متوقف می شود.

امیدوارم از این قسمت لذت برده باشید.