آموزش جاوا اسکریپت – فصل دوم: اجرای جاوا اسکریپت

اگر بخواهید کدهای جاوا اسکریپت را در یک مرورگر وب اجرا کنید، می تواند به سه روش این کار را انجام دهید:

• قرار دادن کدها در بین تگ <script>
• قرار دادن کد ها در یک فایل جاوا اسکریپت خارجی و فراخوانی آن در صفحه
• اجرای کدهای جاوا اسکریپت به صورت inline

اجرای جاوا اسکریپت با استفاده از تگ <script>

در HTML برای اجرای جاوا اسکریپت می توانید کدهای نوشته شده را بین <script> و </script> قرار دهید.

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

فصل 2 – مثال 1

در گذشته باید از type="text/javascript" به همراه تگ script استفاده می شد. امروزه نیاز به این کار نیست، زیرا جاوا اسکریپت زبان پیشفرض وب است.

تگ script را هم در head یک پرونده HTML می توان نوشت هم در body آن پرونده.

اجرای جاوا اسکریپت با استفاده از فایل خارجی JS

یک فایل جاوا اسکریپت دارای پسوند .js است. محتوای فایلی با این پسوند، کدهای جاوا اسکریپت قابل اجرا در نظر گرفته می شود.

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

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

فصل 2 – مثال 2

مزایای استفاده از فایل js خارجی

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

• جدا کردن کدهای جاوا اسکریپت از کدهای HTML برای خوانایی کدها ضروری به نظر می رسد. بهتر است کد های جاوا اسکریپت را کاملا جدا از کد های HTML نگهداری کنید.
• در شرایطی که چند بلاک کد متفاوت جاوا اسکریپت برای اجرا در نظر دارید، قرار دادن هر بلاک کد در یک فایل جاوا اسکریپت خارجی جداگانه می تواند به خوانایی کدهای شما کمک بسیاری کند.
• قابلیت کش کردن فایل های خارجی جاوا اسکریپت توسط مرورگر ها می تواند باعث افزایش سرعت لود صفحات شود. منظور از کش کردن، قابلیتی است که با استفاده از آن، مرورگر ها اطلاعات تکراری را درون خود ذخیره می کنند (مانند تصاویر، فایل CSS و فایل JS) تا در بازدید های آینده کاربر از یک صفحه بتوانند سریع تر آن صفحه را بار گذاری کنند.
• در صورت استفاده از فایل js می توانید کدها را از سایتی دیگر نیز درون صفحه خود بارگذاری کنید. یعنی فایلی را اجرا کنید در وب سایت شما قرار ندارد و در وب سایت دیگری موجود است.

برای بارگذاری فایل js از وبسایت دیگر فقط کافی است تا آدرس کامل آن را در خاصیت src قرار دهید.

این مثال استفاده از کتابخانه jQuery با استفاده از یک آدرس خارجی است:

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

فصل 2 – مثال 3

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

جاوا اسکریپت را به صورت inline نیز می توان بر روی هر المان html اجرا کرد.

گرچه استفاده از جاوا اسکریپت و html در یک خط از خوانایی کدها می کاهد اما این قابلیت گاهی توسط برنامه نویسان برای افزایش سرعت کد زدن مورد استفاده قرار می گیرد.

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

برخی از موارد پر استفاده این خاصیت ها عبارتند از onclick onmouseover onload که هرکدام در شرایطی خاص کدهای شما را به اجرا در می آورند.

به عنوان مثال onload زمانی که المان HTML در صفحه ظاهر شود کد شما را اجرا میکند. یا onclick زمانی کاربر بر روی المان کلیک کند کد ها را اجرا می کند. onmouseover هم برای اجرای کد در صورت حرکت موس بر روی المان استفاده می شود.

مثال زیر در هنگام بارگذاری صفحه اطلاعیه ای با متن Page Loaded را نمایش می دهد:

فصل 2 – مثال 4

تعداد خاصیت های قابل استفاده برای اجرای کد های inline جاوا اسکریپت در زبان html زیاد است و شما می‌توانید برای خواندن تمامی آنها به این لینک مراجعه کنید.