تالار گفتمان nCIS.ir

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

در این جلسه می خواهیم در مورد " خروجی های جاوا اسکریپت " صحبت کنیم :

جاوا اسکریپت در خودش ، نتایج و خروجی ها رو نشون نمیده !
خروجی هایی که جاوا اسکریپت به نمایش می گذاره در قالب 4 ویژگی اصلی خواهد بود :

window.alert()
document.write()
innerHTML
onsole.log()

خوب اولین ویژگی یا window.alert() خروجی را در یک پنجره یا ویندوز به نمایش می گذاره :

<!DOCTYPE html>
<html>
<body>

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

<script>
window.alert(2 + 6);
</script>

</body>
</html>

خوب الان با این دستوری که ما دادیم ، انتظار می رود پاسخ جمع ، در یک پنجره اختصاصی و هوشمند به نمایش گذاشته بشه .

2 - استفاده از ویژگی document.write() برای نمایش خروجی جاوا اسکریپت در محتوای کلی سند html:

<!DOCTYPE html>
<html>
<body>

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

<script>
document.write(2 + 6);
</script>

</body>
</html>

با این دستور ، حاصل جمع به صورتی کاملا ساده در بین متن به نمایش گذاشته می شود.

نکته مهم : اگر این دستور را در یک دکمه بعد از محتوای دیگر بگذاریم ( با صفت onclick ) ، بعد از کلیک کردن روی دکمه ، بقیه محتوای داخلی سند حذف می شود و فقط حاصل عبارت درون دستور باقی می ماند ! مثل :

<!DOCTYPE html>
<html>
<body>

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

<button onclick="document.write(2 + 6)">Try it</button>

</body>
</html>

نکته مهم : از این دستور (document.write) فقط برای آزمایش کردن استفاده می شه !!! کاربرد زیادی ندارد.

3 - استفاده از innerHTML برای نمایش خروجی جاوا اسکریپت برای ایجاد رویداد روی یک محتوای مشخص :

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 2 + 6;
</script>

</body>
</html>

یادآوری : برای فراخوانی یک عنصر خاص از متد getElementById استفاده می کردیم .

نکته : در اکثر موارد ما از ویژگی (innerHTML) استفاده می کنیم . در واقع رایج ترین ویژگی برای گرفتن خروجی از جاوا اسکریپت هستش .

4 - گرفتن خروجی با استفاده از ویژگی (console.log) برای نمایش خروجی در قسمت console مرورگر :
برای دیدن این قسمت یعنی قسمت console کافیه انسپکت کنید! می توانید این قسمت را در تب ها پیدا کنید.

<!DOCTYPE html>
<html>
<body>

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

<script>
console.log(5 + 6);
</script>

</body>
</html>

کد بالا رو امتحان کنید.

این هم از این قسمت . تا الان در سطح مناسبی از جاوا اسکریپت قرار گرفتید.
موفق و پیروز باشید.
به قلم : سیدمحمدمهدی موسوی

smmm