JS in English
7 subscribers
4 videos
5 files
2 links
Download Telegram
---

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

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.

---
2