شما میتوانید کد های جاوا اسکریپت را در هر جایی از یک سند HTML قرار دهید. با این حال با ترجیح ترین روش ها برای قرار دادن کد های جاوا اسکریپت در یک فایل HTML به شرحی است که در زیر آمده است :
[*]کد جاوا اسکریپت در قسمت
[*]کد جاوا اسکریپت در قسمت
[*]کد جاوا اسکریپت در قسمت
و
[*]نوشتن کد های جاوا اسکریپت در یک فایل جداگانه و سپس قرار دادن ارجاعی از آن در قسمت
در بخش زیر خواهیم دید که چگونه میتوان کد های JavaScript را به روش های مختلف در یک فایل HTML گنجاند.
جاوا اسکریپت در قسمت ...
اگر میخواهید اسکریپتی داشته باشید که در موقع رخداد بعضی از رویداد ها اجرا شود، مانند وقتی که یک کاربر روی چیزی کلیک میکند، بهتر است آن اسکریپت را به شکلی که در زیر نشان داده شده است در قسمت head قرار دهید :
کد:
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
کد بالا نتیجه ای به شکل زیر تولید خواهد کرد :
در نمونه مثال بالا کاربر بعد از کلیک کردن روی دکمه ی
پیغامی را در مرورگر مشاهده خواهد کرد.
در نمونه مثال زیر هم با کلیک کردن روی دکمه tryit ، تابع ()myFunction فراخوانی خواهد شد :
کد:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
در نمونه مثال بالا در ابتدا محتوای پاراگراف با شناسه ی demo مقدار "
" است. بعد از کلیک روی دکمه ی Try it مقدار پاراگراف به مقدار
تغییر خواهد کرد.
جاوا اسکریپت در قسمت ...
اگر شما نیاز دارید یک اسکریپت در هنگام بارگذاری صفحه اجرا شود، مانند زمانی که یک اسکریپت محتوایی را در یک صفحه تولید میکند، بهتر است آن اسکریپت را در قسمت body از سند خود قرار دهید. در این مورد شما نباید تابعی را با استفاده از جاوا اسکریپت تعریف کنید. نگاهی به نمونه کد زیر بیندازید :
کد:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<p>This is web page body </p>
</body>
</html>
نمونه مثال بالا نتیجه ی زیر را تولید خواهد کرد :
کد:
Hello World
This is web page body
جاوا اسکریپت در قسمت و
شما میتوانید کدهای جاوا اسکریپت خود رابه صورتی که در زیر آمده است هم در قسمت head و هم در قسمت body به طور همزمان قرار دهید :
کد:
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("Hello World")
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
کدهای JavaScript در یک فایل خارجی
موقعی که کار با جاوا اسکریپت را به طور گسترده آغاز کردید، به خوبی خواهید فهمید که مواردی پیش خواهد آمد که باید از یک کد جاوا اسکریپت یکسان در چندین صفحه از یک سایت استفاده کرد.شما محدود به این نخواهید بود که یک کد جاوا اسکریپت یکسان را در چندین فایل HTML قرار دهید.
مکانیزمی وجود دارد که به شما اجازه میدهد کد های جاوا اسکریپت را در یک فایل خارجی قرار داده و سپس ارجاعی از این فایل را در صفحات HTML ایی که مخواهند از آن استفاده کنند درج کنید. در اینجا مثالی است که نشان میدهد چطور میتوان ارجاعی از یک فایل خارجی جاوا اسکریپت را در سند HTML قرار دهید. این کار با استفاده از تگ script صفت src آن انجام میشود :
کد:
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>
برای استفاده از یک فایل خارجی جاوا اسکریپت ، شما باید تمام کد جاوا اسکریپت خود را در یک فایل متنی با پسوند js. قرار داده و سپس آن را به شکل بالا در سند مورد نظر درج کنید.برای مثال میتوانید محتوای زیر را در یک فایلی با نام filename.js قرار داده و سپس بعد از قرار دادن ارجاعی از این فایل خارجی، از نام sayHello برای فراخوانی این تابع استفاده کنید.
کد:
function sayHello() {
alert("Hello World")
}
.png)
