این کتاب آخرین نسخه زبان جاوااسکریپت را هدف گرفته و به آموزش آن پرداخته است. برای تمرین بخش‌های مختلف کتاب به طور خاص به مرورگری نیاز دارید که از ویژگی‌های کُد نوشته شده به ES2015 (ES6) پشتیبانی کند.
مرورگر نرم افزاری است که از آن برای دیدن صفحه‌های وب و اپلیکیشن‌های تحت وب استفاده می‌شود. برای مطمئن شدن از جزییات پشتیبانی مرورگرهای مختلف به این جدول سازگاری مراجعه کنید.
ایده‌ال ترین انتخاب، مرورگرهای Google Chrome یا Mozilla Firefox هستند. این دو مرورگرهای "همیشه سبز" هستند که مرتبا به روز رسانی می‌شوند و پشتیبانی عالی از نسخه ES2015 در ورژن‌های اخیر خود دارند. مرورگرهای توانمند دیگر Opera و Microsoft Edge هستند که آخری مرورگر پیش فرض ویندوز ۱۰ است. در مقابل آن تمام نسخه‌های مرورگر Internet Explorer با نسخه ES2015 مشکل دارند. بنابراین بهتر است از استفاده از این مرورگر خوداری کنید.
شاید نتوانید شروع به کد زدن را آنقدرها به عقب بیاندازید و یا شاید ترجیح می‌دهید که اصلا وارد تنظیمات ویرایشگر کُد در کامپیوتر شخصی خود نشوید. خوشبختانه یکی از زیبایی‌های جنبه‌های زبان جاوااسکریپت این است که می‌توانید در محیط هر مرورگری آن را به کار بگیرید و اتصال به اینترنت تنها چیزی که نیاز دارید.
برای کُد زنی آنلاین، به زمین بازی جاوااسکریپت نیاز دارید. یک سرویس آنلاین از این دست، جایی است که می‌توانید در آن کُد جاوااسکریپت را تایپ کنید و نتیجه آن را به آنی در همان لحظه ببینید.
ضمن مطالعه این فصل‌ها همان طور که گفته شد، به زمین بازی کُدزنی نیاز دارید که در آن تکنولوژی‌های به کار گرفته شده در front-end مثل CSS, HTML و JavaScript به سادگی قابل اجرا باشد. برای این کار چند گزینه و زمین بازی کُدزنی آنلاین وجود دارد. انتخاب اول من CodePen است اما گزینه‌های دیگری مثل JSFiddle و JS Bin هم موجود هستند.
اگر CodePen انتخابتان باشد پیشنهاد می‌کنم از صفحه Welcome to CodePen شروع کنید. این پلت فُرمی دوستانه دارد که هر آنچه برای شروعی روان به آن نیاز داشته باشید را در اختیارتان قرار می‌دهد.
علاوه بر آن مقاله‌هایی مفید مثل:
- نحوه فعال سازی ویژگی کامل کُن خودکار
- کنسول
- ذخیره خودکار Pen ها
- کلید بندی و انطباق آنها
- به روز رسانی خودکار
در بخش بلاگ CodePen وجود دارد که با خواندن مقاله‌هایی مثل می‌توانید از نحوه استفاده این پلت فُرم به خوبی آگاه شوید و بهره وری کارایی خود را بالا ببرید.
پیشنهاد می‌کنم که قابلیت autosave را فعال و auto-update را برای تمام penهای مربوط به این کتاب غیر فعال کنید. همچنین نمایش console اغلب برای نگاه کردن به خروجی کُد ضرروری است. لازم نیست که برای هر نمونه کُدی یک صفحه pen جدید را باز و ذخیره کنید، اما برای هر تمرین و پروژه باید pen جداگانه‌ای داشته و آن را ذخیره کنید. البته خوب است بدانید که console زمین بازی CodePen دقیقا مطابق با console مرورگرهای واقعی نیست و کلیه جزییات ویژگی‌های آنها را در خود نمایش نمی‌دهد.
زمانی که فصل ۲۴ را شروع می‌کنید، لازم است تا به یک زمین بازی back-end دسترسی داشته باشید تا بتوانید در آن اپلکیشن‌هایی تحت Node.js را بنویسید و اجرا کنید. برای این هدف زمین بازی glitchانتخابی مناسب است زیرا در محیط آن به سرعت می‌توانید اپلیکیشن‌های تحت وب نوشته با Node پیدا سازی و اجرا کنید.
Glitch محیط و تنظیمات یک Node محلی را شبیه سازی کرده و در آن اجرای کُد، مدیریت پکیج‌ها، میزبانی و مستقر کردن کُد کاملا به صورت اتوماتیک انجام می‌شود. همچنین می‌توانید هر اپلیکیشن Glitch را ترکیب کنید و سایر نیاز‌های خود را از این طریق پوشش دهید.
برای یادگیری بیشتر در مورد glitch می‌توانید به این لینک مراجعه کنید یا کار با محیط آن را با ادغام کردن آن با این پروژه آغاز کنید.
ایجاد و تنظیم محیط کُدزنی در کامپیوتر شخصی اندکی زمان بر است، اما نتیجه آن فراهم شدن فضایی قدرتمند است که ظرفیت بالایی دارد. همچنین اگر بخواهید در محیطی آفلاین کار کنید، این تنها گزینه ممکن برایتان خواهد بود.
مراحل پیش رو قدم به قدم به شما کمک می‌کند تا به شیو‌ه‌ای موثر، در محیط کامیپوتر شخصی خود به کُدزنی بپردازید.
در اصل، برنامه نویسی تایپ کُد و ذخیره آن در تعدادی فایل است. برای آنکه بتوانید برنامه بنویسید باید از یک ویرایشگر کُد نصب شده بر روی کامپیوتر شخصی خود استفاده کنید. در زیر چند مورد از بهترین‌ها را برایتان درج کرده‌ام.
از فصل ۲۴ به بعد استفاده از پلت فُرم Node.js الزامی است. همچنین npm نیز باید نصب شود تا بتوانید نسخه‌های مختلف Node را با آن مدیریت کنید.
بر روی کامیپوتر شخصی خود آخرین نسخه از Node را از اینجا دانلود و نصب کنید.
برای اجرای برخی از مثال‌های کتاب به نسخه ۸ Node یا نسخه‌ای بالاتر نیاز دارید.
آسان‌ترین راه برای تست نصب node و مطلع شدن از نسخه آن، اجرای دستور node --version در ترمینال سیستم عامل است. زمانی که این دستور را اجرا کنید، نسخه‌ای از node که بر روی دستگاه تان نصب شده به شما نمایش داده می‌شود.
node --versionدر طول سالها، برای ساده‌تر شدن روند کُدزنی در جاوااسکریپت، ابزارها زیادی به وجود آمده است. به طور خاص دو ابزار هستند که بیش از همه علاقه برنامه نویسان جاوااسکریپت را به خود جلب کرده‌اند:
- یک فرمت کننده کُد باعث خواهد شد تا در ساختار ظاهری کُد پیوستگی و نظم داشته باشید و شما را از سختی فُرمت کردن دستی آسوده می‌کند. برای این کار برنامه یکی از استاندارهای کنونی Prettier است.
- همچنین یک linter با شناسایی خطاها و اعمال روش‌های استاندارد کُدزنی کیفیت کُد را به شدت بالا می‌برد. برای این کار ESLint انتخاب ایده‌ال است.
آسان‌ترین راه برای نصب ESLint و Prettier نصب اکستنشن‌های آنها (که با نام add-on نیز شناخته می‌شوند) بر روی ویرایشگر کُد مورد استفاده تان است. برای راهنمای نصب اکستنشن این دو بر روی VS Code می‌توانید، از لینک‌های زیر استفاده کنید:
برای نصب این اکستنشن‌ها تمام دستورها را مرحله به مرحله اجرا کنید، تا تنظیمات ایجاد گردد.
در مورد جزییات نصب ESLint در فصل آینده به طور مفصل بحث خواهد شد.
اول از همه مهم است که پوشه‌ای پایه ایجاد کنید و قبل از شروع به کُدزنی ساختاربندی فایل‌ها را کاملا مشخص کنید. به این صورت پروژه سازمان دهی شده و عادت‌های برنامه نویسی صحیح را از همین ابتدا، تمرین خواهید کرد.
برای کُدزنی و تمرین بخش‌های مختلف این کتاب پوشه‌ای جداگانه ایجاد کنید. بهتر است نام این پوشه thejsway-code باشد. تمام فایل‌های محلی ایجاد شده باید در این پوشه به عنوان زیر پوشه قرار بگیرند. منطقی ترین روش این است که برای هر فصل یک زیر پوشه جداگانه تعریف کنید.
برای این کار می‌توانید یا پوشه‌ای از قبل ساختار بندی شده را دانلود کنید یا به مطالعه پاراگراف‌های بعدی ادامه دهید تا بتوانید خودتان ساختار مناسبی برای پوشه‌ها تعریف کنید.
در این فصل‌ها کُدهای جاوااسکریپت را در مرورگر اجرا خواهید کرد. فایل‌ها بر اساس نوع آنها ذخیره می‌شوند: برای مثال فایل‌های HTML (این فایل دارای پسوند .html است) در زیر پوشه html، فایل‌های CSS ( با پسوند .css) در زیرپوشه css و فایل‌های JavaScript (با پسوند .js) در زیر پوشه js ذخیره می‌شوند. ساختار پوشه بندی هر فصل کتاب به صورت زیر است:
برای مثال های مثال‌ها و تمرین‌های هر فصل یک فایل HTML در زیر پوشه html فصل ایجاد کنید. در این فایل‌های HTML یک <script> که مربوط به اجرای کُد جاوااسکریپت است بار گذاری می‌شود.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Code examples</title>
</head>
<body>
<!-- HTML code goes here -->
<script src="../js/examples.js"></script>
</body>
</html>
این تگ <script> از مرورگر می‌خواهد تا فایل جاوااسکریپت examples.js که در آدرس ../js/examples.js قرار دارد را اجرا کند. دو نقطه (..) در ابتدای آدرس فایل به معنای این است که فایل کنونی یک سطح از ساختار فایل بالا نسبت به
فایل HTML قرار دارد و برای اجرای فایل examples.js به زیر پوشه js در این آدرس مراجعه می‌کند.
بعد از آن فایل HTML را در مرورگر باز و کُد جاوااسکریپتی که با پسوند `.js ذخیره شده اجرا کند. نتیجه آن در مرورگر نمایش داده خواهد شد.
برای این فصل ۲۴ به بعد، اپلیکیشن تحت Node.js ایجاد خواهید کرد تا به وسیله آن بتوانید کُد جاوااسکریپت را اجرا کنید. هر اپلیکیشن Node باید در پوشه اختصاصی خودش و در فایلی با عنوان package.json دقیقا در پوشه ریشه قرار داده شود. می‌توانید از زیر پوشه‌ها مطابق موارد توضیح داده شده در زیر برای ذخیره فایل‌های مختلف استفاده کنید:
- پوشه
node_modulesکه به صورت خودکار برای external dependencies ایجاد می‌شوند. - پوشه
publicکه در آن فایل‌های کاربردی مثل CSS و JavaScript قرار داده می‌شوند که اینها در مرورگر بارگذاری خواهند شد. - پوشه
viewsکه در آن فایل‌های HTML قرار داده می‌شوند. - و پوشه
modulesکه از آن برای ماژول‌های داخلی از آن استفاده می‌شود.
مرورگرهای مُدرن **ابزارهای توسعه‌ای کاربردی** دارند که به توسعه وب کمک می‌کنند. هر مرورگر در اینکه شامل چه ابزارهایی است با دیگری تفاوت دارد اما بین همه آنها شباهت‌هایی زیادی نیز وجود دارد.
همگی این ابزارها یک کنسول جاوااسکریپت دارند که از آن برای نمایش خروجی دستورات جاوااسکریپت و تایپ این دستورها استفاده می‌شود. همچنین در این ابزارهای یک آزمونگر مرورگر یا page inspector (برای بررسی ساختار صفحه) و آنالیز از جنبه‌های دیگر وجود دارد.
برای آنکه بیشتر در مورد ابزارهای مرورگر بدانید به لینک‌های زیر را مراجعه کنید: