پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
خروجی ها و نحوه نمایش آنها در جاوااسکریپت موضوع مقاله امروز وب سایت پرنیان طرح می باشد.
در مقاله امروز قصد داریم تا انواع خروجی هایی که در زبان جاوااسکریپت وجود دارند و تولید می شوند را بررسی کنیم.
همچنین ، نحوه نمایش هر یک از آنها برای کاربر را با هم تمرین خواهیم کرد.
تا انتهای مقاله همراه وب سایت پرنیان طرح باشید.
با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح
مقاله امروز وب سایت پرنیان ، به معرفی انواع خروجی ها و نحوه نمایش هر یک از آنها در زبان جاوا اسکریپت می پردازد.
این زبان برنامه نویسی بسیار آسان برای یادگیری و در عین حال بسیار کاربردی و جذاب است.
شما می توانید با استفاده از این زبان برنامه نویسی ، افکت های بسیار جذابی به صفحات وب سایت خود اضافه کنید.
قصد داریم تا در سری آموزش های جاوا اسکریپت ، تمامی امکانات این زبان مهیج را از ابتدایی تا پیشرفته در کنار شما تمرین کنیم.
شما عزیزان می توانید با مراجعه به این لینک ، از تمامی مقالات وب سایت پرنیان طرح در خصوص JavaScript ، دیدن فرمایید.
جاوا اسکریپت می تواند داده ها را به روش های مختلف “نمایش” دهد:
- نوشتن در یک عنصر HTML ، با استفاده از enterHTML.
- نوشتن در خروجی HTML با استفاده از ()document.write .
- نوشتن در جعبه هشدار ، با استفاده از ()windows.alert .
- نوشتن در کنسول مرورگر ، با استفاده از ()console.log .
در ادامه مقاله، هر یک از این موارد را با هم تمرین و بررسی خواهیم کرد.
برای دسترسی به عنصر HTML ، جاوا اسکریپت می تواند از متد (document.getElementById (id استفاده کند.
ویژگی ID عنصر HTML را تعریف می کند.
ویژگی innerHTML محتوای HTML را تعریف می کند.
به مثال زیر توجه کنید:
[php]
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>
</body>
</html>
[/php]
نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.
تغییر دادن ویژگی innerHTML در یک عنصر HTML ، یک روش معمول برای نمایش داده ها در HTML است.
برای اهداف آزمایشی و تست کردن یک موضوع ، استفاده از ()document.write مناسب است:
به مثال زیر توجه کنید:
[php]
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
[/php]
نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.
با استفاده از ()document.write پس از بارگیری یک سند HTML ، تمام سند HTML موجود حذف خواهد شد.
به مثال زیر توجه کیند.
[php]
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type=”button” onclick=”document.write(5 + 6)”>Try it</button>
</body>
</html>
[/php]
نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.
متد ()document.write فقط باید برای آزمایش و تست یک نمونه کد استفاده شود.
می توانید از یک جعبه پیغام برای نمایش محتوا و اطلاعات مورد نظر خود استفاده کنید.
به مثال زیر توجه کنید:
[php]
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
[/php]
نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.
در کد نویسی در این دستور می توانید حتی از نوشتن کلمه کلیدیwindow صرف نظر کنید.
برای اشکال زدایی و انجام دیباگینگ، و نمایش داده ها ، می توانید ()console.log در مرورگر را فراخوانی کنید.
درباره اشکال زدایی و دیباگینگ، در مقالات بعدی توضیح مفصل خواهیم داد.
به مثال زیر توجه کنید:
[php]
<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keybord will activate debugging.</p>
<p>Then select “Console” in the debugger menu.</p>
<p>Then click Run again.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
[/php]
نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.
جالب است بدانید که جاوا اسکریپت هیچگونه دستور یا متدی برای چاپ و پرینت ندارد.
شما نمی توانید از طریق دستورات JavaScript به دستگاه های خروجی دسترسی پیدا کنید.
تنها استثناء موجود این است که می توانید دستور window را فراخوانی کنید.
متد ()print نیز در مرورگر برای چاپ محتوای پنجره فعلی استفاده می شود.
به مثال زیر توجه کنید:
[php]
<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick=”window.print()”>Print this page</button>
</body>
</html>
[/php]
نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.
