حالت موضوعی | حالت خطی

**Ghoghnus**

آموزش این دوره تا به اینجا مربوط به مفاهیم پایه‌ای و شیوه برنامه نویسی در جاوا اسکریپت بوده است. در این درس می‌خواهیم به یک قابلیت دیگر جاوا اسکریپت یعنی ارتباط آن با برچسب‌های اچ تی‌ ام ال بپردازیم.

اچ تی‌ ام ال و جاوا اسکریپت (HTML DOM) Document Object Model
DOM در اصل یک استاندارد برای دسترسی به سندهای اچ تی ام ال تعریف می‌کند و آنها (برچسب‌های اچ تی ‌ام ال) را به عنوان آبجکت در نظر می‌گیرد. وقتی یک برگه در وب بالا می‌آید مرورگر یک درخت از آبجکتهای واقع در آن (برچسب‌های اچ تی‌ ام ال که به عنوان آبجکت در نظر گرفته شده‌اند) با نام «سند مدل آبجکت»‌ـی یا DOM می‌سازد. این مدل شبیه درختی است که در بالای آن آبجکتهای اصلی برگه قرار دارند و در زیر آن دیگر آبجکتهایی که برگه را می‌سازند. DOM در اچ تی‌ ام ال قابل دسترسی با جاوا اسکریپت یا دیگر زبان‌های برنامه نویسی است. بوسیله استاندارد DOM جاوا اسکریپت می‌تواند به برچسب‌های اچ تی ‌ام ال دسترسی پیدا کرده و حتی آنها را تغییر دهد.

تصویر بالا نمایش دهنده سند آبجکتی ساخته شده برای برچسب‌های اچ تی‌ ام ال است که از تارنمای w3schools قرض گرفته شده است.

قابلیت‌های DOM شامل موارد زیر می‌شوند:

۱- تغییر همه برچسب‌های اچ تی ‌ام ال واقع در یک صفحه

۲- تغییر همه ویژگی‌های اچ تی ‌ام ال

۳- تغییر همه برچسب‌های شیوه دهی (سی اس اس)

۴- پاک کردن برچسب‌های اچ تی ‌ام ال و ویژگی‌هایشان

۵- اضافه کردن برچسب‌های تازه اچ تی ‌ام ال

۶- واکنش نشان دادن به رویدادهای مربوط به برچسب‌های اچ تی ‌ام ال

۷- بوجود آوردن رویدادهای تازه برای اچ تی ‌ام ال‌های واقع در صفحه

«سند آبجکتی» شامل دو فاکتور «متد‌ها» و «ویژگی‌ها»ی مربوط به هر آبجکت است. متد‌ها عمل‌هایی هستند که ما می‌توانیم بر روی برچسب‌های اچ تی ‌ام ال انجام دهیم و ویژگی، مقدارهایی از برچسب‌های اچ تی ‌ام ال هستند که ما می‌توانیم استفاده کنیم یا تغییر دهیم.

به نمونه زیر توجه فرمایید:

کد: 
<html>

<body>

<p id="intro">  درود جهان  </p>

<script>

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

</script>

</body>

</html>

در کدهای بالا ابتدا یک برچسب اچ تی ‌ام ال (<p>) که دارای مقدار (دورد جهان) است تعریف کرده و سپس توسط جاوا اسکریپت و قابلیت DOM آن مقدار را درون متغیری ریخته‌ایم در آخر مقدار را چاپ نموده‌ایم.

کد: 
document.getElementById("intro").innerHTML

در دستور بالا getElementById یک متد و innerHTML ویژگی تعریف شده در DOM است. این دستور مقدار درون برچسبی دارای شناسه (id) و ویژگی intro را بر می‌گرداند.

متد getElementById و ویژگی innerHTML
بهره بردن از متد getElementById و ویژگی innerHTML عمومی‌ترین راه برای دسترسی و دریافت مقدار یک برچسب از طریق شناسه (id) آن برچسب است. به این ترتیب این متد و ویژگی از شناسه برچسب استفاده می‌کنند تا مقدار آن را دریافت کنند، همانطور که در نمونه بالا این اتفاق افتاده است.

متد getElementById عمل شناسایی برچسب را از طریق شناسه آن انجام داده و ویژگی innerHTMLمحتوای آن برچسب را دریافت می‌کند.

نکته: ویژگی innerHTML ساده‌ترین راه برای دریافت و جابجایی محتوای یک برچسب اچ تی ‌ام ال است. این برچسب‌ها حتی می‌توانند برچسب‌هایی مانند html یا body که از برچسب‌های اصلی اچ تی ‌ام ال هستند، باشند.

معرفی صفحه وب توسط HTML DOM و آبجکت document
در بخش پیشین گفتیم که با استفاده از HTML DOM صفحه وب شما تبدیل به یک مدل سند آبجکت می‌شود. یعنی، این مدل سند آبجکتی است که صفحه وب شما را معرفی می‌کند و تمام برچسب‌های اچ تی ‌ام ال از طریق این استاندارد به صورت یک آبجکت داخل سند پنداشته می‌شوند. این پنداشت باعث می‌شود که شناسایی، دسترسی، تغییر و جابجایی برچسب‌ها امکان پذیر گردد. به تعریف دیگر تمام برچسب‌های اچ تی ‌ام ال در اختیار سند آبجکتی قرار می‌گیرند. حال برای دسترسی به همهٔ آبجکتهای این سند از آبجکت document استفاده می‌شود، به این ترتیب که برای دسترسی به هر آبجکت ابتدا با بکار بردن کلمه «document» به آن دسترسی پیدا کرده و بعد عملیات لازم را در روی آن انجام می‌دهیم. در زیر فهرستی از متد‌ها و ویژگی‌هایی که توسط آنها به برچسب‌های اچ تی ‌ام ال دسترسی پیدا می‌کنیم آمده است.

پیدا کردن برچسب‌های اچ تی ‌ام ال

کد: 
document.getElementById()       

document.getElementsByTagName()      

document.getElementsByClassName()    

document.forms[]

جابجایی برچسب‌های اچ تی ‌ام ال

کد: 
document.write(text)     

document.getElementById(id).innerHTML=         

document.getElementById(id).attribute=

document.getElementById(id).style.attribute=

اضافه کردن و پاک کردن برچسب‌های اچ تی ‌ام ال

کد: 
document.createElement()         

document.removeChild()            

document.appendChild()            

document.replaceChild()

افزودن هدایت کننده رویداد‌ها

کد: 
document.getElementById(id).onclick=function(){code}

همانطور که می‌بینید در ابتدای هر دستور از document استفاده شده است. در ادامه به شرح متد‌ها و ویژگی‌های یاد شده می‌پردازیم.

یافتن و تغییر برچسب‌های اچ تی ‌ام ال
برای ایجاد تغییر در برچسب‌های اچ تی ‌ام ال ابتدا باید آن برچسب را پیدا کنیم. برای این منظور می‌توانیم از راه‌های متفاوت زیر عمل کنیم:

۱- یافتن برچسب‌های اچ تی ‌ام ال توسط شناسه برچسب (id)

۲- یافتن برچسب‌های اچ تی ‌ام ال توسط نام برچسب

۳- یافتن برچسب‌های اچ تی ‌ام ال توسط نام کلاس

۴- یافتن برچسب‌های اچ تی ‌ام ال توسط مجموعه آبجکتها

یافتن برچسب‌های اچ تی ‌ام ال توسط شناسه برچسب (id)
پیش از این گفتیم که ساده‌ترین راه یافتن برچسب‌های اچ تی ‌ام ال استفاده از شناسه برچسب است. مانند:

کد: 
<p id="intro">  درود جهان  </p>

var x=document.getElementById("intro");

این نمونه کد محتوای داخل برچسب «p» را با شناسه «id» و ویژگی «intro» (id=intro) باز می‌گرداند. در این حالت اگر برچسب پیدا شود متد مورد استفاده برچسب را به شکل یک آبجکت در x باز می‌گرداند و اگر برچسب یافت نشود مقدار x هیچ (null) می‌شود. نمونه کدهای زیر این عمل را به وضوح نشان می‌دهند.

کد: 
<!DOCTYPE html>

<html> <body>

<p id="intro"> درود جهان </p>

<script>

x=document.getElementById("intro");

document.write(  x.innerHTML);

</script> </body> </html>

نکته: حتما متوجه شده‌اید که در این نمونه ویژگی inerHTML آبجکت document را جدا و در خط دستور دیگری نوشته‌ایم در صورتی که در نمونه پیشین ویژگی را بعد از متد و چسبانده به آن آوردیم. این شیوه، راه دیگری برای دسترسی به محتوای یک ویژگی است.

یافتن برچسب‌های اچ تی ‌ام ال توسط نام برچسب
این حالت یافتن برچسب را با اشاره به نام آن انجام می‌دهد:

کد: 
var y=x.getElementsByTagName("p");

دستور بالا برچسب را بر اساس نام آن (p) پیدا می‌کند.

کد: 
<!DOCTYPE html>

<html> <body>

<p> درود جهان </p>

<div id="main">

<p> DOM کار با </p>

</div>

<script>

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

document.write( y[0].innerHTML);

</script>

</body>

</html>

این نمونه ابتدا برچسب را بر اساس شناسه (main) پیدا کرده و سپس تمام برچسب‌های «p» درون آن را می‌یابد و در داخل آرایه «y» قرار می‌دهد y[0] نخستین مقدار آرایه را اشاره می‌کند.

یافتن برچسب‌های اچ تی ‌ام ال توسط نام کلاس
متد getElementsByClassName تمام برچسب‌های با کلاس یکسان را پیدا می‌کند.

کد: 
document.getElementsByClassName("intro");

یافتن برچسب‌های اچ تی ‌ام ال توسط مجموعه آبجکت‌ها
منظور از مجموعه آبجکتها، آبجکتهایست که مربوط به یک دسته یا گروه می‌باشند. بطور نمونه مجموعه آبجکتهای سازنده فرم (form) همه در زیر مجموعه مجموعه آبجکت «فرم» قرار می‌گیرند.

کد: 
<!DOCTYPE html>

<html> <body>

<form id="frm1" >

 نام: <input type="text" name="fname" value="پیمان"><br/  >

  نام خانوادگی: <input type="text" name="lname" value="شهروز"><br/  >

<input type="submit" value="بفرست">

</form>

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

<button onclick="myFunction()"> امتحان کنید </button>

<script>

function myFunction() {

var x = document.getElementById("frm1");

var txt = "";

for (var  i = 0 ;  i < x.length ; i++)  {

  txt = txt + x.elements[i].value + "<br/ >";

  }

document.getElementById("demo").innerHTML = txt ;

}

</script> </body> </html>

نمونه بالا ابتدا یک فرم را توسط برچسب‌های اچ تی ‌ام ال می‌سازد. سپس توسط یک تابع برچسب‌های فرم را با شناسه «frm1» شناسایی و تمام مقادیر -حتی نام برچسب بفرست- را چاپ می‌کند. هدف از این نمونه چگونگی شناسایی و چاپ تمام برچسب‌ها بوده است، بدیهی ست که در یک فرم نباید نام برچسب ارسال (بفرست) چاپ شود.

منبع: نمونه کدها

نکته: برای درک بیشتر عملکرد «یافتن برچسب‌های اچ تی ‌ام ال توسط مجموعه آبجکتها» می‌باید از نمونه بالا بهره برده و خود شما فرم دلخواه خود را ساخته و خروجی آن را مشاهده فرمایید. همیشه بهترین راه یادگیری تغییر و ویرایش کد‌ها و ساخت کدهای تازه است.

**Ghoghnus**

در درس پیشین به چگونگی ارتباط بین جاوا اسکریپت و برچسب‌های اچ تی ‌ام ال پرداختیم. در این درس می‌خواهیم به قابلیت‌های بیشتری از این ارتباط اشاره کنیم.

تولید محتوای پویا
جاوا اسکریپت می‌تواند محتوای پویا برای خروجی برچسب‌های اچ تی ‌ام ال بگذارد.

کد: 
<!DOCTYPE html>

<html> <body>

<script>

document.write(Date());

</script>

</body>

</html>

همانطور که می‌بینید «زمان» که یک مقدار پویا می‌باشد در خروجی قرار داده شده است.

ایجاد تغییرات در محتوای اچ تی ‌ام ال
ارتباط جاوا اسکریپت با برچسب‌های اچ تی ‌ام ال تا اندازه‌ای است که جاوا اسکریپت حتی می‌تواند محتوای آنها را تغییر داده و یا مقداری در خروجیشان قرار دهد. پیش از این هم گفته شد که ساده‌ترین راه در تغییر محتوای برچسب‌های اچ تی ‌ام ال استفاده از ویژگی «innerHTML» است.

کد: 
<!DOCTYPE html>

<html> <body>

<p id="p1">  درود جهان </p>

<script>

document.getElementById("p1").innerHTML=" متن جایگزین شده ";

</script>

<p> پاراگراف بالا توسط کدهای جاوا اسکریپت تغییر یافته است  </p>

</body> </html>

نمونه بالا یک نمونه ساده برای نشان دادن چگونگی تغییر خروجی یک برچسب در اچ تی ‌ام ال توسط جاوا اسکریپت است.

در نمونه زیر محتوای برچسب <h1> تغییر می‌یابد:

کد: 
<!DOCTYPE html>

<html> <body>

<h1 id="header"> متن پیشین  </h1>

<script>

var element=document.getElementById("header");

element.innerHTML="  متن جایگزین شده ";

</script>

 </body> </html>

ایجاد تغییرات شیوه دهی «سی اس اس» در اچ تی ‌ام ال
DOM این اجازه را به جاوا اسکریپت می‌دهد که توسط آن شیوه دهی را در اچ تی ‌ام ال تغییر دهد. به نمونه زیر توجه بفرمایید:

کد: 
<html>

<body>

<p id="p2"> درود جهان </p>

<script>

document.getElementById("p2").style.color="blue";

</script>

<p> درود جهان  </p>

</body> </html>

متن ابتدایی به رنگ آبی و متن دوم به رنگ مشکی به نمایش در خواهد آمد. به این ترتیب می‌توان دیگر ویژگی‌های شیوه دهی را تغییر داد:

کد: 
document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

واکنش به رویدادهای اچ تی ‌ام ال در جاوا اسکریپت توسط DOM
DOM به شما این توانایی را می‌دهد که در مقابل رویداد اتفاقی در اچ تی ‌ام ال واکنشی را توسط جاوا اسکریپت طراحی و پیاده سازی کنید. رویداد‌ها توسط مرورگر در زمان تغییر یا افتادن اتفاقی برای برچسب‌های اچ تی ‌ام ال رخ می‌دهند. برای نمونه وقتی برگه‌ای بالا می‌آید، موس بر روی دکمه‌ای می‌رود و یا آن را فشار می‌دهد یک رویداد اتفاق می‌افتد. در زیر چند نمونه از رویدادهایی که در اچ تی ‌ام ال اتفاق می‌افتند را مشاهده می‌کنید:

وقتی بر روی عنصری از اچ تی ‌ام ‌ال کلیک می‌شود.
وقتی برگه‌ای بالا می‌آید.
وقتی تصویری در صفحه بالا می‌آید.
وقتی دکمه‌ای بر روی صفحه کلید فشار داده می‌شود.
هنگامی که یک فرم ارسال می‌شود.
در زمان رخ دادن یک رویداد، کدهایی از جاوا اسکریپت می‌توانند اجرا شوند و این دقیقا قابلیتی است که از تعامل جاوا اسکریپت با اچ تی ‌ام ال پدید می‌آید. در خروجی کدهای زیر وقتی بر روی متن کلیک شود، متن تغییر می‌کند:

کد: 
<!DOCTYPE html>

<html> <body>

<h1 onclick="this.innerHTML='ها ها!'"> بر روی این متن کلیک کنید </h1>

</body> </html>

همانطور که دیدید با کلیک بر روی متن فوق، محتوای آن تغییر کرده و متن دیگری بجای آن نمایش داده می‌شود.

اجازه بدهید همین کار را با فراخوانی تابع انجام دهیم:

کد: 
<!DOCTYPE html>

<html> <head> <script>

function changetext(id)

{ id.innerHTML="ها ها!"; }

</script> </head>

 <body>

<h1 onclick="changetext(this)"> بر روی این متن کلیک کنید  </h1>

</body> </html>

همانطور که می‌بینید در این کد‌ها از ویژگی‌های رویدادی در اچ تی ‌ام ال استفاده شده است.

فهرست زیر چند نمونه از رویدادهای رخ دهنده در مرورگر را نمایش می‌دهد:

onclick // در زمان کلیک بر روی عنصر اچ تی ام ال
ondblclick // در زمان دو کلیک بر روی عنصر
onmousedown // وقتی دکمه موس را بر روی عنصری فشار می‌دهیم.
onmousemove // در زمان حرکت موس وقتی بر روی عنصر قرار دارد.
onmouseover // وقتی موس را بر روی عنصری می‌بریم.
onmouseout // وقتی موس از روی عنصری بر داشته می‌شود.
onmouseup // وقتی دکمه موس بر روی عنصری رها می‌شود.
onkeydown // وقتی در حال فشردن دکمه صفحه کلید هستیم.
onkeypress // وقتی دکمه صفحه کلید فشرده می‌شود.
onkeyup // وقتی دکمه فشرده شده رها می‌شود.
onload // وقتی برگه‌ای بالا می‌آید.
پیوندی از فهرست کامل رویدادها از تارنمای w3schools

برای منتسب کردن یک رویداد به برچسب‌های اچ تی ‌ام ال باید از ویژگی‌های آن رویداد استفاده کرد:

کد: 
<!DOCTYPE html> <html> <body>

<button onclick="displayDate()">دکمه را فشار دهید</button>

<script>

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

} </script>

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

در نمونه بالا onclick یک رویداد است که با استفاده از ویژگی آن (مقداری که در مقابل آن نوشته می‌شود) تابع displayDate () فراخوانده شده و اجرا می‌شود.

برای بکار بردن رویداد‌ها از طریق DOM کافیست رویداد مورد نظر را در انتهای متد مورد استفاده از DOM قرار دهیم:

کد: 
<!DOCTYPE html>

<html>

<head> </head>

<body>

<button id="myBtn">  دکمه را فشار دهید </button>

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

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

</body>

</html>

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

استفاده از رویداد onload
این رویداد در زمان بالا آمدن برگه فعال می‌شود و در صورت استفاده می‌توان عملی را به آن منتسب کرد:

کد: 
<!DOCTYPE html>

<html>

<body onload="checkCookies()">

<script>

function checkCookies() {

if (navigator.cookieEnabled==true) {

            alert("کوکی ها در مرورگر شما فعال هستند")

            }

else {

            alert("کوکی ها در مرورگر شما فعال نیستند")

            }

}

</script>

</body>

</html>

با استفاده از این رویداد فعال یا عدم فعال بودن کوکی‌های مرورگر بررسی می‌شوند و پیغام مناسب برای بیننده داده می‌شوند. برای بررسی فال بودن یا نبودن کوکی‌ها از آبجکت دیگری (navigator. cookieEnabled) در این مجموعه کد‌ها استفاده شده است.

رویدادهای onmouseover و onmouseout
دو رویداد بالا به ما کمک می‌کنند تا تغییراتی را در زمان بردن و برداشتن موس از روی عنصری بر روی آن انجام دهیم. در نمونه زیر خواهید دید که چگونه با بردن و برداشتن موس از روی عنصر div چگونه این رویداد‌ها متن داخل عنصر مورد نظر را تغییر خواهند داد:

کد: 
<!DOCTYPE html>

<html>

<body>

<div onmouseover = "mOver(this)" onmouseout = "mOut(this)"  style = "background-color:#D94A38;width:120px;height:20px;padding:40px;" >

  موس را اینجا بیاورید 

</div>

<script>

function mOver(obj) {

obj.innerHTML="حالا موس را بردار"

}

function mOut(obj) {

obj.innerHTML="Mouse Over Me"

}

</script>

</body>

 </html>

از این قابلیت برای زمان‌هایی که می‌خواهید توجه بازدید کننده‌های تارنمای خود را به مطلب ویژه‌ای جلب کنید می‌توانید استفاده کنید.

نمونه‌های بالا تنها ذره‌ای از قابلیت جاوا اسکریپت و را در تعامل با اچ تی ‌ام ال برای ساختن تارنماهایی با قابلیت پویا بودن را به نمایش می‌گذارند. شما می‌توانید بنا به نیاز خود به سراغ دیگر رویداد‌ها رفته و عمل مورد نظر خود را پیاده سازی کنید. تنها نکته اینست که باید از این قابلیت‌ها در مکان مناسب بهره ببرید و با استفاده مکرر و بیهوده کاربران تارنمای خود را خسته نفرمایید.

اجازه بدهید با یک نمونه دیگر این درس را هم پایان ببخشیم.

فرض کنید می‌خواهید این توانایی را به تارنما بدهید که با فشردن دکمه‌ای متنی از روی آن ناپدید گردد. در اینصورت می‌توانید به شیوه زیر عمل کنید:

کد: 
<!DOCTYPE html>

<html>

<body>

<p id="p1">

از این قابلیت ها در مکان مناسب بهره ببرید و با استفاده مکرر و بیهوده کاربران تارنمای خود را خسته نفرمایید.

</p>

<input type="button" value="پنهان کن" onclick="document.getElementById('p1').style.visibility='hidden'">

<input type="button" value="نمایش بده" onclick="document.getElementById('p1').style.visibility='visible'">

</body> </html>

همانطور که مشاهده می‌کنید متن نوشته شده توسط دو دکمه «پنهان کن» و «نمایش بده» ناپدید و باز پدیدار می‌شود.

شما می‌توانید این عمل (پنهان کردن متن) را توسط رویداد دیگری مانند آوردن موس یا برداشتن آن و یا هر رویدادی که بهتر هدف شما را تامین می‌کند بکار بگیرید.

**Ghoghnus**

در این درس می‌خواهیم در مورد آبجکت پنچره و چگونگی کار با آن توضیح بدهیم.

آبجکت window
این آبجکت برای کارکردن با مرورگر است و تقریبا در تمام مرورگر‌ها پشتیبانی می‌شود. در اصل این آبجکت است که پنچره در مرورگر را معرفی می‌کند و همه آبجکتها، توابع و متغیرهای جهانی و... زیر مجموعه آن قرار می‌گیرند.

متغیرهای جهانی به عنوان ویژگی آبجکت پنجره و توابع جهانی به عنوان متد‌های آبجکت پنجره شمرده می‌شوند. حتی آبجکت document به عنوان ویژگی آبجکت پنچره می‌باشد.

کد: 
window.document.getElementById("intro");

نمونه بالا را می‌توان به شکل زیر هم نوشت:

کد: 
document.getElementById("intro");

به دلیل بودن آبجکت document در زیر مجموعه window می‌توان از نوشتن آن صرف نظر کرد.

محاسبه اندازه پنجره مرورگر
زمان‌هایی وجود خواهند داشت که شما می‌خواهید اندازه پنجره خود را بدانید و یا پنچره‌ای با اندازه مشخص بوجود آورید. برای بدست آوردن اندازه پنجره مرورگر سه ویژگی وجود دارند که ما می‌توانیم از آنها استفاده کنیم.

کد: 
window.innerHeight برای بدست آوردن ارتفاع //

window.innerWidth برای بدست آوردن پهنا //

البته برای مرورگر اینترنت اکسپلورر از ویژگی‌های زیر استفاده می‌کنیم.

کد: 
document.documentElement.clientHeight    برای بدست آوردن ارتفاع //  

document.documentElement.clientWidth  برای بدست آوردن پهنا //

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

کد: 
<!DOCTYPE html>

<html>

<body>

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

<script>

var w=window.innerWidth || document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight

|| document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML=" پهنا: " + w + "<br />, ارتفاع: " + h + "."

</script>

</body>

</html>

فهرست زیر نمونه‌ای از چند متد برای آبجکت پنجره است:

کد: 
window.open() -  یک پنجره تازه باز می کند

    window.close() -  پنجره بازشده را می بندد

    window.moveTo() -پنجره را حرکت می دهد 

    window.resizeTo() -اندازه پنجره را تغییر می دهد

باز کردن پنجره تازه بهمراه نشانی مورد نظر
برای باز کردن یک پنجره تازه بهمراه نشانی تارنمای دلخواه خود به روش زیر عمل می‌کنیم:

کد: 
<!DOCTYPE html>

<html>

<head>

<script>

function open_win()

{

window.open(" http://www.iranled.com");

}

</script>

</head>

<body>

<form>

<input type="button" value="Open Window" onclick="open_win()">

</form>

</body>

</html>

استفاده از window برای چاپ کردن صفحه
برای چاپ یک صفحه توسط دستگاه چاپگر خود به شیوه زیر عمل کنید:

کد: 
<!DOCTYPE html>

<html>

<head>

<script>

function printpage()

{

window.print();

}

</script>

</head>

<body>

<input type="button" value="چاپ کنید" onclick="printpage()" />

</body>

</html>

آبحکت screen
این آبجکت اطلاعاتی در مورد اندازه صفحه نمایش کاربر دارد. با استفاده از این آبجکت می‌توان ارتفاع و پهنای صفحه نمایش کاربر را دریافت کرد.

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

document.write( "پهنا: " + screen.availWidth + "<br />") ;

document.write("ارتفاع: " + screen.availHeight) ;

</script>

</body>

</html>

جعبه‌ها در جاوا اسکریپت popup boxes
جاوا اسکریپت دارای سه نوع جعبه می‌باشد که پیش از این از کم و بیش از آنها بهره برده‌ایم.

- Alert box
این جعبه برای اطمینان از دیده شدن داده‌ها توسط بازدید کننده‌ها می‌باشد. وقتی این جعبه بالا می‌آید کاربر تنها می‌تواند با زدن دکمه «باشه» (ok) آن را تایید کند:

کد: 
<!DOCTYPE html> <html> <body>

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

<script>

function myFunction() {

window.alert(" این یک جعبه هشدار است ");

}

</script>

            </body> </html>

نکته: برای استفاده از این جعبه نیازی به استفاده از window نیست.

- Confirm box
این جعبه برای گرفتن تایید یا عدم تایید استفاده می‌شود. بازدید کننده می‌باید از بین دو گزینه باشد (ok) و یا نه (cancel) یکی را انتخاب کند. اگر بازدید کننده دکمه «باشد» را کلیک کند جعبه «true» را باز می‌گرداند و اگر گزینه «نه» را کلیک کند جعبه «false» را باز می‌گرداند.

کد: 
<!DOCTYPE html>

<html>

<body>

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

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

<script>

function myFunction()

{

var x;

var r=confirm("  یک گزینه را انتخاب کنید ");

if (r==true)

  {

  x="را انتخاب کردید  OK! ";

  }

else

  {

  x=" را انتخاب کردید  Cancel!";

  }

document.getElementById("demo").innerHTML=x;

}

</script>

</body>

</html>

Prompt box -
برای گرفتن یک مقدار از بازدید کننده (با استفاده از کادر جعبه) پیش از بالا آمدن برگه استفاده می‌شود. برای نمونه در زمان‌هایی که می‌خواهید مقداری را در کوکی قرار دهید. کوکی در درس‌های دیگر شرح داده خواهد شد.

این جعبه زمانی مقدار را باز می‌گرداند که بازدید کننده گزینه «باشد» را انتخاب کند، در صورتی که گزینه «نه» انتخاب شود مقدار بازگشتی null می‌شود.

کد: 
<!DOCTYPE html>

<html> <body>

<button onclick="myFunction()"> امتحان کنید </button>

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

<script>

function myFunction() {

var x;

var person=prompt("نام خود را وارد کنید","پیمان");

if (person!=null) {

  x="درود " + person + " چطوری ";

  document.getElementById("demo").innerHTML=x;

  } }

</script> </body>  </html>

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

کد: 
<!DOCTYPE html>

<html>

<body>

<button onclick="myFunction()"> امتحان کنید </button>

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

<script>

function myFunction() {

alert("دورد‌‌\‌‌n‌‌ چطوری ");

}

</script>

</body>

</html>

همانطور که ملاحظه می‌کنید علامت ‌‌\n باعث نوشته شدن دو متن در دو خط مجزا شده است.

**Ghoghnus**

در این درس می‌خواهیم در مورد رویدادهای زمانی و اجرای کد‌ها در فواصل زمانی متفاوت شرح بدهیم.

رویدادهای زمانی در جاوا اسکریپت
یکی دیگر از قابلیت‌های جاوا اسکریپت اجرای کدهای آن در فواصل مختلف است. به این عمل در اصل رویداد زمانی می‌گویند. این یعنی برای اجرای کد‌ها زمان بندی ویژه‌ای با انتخاب خود تعیین کنیم. انجام زمان بندی در جاوا اسکریپت بسیار ساده است کافیست که تنها از دو متد مورد نظر برای این کار استفاده کنیم. این دو متد عبارتند است از:

نقل قول: 1.etInterval() // اجرا یک تابع، بارها و بارها و در فواصل زمانی مشخص

2.setTimeout() // اجرا یک تابع، یک بار پس از انتظار تعداد مشخصی از میلی ثانیه

نقل قول: نکته: هر دو این متد‌ها از متدهای آبجکت پنجره (window) در DOM اچ تی‌ ام ال هستند.

متد setInterval
این متد برای زمان مشخصی -که برنامه نویس تعیین می‌کند- منتظر می‌ماند و سپس کد‌ها (تابع) را اجرا می‌کند و دوباره ادامه به توقف و اجرا بر اساس زمان انتظار تعیین شده می‌دهد. یعنی اجرای تابع و توقف، دوباره اجرای تابع و توقف، این روال برای همیشه ادامه دارد. شیوه نوشتن این متد به شکل زیر است:

کد: 
window.setInterval( " تابع جاوا اسکریپت " , زمان به واحد میلی ثانیه );

همانطور که می‌بینید در جلوی متد setInterval از کلمه window استفاده شده است که نشان دهنده این مطلب است که این متد از متدهای آبجکت پنجره (window) است. البته نوشتن کلمه window ضروری نیست اما بهر حال باید دانست که متد setInterval از متدهای این آبجکت است.

این متد دارای دو ورودی یا پارامتر است که اولین آن یک «تابع» و دومین آن مدت «فاصله زمانی» تعیین شده برای ایجاد توقف در بین اجراهای تابع هستند.

نکته: هر ثانیه، ۱۰۰۰ میلی ثانیه است.

فرض کنید می‌خواهیم کدهایی را بنویسیم که یک پیغام را در فاصله زمانی سه ثانیه برای بازدید کننده نشان دهد. یعنی هر سه ثانیه این پیغام ظاهر شود (سه ثانیه سه هزار میلی ثانیه است). به کدهای آن توجه کنید:

کد: 
<!DOCTYPE html>

<html> <body>

<p> بعد از فشار دادن دکمه هر سه ثانیه پیغام ظاهر می شود   </p>

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

<script>

function myFunction() {

setInterval(function(){alert(" درود ")},3000); }

</script> </body> </html>

این نمونه کد‌ها برای نشان دادن چگونگی کارکرد تابع setInterval است و دور از ذهن است که بخواهیم برای هر سه ثانیه یک پیغام را به بازدید کننده نمایش دهیم. یک نمونه خوب برای استفاده از این قابلیت نشان دادن ساعت است:

کد: 
<!DOCTYPE html> <html> <body>

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

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {

var d=new Date() ;

var t=d.toLocaleTimeString() ;

document.getElementById("demo").innerHTML=t ; }

</script> </body> </html>

در این نمونه متد setInterval برای هر یک ثانیه تابع را فراخوان می‌کند و هر یک ثانیه زمان حال نشان داده می‌شود. به این ترتیب زمان در هر یک ثانیه بروز رسانی شده و ساعت همانند یک ساعت واقعی کار می‌کند.

توقف تکرار در متد setInterval
گفتیم که متد setInterval برای همیشه اجرا و توقف کد‌ها را تکرار می‌کند اما چه اتفاقی می‌افتد اگر ما نخواهیم این تکرار اتفاق بیافتد. برای متوقف کردن تکرار متد باید از متد دیگری با نام clearInterval بهره ببریم. شیوه نوشتن این متد به شکل زیر است:

کد: 
window.clearInterval(متغیر حاوی توقف)

نکته: مانند متد setInterval در این متد هم نیازی به نوشتن window نیست اما بخاطر یاد آوری اینکه این متد هم به آبجکت پنجره اختصاص دارد آن را نوشته‌ایم.

نکته: برای اینکه بتوانیم از این متد استفاده کنیم باید یک متغیر جهانی ساخته و خروجی متد setInterval را در آن بریزیم و سپس در زمان بکارگیری متد clearInterval از آن متغیر بصورت پارامتر متد استفاده کنیم.

نکته: در هر زمان یا مکان کدنویسی خود که خواستیم از تکرار متد setInterval جلوگیری کنیم متد clearInterval را فراخوان می‌کنیم.

اجازه بدهید با گذاشتن متوقف کننده در نمونه پیشین این جستار (مبحث) را کامل کنیم:

کد: 
<!DOCTYPE html>

<html> <body>

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

<button onclick="myStopFunction()"> زمان را متوقف کن </button>

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {

var d=new Date();

var t=d.toLocaleTimeString();

document.getElementById("demo").innerHTML=t;

}

function myStopFunction() {

clearInterval(myVar);

}

</script> </body> </html>

در نمونه بالا به محض فشردن دکمه «زمان را متوقف کن» اجرای متد متوقف شده و زمان می‌ایستد. این عمل با استفاده از نام متغیر جهانی (myVar) که حامل خروجی متد setInterval است انجام می‌شود.

کد: 
var myVar = setInterval (function(){myTimer()}, 1000 ) ;

همانطور که می‌بینید تابع myStopFunction با استفاده از متد clearInterval و متغیر myVar به عنوان پارامتر متد، عمل متوقف کردن متد setInterval را انجام می‌دهد.

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

کد: 
window.setTimeout("تابع جاوا اسکریپت",زمان به میلی ثانیه);

نکته: از آنجا که این تابع هم متعلق به آبجکت پنجره است در شیوه نگارش متد نیازی به نوشتن کلمه window نیست.

نمونه کدهای زیر نشان دهنده چگونگی عمل این متد هستند.

کد: 
<!DOCTYPE html>

<html> <body>

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

<button onclick="myFunction()">  امتحان کن </button>

<script>

function myFunction() {

setTimeout(function(){alert("درود")},3000);

}

</script> </body> </html>

همانطور که می‌بینید متد setTimeout هم دارای دو پارامتر است، یکم تابع برای اجرا و دوم میزان زمان ابتدایی برای ایجاد فاصله برای اجرای تابع. دکمه‌ای با نام «امتحان کن» در زمان فشار داده شدن تابع myFunction را فراخوان می‌کند و تابع myFunction متد setTimeout همراه پارامتر‌هایش را اجرا می‌کند.

توقف اجرای متد setTimeout پیش از اجرای تابع
علارقم اجرای متد setTimeout فقط برای یکبار باز ممکن است که ما بخواهیم اجرای آن را متوقف کنیم. راه متوقف کردن این متد بکارگیری متد دیگری با نام clearTimeout است. این متد بعد از فراخوانی -چنانچه پیش از زمان اجرای تابع فراخوان شود- اجرا شده و از اعمال تابع جلوگیری می‌کند. شیوه نگارش این تابع به شرح زیر می‌باشد:

کد: 
window.clearTimeout(متغیر حاوی زمان)

نکته: بکارگیری کلمه window در نوشتن این متد اجباری نیست.

برای استفاده از این متد هم باید ابتدا یک متغیر جهانی ساخته و از نام آن برای متوقف کردن متد setTimeout استفاده کنیم.

نکته: فراموش نکنید که این متد زمانی کارایی دارد که پیش از اجرای تابع قراخوان شده در متد setTimeout فراخوان و اجرا شود.

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

کد: 
<!DOCTYPE html>

<html> <body>

<p>  دکمه «شروع کن» را برای اجرا و دکمه «متوقف کن» را برای توقف متد فشار دهید </p>

<p>اجرای تابع داخل متد « setTimeout» سه ثانیه طول می کشد پس برای متوقف کردن آن سه ثانیه زمان دارید تا دکمه «متوقف کن» را فشار دهید </p>

<button onclick="myFunction()">شروع کن</button>

<button onclick="myStopFunction()"> متوقف کن </button>

<script>

var myVar;

function myFunction() {

myVar=setTimeout(function(){alert("درود")},3000); }

function myStopFunction() {

clearTimeout(myVar); }

</script> </body> </html>

برای نمونه کدهای بالا دو دکمه در نظر گرفته شده است، «شروع کن» و «متوقف» که اولی برای اجرای تابع حامل متد «setTimeout» است و دومی برای اجرای تابع حامل «clearTimeout».

از آنجا که ما می‌دانیم متد setTimeout فقط یکبار و آن هم بعد از سه ثانیه (سه ثانیه در پارامتر متد تعیین شده است) اجرا می‌شود، برای جلوگیری از اجرای آن تنها سه ثانیه زمان داریم. چراکه پس از سه ثانیه تابع اجرا می‌شود و دیگر قادر به توقف آن نیستیم. بعلاوه آن این متد تنها یکبار اجرا می‌شود پس بعد از اجرا در اصل نیازی به توقف نداریم.

نمونه دیگر برای نمایش ساعت:

کد: 
<!DOCTYPE html>

<html> <head> <script>

function startTime() {

var today = new Date() ;

var h = today.getHours() ;

var m = today.getMinutes() ;

var s = today.getSeconds() ;

m = checkTime(m) ;

s = checkTime(s) ;

document.getElementById('txt').innerHTML= h+" : "+m+" : "+s ;

t = setTimeout(function(){startTime()},500) ; }

function checkTime(i) {

if (i<10) {            برای اضافه کردن عدد صفر در جلوی اعداد کوچکتر از 10  //  

  i = "0" + i ;  }

return i ; }

</script> </head>

<body onload="startTime()">

<div id="txt"></div>

</body> </html>

با توجه به اطلاعات داده شده در این درس باز خوانی این نمونه را به خود شما واگذار می‌کنیم.

**Ghoghnus**

در این درس می‌خواهیم در مورد رویدادهای زمانی و اجرای کد‌ها در فواصل زمانی متفاوت شرح بدهیم.

رویدادهای زمانی در جاوا اسکریپت
یکی دیگر از قابلیت‌های جاوا اسکریپت اجرای کدهای آن در فواصل مختلف است. به این عمل در اصل رویداد زمانی می‌گویند. این یعنی برای اجرای کد‌ها زمان بندی ویژه‌ای با انتخاب خود تعیین کنیم. انجام زمان بندی در جاوا اسکریپت بسیار ساده است کافیست که تنها از دو متد مورد نظر برای این کار استفاده کنیم. این دو متد عبارتند است از:

کد: 
1.etInterval()     //       اجرا یک تابع، بارها و بارها و در فواصل زمانی مشخص

2.setTimeout()    //   اجرا یک تابع، یک بار پس از انتظار تعداد مشخصی از میلی ثانیه

نکته: هر دو این متد‌ها از متدهای آبجکت پنجره (window) در DOM اچ تی‌ ام ال هستند.

متد setInterval
این متد برای زمان مشخصی -که برنامه نویس تعیین می‌کند- منتظر می‌ماند و سپس کد‌ها (تابع) را اجرا می‌کند و دوباره ادامه به توقف و اجرا بر اساس زمان انتظار تعیین شده می‌دهد. یعنی اجرای تابع و توقف، دوباره اجرای تابع و توقف، این روال برای همیشه ادامه دارد. شیوه نوشتن این متد به شکل زیر است:

کد: 
window.setInterval( " تابع جاوا اسکریپت " , زمان به واحد میلی ثانیه );

همانطور که می‌بینید در جلوی متد setInterval از کلمه window استفاده شده است که نشان دهنده این مطلب است که این متد از متدهای آبجکت پنجره (window) است. البته نوشتن کلمه window ضروری نیست اما بهر حال باید دانست که متد setInterval از متدهای این آبجکت است.

این متد دارای دو ورودی یا پارامتر است که اولین آن یک «تابع» و دومین آن مدت «فاصله زمانی» تعیین شده برای ایجاد توقف در بین اجراهای تابع هستند.

نکته: هر ثانیه، ۱۰۰۰ میلی ثانیه است.

فرض کنید می‌خواهیم کدهایی را بنویسیم که یک پیغام را در فاصله زمانی سه ثانیه برای بازدید کننده نشان دهد. یعنی هر سه ثانیه این پیغام ظاهر شود (سه ثانیه سه هزار میلی ثانیه است). به کدهای آن توجه کنید:

کد: 
<!DOCTYPE html>

<html> <body>

<p> بعد از فشار دادن دکمه هر سه ثانیه پیغام ظاهر می شود   </p>

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

<script>

function myFunction() {

setInterval(function(){alert(" درود ")},3000); }

</script> </body> </html>

این نمونه کد‌ها برای نشان دادن چگونگی کارکرد تابع setInterval است و دور از ذهن است که بخواهیم برای هر سه ثانیه یک پیغام را به بازدید کننده نمایش دهیم. یک نمونه خوب برای استفاده از این قابلیت نشان دادن ساعت است:

کد: 
<!DOCTYPE html> <html> <body>

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

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {

var d=new Date() ;

var t=d.toLocaleTimeString() ;

document.getElementById("demo").innerHTML=t ; }

</script> </body> </html>

در این نمونه متد setInterval برای هر یک ثانیه تابع را فراخوان می‌کند و هر یک ثانیه زمان حال نشان داده می‌شود. به این ترتیب زمان در هر یک ثانیه بروز رسانی شده و ساعت همانند یک ساعت واقعی کار می‌کند.

توقف تکرار در متد setInterval
گفتیم که متد setInterval برای همیشه اجرا و توقف کد‌ها را تکرار می‌کند اما چه اتفاقی می‌افتد اگر ما نخواهیم این تکرار اتفاق بیافتد. برای متوقف کردن تکرار متد باید از متد دیگری با نام clearInterval بهره ببریم. شیوه نوشتن این متد به شکل زیر است:

کد: 
window.clearInterval(متغیر حاوی توقف)

نکته: مانند متد setInterval در این متد هم نیازی به نوشتن window نیست اما بخاطر یاد آوری اینکه این متد هم به آبجکت پنجره اختصاص دارد آن را نوشته‌ایم.

نکته: برای اینکه بتوانیم از این متد استفاده کنیم باید یک متغیر جهانی ساخته و خروجی متد setInterval را در آن بریزیم و سپس در زمان بکارگیری متد clearInterval از آن متغیر بصورت پارامتر متد استفاده کنیم.

نقل قول: نکته: در هر زمان یا مکان کدنویسی خود که خواستیم از تکرار متد setInterval جلوگیری کنیم متد clearInterval را فراخوان می‌کنیم.

اجازه بدهید با گذاشتن متوقف کننده در نمونه پیشین این جستار (مبحث) را کامل کنیم:

کد: 
<!DOCTYPE html>

<html> <body>

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

<button onclick="myStopFunction()"> زمان را متوقف کن </button>

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {

var d=new Date();

var t=d.toLocaleTimeString();

document.getElementById("demo").innerHTML=t;

}

function myStopFunction() {

clearInterval(myVar);

}

</script> </body> </html>

در نمونه بالا به محض فشردن دکمه «زمان را متوقف کن» اجرای متد متوقف شده و زمان می‌ایستد. این عمل با استفاده از نام متغیر جهانی (myVar) که حامل خروجی متد setInterval است انجام می‌شود.

کد: 
var myVar = setInterval (function(){myTimer()}, 1000 ) ;

همانطور که می‌بینید تابع myStopFunction با استفاده از متد clearInterval و متغیر myVar به عنوان پارامتر متد، عمل متوقف کردن متد setInterval را انجام می‌دهد.

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

کد: 
window.setTimeout("تابع جاوا اسکریپت",زمان به میلی ثانیه);

نکته: از آنجا که این تابع هم متعلق به آبجکت پنجره است در شیوه نگارش متد نیازی به نوشتن کلمه window نیست.

نمونه کدهای زیر نشان دهنده چگونگی عمل این متد هستند.

کد: 
<!DOCTYPE html>

<html> <body>

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

<button onclick="myFunction()">  امتحان کن </button>

<script>

function myFunction() {

setTimeout(function(){alert("درود")},3000);

}

</script> </body> </html>

همانطور که می‌بینید متد setTimeout هم دارای دو پارامتر است، یکم تابع برای اجرا و دوم میزان زمان ابتدایی برای ایجاد فاصله برای اجرای تابع. دکمه‌ای با نام «امتحان کن» در زمان فشار داده شدن تابع myFunction را فراخوان می‌کند و تابع myFunction متد setTimeout همراه پارامتر‌هایش را اجرا می‌کند.

توقف اجرای متد setTimeout پیش از اجرای تابع
علارقم اجرای متد setTimeout فقط برای یکبار باز ممکن است که ما بخواهیم اجرای آن را متوقف کنیم. راه متوقف کردن این متد بکارگیری متد دیگری با نام clearTimeout است. این متد بعد از فراخوانی -چنانچه پیش از زمان اجرای تابع فراخوان شود- اجرا شده و از اعمال تابع جلوگیری می‌کند. شیوه نگارش این تابع به شرح زیر می‌باشد:

کد: 
window.clearTimeout(متغیر حاوی زمان)

نکته: بکارگیری کلمه window در نوشتن این متد اجباری نیست.

برای استفاده از این متد هم باید ابتدا یک متغیر جهانی ساخته و از نام آن برای متوقف کردن متد setTimeout استفاده کنیم.

نکته: فراموش نکنید که این متد زمانی کارایی دارد که پیش از اجرای تابع قراخوان شده در متد setTimeout فراخوان و اجرا شود.

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

کد: 
<!DOCTYPE html>

<html> <body>

<p>  دکمه «شروع کن» را برای اجرا و دکمه «متوقف کن» را برای توقف متد فشار دهید </p>

<p>اجرای تابع داخل متد « setTimeout» سه ثانیه طول می کشد پس برای متوقف کردن آن سه ثانیه زمان دارید تا دکمه «متوقف کن» را فشار دهید </p>

<button onclick="myFunction()">شروع کن</button>

<button onclick="myStopFunction()"> متوقف کن </button>

<script>

var myVar;

function myFunction() {

myVar=setTimeout(function(){alert("درود")},3000); }

function myStopFunction() {

clearTimeout(myVar); }

</script> </body> </html>

برای نمونه کدهای بالا دو دکمه در نظر گرفته شده است، «شروع کن» و «متوقف» که اولی برای اجرای تابع حامل متد «setTimeout» است و دومی برای اجرای تابع حامل «clearTimeout».

از آنجا که ما می‌دانیم متد setTimeout فقط یکبار و آن هم بعد از سه ثانیه (سه ثانیه در پارامتر متد تعیین شده است) اجرا می‌شود، برای جلوگیری از اجرای آن تنها سه ثانیه زمان داریم. چراکه پس از سه ثانیه تابع اجرا می‌شود و دیگر قادر به توقف آن نیستیم. بعلاوه آن این متد تنها یکبار اجرا می‌شود پس بعد از اجرا در اصل نیازی به توقف نداریم.

نمونه دیگر برای نمایش ساعت:

کد: 
<!DOCTYPE html>

<html> <head> <script>

function startTime() {

var today = new Date() ;

var h = today.getHours() ;

var m = today.getMinutes() ;

var s = today.getSeconds() ;

m = checkTime(m) ;

s = checkTime(s) ;

document.getElementById('txt').innerHTML= h+" : "+m+" : "+s ;

t = setTimeout(function(){startTime()},500) ; }

function checkTime(i) {

if (i<10) {            برای اضافه کردن عدد صفر در جلوی اعداد کوچکتر از 10  //  

  i = "0" + i ;  }

return i ; }

</script> </head>

<body onload="startTime()">

<div id="txt"></div>

</body> </html>

با توجه به اطلاعات داده شده در این درس باز خوانی این نمونه را به خود شما واگذار می‌کنیم.

**Ghoghnus**

حتم داریم که تا به حال نام کوکی‌ها را شنیده‌اید و یا از آن استفاده کرده‌اید. بطور حتم در تارنما‌های متفاوت نمونه‌هایی را مشاهده کرده‌اید. برای نمونه تارنما‌هایی که به هنگام ورود ابتدا نام شما را گرفته و پس از آن با هر بار ورود به آن تارنما شما را شناخته و به شما خوش آمد می‌گویند. در این درس یاد می‌گیریم که چگونه به کوکی‌ها مقدار داده و سپس مقادیر آنها را بازیابی کنیم.

کوکی‌ها در جاوا اسکریپت
وقتی که کاربر نشانی تارنمایی را در قسمت نشانی مرورگر می‌نویسد، مرورگر درخواست بازدید تارنما را برای سرور ارسال می‌کند. سرور درخواست را از مرورگر می‌گیرد و صفحه وب را برای مرورگر (کاربر) باز می‌فرستد. پس از فرستادن صفحه وب توسط سرور برای مرورگر، ارتباط سرور و مرورگر پایان می‌یابد و سرور هیچ داده‌ای را از مرورگر (کاربر) در خود ندارد. اگر دوباره کاربر برای سرور درخواستی بفرستد این ارتباط بدون در نظر گرفتن ارتباط پیشین دوباره شکل می‌گیرد. اینجاست که «کوکی‌ها» پا به وسط گذاشته و برای حفظ شناسایی ارتباط کاربر و سرور داده‌هایی را در خود نگه داری می‌کنند. کوکی‌ها در اصل داده‌هایی هستند حاوی اطلاعاتی که در رایانه کاربر ثبت می‌شوند. این اطلاعات به سرور اجازه می‌دهد تا کاربر را پس از ارجاع دوباره شناسایی کند. برای نمونه کاربرد کوکی‌ها در این است که وقتی کاربر به تارنمایی مراجعه کرد نام او ثبت شده و در مراجعه بعدی سرور نام او را بداند.

پس از بکارگیری کوکی‌های، وقتی کاربر توسط مرورگر خود درخواستی را برای سرور می‌فرستد همراه آن درخواست کوکی‌ها (داده‌هایی در مورد کاربر) ارسال می‌شوند. به این ترتیب سرور داده‌هایی در مورد کاربر را در اختیار دارد و با دیدن آنها، کاربر را شناسایی می‌کند.

ساخت کوکی‌ها در جاوا اسکریپت
کوکی‌ها در جاوا اسکریپت به شیوه زیر ساخته می‌شوند:

کد: 
document.cookie="username=پیمان";

جاوا اسکریپت توسط ویژگی «document.cookie» توانایی ساختن، خواندن و پاک کردن کوکی‌ها را دارا می‌باشد.

در زمان ساخت یک کوکی می‌توانیم به آن زمانی برای از بین رفتن اعتبار منتسب کنیم. به این شکل بعد از مدت معینی که ما مشخص می‌کنیم اعتبار آن کوکی از بین رفته و دیگر از طرف سرور به رسمیت شناخته نمی‌شود:

کد: 
document.cookie="username=پیمان; expires=Thu, 12 Dec 2013 11:00:00 GMT";

خواندن کوکی‌ها در جاوا اسکریپت
شیوه خوانده شدن کوکی‌ها در جاوا اسکریپت به شکل زیر می‌باشد:

کد: 
var x = document.cookie;

به این ترتیب محتوای کوکی در متغیر x قرار می‌گیرد.

نقل قول: نکته: ویژگی document.cookie این است که محتوای کوکی‌ها را بصورت یک رشته باز می‌گرداند.

کد: 
کوکی1=مقدار; کوکی2=  ...   مقدار;

تغییر کوکی در جاوا اسکریپت
برای تغییر یک کوکی در جاوا اسکریپت کافیست بر روی کوکی از پیش ساخته شده مقدار تازه‌ای را منتسب کنید.

کد: 
document.cookie="username=شهروز; expires=Thu, 22 Dec 2014 12:00:00 GMT";

پاک کردن کوکی‌ها
برای پاک کردن کوکی‌ها شما باید تاریخ از بین رفتن کوکی را به زمانی در گذشته تغییر بدهید.

کد: 
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

نکته: در زمان پاک کردن کوکی نیازی به منتسب کردن مقدار در آن (username) ندارید.

نکته: در قسمت تغییر کوکی‌ها گفتیم کافیست شما مقدار تازه را جایگزین مقدار پیشین کنید. اگر شما مقدار تازه‌ای را با نام دیگری به کوکی‌ها اضافه کنید، کوکی پیشین از بین نرفته و در پیش از کوکی تازه قرار می‌گیرد.

مکان ثبت کوکی‌ها
بطور طبیعی کوکی‌ها در مکانی ذخیره می‌شوند که صفحات وب در آنجا ایجاد شده‌اند. با استفاده از پارامتر path می‌توان کوکی‌ها را در محل دلخواه خود ذخیره کرد. کد زیر کوکی cookie1 را برای هر صفحه‌ای که در فولدر testcookie قرار دارد آماده می‌کند.

کد: 
document.cookie="cookie1=مقدار; path=/testcookie" ;

نمونه ساخت کوکی‌ها

کد: 
<!DOCTYPE html>

<html> <head> <script>

function setCookie(cname,cvalue,exdays) {

var d = new Date();

d.setTime(d.getTime()+(exdays*24*60*60*1000));

var expires = "expires="+d.toGMTString();

document.cookie = cname+"="+cvalue+"; "+expires;

}

function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++)

  {

  var c = ca[i].trim();

  if (c.indexOf(name)==0) return c.substring(name.length,c.length);

  }

return "";

}

function checkCookie() {

var user=getCookie("username");

if (user != "") {

  alert("خوش آمدید  " + user);

  } else   {

  user = prompt("نام خود را وارد کنید:","");

  if (user!="" && user!=null)    {

    setCookie("username",user, 365);

    } } }

</script></head>

<body onload="checkCookie()"></body>

</html>

در این نمونه سه تابع setCookie، getCookie و checkCookie برای ساختن کوکی، گرفتن کوکی و خواندن کوکی ساخته شده است.

تابع ساختن کوکی setCookie
تابع setCookie برای ساخت کوکی می‌باشد. این تابع دارای سه پارامتر است: نام کوکی ()، مقدار کوکی () و زمان از بین رفتن یا مدت زمان اعتبار داشتن کوکی:

کد: 
function setCookie(cname,cvalue,exdays) {

var d = new Date();

d.setTime(d.getTime()+(exdays*24*60*60*1000));

var expires = "expires="+d.toGMTString();

document.cookie = cname + "=" + cvalue + " ; " + expires ; }

d.setTime(d.getTime()+(exdays*24*60*60*1000));

setTime هم یکی دیگر از متدهای آبجکت Date است که با این متد می‌توانیم بصورت دستی یک زمان را برای این آبجکت تعیین کنیم.

کد: 
var expires = "expires="+d.toGMTString();

در اینجا با استفاده از متد toGMTString که یکی از متدهای آبجکت Date است، و تاریخ را به وقت گرینویچ تعیین می‌کند، تاریخ موجود در متغیر d را به این فرمت تبدیل کرده و آن را در پارامتر expires کوکی می‌ریزیم.

تابع گرفتن کوکی getCookie
این تابع برای دریافت کوکی ساخته می‌شود که نام کوکی را به عنوان پارامتری دریافت می‌کند.

کد: 
function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i<ca.length; i++)   {

  var c = ca[i].trim();

  if (c.indexOf(name)==0) return c.substring(name.length,c.length);  }

return ""; }

برای دریافت یک کوکی که از پیش ساخته شده از این تابع استفاده می‌کنیم که پارامتر آن cname -نام کوکی- است ، متغیر name نام کوکی را نگهداری می‌کند. متغیر آرایه‌ای ca کوکی را بصورت جدا جدا دریافت می‌کند. سپس با کمک حلقه آرایه ca را بررسی می‌کنیم و تمام مقادیر آن را می‌خوانیم. اگر کوکی پیدا شود مقدار آن را ارسال می‌کنیم و اگر کوکی یافت نشود مقدار «""» را ارسال می‌کنیم.

تابع خواندن و بررسی کوکی checkCookie
این تابع بررسی می‌کند که آیا کوکی ساخته شده است یا نه! اگر کوکی وجود داشته باشد پیغام خوش آمد گویی را نشان می‌دهد اما اگر کوکی وجود نداشته باشد، کادری (جعبه دستور) را برای دریافت نام کاربر نشان داده و آن کوکی را با اعتبار یک سال ذخیره می‌کند.

کد: 
function checkCookie() {

var user=getCookie("username");

if (user != "") {

  alert("خوش آمدید  " + user);

  } else   {

  user = prompt("نام خود را وارد کنید:","");

  if (user!="" && user!=null)    {

    setCookie("username",user, 365);

    } } }

نکته قابل توجه اجرای این تابع است که زمان بالا آمدن برگه صورت می‌گیرد:

کد: 
<body onload="checkCookie()">

**Ghoghnus**

(۲۴-مرداد-۱۳۹۶, ۱۵:۵۹:۱۰)rasamweb نوشته است: برای برنامه نویسی اندرود حتما باید جاوا بلد بود؟

سلام
نه اجباری نیست!شما میتونید از زبان های دیگه هم استفاده کنید

موضوعات مرتبط با این موضوع...
موضوع		نویسنده	پاسخ	بازدید	آخرین ارسال
	دستور جایگزینی در جاوا اسکریت	javad917	14	3,397	۲۲-دى-۱۳۹۸, ۱۷:۳۲:۴۷ آخرین ارسال: radiin5
	[آموزشی] حذف کلیه tooltip ها از صفحات وب سایت توسط جاوا اسکریپت	sitedar	0	2,323	۲۳-دى-۱۳۹۲, ۱۵:۵۸:۲۳ آخرین ارسال: sitedar
	[سوال] دانسته هاى جاوا اسكريپت	danial11	6	6,462	۲۸-بهمن-۱۳۹۱, ۲۲:۳۳:۴۲ آخرین ارسال: babyy
	خواندن یه فایل متنی توسط جاوا اسکریپت در صفحه وب	sepahbod	2	6,043	۰۹-بهمن-۱۳۹۱, ۱۳:۲۸:۰۳ آخرین ارسال: Ghoghnus
	برنامه نویسی برای موبایل با جاوا	Super Robot	0	2,929	۳۰-دى-۱۳۹۰, ۱۷:۵۵:۲۲ آخرین ارسال: Super Robot
	آموزش جاوا NetBeans	sajad_pro	0	4,581	۱۰-آبان-۱۳۹۰, ۱۹:۰۱:۱۱ آخرین ارسال: sajad_pro
	کمک در پروژه ی جاوا eclipse	arosakkk	0	3,103	۱۸-مرداد-۱۳۹۰, ۰۹:۰۵:۲۳ آخرین ارسال: arosakkk
	کمک : ساختن help در جاوا	m_noorbakhsh	0	2,578	۰۴-تير-۱۳۹۰, ۱۱:۰۷:۱۵ آخرین ارسال: m_noorbakhsh
	تاپیک جامع اموزش جاوا اسکریپت	dark-spy	0	3,269	۰۵-اردیبهشت-۱۳۹۰, ۰۰:۱۹:۱۲ آخرین ارسال: dark-spy
	6 کتاب رایگان و خوب pdf برای آموزش جاوا	ali_1500max	0	9,017	۰۵-آبان-۱۳۸۹, ۲۳:۵۰:۲۲ آخرین ارسال: ali_1500max

حالت موضوعی \| حالت خطی آموزشی زبان برنامه نویسی جاوا اسکریپت
نویسنده	پیام