انعطافی برای قرار دادن کد جاوااسکریپت در هر جای سند HTML ارائه شده است. با این حال، روش‌های مورد ترجیح برای قرار دادن جاوااسکریپت در یک فایل HTML به شرح زیر است:
کد نوشته شده در بخش <head>…</head>.
کد نوشته شده در بخش <body>…</body>.
کد نوشته شده در بخش‌های <body>…</body> و <head>…</head>.
استفاده از یک فایل خارجی و سپس قرار دادن آن در بخش <head>…</head>.
در ادامه خواهیم دید که چگونه می‌توانیم جاوااسکریپت را به روش‌های مختلف در یک فایل HTML قرار دهیم.
جاوااسکریپت در بخش <head>...</head>
اگر می‌خواهید یک اسکریپت را در یک رویداد خاصی مانند زمانی که کاربری جایی را کلیک میکند، اجرا کنید، آن اسکریپت را در بخش head قرار می‌دهید به شرح زیر:
کد بالا یک کلید را نمایش میدهد که به محض زدن روی آن یک Alert نمایش داده میشود که مقدار سلام دنیا را نمایش میدهد.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("سلام دنیا")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>جاوااسکریپت در بخش <body>...</body>
اگر نیاز دارید که یک اسکریپت هنگام بارگذاری صفحه اجرا شود تا این اسکریپت محتوا در صفحه را تولید کند، آن اسکریپت را در بخش <body> از سند قرار دهید. در این حالت، شما هیچ تابعی با استفاده از جاوااسکریپت تعریف نخواهید کرد. به کد زیر نگاهی بیندازید:
کد بالا یک صفحه را ایجاد میکند که یک متن سلام دنیا در ابتدا و یک متن این یک تیگ p است را نمایش میدهد.
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("سلام دنیا")
//-->
</script>
<p>این یک تگ p است </p>
</body>
</html>جاوااسکریپت در بخش <head>...</body>
شما می‌توانید کد جاوا اسکریپت خود را همزمان در بخش‌های <head> و <body> قرار دهید به شرح زیر:
کد بالا ابتدا با استفاده از document.write(“سلام دنیا”) یک متن سلام دنیا را چاپ میکند، یک کلید دارد که با زدن برروی آن Alert سلام دنیا نمایش داده میشود.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("سلام دنیا")
}
//-->
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("سلام دنیا")
//-->
</script>
<input type = "button" onclick = "sayHello()" value = "سلام دنیا" />
</body>
</html>جاوااسکریپت در فایل خارجی
زمانی که شما به صورت گسترده‌تر با جاوا اسکریپت کار می‌کنید، احتمالاً متوجه می‌شوید که مواردی وجود دارد که شما از کد جاوا اسکریپت یکسان روی چندین صفحه مختلف یک وب‌سایت استفاده می‌کنید.
شما محدود به نگهداری کد یکسان در چندین فایل HTML نیستید. تگ اسکریپت یک مکانیزم را فراهم میکند که به شما اجازه میدهد که کد جاوا اسکریپت را در یک فایل خارجی ذخیره کرده و سپس آن را در فایل‌های HTML خود اضافه کنید.
اینجا یک مثال است که نشان میدهد چگونه می‌توانید یک فایل جاوا اسکریپت خارجی را در کد HTML خود با استفاده از تگ اسکریپت و ویژگی src خود اضافه کنید.
برای استفاده از جاوا اسکریپت از یک منبع فایل خارجی، شما باید کل کد منبع جاوا اسکریپت خود را در یک فایل متنی ساده با پسوند “.js” بنویسید و سپس آن را همانند نمونه بالا در فایل HTML خود درج کنید.
به عنوان مثال، محتوای زیر را در فایل filename.js نگه دارید و سپس می‌توانید تابع sayHello را در فایل HTML خود پس از اضافه کردن فایل filename.js استفاده کنید.
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>function sayHello() {
alert("سلام دنیا")
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام