logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش alert و innerHtml و colsole log و document write

آموزش 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) است.

مثال

<!DOCTYPE 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="alert(document.getElementById('t1').innerHTML)">Get</button>
</body>
</html>

تغییر محتوای عنصر با innerHtml

در مثال زیر محتوای عنصر html را با دستور innerHtml تغییر دادم.

یک تابع با function با نام m ایجاد کردم و سپس با دکمه و رویداد onclick آن را اجرا کردم.

مشاهده می کنید متن h1 با متن ali جابجا شد و تغییر کرد.

کد را در همان فایل بالا topsite98.html کپی کنید و ذخیره و سپس اجرا کنید و نتیجه را مشاهده نمایید.

مثال

<!DOCTYPE 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 در صفحه نمایش داده شود.

مثال

<!DOCTYPE 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()">document write</button>
<script>
function m() {
document.write("<h2>تاپ سایت 98</h2>");
}
</script>
</body>
</html>

اگر تابع را به شکل زیر تغییر دهیم عدد 12 چاپ میشود.

function m() {
document.write(3*4);
}

دستور alert در جاوا اسکریپت

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

در مثال زیر در رویداد کلیک ، دستور window.alert اجرا شده و پیغامی را چاپ می کند.

می توانیم از دستور alert بدون window هم استفاده کنیم.

مثال

<!DOCTYPE html>
<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 نتیجه را خواهید دید.

<!DOCTYPE html>
<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

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.

  • کامنت ناشناس

    2022-03-06 15:51:02

    دانلود جاوا اسکریپت برای فایرفاکس