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

بازگشت به صفحه قبل در مرورگر
‏History API به شما امکان می‌دهد تاریخچه مرورگر را در یک جلسه مرور (session) مدیریت کنید. با استفاده از History API، می‌توانید در تاریخچه مرورگر به جلو و عقب بروید و محتوای آن را کنترل کنید.

بازگشت به صفحه قبل:
برای بازگشت به صفحه قبل در تاریخچه مرورگر، می‌توانید از دو روش زیر استفاده کنید:

history.back();
history.go(-1);

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

history.forward();
history.go(1);

ملاحظات:

روش‌های history.back(), history.forward(), و history.go() غیرهمزمان هستند. به این معنی که کد شما بلافاصله پس از اجرای این روش‌ها ادامه می‌یابد، بدون اینکه منتظر بماند تا صفحه جدید بارگیری شود.
اگر در ابتدای تاریخچه مرورگر خود هستید، استفاده از history.back() هیچ کاری انجام نمی‌دهد.
اگر در انتهای تاریخچه مرورگر خود هستید، استفاده از history.forward() هیچ کاری انجام نمی‌دهد.
#️⃣#tip
🆔@IR_javascript

👍2👏2

247 views_, 08:30

شبه کلاس CSS :hover و کاربرد آن در دستگاه‌های لمسی
شبه کلاس CSS :hover برای اعمال استایل‌های خاص به عناصر زمانی که کاربر ماوس را روی آنها حرکت می‌دهد، استفاده می‌شود. این شبه کلاس در دستگاه‌های دارای "ماوس" به خوبی کار می‌کند، اما در صفحه‌های لمسی می‌تواند هنگام اسکرول کردن صفحه، اثرات ناخواسته‌ای ایجاد کند.

برای حل این مشکل، می‌توان از media query برای محدود کردن عملکرد :hover به دستگاه‌های دارای "ماوس" استفاده کرد.

نحوه محدود کردن :hover به دستگاه‌های دارای "ماوس":

@media (hover: hover) {
  .card:hover {
    /* Add hover styles.. */
  }
}

در کد بالا، media query فقط در صورتی اعمال می‌شود که دستگاه از "ماوس" یا ترکبال پشتیبانی کند. در این حالت، استایل‌های hover فقط برای .card زمانی که ماوس روی آن حرکت می‌کند، اعمال می‌شوند.

نکته:

‏media query (hover: hover) فقط در مرورگرهای مدرن پشتیبانی می‌شود. برای پشتیبانی از مرورگرهای قدیمی، می‌توانید از media query‌های جایگزین مانند (pointer: none) استفاده کنید.

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

#️⃣#tip #css
🆔@IR_javascript

👍1

271 views_, 16:40

‏WebSocket امکان ایجاد یک اتصال برای تبادل داده‌ها بصورت rael time بدون نیاز به درخواست‌ها و پاسخ‌های مداوم فراهم میکند.
در متد send() می‌تواند هم داده‌های متنی (string) و هم داده‌های دودویی (مانند Blob، ArrayBuffer) را ارسال کند. بنابراین، اگر نیاز به ارسال یک object دارید، JSON.stringify() را فراموش نکنید.
هنگام دریافت داده، متن همیشه به صورت رشته‌ای دریافت می‌شود، اما برای داده‌های دودویی، می‌توانیم یکی از موارد زیر را انتخاب کنیم: Blob یا ArrayBuffer:

// انتخاب فرمت داده برای داده‌های دودویی: Blob
ws.binaryType = 'blob'; // به طور پیش فرض، اما می‌توانید 'arraybuffer' را نیز مشخص کنید

// هندلر رویداد دریافت پیام از سرور
ws.onmessage = function(event) {
  if (event.data instanceof Blob) {
    //  Handling of received data in Blob format
    console.log('Received data in Blob format:', event.data);
  } else {
    //  Handling of received data as a string
    console.log('Received text data:', event.data);
  }
};

اما در مورد اشکال‌زدایی: در مرورگر Dev Tools => Network => WS

#️⃣#tip
🆔@IR_javascript

👍1

242 views_, 00:31

0:17

امام رضا عليه السّلام فرمود:
به راستی که خداوند عزّوجلّ به سه چيز همراه سه چیز ديگر فرمان داده است:
امر كرده به نماز و زكات پس هر كس نماز بخواند و زكات ندهد نمازش پذيرفته نشود،
و امر كرده به شكر خودش به همراه شكر والدين (در سوره لقمان آيه ۱۴) پس هر كه شكر والدين نكند شكر خدا نكرده است.
و امر كرده به تقوى الهی و صله رحم .(در آيه ۱-سوره النساء) و هر كه صله رحم نكند تقواى خدا عزّوجلّ را ندارد

#️⃣#event
🆔@IR_javascript

❤6

178 views_, 06:31

‏Unsection وب‌سایتی است که الهام‌بخش بخش‌های مختلف وب‌سایت شماست. این وب‌سایت منبعی عالی برای یافتن بهترین بخش‌های وب‌سایت برای وب‌سایت شما به شمار می‌رود. Unsection مجموعه‌ای از قالب‌های آماده و نمونه‌های الهام‌بخش را در اختیار شما قرار می‌دهد که می‌توانید از آنها برای طراحی بخش‌های وب‌سایت خود ایده بگیرید.
🔗https://unsection.com/

#️⃣#tool
🆔@IR_javascript

404 views_, 08:30

0:13

Interactive Sign Up Form

🔗https://codepen.io/rkpasia/pen/LNEQod

#️⃣#code
🆔@IR_javascript

154 views_, 16:31

0:04

‏AI Image Enlarger ابزاری آنلاین است که از هوش مصنوعی برای بزرگ‌نمایی تصاویر تا 200% تا 400% بدون افت کیفیت استفاده می‌کند.

🔗https://imglarger.com/ru

#️⃣#tool
🆔@IR_javascript

249 views_, 00:30

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

<div id="map"></div>
<!-- اتصال کتابخانه Leaflet -->
 <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

let mymap = L.map("map").setView([55.7558, 37.6173], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
}).addTo(mymap);
// یک نشانگر با مختصات مشخص شده ایجاد کنید
L.marker([55.7558, 37.6173]).addTo(mymap);

#️⃣#npm_module
🆔@IR_javascript

👍2

323 views_, 08:31

Keep Your Plant Alive

🔗https://www.figma.com/community/file/1355612817337835438/figma-projects-website-ui-design-lessons-for-beginners-web-design-tut

#️⃣#design
🆔@IR_javascript

189 views_, 16:30

نام‌گذاری خودکار تگ‌های HTML/XML
افزونه Auto Rename Tag به طور خودکار تگ‌های جفت HTML/XML را به همان روشی که IDE Visual Studio انجام می‌دهد، نام‌گذاری می‌کند. این افزونه می‌تواند در زمان و تلاش شما برای کدنویسی وب صرفه‌جویی کند و به شما کمک کند تا کد تمیزتر و خواناتر بنویسید.

#️⃣#tool
🆔@IR_javascript

👍1

263 views_, 00:30

logosystem
کتابخانه ای برای ایده گرفتن در جهت طراحی لوگو

🔗https://logosystem.co/
#️⃣#tool
🆔@IR_javascript

👍1

301 views_, 08:31