تکین وب | آموزش برنامه نویسی
تکین وب | آموزش برنامه نویسی

خروجی های جاوا اسکریپت

۱۳ دی ۱۳۹۴

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

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

 

۱ – () window.alert

۲ – () document.write

۳ – innerHTML

۴ – () console.log

 

() window.alert با استفاده از این تابع میتوانیم متن و خروجی دستورات خود را در قالب یک کادر و به صورت هشدار نمایش دهیم.

<!DOCTYPE html>
<html>
<body>
<script> window.alert(5 + 6); </script>
</body>
</html>

و همچنین به شکل زیر می توانیم متن دلخواه خود را در کادر هشدار نمایش دهیم:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<script> window.alert("متن دلخواه شما"); </script>
</body>
</html>

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

() document.write از این تابع میتوانیم برا نمایش خروجی در همان قسمتی از صفحه html که فراخوانی کرده ایم استفاده کنیم. از این روش بیشتر برای اهداف تستی استفاده می شود.

توجه داشته باشید اگر بعد از بارگذاری کامل صفحه html این تابع را فراخوانی کنیم تمام محتویات صفحه پاک می شود و خروجی جاوا اسکریپت جایگزین آنها می شود.

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<script> document.write("متن دلخواه شما"); </script>
</body>
</html>

innerHTML می توانیم با استفاده از این ویژگی محتویات یک تگ html را تغییر دهیم.

روش کار به این شکل است که ابتدا باید یک تگ را با استفاده از تابع (document.getElementById (id انتخاب کنیم. برای انتخاب بایستی ما برای تگ خود یک ID یا شناسه تعریف میکنیم و سپس ID تعریف شده را در تابع ذکر شده قرار دهیم. با این عمل ما میتواینم به تگ مورد نظر دسترسی داشته باشیم

حال با مقدار دهی به ویژگی innerHTML میتوانیم محتویات تگ مورد نظر خود را تغییر دهیم. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>
<h1 id="id name">Web Page</h1>
<script>
document.getElementById("id name").innerHTML = "My Web Page";
</script>
</body>
</html> 

اگر قطعه کد بالا را اجرا کنید خواهید دید که محتویات درون تگ h1 همان مقداری را نمایش می دهد که ما در ویژگی innerHTML مقدار دهی کردیم

() console.log در واقع با استفاده از این تابع میتوانیم لوگ توید کنیم و خروجی دستورات خود را به صورت لوگ مشاهده کنیم

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

برای این کار دکمه ی F12 را بزنید و بعد تب console را انتخاب کنید. اگر صفحه ای حاوی این کد (تابع) باشد ما میتوانیم از این قسمت خروجی را مشاهده کنیم.

<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>

درباره ی کمال قره جه لو

دیدگاه ها

یک دیدگاه ارسال شده !

  1. یونس گفت:

    عالی و مفید و خلاصه، سپاس فراوان

دیدگاه خود را به ما بگویید.

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