سلام دوستان به چنل خودتون خوش اومدید ♥️

یه توضیح مختصر در مورد چنل بدم 🙃

خب ما توی این چنل میایم دوره های JavaScript, typescript,node.js و ... یکی از بهترین اساتید (ماش همدانی) رو قرار میدیم 😘


چرا ماش ؟🧐
چون بیان خیلی خوبی داره و مفاهیم را به ساده ترین شکل انتقال میده ، و مهم ترین نکته اینه که از اضافه گویی پرهیز کرده ، خیلی از اساتید ساعت های طولانی تدریس میکنند فقط به خاطر این که دوره هاشون به چشم بیاد و فروش بره

دوستان هیچ دوره کاملییییی نیاززززز نیسسستتتتتت 🤨
شما باید مفاهیم اصلی و پایه رو یاد بگیرید
و بر اساس شرکتی که شروع به کار میکنیدددد یه سری چیزای اضاف که اون شرکت میخواد رو یادبگیرید ، پس نگید من باید همه چیو یاد بگیرم ، چون همه چیو با ۲۰۰ ساعت هم نمیشه جمع کرد ، خودتونو الکی توی loop آموزش نندازید ، فقط سریع وارد بازار کار بشید و بر اساس نیاز چیز های جدید رو یادبگیرید 🙂

من اومدم دوره های آقای ماش رو تهیه کردم همراه با زیرنویس ، ولی از اونجایی که یک سری ها انگلیسیشون ضعیفه اومدم کل متن هر ویدیو را براتون ترجمه کردم‌😅

دیگه چی میخواید خداییییی😁
پس دیگه بهونه نیارید و start بزنید 💪


دوره های هر روز آپلود میشه صبور باشید🌹❤️

js-1

@javascript_en

---

🎬 مقدمه‌ای بر جاوااسکریپت

در این مقدمه سه دقیقه‌ای، به چهار سوال متداول درباره جاوااسکریپت پاسخ می‌دهم.
❓ جاوااسکریپت چیست؟
❓ چه کارهایی می‌توان با آن انجام داد؟
❓ کدهای جاوااسکریپت کجا اجرا می‌شوند؟
❓ تفاوت جاوااسکریپت و ECMA Script چیست؟

بیایید با اولین سوال شروع کنیم.
💡 جاوااسکریپت چیست؟
جاوااسکریپت یکی از محبوب‌ترین و پرکاربردترین زبان‌های برنامه‌نویسی در حال حاضر است. این زبان سریع‌تر از هر زبان برنامه‌نویسی دیگری در حال رشد است و شرکت‌های بزرگی مانند Netflix، Walmart و PayPal برنامه‌های کامل را بر اساس جاوااسکریپت می‌سازند.
💰 و این هم میانگین حقوق یک توسعه‌دهنده جاوااسکریپت در ایالات متحده: `۷۲,۰۰۰ دلار در سال`.
بنابراین، این یک فرصت عالی برای یادگیری جاوااسکریپت و پیدا کردن شغل مناسب است. شما می‌توانید به عنوان توسعه‌دهنده فرانت‌اند، بک‌اند، یا فول استک کار کنید.

❓ سوال دوم: چه کارهایی می‌توان با جاوااسکریپت انجام داد؟
مدت‌ها جاوااسکریپت فقط در مرورگرها برای ساخت صفحات وب تعاملی استفاده می‌شد و برخی توسعه‌دهندگان آن را یک زبان اسباب‌بازی می‌نامیدند. اما آن روزها گذشته است و به لطف حمایت جامعه و سرمایه‌گذاری‌های بزرگ شرکت‌هایی مانند فیس‌بوک و گوگل، اکنون می‌توان برنامه‌های وب یا موبایل کامل، برنامه‌های شبکه‌ای زمان واقعی مانند چت و خدمات پخش ویدئو، ابزارهای خط فرمان یا حتی بازی‌ها را ساخت.

🔍 سوال سوم: کدهای جاوااسکریپت کجا اجرا می‌شوند؟
جاوااسکریپت در ابتدا برای اجرا در مرورگرها طراحی شده بود. هر مرورگر یک موتور جاوااسکریپت دارد که می‌تواند کد جاوااسکریپت را اجرا کند. به عنوان مثال، موتورهای جاوااسکریپت در فایرفاکس و کروم به ترتیب SpiderMonkey و V8 هستند. در سال ۲۰۰۹، یک مهندس بسیار باهوش به نام برایان دال موتور جاوااسکریپت متن باز کروم را در یک برنامه C++ جاسازی کرد و آن را Node نامید.

⚙️ بنابراین، Node یک برنامه C++ است که شامل موتور جاوااسکریپت `V8` گوگل می‌باشد.
اکنون با این امکان، می‌توانیم کد جاوااسکریپت را خارج از مرورگر اجرا کنیم و این به ما اجازه می‌دهد تا بک‌اند برنامه‌های وب و موبایل خود را بسازیم. به عبارت دیگر، کد جاوااسکریپت می‌تواند در داخل مرورگر یا در Node اجرا شود. مرورگرها و Node محیط اجرایی برای کد جاوااسکریپت ما فراهم می‌کنند.

❓ و در نهایت، سوال آخر: تفاوت جاوااسکریپت و ECMA Script چیست؟
ECMA Script فقط یک مشخصه است؛ جاوااسکریپت یک زبان برنامه‌نویسی است که به این مشخصه پایبند است. سازمانی به نام ECMA مسئول تعریف استانداردها است و آن‌ها به این مشخصه ECMA Script رسیدگی می‌کنند.
نسخه اول ECMA Script در سال ۱۹۹۷ منتشر شد و از سال ۲۰۱۵، ECMA بر روی انتشار سالانه یک مشخصه جدید کار کرده است.

📅 در سال ۲۰۱۵، `ECMA Script 2015`، که همچنین به عنوان نسخه ۶ `ECMA Script` یا `ES6` شناخته می‌شود، منتشر شد.
این مشخصه بسیاری از ویژگی‌های جدید را برای جاوااسکریپت تعریف کرد.
🚀 حالا کافی است، بیایید جاوااسکریپت را در عمل ببینیم.
هر مرورگر یک موتور جاوااسکریپت دارد و ما می‌توانیم به راحتی کد جاوااسکریپت را بدون ابزار اضافی بنویسیم. البته، این روش ساخت برنامه‌های واقعی نیست، اما فقط برای یک دموی سریع است.

🖱 بنابراین، کروم را باز کنید، روی یک ناحیه خالی کلیک راست کنید و به `Inspect` بروید.
این ابزارهای توسعه‌دهنده کروم را باز می‌کند. در اینجا، زبانه Console را انتخاب کنید، این کنسول جاوااسکریپت ماست و می‌توانیم هر کد جاوااسکریپت معتبری را در اینجا بنویسیم.
بنابراین، این را تایپ کنید:

console.log('Hello World');

حالا وقتی وارد دوره می‌شوید، دقیقاً متوجه می‌شوید که همه این‌ها به چه معناست، فعلاً نگران نباشید.

↩️ حالا، Enter را بزنید و می‌توانید پیام `Hello World` را در کنسول ببینید.
همچنین می‌توانید عبارات ریاضی را در اینجا بنویسید. به عنوان مثال،

2 + 2

و شما 4 را دریافت می‌کنید. یا می‌توانیم چیزی شبیه به این بنویسیم:

alert('yo');

Enter را بزنید و یک Alert خواهید دید.

🔜 در درس بعدی، درباره راه‌اندازی محیط توسعه برای نوشتن کد جاوااسکریپت صحبت می‌کنم.

---

---

🎬 In this three minute introduction, I'm going to answer four frequently asked questions about JavaScript.
❓ What is JavaScript? What can you do with it?
❓ Where does JavaScript code run? And what is the difference between JavaScript and ECMA Script?
So let's start with the first question.
💡 What is JavaScript?

🌍 JavaScript is one of the most popular and widely used programming languages in the world right now. It's growing faster than any other programming languages, and big companies like Netflix, Walmart, and PayPal build entire applications around JavaScript.
💰 And here's the average salary of a JavaScript developer in the United States. That is $72,000 a year. So it's a great opportunity to get a great job learning JavaScript. You can work as a front-end developer, or back-end developer, or a full-stack developer, or who knows, both the front-end and the back-end.

❓ Now the second question, what can you do with JavaScript? For a long time, JavaScript was only used in browsers to build interactive web pages. Some developers referred to JavaScript as a toy language. But those days are gone because of huge community support and investments from large companies like Facebook and Google. These days you can build full-blown web or mobile apps as well as real-time networking apps like chats and video streaming services, command-line tools, or even games.

🔍 Here's an example, the third question, where does JavaScript code run? JavaScript was originally designed to run only in browsers. So every browser has what we call a JavaScript Engine that can execute JavaScript code. For example, the JavaScript engines in Firefox and Chrome are SpiderMonkey and V8. In 2009, a very clever engineer called Brian Doll took the open source JavaScript engine in Chrome, and embedded it inside a C++ program. He called that program Node.

⚙️ So Node is a C++ program that includes Google's V8 JavaScript engine. Now with this we can run JavaScript code outside of a browser, so we can pass our JavaScript code to Node for execution. And this means that with JavaScript we can build the back-end for our web and mobile applications. So, in a nutshell, JavaScript code can be run inside of a browser, or in Node. Browsers and Node provide a runtime environment for our JavaScript code.

❓ And finally the last question, what is the difference between JavaScript and ECMA Script? Well, ECMA Script is just a specification; JavaScript is a programming language that conforms to this specification. So, we have this organization called ECMA, which is responsible for defining standards; they take care of this ECMA Script specification. The first version of ECMA Script was released in 1997. Then, starting in 2015, ECMA has been working on annual releases of a new specification.

📅 So in 2015, ECMA Script 2015, which is also called ECMA Script version 6, or ES6 for short. This specification defined many new features for JavaScript.
🚀 Alright, enough theory, let's see JavaScript in action. So every browser has a JavaScript engine, and we can easily write JavaScript code here without any additional tools. Of course, this is not how we build real-world applications, but this is just for a quick demo.

🖱 So open up Chrome, right-click on an empty area and go to inspect. Now this opens up Chrome developer tools. Here, select the console tab, this is our JavaScript console, and we can write any valid JavaScript code here. So, type this:

console.log("Hello World");

put a single quote here, and then `"Hello World"` another single quote to terminate, close the parenthesis, and add a semicolon at the end. Now as you go through the course, you're going to understand exactly what all this means, for now, don't worry about it.

↩️ So now, press enter, and you can see the Hello World message on the console. You can also write mathematical expressions here. For example,

2 + 2

you get

4

Or we can do something like this:

alert('yo');

Enter and here's an alert.

🔜 In the next lecture, I'm going to talk about setting up your development environment for writing JavaScript code.

---

---

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

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.

---