آموزش و دوره های رایگان برنامه نویسی( طراحی وب و اندروید) سایتاپ سئو

در سایتاپ با آموزش های اندروید،asp.et MVC و همچنین SEO و بهینه سازی وب با همراه باشید.همچنین با اخبار روز در زمینه های امنیت و هک و اخبار روز تکنولوژی را در سایت ما میتوانید بخوانید.


آموزش document.write و innerHTML در JS

سایتاپ سئو

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

در این قسمت از توضیحات جاوا اسکریپت، به نمایش خروجی در اطلاعات در جاوا اسکریپت میپردازیم.در  JS با چهار روش میتوانیم خروجی بگیریم.به روش های : innerHTML و document.write .این ها راه های متفاوت گرفتن خروجی در جاوا اسکریپت هستند که در ادامه توضیح خوهیم داد.

 

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

خروجی را درون المنت html  قرار دهد با دستور innerHTML

خروجی را داخل خروجی html  قرار دهد با دستور document.write

و نوع نمایش خروجی های زیر را در پست های بعدی نمایش میدهیم و در این جلسه فقط موارد بالا را توضیح خواهیم داد.

خروجی را در مسیج باکس به صورت دیالوک نمایش دهد با دستور window.alert

خروجی را کنسول مرورگر نمایش دهد با دستور console.Log  

 

 

روش استفاده از دستور  innerHTML در جاوا اسکریپت

با استفده از متد  document.getElementById(id) میتوانیم المنت مورد نظرمان را بگیریم و در ادامه با متد innerHTML به درون این المنت دسترسی پیدا کرد.

مثال: به کد زیر توجه نمایید.

 


<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My First Paragraph.</p>

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

<script>

document.getElementById("demo").innerHTML = 5 + 6;

</script>

</body>

</html>

 

در این مثال که خروجی اش به شرح زیر است،جاوا اسکریپت المنت با آی دی demo را پیدا میکند و درونش حاصل جمع 5 و 6 را میگذارد.یعنی عدد 11 .

تصویر شماره 1

 

روش استفاده از document.write در زبان جاوا اسکربپت

راه دیگر نمایش اطلاعات در زبان جاوا اسکریپت،  document.write است.در این روش نیز مانند روش بالایی اطلاعات را در مرورگر نمایش میدهیم.

مثال: به کد زیر دقت کنید.


<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script>

document.write(5 + 6);

</script>

</body>

</html>

در این کد ما با استفاده از دستور document.write قصد داریم خروجی مدنظر را نمایش دهیم.خروجی باید حاصل جمع عدد های 5 و 6 باشد که محموعشان 11 است.

 

تصویر شماره 2

استفاده از document.write بدون گذاشتن آن در تگ اسکریپت،باعث میشود تمام المنت های صفحه را پاک کند.

مثال:به کد زیر توجه کنید.


<!DOCTYPE html>

<html>

<body>



<h2>My First Web Page</h2>

<p>My first paragraph.</p>



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



</body>

</html>

 

تصویر شماره 3

حال شاید برایتان جالب باشد ولی اگر روی دکمه کلیک کنیم،خروجی ما تصویر زیر خواهد بود.

تصویر شماره 4

 

خوب همانطور که گفتیم،چون در تگ مشخصی دستور document.write را ننوشتیم،تمام صفحه را گرفت و همه المان های درون صفحه را حذف کرد و در عوض خروجی خود،یعنی عبارت "11" را چاپ کرد.

 

 

به پایان آموزش این قسمت از گروه سایت اپ رسیدیم.امیدواریم برایتان مفید واقع شده باشد.

دسته بندی
programming
جاوا-اسکریپت

برگشت به صفحه اصلی

سایتاپ درباره ما

#به نام یکتا برنامه نویس هستی


تلگرام من

alitaheri_4

بنده علی طاهری دانشجوی رشته نرم افزار و علاقه مند به برنامه نویسی هستم.اولین بار در 14 سالگی با وبلاگ نویسی پا در عرصه وب و سئو گذاشتم.در حال حاضر در برنامه نویسی اندروید با زبان جاوا و تحت وب با asp.net فعالیت دارم.همچنین بسیار علاقه مند به سئو هستم.