آموزش جاوا اسکریپت – چاپ خروجی در جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت, نحوه چاپ خروجی در جاوا اسکریپت را یاد می گیرید.

شرایط خاص هستند که شما نیاز به چاپ خروجی از کد جاوا اسکریپت خود دارید.برای مثال, ممکن است که مقدار یک متغیر را بخواهید ببینید, یا یک پیام را در console مرورگر برای کمک به دیباگ کردن در کد خود و غیره.. استفاده کنید.

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

چاپ خروجی در کنسول مرورگر

شما به راحتی می توانید پیام یا داده را با console.log() چاپ یا رایت کنید. این کار بسیار ساده ولی قدرتمند برای ایجاد خروجی با جزییات است.

// Printing a simple text message
console.log("Hello World!"); // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 30

// Printing a simple text message

console.log("Hello World!"); // Prints: Hello World!

// Printing a variable value

var x = 10;

var y = 20;

var sum = x + y;

console.log(sum); // Prints: 30

نکته: برای دسترسی به کنسول مرورگر, اول کلید f12 روی کیبورد را بزنید تا developer tools باز شود و بعد تب console را باز کنید که مانند این اسکرین شات است

نمایش خروجی در باکس Alert

شما می توانید از باکس های alert برای نمایش پایم یا چاپ داده ها برای کاربر استفادع کنید.

یک باکس alert توسط متد alert() ایجاد می شود.

// Displaying a simple text message
alert("Hello World!"); // Outputs: Hello World!

// Displaying a variable value 
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30

// Displaying a simple text message

alert("Hello World!"); // Outputs: Hello World!

// Displaying a variable value

var x = 10;

var y = 20;

var sum = x + y;

alert(sum); // Outputs: 30

چاپ خروجی در صفحه مرورگر

می توانید از متد document.write() برای نمایش محتوا در سند فعلی فقط زمانی که داکیومنت تجزیه شده باشد(بعدا در باره DOM,BOM یاد می گیریم.), استفاده کنید.

// Printing a simple text message
document.write("Hello World!"); // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30

// Printing a simple text message

document.write("Hello World!"); // Prints: Hello World!

// Printing a variable value

var x = 10;

var y = 20;

var sum = x + y;

document.write(sum); // Prints: 30

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

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>

<button type="button" onclick="document.write('Hello World!')">Click Me</button>

<h1>This is a heading</h1>

<p>This is a paragraph of text.</p>

<button type="button" onclick="document.write('Hello World!')">Click Me</button>

قرار دادن خروجی در المان HTML

شما همچنین می توانید برای چاپ خروجی در جاوا اسکریپت, مقدار را در المان html با innerHTML قرار بدید.

به هر حال, قبل از آن نیاز است که المان را با متدی مثل getElementById() انتخاب کنید.

<p id="greet"></p>
<p id="result"></p>

<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";

// Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>

// Writing text string inside an element

document.getElementById("greet").innerHTML = "Hello World!";

// Writing a variable value inside an element

var x = 10;

var y = 20;

var sum = x + y;

document.getElementById("result").innerHTML = sum;

</script>

امیدوارم در این بخش آموزش جاوا اسکریپت, از چاپ خروجی در جاوا اسکریپت نهایت استفاده را برده باشید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – چاپ خروجی در جاوا اسکریپت

چاپ خروجی در کنسول مرورگر

نمایش خروجی در باکس Alert

چاپ خروجی در صفحه مرورگر

قرار دادن خروجی در المان HTML

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه