با عرض سلام خدمت شما دوستان و همراهان عزیز و ارجمندم.
درخدمت شما هستیم با ادامه آموزش جاوا اسکریپت ...
در این جلسه می خواهیم در مورد " خروجی های جاوا اسکریپت " صحبت کنیم :
جاوا اسکریپت در خودش ، نتایج و خروجی ها رو نشون نمیده !
خروجی هایی که جاوا اسکریپت به نمایش می گذاره در قالب 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>
کد بالا رو امتحان کنید.
این هم از این قسمت . تا الان در سطح مناسبی از جاوا اسکریپت قرار گرفتید.
موفق و پیروز باشید.
به قلم : سیدمحمدمهدی موسوی
برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید
برچسب : نویسنده : خنجی prog بازدید : 124 تاريخ : جمعه 15 مرداد 1395 ساعت: 0:05