درس سیزدهم- ایجاد تغییرات در برچسب های اچ تی ام ال و خروجی آنها
در درس پیشین به چگونگی ارتباط بین جاوا اسکریپت و برچسب‌های اچ تی ام ال پرداختیم. در این درس می‌خواهیم به قابلیت‌های بیشتری از این ارتباط اشاره کنیم.
تولید محتوای پویا
جاوا اسکریپت می‌تواند محتوای پویا برای خروجی برچسب‌های اچ تی ام ال بگذارد.
<!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>
همانطور که مشاهده می‌کنید متن نوشته شده توسط دو دکمه «پنهان کن» و «نمایش بده» ناپدید و باز پدیدار می‌شود.
شما میتوانید این عمل (پنهان کردن متن) را توسط رویداد دیگری مانند آوردن موس یا برداشتن آن و یا هر رویدادی که بهتر هدف شما را تامین می‌کند بکار بگیرید
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.