شروع با جاوا اسکریپت Vanilla: تنظیم محیط توسعه شما

Summarize this content to 400 words in Persian Lang
این راهنمای ساده شما را با نحوه تنظیم محیط توسعه خود آشنا می کند تا کار با جاوا اسکریپت را روان و تعاملی کند. راه اندازی از یک ساختار پوشه ساده با یک سند HTML و یک فایل جاوا اسکریپت خارجی استفاده می کند. به این ترتیب می توانید به همراه راهنما کدنویسی کنید، جاوا اسکریپت را در یک فایل جداگانه بنویسید و خروجی خود را در کنسول مرورگر مشاهده کنید. این راه‌اندازی تقریباً نحوه کار در دنیای واقعی توسعه وب است. بیایید شیرجه بزنیم!

چرا از یک فایل جاوا اسکریپت خارجی استفاده کنیم؟

استفاده از یک فایل جاوا اسکریپت خارجی چندین مزیت دارد:

سازمان: کدهای HTML و جاوا اسکریپت شما را جدا نگه می دارد و فایل های شما را تمیزتر و خواندن آسان تر می کند.

قابلیت استفاده مجدد: می توانید از یک فایل جاوا اسکریپت در چندین فایل HTML استفاده کنید.

قابلیت نگهداری: به روز رسانی کد جاوا اسکریپت خود بدون تغییر فایل HTML آسان تر است.

همکاری: کار با دیگران آسان تر می شود زیرا اعضای مختلف تیم می توانند به طور همزمان روی فایل های HTML و جاوا اسکریپت کار کنند.

راهنمای گام به گام تنظیم محیط توسعه شما

1. یک پوشه جدید برای پروژه خود ایجاد کنید

با ایجاد یک پوشه جدید در رایانه خود شروع کنید که در آن فایل های پروژه خود را ذخیره می کنید. نام پوشه را چیزی شبیه به آن بگذارید js-tutorial.

2. یک فایل HTML جدید ایجاد کنید

داخل پوشه پروژه شما (js-tutorial، یک فایل HTML جدید ایجاد کنید. نام آن را چیزی شبیه به آن بگذارید index.html.

3. یک فایل جاوا اسکریپت جدید ایجاد کنید

هنوز در پوشه پروژه شما (js-tutorial، یک فایل جاوا اسکریپت جدید ایجاد کنید. نام آن را چیزی شبیه به آن بگذارید script.js.

4. ساختار اصلی HTML را تنظیم کنید

خودت را باز کن index.html فایل را در یک ویرایشگر متن قرار دهید و یک ساختار اولیه HTML را تنظیم کنید. پیوند فایل جاوا اسکریپت خارجی با استفاده از را با src صفت:

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Hello World!

Welcome to JavaScript Functions Guide
src=]]>”script.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ذخیره کنید index.html پس از افزودن این محتوا فایل کنید.

5. کد جاوا اسکریپت را به فایل جاوا اسکریپت خود اضافه کنید

خودت را باز کن script.js در همان ویرایشگر متن فایل کنید و مقداری کد جاوا اسکریپت اضافه کنید:

console.log(“Hello, World!”);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ذخیره کنید script.js پس از افزودن کد فایل.

6. فایل HTML را در مرورگر خود باز کنید

اکنون، در را باز کنید index.html فایل را در مرورگر وب دلخواه خود ارسال کنید. می توانید این کار را با دوبار کلیک کردن روی فایل یا کشیدن آن به پنجره باز مرورگر انجام دهید.

7. به کنسول مرورگر دسترسی پیدا کنید

برای دیدن خروجی کد جاوا اسکریپت خود، باید به کنسول مرورگر دسترسی داشته باشید. این مراحل را بر اساس مرورگر خود دنبال کنید:

برای گوگل کروم:

ویندوز/لینوکس: مطبوعات Ctrl + Shift + I یا F12.

مک: مطبوعات Cmd + Option + I.

کلیک کنید روی “کنسول” برگه

برای موزیلا فایرفاکس:

ویندوز/لینوکس: مطبوعات Ctrl + Shift + K یا F12.

مک: مطبوعات Cmd + Option + K.

کلیک کنید روی “کنسول” برگه

برای مایکروسافت اج:

پنجره ها: مطبوعات Ctrl + Shift + I یا F12.

مک: مطبوعات Cmd + Option + I.

کلیک کنید روی “کنسول” برگه

برای سافاری:

مک: مطبوعات Cmd + Option + I یا فعال کنید “توسعه” منو در “اولویت ها” زیر “پیشرفته” برگه سپس، انتخاب کنید “نمایش کنسول جاوا اسکریپت”.

8. خروجی را ببینید

باشما index.html باز کردن فایل در مرورگر و باز شدن کنسول، باید ببینید Hello, World! و Hello, World! در کنسول نمایش داده می شود. این تأیید می کند که راه اندازی شما کاملاً کار می کند!

9. کدنویسی را شروع کنید

اکنون می توانید کد جاوا اسکریپت را در داخل آن بنویسید script.js فایل. هر بار که فایل را ذخیره می کنید و مرورگر را به روز می کنید، خروجی را در کنسول خواهید دید.

شما آماده اید! کد نویسی مبارک!

ذخیره کنید index.html پس از افزودن این محتوا فایل کنید.

5. کد جاوا اسکریپت را به فایل جاوا اسکریپت خود اضافه کنید

خودت را باز کن script.js در همان ویرایشگر متن فایل کنید و مقداری کد جاوا اسکریپت اضافه کنید:

console.log("Hello, World!");

ذخیره کنید script.js پس از افزودن کد فایل.

6. فایل HTML را در مرورگر خود باز کنید

اکنون، در را باز کنید index.html فایل را در مرورگر وب دلخواه خود ارسال کنید. می توانید این کار را با دوبار کلیک کردن روی فایل یا کشیدن آن به پنجره باز مرورگر انجام دهید.

7. به کنسول مرورگر دسترسی پیدا کنید

برای دیدن خروجی کد جاوا اسکریپت خود، باید به کنسول مرورگر دسترسی داشته باشید. این مراحل را بر اساس مرورگر خود دنبال کنید:

برای گوگل کروم:

• ویندوز/لینوکس: مطبوعات Ctrl + Shift + I یا F12.
• مک: مطبوعات Cmd + Option + I.

کلیک کنید روی “کنسول” برگه

برای موزیلا فایرفاکس:

• ویندوز/لینوکس: مطبوعات Ctrl + Shift + K یا F12.
• مک: مطبوعات Cmd + Option + K.

کلیک کنید روی “کنسول” برگه

برای مایکروسافت اج:

• پنجره ها: مطبوعات Ctrl + Shift + I یا F12.
• مک: مطبوعات Cmd + Option + I.

کلیک کنید روی “کنسول” برگه

برای سافاری:

• مک: مطبوعات Cmd + Option + I یا فعال کنید “توسعه” منو در “اولویت ها” زیر “پیشرفته” برگه سپس، انتخاب کنید “نمایش کنسول جاوا اسکریپت”.

8. خروجی را ببینید

باشما index.html باز کردن فایل در مرورگر و باز شدن کنسول، باید ببینید Hello, World! و Hello, World! در کنسول نمایش داده می شود. این تأیید می کند که راه اندازی شما کاملاً کار می کند!

9. کدنویسی را شروع کنید

اکنون می توانید کد جاوا اسکریپت را در داخل آن بنویسید script.js فایل. هر بار که فایل را ذخیره می کنید و مرورگر را به روز می کنید، خروجی را در کنسول خواهید دید.

شما آماده اید! کد نویسی مبارک!