آموزش 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>
The post آموزش Html؛ آموزش جاوا اسکریپت در HTML appeared first on آموزش برنامه نویسی.
