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

52

جاوااسکریپت

الگوی Observer و Pub/Sub در جاوااسکریپت؛ قلب رویدادمحوری زبان

الگوی Observer قلب رویدادمحوری جاوااسکریپت است و addEventListener و فریم‌ورک‌های مدرن بر آن تکیه دارند. در این آموزش یک EventEmitter دستی با subscribe و unsubscribe می‌سازیم و تفاوتش با Pub/Sub را یاد می‌گیریم.

مطالعه مقاله

52

51

جاوااسکریپت

الگوهای طراحی در جاوااسکریپت؛ Singleton و Factory با مثال واقعی

الگوهای طراحی راه‌حل‌های آزموده برای مسائل تکراری هستند. در این آموزش با الگوی Singleton برای منابع تک‌نسخه‌ای و الگوی Factory برای ساخت مرکزی انواع مختلف اشیا با مثال‌های واقعی آشنا می‌شوید.

مطالعه مقاله

51

50

جاوااسکریپت

مدیریت State در پروژه‌های جاوااسکریپت خالص؛ معماری داده‌محور

مدیریت State یعنی متمرکز کردن حافظه برنامه در یک منبع واحد. در این آموزش با ساخت Store دستی با الگوی Publish/Subscribe، اتصال خودکار رابط به داده و معماری Action و Reducer آشنا می‌شوید.

مطالعه مقاله

50

49

جاوااسکریپت

آموزش WebSocket در جاوااسکریپت؛ ارتباط بلادرنگ دوطرفه با سرور

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

مطالعه مقاله

49

48

جاوااسکریپت

Service Worker و PWA چیست؟ ساخت وب‌اپلیکیشن‌های آفلاین‌دوست

Service Worker اسکریپتی پس‌زمینه است که درخواست‌های شبکه را رهگیری می‌کند و امکان کار آفلاین را می‌دهد. در این آموزش با ثبت و چرخه عمر آن، استراتژی Cache First، صفحه آفلاین سفارشی و مانیفست PWA آشنا می‌شوید.

مطالعه مقاله

48

47

جاوااسکریپت

آموزش احراز هویت با JWT در سمت فرانت‌اند؛ از ورود تا دسترسی

JWT توکن امضاشده‌ای است که هویت کاربر را حمل می‌کند. در این آموزس چرخه کامل آن در فرانت‌اند را می‌بینیم: ورود و دریافت توکن، الحاق به هدر Authorization، بررسی انقضا، خروج امن و انتخاب محل ذخیره‌سازی.

مطالعه مقاله

47

46

جاوااسکریپت

CORS چیست؟ آشنایی با خطای معروف و راه‌های حل آن در جاوااسکریپت

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

مطالعه مقاله

46

45

جاوااسکریپت

پروژه عملی: ساخت اپلیکیشن هواشناسی با جاوااسکریپت و API واقعی

ساخت اپلیکیشن هواشناسی بهترین تمرین برای کار با API است. در این پروژه عملی با fetch به سرویس آب‌وهوا متصل می‌شویم، داده را به رابط کاربری تبدیل می‌کنیم، سه حالت لودینگ و موفقیت و خطا را مدیریت کرده و آخرین شهر را ذخیره می‌کنیم.

مطالعه مقاله

45

44

جاوااسکریپت

آموزش Axios در جاوااسکریپت؛ کار با APIها به سبک حرفه‌ای‌ها

Axios کتابخانه محبوب ارتباط با API است که ضعف‌های fetch را پر می‌کند. در این آموزش با درخواست‌های GET و POST، پارامترها، ساخت instance مرکزی، اینترسپتورهای توکن و لغو درخواست آشنا می‌شوید.

مطالعه مقاله

44

43

جاوااسکریپت

آموزش AJAX با XMLHttpRequest؛ جد اصلی ارتباط با سرور در جاوااسکریپت

XMLHttpRequest راه کلاسیک ارتباط با سرور بدون رفرش صفحه است. در این آموزش با ساخت درخواست GET و POST، رویدادهای onload و onerror، پیگیری پیشرفت آپلود و تفاوت آن با fetch آشنا می‌شوید.

مطالعه مقاله

43

42

جاوااسکریپت

کار با Intl در جاوااسکریپت؛ نمایش تاریخ شمسی و فرمت اعداد فارسی

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

مطالعه مقاله

42

41

جاوااسکریپت

رویدادهای اسکرول و ساخت افکت Parallax در جاوااسکریپت؛ عمق دادن به صفحه

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

مطالعه مقاله

41

40

جاوااسکریپت

ساخت حالت تاریک (Dark Mode) با جاوااسکریپت و LocalStorage؛ کامل و حرفه‌ای

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

مطالعه مقاله

40

39

جاوااسکریپت

پروژه عملی: ساخت اسلایدر تصاویر حرفه‌ای با جاوااسکریپت

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

مطالعه مقاله

39

38

جاوااسکریپت

آموزش مقدماتی Canvas در جاوااسکریپت؛ طراحی و نقاشی با کد

Canvas یک بوم نقاشی دیجیتال در صفحه وب است. در این آموزش مقدماتی با کشیدن مستطیل و مسیرها، دایره با arc، نوشتن متن روی بوم و زنده کردن آن با requestAnimationFrame آشنا می‌شوید.

مطالعه مقاله

38

37

جاوااسکریپت

آموزش Notification API در جاوااسکریپت؛ ارسال اعلان به کاربران

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

مطالعه مقاله

37

36

جاوااسکریپت

آموزش Geolocation API در جاوااسکریپت؛ پیدا کردن موقعیت کاربر

Geolocation API امکان دسترسی به موقعیت جغرافیایی کاربر را می‌دهد. در این آموزش با متد getCurrentPosition، خواندن مختصات، مدیریت خطاها، ردیابی پیوسته با watchPosition و ملاحظات حریم خصوصی آشنا می‌شوید.

مطالعه مقاله

36

35

جاوااسکریپت

آموزش Intersection Observer؛ لود تنبل تصاویر و اسکرول بی‌نهایت حرفه‌ای

Intersection Observer به شما خبر می‌دهد چه زمانی عنصری وارد دید کاربر می‌شود. در این آموزش با تنظیمات threshold و rootMargin و سه کاربرد کلاسیک آن یعنی لود تنبل تصاویر، اسکرول بی‌نهایت و انیمیشن هنگام ورود آشنا می‌شوید.

مطالعه مقاله

35

34

جاوااسکریپت

آموزش Drag and Drop API در جاوااسکریپت؛ ساخت لیست‌های قابل جابه‌جایی

Drag and Drop API مرورگر امکان کشیدن و رها کردن عناصر را بدون هیچ کتابخانه‌ای فراهم می‌کند. در این آموزش با رویدادهای dragstart و dragover و drop، تله preventDefault و ساخت لیست مرتب‌شونده واقعی آشنا می‌شوید.

مطالعه مقاله

34

33

جاوااسکریپت

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

requestAnimationFrame ابزار استاندارد ساخت انیمیشن‌های روان در مرورگر است. در این آموزش با حلقه انیمیشن، حرکت زمان‌محور، ساخت شمارنده انیمیشنی، توقف انیمیشن و نکات بهینه‌سازی با transform آشنا می‌شوید.

مطالعه مقاله

33

32

جاوااسکریپت

Event Loop و Call Stack در جاوااسکریپت؛ مغز موتور اجرای آسنکرون

Event Loop مکانیزمی است که جاوااسکریپت تک‌ریسمانی را قادر به مدیریت کارهای آسنکرون می‌کند. در این آموزش با Call Stack، Web APIها، صف میکرو و ماکروتسک و ترتیب اجرای کدها آشنا می‌شوید.

مطالعه مقاله

32

31

جاوااسکریپت

آموزش Debounce و Throttle در جاوااسکریپت؛ مهار رویدادهای شلیک‌پی‌درپی

Debounce و Throttle دو تکنیک کلاسیک برای مهار رویدادهای پرتکرار هستند. در این آموزش با پیاده‌سازی هر دو، تفاوت انتخاب بین آن‌ها برای جستجو و اسکرول، و نکات عملکردی در پروژه‌های واقعی آشنا می‌شوید.

مطالعه مقاله

31

30

جاوااسکریپت

تکنیک Memoization در جاوااسکریپت؛ حافظه‌ای برای توابع پرهزینه

Memoization تکنیکی برای ذخیره نتایج محاسبات قبلی و پاسخ فوری به ورودی‌های تکراری است. در این آموزش با پیاده‌سازی دستی آن، ساخت memoize جنریک، کش پاسخ API و محدودیت‌هایش آشنا می‌شوید.

مطالعه مقاله

30

29

جاوااسکریپت

برنامه‌نویسی تابعی (Functional Programming) در جاوااسکریپت؛ سبک فکر کردن

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

مطالعه مقاله

29

28

جاوااسکریپت

BigInt و چالش دقت اعداد بزرگ در جاوااسکریپت؛ وقتی Number کوتاه می‌آید

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

مطالعه مقاله

28

27

جاوااسکریپت

آشنایی با Symbol در جاوااسکریپت؛ نوع داده پنهان و یکتا

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

مطالعه مقاله

27

26

جاوااسکریپت

آموزش Proxy و Reflect در جاوااسکریپت؛ رهگیری هوشمندانه عملیات

Proxy مأموری است که عملیات پایه‌ای روی آبجکت‌ها را رهگیری می‌کند. در این آموزش با تله‌های get و set، اعتبارسنجی هنگام نوشتن، مقادیر پیش‌فرض، نقش Reflect و ساخت واکنش‌گرایی ساده آشنا می‌شوید.

مطالعه مقاله

26

25

جاوااسکریپت

WeakMap و WeakSet در جاوااسکریپت؛ ذخیره‌سازی دوستدار حافظه

WeakMap و WeakSet نسخه‌های ضعیف Map و Set هستند که مانع آزادسازی حافظه نمی‌شوند. در این آموزش با تفاوت ارجاع قوی و ضعیف، نگه‌داشتن متادیتای خصوصی و علامت‌گذاری آبجکت‌ها آشنا می‌شوید.

مطالعه مقاله

25

24

جاوااسکریپت

ساختار داده Map و Set در جاوااسکریپت؛ فراتر از آبجکت و آرایه

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

مطالعه مقاله

24

23

جاوااسکریپت

آموزش Generator Functionها در جاوااسکریپت؛ توابعی با قابلیت مکث

Generatorها توابعی هستند که می‌توانند وسط اجرا مکث کنند و بعد از همان نقطه ادامه دهند. در این آموزش با سینتکس function*، دستور yield و next، ساخت شناسه‌ساز، دنباله فیبوناچی و ارسال مقدار به داخل آشنا می‌شوید.

مطالعه مقاله

23

22

جاوااسکریپت

توابع مرتبه بالا (Higher-Order Functions) در جاوااسکریپت؛ قدرت واقعی زبان

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

مطالعه مقاله

22

21

جاوااسکریپت

مفهوم Closure در جاوااسکریپت به زبان ساده؛ حافظه مخفی توابع

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

مطالعه مقاله

21

20

جاوااسکریپت

پروژه رابط کاربری: ساخت Modal و منوی موبایل با جاوااسکریپت

مودال و منوی همبرگری دو جزء ثابت سایت‌های مدرن هستند. در این پروژه با الگوی مدیریت وضعیت با classList، بستن مودال با کلیک بیرون و کلید Escape، قفل اسکرول و رعایت دسترسی‌پذیری هر دو را کامل می‌سازیم.

مطالعه مقاله

20

19

جاوااسکریپت

کار با URL و Query String در جاوااسکریپت؛ آموزش خواندن و ساخت پارامترها

Query String راه حمل وضعیت صفحه در آدرس است. در این آموزش با کلاس URL، خواندن و ساخت پارامترها با URLSearchParams، پارامترهای تکراری و الگوی حفظ فیلترها در آدرس با pushState آشنا می‌شوید.

مطالعه مقاله

19

18

جاوااسکریپت

آموزش setTimeout و setInterval؛ ساخت تایمر، ساعت و شمارش معکوس

دو تابع setTimeout و setInterval ابزار زمان‌بندی در جاوااسکریپت هستند. در این آموزش با اجرای تأخیری، تکرار منظم، لغو تایمرها، ساخت ساعت دیجیتال و پروژه شمارش معکوس فروش ویژه آشنا می‌شوید.

مطالعه مقاله

18

17

جاوااسکریپت

آموزش رویدادهای ماوس و صفحه‌کلید در جاوااسکریپت؛ تعامل کامل با کاربر

رویدادهای ماوس و صفحه‌کلید ستون تعامل کاربر با صفحه هستند. در این آموزش با رویدادهای click و mousemove و keydown، آبجکت event، میانبرهای صفحه‌کلید و تکنیک Event Delegation آشنا می‌شوید.

مطالعه مقاله

17

16

جاوااسکریپت

آشنایی با BOM در جاوااسکریپت؛ کار با window، location و history

BOM مدل آبجکتی خود مرورگر است و امکاناتی فراتر از سند HTML می‌دهد. در این آموزش با آبجکت window و ابعاد پنجره، location و هدایت صفحه، history، navigator و اسکرول نرم آشنا می‌شوید.

مطالعه مقاله

16

15

جاوااسکریپت

آموزش اعتبارسنجی فرم‌ها در جاوااسکریپت؛ Form Validation حرفه‌ای

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

مطالعه مقاله

15

14

جاوااسکریپت

پروژه عملی: ساخت لیست کارها (To-Do List) با جاوااسکریپت خالص

ساخت لیست کارها بهترین پروژه برای تمرین مفاهیم پایه جاوااسکریپت است. در این آموزش قدم‌به‌قدم یک To-Do List کامل می‌سازیم که کار اضافه و حذف می‌کند، وضعیت را تغییر می‌دهد و داده‌ها را در LocalStorage نگه می‌دارد.

مطالعه مقاله

14

13

جاوااسکریپت

آموزش LocalStorage و SessionStorage در جاوااسکریپت؛ ذخیره داده در مرورگر

LocalStorage و SessionStorage به شما امکان ذخیره داده در مرورگر کاربر را می‌دهند. در این آموزش با تفاوت این دو، متدهای ذخیره و خواندن، ذخیره آبجکت با JSON و مثال عملی ذخیره حالت تاریک آشنا می‌شوید.

مطالعه مقاله

13

12

جاوااسکریپت

آموزش عبارات منظم (Regex) در جاوااسکریپت از صفر؛ بررسی الگوهای متنی

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

مطالعه مقاله

12

11

جاوااسکریپت

آموزش کار با تاریخ و زمان در جاوااسکریپت؛ راهنمای کامل Date Object

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

مطالعه مقاله

11

10

جاوااسکریپت

آموزش کار با Fetch API و JSON در جاوااسکریپت

Fetch API روش استاندارد ارتباط با سرور در جاوااسکریپت است. در این آموزش کار با JSON، ارسال درخواست‌های GET و POST، بررسی وضعیت پاسخ سرور و نمایش داده‌های دریافتی در صفحه را قدم‌به‌قدم یاد می‌گیرید.

مطالعه مقاله

10

09

جاوااسکریپت

آموزش کلاس‌ها و برنامه‌نویسی شی‌گرا (OOP) در جاوااسکریپت

برنامه‌نویسی شی‌گرا به سازماندهی و استفاده مجدد از کدها کمک می‌کند. در این مقاله تعریف کلاس، سازنده، متدها، Getter و Setter، وراثت با extends و متدهای استاتیک در جاوااسکریپت با مثال‌های کاربردی آموزش داده می‌شود.

مطالعه مقاله

09

08

جاوااسکریپت

آموزش مدیریت خطا در جاوااسکریپت با try...catch و throw

مدیریت صحیح خطاها از توقف ناگهانی برنامه جلوگیری می‌کند. در این آموزش ساختار try...catch، بلوک finally، ساخت خطای سفارشی با throw و مدیریت خطا در کدهای ناهمزمان را با مثال‌های عملی یاد می‌گیرید.

مطالعه مقاله

08

07

جاوااسکریپت

برنامه‌نویسی ناهمزمان در جاوااسکریپت با Promise و Async/Await

برنامه‌نویسی ناهمزمان برای انجام عملیات زمان‌بر بدون قفل شدن برنامه استفاده می‌شود. در این مقاله با مفهوم Promise، سینتکس async/await، مدیریت خطا و اجرای هم‌زمان چند عملیات با Promise.all آشنا می‌شوید.

مطالعه مقاله

07

06

جاوااسکریپت

آموزش کار با DOM در جاوااسکریپت؛ زنده کردن صفحات وب

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

مطالعه مقاله

06

05

جاوااسکریپت

آموزش جامع آبجکت‌ها در جاوااسکریپت؛ ساختاردهی حرفه‌ای به داده‌ها

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

مطالعه مقاله

05

04

جاوااسکریپت

آموزش کار با آرایه‌ها در جاوااسکریپت و متدهای پرکاربرد آن

آرایه‌ها پرکاربردترین ساختار داده در جاوااسکریپت هستند. در این مقاله با ساخت آرایه، افزودن و حذف اعضا و متدهای مهمی مانند map، filter، reduce و find همراه با مثال‌های عملی آشنا می‌شوید.

مطالعه مقاله

04

03

جاوااسکریپت

آموزش کامل توابع در جاوااسکریپت؛ از تعریف تا Arrow Function و Callback

توابع مهم‌ترین بلوک‌های سازنده برنامه‌های جاوااسکریپتی هستند. در این مقاله روش‌های تعریف تابع، پارامترهای پیش‌فرض، Arrow Function و مفهوم Callback را با مثال‌های کاربردی و قدم‌به‌قدم یاد می‌گیرید.

مطالعه مقاله

03

02

جاوااسکریپت

متغیرها و انواع داده در جاوااسکریپت؛ آموزش کامل let، const و var

متغیرها پایه و اساس هر برنامه جاوااسکریپتی هستند. در این مقاله روش تعریف متغیر با let، const و var، انواع داده اولیه، عملگر typeof و تبدیل انواع داده به‌صورت کامل و همراه با مثال آموزش داده می‌شود.

مطالعه مقاله

02

01

جاوااسکریپت

آموزش جاوااسکریپت از صفر؛ هر آنچه برای شروع برنامه‌نویسی وب نیاز دارید

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

مطالعه مقاله

01