این مقاله درباره دوره‌ای در زمینه جاوااسکریپت است و نحوه کار با این زبان برای ایجاد وب‌سایت‌ها و تعامل با مرورگرها را آموزش می‌دهیم.
مقدمه:
این دوره درباره یادگیری جاوااسکریپت برای توسعه وب‌سایت‌ها و انجام کارهای جالب در مرورگر است؛ از جمله ایجاد ساعت‌های دیجیتال، انیمیشن‌ها و افزودن تعامل به صفحات وب. یادگیری جاوااسکریپت می‌تواند وب‌سایت‌های ایستا را زنده کند و به آنها قابلیت‌های تعاملی اضافه کند. پس از مسلط شدن به جاوااسکریپت در مرورگر، می‌توانید از آن برای توسعه بک‌اند و حتی ساخت اپلیکیشن‌های موبایل استفاده کنید. جاوااسکریپت یک زبان برنامه‌نویسی جهانی است که فرصت‌های زیادی برای کاوش و بهره‌برداری از آن وجود دارد.
توضیحات:
برای شروع، تنها چیزی که نیاز دارید، یک ویرایشگر متن مناسب برنامه‌نویسی است. پیشنهاد شده است از Visual Studio Code (VS Code) استفاده کنید. در این دوره، بسته‌ای به نام Live Server معرفی شده که به شما امکان می‌دهد وب‌سایت‌های خود را به‌صورت زنده در مرورگر مشاهده کنید. برای نصب Live Server کافی است در VS Code به بخش Extensions بروید و آن را جستجو و نصب کنید. سپس باید VS Code را بسته و دوباره باز کنید تا این افزونه فعال شود.
Live Server به شما این امکان را می‌دهد که فایل‌های HTML، CSS و جاوااسکریپت را در مرورگر به‌صورت زنده مشاهده کنید و هر تغییری که ایجاد می‌کنید بلافاصله در مرورگر به‌روز شود. این کار با استفاده از یک سرور محلی انجام می‌شود که آدرس آن به صورت localhost یا ۱۲۷٫۰٫۰٫۱ است. این ابزار تجربه توسعه وب را سریع‌تر و آسان‌تر می‌کند.
برای شروع یک پروژه جدید، کافی است یک پوشه بسازید و یک فایل HTML در آن ایجاد کنید. یکی از امکانات عالی VS Code، ابزار Emmet است که به شما اجازه می‌دهد با استفاده از شورت‌کات‌ها به‌سرعت کد بنویسید. مثلاً با تایپ کردن و زدن کلید Tab می‌توانید ساختار پایه‌ای یک سند HTML را به سرعت ایجاد کنید.
برای مشاهده فایل HTML در مرورگر، روی فایل کلیک راست کنید و گزینه Open with Live Server را انتخاب کنید. این کار فایل شما را در مرورگر باز می‌کند و هر تغییری که ذخیره کنید، بلافاصله در مرورگر منعکس می‌شود. آدرس محلی سرور معمولاً به‌صورت http://127.0.0.1:5500 است که به همراه نام فایل نمایش داده می‌شود.
اینجا با زبان ساده و پیوسته توضیح می‌دهیم که چگونه ابزارهای ضروری مانند Live Server و Emmet می‌توانند تجربه یادگیری و توسعه جاوااسکریپت را آسان‌تر و سریع‌تر کنند.
حال که محیط برنامه‌نویسی ما آماده است، امیدوارم که شما نیز Visual Studio Code و بسته Live Server را نصب کرده باشید، زیرا از آن برای پیش‌نمایش صفحات خود در مرورگر استفاده خواهیم کرد. اگر فایلی مانند یک صفحه HTML داشته باشیم که شامل یک تگ H1 با عنوان “Page Title” باشد، با استفاده از Live Server می‌توانیم آن را در مرورگر مشاهده کنیم.
افزودن جاوااسکریپت به صفحات HTML
برای افزودن جاوااسکریپت به یک صفحه HTML، دو مکان اصلی وجود دارد:
- بین تگ‌های <head>.
- بین تگ‌های <body> (توصیه‌شده: در انتهای <body> و قبل از تگ بسته شدن آن).
برای مثال، می‌توانیم یک تگ <script> در بخش پایانی بدنه صفحه اضافه کنیم. کدی مثل alert(“Hello World”) در این تگ قرار می‌گیرد که یک پاپ‌آپ در صفحه مرورگر نمایش می‌دهد. این دستور قبل از بارگذاری کامل صفحه اجرا می‌شود، بنابراین بهتر است کدهای جاوااسکریپت را به انتهای بدنه منتقل کنیم تا مشکلی در بارگذاری ایجاد نشود.
اصول اولیه کدنویسی:
وقتی کد جاوااسکریپت زیادی دارید، بهتر است آن را در یک فایل جداگانه ذخیره کنید و از طریق HTML به آن فایل لینک دهید.
- یک فایل جدید با پسوند .js (مثل test.js) ایجاد کنید.
- به وسیله تگ <script> و ویژگی src، فایل جاوااسکریپت را به HTML متصل کنید. به این صورت:
html
Copy code
<script src=”sandbox.js”></script>
- حال می‌توانید کدهای جاوااسکریپت را در فایل جداگانه بنویسید. به عنوان مثال:
javascript
Copy code
alert(“Hello World”);
در جاوااسکریپت از (;) برای پایان دادن به دستورات استفاده می‌شود. هرچند در بسیاری از موارد اگر از ; استفاده نکنید، کد همچنان اجرا می‌شود، اما به عنوان یک عادت خوب، بهتر است همیشه از آن استفاده کنید تا کد مرتب و خوانا باشد.
استفاده از Developer Tools در مرورگر:
مرورگرهایی مثل گوگل کروم دارای ابزاری به نام Developer Tools هستند که با فشردن کلید F12 می‌توان به آن دسترسی پیدا کرد. یکی از امکانات این ابزار، کنسول (Console) است که به شما اجازه می‌دهد کدهای جاوااسکریپت را مستقیماً اجرا کنید. برای مثال:
javascript
Copy code
console.log(“Hello Console”);
این دستور مقدار “Hello Console” را در کنسول نمایش می‌دهد. همچنین می‌توانید چندین مقدار را به ترتیب به کنسول چاپ کنید:
javascript
Copy code
console.log(1);
console.log(2);
در این دوره، جاوااسکریپت را به صورت اصولی یاد می‌گیریم و از طریق اتصال فایل‌های خارجی، استفاده از کنسول، و ابزارهای توسعه، کدنویسی خود را بهینه‌تر می‌کنیم. سعی کنید هنگام کدنویسی، قوانین پایه مثل استفاده از ; را رعایت کنید تا درک بهتری از کدها داشته باشید. در درس‌های آینده، با مفاهیم پیشرفته‌تر آشنا خواهید شد.
برای مشاهده و دسترسی به مطالب بیشتر بر روی اینجا کلیک کنید.
