---

📝 راه‌اندازی محیط کار:

1️⃣ برای نوشتن کد جاوااسکریپت، به یک ویرایشگر کد نیاز دارید. ویرایشگرهای مختلفی در دسترس هستند، از جمله Visual Studio Code (VSCode)، Sublime Text، Atom و غیره. ویرایشگر مورد علاقه من Visual Studio Code است که می‌توانید آن را از [code.visualstudio.com](https://code.visualstudio.com) دانلود کنید.

💻 این ویرایشگر بسیار ساده، سبک، چندسکویی و قدرتمند است. اگر هنوز Visual Studio Code را روی سیستم خود ندارید، حتماً آن را دانلود کنید.

2️⃣ مورد دیگری که می‌خواهم نصب کنید Node.js است. می‌توانید Node را از [nodejs.org](https://nodejs.org) دانلود کنید.

⚙️ از نظر فنی، برای اجرای جاوااسکریپت نیازی به Node ندارید، زیرا می‌توانید کد جاوااسکریپت را در مرورگر یا در Node اجرا کنید. اما داشتن Node روی سیستم شما مفید است، زیرا برای نصب کتابخانه‌های شخص ثالث از آن استفاده می‌کنیم. در ادامه این بخش، یک پیش‌نمایش از Node را به شما نشان می‌دهم.

⏸️ حالا ویدیو را متوقف کنید و Visual Studio Code و Node را دانلود کنید. وقتی کارتان تمام شد، برگردید و ادامه دهید.

---

📁 ایجاد پروژه:

3️⃣ حالا یک پوشه جدید بسازید و نام آن را js-basics بگذارید. نام این پوشه چندان مهم نیست؛ فقط نیاز داریم که یک پوشه برای نوشتن تمام کدهای این دوره داشته باشیم. این پوشه را به Visual Studio Code بکشید و در آن بیندازید.

🆕 وقتی پوشه را باز کردید، بیایید یک فایل جدید به نام index.html اضافه کنیم.

💡 شما برای شرکت در این دوره نیازی به دانستن HTML ندارید، اما اگر می‌خواهید یک توسعه‌دهنده فرانت‌اند شوید، باید HTML را به خوبی بشناسید. در این فایل، یک علامت تعجب (!) تایپ کنید و سپس Tab را فشار دهید. این کار باعث می‌شود یک الگوی اولیه HTML ایجاد شود.

🔧 فعلاً نیازی نیست به این کد توجه کنید؛ ما از آن به عنوان میزبان کد جاوااسکریپت خود استفاده خواهیم کرد. در درس بعدی این را خواهید دید. پس تغییرات را ذخیره کنید.

---

🔌 نصب Live Server:

4️⃣ حالا، به تب Extensions در Visual Studio Code بروید. در کادر جستجو، Live Server را جستجو کنید.

🌐 Live Server یک وب‌سرور سبک است که ما برای سرو کردن اپلیکیشن وب خود از آن استفاده خواهیم کرد. آن را نصب کنید و سپس Visual Studio Code را دوباره راه‌اندازی کنید.

📂 بعد از این کار، به تب Explorer بروید، روی index.html کلیک راست کرده و گزینه Open with Live Server را انتخاب کنید.

🌍 این کار باعث می‌شود Chrome یا مرورگر پیش‌فرض شما باز شود و به آدرسی که اپلیکیشن وب ما از آن سرو می‌شود، هدایت شود.

---

🔍 تست راه‌اندازی:

5️⃣ در حال حاضر، ما یک صفحه خالی داریم. برای اطمینان از اینکه همه چیز به درستی کار می‌کند، به Visual Studio Code برگردید.

📝 در بخش بدنه (body)، یک تگ h1 اضافه کنید، Tab را فشار دهید و Hello World را تایپ کنید.

💾 تغییرات را ذخیره کنید و در مرورگر، می‌توانید ببینید که صفحه به طور خودکار تازه می‌شود و عنوان Hello World را نمایش می‌دهد.

---

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

---

---

📝 Setting Up Your Environment:

1️⃣ To write JavaScript code, you need a code editor. There are various code editors available, including Visual Studio Code (VSCode), Sublime Text, Atom, and more. My favorite is Visual Studio Code, which you can download from [code.visualstudio.com](https://code.visualstudio.com).

💻 It's a simple, lightweight, cross-platform, and powerful editor. If you don't have Visual Studio Code installed on your machine, go ahead and download it.

2️⃣ The other thing I want you to install is Node.js. You can download Node from [nodejs.org](https://nodejs.org).

⚙️ Technically, you don't need Node to execute JavaScript since you can run JavaScript code in a browser or in Node. However, having Node installed is beneficial for installing third-party libraries. Later in this section, I'll show you a preview of Node.

⏸️ Pause the video now and download Visual Studio Code as well as Node. Once you're done, come back and continue watching.

---

📁 Creating Your Project:

3️⃣ Now, create a new folder and name it js-basics. The name doesn't matter much; we just need a folder for writing all the code in this course. Drag and drop this folder into Visual Studio Code.

🆕 With the folder open, let's add a new file named index.html.

💡 You don't need to know HTML to take this course, but if you want to be a front-end developer, it's good to have a solid understanding of HTML. In this file, type an exclamation mark (!) and then press Tab. This will generate some basic HTML boilerplate.

🔧 We don't need to focus on this code right now; we'll use it as a host for our JavaScript code. You'll see that in the next lecture. So, save your changes.

---

🔌 Installing Live Server:

4️⃣ Now, open the Extensions tab in Visual Studio Code. In the search box, look for Live Server.

🌐 Live Server is a lightweight web server that we will use to serve our web application. Install it, and then restart Visual Studio Code.

📂 Once you're done, go to the Explorer tab, right-click on index.html, and select Open with Live Server.

🌍 This will open Chrome or your default browser and point it to the address where our web application is served from.

---

🔍 Testing Your Setup:

5️⃣ Currently, we have an empty page. To ensure everything is working properly, let's go back to Visual Studio Code.

📝 In the body section, add an h1 tag, press Tab, and type Hello World.

💾 Save the changes, and back in the browser, you should see that the page refreshes automatically, displaying the Hello World heading.

---

🔜 Next Steps:
In the next lecture, you'll write your first JavaScript code!

---

If you need any further adjustments, feel free to let me know!

---

📝 نوشتن اولین کد جاوااسکریپت:

1️⃣ خوب، حالا آماده‌ایم تا اولین کد جاوااسکریپت خود را بنویسیم. برای نوشتن کد جاوااسکریپت، به یک عنصر <script> نیاز داریم. ما می‌توانیم این عنصر را در دو مکان اضافه کنیم: در بخش head یا در بخش body.

✅ بهترین کار این است که عنصر <script> را در انتهای بخش body**، بعد از تمام عناصر موجود قرار دهیم. بنابراین، اینجا بعد از تگ `<h1>`، من `<script>` را تایپ می‌کنم و **Tab را فشار می‌دهم. این کار عنصر اسکریپت ما را ایجاد می‌کند.

---

🔍 چرا اسکریپت را در انتها قرار دهیم؟

2️⃣ حالا، چرا توصیه می‌کنم که عنصر اسکریپت را اینجا قرار دهیم؟ دو دلیل اصلی وجود دارد:

1. تحلیل مرورگر: مرورگر فایل HTML را از بالا به پایین تحلیل می‌کند. اگر شما اسکریپت را در بخش head قرار دهید، ممکن است مرورگر مشغول تحلیل و اجرای کد جاوااسکریپت شود که این می‌تواند باعث تأخیر در نمایش محتوای صفحه شود. این موضوع می‌تواند تجربه کاربری ضعیفی ایجاد کند، جایی که کاربران صفحه‌ای خالی می‌بینند در حالی که مرورگر در حال پردازش جاوااسکریپت است.

2. تعامل با عناصر: تقریباً همیشه، کد داخل اسکریپت نیاز دارد که با عناصر صفحه وب تعامل داشته باشد. به عنوان مثال، ممکن است بخواهیم برخی از عناصر را نشان دهیم یا پنهان کنیم. با قرار دادن کد در انتهای بخش body**، اطمینان حاصل می‌کنیم که تمام عناصر توسط مرورگر رندر شده‌اند قبل از اینکه اسکریپت اجرا شود.

⚠️ استثناهایی نیز برای این قاعده وجود دارد، مانند زمانی که از کدهای شخص ثالث استفاده می‌کنید که باید در بخش **head قرار بگیرند. اما به عنوان یک قاعده کلی، بهتر است کد جاوااسکریپت خود را در انتهای بخش body قرار دهید.

---

💻 نوشتن کد:

3️⃣ حالا شما باید همان کدی را که در درس قبلی نوشتید، بنویسید:

console.log("Hello World");

📝 بیایید این را کمی بیشتر توضیح دهیم. آنچه که ما داریم یک بیانیه است. یک بیانیه قطعه‌ای از کد است که یک عمل را بیان می‌کند. در این مورد، ما می‌خواهیم پیامی را در کنسول ثبت کنیم.

🔚 تمام بیانیه‌ها در جاوااسکریپت باید با یک نقطه‌ویرگول (;) پایان یابند. متنی که بین علامت‌های نقل قول قرار دارد، رشته نامیده می‌شود که یک دنباله از کاراکترها است.

---

💬 افزودن نظرات:

4️⃣ در جاوااسکریپت، می‌توانیم نظراتی را با استفاده از دو خط (//) اضافه کنیم. نظرات به ما اجازه می‌دهند تا توضیحاتی به کد خود اضافه کنیم که توسط موتور جاوااسکریپت نادیده گرفته می‌شوند و اجرا نمی‌شوند.

📝 نظرات برای مستند کردن کد و توضیح دادن به سایر توسعه‌دهندگان درباره اینکه چرا این کد به این شکل نوشته شده، مفید هستند. شما نیازی به توضیح دادن اینکه کد چه کاری انجام می‌دهد، ندارید، زیرا این باید از خود کد مشخص باشد. به جای آن، بر روی دلایل و روش‌های نوشتن کد تمرکز کنید.

💡 برای این دموی ساده، من یک نظر ساده اضافه می‌کنم:

// این اولین کد جاوااسکریپت من است.

---

💾 ذخیره و مشاهده خروجی:

5️⃣ حالا تغییرات را ذخیره کنید. به مرورگر برگردید و باید کنسول را باز کنیم. در هر نقطه‌ای از صفحه کلیک راست کنید و گزینه Inspect (بازرسی) را انتخاب کنید، یا به‌طور جایگزین، می‌توانید از میان‌بر استفاده کنید: Alt + Command + I در مک یا Alt + Control + I در ویندوز.

🔍 این کار تب کنسول را باز می‌کند. اگر تب کنسول بلافاصله قابل مشاهده نیست، مطمئن شوید که آن را انتخاب کرده‌اید. در اینجا، شما باید پیام Hello World را مشاهده کنید.

---

---

📝 Writing Your First JavaScript Code:

1️⃣ Alright, now we're ready to write our first JavaScript code. To write JavaScript code here, we need a <script> element. There are two places where we can add a <script> element: in the head section or in the body section.

✅ The best practice is to place the <script> element at the end of the body section, after all existing elements. So, here, after the <h1> tag, I'm going to type <script> and press Tab. This creates our script element.

---

🔍 Why Place the Script at the End?

2️⃣ Now, why do I recommend placing the script element here? There are two main reasons:

1. Browser Parsing: The browser parses the HTML file from top to bottom. If you place the script in the head section, the browser might get busy parsing and executing the JavaScript code, which can delay rendering the content of the page. This can lead to a poor user experience, where users see a blank page while the browser is processing JavaScript.

2. Element Interaction: Almost always, the code within the script needs to interact with elements on the web page. For example, we may want to show or hide certain elements. By placing the code at the end of the body section, we ensure that all elements are rendered by the browser before the script runs.

⚠️ There are exceptions to this rule, such as when using third-party code that must be placed in the head section. However, as a best practice, you should add your JavaScript code at the end of the body section.

---

💻 Writing the Code:

3️⃣ Now, you're going to write the same code you wrote in the last lecture:

console.log("Hello World");

📝 Let’s discuss this in a bit more detail. What we have here is a statement. A statement is a piece of code that expresses an action to be carried out. In this case, we want to log a message to the console.

🔚 All statements in JavaScript should be terminated with a semicolon (;). The text between the quotes is called a string, which is a sequence of characters.

---

💬 Adding Comments:

4️⃣ In JavaScript, we can also add comments using two slashes (//). Comments allow us to add descriptions to our code, which are ignored by the JavaScript engine and not executed.

📝 Comments are useful for documenting the code and explaining to other developers why certain code was written in a specific way. You don’t need to explain what the code does, as that should be clear from the code itself. Instead, focus on the reasons and methods behind your code.

💡 For this demo, I’m going to add a simple comment:

// This is my first JavaScript code.

---

💾 Saving and Viewing the Output:

5️⃣ Now, save the changes. Back in the browser, we need to bring up the console. Right-click somewhere on the page and select Inspect, or alternatively, you can use a shortcut: Alt + Command + I on Mac or Alt + Control + I on Windows.

🔍 This will open the console tab. If the console tab isn’t immediately visible, make sure to select it. Here, you should see the Hello World message displayed.

---