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

از ویکی کد
(تفاوت) → نسخهٔ قدیمی‌تر | نمایش نسخهٔ فعلی (تفاوت) | نسخهٔ جدیدتر ← (تفاوت)
پرش به ناوبری پرش به جستجو

الگو:منو عمودی جاوااسکریپتروش‌های نمایش خروجی در جاوااسکریپت [۱]

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

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

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

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

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

استفاده از innerHTML

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

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

 1 Example
 2 <!DOCTYPE html>
 3 <html>
 4 <body>
 5 
 6 <h1>My First Web Page</h1>
 7 <p>My First Paragraph</p>
 8 
 9 <p id="demo"></p>
10 
11 <script>
12 document.getElementById("demo").innerHTML = 5 + 6;
13 </script>
14 
15 </body>
16 </html>
تغییر دادن مقدار ویژگی innerHTML یک عنصر HTML راهی مناسب برای نمایش داده‌ها در HTML است.

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

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

 1 Example
 2 <!DOCTYPE html>
 3 <html>
 4 <body>
 5 
 6 <h1>My First Web Page</h1>
 7 <p>My first paragraph.</p>
 8 
 9 <script>
10 document.write(5 + 6);
11 </script>
12 
13 </body>
14 </html>
استفاده از دستورdocument.write()بعد از اینکه صفحه HTML به طور کامل لود شد موجب می‌شود تا برای نمایش داده‌ها، داده‌هایی که در حال نمایش به کاربر هستند پاک شده و سپس محتوای مد نظر شما نمایش داده شود:
 1 Example
 2 <!DOCTYPE html>
 3 <html>
 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>
12 </html>
متدdocument.write()فقط باید برای عمل تست استفاده شود.

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

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

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

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

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

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

منابع آموزشی

الگو:منو افقی جاوااسکریپت