خروجی جاوا اسکریپت
خوش اومدین به سومین جلسه از دوره آموزش رایگان جاوا اسکریپت. ما در بخش قبلی یاد گرفتیم که چطور کد جاوا اسکریپت رو به فایل HTML اضافه کنیم. در این بخش قصد داریم بررسی کنیم که نتایج کدهای جاوا اسکریپت رو چطوری میتونیم. در واقع قراره ببینیم خروجی جاوا اسکریپت چی هست و چطوری برای ما قابل نمایش هست.
روش های دریافت خروجی از جاوا اسکریپت
نتایج کدهای جاوا اسکریپت با روش های زیر قابل نمایش هست:
- نمایش در بخش محتوای عناصر HTML با استفاده از innerHTML
- نمایش در فایل HTML با استفاده از document.write
- نمایش به صورت یه پیغام به صورت alert box با استفاده از window.alert
- نمایش خروجی در بخش کنسول مرورر با استفاده از console.log
استفاده از innerHTML
یکی از متداولترین روش های دسترسی به عناصر مختلف HTML در جاوا اسکریپت، استفاده از متد document.getElementById هست.
ما با استفاده از این صفت id یک عنصر HTML و استفاده از متد document.getElementById و خصوصیت innerHTML میتونیم محتوای عنصر دلخواه خودمون رو تغییر بدیم.
مثال زیر رو ببینید:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
همونطور که میبینید توی مثال بالا با روشی که بیان کردیم به محتوای تگ پاراگراف که id اون برابر با demo هست دسترسی پیدا کردیم و محتوای اون رو تغییر دادیم.
تغییر محتوای عناصر HTML توسط خصیصه innerHTML یک روش معمول برای نمایش دادهها توی HTML است که زیاد مورد استفاده قرار میگیره.
استفاده از document.write
این متد برای تست خروجی استفاده میشه و کاربرد عمومی در استفاده نهایی از کدها نداره. نمونه زیر رو ببینید:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
با توجه به اینکه هرگاه از document.write استفاده کنیم، تمامی عناصر HTML بارگزاری شده در صفحه حذف میشوند، استفاده از این شیوه در پروژه توصیه نمیشه و برای تست گزینه مناسبی است. البته کاربردهایی از document.write وجود داره که در پروژه نهایی هم قابل استفاده است که بسیار محدود هستند و در طول دوره به اونها اشاره میکنیم.
استفاده از window.alert
ما میتونیم با استفاده از یک alert box در خروجی محتوای خودمون رو نمایش بدیم:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
استفاده از console.log
ما از console.log برای خطایابی استفاده میکنیم:
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
ما در طول این دوره و در هنگام نوشتن کدهای جاوا اسکریپت به دفعات از این شیوه استفاده خواهیم کرد.
