خانه / بایگانی برچسب: جاوا اسکریپت

بایگانی برچسب: جاوا اسکریپت

۷ قابلیت ویژوال استودیو کد برای توسعه دهندگان وب — راهنمای کاربردی

شما می‌توانید گردش کار توسعه وب خود را با استفاده از این 7 قابلیت ویژوال استودیو کد و افزونه‌های آن بهبود ببخشید. چه یک توسعه‌دهنده حرفه‌ای وب و چه یک فرد مبتدی باشید، در هر صورت مزیت‌های یک گردش کار سریع‌تر بدون شک به کار شما می‌آید. در این مقاله به بررسی روش تنظیم یک گردش کار بهینه برای استفاده از ویژوال استودیو کد می‌پردازیم. ویژوال استودیو کد قابلیت‌های داخلی زیادی دارد؛ اما اگر افزونه‌های زیاد (و همچنان در حال رشد) آن را نیز در نظر بگیریم، درنهایت هزاران روش برای سفارشی‌سازی تجربه کاری خود در آن خواهید یافت. با این که این یکی از نقاط قوت اصلی VS Code محسوب می‌شود؛ اما از سوی دیگر می‌تواند موجب سردرگمی به خصوص برای کاربران تازه‌کار نیز بشود. در این مقاله قصد داریم این مسائل را روشن بکنیم. همچنین بهترین تکنیک‌هایی که برای افزایش سرعت و کارایی امور روزمره تا حد امکان مفید هستند معرفی شده‌اند. این مقاله برای دو دسته از افراد به طور خاص مفید است: افراد مبتدی که به تازگی شروع به کار با VS Code کرده‌اند و می‌خواهند مطمئن شوند که از همان ابزارهایی استفاده می‌کنند که افراد حرفه‌ای بهره..

توضیحات بیشتر »

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

پروتوتایپ‌ها سازوکارهایی هستند که اشیای جاوا اسکریپت به وسیله آن‌ها برخی ویژگی‌ها را از همدیگر به ارث می‌برند. در این مقاله، به توضیح طرز کار زنجیره پروتوتایپ‌ها می‌پردازیم و شیوه استفاده از مشخصه پروتوتایپ شی برای افزودن متدها به سازنده‌های موجود را مورد بررسی قرار می‌دهیم. پیش‌نیازها درک تابع‌های جاوا اسکریپت آشنایی با مبانی جاوا اسکریپت که مطالعه مقاله زیر توصیه می‌شود: «جاوا اسکریپت چیست؟ — به زبان ساده» آشنایی با شیئ‌گرایی در جاوا اسکریپت که مطالعه مقاله زیر پیشنهاد می‌شود: «شیئ‌گرایی در جاوا اسکریپت — به زبان ساده» هدف از مطالعه این مقاله درک پروتوتایپ‌های اشیای جاوا اسکریپت، طرز کار زنجیره‌های پروتوتایپ و شیوه افزودن متدهای جدید به مشخصه پروتوتایپ است. آیا جاوا اسکریپت زبانی مبتنی بر پروتوتایپ است؟ جاوا اسکریپت غالباً به عنوان یک زبان مبتنی بر پروتوتایپ خوانده می‌شود که در آن برای ایجاد وراثت، شیئ‌ها دارای یک شیئ‌ پروتوتایپ هستند که به عنوان شیئ‌ قالبی عمل می‌کند و متدها و مشخصات از آن به ارث می‌رسند. یک شیئ‌ پروتوتایپِ شیئ‌ نیز می‌تواند یک شیئ‌ پروتوتایپ داشته باشد که متدها و..

توضیحات بیشتر »

دیباگ کدهای جاوا اسکریپت با استفاده از Chrome DevTools — به زبان ساده

به عنوان یک توسعه‌دهنده تازه‌کار یافتن و اصلاح باگ‌ها ممکن است کار دشواری به نظر بیاید. ممکن است وسوسه شوید که به صورت تصادفی از ()console.log برای اصلاح وضعیت اجرای کد استفاده کنید؛ اما نباید دیگر چنین کاری انجام دهید. در این مقاله در خصوص روش صحیح دیباگ کردن صحبت خواهیم کرد. بدین ترتیب با روش صحیح استفاده از ابزارهای توسعه‌دهنده کروم یا Chrome DevTools برای راه‌اندازی نقاط توقف و تنظیم آن در سراسر کد آشنا می‌شوید. گردش کاری این وضعیت عموماً روشی بسیار کارآمدتر برای یافتن و اصلاح باگ‌ها در کد به حساب می‌آید. گام یکم: بازتولید باگ بازتولید کردن باگ همواره نخستین گام برای دیباگ کردن است. منظور از بازتولید باگ یافتن یک سری از اقداماتی است که به صورت مداوم منجر به بروز باگ می‌شوند. شما باید دفعات زیادی باگ را بازتولید کنید تا بتوانید هرگونه مراحل غیرضروری را حذف کنید. با پیگیری دستورالعمل‌های زیر می‌توانید اقدام به بازتولید باگی بکنید که قرار است در این راهنما رفع بکنیم. صفحه وبی که قرار است در این راهنما دیباگ بکنیم در این آدرس (+) قرار دارد. این صفحه را در یک برگه جدید مرورگر باز کنی..

توضیحات بیشتر »

ده زبان برنامه نویسی که باید در سال ۱۳۹۸ یاد بگیرید

یکی از بهترین مهارت‌ها در جهان کنونی، برای داشتن جایگاه شغلی و درآمد خوب، «برنامه نویسی کامپیوتری» (Computer Programming) است. امروزه، از کامپیوترها تقریبا در همه صنایع استفاده می‌شود. این ماشین‌ها، دارای طیف وسیعی از کاربردها از «خلبان خودکار» (Autopilot) در هواپیما گرفته تا «سرعت‌سنج» (Speedometer) در دوچرخه هستند و در واقع باید گفت کامپیوترها به اشکال گوناگونی ما را احاطه کرده‌اند. در دهه‌های اخیر، کامپیوترها نقش اساسی در توسعه بخشیدن به کسب‌و‌کارها داشته‌اند و دارند. روزگاری که انسان‌ها از کاغذ و خودکار برای ثبت اطلاعات استفاده می‌کردند دیگر گذشته و امروزه این کارها با بهره‌گیری از کامپیوترها انجام می‌شود. آنچه بیان شد موجب شده تا اهمیت زبان‌های برنامه‌نویسی روز به روز افزایش بیابد و شرکت‌های گوناگون (صنایع مختلف) برای پیش‌برد اهداف خود نسبت به استخدام افراد مسلط به برنامه‌نویسی اقدام کنند. از سوی دیگر، جامعه برنامه‌نویسان و توسعه‌دهندگان، با نرخی سریع‌تر از گذشته در حال رشد است و همواره زبان‌های برنامه‌نویسی متنوع و متعدد جدیدی ظهور می‌کنند که برای نوع خاصی از توسعه‌دهندگان کاربر..

توضیحات بیشتر »

ساخت گالری تصاویر در جاوا اسکریپت — راهنمای کاربردی

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

Image gallery example

معرفی ویژگی های ES10 – راهنمای کاربردی

ES10 در حال حاضر صرفاً یک نسخه پیش‌نویس محسوب می‌شود. اما اغلب ویژگی‌ها به جز Object.fromEntries هم اینک در کروم پیاده‌سازی شده‌اند، بنابراین چرا نباید آن را از قبل مورد بررسی قرار دهیم؟ بدین ترتیب زمانی که مرورگرها شروع به پشتیبانی از آن بکنند، شما از قبل اطلاعات لازم را خواهید داشت. این راهنما برای افرادی که به بررسی ویژگی های ES10 نیاز دارند ضروری خواهد بود. BigInt  – اعداد صحیح با دقت دلخواه BigInt هفتمین نوع primitive است. BigInt یک عدد صحیح با دقت دلخواه است. این بدان معنی ‌است که متغیرها می‌توانند اینک $$2^{53}$$ عدد را نمایش دهند و محدود به عدد 9007199254740992 نیستند. const b = 1n; // append n to create a BigInt در گذشته مقادیر صحیح بالاتر از 9007199254740992 پشتیبانی نمی‌شدند و در صورت تجاوز از این عدد مقدار مورد نظر به صورت MAX_SAFE_INTEGER + 1 قفل می‌شد. const limit = Number.MAX_SAFE_INTEGER; ⇨ 9007199254740991 limit + 1; ⇨ 9007199254740992 limit + 2; ⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceeded const larger = 9007199254740991n; ⇨ 9007199254740991n const integer..

توضیحات بیشتر »

رایج ترین روش های ایجاد درخواست HTTP در جاوا اسکریپت — راهنمای مقدماتی

جاوا اسکریپت ماژول‌ها و متدهای جالبی برای ایجاد درخواست‌های HTTP دارد که می‌توانند برای ارسال یا دریافت داده‌ها از منابع سمت سرور مورد استفاده قرار گیرند. در این مقاله، قصد داریم به برخی روش‌های محبوب ایجاد درخواست HTTP در جاوا اسکریپت بپردازیم. ای‌جکس (Ajax) ای‌جکس یک روش سنتی برای ایجاد درخواست ناهمگام HTTP است. داده‌ها می‌توانند با استفاده از متد POST در HTTP ارسال شوند و از طریق متد GET در HTTP دریافت شوند. در ادامه نگاهی به ظاهر و شیوه ‌ایجاد یک درخواست GET خواهیم داشت. به این منظور از JSONPlaceholder استفاده می‌کنیم که یک REST API رایگان آنلاین برای توسعه‌دهندگان است که داده‌های تصادفی را در قالب JSON بازگشت می‌دهد. برای ایجاد یک فراخوانی HTTP در ای‌جکس باید ابتدا یک متد ()XMLHttpRequest جدید را مقداردهی کنید، نقطه انتهایی URL را تعیین کرده و متد HTTP که در این مورد GET است را ارائه کنید. در نهایت از متد ()open برای پیوند زدن متد HTTP و نقطه انتهایی URL به هم استفاده می‌کنیم و متد ()send را برای ارسال درخواست مورد بهره‌برداری قرار می‌دهیم. پاسخ HTTP را با استفاده از مشخصه XMLH..

توضیحات بیشتر »

راهنمای جامع React (بخش چهارم) — از صفر تا صد

در بخش قبلی این نوشته به توضیح پاره‌ای از مفاهیم عمیق React پرداختیم. در این نوشته تلاش خواهیم کرد به توضیح ادامه مفاهیم عمیق از جمله مواردی که در فهرست زیر ارائه شده‌اند بپردازیم. فرم‌ها در ری‌اکت ارجاع به یک عنصر DOM رندرینگ سمت سرور API زمینه (Context API) کامپوننت‌های درجه بالا (Higher order components) رندر Props قلاب‌ها (Hooks) افراز کد (Code splitting) فرم‌ها در ری‌اکت فرم‌ها یکی از معدود عناصر HTML هستند که به صورت پیش‌فرض تعامل‌پذیر هستند. فرم‌ها به این منظور طراحی شده‌اند که به کاربر امکان تعامل با صفحه را بدهند. در ادامه موارد استفاده رایج از فرم‌ها را ارائه کرده‌ایم: جستجو فرم تماس فرم سبد خرید فرم ورود و ثبت‌نام و موارد دیگر ما با استفاده از ری‌اکت می‌توانیم فرم‌های خود را تعامل‌پذیرتر کنیم و از جنبه‌های استاتیک آن‌ها بکاهیم. دو روش عمده برای مدیریت فرم‌ها در ری‌اکت وجود دارد که دارای تفاوت‌های بنیادی در زمینه شیوه مدیریت داده‌ها هستند. اگر داده‌ها از سوی DOM مدیریت شوند، ما آن‌ها را کامپوننت‌های «کنترل نشده» می‌نامیم. اگر داده‌های از سوی کامپوننت‌ها مدیریت شوند، آن‌ها ..

توضیحات بیشتر »

وب اسمبلی (WebAssembly) — به زبان ساده

در این مقاله به بررسی وب اسمبلی خواهیم پرداخت. مفهوم آن را معرفی می‌کنیم و می‌گوییم که قرار است چه مشکلاتی را حل کند. وب‌اسمبلی که به اختصار WASM نامیده می‌شود، یک قالب دستورهای باینری است که برای ماشین مجازی مبتنی بر پشته استفاده می‌شود. وب‌اسمبلی به عنوان یک هدف پرتابل برای کامپایل زبان‌های سطح بالایی مانند C/C++/Rust طراحی شده است و به این ترتیب امکان توسعه اپلیکیشن‌های کلاینت و سرور را روی وب ممکن می‌کند. ما در این راهنما برای این که درک بهتری از این فناوری داشته باشیم، یک الگوریتم نوشتیم که امکان مقایسه عملکرد WASM را در برابر جاوا اسکریپت محض (Vanilla JS) فراهم می‌سازد. بازی زندگی (Life Game) برای اثبات مفاهیم ارائه شده از بازی زندگی طراحی شده از سوی Conway به عنوان مسئله استفاده کرده‌ایم. این بازی بدون بازیکن است و قواعد ساده‌ای دارد: دنیا از یک ماتریس تشکیل یافته است که در آن هر سلول دو حالت زنده یا مرده دارد. تنها ورودی بیرونی، حالت اولیه است. تعامل سلول جاری با سلول همجوار افقی، عمودی و قطری حالت کنونی سلول را تعیین می‌کند. یک سلول زنده که کمتر از دو همسایه آن زنده باشند، ..

توضیحات بیشتر »

Webpack برای ساخت اپلیکیشن های مدرن — به زبان ساده

اغلب افرادی که از فریمورک‌های فرانت‌اند مختلف مانند ReactJS, Vue, Angular و غیره استفاده می‌کنند، با Webpack آشنا هستند و به طور متناوب از آن استفاده می‌کنند. اما باید بدانید که Webpack صرفاً برای استفاده به همراه فریمورک‌ها نیست. شما می‌توانید از Webpack بر روی جاوا اسکریپت محض نیز استفاده کنید. ما در این نوشته به توضیح در مورد Webpack و کارهایی که در پیکربندی‌های مختلف می‌توان انجام داد پرداخته‌ایم. Webpack چیست؟ Webpack ابزاری است که ماژول‌های مختلف جاوا اسکریپت را انتخاب کرده و آن‌ها را در یک ماژول جاوا اسکریپت منفرد ادغام می‌کند به طوری که بتوان آن را به مرورگر کاربران ارسال کرد. البته شاید این تعریف، کاری که Webpack انجام می‌دهد را بیش از حد ساده‌سازی کرده باشد؛ اما برای افرادی که با ماهیت آن آشنا نیستند، مناسب خواهد بود. برای توصیف بیشتر باید گفت که Webpack یک «نرم‌افزار بسته‌بندی» (bundler) است که به دنبال ماژول‌های دارای وابستگی، (یعنی فایل‌های جاوا اسکریپت که به کدهایی در فایل‌های دیگر نیاز دارند) می‌گردد، آن‌ها را در هم ادغام می‌کند و سپس یک فایل جاوا اسکریپت می‌سازد که ..

توضیحات بیشتر »