آموزش جاوااسکریپت (Javascript)

دسته بندی: آموزش طراحی وب

آموزش جاوااسکریپت

آنچه در این صفحه می خوانید:

معرفی جاوااسکریپت (Javascript)

جاوااسکریپت زبان برنامه‌نویسی سطح بالا، پویا، مبتنی بر شی، چند رویه و تفسیری است. این زبان اغلب به عنوان بخشی از صفحات وب استفاده می شود که پیاده سازی آن ها به اسکریپت سمت کلاینت اجازه می دهد تا با کاربر ارتباط برقرار کرده و صفحات دینامیکی ایجاد کند. جاوا اسکریپت زبان برنامه نویسی تفسیر شده با قابلیت های شی گرا است. جاوا اسکریپت برای اولین بار به عنوان LiveScript شناخته شد، اما Netscape نام آن را احتمالا به دلیل هیجاناتی که توسط جاوا ایجاد شد به JavaScript تغییر داد. جاوا اسکریپت اولین بار در Netscape 2.0 در سال 1995 با نام LiveScript ساخته شد. هسته همه منظوره این زبان در Netscape، اینترنت اکسپلورر و سایر مرورگرهای وب جاسازی شده است. ECMA-262 Specification نسخه استاندارد از هسته زبان جاوا اسکریپت را تعریف می کند. JavaScript 2.0 مطابق با نسخه 5 استاندارد ECMAScript است و تفاوت بین این دو بسیار جزئی است. امروزه، جاوا اسکریپت Netscape و JScript مایکروسافت با استاندارد ECMAScript مطابقت دارند، هرچند هر دو زبان هنوز از ویژگی هایی که جزء استاندارد نیستند پشتیبانی می کنند.

Javascript زبان برنامه نویسی داینامیک است که در کنار اچ تی ام ال و CSS یکی از مهم ترین عنصر فناوری های وب استاندارد به شمار می رود. جاوا اسکریپت صفحات وب تعاملی را فعال می کند و جزئی اساسی در برنامه های وب است. اکثریت قریب به اتفاق وب سایت ها از آن استفاده می کنند و مرورگرهای اصلی وب برای اجرای آن از موتور جاوا اسکریپت اختصاصی استفاده می کنند. این زبان هم به صورت ساخت یافته و هم به صورت شی گرا مورد استفاده برنامه نویسان قرار می گیرد. در حقیقت Javascript به صفحات وب زندگی می بخشد. این برنامه امکان اجرای چیزهای پیچیده را برای شما فراهم می کند. هر بار که صفحه وب، اطلاعات استاتیک، به روزرسانی های محتوا، نقشه های تعاملی، گرافیک های دو بعدی یا سه بعدی، اسکرول کردن jukebox های ویدئویی و غیره را به شما نمایش می دهد، می توانید از دخیل بودن Javascript در آن اطمینان حاصل کنید.

در ابتدا موتورهای جاوا اسکریپت فقط با اجرا سمت کلاینت در مرورگرهای وب استفاده می شد، اما اکنون در بسیاری از انواع دیگر نرم افزارهای میزبان از جمله سمت سرور در وب سرورها و دیتابیس ها و در برنامه های غیر وب مانند ورد و نرم افزار PDF و در ران تایم تعبیه شده اند. اصطلاحات Vanilla JavaScript و Vanilla JS به JavaScript اطلاق می شود که توسط هیچ فریمورک یا کتابخانه های اضافی تمدید نشده باشد. اسکریپت های نوشته شده در Vanilla JS کد جاوا اسکریپت ساده هستند.

تاریخچه جاوااسکریپت (Javascript)

Javascript در ماه مه 1995 توسط Brendan Eich در 10 روز ایجاد شد که در شرکت Netscape کار می کرد و در حال حاضر در Mozilla فعالیت می کند. از جاوااسکریپت همیشه به عنوان جاوااسکریپت نام برده نمی شد. نام اصلی آن Mocha بود، نامی که مارک آندریسن، بنیانگذار نت اسکیپ برگزید. در سپتامبر 1995 نام آن به LiveScript تغییر یافت، سپس در ماه دسامبر همان سال، پس از دریافت مجوز علامت تجاری از Sun، نام جاوااسکریپت پذیرفته شد. در سال های 1996 تا 1997، نت اسکیپ، Javascript را برای استاندارد سازی به سازمان ECMA ارسال کرد که در نهایت منجر به انتشار رسمی نسخهٔ استاندارد شده‌ای به نام ECMA Script شد.

ویژگی های جاوااسکریپت (Javascript)

پشتیبانی جهانی

همه مرورگرهای وب مدرن محبوب از JavaScript با محیط داخلی اجرا پشتیبانی می کنند.

دستورات و ساختار

جاوا اسکریپت بخش اعظمی از نحو برنامه نویسی ساخت یافته را از C پشتیبانی می کند (به عنوان مثال، اگر عبارات در حالی که حلقه ها هستند، عبارات سوئیچ، حلقه های dowhile و غیره) را پشتیبانی می کنند.

پویا

  • تایپ: جاوا اسکریپت مانند سایر زبان های اسکریپت نویسی به صورت پویا تایپ می شود. نوع به جای عبارت با مقدار همراه است. به عنوان مثال، متغیر که در ابتدا به یک عدد محدود شده است ممکن است به رشته مجدداً واگذار شود. جاوا اسکریپت از روش های مختلفی برای آزمایش نوع اشیاء، از جمله duck typing پشتیبانی می کند.
  • ارزیابی ران تایم: JavaScript شامل تابع Eval است که می تواند در زمان اجرا عبارات ارائه شده به عنوان رشته را اجرا کند.

شی گرا (prototype-based)

prototype وراثت در جاوا اسکریپت توسط داگلاس کراکفورد به شرح زیر است:

شما اشیاء نمونه اولیه می سازید، و سپس موارد جدید ایجاد می کنید. اشیاء در جاوا اسکریپت قابل تغییر هستند، بنابراین می توانیم نمونه های جدید را تقویت کنیم و زمینه ها و روش های جدیدی به آنها ارائه دهیم. سپس این ها می توانند به عنوان نمونه های اولیه برای اجسام جدیدتر عمل کنند. ما به کلاس هایی برای ساختن اشیاء مشابه احتیاج نداریم، اشیاء از اشیاء به ارث می برند. چه چیزی می تواند بیشتر از آن شیء گرا باشد؟

در جاوا اسکریپت، یک شی آرایه انجمنی است، که با نمونه اولیه تقویت می شود. هر کلید رشته نامی را برای ویژگی شی ارائه می دهد و دو روش نحوی برای مشخص کردن چنین نامی وجود دارد: نشانه گذاری نقطه (obj.x = 10) و نماد براکت (obj ['x'] = 10). ممکن است یک تابع در زمان اجرا اضافه شود، برگردد یا حذف شود. بسیاری از خواص شی (و هر ویژگی متعلق به زنجیره ارثی نمونه اولیه شی) را می توان با استفاده از حلقه for...in شمارش کرد. جاوا اسکریپت تعداد کمی اشیاء داخلی از جمله Function و Date دارد.

  • Prototypes: جاوا اسکریپت از Prototypes استفاده می کند که بسیاری از زبان های شی گرا دیگر از کلاس هایی برای ارث استفاده می کنند. شبیه سازی بسیاری از ویژگی های مبتنی بر کلاس با نمونه های اولیه در JavaScript امکان پذیر است.

تابعی

در جاوااسکریپت تابع، first-class است. تابع به عنوان شی در نظر گرفته می شود. به این ترتیب، تابع ممکن است دارای خواص و متد هایی مانند()call. و ()bind. باشد. تابع تو در تو، توابع تعریف شده در تابع دیگر است. هر بار تابع بیرونی فراخوانده می شود. علاوه بر این، هر تابع تو در تو، بسته بندی واژگانی را تشکیل می دهد: دامنه واژگان عملکرد خارجی (شامل هر متغیر ثابت، محلی یا مقدار آرگومان) بخشی از حالت داخلی هر یک از تابع های داخلی می شود، حتی پس از اجرای عملکرد بیرونی نتیجه می گیرد. جاوا اسکریپت همچنین از توابع ناشناس پشتیبانی می کند.

محیط ران تایم

جاوا اسکریپت به طور معمول به یک محیط زمان اجرا (به عنوان مثال، مرورگر وب) تکیه می کند تا اشیاء و روش هایی را ارائه دهد که توسط آن ها اسکریپت ها می توانند با محیط ارتباط برقرار کنند (به عنوان مثال، صفحه وب DOM). همچنین برای فراهم کردن امکان درج / وارد کردن اسکریپت به محیط زمان اجرا نیز وابسته است. این ویژگی زبان به خودی خود نیست، اما در اکثر پیاده سازی های جاوا اسکریپت رایج است. جاوا اسکریپت پیام های صف را یکجا پردازش می کند. جاوا اسکریپت تابعی را که همراه با هر پیام جدید است، فراخوانی می کند و قاب فراخوانی پشته با آرگومان های تابع و متغیرهای محلی ایجاد می کند. فراخوانی پشته با توجه به نیاز تابع، کوچک می شود و رشد می کند. هنگامی که فراخوانی پشته پس از اتمام تابع خالی باشد، جاوا اسکریپت به پیام بعدی در صف می رود. به این حلقه رویداد گفته می شود که به عنوان "run to completion" توصیف می شود زیرا هر پیام قبل از در نظر گرفتن پیام بعدی کاملاً پردازش می شود. با این حال، مدل همزمانی زبان حلقه رویداد را به عنوان غیر مسدود کننده توصیف می کند: ورودی / خروجی برنامه با استفاده از رویدادها و توابع پاسخ به فراخوانی انجام می شود. به عنوان مثال، به این معنی است که جاوا اسکریپت می تواند کلیک ماوس را پردازش کند در حالی که منتظر پرس و جو از پایگاه داده برای بازگشت اطلاعات است.

برنامه های افزودنی Vendor-specific

جاوا اسکریپت به طور رسمی توسط بنیاد موزیلا اداره می شود و ویژگی های جدید زبان بصورت دوره ای اضافه می شود. با این حال، تنها برخی از موتورهای جاوا اسکریپت از این ویژگی های جدید پشتیبانی می کنند:

  • خاصیت گیرنده و تنظیم کننده تابع (پشتیبانی شده توسط WebKit ،Gecko ،Opera ،ActionScript و Rhino)
  • بندهای catch شرطی
  • پروتکل تکرار (گرفته شده از پایتون)
  • ژنراتورها-كوروتین های كم عمق (گرفته شده از پایتون)
  • درک آرایه و عبارات ژنراتور (گرفته شده از پایتون)
  • دامنه مناسب برای بلوک از طریق کلید واژه let
  • تخریب آرایه و اشیاء (شکل محدود از تطبیق الگوی)

فریمورک های جاوااسکریپت (Javascript)

نود جی اس

یک محیط ران تایم اوپن سورس و cross-platform (چندسکویی) برای جاوا اسکریپت است که کد جاوا اسکریپت را در خارج از یک مرورگر اجرا می کند. Node.js به توسعه دهندگان اجازه می دهد تا از JavaScript برای نوشتن ابزارهای خط فرمان و اسکریپت نویسی سمت سرور استفاده کنند. در نتیجه، Node.js با یکپارچه سازی توسعه برنامه وب حول یک زبان برنامه نویسی واحد، به جای زبان های مختلف برای اسکریپت های سمت سرور و مشتری به عنوان یک نمونه  everywhere نشان داده می شود.

جی کوئری

محبوب‌ ترین کتابخانه ی جاوااسکریپت چند مرورگری JQuery نام دارد که به نوشتنِ اسکریپ‌هایِ سمت مشتری درHTML  را سهولت می بخشد. JQuery تنها یک فایل جاوااسکریپت می باشد که از همه ی DOM ها، Event ها، اِفکت‌ها و تابع‌های مربوط به ای جکس تشکیل شده است.

انگولار جی اس

انگولار جی اس یک فریمورک محبوب جاوااسکریپت می باشد که توسط گوگل توسعه پیدا کرده است. با انگولار شما قادر به ساخت برنامه های تک صفحه ای (Single Page) هستید. فریمورک انگولار به خوبی معماری MVC را در سمت کلاینت (کاربر) پیاده سازی می کند. انگولار از Html ،Css و Javascript استفاده می کند و تقریبا می توان گفت که نقص های آن ها را برطرف می کند.

ری اکت جی اس

در سال 2013 جردن واک، فریمورک متن باز و جاوا اسکریپتی به نام React.js را منتشر کرد. ری اکت یک کتابخانه ی جاوا اسکریپت رسمی، اوپن سورس، کارآمد و قابل انعطاف برای ایجاد رابط کاربری است. در معماری MVC ری اکت در لایه نمایش کاربرد دارد. ری اکت جی اس می تواند برنامه های کاربردی بسازد که encapsulated و قابل استفاده‌ی مجدد هستند و می‌توان برایشان کامپوننت‌های متفاوت نوشت.

امبر جی اس

 یک فریمورک اوپن سورس، جاوا اسکریپتی، رایگان و سمت کلاینت است که برای توسعه برنامه های کاربردی وب طراحی شده. Ember.js اجازه می دهد تا برنامه های جاوا اسکریپت سمت کلاینت با ارائه یک راه حل کامل که حاوی مدیریت داده ها و جریان برنامه باشد ایجاد شوند.

Backbonejs

Backbone.js یک کتابخانه جاوا اسکریپتی است که به خاطر استفاده راحت و ساختار ساده ی آن که در برنامه های جاوااسکریپت اعمال می شود، در بین دیگر کتابخانه ها اهمیت خاصی در جامعه توسعه وب دارد.

Meteor.js

 یک فریمورک جامع جاوا اسکریپت (JS) است که از مجموعه ای از کتابخانه ها و بسته ها تشکیل شده است. اما برخی از مردم آن را جادوی Meteor می نامند. Meteor بر مبنای مفاهیم فریمورک ها و کتابخانه های دیگر ساخته شده است به گونه ای که ایجاد برنامه های کاربردی را آسانتر می سازد.

Vue.js

یک فریمورک اوپن سورس جاوااسکریپت در توسعه وب برای ساخت رابط های کاربری و برنامه های تک صفحه ای است. برخلاف سایر فریمورک های یکپارچه، Vue از پایه طراحی شده تا از نظر تدریجی قابل قبول باشد. کتابخانه اصلی فقط روی لایه نمایش متمرکز شده است و به راحتی می توان آن را با سایر کتابخانه ها یا پروژه های موجود جمع کرد. از طرف دیگر Vue همچنین قادر است در هنگام استفاده از کتابخانه های نوین و پشتیبانی از کتابخانه ها، از برنامه های تک صفحه ای پیشرفته استفاده کند.

Polymerjs

Polymer.js یک کتابخانه جاوا اسکریپت است که توسط Google ایجاد شده و امکان استفاده مجدد از عناصر HTML را برای ساختن برنامه ها با اجزاء فراهم می کند.

Knockoutjs

Knockout یک کتابخانه جاوا اسکریپت است که به شما کمک می کند تا با مدل داده های پایه ای، نمایشگر واکنش گرا و غنی و رابط های کاربر ویرایشگر ایجاد کند. هر زمانی که بخش هایی از UI در اختیار داشته باشید که به صورت پویا به روزرسانی شده اند (به عنوان مثال، تغییرات با توجه به اقدامات کاربر یا زمانی که یک منبع داده خارجی تغییر می کند اتفاق میفتد)، می تواند به شما در پیاده سازی ساده تر آن کمک کند.

extjs

ExtJS یک فریمورک جاوا اسکریپت محبوب است که UI غنی برای ساخت برنامه های وب با قابلیت cross-browser فراهم می کند. ExtJS بر اساس معماری MVC / MVVM است. آخرین نسخه Ext JS 6 یک پلتفرم واحد است که می تواند برای هر دو برنامه دسکتاپ و موبایل بدون نیاز به کد های مختلف برای پلتفرم های مختلف استفاده شود.

winjs

WinJS یک کتابخانه اوپن سورس جاوا اسکریپت است که helper هایی را ارائه می دهد تا برنامه های نیتیو Windows Store را با استفاده از HTML5 و جاوا اسکریپت تسهیل بخشد.

underscorejs

 یک کتابخانه جاوا اسکریپت است که بسیاری از برنامه های برنامه نویسی کاربردی را که از Prototype.js (یا Ruby) انتظار می رود، بدون گسترش هر یک از اشیاء ساخته شده در جاوا اسکریپت فراهم می کند.

sailsjs

 یک فریمورک با معماری MVC برای Node.js است که به طور خاص برای توسعه سریع برنامه های جانبی سرور در جاوا اسکریپت طراحی شده است. معماری مبتنی بر خدمات آن انواع مختلفی از اجزایی را فراهم می کند که می توانید آنها را برای مرتب سازی کد و مسئولیت های جداگانه استفاده کنید. حتی توسعه برنامه کاربردی در سطح سازمانی نیز ممکن است. از آنجایی که Sailsjs با Javascript نوشته شده است، به شما مزیت دیگری را می دهد که بتوانید کد خود را بین سرور و کلاینت به اشتراک بگذارید.

babeljs

bablejs یک ترنسپایلر جاوا اسکریپت است که کد را به جاوا اسکریپت ES5 قدیمی تبدیل می کند و می تواند در هر مرورگری اجرا شود (حتی آنهایی که قدیمی هستند). Bablejs تمام ویژگی های سینتکس که به جاوااسکریپت افزوده شده است را با مشخصات ES6 دارد.

کاربرد جاوااسکریپت (Javascript)

با مرورگرهای فنآوری و رایانه های شخصی به حدی بهبود یافته اند که به زبان برای ایجاد برنامه های وب مستحکم نیاز بود. وقتی کاربر نقشه ای را در Google Maps کاوش می کند، کاربر فقط باید کلیک کرده و ماوس را بکشید. تمام نمای دقیق فقط با یک کلیک قابل مشاهده است. این امر به دلیل جاوا اسکریپت امکان پذیر است. بدون ارسال پیام به سرورها و مرورگر با مرورگر ارتباط برقرار می کند. جاوا اسکریپت از رابط های برنامه نویسی برنامه (API) استفاده می کند که قدرت اضافی را برای کد فراهم می کند.

  • تحرک پذیری المان ها در صفحه وب
  • ارتقای رابط های HTML
  • حل مشکلات صفحه بندی
  • پیشنهاد نتایج در جعبه جستجو در زمانی که شما در آن تایپ می کنید و بر اساس آنچه تا کنون وارد کرده اید نتایجی را ارائه می دهد.
  • سرعت بالا و حافظه کوچک جاوا اسکریپت در مقایسه با سایر زبان ها
  • بدون ارسال پیام به سرور، اجازه می دهد تا همه چیز در مرورگر کاربر اتفاق بیفتد.
  • می توانید در مرورگر به HTML استاتیک خود چیزی بیافزایید یا آن را تغییر دهید.

پیاده سازی جاوا اسکریپت بسیار آسان است. همه کاری که باید انجام دهید این است که کد خود را در سند HTML قرار دهید و به مرورگر بگویید که این جاوا اسکریپت است. جاوا اسکریپت بر روی رایانه های کاربران وب کار می کند، حتی زمانی که آفلاین هستند. جاوا اسکریپت این امکان را فراهم می کند تا رابط های پاسخگو ایجاد کنید در نتیجه، بدون نیاز به انتظار برای واکنش سرور و نمایش صفحه دیگر، قابلیت های داینامیک را فراهم می کند. زمانی که کاربر نیاز به بارگذاری محتوا در سند را دارد، جاوا اسکریپت می تواند بدون بارگذاری کل صفحه این امکان را فراهم کند. جاوااسکریپت می تواند آنچه که در مرورگر شما رخ می دهد را امتحان کند و طبق آن واکنش نشان دهد. این عمل، به عنوان اصول جاوا اسکریپت غلط و گاهی اوقات اسکریپت های دفاعی نامیده می شود. جاوااسکریپت می تواند به مشکلات مرورگر و پشتیبانی آن کمک کند. برای مثال: حل مشکلات طرح بندی CSS در مرورگرهای خاص.

استفاده از HTML5 در گرافیک های طراحی جاوا اسکریپت در صفحه وب آسان تر شده است. همه شکل های دو و سه بعدی را می توان به راحتی روی بوم رسم کرد و این باعث شده تا مرورگر به عنوان رسانه جدید برای همه پروژه های مختلف هنری دیجیتال باز شود. بوم مرز و محتوا ندارد و از این رو به کاربر اجازه می دهد تا هنر خودش را خلق کند.

جاوا اسکریپت پر کاربردترین زبان است زیرا در کلیه دستگاه ها و برنامه های ممکن استفاده می شود. استفاده از JavaScript کتابخانه Pebble JS را فراهم می کند که در برنامه های ساعت هوشمند استفاده می شود. این فریمورک برای برنامه هایی کاربرد دارد که برای عملکرد آن به اینترنت نیاز دارند. استفاده از Pebbles به یک توسعه دهنده اجازه می دهد تا برای تعدادی از ساعت با استفاده از JavaScript برنامه ای ایجاد کند.

تفاوت بین جاوااسکریپت و جاوا

اگرچه بین جاوا اسکریپت و جاوا شباهت هایی وجود دارد، از جمله نام زبان، سینتکس و کتابخانه های استاندارد مربوطه، این دو زبان مجزا هستند و از نظر طراحی بسیار متفاوت هستند. جاوا اسکریپت تحت تأثیر زبان های برنامه نویسی مانند Self و Scheme بود. فرمت سریال سازی JSON، برای ذخیره سازی ساختار داده ها در فایل ها یا انتقال آنها از طریق شبکه ها، مبتنی بر JavaScript است.

بر خلاف شباهت اسمی آن ها، کاملا متفاوت از یکدیگر هستند. جاوا زبان برنامه نویسی Object Oriented است که با interpreter بر روی چندین سیستم عامل اجرا می شود و توسط شرکت Sub Microsystems طراحی و پیاده سازی شده است. این زبان برنامه نویسی برای تولید نرم افزار قابل استفاده بر روی پلتفرم های مختلف ایجاد شد. درحالیکه، جاوااسکریپت توسط شرکت Netscape طراحی شد و در حقیقت زبان اسکریپت نویسی می باشد. پس، نیازی به فرآیند کامپایل شدن و کامپایلر ندارد و توسط مرورگر اینترنت اجرا می شود.

محدودیت های جاوا اسکریپت

ویژگی Client-side JavaScript اجازه خواندن یا نوشتن فایل ها را نمی دهد. این به خاطر دلیل امنیتی حفظ شده است. جاوا اسکریپت نمی تواند برای برنامه های شبکه استفاده شود چون چنین پشتیبانی وجود ندارد. جاوا اسکریپت هیچ قابلیت multi-threading یا multiprocessor ندارد.

محیط توسعه جاوااسکریپت (Javascript)

محیط توسعه یکپارچه (IDE) یک نرم افزار کاربردی است که امکانات کاملی را برای برنامه نویسان رایانه جهت توسعه نرم افزار فراهم می کند. IDE معمولاً از حداقل یک ویرایشگر کد منبع، ساختن ابزارهای اتوماسیون و دیباگینگ تشکیل شده است. برخی از IDE ها، مانند NetBeans و Eclipse، حاوی کامپایلر، مترجم یا هر دو مورد لازم هستند. دیگران، مانند SharpDevel و Lazarus، چنین کاری نمی کنند. مرز بین یک IDE و سایر قسمت های محیط توسعه نرم افزار گسترده به خوبی مشخص نشده است. گاهی اوقات یک سیستم کنترل نسخه یا ابزارهای مختلف برای ساده سازی ساخت رابط کاربری گرافیکی (GUI) یکپارچه شده است. بسیاری از IDE های مدرن همچنین دارای مرورگر کلاس، مرورگر شی و  نمودار سلسله مراتبی کلاس برای استفاده در توسعه نرم افزار شی گرا هستند.

ویژوال استودیو کد

ویژوال استودیو کد، یک ویرایشگر کد رایگان، چندسکویی، فوق العاده سریع و سبک وزن است که توسط مایکروسافت برای ویندوز، لینوکس و Mac ایجاد شده است. Visual studio code مبتنی بر فریمورک Electron می باشد که برای ساخت نرم افزار دسکتاپ چند سکویی با استفاده از فناوری های وب مورد استفاده قرار می گیرد. همچنین برای استقرار اپلیکیشن های Node.js برای اجرا بر روی دسکتاپ بر روی موتور طرح ریزی Blink استفاده می شود.

WebStorm

WebStorm ویرایشگر کامل برای توسعه دهندگان وب و یک IDE کامل است که تمام ابزارها و امکانات را برای توسعه دهندگان جاوا اسکریپت، Typescript، NodeJS و البته HTMLو CSSفراهم می کند. WebStorm در بالای پلتفرم IntelliJ منبع باز ساخته شده است.

ویم (Vim)

Vim یا Vi Improved یک ویرایشگر متن برای برنامه نویسان می باشد که با Vi سازگار است و مخصوصا برای ویرایش برنامه ها مناسب می باشد. با استفاده از یک رابط خط فرمان و همچنین به عنوان یک برنامه مستقل با رابط کاربر گرافیکی به کار برده می شود.

Emacs

ویرایشگر متن Emacs حالت های حساس به محتوای متنوعی را برای متن ساده، برنامه نویسی کد منبع و کد HTML ارائه می دهند. چنین حالت هایی دارای نحو برجسته سازی هستند که رنگ های مختلف برای برجسته کردن عناصر مختلف سینتکس (مانند حلقه ها، نظرات، متغیرها و ...) استفاده می شوند. این ویژگی می تواند کد برنامه را ساده تر و سریع تر برای خواندن و در نتیجه توسعه سریع تر کند. Emacs بیش از یک ویرایشگر متن است همچنین می تواند دستورات پوسته، دسترسی به اینترنت، نوشتن و تست برنامه ها، و خواندن و ارسال ایمیل در محیط Emacs انجام دهد.

NetBeans

اکثر توسعه دهندگان، NetBeans IDE را به عنوان IDE اصلی و رایگان جاوامی دانند. NetBeans IDE از چندین زبان (PHP، JavaFX، C++ / C، جاوا اسکریپت، و غیره) و فریمورک پشتیبانی می کند. NetBeans یک پروژه اوپن سورس است که برای ارائه محصولات توسعه نرم افزار جامع نرم افزار (NetBeans IDE و پلت فرم NetBeans) اختصاص داده شد تا به نیازهای توسعه دهندگان، کاربران و کسب و کارهایی که به NetBeans به عنوان پایه ای برای محصولات خود متکی هستند، پاسخ می دهد. خصوصا آن ها را قادر می سازد تا با سرعت بیشتر، کارآمدتر و راحت تر این محصولات را با استفاده از نقاط قوت پلت فرم جاوا و دیگر استانداردهای صنعت مربوطه، توسعه دهند.

ویژوال استودیو

ویژوال استودیو مجموعه کاملی از ابزارهای توسعه برای ساخت برنامه های کاربردی وبASP.NET، خدمات وب XML، برنامه های کاربردی دسک تاپ و برنامه های کاربردی تلفن همراه است. ویژوال بیسیک، ویژوال سی و ویژوال سی پلاس پلاس همه از یک محیط توسعه یکپارچه (IDE) استفاده می کنند که به اشتراک گذاری ابزار و ایجاد راه حل های مخلوط زبان را آسان می کند. مایکروسافت ویژوال استودیو به عنوان یک محیط توسعه یکپارچه نرم افزاری استفاده می شود که برای توسعه برنامه های کامپیوتری برای مایکروسافت ویندوز، و همچنین وب سایت ها، برنامه های کاربردی وب و خدمات وب استفاده می شود.

Dreamweaver

شرکت ادوبی نرم افزاری را جهت طراحی وب سایت با نام Dreamweaver تولید کرد. بدون نصب هیچگونه نرم افزار دیگری می توان به راحتی یک وب سایت را به کمک Dreamweaver طراحی کرد. این برنامه کاملا هوشمند و کار با آن ساده است. به همین دلیل لازم به حفظ تمامی کد ها و ویرایش کلمات غلط نیست. با زبان HTML می توان صفحات سایت را برپایه استاتیک و یا دینامیک طراحی و ایجاد کرد و با استفاده از گزینه FTP  در نرم افزار صفحات ایجاد شده را به هاست انتقال داد.

از دیگر محیط های توسعه می توان به موارد زیر اشاره کرد:

  • PhpStorm
  • Atom
  • Komodo IDE
  • ++Notepad
  • Angular IDE

مثال های جاوااسکریپت (Javascript)

در زیر نمونه ای از صفحه وب با استانداردهای حاوی JavaScript (با استفاده از HTML 5) و DOM:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <button id="hellobutton">Hello</button>
    <script>
        document.getElementById('hellobutton').onclick = function() {
            alert('Hello world!');                    // Show a dialog
            var myTextNode = document.createTextNode('Some new words.');
            document.body.appendChild(myTextNode);    // Append "Some new words" to the page
        };
    </script>
  </body>
</html>

این کد نمونه ویژگی های مختلف JavaScript را نشان می دهد.

/* Finds the lowest common multiple (LCM) of two numbers */
function LCMCalculator(x, y) { // constructor function
    let checkInt = function(x) { // inner function
        if (x % 1 !== 0)
            throw new TypeError(x + "is not an integer"); // var a =  mouseX

return x; };

this.a = checkInt(x) // semicolons ^^^^ are optional, a newline is enough this.b = checkInt(y); } // The prototype of object instances created by a constructor is // that constructor's "prototype" property. LCMCalculator.prototype = { // object literal constructor: LCMCalculator, // when reassigning a prototype, set the constructor property appropriately gcd: function() { // method that calculates the greatest common divisor // Euclidean algorithm: let a = Math.abs(this.a), b = Math.abs(this.b), t;

if (a < b) { // swap variables // t = b; b = a; a = t; [a, b] = [b, a]; // swap using destructuring assignment (ES6) }

while (b !== 0) { t = b; b = a % b; a = t; }

// Only need to calculate GCD once, so "redefine" this method. // (Actually not redefinition—it's defined on the instance itself, // so that this.gcd refers to this "redefinition" instead of LCMCalculator.prototype.gcd. // Note that this leads to a wrong result if the LCMCalculator object members "a" and/or "b" are altered afterwards.) // Also, 'gcd' === "gcd", this['gcd'] === this.gcd this['gcd'] = function() { return a; };

return a; },

// Object property names can be specified by strings delimited by double (") or single (') quotes. lcm: function() { // Variable names do not collide with object properties, e.g., |lcm| is not |this.lcm|. // not using |this.a*this.b| to avoid FP precision issues let lcm = this.a / this.gcd() * this.b;

// Only need to calculate lcm once, so "redefine" this method. this.lcm = function() { return lcm; };

return lcm; },

toString: function() { return "LCMCalculator: a = " + this.a + ", b = " + this.b; } };

// Define generic output function; this implementation only works for Web browsers function output(x) { document.body.appendChild(document.createTextNode(x)); document.body.appendChild(document.createElement('br')); }

// Note: Array's map() and forEach() are defined in JavaScript 1.6. // They are used here to demonstrate JavaScript's inherent functional nature. [ [25, 55], [21, 56], [22, 58], [28, 56] ].map(function(pair) { // array literal + mapping function return new LCMCalculator(pair[0], pair[1]); }).sort((a, b) => a.lcm() - b.lcm()) // sort with this comparative function; => is a shorthand form of a function, called "arrow function" .forEach(printResult);

function printResult(obj) { output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm()); }

برنامه نویسی سمت سرور با جاوااسکریپت

برنامه های کاربردی سرور

Node JS برای ساختن برنامه های شبکه سریع و مقیاس پذیر در زمان اجرا Javascript Chrome ساخته شده است. این برنامه از برنامه های کاربردی، سبک و کارآمد استفاده می کند که باید به کمک سرور در سیستم ها توزیع شوند. Javascript برای رسیدگی به درخواست HTTP و تولید محتوا استفاده می شود. وقتی کاربر در حال نوشتن برنامه ها در JavaScript روی کلاینت است، ممکن است کاربر حتی منطق را در JavaScript روی سرور بنویسد تا جهش های شناختی از یک زبان به زبان دیگر انجام شود.

وب سرور

با استفاده از نود جی اس می توان سرور وب ایجاد کرد. از مزایای Node JS این است که از رویداد محور است و منتظر پاسخ فراخوانی قبلی نخواهد بود. به فراخوانی بعدی منتقل می شود و هنگامی که پاسخی برای فراخوانی قبلی دریافت می شود، از رویدادها استفاده می کند. سرورهای ساخته شده روی Node JS بسیار سریع هستند و از بافر و انتقال قطعات داده استفاده نمی کنند.

Client-side JavaScript

Client-side JavaScript متداول ترین شکل زبان است. اسکریپت باید با سند HTML برای کدی که توسط مرورگر تفسیر می شود مشمول شود یا ارجاع داده شود. این بدان معنا است که صفحه وب نباید HTML استاتیک باشد، بلکه می تواند شامل برنامه هایی باشد که با کاربر تعامل برقرار، مرورگر را کنترل و محتوای HTML را به صورت پویا ایجاد کند. مکانیزم سمت کلاینت جاوا اسکریپت، مزایای بسیاری نسبت به اسکریپت های سمت سرور CGI دارد. برای مثال، شما ممکن است از جاوا اسکریپت برای بررسی اینکه آیا کاربر آدرس ایمیل معتبر را در فیلد فرم وارد کرده اید استفاده کنید. کد جاوا اسکریپت هنگامی که کاربر فرم را اجرا می کند، اجرا می شود و تنها اگر تمام ورودی ها معتبر باشند، آنها می توانند به وب سرور منتقل شوند. جاوا اسکریپت می تواند برای بررسی رویدادهایی که کاربران ایجاد می کنند مانند دکمه های کلیک، ناوبری لینک و سایر اقداماتی که کاربر به طور صریح یا به طور ضمنی انجام می دهد مورد استفاده قرار گیرد.

ساخت اپلیکیشن موبایل با جاوااسکریپت

مهمترین کاری که با استفاده از JavaScript می توان انجام داد ساختن برنامه های کاربردی بدون زمینه های وب است. از موبایل هایی که بیشتر در اپل و اندروید دارای دو سیستم عامل مختلف هستند برای ساخت این موارد استفاده می شود. یک بار برنامه را بنویسید و استفاده از آن در هر دو سیستم عامل این دستگاه ها امکان پذیر باشد. فون گپ فریمورکی است که این امکان را فراهم می آورد. همچنین اخیراً ری اکت نیتیو را داریم که به این منظور سرویس دهی می کند. از این رو با استفاده از Javascript می توان برای استقرار و بارگیری برنامه های مربوطه در محیط های متقاطع استفاده کرد.

کوردوا فریمورک توسعه برنامه کاربردی موبایل است که می تواند برای ایجاد برنامه های تلفن همراه چند سکویی با CSS و HTML5 و JavaScript استفاده شود. منظور از Cross-platform، این است که می توان یک بار کد برنامه را بنویسید و در چندین سیستم عامل تلفن همراه مانند اندروید، iOS یا ویندوز فون اجرا کرد. Apache Cordova فریمورک توسعه برنامه کاربردی تلفن همراه است که در ابتدا توسط نیتوبی ایجاد شده است. Adobe Systems نیتوبی را در سال 2011 خریداری کرد، آنرا دوباره به عنوان PhoneGap معرفی کرد و بعداً نسخه اوپن سورس نرم افزاری به نام Apache Cordova را منتشر کرد. Apache Cordova به برنامه نویسان نرم افزار این امکان را می دهد تا به جای اتکا به API های خاص برای سیستم عامل، برنامه هایی را برای دستگاه های تلفن همراه با استفاده از CSS، اچ تی ام ال و جاوااسکریپت ایجاد کنند. ویژگی های HTML و JavaScript را برای کار با دستگاه گسترش می دهد. برنامه های کاربردی به دست آمده هیبرید هستند، زیرا برنامه ها از طریق وب به جای فریمورک UI نیتیو سیستم عامل انجام می شود و نه بدین معنی که آن ها کاملاً تحت وب باشند زیرا آنها فقط برنامه های وب نیستند بلکه به عنوان برنامه هایی برای توزیع و دسترسی به API های دستگاه نیتیو بسته بندی شده اند. مخلوط کردن قطعات کد نیتیو و هیبرید از نسخه 1.9 امکان پذیر است.

ساخت بازی با جاوااسکریپت

نه تنها برای وب سایت بلکه استفاده از جاوا اسکریپت در ایجاد بازی برای اوقات فراغت نیز کمک می کند. ترکیب JavaScript و HTML5 باعث می شود JavaScript در توسعه بازی نیز محبوب شود. این کتابخانه Ease JS را ارائه می دهد که راه حل های ساده ای را برای کار با گرافیک های غنی ارائه می دهد. همچنین دارای API است که با لیست نمایش سلسله مراتبی برای توسعه دهندگان تمام فلش آشنا است. کاربر می تواند Stage ایجاد کند و لیست نمایشگر را به بوم مورد نظر خود نمایش دهد. Ease JS همچنین دارای نقشه های بایت دو بعدی به نام Sprites است که بطور مستقیم برای ارائه هدف برای تحولات ترسیم شده اند.

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

کانستراکت (Construct2)

کانستراکت (Construct2) یک ویرایشگر بازی 2D مبتنی بر HTML5 است که توسط Scirra Ltd توسعه یافته است. هدف از ایجاد Construct فراهم کرن شرایطی است تا افراد غیر برنامه نویس، بازی ها را در یک کشیدن و رها کردن با استفاده از یک ویرایشگر بصری و یک سیستم منطقی مبتنی بر رفتار ایجاد کنند. روش اصلی برنامه نویسی بازی ها و برنامه های کاربردی در Construct از طریق "event sheets" است که مشابه فایل های منبع در زبان های برنامه نویسی هستند. برنامه هایی برای پشتیبانی از جاوااسکریپت به عنوان یک زبان اسکریپتی اختیاری در سال 2019 با توجه به نیازهای کاربران پیشرفته و محبوبیت راه حل های موجود، اعلام شد. پلتفرم های اصلی خروجی Construct مبتنی بر HTML5 هستند.

Phaser

Phaser یک فریمورک بازی HTML5 است که هدف آن کمک به توسعه دهندگان برای ایجاد بازی های cross-browser HTML5 می باشد. Phaser اجازه می دهد بازی های 2D کامل را در یک مرورگر با دانش کمی در مورد توسعه بازی یا جاوا اسکریپت برای طراحی مرورگر به طور کلی انجام دهید.

برنامه نویسی شی گرا در جاوااسکریپت

برنامه نویسی شی گرا (OOP) به استفاده از تک کد ها برای توسعه برنامه ها اشاره دارد. برای برنامه ها از اشیاء به عنوان بلوک های ساختمانی استفاده می شود. ساختن برنامه های کاربردی با اشیاء به ما اجازه می دهد تا برخی از تکنیک های ارزشمند را اتخاذ کنیم، یعنی وراثت، پلی مورفیسم و Encapsulation.

بررسی Encapsulation و وراثت

می توان اشیاء را به عنوان بازیگران اصلی برنامه یا به سادگی "چیزهای" اصلی یا بلوک های ساختمانی دانست که تمام کارها را انجام می دهد. همانطور که اکنون می دانید، اشیاء در همه جا در جاوا اسکریپت وجود دارند زیرا هر مؤلفه در JavaScript یک Object است، از جمله توابع، رشته ها و اعداد. ما به طور معمول برای ایجاد اشیاء از لفظ شیء یا توابع سازنده استفاده می کنیم.

Encapsulation به محصور کردن کلیه ویژگی های شی در آن شی می باشد تا کارهای داخلی شی (روش ها و خصوصیات آن) از بقیه برنامه پنهان شود. این به ما امکان می دهد مجموعه خاصی از ویژگی های موجود در اشیا را انتزاعی یا بومی سازی کنیم. وراثت به شی گفته می شود که می تواند روش ها و خصوصیات شیء والدین را به ارث ببرد (کلاس در زبان های دیگر OOP یا تابع در JavaScript). هر دو این مفاهیم، محصور سازی و وراثت دارای اهمیت هستند زیرا به ما امکان می دهند برنامه هایی را با کد قابل استفاده مجدد، معماری مقیاس پذیر و ویژگی های انتزاعی بسازیم.

تست جاوااسکریپت

تست ها می توانند با ایجاد صفحه HTML با کتابخانه های تست و تست های موجود در فایل های JS در مرورگر اجرا شوند. آزمایشات همچنین با وارد کردن تست ها و کتابخانه های وابسته می توانند در Node.js نیز اجرا شوند. jsdom معمولاً در Node.js برای شبیه سازی محیط مانند مرورگر با استفاده از JavaScript خالص استفاده می شود. پنجره، سند، بادی، موقعیت مکانی، کوکی ها، انتخاب کننده ها و هر آنچه را که می توانید وقتی JS خود را درون مرورگر اجرا می کنید، فراهم می کند، اما هیچ چیز واقعی نمی دهد. این متفاوت از "حالت بدون سر" است زیرا برای حالت بدون سر نیاز به مرورگر واقعی دارید و بر خلاف jsdom حتی می تواند عکس بگیرید. ما روش دوم (Node.js + jsdom) را پیشنهاد می کنیم زیرا بسیار سریع تر از اجرای تست ها در مرورگر است. روش اول ممکن است قابل اطمینان تر باشد زیرا شما از همان نرم افزار دقیقی استفاده می کنید که سایت شما را در زندگی واقعی ارائه می دهد. با این حال، استفاده از jsdom سبک تر است و برای بیشتر موارد استفاده باید کافی باشد.

آشنایی با Ecma Script

ECMAScript (یا ES) مشخصات زبان اسکریپتی است که توسط Ecma International در ECMA-262 و ISO / IEC 16262 بصورت استاندارد تنظیم شده است. این برای استاندارد سازی جاوا اسکریپت برای کمک به تقویت چندین اجرای مستقل ایجاد شده است. جاوا اسکریپت از زمان انتشار اولین استاندارد، با اجرای دیگر شناخته شده ها از جمله JScript و ActionScript، شناخته شده ترین اجرای ECMAScript باقی مانده است. ECMAScript معمولاً برای اسکریپت نویسی سمت کلاینت در شبکه جهانی وب استفاده می شود و به طور فزاینده ای برای نوشتن برنامه ها و خدمات سرور با استفاده از Node.js مورد استفاده قرار می گیرد.

زبان ECMAScript شامل ویژگی های ساختاری، پویا، کاربردی و مبتنی بر نمونه های اولیه است. ES6 حالت جدیدی برای تعریف توابع، به اصطلاح "arrow functions" به همراه آورد. در ES5، تابع به صورت زیر تعریف می شود:

var readWikiArticle = function(content) {
    // Read it!
};

در حالی که در ES6، با استفاده از سینتکس جدید arrow function به این صورت است:

var readWikiArticle = (content) => {
    //Read article!
};

آیا این نوشته را دوست داشتید؟