Adding code-editors and devtools articles.

Author: mehradsadeghi

1-js/01-getting-started/3-code-editors/article.md

@@ -0,0 +1,63 @@
+# ویرایشگرهای متن 
+
+ویرایشگرهای متن محلی ‌است که برنامه‌نویسان بیشتر وقت خود را آنجا صرف میکنند. 
+
+در مجموع دو نوع ویرایشگر وجود دارد : یکی IDE ها و دیگری ویرایشگرهای سبک برای کد نویسی. بعضی از هر دوی اینها استفاده می‌کنند. 
+
+## IDE
+
+عبارت [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) یا همان Integrated Development Environment به یک ویرایشگر قدرتمند با امکانات بسیار اشاره دارد که معمولا از این امکانات در "کل" یک پروژه استفاده می‌شود. 
+
+درواقع IDE امکاناتی چون بارگذاری کل پروژه، امکان جابجایی بین فایل‌ها، امکان تکمیل خودکار کدها بر اساس نوع پروژه‌ای که انجام می‌دهید (و نه بر اساس صرفا یک فایل) را دارد، همینطور با یک سیستم کنترل نسخه مانند [Git](https://git-scm.com/) سازگار است، امکاناتی مانند محیط تست نرم افزار را در اختیار شما قرار می‌دهد و سایر امکاناتی که در سطح پروژه اهمیت دارد. 
+
+اگر هنوز یک IDE انتخاب نکرده‌اید، موارد زیر را در نظر داشته باشید : 
+
+- [WebStorm](http://www.jetbrains.com/webstorm/) برای توسعه Front End . کمپانی Jetbrains همینطور IDE های دیگری را برای زبان‌های دیگر ارائه می‌کند (که رایگان نیستند) 
+
+- [Netbeans](http://netbeans.org/) (رایگان) 
+
+این IDE ها اصطلاحا Cross Platform هستند. 
+
+همینطور برای Windows می‌توانید از Visual Studio استفاده کنید (منظور Visual Studio Code نیست). Visual Studio یک نرم افزار غیر رایگان است و فقط بر روی Windows کار می‌کند که برای توسعه پلتفرم dot net مناسب است. نسخه رایگان این نرم افزار [Visual Studio Community](https://www.visualstudio.com/vs/community/) نام دارد.  
+
+بعضی از IDE ها پولی هستند ولی برای مدتی به صورت آزمایشی می‌توان از آنها به رایگان استفاده کرد. معمولا قیمت آنها در مقایسه با درآمد برنامه‌نویسان ناچیز است، پس یک IDE خوب برای خود انتخاب کنید. 
+
+## ویرایشگرهای سبک 
+
+این دسته از ویرایشگرها به اندازه IDE ها قدرتمند نیستند، ولی سبک، زیبا و ساده هستند.  
+
+معمولا برای ویرایش سریع یک فایل استفاده می‌شوند. 
+
+تفاوت اصلی بین ویرایشگرهای سبک و IDE ها در آن است که IDE ها در سطح پروژه استفاده می‌‌شوند، در نتیجه در آغاز اطلاعات زیادی را بارگذاری می‌کنند، ساختار پروژه را تحلیل میکنند و موارد این‌چنینی. در زمانیکه بخواهیم روی یک فایل کار کنیم ویرایشگرهای سبک بسیار سریع‌تر هستند. 
+
+در عمل ویرایشگرهای سبک دارای افزونه‌های متعددی هستند، مانند تحلیل‌کننده‌های سینتَکس (syntax)، تکمیل‌کننده های کد و غیره. به همین دلیل نمی‌تواند مرز دقیقی بین IDE و ویرایشگرهای سبک قائل بود. 
+
+موارد زیر ارزش توجه را دارند : 
+
+- [Visual Studio Code](https://code.visualstudio.com/) : رایگان - Cross Platform و همچنین تعدادی از قابلیت‌های IDE ها را دارد 
+
+- [Atom](https://atom.io/) : رایگان - Cross Platform 
+
+- [Sublime Text](http://www.sublimetext.com) : رایگان برای مدت محدود - Cross Platform 
+
+- [Notepad++](https://notepad-plus-plus.org/) : برای Windows - رایگان 
+
+- [Vim](http://www.vim.org/) و [Emacs](https://www.gnu.org/software/emacs/) هم اگر با نحوه کارشان آشنا باشید خوب هستند. 
+
+## مورد علاقه‌های من 
+
+ترجیح نویسنده بر آن است که برای پروژه‌ها از IDE و برای کارهای سریع و ساده از ویرایشگرهای سبک استفاده کند. 
+
+من از این نرم‌افزارها استفاده می‌کنم : 
+
+- به عنوان IDE : برای توسعه JavaScript از [WebStorm](http://www.jetbrains.com/webstorm/) (در کار با زبان‌های دیگر از دیگر محصولات JetBrains استفاده می‌کنم) 
+
+- به عنوان یک ویرایشگر سبک : [Sublime Text](http://www.sublimetext.com) یا [Atom](https://atom.io/) 
+
+## بیایید بحث نکنیم 
+
+ویرایشگرهایی بالا آنهایی هستند که من و دوستانم که آنها را توسعه‌دهندگان خوبی می‌دانم مورد استفاده قرار ‌می‌دهند و راضی هستند. 
+
+ویرایشگرهای دیگری نیز وجود دارند پس همانی که مورد علاقه شماست را انتخاب کنید. 
+
+انتخاب ویرایشگر یا هر ابزار دیگری شخصی بوده و به نوع پروژه، عادات و سلیقه شخصی بستگی دارد. 

1-js/01-getting-started/4-devtools/article.md

@@ -0,0 +1,62 @@
+# پنل توسعه‌دهندگان 
+
+کدها تمایل به خطا دارند. شما (اگر [ربات](https://en.wikipedia.org/wiki/Bender_(Futurama)) نباشید) معمولا در کدهایی که می‌نویسید خطاهایی تولید می‌کنید. 
+
+در مرورگر کاربران به طور پیش‌فرض نمی‌توانند خطاها را ببینند. در نتیجه اگر اشکالی در اسکریپت بوجود آید، ما نمی‌توانیم ببنیم که خطا در چه بخشی بوجود آمده و آن را درست کنیم. 
+
+به منظور دیدن خطاها و بسیار امکانات دیگر درباره اسکریپت‌ها، بخشی تحت عنوان developer tools در مرورگرها قرار داده شد. 
+
+بسیاری از توسعه‌دهندگان از Chrome و Firefox استفاده می‌کنند چراکه بهترین developer tools را دارا هستند. دیگر مرورگرها نیز developer tools ارائه می‌کنند که بعضا دارای ویژگی‌های خاصی نیز هستند، ولی معمولا این تلاش سایز مرورگرها برای پیشی گرفتن از Chrome و Firefox هست. در نتیجه معمولا توسعه‌دهندگان یک مرورگر را به عنوان مرورگر محبوب خود انتخاب می‌کنند و در صورتی که مشکلی خاصِ یک مرورگر وجود داشت، از مرورگری دیگر برای آن مورد خاص استفاده می‌کنند. 
+
+ابزارهای توسعه (developer tools) قدرتمند هستند. آنها ویژگی‌های بسیاری دارند. برای شروع یاد می‌گیریم که چطور آنها را باز کنیم و به خطاها نگاهی می‌اندازیم، همینطور دستورات جاوا اسکریپت را اجرا می‌‌کنیم. 
+
+## Google Chrome
+
+این صفحه [bug.html](bug.html) را باز کنید. 
+
+یک خطای جاوا اسکریپتی در کد اسکریپت این صفحه وجود دارد که از چشمان کاربران پنهان است. به همین منظور پنل توسعه‌دهندگان را باز می‌کنیم تا آن را ببینیم. 
+
+کلید `F12` را فشار دهید یا اگر در سیستم‌عامل Mac هستید کلیدهای `cmd + opt + j` را بفشارید. 
+
+پنل توسعه‌دهندگان به صورت پیش‌فرض روی تب Console باز می‌شود و شما چیزی شبیه به این را باید ببینید : 
+
+![chrome](chrome.png)
+
+ظاهرا دقیق این پنل بر اساس نسخه Chrome تغییر می‌کند ولی در نهایت چیزی شبیه به این خواهد بود. 
+
+- در اینجا می می‌توانیم خطایی به رنگ قرمز ببینیم. در این اینجا اسکریپت ما دارای دستوری ناشناخته به نام "lalala" است. 
+
+- در سمت راست لینک قابل کلیکی وجود دارد که عنوان آن `bug.html:12` است که نشان دهنده محل وقوع خطا است. 
+
+در زیر پیام خطا، یک علامت `<` به رنگ آبی وجود دارد.در اینجا ما می‌توانیم دستورات جاوا اسکریپتی بنویسم. با فشردن `Enter` این دستورات اجرا می‌شوند (`Shift + Enter` برای نوشتن دستورات در چند خط). 
+
+تا اینجا می می‌توانیم خطاها را ببینیم و این برای شروع کافی است. ما در آینده به این پنل، به منظور رفع خطاها (Debugging) دوباره سر خواهیم زد. 
+
+## مرورگر Firefox ، Edge و دیگر مرورگرها  
+
+بیشتر مرورگرها از کلید `F12` برای باز کردن developer tools استفاده می‌کنند. 
+
+ظاهر و حس کار با این پنل‌ها بسیار مشابه است. زمانی که کار با یکی از آنها را فرا بگیرید، می‌توانید به راحتی از دیگری استفاده کنید. 
+
+## Safari
+
+این مرورگر (که فقط در سیستم عامل Mac و نه در Windows و Linux) در اینجا مقداری متفاوت است و ابتدا باید ویژگی Developer menu را فعال کنیم. 
+
+به Preferences رفته و به تب Advanced بروید و تیک مربوط به Developer menu را در پایین فعال کنید. 
+
+![safari](safari.png)
+
+حالا `cmd + opt + c` می‌‌تواند پنل توسعه دهندگان را باز کند. 
+
+## ورودی چند خطی
+
+معمولا زمانیکه چند خط کد وارد می‌کنیم و سپس `key:Enter` را می‌زنیم، آن کد اجرا می‌شود.
+برای ورود چند خط کد و سپس اجرای آنها از کلید `key:Shift+Enter` استفاده نمایید.
+
+## خلاصه
+
+- Developer tools به ما امکان مشاهده خطاها، آزمایش متغیرها و امکانات بسیار دیگری را می‌دهد. 
+
+- از طریق کلید `F12` در بیشتر مرورگرها در Windows باز می‌شود. Chrome در Mac با کلیدهای `cmd + opt + j` باز می‌شود و Safari با `cmd + opt + c` (که ابتدا نیاز به فعال‌سازی دارد) 
+
+حال که محیط مناسب برای کار با جاوا اسکریپت را آماده کردیم، در بخش بعدی بیشتر با جاوا اسکریپت آشنا خواهیم شد.