قوانین و اصول اولیه

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


تگ <script>

در زبان HTML، کدهایی که به زبان جاوا اسکریپت نوشته می‌شوند می‌بایست در بین دو تگ </script> و <script> قرار بگیرند.[۱]

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

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

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

</body>
</html>


Responsive demo.svg


ممکن است در مثال‌هایی که با نسخه‌های قدیمی‌تر زبان جاوا اسکریپت نوشته شده‌اند از ویژگی (Attribute) و نوع (Type) استفاده شده باشد: <script type="text/javascript">. ویژگی و نوع الزامی نیست. زبان جاوا اسکریپت زبان پیش‌فرض اسکریپت‌نویسی در سندهایی است که به زبان HTML نوشته شده‌اند.


توابع (Functions) و رویدادهای (Events) جاوا اسکریپت

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

برای مثال، یک تابع می‌تواند زمانی که یک '''رویداد (Event)''' رخ داد، فراخوانی شود، مانند زمانی که کاربر بر روی یک دکمه یا button کلیک می‌کند.

شما در فصل‌های آینده مطالب بیشتری را در مورد توابع (Functions) و رویدادها (Events) خواهید آموخت.

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

شما می‌توانید هر مقدار اسکریپتی را که می‌خواهید به زبان جاوا اسکریپت در یک فایل HTML بنویسید.

اسکریپت‌هایی را که با زبان جاوا اسکریپت نوشته می‌شوند را می‌توان در تگ‌های <body> یا در تگ <head>، یا هر دوی این تگ‌ها قرار داد.

قرار دادن اسکریپت در تگ <head>

در این مثال، یک تابع (Function) به زبان جاوا اسکریپت در تگ <head> یک صفحه HTML قرار داده شده‌است.

این تابع زمانی اجرا (Invoked) یا فراخوانی (Called) می‌شود که بر روی یک دکمه (Button) کلیک شود.

مثال

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

مثال

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


Responsive demo.svg





قرار دادن اسکریپت در تگ <body>

در این مثال، یک تابع (Function) به زبان جاوا اسکریپت در تگ <body> یک صفحه HTML قرار داده شده‌است.

این تابع زمانی اجرا (Invoked) یا فراخوانی (Called) می‌شود که بر روی یک دکمه (Button) کلیک شود.

مثال

function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}

مثال

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>


Responsive demo.svg


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


جاوا اسکریپت خارجی (External)

اسکریپت‌ها همچنین می‌توانند در فایل‌های خارجی نیز قرار بگیرند:

فایل خارجی: myScript.js
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}


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

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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

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

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

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

</body>
</html>


Responsive demo.svg


شما می‌توانید آدرس فایل (Refrence) اسکریپت خارجی خود را به طور دلخواه در یکی از تگ‌های <head> یا <body> قرار دهید.

اسکریپت خارجی شما دقیقاً همانند وقتی که به جای آدرس فایل اسکریپت، خود کد اسکریپت (<script>) را قرار می‌دادید، عمل خواهد کرد.

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

مزایای استفاده از اسکریپت‌های جاوا اسکریپت به صورت خارجی

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

  • اینکار کدهای HTML و جاوا اسکریپت را از یکدیگر جدا می‌کند.
  • اینکار خوانایی کدهای HTML و جاوا اسکریپت و همچنین نگهداری از آن‌ها را ساده‌تر می‌کند.
  • فایل‌های جاوا اسکریپتی که کش (Cache) می‌شوند، می‌توانند موجب بهبود سرعت بارگذاری صفحات شوند.

برای متصل کردن چندین فایل اسکریپت خارجی از چندین تگ script استفاده کنید:

مثال
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

آدرس دهی خارجی فایل اسکریپت

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

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

مثال

<script src="https://wikicod.ir/tryit/example_file/myScript.js"></script>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

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

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="https://wikicod.ir/tryit/example_file/myScript.js"></script>

</body>
</html>


Responsive demo.svg


این مثال به یک فایل اسکریپت که در یک پوشهٔ مخصوص در وب‌سایت جاری قرار دارد لینک ایجاد می‌کند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

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

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

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

</body>
</html>


Responsive demo.svg


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

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

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

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

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

</body>
</html>


Responsive demo.svg


شما می‌توانید مطالب بیشتری در مورد مسیر فایل‌ها، در فصل مسیر فایل‌ها در HTML را مطالعه کنید.

منابع آموزشی