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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مرجع جاوا اسکریپت

تگ <script>

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

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


مشاهدهٔ نتیجه

ممکن است در مثال‌هایی که با نسخه‌های قدیمی‌تر زبان جاوا اسکریپت نوشته شده‌اند از ویژگی (به انگلیسی: 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) کلیک شود.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function myFunction() {
 6   document.getElementById("demo").innerHTML = "Paragraph changed.";
 7 }
 8 </script>
 9 </head>
10 <body>
11 
12 <h1>A Web Page</h1>
13 <p id="demo">A Paragraph</p>
14 <button type="button" onclick="myFunction()">Try it</button>
15 
16 </body>
17 </html>


مشاهدهٔ نتیجه


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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <h1>A Web Page</h1>
 6 <p id="demo">A Paragraph</p>
 7 <button type="button" onclick="myFunction()">Try it</button>
 8 
 9 <script>
10 function myFunction() {
11  document.getElementById("demo").innerHTML = "Paragraph changed.";
12 }
13 </script>
14 
15 </body>
16 </html>


مشاهدهٔ نتیجه

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

جاوا اسکریپت خارجی (به انگلیسی: External)

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

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

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

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

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

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


مشاهدهٔ نتیجه


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

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

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

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

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

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

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

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

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

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

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

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


مشاهدهٔ نتیجه


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

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


مشاهدهٔ نتیجه


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

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


مشاهدهٔ نتیجه


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


منابع آموزشی