خروجی ها و نحوه نمایش آنها در جاوا اسکریپت

حامد محمدیحامد محمدی
370 بازدید
خروجی ها و نحوه نمایش آنها در جاوا اسکریپت

خروجی ها و نحوه نمایش آنها در جاوااسکریپت موضوع مقاله امروز وب سایت پرنیان طرح می باشد.

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

همچنین ، نحوه نمایش هر یک از آنها برای کاربر را با هم تمرین خواهیم کرد.

تا انتهای مقاله همراه وب سایت پرنیان طرح باشید.

[cdb_box_content]

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

مقاله امروز وب سایت پرنیان ، به معرفی انواع خروجی ها و نحوه نمایش هر یک از آنها در زبان جاوا اسکریپت می پردازد.

این زبان برنامه نویسی بسیار آسان برای یادگیری و در عین حال بسیار کاربردی و جذاب است.

شما می توانید با استفاده از این زبان برنامه نویسی ، افکت های بسیار جذابی به صفحات وب سایت خود اضافه کنید.

قصد داریم تا در سری آموزش های جاوا اسکریپت ، تمامی امکانات این زبان مهیج را از ابتدایی تا پیشرفته در کنار شما تمرین کنیم.

شما عزیزان می توانید با مراجعه به این لینک ، از تمامی مقالات وب سایت پرنیان طرح در خصوص JavaScript ، دیدن فرمایید.

[/cdb_box_content]
[cdb_box_content]

جاوا اسکریپت می تواند داده ها را به روش های مختلف “نمایش” دهد:

  • نوشتن در یک عنصر HTML ، با استفاده از enterHTML.
  • نوشتن در خروجی HTML با استفاده از ()document.write .
  • نوشتن در جعبه هشدار ، با استفاده از ()windows.alert .
  • نوشتن در کنسول مرورگر ، با استفاده از ()console.log .

در ادامه مقاله، هر یک از این موارد را با هم تمرین و بررسی خواهیم کرد.

[/cdb_box_content]
[cdb_box_content]

استفاده از innerHTML

برای دسترسی به عنصر 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 است.

[/cdb_box_content]
[cdb_box_content]

استفاده از ()document.write

برای اهداف آزمایشی و تست کردن یک موضوع  ، استفاده از ()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  فقط باید برای آزمایش و تست یک نمونه کد استفاده شود.

 

[/cdb_box_content]
[cdb_box_content]

استفاده از ()window.alert

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

به مثال زیر توجه کنید:

[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 صرف نظر کنید.

 

[/cdb_box_content]

شی window در زبان برنامه نویسی جاوا اسکریپت یک شی جهانی یا به عبارتی همگانی است.

این به این معنی است که متغیرها variables ، خصوصیات properties و روش ها methods ،به طور پیش فرض متعلق به شیء پنجره هستند.

این موضوع همچنین بدان معنی است که تعیین کلمه کلیدی window اختیاری است.

به مثال زیر توجه کنید:

[php]

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>

[/php]

نتیجه این کد را از این لینک مشاهده و تمرین کنید.

[cdb_box_content]

استفاده از ()console.log

برای اشکال زدایی و انجام دیباگینگ، و نمایش داده ها ، می توانید ()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]

نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.

[/cdb_box_content]
[cdb_box_content]

دستور چاپ و پرینت در جاوا اسکریپت

جالب است بدانید که جاوا اسکریپت هیچگونه دستور یا متدی برای چاپ و پرینت ندارد.

شما نمی توانید از طریق دستورات  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]

نتیجه کد بالا را از این لینک مشاهده و تمرین کنید.

[/cdb_box_content]
دسته بندی آموزش JavaScript مقاله ها
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

22+ محصولات
400+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت