آموزش پیش روی شما مفاهیم هستهای جاوااسکریپت است که وابسته به پلتفرم نیست. در ادامه با پلتفرمهایی مانند 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>
.