اجرای جاوا اسکریپت در html

این جلسه میخوام در مورد استفاده از المنت های html و دسترسی به آنها از طریق جاوا اسکریپت استفاده کنم ، یک نکته را اول براتون بگم ممکن در متن هایی که من می نویسم به جای جاوا اسکریپت از جاوا استفاده کنم ولی شما یادتون باشه که این دو با هم فرق دارن و دیگه وقته درسه.

دسترسی توسط document.getElementById :

با استفاده از این دستور ما می توانیم به یک المان که دارای ID مشخصی هست یک مقدار بدهیم که این مقدار می تواند متن باشد به عنوان مثال این کد را امتحان کنید :

<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

در واقع در این کد ، مفسر کد یا همان مرورگر شما وظیفه تحلیل و انجام دستورات را بر عهده دارد و در واقع ابتدا توسط getElementById المانی را که دارای شناسه demo می باشد را در قسمت html کدها پیدا می کند و سپس بر اساس دستور innerHTML مقدار تعیین شده را در المان با شناسه اشاره شده را قرار می دهد.یادتون نره جای المان <p>...</p> شما می توانید از المان های دیگر هم استفاده کنید مثل : span,div,td,...

فکر کنم خیلی ساده باشه! :-)

 

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

نگران نباشید می دونم این مبحث را جلسه پیش گفتم اما یک نکته بود که خودمم تازه متوجه شدم برای همین این بخش را دوباره تکرار کردم ، پس اول دوباره نگاهی داشته باشیم که چطور خروجی می گرفتیم :

 <!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>

و اما نکته بسیار مهمی که وجود داره این هست اگر شما از document.write در پایان تگ body استفاده کنید کل محتویات صفحه پاک میشه و مقداری که مشخص کردید نمایش داده می شود کد زیر را امتحان کنید :

<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>
</body>
</html>

ناحیه کاربری