وظایف یک برنامه نویس جاوا اسکریپت چیست؟ زبان برنامه نویسی جاوا اسکریپت: اطلاعاتی برای مبتدیان جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان همیشه در حال تکامل است، به خصوص اکنون که به روز رسانی مشخصات ECMAScript قرار است سالانه منتشر شود. در این راستا، اهمیت دانستن جاوا اسکریپت خارج از جی کوئری در حال افزایش است.

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

با در نظر گرفتن این جنبه ها، بیایید شروع کنیم ...

تست FizzBizz چیست؟

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

به عنوان یک قاعده، چنین آزمون هایی بار معنایی زیادی ندارند. این فقط با هدف آزمایش توانایی های نامزدهای بالقوه است.

به یاد داشته باشید، احتمال اینکه در مصاحبه از شما خواسته شود در آزمونی مانند این شرکت کنید، بسیار زیاد است.

نمونه ای از آزمون کلاسیک FizzBizz:

گزینه های چنین آزمایش هایی بی پایان هستند. یک بار در یک مصاحبه با چنین آزمایشی روبرو شدم که پس از آن مجبور شدم دو گزینه دیگر را انتخاب کنم.

برای (var i = 1; i<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

تفاوت بین == و ===

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

انواع عملوندها را با هم مقایسه نمی کند، در عوض، آنها را به یک نوع تبدیل می کند. چنین عملیاتی شهرت منفی دارد.

Console.log(24 == "24"); // درست است، واقعی

همانطور که می بینید، مقدار رشته 24 (در گیومه های تکی) به یک نوع عدد صحیح ریخته شده است. البته، شرایطی وجود دارد که این دقیقاً همان چیزی است که شما می‌خواهید، اما در اغلب موارد، احتمالاً نمی‌خواهید که اپراتور مقایسه انواع داده‌ها را دستکاری کند. مقایسه داده ها با استفاده از عملگر == توصیه نمی شود، اکثر سیستم های بررسی سبک کد جاوا اسکریپت شما را به این خطا راهنمایی می کنند.

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

همان مثال، اما با عملگر ===

Console.log(24 === "24"); // نادرست

در پاسخ، false می‌گیریم، چون عملوندها انواع مختلفی دارند، یکی از آنها یک نوع صحیح و دومی یک نوع رشته است.

نحوه انتخاب عناصر DOM بدون کتابخانه اضافی

مطمئناً شما با نحوه انتخاب عناصر با جی کوئری آشنا هستید، اما آیا می توانید بدون کمک این کتابخانه این کار را انجام دهید؟

من فقط در مورد انتخاب یک عنصر با یک ID خاص یا مجموعه ای از کلاس ها صحبت نمی کنم، من در مورد عباراتی برای یافتن عناصر با استفاده از jQuery صحبت می کنم.

چندین روش بومی برای یافتن عناصر در DOM وجود دارد که به خوبی jQuery هستند. همچنین می توانیم از اولین فرزند، آخرین فرزند و غیره استفاده کنیم.

بیایید نگاهی به برخی از این روش ها بیندازیم.

• document.getElementById روش کلاسیک برای یافتن عناصر با شناسه آنها است.
• document.getElementsByClassName - عناصر را بر اساس مقدار فیلد className واکشی کنید
• document.querySelector یک روش عالی است که تقریباً به طور کامل جایگزین انتخابگر $() جی کوئری می شود، اما قبلاً در جاوا اسکریپت گنجانده شده است. تنها تفاوت این است که فقط اولین عنصری را که پیدا کرده است برمی گرداند.
• document.querySelectorAll مشابه روش قبلی است، اما آرایه ای از عناصر پیدا شده را برمی گرداند.
• document.getElementsByTagName - این روش به شما کمک می کند عناصر را بر اساس نام تگ انتخاب کنید. اگر می خواهید همه عناصر div را پیدا کنید، پس به این روش نیاز دارید.

همچنین می‌خواهم متذکر شوم که روش‌های querySelector و querySelectorAll را می‌توان نه تنها در کل سند، بلکه بر روی عناصر جداگانه نیز استفاده کرد، یعنی می‌توانید انتخابی را در یک عنصر والد انجام دهید.

برای توضیح کامل این روش ها به مستندات موزیلا مراجعه کنید.

اعلامیه های متغیر و عملکرد بالابر

جاوا اسکریپت از این نظر جالب است که چگونه متغیرها و توابع اعلام شده را مدیریت می کند، که همه آنها به طور خودکار به بالای محدوده ارتقا می یابند. به این ترتیب می‌توانید قبل از اعلام دامنه به آن‌ها مراجعه کنید (مثلاً توابع در جاوا اسکریپت محدوده خاص خود را دارند).

بنابراین، برای خوانایی کد، قاعده ای در نظر بگیرید که همیشه متغیرها را در ابتدای دامنه اعلام کنید. اگر در بالای یک اسکریپت یا تابع «استفاده از سخت» را مشخص کنید، هنگام دسترسی به یک متغیر اعلام نشده با خطا مواجه خواهید شد.

اکثر ابزارهای بررسی سبک کد مانند Jshint در صورت عدم استفاده از 'use strict' به شما خطا می دهند، بنابراین اگر می خواهید کد خوبی بنویسید، نمی توانید از متغیرها قبل از اعلام آنها استفاده کنید. مثل همیشه، اگر سؤالی دارید، لطفاً به مستندات موزیلا مراجعه کنید، در آنجا همیشه شرح کامل و جامع مشکل خود را خواهید یافت.

استفاده از ابزارهای توسعه دهنده در مرورگر

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

این ابزارها کمک ضروری هستند، زیرا می توانید عملکرد برنامه خود را به طور کامل نظارت کنید و مناطق مشکل را پیدا کنید.

با یادگیری نحوه استفاده از ابزارهای توسعه دهنده در مرورگرهایی مانند کروم، فایرفاکس و آخرین نسخه های اینترنت اکسپلورر، می توانید اسکریپت خود را اشکال زدایی کنید، عملکرد آن را اندازه گیری کنید و مکان هایی را پیدا کنید که ارزش بهبود الگوریتم را دارد.

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

دستورات کنسول

بیایید به نکته بعدی در یادگیری ابزارهای توسعه دهنده برویم. به طور معمول، همه آنها یک کنسول ارائه می دهند که در آن می توانید کد جاوا اسکریپت را به صورت تعاملی اجرا کنید.

احتمالاً قبلاً با دستوراتی مانند console.log و console.error آشنا هستید، اما عملکرد کنسول به این محدود نمی شود.

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

• console.log - برای ثبت رویدادها استفاده می شود. از قالب بندی پشتیبانی می کند.
• console.error - برای ثبت خطاها در کد. من از این دستور زمانی استفاده می کنم که در درخواست های AJAX و سایر قسمت های بالقوه خطرناک کد خطا وجود داشته باشد. روش مشابه روش قبلی است، اما لیستی از تماس های پشته را چاپ می کند.
• console.dir(object) - محتویات قالب بندی شده شی را نمایش می دهد. به عنوان یک قاعده، این روش هنگام اشکال زدایی کد بسیار مفید است.
• console.group(title) - به شما امکان می دهد گروهی از پیام های ثبت نام را ایجاد کنید. بنابراین، می توانید پیام ها را، به عنوان مثال، با توجه به بخشی از کد که در آن تولید می شوند، گروه بندی کنید.
• console.groupCollpased مشابه دستور قبلی با یک استثنا است. یعنی پیام ها را به صورت جمع شده نمایش می دهد.
• console.groupEnd - گروهی که قبلا ایجاد شده را پایان می دهد.
• console.time(label) - به شما امکان می دهد سرعت سایت را در میلی ثانیه ردیابی کنید. این روش برای گرفتن بخش‌های بالقوه دشوار کد مفید است.
• console.timeEnd(label) شبیه متد groupEnd است، اما در رابطه با console.time() کار می کند.
• copy(string) - روشی در کنسول کروم و فایرفاکس وجود دارد که به شما امکان می دهد محتویات یک رشته را در کلیپ بورد کپی کنید. روش بسیار مفیدی است، آن را امتحان کنید.

دقیقاً چه چیزی در این وجود دارد

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

در زبان های برنامه نویسی سنتی، این یک ارجاع به شی کلاس فعلی دارد. اما از آنجایی که جاوا اسکریپت از سنتی فاصله زیادی دارد، در آن این متغیر به شی والد متد اشاره دارد.

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

در مثال زیر، این به شی پنجره اشاره دارد:

تابع myFunction() ( console.log(this === window); // true ) myFunction();

حتماً برای شما سوال پیش می آید که اگر در متد به آن مراجعه کنیم چگونه می تواند برابر با window باشد؟ اگر پاسخ این سوال را می دانید، پس عالی است، در غیر این صورت بخوانید و سعی می کنم توضیح دهم.

هنگامی که یک تابع به این روش اعلان می شود، به شیء پنجره جهانی محدود می شود. یادتان هست که گفتیم این به والد متد مربوط می شود؟

تغییر مقدار این به یک شی کاملا جدید (نه پنجره):

تابع myFunction() ( console.log(this === window); // false ) new myFunction();

طرفداران کد پاک احتمالاً از چنین مثالی شوکه شده اند. ما فقط با چنین مثال هایی روی نوک کوه یخ راه می رویم. همانطور که خودتان می بینید، ارزش این دیگر برابر با window نیست.

چرا این اتفاق افتاد؟

ساده ترین توضیح این است که در مثال دوم از کلمه کلیدی new استفاده کردیم و بدین ترتیب یک محدوده جدید و یک شی جدید ایجاد کردیم.

در مثال زیر، یک API ساختگی برای آپلود داده ها از یک کتابخانه از یک سرور ایجاد می کنیم. ما یک شی API با چند روش ایجاد خواهیم کرد.

هنگام استفاده از کلمه new، زمینه اسکریپت از زمینه پنجره به API منتقل می شود.

Var API = ( getData: function() ( console.log(this === window); // false console.log(this === API); // true ) ); API.getData();

همانطور که می بینید، این مقدار به طور کامل با روش فراخوانی متد تنظیم می شود. از آنجایی که تابع در داخل شی API، والد آن فراخوانی می شود، این مقدار به شی API اشاره دارد.

به یاد داشته باشید، ارزش این تغییر می کند. بسته به نحوه فراخوانی آن تغییر می کند، اما اگر از روش bind استفاده کنید، مقدار آن ثابت می ماند.

می توانید در مقاله Quirksmode و مستندات موزیلا در مورد این کلمه کلیدی در جاوا اسکریپت اطلاعات بیشتری کسب کنید.

'استفاده سخت'؛

همانطور که قبلاً اشاره کردیم، user strict برای اجرای یک نسخه سخت‌گیرانه‌تر از زبان جاوا اسکریپت استفاده می‌شود. این دستورالعمل باید در همه اسکریپت ها استفاده شود.

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

یک مقاله کامل در مستندات موزیلا در مورد این موضوع وجود دارد، توصیه می کنم آن را بخوانید.

انواع مختلف چرخه

تعجب خواهید کرد، اما من با تعداد زیادی از توسعه دهندگان ملاقات کرده ام که نمی دانستند چگونه از حلقه for به درستی استفاده کنند و مطلقاً در مورد سایر انواع حلقه ها چیزی نشنیده اند. و توانایی حلقه زدن بر روی یک آرایه یا شی یک مهارت بسیار مهم برای یک توسعه دهنده است. هیچ دستورالعمل روشنی وجود ندارد که چه زمانی و از چه نوع چرخه استفاده کنید، اما باید در این مورد راهنمایی شوید. احتمالاً برای مدت و زمان آشنایی دارید، اما در مورد دیگران چطور؟

لیست حلقه ها در جاوا اسکریپت:

• برای.. در
• for..of (اضافه شده در ES6)
• برای هر
• در حالی که
• انجام در حالی که

برای حلقه

یک چرخه کاملا اجباری که باید آن را بدانید و درک کنید. او جسد خود را در صورت تحقق شرط 2 اعدام می کند.

برای (شرط 1؛ شرط 2؛ شرط 3) (// کد شما)

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

شرط 2 - از این شرط برای تعیین ادامه یا عدم ادامه حلقه استفاده می شود. احتمالاً در اینجا شمارنده خود را با اندازه آرایه مقایسه خواهید کرد. اگر مقدار مقایسه درست باشد، حلقه ادامه می یابد. اگر حلقه را به صورت داخلی با break بشکنید، می توان از این شرط صرفنظر کرد.

شرط 3 - این بخش بعد از هر بار تکرار اجرا می شود، به عنوان یک قاعده، اینجاست که شمارنده خود را افزایش می دهید.

برای ... در حلقه

مهم ترین نوع چرخه بعدی. با آن می توانید تمام فیلدهای کلاس را طی کنید.

بیایید یک مثال بزنیم.

Var person = ( firstName: "Dwayne"، نام خانوادگی: "Charrington"، سن: 27، starSign: "Aquarius") ; // حلقه زیر خروجی خواهد داشت: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p in person) ( if (person.hasOwnProperty(p)) ( console.log(person[ پ])؛ ) )

برای ... از حلقه

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

این حلقه دقیقاً برعکس for...in است، روی مقادیر فیلد تکرار می‌شود و فقط با انواع داده‌ای کار می‌کند که از تکرار پشتیبانی می‌کنند، در حالی که Object چنین نیست.

Var fruits = ["پرتقال"، "سیب"، "کدو، گلابی"]; برای (var میوه میوه ها) ( console.log(fruit); )

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

برای هر حلقه

نوع دیگری از چرخه، که در عمق خود هیچ تفاوتی با انواع چرخه های ذکر شده قبلی ندارد.

فقط با آرایه ها کار می کند نه اشیاء. این مزیت را دارد که مجبور نیستید متغیرهای اضافی ایجاد کنید که در نهایت کد شما را آلوده کنند.\

این احتمالاً محدودترین نوع چرخه است، اما حوزه های کاربردی خاص خود را دارد که باید از آنها آگاه باشید:

Var fruits = ["سیب"، "موز"، "پرتقال"، "انگور"، "گلابی"، "شور فروت"]; // سه مقدار در تابع callback عبارتند از: // عنصر - عنصر در حال عبور // شاخص - شاخص فعلی آیتم در آرایه که از 0 شروع می شود // آرایه - آرایه در حال پیمایش (احتمالاً بی ربط) میوه ها.

گاهی اوقات شما فقط باید تمام عناصر یک آرایه را مرور کنید و شاید تغییراتی در آنها ایجاد کنید. رفتار آن شبیه به jQuery.each است.

یکی از معایب این نوع چرخه این است که نمی توان آن را قطع کرد. اگر باید طبق قوانین ES5 یک حلقه ایجاد کنید، از روش Array.every استفاده کنید که می توانید آن را در مستندات موزیلا بیابید.

حلقه while

حلقه while شبیه به for است، اما فقط یک پارامتر را می طلبد - خود شرط، که طبق آن حلقه تعیین می کند که آیا تکرار آنها را ادامه دهد یا متوقف کند.

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

در تجربه من، سریعترین حلقه while حلقه کاهشی است، شما آن را یک کاهش می دهید تا به صفر برسید (که این هم قابل بحث است).

Vari = 20; while (i--) (consol.log(i)؛ )

انجام ... در حالی که حلقه

چنین چرخه ای بسیار نادر است، اما هنوز هم ارزش دارد که با آن آشنا شوید تا کار آن را درک کنید.

حلقه while ممکن است هیچ تکراری را کامل نکند. یعنی اگر یک مقدار نادرست را به عنوان شرط به حلقه ارسال کنید، یک بار تکرار انجام نخواهد شد. حلقه do...while برای اجرای حداقل یک عملیات تضمین شده است.

تفاوت به همین جا ختم نمی شود. حلقه while شرط را قبل از تکرار پردازش می کند و حلقه do...while بعد از آن.

مثل همیشه، در مستندات موزیلا شرح مفصلی از این نوع حلقه ها خواهید یافت.

روش ها و وظایف اساسی

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

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

کار با رشته ها

در جاوا اسکریپت، اغلب با داده های رشته ای کار می کنید، به استثنای آرایه ها و اشیاء. حتی اگر با رشته ها کار نمی کنید، یا فکر می کنید که این کار را نمی کنید، باز هم ارزش آشنایی با این روش ها را دارد.

• String.replace(regexp | چه چیزی جایگزین شود، چه چیزی جایگزین شود، چه چیزی جایگزین شود، برگشت به تماس) - به شما امکان می دهد بخشی از یک رشته را جایگزین کنید، عبارات منظم مجاز هستند.
• String.concat (خط 1، خط 2...) - الحاق چندین خط به یک.
• String.indexOf(value) - این روش به شما امکان می دهد شماره ترتیبی کاراکتر قسمت مورد نظر رشته را پیدا کنید، -1 - اگر رشته پیدا نشد.
• String.slice(startIndex, endIndex) - بخش رشته را از startIndex به endIndex برمی‌گرداند.
• String.split (جداکننده، حد) - رشته را با کاراکتر جداکننده به آرایه تقسیم می کند، حداکثر طول حد است.
• String.subsctr(startIndex، length) - بخشی از رشته را که از startIndex شروع می شود با طول طول برمی گرداند.
• String.toLowerCase - تمام کاراکترهای یک رشته را به حروف کوچک تبدیل می کند
• String.toUpperCase - تبدیل تمام کاراکترهای رشته به حروف بزرگ
• String.trim - فاصله ها را از ابتدا و انتهای یک رشته حذف کنید

کار با آرایه ها

شما اغلب با آرایه ها مواجه خواهید شد. آنها خود را به عنوان راهی برای ذخیره داده ها ثابت کرده اند. این روش ها قطعا برای هر توسعه دهنده جاوا اسکریپت ارزش دانستن دارند، شما نباید آنها را در گوگل جستجو کنید.

• Array.pop - آخرین عنصر را برمی گرداند و آن را از آرایه حذف می کند.
• Array.shift - اولین عنصر را برمی گرداند و آن را از آرایه حذف می کند.
• Array.push(val1, val2) - یک یا چند مقدار را به انتهای آرایه اضافه می کند. طول جدید آرایه را برمی گرداند.
• Array.reverse - ترتیب عناصر آرایه را معکوس می کند.
• Array.sort ([تابع مقایسه]) - به شما امکان می دهد یک آرایه را با استفاده از تابع خود مرتب کنید.
• Array.join(جداکننده) - رشته ای متشکل از عناصر یک آرایه که با کاراکتر جداکننده (به طور پیش فرض کاما) از هم جدا شده اند را برمی گرداند.
• Array.indexOf(value) - شاخص عنصر موجود در آرایه را برمی‌گرداند، در صورتی که عنصر پیدا نشود -1.

این لیست کاملی از روش های کار با آرایه ها نیست. موارد دیگر را می توان در مستندات موزیلا یافت. از ES6 چند روش بسیار جالب اضافه شده است.

تفاوت بین تماس و درخواست

توسعه دهندگان اغلب این دو روش را با هم اشتباه می گیرند. اغلب می توانید بدون آنها کار کنید، اما آنها به شما کمک می کنند متدها را فراخوانی کنید و این مقدار را در طول اجرا تغییر دهید.

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

با متد اعمال می‌توانید آرگومان‌ها را به‌عنوان آرایه ارسال کنید و مقدار آن را تغییر دهید.

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

مثال تماس:

تابع myFunc() ( console.log(arguments); ) myFunc.call(this, 1, 2, 3, 4, 5);

اعمال مثال:

تابع myFunc() ( console.log(arguments); ) myFunc.call(null, );

مقدمه ای بر کتابخانه ها و چارچوب ها

امروزه برجسته ترین نمایندگان چارچوب های جاوا اسکریپت AngularJS، React.js و Ember هستند. البته تعدادی دیگر هم هستند.

با بزرگتر و بزرگتر شدن برنامه های کاربردی وب، این کتابخانه ها کار با آنها را آسان تر می کنند. باید درک کرد که اکنون دانستن jQuery به تنهایی کافی نیست. در بیشتر مشاغل خالی، دانش کتابخانه های جاوا اسکریپت اضافی به عنوان یک نیاز اساسی به نمایش گذاشته می شود.

Node.js

شکی نیست که Node.js در موقعیت قدرتمندی قرار دارد. تقریباً هر ابزار front-end بر روی node.js ساخته شده است و از npm (مدیریت بسته گره) استفاده می کند، اگر با آن آشنا نیستید، اکیداً به شما توصیه می کنم که این حذف را اصلاح کنید. از آنجایی که node.js از جاوا اسکریپت استفاده می کند، یادگیری آن برای کسانی که از قبل با این زبان آشنا هستند چندان دشوار نیست. زمان بیشتری را صرف تنظیم بسته های گره خواهید کرد تا نوشتن کد واقعی.

شخصاً فکر می کنم که Node باید برای هر توسعه دهنده ای در سال 2015 آشنا باشد. من در مورد دانش عمیق صحبت نمی کنم، فقط کافی است که بتوانیم آن را برای توسعه سمت سرور، نمونه سازی، آزمایش و غیره اعمال کنیم.

فورکی از node.js به نام IO.js وجود دارد که امروزه تقریباً یکسان است و در پایان روز، فقط جاوا اسکریپت را با چند تفاوت جزئی می نویسید.

آزمایش کردن

یه زمانی اصلا کد جاوا اسکریپت رو تست نمیکردیم چون لازم نمیدیدیم. اما اسکریپت ها به لطف AngularJS و Node.js بزرگ و بزرگتر می شوند.

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

ابزار

توسعه‌دهنده جاوا اسکریپت در سال 2015 نه تنها به معنای دانش عالی زبان، بلکه به معنای وجود ابزارهای زیادی برای کار با آن است.

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

در اینجا مجموعه ای از ابزارها وجود دارد که باید به خاطر داشته باشید: Gulp، Webpack و BabelJS. ابزارهای بسیار بیشتری وجود دارد، اما ابزارهایی مانند Gulp و Grunt تا حد زیادی به شما در توسعه و مدیریت برنامه های جاوا اسکریپت کمک می کنند.

روزهایی که فقط یک فایل جاوا اسکریپت را دانلود کرده و به صفحه خود اضافه می کنید، گذشته است. ما اکنون از NPM یا Bower Package Managers استفاده می کنیم.

ما اسکریپت ها را ترکیب و کوچک می کنیم، آنها را آزمایش می کنیم، که به سازماندهی ساختار پروژه کمک می کند.

ابزارهای جاوا اسکریپت هنگام توسعه جاوا اسکریپت ایزومورفیک (کدی که در سمت کلاینت و سرور استفاده می شود) دست به دست هم می دهند. ECMAScript 6، با نام مستعار ES6، با نام مستعار ESNext

مرورگرها هنوز بسیاری از قابلیت های ECMAScript 6 را پیاده سازی نکرده اند. اما امروزه می توانید با کمک کامپایلرهای جاوا اسکریپت از نوآوری های ES6 استفاده کنید. با API ها و متدهای جدید آشنا شوید: رشته ها، آرایه ها و روش های دیگر مانند WeakMaps، نمادها و کلاس ها. همیشه باید از تغییرات آینده آگاه باشید.

نتیجه

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

اقتباس از جاوا اسکریپت کامل در شش هفته: راهنمای برنامه درسی

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

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

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

شایان ذکر است که باز بودن زبان - شرکت هایی که معمولاً با یکدیگر رقابت می کنند، برای توسعه جاوا اسکریپت همکاری می کنند. این زبان بسیار منعطف است و برای حامیان رویکردهای شی گرا و کاربردی مناسب است. تعداد زیادی از کتابخانه ها و چارچوب ها حل هر نوع کار را آسان می کند و پلت فرم سرور Node.js امکان استفاده از زبان را نه تنها در مرورگر، بلکه در کنسول نیز فراهم می کند. حتی می توانید برنامه های دسکتاپ و موبایل بنویسید، اولی با استفاده از فریم ورک Electron و دومی با استفاده از NativeScript یا React Native.

مبانی

ابتدا باید مفاهیم اولیه جاوا اسکریپت، توسعه وب و به طور کلی برنامه نویسی را یاد بگیرید:

• JS شی گرا - سازندگان و کارخانه ها، وراثت.
• عملکردی JS - توابع مرتبه بالاتر، بسته شدن، بازگشت.
• مشخصات تست یاس;
• اصول اولیه HTML، CSS و jQuery.

git

Git یک ابزار ضروری برای توسعه دهندگان است، بنابراین باید هر چه زودتر با آن شروع کنید. در اینجا مهارت های اساسی وجود دارد که باید داشته باشید:

• ایجاد و انتقال فایل ها در دایرکتوری ها؛
• مقداردهی اولیه و commit در Git.
• راه اندازی مخازن در GitHub.

الگوریتم ها و ساختارهای داده

سپس باید الگوریتم ها (به ویژه مفهوم پیچیدگی الگوریتم ها) و همچنین ساختارهای داده پایه را مطالعه کنید: لیست های پیوندی، صف ها، پشته ها، درخت های جستجوی باینری و جداول هش. این به شما کمک خواهد کرد.

Backend

Node.js

10 سال پیش، جاوا اسکریپت فقط برای توسعه front-end قابل استفاده بود. اکنون، به لطف Node.js، همه چیز به یک "جلو" محدود نمی شود. Node فقط یک محیط اجرای کد JS سمت سرور است، بنابراین شما نیازی به یادگیری نحو جدید ندارید، اما باید فایل‌ها را وارد و صادر کنید، کد را به ماژول‌ها تبدیل کنید و از مدیر بسته npm استفاده کنید.

سرورها، HTTP، Express.js

پس از یادگیری Node، ارزش دارد که آشنایی خود را با توسعه Back-end و درک سرورها و مسیریابی ادامه دهید. می‌توانید با پورت‌ها و پروتکل‌ها، با تمرکز بر HTTP، شروع کنید و سپس به Express، یک کتابخانه Node برای رسیدگی به درخواست‌ها بروید.

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

پایگاه های داده، طرحواره ها، مدل ها و ORM

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

Frontend

HTML و CSS

HTML و CSS ستون فقرات اساسی برای هر توسعه دهنده وب هستند. شما نیازی به شناخت کامل آنها ندارید، اما باید آنها را درک کنید. همچنین می توانید چند کتابخانه محبوب (مانند بوت استرپ) و یک پیش پردازنده CSS مانند Sass را یاد بگیرید تا CSS خود را شبیه کدهای معمولی کنید. برای ساده‌تر کردن کار با HTML، می‌توانید یکی از موتورهای قالب‌سازی محبوب مانند pug را انتخاب کنید.

دستکاری jQuery و DOM

هنگامی که ظاهر و ظاهر صفحه را با HTML و CSS ایجاد کردید، از کتابخانه jQuery نیز برای دستکاری DOM استفاده خواهید کرد. بسیاری از مردم فکر می کنند که jQuery بی فایده است و به زودی با Angular و React جایگزین خواهد شد، اما بسیار محبوب است و بنابراین ارزش دانستن دارد. علاوه بر این، یک روز در موقعیتی قرار خواهید گرفت که چکش زدن میخ ها با میکروسکوپ React برای شما ناخوشایند خواهد بود و سپس جی کوئری سبک وزن به کمک خواهد آمد.

ابزارهای توسعه دهنده کروم

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

AJAX

اگر می خواهید برنامه شما پس از هر عملیات پایگاه داده صفحات را بارگیری مجدد نکند، قطعاً به AJAX نیاز دارید - درخواست های HTTP ناهمزمان پس زمینه را ارسال می کند، پاسخ هایی که تنها بخشی از نمایشگر را به روز می کنند. می توانید با استفاده از روش .ajax از طریق jQuery با AJAX کار کنید.

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

زبان های برنامه نویسی فقط ابزاری هستند که شخص با آن قوانینی را در سیستم های ایجاد شده ایجاد می کند.

اینترنت انبوهی از فرصت ها را ارائه می دهد که ذهن های روشنفکر و مبتکر از آنها استفاده می کنند. البته توسعه وب نیز ابزارهای خاص خود را برای جان بخشیدن به ایده ها دارد. یکی از آنها زبان برنامه نویسی جاوا اسکریپت است که در این مقاله به آن پرداخته خواهد شد:

اطلاعات کلی

بسیاری از مردم، حتی آنهایی که هیچ ارتباطی با حوزه IT ندارند، کلمه جاوا را شنیده اند. یک زبان انقلابی مستقل از پلت فرم که به طور فعال برای برنامه های کاربردی برای سیستم های تلفن همراه نوشته شده است. این توسط شرکت امیدوار کننده Sun توسعه یافته است، که سپس تحت بال اوراکل قرار گرفت. اما هیچ یک از این دو شرکت کاری با جاوا اسکریپت ندارند:

Sun فقط برای استفاده از بخشی از نام به اجازه نیاز داشت. با کمال تعجب، جاوا اسکریپت اصلاً متعلق به هیچ شرکتی نیست.

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

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

اگر در مورد ماهیت استفاده از جاوا اسکریپت صحبت کنیم، این زبان به شما امکان می دهد صفحات ثابت سایت ها را با استفاده از کدهایی که می توانند برای اجرا اجرا شوند، "احیای" کنید ( به اصطلاح اسکریپت). یعنی می توانید با کارتون ها قیاسی ترسیم کنید که html و css کاراکترهای ترسیم شده هستند و جاوا اسکریپت چیزی است که آنها را به حرکت وا می دارد.

اگر در مورد نحو جاوا اسکریپت صحبت کنیم، ویژگی های زیر را دارد:

• ثبت نام مهم است. توابع با نام های func() و Func() کاملا متفاوت هستند.
• بعد از عبارات، باید نقطه ویرگول قرار دهید.
• اشیاء و عملیات داخلی؛
• فضاها در نظر گرفته نشده است. می توانید به تعداد دلخواه از تورفتگی و همچنین خطوط جدید برای استایل دادن به کد خود استفاده کنید.

ساده ترین کد جاوا اسکریپت به شکل زیر است:

دامنه کاربرد

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

• توسعه برنامه های کاربردی وب. آیا می خواهید یک پیشخوان ساده راه اندازی کنید، انتقال داده ها را بین فرم ها سازماندهی کنید یا یک بازی را در سایت خود قرار دهید؟ سپس جاوا اسکریپت به عنوان یک دستیار وفادار در این مورد عمل خواهد کرد.
• "مشارکت فعال" در AJAX. این فناوری با تبادل داده ها با سرور در حالت "پس زمینه" سرعت کار برنامه ها را به میزان قابل توجهی افزایش داد:

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

مزایا و معایب

شما نباید فکر کنید که جاوا اسکریپت نوعی دارو برای همه مشکلات است و هر برنامه نویسی با لبخندی بر لب از این زبان استفاده می کند. هر چیزی در دنیا جنبه های مثبت و منفی خود را دارد. ابتدا به کاستی ها نگاه می کنیم.

• نیاز به اطمینان از سازگاری بین مرورگرها. از آنجایی که جاوا اسکریپت به عنوان یک فناوری اینترنت عمل می کند، باید قوانینی را که وب جهانی تعیین می کند، تحمل کنید. کد باید در همه یا حداقل محبوب ترین مرورگرها به درستی اجرا شود.
• سیستم ارثی در زبان درک آنچه را که اتفاق می افتد دشوار می کند. جاوا اسکریپت وراثت مبتنی بر نمونه اولیه را پیاده سازی می کند. افرادی که سایر زبان های برنامه نویسی شی گرا را مطالعه کرده اند به زبان های آشنا عادت کرده اند. کلاس فرزند کلاس والد را به ارث می برد". اما در جاوا اسکریپت، این چیزها مستقیماً توسط اشیاء مدیریت می شوند و این در ذهن نمی گنجد.
• هیچ کتابخانه استانداردی وجود ندارد. جاوا اسکریپت هیچ گونه امکاناتی برای کار با فایل ها، جریان های ورودی/خروجی و سایر موارد مفید فراهم نمی کند.
• نحو به طور کلی درک آن را دشوار می کند. زیبایی کد واضح است که نقطه قوت جاوا اسکریپت نیست، اما قانون اصلی برنامه نویسان رعایت می شود: آثار؟ دست نزن!».

اکنون شایان ذکر است که برخی از مزایا

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

به این واقعیت توجه نکنید که منفی ها بیشتر از مثبت ها بود. جاوا اسکریپت کاملاً در جایگاه خود جا افتاده است و هیچ انتقادی در حال حاضر آن را از بین نخواهد برد.

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

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

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

• نام متغیرها باید معنای لغوی داشته باشد. در روند نوشتن برنامه‌های ساده، این اصلاً مهم به نظر نمی‌رسد، اما وقتی تعداد خطوط کد از هزار می‌گذرد، همه شیاطین پاهای خود را می‌شکنند.