آموزش alert و innerHtml و colsole log و document write
در این بخش از آموزش جاوا اسکریپت از تاپ سایت 98 قصد داریم به سراغ آموزش دستورهای alert و innerHtml و colsole log و document write برویم و با ذکر مثال آنها را توضیح دهیم. کدها همه تست شده می باشند آنها را در یک فایل html ذخیره و اجرا نمایید تا نتیجه را مشاهده نمایید.
دستور innerHtml در جاوا اسکریپت
با استفاده از دستور innerHtml در جاوا اسکریپت می توانیم محتوای عنصر html را دریافت نماییم.
من برای نمایش دادن محتوای h1 از دستور alert استفاده کردم.
در مثال زیر تگ h1 دارای id ی t1 میباشد و محتوای آن TopSite98.com می باشد.
یک دکمه قرار داده ام و در رویداد onclick آن با دستور innerHtml محتوای آن را دریافت و با دستور alert نمایش داده ام.
کد زیر را در یک فایل html بنام topsite98.html کپی و ذخیره نمایید.
حال آن را اجرا نمایید . روی دکمه کلیک کنید متن TopSite98.com نمایش داده می شود.
پس از دریافت محتوا با دستور innerHtml می توانم کارهای زیادی انجام دهم مثلا متن را تغییر دهم. تغییر متن با html,css امکان پذیر نیست و یکی از امکانات جاوا اسکریپت (javascript) است.
مثال
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="t1">TopSite98.com</h1>
<a title="topsite98" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="alert(document.getElementById('t1').innerHTML)">Get</button>
</body>
</html>
تغییر محتوای عنصر با innerHtml
در مثال زیر محتوای عنصر html را با دستور innerHtml تغییر دادم.
یک تابع با function با نام m ایجاد کردم و سپس با دکمه و رویداد onclick آن را اجرا کردم.
مشاهده می کنید متن h1 با متن ali جابجا شد و تغییر کرد.
کد را در همان فایل بالا topsite98.html کپی کنید و ذخیره و سپس اجرا کنید و نتیجه را مشاهده نمایید.
مثال
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="t1">TopSite98.com</h1>
<a title="topsite98" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="m()">change</button>
<script>
function m() {
document.getElementById('t1').innerHTML = "ali";
}
</script>
</body>
</html>
دستور document write در جاوا اسکریپت
با دستور document write در جاوا اسکریپت می توان یک متن را چاپ کرد یا عنصری را به صفحه html اضافه کرد.
نکته مهم در مورد این دستور این است که هنگام اجرا تمامی عناصر html از صفحه پاک می شوند.
در مثال زیر تگ h1 و تگ a و یک دکمه در صفحه وجود دارد و نمایش داده می شود.
هنگام کلیک روی دکمه دستور document write باعث می شود که کل عناصر حذف و یک تگ h2 در صفحه نمایش داده شود.
مثال
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="t1">TopSite98.com</h1>
<a title="topsite98" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="m()">document write</button>
<script>
function m() {
document.write("<h2>تاپ سایت 98</h2>");
}
</script>
</body>
</html>
اگر تابع را به شکل زیر تغییر دهیم عدد 12 چاپ میشود.
document.write(3*4);
}
دستور alert در جاوا اسکریپت
از دستور alert در جاوا اسکریپت برای نمایش پیغام ها و هشدارها استفاده می کنیم.
در مثال زیر در رویداد کلیک ، دستور window.alert اجرا شده و پیغامی را چاپ می کند.
می توانیم از دستور alert بدون window هم استفاده کنیم.
مثال
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<a title="topsite98" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="window.alert('topsite98')">alert</button>
</body>
</html>
دستور console.log در جاوا اسکریپت
از دستور console.log در جاوا اسکریپت ، بیش برای خطایابی یا debugging استفاده می شود.
در مثال زیر عدد 8 تقسیم بر 2 شده است و عدد 4 را در خروجی نمایش می دهد.
کد زیر را در فایل topsite98.html کپی کرده ، ذخیره و اجرا نمایید.
بر روی دکمه کلیک کنید . کد اجرا می شود اما چیزی مشاهده نمی کنید.
برای مشاهده خروجی ، در مرورگر راست کلیک کرده ، و inspect یا inspect element را کلیک کنید .
در بخش console نتیجه را خواهید دید.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<a title="topsite98" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="console.log(8/2);">alert</button>
</body>
</html>
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-03-06 15:51:02
دانلود جاوا اسکریپت برای فایرفاکس
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید