آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

در جلسه پانزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش جاوا اسکریپت در HTML از وب سایت آموزش برنامه نویسی سورس باران.

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

جاوا اسکریپت صفحات HTML را پویاتر و تعاملی‌تر می‌کند. با استفاده از جاوا اسکرییپت در صفحات HTML، کاربران می‌توانند در بخش‌هایی از صفحه مشارکت کرده یا دستورالعمل‌هایی را اجرا کنند.

JavaScript makes HTML pages more dynamic and interactive.

آموزش تگ <script> در HTML

تگ <script> برای تعریف جاوا اسکریپت در سمت کلاینت به کار برده می‌شود. عنصر <script> یا حاوی دستورات (statement) جاوا اسکریپت است یا از طریق خصوصیت src به یک فایل خارجی اسکریپت اشاره می‌کند. استفاده‌های رایج از جاوا اسکریپت شامل تغییرات عکس، تایید اعتبار فرم و تغییرات داینامیک محتوا است. جاوا اسکریپت اغلب برای انتخاب یک عنصر HTML از روش document.getElementById(id) استفاده می‌کند. مثال جاوا اسکریپتی زیر عبارت “Hello JavaScript!” با id=”demo” در یک عنصر HTML نوشته می‌شود:

The <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

This JavaScript example writes “Hello JavaScript!” into an HTML element with id=”demo”:

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
پیشنمایش

 

مثال هایی از استفاده جاوا اسکریپت در Html

در ادامه چند نمونه از کارهایی که می‌توان با جاوا اسکریپت انجام داد را مشاهده می‌کنید. جاوا اسکریپت می‌تواند محتوای HTML را تغییر دهد :

 document.getElementById("demo").innerHTML = "Hello JavaScript!";
پیشنمایش

جاوا اسکریپت می‌تواند استایل‌های HTML را تغییر دهد:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
پیشنمایش

جاوا اسکریپت می‌تواند خصوصیت‌های HTML را تغییر دهد:

 document.getElementById("image").src = "picture.gif";
پیشنمایش

 

آموزش تگ <noscript> در HTML

تگ <noscript> برای ایجاد محتوای جایگزین برای کاربرانی به کار می‌رود که اسکریپت‌ها در مرورگرشان غیرفعال بوده و یا از مرورگری استفاده می کنند که از اسکریپت های سمت کاربر (کلاینت) پشتیبانی نمی‌کند:

 <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
پیشنمایش

 

آموزش استفاده از جاوا اسکریپت در قسمت Head یک صفحه وب

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

<!DOCTYPE html>
<html>
<head>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "sourcebaran";
}
</script>
 
</head>
<body>
 
<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
</body>
</html>

 

آموزش استفاده از جاوا اسکریپت در قسمت Body یک صفحه وب

در مثال زیر مشاهده خواهید کرد که دستورات جاوا اسکریپت میتوانند در قسمت Body یک صفحه ی HTML قرار بگیرند.

<!DOCTYPE html>
<html>
<body>
 
<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "sourcebaran";
}
</script>
 
</body>
</html>

 

آموزش فراخوانی فایل جاوا اسکریپت خارجی در HTML

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

<!DOCTYPE html>
<html>
<head>
 
<script src="test.js"></script>
 
</head>
<body>
 
<p id="test"></p>
 
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
</body>
</html>

در مثال زیر نحوه چگونگی فراخوانی فایل خارجی جاوا اسکریپت را در قسمت Body یک صفحه HTML مشاهده خواهید نمود.

2
3
4
5
6
7
8
9
	
<body>
 
<p id="test"></p>
 
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>
 
<script src="test.js"></script>
 
</body>

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج حرفه ای فیلم های آموزشی برنامه نویسی به زبان فارسی

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.