۲۰ سپتامبر ۲۰۲۲

سلام، دنیا!

آموزش پیش روی شما مفاهیم هسته‌ای جاوااسکریپت است که وابسته به پلتفرم نیست. در ادامه با پلتفرم‌هایی مانند Node.JS و نحوه استفاده از آن‌ها آشنا خواهیم شد.

ما برای اجرای اسکریپت‌هایی که می‌نویسیم به محیطی برای اجرا نیاز داریم و از آنجایی که این یک دوره آنلاین است، مرورگر انتخاب خوبی است. سعی ما بر این است تا از دستوراتی که اختصاصا مربوط به مرورگر هستند مانند alert کمتر استفاده کنیم. مخصوصا برای شمایی که قصد استفاده از جاوااسکریپت در پلتفرم‌های دیگری چون Node.JS را دارید.

پس ابتدا نگاهی به نحوه متصل کردن یک اسکریپت به یک صفحه وب می‌اندازیم. اگر در محیط Server Side هستید (مانند Node.JS) می‌توانید از این دستور برای اجرای اسکریپت استفاده نمایید : node my.js.

تگِ script

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

برای نمونه :

<!DOCTYPE HTML>
<html>

<body>

  <p>...قبل از اسکریپت</p>

  <script>
    alert( 'سلام، دنیا!' );
  </script>

  <p>بعد از اسکریپت...</p>

</body>

</html>

با فشردن کلید Play در بالا سمت راست کادر، می‌توانید کدِ مثال را اجرا نمایید.

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

نشانه‌گذاری (markup) مدرن

تگ <script> تعدادی attributes (صفات) دارد که امروزه کمتر از آن‌ها استفاده می‌شود، ولی ممکن است در کدهای قدیمی همچنان آن‌ها را ببینید :

صفت type : <script type=…>

نسخه قدیمی HTML یعنی HTML4 نیازمند تعیین type در تگ <script> بود. معمولا مقدار آن type=text/javascript بود. در حال حاضر دیگر این مورد الزامی نیست.

صفت language : <script language=…>

مقصود از این صفت تعیین زبان اسکریپت است. از آنجایی که جاوااسکریپت زبان پیش‌فرض است، نیازی به تعیین آن نیست.

کامنت‌های قبل و بعد از اسکریپت

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

<script type="text/javascript"><!--
    ...
//--></script>

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

اسکریپت‌‌های خارجی

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

فایل‌های جاوااسکریپت از طریق صفت src می‌توانند به سند HTML متصل شوند :

<script src="/path/to/script.js"></script>

در اینجا /path/to/script.js ما از آدرس دهی absolute (مطلق) استفاده کرده‌ایم (که از دایرکتوری ریشه (root directory) است).

امکان آدرس دهی به صورت relative (نسبی) هم وجود دارد. برای مثال src="script.js" به این معنی است که فایل script.js در دایرکتوری فعلی قرار دارد.

همینطور می‌توانیم از آدرس URL کامل استفاده کنیم :

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

برای اتصال چند اسکریپت :

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
لطفاً توجه کنید:

به عنوان یک قاعده، فقط اسکریپت‌های ساده در فایل HTML قرار می‌گیرند و اسکریپت‌های پیچیده‎‌تر در فایل‌های جداگانه قرار داده می‌شوند. مزیت این کار این است که مرورگر آن فایل‌ها را دانلود کرده و در حافظه خود (cache) قرار می‌دهد.

بقیه صفحات که نیاز به آن اسکریپت دارند می‌توانند از نسخه‌ای که در کَش قرار گرفته استفاده کنند و به این ترتیب آن فایل اسکریپت فقط یکبار دانلود می‌شود.

این عمل باعث افزایش سرعت بارگیری صفحات می‌شود.

اگر src در تگ <script> تعریف شده باشد، محتوای تگ نادیده گرفته می‌شود

تگ <script> نمی‌تواند همزمان src و محتوا داشته باشد.

این کد کار نخواهد کرد:

<script src="file.js">
  alert(1); // تنظیم شده است src محتوا نادیده گرفته می‌شود چون
</script>

باید انتخاب کنیم که می‌خواهیم از <script> به شکل عادی استفاده کنیم یا <script src="…"> .

مثال بالا می‌تواند به این شکل نوشته شود :

<script src="file.js"></script>
<script>
  alert(1);
</script>

خلاصه

  • می‌توانیم با استفاده از تگ <script> کدهای جاوااسکریپت را در صفحه استفاده کنیم.
  • صفات language و type الزامی نیستند.
  • اسکریپتی که در محلی خارج از فایل HTML قرار دارد می‌تواند به این صورت استفاده شود : <script src="path/to/script.js"></script>.

تمارین

اهمیت: 5

صفحه‌ای بسازید که این پیام را نمایش دهد : “I’m JavaScript!”.

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

دمو درون یک پنجره جدید

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

باز کردن راه‌حل درون sandbox.

اهمیت: 5

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

صفحه را باز کنید و از درست کار کردن آن مطمئن شوید.

کدهای HTML:

<!DOCTYPE html>
<html>

<body>

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

</body>

</html>

برای فایل alert.js در همان دایرکتوی:

alert("I'm JavaScript!");
نقشه آموزش