همان طور که در آموزش های قبل دیدیم، جاوا اسکریپت یک زبان کد نویسی سمت کاربر یا client-side است به این معنی که در مرورگر کاربران اجرا شده و توسط مفسر آن پردازش می شود، به این دلیل در کنار مزیت هایی که دارد، محدودیت هایی نیز وجود خواهد داشت، از این رو است که در برنامه نویسی وب صرف تسلط بر یک زبان سمت کاربر یا سمت سرور کفایت نمی کند و برنامه نویس موفق کسی است که بتواند ترکیبی از این دو را به کار گیرد، به هر صورت در این آموزش می خواهیم شما را با یکی دیگر از قابلیت های پرکاربرد جاوا اسکریپت آشنا کنیم و آن استفاده از پنجره های pop up یا همان پنجره های کوچک نمایش پیام است که در چهار دسته پنجره های هشدار (alert)، پنجره های تایید (confirm)، پنجره نمایش لینک (window.open) و پنجره های عکس العملی (prompt) دسته بندی می شوند.
پنجره pop up چیست؟
قبل از هر چیز باید ببینیم که پنجره pop up چیست و چه کاربردی دارد؟
pop up در برنامه نویسی وب به پنجره های کوچکی گفته می شود که به صورت خودکار یا با دخالت کاربر در مرورگر نمایش داده می شوند، به طور مثال ممکن است تبلیغات یا پیام های خوش آمدگویی و … را در صفحات وب دیده باشید، اکثر آنها بر مبنای جاوا اسکریپت هستند، یعنی وقتی که صفحه بارگذاری می شود کد جاوا اسکریپت اجرا شده و پنجره به نمایش در می آید یا ممکن است این اتفاق با کلیک کاربر یا بردن ماوس روی یک عنصر مشخص رخ دهد، پنجره های pop up در دسته GUI ها یا با واسط کاربری گرافیکی (Graphical User Interface) دسته بندی می شوند، بدین معنی که قابلیت تعامل با رفتارهای کاربر را نیز دارا می باشند.
دستور alert در جاوا اسکریپت
اولین دستوری که جزء خانواده pop up ها است، alert نام دارد، این دستور برای نمایش یک پیام در مرورگر به کار می رود و معمولا به همراه پیام، یک دکمه نیز جهت تایید به کاربر نشان داده می شود، از این گذشته عمده کاربرد alert برای برنامه نویسان وب است که می توانند به کمک آن خط به خط خروجی کدهای خود را خطایابی کنند، به طور مثال از یک آرایه یا متغیر با alert خروجی گرفته و از چند و چون و روند کارکرد کد خود مطلع شوند.
استفاده از این دستور بسیار ساده است که در زیر ملاحظه می کنید.
<script type="text/javascript">
alert("سلام! به آموزش جاوا اسکریپت خوش آمدید");
</script>
یک مثال کاربردی با alert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> دستور alert در جاوا اسکریپت</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function getuser(name){
alert(" سلام " + name + "!\n به آموزش جاوا اسکریپت خوش آمدید ");
}
</script>
<label for="name">نام شما:</label>
<input id="name" name="name" type="text" />
<input type="button" value="کلیک کنید" onclick="getuser(document.getElementById('name').value)" />
</body>
</html>
برای دیدن پیش نمایش مثال ها، به انتهای این مطلب مراجعه کنید.
توضیح:
– در کد بالا، یک تابع ساده نوشته ایم که با رویداد onclick مقادیر فیلد name را به عنوان آرگومان دریافت می کند و خروجی آن یک پیام pop up از نوع alert خواهد بود.
– برای بررسی این تابع کافی است نام یا عبارت مورد نظر خود را در فیلد مربوطه وارد کرده و بر روی دکمه کلیک کنید.
– برای ایجاد خطوط جدید در هنگام نمایش پیام از علامت بک اسلش و حرف n استفاده می شود (n\).
دستور confirm در جاوا اسکریپت
پس از آشنایی با alert، نوبت به معرفی دستور دیگری از این خانواده است که confirm نام دارد، دستور confirm که به معنی تایید کردن و تصدیق کردن است، به فراخور نام خود برای این به کار می رود که کاربر انجام یا عدم انجام عملیاتی را تصدیق کند، بعد از اجرای این دستور در پنجره ای به صورت pop up به کاربر یک هشدار نشان داده می شود، اگر او دکمه ok را انتخاب کند، مقادیر 1 یا true برگردانده می شود و اگر دکمه cancel را کلیک کند، عدد صفر یا false بازگشت داده شده و عملیات لغو می شود، این قابلیت این امکان را به ما می دهد که در برنامه های خود در وب، ایده های خوبی پیاده کنیم، به طور مثال اگر سیستمی نوشته اید که در آن مدیر پیام هایی از کاربران دریافت می کند و حال می خواهد که پیام های ناخواسته را حذف کند، بهتر است برای جلوگیری از بروز اشتباهات احتمالی، از چنین دستوراتی برای تایید عملیات استفاده کنید، البته این روش تنها یک نوع از اطمینان سنجی است و بسته به ضرورت و هدف شما ممکن است از اطمینان سنجی سمت سرور نیز استفاده شود.
در تابع زیر به صورت کاربردی با دستور confirm آشنا می شویم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>دستور confirm در جاوا اسکریپت</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function confirmed(){
var check = confirm("آیا حذف این پیام را تایید می کنید؟");
if (check == 1){
document.getElementById('text').innerHTML = '';
alert("پیام حذف شد");
}
else{
document.getElementById('text').innerHTML = 'در صورت تایید، این پیام حذف خواهد شد';
alert("حذف پیام لغو شد");
}
}
</script>
<div id="text">در صورت تایید، این پیام حذف خواهد شد</div>
<input type="button" value="تایید" onclick="confirmed()" />
</body>
</html>
توضیح:
– در کد بالا یک تابع ساده با استفاده از دستور confirm نوشته ایم که با رویداد onclick اجرا می شود.
– سپس وقتی عملیات تابع به دستور confirm می رسد، یک پنجره به کاربر نشان داده شده و از او می خواهد که ادامه کار را تایید کند، اگر کاربر ok را انتخاب کند، مقادیر 1 یا true بازگردانده می شود و ادامه تابع اجرا می شود، همین طور اگر cancel را انتخاب کند، مقادیر صفر یا false بازگردانده می شود و قسمت else اجرا می شود.
– در این تابع به صورت فرضی از document.getElementById و innerHTML برای تغییر مقادیر بلاک text استفاده کرده ایم که صرفا جهت مثال و نمونه است، با آَشنایی با روند کار دستور confirm می توانید موارد مورد نظر خود را ایجاد کنید.
مثال کاربردی با دستور confirm
در مثال زیر با استفاده از دستور confirm از مطمئن بودن کاربر از ارسال یک فرم html اطمینان حاصل می کنیم، در اینجا تابع جاوا اسکریپتی ما در رویداد onsubmit یعنی هنگام ارسال فرم اجرا می شود.
<form action="#" method="post" onsubmit="return confirm('فرم ارسال شود؟');">
<input type="submit" value="ارسال" />
</form>
همان طور که ملاحظه می کنید، استفاده از جاوا اسکریپت به صورت خطی یا inline نیز ممکن است که در اینجا از این روش استفاده کرده ایم.
دستور window.open در جاوا اسکریپت
یکی دیگر از توابع هم خانواده دستورات pop up در جاوا اسکریپت، تابع و در واقع متد window.open است که می توان از آن برای فراخوانی یک لینک در صفحه ای جدید (یا همان صفحه) استفاده کرد، به فرض قسمت نظرات سایت یا وبلاگ را در یک پنجره جدید و کوچک نمایش داد، البته برخی مواقع از این امکان استفاده های نادرست نیز می شود، به طور مثال نمایش پنجره های تبلیغاتی ناخواسته به مخاطبان که عمدتا باعث به زحمت افتادن آنها می شود (هر چند مرورگرها معمولا اجرای خودکار پنجره های pop up با متد window.open را مسدود می کنند، اما معمولا نمایش پنجره با کلیک کاربر مجاز است)، به مثال زیر توجه کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> کاربرد pop up در جاوا اسکریپت</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function WinOpen(){
var url = "http://sefaresh.net";
window.open(url, 'سفارش دات نت| آموزش برنامه نویسی و مهارتهای وب', "height=600, width=800, resizable=1, left=0, top=0, status=1, scrollbars=yes");
}
</script>
<input type="button" value="پنجره جدید" onclick="WinOpen()" />
</body>
</html>
توضیح:
دستور window.open چند بخش اصلی و در واقع چند آرگومان اصلی دارد:
– آرگومان اول: آدرس لینک.
– آرگومان دوم: عنوان لینک یا تعیین نحوه باز شدن پنجره.
– آرگومان سوم: تنظیمات سفارشی.
– آرگومان چهارم: قابلیت replace جهت ذخیره آدرس جدید به صورت جداگانه یا دوباره نویسی آدرس جدید با آدرس صفحه فعلی در تاریخچه مرورگر (قابلیتی کاربردی نیست).
توضیح:
در قسمت اول دستور، آدرس url صفحه مورد نظر را وارد می کنیم، به فرض:
window.open('http://webgoo.ir');
برای آرگومان دوم می توان نام پنجره جدید یا نحوه باز شدن لینک را مشخص کرد (با یکی از مقادیر: blank_ برای نمایش در پنجره جدید، parent_ برای نمایش در فرم والد، self_ برای نمایش در همان پنجره، top_ پنجره جدید جایگزین تمام فرم ها می شود)، به فرض:
window.open('http://sefaresh.net', 'سفارش دات نت');
برای آرگومان سوم می توانیم از تنظیمات زیادی استفاده کنیم، برای جداسازی آنها از یک کاما (علامت ,) استفاده می کنیم، به فرض:
window.open('http://sefaresh.net', 'سفارش دات نت', 'width=800, height=600, resizable=1, left=0, top=0, location=1, menubar=1, scrollbars=1');
هر کدام از موارد تنظیم شده برای آرگومان سوم معرف یک امکان ویژه است، به فرض resizable این امکان را به کاربر می دهد تا اندازه پنجره جدید را تغییر دهد (با مقادیر 1 یا yes) یا این امکان از او سلب شود (با مقادیر 0 یا no) ، لیست تنظیمات پرکاربرد:
height: تعیین ارتفاع پنجره به پیکسل – مقدار پیش فرض: 100.
width: تعیین عرض پنجره به پیکسل – مقدار پیش فرض: 100.
left: تعیین میزان فاصله به پیکسل از سمت چپ مرورگر.
top: تعیین میزان فاصله به پیکسل از سمت بالای مرورگر.
location: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار آدرس – مقدار پیش فرض: yes
menubar: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار منوی مرورگر – مقدار پیش فرض: yes
resizable: قابل تغییر بودن (با مقادیر 1 یا yes) یا غیر قابل تغییر بودن (با مقادیر 0 یا no) اندازه پنجره – مقدار پیش فرض: yes
scrollbars: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار اسکرول – مقدار پیش فرض: yes
status: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار وضعیت – مقدار پیش فرض: yes
titlebar: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار عنوان – مقدار پیش فرض: yes
toolbar: نمایش (با مقادیر 1 یا yes) یا عدم نمایش (با مقادیر 0 یا no) نوار ابزار – مقدار پیش فرض: yes
آرگومان چهارم هم (با مقادیر true یا false) مشخص کننده حالت ایجاد تاریخچه جدید برای لینک فعلی (مقدار false) یا دوباره نویسی آدرس لینک جدید به جای آدرس لینک فعلی (مقدار true) در تاریخچه مرورگر را مشخص می کند.
دستور prompt در جاوا اسکریپت
آخرین دستوری که در این مطلب قصد پرداختن به آن را داریم، prompt یا عکس العمل نام دارد، البته این دستور یکی از قدیمی ترین دستورات جاوا اسکریپت است که از سال های دور (از سال 1990) تا کنون بوده و امروزه به ندرت در صفحات وب کاربرد دارد.
کارکرد این دستور به این نحو است که با اجرا شدن آن، یک پنجره به کاربر نشان داده می شود که یک سوال و یک فیلد متنی در آن وجود دارد، سپس عبارتی که کاربر در فیلد مورد نظر وارد می کند در ادامه تابع قابل استفاده است، در گذسته بیشتر و امروزه کم تر دیده ایم برخی صفحات شخصی یا وبلاگ ها را که در ابتدای ورود، نام کاربر را درخواست کرده و سپس به او یک پیام خوش آمدگویی نشان می دهند، این نوع کارها با prompt در جاوا اسکریپت انجام می شود، به مثال زیر توجه کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> دستور prompt در جاوا اسکریپت</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<script type="text/javascript">
function welcome(){
var name = prompt("لطفا نام خود را وارد کنید","ناشناس");
if (name != null && name != ''){
alert(" سلام " + name + "! به آموزش جاوا اسکریپت خوش آمدید ");
}
}
</script>
<input type="button" value="کلیک کنید" onclick="welcome()" />
</body>
</html>
توضیح:
– با اجرا شدن تابع فرضی welcome با رویداد onclick، دستور prompt اجرا شده و فیلد به کاربر نشان داده می شود.
– اگر دقت کنید عبارت “ناشناس” در کد بالا به عنوان مقادیر پیش فرض در فیلد مربوطه وجود دارد، این مقدار می تواند به صورت دلخواه یا خالی تنظیم شود.
– واضح است که به جای رویداد onclick اگر برای تگ body و در رویداد onload از prompt استفاده کنیم، با بارگذاری صفحه، پنجره به صورت خودکار نشان داده می شود.
مثال
در زیر می توانید کد مثال ها را ملاحظه و بررسی کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> کاربرد pop up در جاوا اسکریپت</title>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
دستور alert:<br /><br />
<script type="text/javascript">
//<![CDATA[
function getuser(name){
alert(" سلام " + name + "!\n به آموزش جاوا اسکریپت خوش آمدید ");
}
//]]>
</script>
<label for="name">نام شما:</label>
<input id="name" name="name" type="text" />
<input type="button" value="کلیک کنید" onclick="getuser(document.getElementById('name').value)" />
<hr />
دستور confirm:<br /><br />
<script type="text/javascript">
//<![CDATA[
function confirmed(){
var check = confirm("آیا حذف این پیام را تایید می کنید؟");
if (check == 1){
document.getElementById('text').innerHTML = '';
alert("پیام حذف شد");
}
else{
document.getElementById('text').innerHTML = 'در صورت تایید، این پیام حذف خواهد شد';
alert("حذف پیام لغو شد");
}
}
//]]>
</script>
<div id="text">در صورت تایید، این پیام حذف خواهد شد</div>
<input type="button" value="تایید" onclick="confirmed()" />
<hr />
دستور window.open:<br /><br />
<script type="text/javascript">
//<![CDATA[
function WinOpen(){
var url = "http://sefaresh.net";
window.open(url, ' آموزش برنامه نویسی و مهارتهای وب', "height=600, width=800, resizable=1, left=0, top=0, status=1, scrollbars=yes");
}
//]]>
</script>
<input type="button" value="پنجره جدید" onclick="WinOpen()" />
<hr />
دستور prompt:<br /><br />
<script type="text/javascript">
//<![CDATA[
function welcome(){
var name = prompt("لطفا نام خود را وارد کنید","ناشناس");
if (name != null && name != ''){
alert(" سلام " + name + "! به آموزش جاوا اسکریپت خوش آمدید ");
}
}
//]]>
</script>
<input type="button" value="کلیک کنید" onclick="welcome()" />
</body>
</html>
بدون دیدگاه