آموزش کادر گفتگو در جاوا اسکریپت

4 سال پیش

امتیاز دهید post

آموزش کادر گفتگو در جاوا اسکریپت

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

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

کادر گفتگوی هشدار

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

با این وجود ، یک جعبه هشدار هنوز هم می تواند برای پیام های دوستانه استفاده شود. جعبه هشدار فقط یک دکمه “OK” را برای انتخاب و ادامه کار ارائه می دهد.

مثال

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //--&gt;
      &lt;/script&gt;     
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Click the following button to see the result: &lt;/p&gt;      
      &lt;form&gt;
         &lt;input type = "button" value = "Click Me" onclick = "Warn();" /&gt;
      &lt;/form&gt;     
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

function Warn() {

alert ("This is a warning message!");

document.write ("This is a warning message!");

}

//-->

</script>

</head>

<body>

<p>Click the following button to see the result: </p>

<form>

</form>

</body>

</html>

کادر گفتگوی تأیید

از کادر گفتگوی تأیید بیشتر برای گرفتن رضایت کاربر از هر گزینه استفاده می شود. یک کادر گفتگو با دو دکمه OK و Cancel را نمایش می دهد.

اگر کاربر روی دکمه OK کلیک کند، متد پنجره ()confirm درست برمی گردد. اگر کاربر روی دکمه Cancel کلیک کند، سپس ()false ،confirm را برمی گردد. می توانید از کادر گفتگوی تأیید به شرح زیر استفاده کنید.

مثال

&lt;html&gt;
   &lt;head&gt;   
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
         //--&gt;
      &lt;/script&gt;     
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Click the following button to see the result: &lt;/p&gt;      
      &lt;form&gt;
         &lt;input type = "button" value = "Click Me" onclick = "getConfirmation();" /&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

function getConfirmation() {

var retVal = confirm("Do you want to continue ?");

if( retVal == true ) {

document.write ("User wants to continue!");

return true;

} else {

document.write ("User does not want to continue!");

return false;

}

//-->

</script>

</head>

<body>

<p>Click the following button to see the result: </p>

<form>

</form>

</body>

</html>

کادر گفتگوی سریع

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

این کادر محاوره ای با استفاده از روشی به نام ()prompt که دو پارامتر طول می کشد نمایش داده می شود: (i) برچسبی که می خواهید در کادر متن نمایش داده شود و (ii) یک رشته پیش فرض برای نمایش در کادر متن.

این کادر گفتگو دارای دو دکمه OK و Cancel است. اگر کاربر روی دکمه تأیید کلیک کند ، با دستور متد ()window مقدار وارد شده از جعبه متن باز می گردد. اگر کاربر دکمه Cancel را کلیک کند ، خط پنجره روش () null برمی گردد.

مثال

مثال زیر نحوه استفاده از جعبه گفتگوی سریع را نشان می دهد –

&lt;html&gt;
   &lt;head&gt;     
      &lt;script type = "text/javascript"&gt;
         &lt;!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //--&gt;
      &lt;/script&gt;      
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Click the following button to see the result: &lt;/p&gt;      
      &lt;form&gt;
         &lt;input type = "button" value = "Click Me" onclick = "getValue();" /&gt;
      &lt;/form&gt;      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<!--

function getValue() {

var retVal = prompt("Enter your name : ", "your name here");

document.write("You have entered : " + retVal);

}

//-->

</script>

</head>

<body>

<p>Click the following button to see the result: </p>

<form>

</form>

</body>

</html>

منبع.

لیست جلسات قبل آموزش جاوا اسکریپت

امتیاز دهید post

نویسنده مطلب saber

آموزش کادر گفتگو در جاوا اسکریپت

آموزش کادر گفتگو در جاوا اسکریپت

کادر گفتگوی هشدار

مثال

کادر گفتگوی تأیید

مثال

کادر گفتگوی سریع

مثال

لیست جلسات قبل آموزش جاوا اسکریپت

دیدگاه شما

بدون دیدگاه

آموزش کادر گفتگو در جاوا اسکریپت

کادر گفتگوی هشدار

مثال

کادر گفتگوی تأیید

مثال

کادر گفتگوی سریع

مثال

لیست جلسات قبل آموزش جاوا اسکریپت

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه