خانه آموزش HTML آموزش تگ های HTML آموزش تگ script در HTML

آموزش تگ script در HTML

توسط

۱۳۹۸-۰۳-۰۴

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ script در HTML با من همراه باشید.

آموزش تگ script در HTML

Free-Learn

تگ Script در HTML

تگ script تگی است که با استفاده از آن میتوان دستورات جاوااسکرپیت را در یک صفحه وب وارد/ایجاد کرد. (دستوراتی که میتوانند در سمت کاربر یا Client-Side اجرا شوند)

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

با استفاده از جاوااسکریپت میتوان به راحتی محتوا،عناصر و … را در یک صفحه وب تغییر داد و یا میتوان آنها را ایجاد نمود.

Free-Learn

مثال از تگ script در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : استفاده از جاوااسکرپیت در قسمت body صفحه وب

<body>

<p id="test"></p>

<script>
document.getElementById("test").innerHTML = "Salam Khobi?";
</script>

</body>

<body>

document.getElementById("test").innerHTML = "Salam Khobi?";

</script>

</body>

امتحان کنید

مثال شماره ۲ : استفاده از جاوااسکریپت در قسمت head صفحه وب

<head>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "Free-Learn";
}
</script>
 
</head>

<head>

function myFunction() {

document.getElementById("test").innerHTML = "Free-Learn";

}

</script>

</head>

امتحان کنید

مثال شماره ۳ : استفاده از فایل جاوااسکریپت خارجی (مجزا)

<!DOCTYPE html>
<html>
<head>
  <script src="files/test.js"></script>
</head>
<body>

<p id="test"></p>
<button type="button" onclick="myFunction()">اینجا کلیک کن</button>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button type="button" onclick="myFunction()">اینجا کلیک کن</button>

</body>

</html>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ script در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

جدول صفات تگ script در HTML

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

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت	مقدار	توضیح
async	async	مشخص میکند که یک اسکریپت بصورت نامتقارن و یا غیرهمزمان اجرا شود. (برای فایل اسکریپت خارجی)
charset	charset	نحوه کدگذاری کاراکترها را برای نمایش هرچه بهتر مشخص کرد. (برای فایل اسکریپت خارجی)
defer	defer	نحوه ی اجرای اسکریپت های موجود در یک صفحه را مشخص میکند. (برای فایل اسکریپت خارجی)
src	URL	مسیر/محل فایل جاوااسکریپت خارجی را مشخص میکند.
type	media_type	نوع محتوایی یا نوع رسانه محتوایی را مشخص میکند.
xml:space	preserve	مشخص میکند که فضای خالی (سفید) بین کدها حفظ شود یا خیر. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ script تنها از صفات عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

اگر از صفت src درون این تگ استفاده نماییم میتوان آن را بصورت تگ تنها نیز نوشت. (یعنی تگی که تگ پایان نداشته باشد) (همانند دستور زیر)

<script src="test.js">

1	<script src="test.js">

استفاده از صفت type در HTML4 یک صفت ضروری می باشد ولی در HTML5 استفاده از این صفت اختیاری می باشد.

صفت async یک صفت جدید/اضافه شده در HTML5 می باشد.

صفت xml:space در HTML5 منسوخ شده و بکل دیگه استفاده نمیشه.

با استفاده از تگ <noscript> نیز میتوان یک متن/محتوا بصورت دلخواه مشخص کرد تا اگر مرورگر کاربر از دستورات جاوااسکرپیت پشتیبانی نکرد، آن متن/محتوا برای کاربر به نمایش درآورده شود.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ script را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

script {
  display: none;
}

script {

display: none;

}