محل قرار گیری کدهای جاوا اسکریپت کجاست؟

محل قرار گیری کدهای جاوا اسکریپت کجاست؟
نادر
تاریخ بروز رسانی : 17 اردیبهشت 1400
دسته بندی : آموزش جاوا اسکریپت

بفرست برای دوستات :

در این قسمت از آموزش جاوا اسکریپت یاد میگیریم که در کجا و به چه صورت کد های جاوا اسکریپت را به صفحه HTML اضافه کنیم.

برچسب <script>

در HTML ، کد های جاوا اسکریپت باید بین برچسب های<script> و </script> قرار گیرد

مثال

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

خودتان آزمایش کنید

مثال های قدیمی جاوا اسکریپت ممکن است از خصوصیت type استفاده کنند :
<script type="text/javascript">
خصوصیت type اجباری نیست. جاوا اسکریپت زبان پیشفرض اسکریپت نویسی در HTML است.

توابع و رویدادهای جاوا اسکریپت

یک function جاوا اسکریپت بلوکی از کد های جاوا اسکریپت است که هنگام فراخوانی، اجرا می شوند.

برای مثال یک تابع می تواند هنگامی که یک رویداد (event) اتفاق می افتد اجرا شود، مثل وقتی که کاربر روی یک دکمه کلیک می کند.

در آینده بیشتر در مورد توابع (function) و رویداد ها (event) یاد می گیرید.

جاوا اسکریپت در <head> یا <body>

شما می توانید هر تعداد اسکریپت که می خواهید در یک کد HTML وارد کنید.

می توان اسکریپت ها را در قسمت <body> یا <head> و یا هردو قسمت از یک صفحه HTML قرار داد.

جاوا اسکریپت در <head>

در این مثال یک function جاوا اسکریپت در قسمت <head> یک برگه HTML قرار داده شده است.

تابع زمانی که دکمه کلیک می شود، فراخوانی می گردد:

مثال

<!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>

<!DOCTYPE html>

<html>

<head>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";

}

</script>

</head>

<p id="demo">A Paragraph</p>

</html>

خودتان آزمایش کنید

جاوا اسکریپت در <body>

در این مثال یک function جاوا اسکریپت در قسمت <body> یک برگه HTML قرار داده شده است.

تابع زمانی که دکمه کلیک می شود، فراخوانی می گردد:

مثال

<!DOCTYPE html>
<html>
<body> 
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Tryit</button>
<script>
function myFunction() {  
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Tryit</button>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";

}

</script>

</body>

</html>

خودتان آزمایش کنید

قرار دادن کد های جاوا اسکریپت در انتهای قسمت <body> باعث افزایش سرعت نمایش صفحه می شود، زیرا پردازش اسکریپت سرعت نمایش را کاهش می دهد.

جاوا اسکریت خارجی

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

فایل خارجی : myScript.js

function myFunction() {

 document.getElementById("demo").innerHTML = "Paragraph changed.";

}

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";

}

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

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

برای استفاده از یک اسکریپت خارجی، نام فایل خارجی اسکریپت را در خصوصیت src (منبع) از تگ <script> قرار دهید:

مثال

<script src="myScript.js"></script>

1	<script src="myScript.js"></script>

خودتان آزمایش کنید

می توانید یک ارجاع از اسکریپت خارجی را به دلخواه خود درون <head> یا <body> قرار دهید.

اسکریپت دقیقا به همان صورت و در همان جایی که اگر تگ <script> را قرار می دادید، اجرا خواهد شد.

اسکریپت های خارجی نمیتوانند و نباید شامل تگ <script> باشند.

مزایای جاوا اسکریپت خارجی

قرار دادن اسکریپت ها در فایل های خارجی دارای مزایایی است:

کدها و HTML را جدا می کند
باعث می شود که HTML و جاوا اسکریپت برای خواندن و نگهداری آسان تر شود
فایل های جاوا اسکریپتی ذخیره شده می توانند سرعت بارگزاری صفحه را افزایش دهند

برای اضافه کردن چندین فایل اسکریپت به یک صفحه از چندین تگ اسکریپت استفاده کنید:

مثال

<script src="myScript1.js"></script>

<script src="myScript2.js"></script>

منابع خارجی

اسکریپت های خارجی را می توان با یک URL کامل یا با آدرس نسبی، بر اساس صفحه وب فعلی ارجاع داد.

این مثال از URL کامل برای پیوند به یک اسکریپت استفاده می کند:

مثال

<script src="https://www.w3schools.com/js/myScript1.js"></script>

1	<script src="https://www.w3schools.com/js/myScript1.js"></script>

خودتان آزمایش کنید

این مثال از یک اسکریپت در یک پوشه مشخص در وبسایت فعلی استفاده میکند:

مثال

<script src="/js/myScript1.js"></script>

1	<script src="/js/myScript1.js"></script>

خودتان آزمایش کنید

این مثال به یک اسکریپت که در پوشه مشابه صفحه فعلی قرار دارد لینک می کند:

مثال

<script src="myScript1.js"></script>

1	<script src="myScript1.js"></script>

خودتان آزمایش کنید

شما می توانید اطلاعات بیشتر در مورد مسیر فایل را در بخش HTML File Paths از سایت w3schools بخوانید.

منبع : W3Schools.com

درس بعدی : خروجی های جاوا اسکریپت درس قبلی : معرفی جاوا اسکریپت

w3schools به زبان فارسی, w3schools به فارسی, w3schools ترجمه فارسی, w3schools فارسی, آموزش javascript, آموزش javascript es6, آموزش javascript پیشرفته, آموزش javascript رایگان, آموزش javascript فارسی, آموزش w3school, آموزش w3school فارسی, آموزش w3schools.com, آموزش جاوا اسکریپت, آموزش جاوا اسکریپت es6, آموزش جاوا اسکریپت به زبان ساده, آموزش جاوا اسکریپت پیشرفته, آموزش جاوا اسکریپت رایگان, اموزش فارسی w3schools, جاوا اسکریپت, جاوا اسکریپت آموزش, جاوا اسکریپت به زبان ساده, جاوا اسکریپت چیست؟, جاوا اسکریپت کاربرد, جاوا اسکریپت کد, کد های جاوا اسکریپت را کجا اضافه کنیم؟, محل قرار گیری کدهای جاوا اسکریپت, محل قرارگیری دستورات جاوا اسکریپت, محل نوشتن کدهای جاوا اسکریپت

بانک پروژه

برچسب <script>

مثال

توابع و رویدادهای جاوا اسکریپت

جاوا اسکریپت در <head> یا <body>

جاوا اسکریپت در <head>

مثال

جاوا اسکریپت در <body>

مثال

جاوا اسکریت خارجی

فایل خارجی : myScript.js

مثال

مزایای جاوا اسکریپت خارجی

مثال

منابع خارجی

مثال

مثال

مثال

دیدگاهتان را بنویسید لغو پاسخ

تماس با ما

قوانین و مقررات

راهنمای مشتریان

مجوز ها