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

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

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

زبان جاوا اسکریپت می‌تواند داده‌ها را در روش‌های گوناگونی «نمایش» دهد:[۱]

نمایش در قالب یک عنصر HTML با استفاده از innerHTML.

نمایش در خروجی فایل HTML با استفاده از دستور document.write().

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

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

استفاده از innerHTML

در زبان جاوا اسکریپت، برای دسترسی به یک عنصر HTML می‌بایست از متد document.getElementById(id) استفاده کنید.

هر عنصر HTML خاصیتی با نام شناسه (id) دارد که می‌توان به وسیله مقدار آن خاصیت به آن عنصر دسترسی پیدا کرد. ویژگی innerHTML محتوای عناصر HTML را مشخص می‌کند.

 1 <!DOCTYPE html>
 2 
 3 <body>
 4 
 5 <h1>My First Web Page</h1>
 6 <p>My First Paragraph</p>
 7 
 8 <p id="demo"></p>
 9 
10 <script>
11 document.getElementById("demo").innerHTML = 5 + 6;
12 </script>
13 
14 </body>


تغییر دادن مقدار ویژگی innerHTML یک عنصر HTML راهی مناسب برای نمایش داده‌ها در HTML است.

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

برای اهداف آزمایشی و تست، معمول است که از دستور document.write() استفاده می‌کنند.

 1 <!DOCTYPE html>
 2 
 3 <body>
 4 
 5 <h1>My First Web Page</h1>
 6 <p>My first paragraph.</p>
 7 
 8 <script>
 9 document.write(5 + 6);
10 </script>
11 
12 </body>


استفاده از دستور document.write() بعد از اینکه صفحه HTML به طور کامل لود شد موجب می‌شود تا برای نمایش داده‌ها، داده‌هایی که در حال نمایش به کاربر هستند پاک شده و سپس محتوای مد نظر شما نمایش داده شود:
 1 Example
 2 <!DOCTYPE html>
 3 
 4 <body>
 5 
 6 <h1>My First Web Page</h1>
 7 <p>My first paragraph.</p>
 8 
 9 <button type="button" onclick="document.write(5 + 6)">Try it</button>
10 
11 </body>
متدdocument.write()فقط باید برای عمل تست استفاده شود.

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

شما می‌توانید از یک پنجره هشدار برای نمایش داده‌های خود استفاده کنید:

 1 <!DOCTYPE html>
 2 
 3 <body>
 4 
 5 <h1>My First Web Page</h1>
 6 <p>My first paragraph.</p>
 7 
 8 <script>
 9 window.alert(5 + 6);
10 </script>
11 
12 </body>


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

برای اهداف اشکال زدایی (به انگلیسی: Debug) شما می‌توانید از متد console.log() برای نمایش داده استفاده کنید.

شما در فصل‌های آینده در مورد عمل اشکال زدایی (به انگلیسی: Debug) بیشتری را خواهید آموخت.
1 <!DOCTYPE html>
2 
3 <body>
4 
5 <script>
6 console.log(5 + 6);
7 </script>
8 
9 </body>

منابع آموزشی