آموزش طراحی سایت (HTML CSS Javascript) | آتریا

محل قرارگیری کدهای JavaScript

محل قرارگیری کدهای JavaScript

محل قرارگیری کدهای JavaScript
Wiki
کدهای JavaScript در صفحه HTML باید بین تگهای <script> و <script/> قرار داده شود.
کدهای JavaScript را می توان در بدنه صفحه HTML (بین تگهای باز و بسته <body> و <body/>) و یا در قسمت <head> صفحه قرار داد.
تگ <script>
Wiki
از تگ <script>، برای وارد کردن کدهای JavaScript در صفحه HTML استفاده می شود.
تگهای باز و بسته <script> و <script/> می گوید، کدهای JavaScript کجا شروع و کجا پایان یافته است.
خطوط بین <script> و <script/> شامل کدهای JavaScript است:
<script>
alert("My First JavaScript");
</script>
مرورگر، کد JavaScript بین <script> و <script/> را ترجمه و اجرا می کند.
توجه:بدون تگ های باز و بسته <script> و <script/> ، مرورگر با دستورات بین آنها مانند یک متن معمولی برخورد می کند و آنها را عیناً در صفحه HTML نمایش می دهد. (خودتان امتحان کنید)
توجه: ممکن است برای تگ <script> خصوصیت type را تنظیم کنیم ("text/javascript"). نیاز به انجام این کار نیست، چون در تمام مرورگرها و در HTML5 زبان اسکریپت پیشفرض، JavaScript است.
کدهای JavaScript در بدنه صفحه HTML
Wiki
در مثال زیر، هنگام بارگذاری صفحه یا (onload)،خروجی HTML در قسمت <body> چاپ می شود:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
خودتان امتحان کنید »
همچنین در مثال زیر، تاریخ جاری سیستم، هنگام بارگذاری صفحه، داخل عنصر با شناسه "demo" نوشته می شود:
مثال (محل قرارگیری کدهای JavaScript)
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
خودتان امتحان کنید »
توجه: برای اطمینان بیشتر، کد JavaScript در پایین صفحه HTML قرار داده شده است (نباید قبل از ایجاد عنصر <p> کدمان اجرا شود)
توابع و رویدادها در JavaScript
Wiki
کدهای JavaScript در صفحه HTML، زمانی که صفحه بارگذاری شود (onload) اجرا خواهند شد. اما این چیزی نیست که ما همیشه نیاز داریم.
بعضی مواقع می خواهیم زمانی که یک رویداد خاص اتفاق می افتد، کدمان اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک می کند. در این مورد می توانیم کدمان را داخل یک تابع قرار دهیم.
رویدادها در حالت عادی با توابع ترکیب می شوند، مانند صدا زدن یک تابع هنگامی که رویداد رخ می دهد.
در آموزش های بعدی درباره توابع و رویدادهای JavaScript بیشتر خواهید آموخت.
اسکریبت ها در دو قسمت <body> و <head>
Wiki
می توان به صورت نامحدود، هر تعداد خط اسکریبت را در صفحه HTML قرار داد، و همچنین می توانید اسکریبت ها را همزمان در دو قسمت <body> و <head> بیاورید.
در حالت کلی، تمام توابع را در قسمت <head> صفحه و یا در پایین صفحه قرار می گیرد. این روش باعث می شود که تداخلی با محتویات صفحه پیش نیاید.
کدهای JavaScript در قسمت <head>
Wiki
در مثال زیر، زمانی که روی دکمه کلیک شود یا به عبارتی رویداد onclick عنصر مورد نظر رخ دهد، تابع ()displayDate صدا زده می شود:
مثال (محل قرارگیری کدهای JavaScript)
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
خودتان امتحان کنید »
همچنین در مثال ساده زیر، هنگامی که روی دکمه "Try it" کلیک شود، محتوای عنصر با شناسه "demo" تغییر می کند:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
خودتان امتحان کنید »
یک تابع JavaScript در قسمت <body>
Wiki
در این مثال، تابع "myFunction" در انتهای <body> قرار داده شده است و وقتی کاربر روی دکمه "Try it" کلیک کند، myFunction صدا زده می شود:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
خودتان امتحان کنید »
استفاده از یک فایل JavaScript خارجی
Wiki
کدهای JavaScript را همچنین می توان در یک فایل خارجی قرار داد.
فایل های خارجی JavaScript اغلب شامل کدهایی است که در چندین صفحه HTML مختلف استفاده می شود.
این فایل ها را باید با فرمت "js." ذخیره نمود.
توجه: اسکریبت خارجی نمی تواند شامل تگ های باز و بسته <script> و <script/> باشد.
برای استفاه از یک فایل اسکریبت خارجی در صفحه HTML، باید خصوصیت "src" تگ <script> را با آدرس فایل، تنظیم کنید:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
<script src="/myScript.js"></script>
</body>
</html>
خودتان امتحان کنید »