سلام دنیا !
توی این قسمت از آموزش درباره خود جاوا اسکریپت میخوایم صحبت کنیم
اما ما نیاز داریم تا توی یه محیط اسکریپت های خودمون رو اجرا کنیم، و از اونجایی که این کتاب آنلاینه مرورگر انتخاب خوبیه ما تعداد دستورات مخصوص مرورگر مثل (alert) رو به حداقل میرسونیم تا اگه قصد دارین روی محیط دیگه‌ای مثل (Node.js) تمرکز کنین وقتتون رو روی دستورات مرورگر نذارین توی قسمتی که مروبوط به جاوا اسکریپت در مرورگر هست کامل توضیحش میدیم فعلا میخوایم با ساختار کلی جاوا اسکریپت آشنا بشیم
خب اول بیاین ببینیم چطوری میشه یه فایل اسکریپت رو به صفحه اضافه کرد، برای محیط سمت سرور مثل (Node.js) میتونین با زدن دستور "node my.js" اسکریپتتون رو اجرا کنین
آشنایی با برچسب اسکریپت
برنامه های جاوا اسکریپت تقریبا میتونن هر جایی از یه سند HTML با استفاده از برچسب <script> اجرا بشن.
برای مثال :
<!DOCTYPE HTML>
<html>
<body>
<p>متن قبل از اسکریپت ...</p>
<script>
alert( 'یوهوووو، سلاممممم' );
</script>
<p>... متن بعد از اسکریپت</p>
</body>
</html>
هر چی توی برچسب اسکریپت هست وقتی که مرورگر پردازشش میکنه به صورت خودکار اجرا میشه.
نشانه گذاری جدید
برچسب <script> چند تا صفت داره که الان ما ازشون خیلی خیلی کم استفاده میکنیم ولی توی کد های قدیمی استفاده می‌شدن:
صفت type (نوع) : <script type=...>
توی HTML استاندارد قدیمی, (HTML 4) یه برچسب اسکریپت حتما باید صفت type رو می‌داشت، معمولا اینجوری نوشته می‌شد type="text/javascript"
دیگه لازم نیست نوشته بشه و همچنین توی HTML جدید معنی این صفت هم عوض شده و کار دیگه‌ای انجام میده
الان، میشه ازش برای ماژول های جاوا اسکریپت استفاده کرد اما این یک موضوع پیشرفته هست، ما توی بخش دیگه‌ای از آموزش در مورد ماژول ها صحبت خواهیم کرد
صفت language (زبان) : <script language=…>
این صفت به معنی این بود که زبان اسکریپت چی هست،استفاده از این صفت دیگه منطقی نیست چون به صورت پیش‌فرض روی زبان جاوا اسکریپت هست پس لازم نیست ازش استفاده کنیم
توضیحات قبل و بعد از اسکریپت
توی کتابا و راهنما های خیلی قدیمی، ممکنه توضیحاتی رو توی برچسب <script> به این شکل پیدا کنین :
<script type="text/javascript"><!--
...
//--></script>
این ترفند توی جاوا اسکریپت جدید استفاده نمیشه، این توضیحات کد های جاوا اسکریپت رو توی مرورگر های قدیمی مخفی میکنه و نمیدونستن که چطوری این برچسب رو پردازش کنن از اونجایی که مرورگر های منتشر شده توی ۱۵ سال گذشته این مشکل رو ندارن این مدل توضیحات میتونه بهتون کمک کنه تا کد های خیلی قدیمی رو شناسایی کنین
اسکریپت های خارجی
اگه ما یه عالمه کد جاوا اسکریپت داشته باشیم میتونیم اونا رو به فایل های جدا تقسیم کنیم
فایل های اسکریپت با صفت src میتونن به سند HTML اضافه بشن :
<script src="/path/to/script.js"></script>
اینجا /path/to/script.js یک مسیر مطلق به اسکریپت از ریشه سایت هست، همچنین میتونیم از صفحه فعلی مسیر نسبی بدیم برای نمونه : src="script.js" یعنی فایل "script.js"
توی پوشه فعلی هست
میتونیم همچنین یه آدرس کامل هم بهش بدیم :
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
برای اضافه کردن چند تا فایل میتونیم از چند تا برچسب HTML استفاده کنیم
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
لطفا توجه کنین
نکته اول
به طور معمول ، فقط ساده ترین اسکریپت ها در HTML قرار می‌گیرن موارد پیچیده‌تر توی فایل های جداگانه‌ای قرار دارن فایده یک فایل جداگانه اینه که مرورگر اون رو دانلود میکنه و در حافظه نهان خودش ذخیره می کنه و بقیه فایل ها اگه به اون اسکریپت نیاز داشته باشن دوباره اون رو دانلود نمیکنن و از حافظه نهان برش میدارن بنابراین فقط یک‌بار دانلود میشه این باعث کاهش ترافیک میشه و صفحات با سرعت بیشتری باز میشن
نکته دوم
اگر صفت src روی برچسب <script> تنظیم شده باشه محتواش نادیده گرفته میشن
یه برچسب <script> نمیتونه همزمان هم یه متن داخلش باشه و هم صفت src داشته باشه
این کد کار نمیکنه :
<script src="file.js">
alert(1); // این محتوا نادیده گرفته میشه
</script>
ما باید یکی رو انتخاب کنیم یا برچسب اسکریپت با منبع خارجی <script src="…"> و یا برچسب <script> معمولی با کد
مثال بالا برای این که کار کنه باید به دو برچسب اسکریپت شکسته بشه :
<script src="file.js"></script>
<script>
alert(1);
</script>
خلاصه
- ما میتونیم از برچسب
<script>برای اضافه کردن جاوا اسکریپت به یه صفحه استفاده کنیم - استفاده از صفت های type و language لازم نیست
- یه اسکریپت توی فایل خارجی میتونه اینجوری به صفحه اضافه بشه:
<script src="path/to/script.js"></script>
چیزهای بیشتری برای یادگیری در مورد اسکریپتهای مرورگر و تعامل اونا با صفحه وب وجود داره، اما یادتون باشه که این قسمت از آموزش به زبان جاوا اسکریپت اختصاص داره، بنابراین نباید توجهتون رو با استفاده از برنامه های خاص مرورگر منحرف کنیم
ما از مرورگر به عنوان راهی برای اجرای کد های جاوا اسکریپت استفاده خواهیم کرد که برای خوندن آنلاین خیلی مناسبه اما این یکی از روش های خیلی زیادی هست که میشه از جاوا اسکریپت استفاده کرد
تمرین
-
تمرین اول: نشون دادن یه پیغام (alert) توی صفحه درجه اهمیت : ۵ یه صفحه درست کنین که توش یه پیغام نشون بدین با متن دلخواهتون نمونه‌اش رو اینجا میتونین ببینین
-
تمرین دوم: نشون دادن یه پیغام (alert) توی صفحه با استفاده از یک فایل خارجی درجه اهمیت : ۵ از کد های تمرین قبلی استفاده کنین و اونا رو توی یک فایل خارجی به اسم alert.js بذارین و اون رو فراخوانی کنین بعدش صفحه رو باز کنین تا مطمئن بشین کار میکنه