فراخوانی جاوا اسکریپت در html

هدایت عباسی آموزش HTML

در این بخش از آموزش html از تاپ سایت 98 به سراغ فراخوانی جاوا اسکریپت در html همراه با چندین مثال و توضیح کامل می رویم. در این آموزش یاد می گیرید چگونه باید از جاوااسکریپت استفاده نمایید. روش اتصال جاوا اسکریپت به html را می آموزید.

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

برای استفاده از جاوا اسکریپت در html از تگ script استفاده می کنیم.

جاوا اسکریپت (javascript) کاربردهای مختلفی دارد که با آنها در این آموزش و آموزش های دیگر آشنا خواهیم شد.

تگ script

تگ script در html برای فراخوانی جاوا اسکریپت استفاده می شود.

مثال زیر را مشاهده نمایید.

در مثال زیر یک تگ p با آی دی ali داریم که دارای مقدار abbasi می باشد.

با استفاده از جاوا اسکریپت می خواهیم مقدار آن را تغییر دهیم.

برای این کار ابتدا یک دکمه قرار داده ایم که با کلیک روی ان ، تابعی بنام myFunc را فراخوانی می کنیم.

در تگ script کد جاوا اسکریپت را قرار داده ایم.

در کد جاوا اسکریپت با استفاده از getElementById و نام آی دی و innerHTML محتوای داخل پاراگراف را تغییر می دهیم و مقدار جدید TopSite98.com را قرار می دهیم.

مثال

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<button type="button" onclick="myFunc()">Click Me!</button>
<p id="ali">abbasi</p>
<script>
function myFunc() {
document.getElementById("ali").innerHTML = "TopSite98.com";
}
</script>
</body>
</html>

تغییر css با جاوا اسکریپت

در این بخش با یک کاربرد جاوا اسکریپت آشنا می شویم.

در مثال زیر ، تغییر css با جاوا اسکریپت را مشاهده می کنید.

یکی از جذابیت های جاوا اسکریپت همین تغییراتی است که روی صفحات html می دهد.

در مثال زیر با کلیک روی دکمه ، تابع جاوا اسکریپت فراخوانی می شود و چندین استایل روی تگ p اعمال می شود یعنی تغییر سایز متن ، تغییر رنگ پس زمینه ، تغییر padding و توپر شدن متن .

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<button type="button" onclick="myFunc()">Click Me!</button>
<p id="ali">TopSite98.com</p>
<script>
function myFunc() {
document.getElementById("ali").style.fontSize = "30px";
document.getElementById("ali").style.fontWeight = "bold";
document.getElementById("ali").style.backgroundColor = "red";
document.getElementById("ali").style.padding = "40px";
}
</script>
</body>
</html>

تگ noscript

تگ noscript برای ارائه یک محتوای جایگزین برای کاربرانی که اسکریپت ها را در مرورگر خود غیرفعال کرده اند و یا یک مرورگر دارند که اسکریپت های سمت سرویس گیرنده را پشتیبانی نمی کند استفاده می شود.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<p id="ali"></p>
<script>
document.getElementById("ali").innerHTML = "TopSite98.com";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>

نمایش تاریخ با html , javascript

برای نمایش تاریخ با html , javascript ، ابتدا در تگ p متن date را نوشته ایم و سپس اسکریپت را در همان تگ قرار داده ایم.

در این صورت تاریخ در کنار date نمایش داده می شود.

در بخش زیر تاریخ را با استفاده از javascript نمایش می دهیم.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.com</h1>
<p>date:
<script>
document.write(Date());
</script>
</p>
</body>
</html>

جاوا اسکریپت را چگونه فعال کنیم؟

ابتدا به این سوال پاسخ می دهیم : جاوا اسکریپت را چگونه فعال کنیم؟

اگر با کدهای جاوا اسکریپت (javascript) آشنا باشید می توانید از آنها در html و حتی php استفاده نمایید.

برای فعال کردن یا استفاده از جاوا اسکریپت می توانید از روش های زیر استفاده کرد.

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

محل نوشتن کدهای جاوا اسکریپت کجاست؟ برای نوشتن کدهای جاوا اسکریپت می توانید از 3 روش استفاده نمایید:

روش اول قرار دادن کد جاوا اسکریپت در قسمت head .

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

روش سوم قرار دادن کد ها در فایل اکسترنال یا فایل خارجی با پسوند js .

اتصال فایل جاوا اسکریپت به html

اگر کدهای جاوا اسکریپت را در فایل اکسترنال (خارجی) بنویسید باید آن را به فایل html متصل نمایید.

برای اتصال فایل جاوا اسکریپت به html از تگ script استفاده می کنیم.

سپس آدرس فایل را در ویژگی src آن می نویسیم مثلا :

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

جاوا اسکریپت چگونه کار می کند؟

سوال دیگر شما : جاوا اسکریپت چگونه کار می کند؟

بگذارید مثالی بزنیم. ما یک تگ h1 را در صفحه قرار داده ایم و برای آن کلاس بنام bg2 قرار داده ایم.

حال با استفاده از getElementsByClassName به آن عنصر html دسترسی پیدا می کنیم و رنگ پس زمینه آن را تغییر می دهیم.

<!DOCTYPE html>
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
</head>
<body>
<h1 class="bg2">TopSite98.com</h1>
<a title="topsite98" href="https://topsite98.com/">topsite98</a>
<button type="button" onclick="document.getElementsByClassName('bg2')[0].style.backgroundColor='green'">bg change</button>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید