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

ایجاد انیمیشن در svg با استفاده از تگ های animateTransform و animate

در انیمیشن بالا از css , js استفاده نشده و با استفاده از المان های animateTransform و animate متحرک شده اند

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

#️⃣#tip #html
🆔@IR_javascript

👍1

236 views_, 23:30

translate global attribute

احتمالاً متوجه شده‌اید که وقتی به منابع خاصی مراجعه می‌کنید، اگر زبان سایت با زبان مرورگر متفاوت باشد، ممکن است ابزارهای ترجمه خودکار مانند Google Translate، محتوای صفحه را ترجمه کنند.
اتربیوت translate به مرورگر می‌فهماند که چه عباراتی ترجمه نکند و این باعث میشه که پس ترجمه خوانایی متن بالاتر برود

🔗https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

#️⃣#tip #html
🆔@IR_javascript

🤔2👍1

398 views_, 23:30

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

This media is not supported in your browser

VIEW IN TELEGRAM

تگ <dialog> در HTML برای ایجاد یک پنجره مودال

اگر مودال باز شود (با استفاده از showModal() )، پس زمینه کم نور می شود و بقیه محتوا برای تعامل در دسترس نیست.

HTML:

<dialog>
 <!-- содержимое-->
 <button id="closeBtn">Закрой меня</button>
</dialog>
<button id="openBtn">Открыть модалку</button>

CSS:

dialog {
  width: 300px;
  animation: move-in 0.3s;
  /* другие стили */
}
dialog::backdrop {
  background-color: #2e3252b3;
  animation: fade-in 0.3s;
}

JS:

const dialog = document.querySelector('dialog');
const openBtn = document.querySelector('#openBtn');
const closeBtn = document.querySelector('#closeBtn');
openBtn.addEventListener('click', () => dialog.showModal());
closeBtn.addEventListener('click', () => dialog.close());

#️⃣#tip #html
🆔@IR_javascript

👍2

282 views_, 00:31

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

تگ <optgroup> در HTML در داخل تگ <select> برای گروه بندی آیتم های لیست انتخاب شده استفاده می شود. این به شما امکان می دهد برای راحتی کاربر زیر گروه ها یا دسته ها ایجاد کنید. در یک تگ <optgroup>، می توانید یک یا چند تگ <option> را قرار دهید که نشان دهنده موارد انتخابی فردی است.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>

#️⃣#tip #html
🆔@IR_javascript

293 views_, 00:30

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

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

چرا به تگ های معنایی نیاز داریم؟

تگ های معنایی به موتورهای جستجو، مرورگرها، دستیارها و سایر ابزارها کمک می‌کند تا ساختار صفحه وب را بهتر درک کنند و تفسیر محتوای آن را آسان‌تر می‌کند. این امر به نوبه خود، دسترسی و سئو (SEO) را بهبود می‌بخشد.
تگ‌های اصلی معنایی:

<header>برای هدر</header>
<main>برای محتوای اصلی</main>
<footer>برای پاورقی</footer>
<article>بخش مستقل و کامل</article>
<section>بخش محتوا</section>
<aside>محتوای جانبی و غیرمستقیم</aside>
<nav>بخش ناوبری</nav>
<time>برای نمایش تاریخ و زمان</time>
<div>بلوکی که نتوان به آن معنای خاصی اختصاص داد</div>

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

👍4

305 views_, 10:18

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

معنی تگ‌ها در ساختار اولیه هر وب‌سایت
سلام به همه! هر بار که در VSCode یک پروژه جدید شروع می‌کنیم، این کار با یک سند HTML آغاز می‌شود، جایی که ترکیب "! + tab" را فشار می‌دهیم. پس از آن، ساختاری مانند تصویر بالا ظاهر می‌شود.

بیایید این ساختار را به طور مفصل بررسی کنیم:

<!DOCTYPE html>

— این خط به مرورگر می‌گوید که از HTML5 استفاده می‌شود، که برای تعیین نسخه HTML مورد استفاده و اطمینان از رندر صحیح صفحه ضروری است.

<html lang="en">

— این تگ نشان‌دهنده شروع سند HTML است. صفت lang="en" زبان صفحه (در این مورد انگلیسی) را مشخص می‌کند. این برای موتورهای جستجو و دسترسی مفید است.

<head>

— این تگ حاوی متادیتا در مورد سند مانند رمزگذاری، اطلاعات مشاهده و عنوان صفحه است. متادیتا در خود صفحه نمایش داده نمی‌شود.

<meta charset="UTF-8">

— این متاتگ رمزگذاری کاراکترها را برای سند تنظیم می‌کند. UTF-8 تقریباً از همه زبان‌های دنیا پشتیبانی می‌کند و استاندارد صفحات وب است.

<meta name="viewport" content="width=device-width,
initial-scale=1.0">

— این متاتگ برای طراحی واکنشگرا مهم است. به مرورگر می‌گوید که چگونه اندازه و مقیاس صفحه را مدیریت کند. در این مورد:

‏width=device-width عرض را به عرض دستگاه تنظیم می‌کند.
‏initial-scale=1.0 مقیاس اولیه را روی 100% تنظیم می‌کند.

<title>

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

<body>

— این تگ حاوی تمام محتوای صفحه وب است که در مرورگر کاربر نمایش داده می‌شود - متن، تصاویر، پیوندها، جداول و غیر

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

❤2

294 views_, 10:42

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

This media is not supported in your browser

VIEW IN TELEGRAM

چند روز پیش، یک مثال جالب با استفاده از تگ HTML <wbr> ایجاد کردم. اگرچه این تگ به تنهایی بسیار جالب است، ممکن است راه حل بهتری وجود داشته باشد.
می‌توانیم از &shy استفاده کنیم که یک خط فاصله نرم در HTML است.
این به این معنی است که اگر کلمه خیلی طولانی باشد، یک خط فاصله (-) اضافه می‌کند، در غیر این صورت کلمه را همانطور که هست رندر می‌کند.

<div>
  <h1>SHY</h1>
  super&shy;long&shy;word&shy;that&shy;needs&shy;to&shy;break&shy;better
</div>

<div>
  <h1>WBR</h1>
  super<wbr>long<wbr>word<wbr>that<wbr>needs<wbr>to<wbr>break<wbr>better
</div>

<div style="word-break: break-all">
  <h1>CSS</h1>superlongwordthatneedstobreakbetter
</div>

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

👍1

243 views_, 16:53

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

چگونه یک فایل را از سایت دانلود کنیم

تگ لینک <a> یک ویژگی بسیار کاربردی به نام download دارد که به شما اجازه می‌دهد هر فایلی را از سایت دانلود کنید. استفاده از آن به این شکل است:

<a
    download
    href="https://.../files/example.zip"
>
    دانلود فایل
</a>

همچنین می‌توانید نام دلخواهی برای فایل دانلودی تعیین کنید، به این صورت:

<a
    download="نام_جدید_فایل.zip"
    href="https://.../files/example.zip"
>
    دانلود فایل
</a>

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

این ویژگی در حال حاضر بیش از ۹۷٪ پشتیبانی در مرورگرها دارد و تنها در مرورگر IE به طور کامل پشتیبانی نمی‌شود.

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

👍2

329 views_, 17:02

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

‏noopener و noreferrer در مرورگر

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Anchor text</a>

وقتی یک لینک را در یک تب جدید باز می‌کنیم (مثلاً https://t.me/prog_way_blog/317) با استفاده از ویژگی target="_blank"، مرورگر چند کار ناخواسته انجام می‌دهد که ویژگی‌های noopener و noreferrer از آن‌ها جلوگیری می‌کنند:

🟢 ویژگی noopener: مانع از دسترسی تب جدید به شیء window.opener می‌شود. چرا این مهم است؟ بدون این ویژگی، سایتی که در تب جدید باز می‌شود می‌تواند به تب اصلی دسترسی پیدا کند و احتمالاً کدهای مخرب اجرا کند که یک تهدید امنیتی است.

‏window.opener حاوی اطلاعاتی از تب اصلی است که از آنجا به سایت جدید آمده‌ایم. اگرچه اطلاعات این شیء محدود است، اما تب جدید می‌تواند در تب اصلی حرکت کند که این امکان را برای حملات فیشینگ فراهم می‌کند.

فرض کنید در سایت some-bank.com هستید و به سایتی دیگر با کد مخرب بدون noopener می‌روید. تب جدید می‌تواند به آدرس قبلی شما و API ناوبری تب اصلی دسترسی پیدا کند و بدون اینکه شما متوجه شوید، آدرس تب اصلی را از some-bank.com به some-bauk.com تغییر دهد. وقتی به تب اصلی برگردید، همان سایت را می‌بینید اما در واقع به یک صفحه فیشینگ هدایت شده‌اید. اگر اطلاعات خود را در این صفحه وارد کنید، اطلاعات شما به دست مهاجمان می‌افتد.

این نوع حمله به آن tabnabbing می‌گویند.

🟢 ویژگی noreferrer: دو کار انجام می‌دهد:

مانند noopener از دسترسی به window.opener جلوگیری می‌کند.
هدر HTTP Referer را هنگام کلیک روی لینک حذف می‌کند تا منبع درخواست پنهان شود.

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

معمولاً این دو ویژگی با هم استفاده می‌شوند. noreferrer به نوعی شامل noopener می‌شود، اما در عمل همیشه هر دو استفاده می‌شوند. دلیل آن این است که هر مرورگر Referer-Policy را به روش خود پیاده‌سازی می‌کند و استفاده از هر دو ویژگی خیالمان را راحت‌تر می‌کند.

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

👏5❤1

412 views_, 17:12

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

ویژگی‌های type="number" و inputmode="numeric"

در ظاهر، این دو ویژگی مشابه به نظر می‌رسند، اما در واقع تفاوت‌های مهمی دارند.

تفاوت اصلی این است که type="number" ورودی را به مقادیر عددی محدود می‌کند و به صورت خودکار اعتبارسنجی انجام می‌دهد، در حالی که inputmode="numeric" فقط صفحه‌کلید مناسب برای وارد کردن اعداد را تنظیم می‌کند و مانع از ورود سایر کاراکترها نمی‌شود.

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

👍4

380 views_, 16:31

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

ویژگی enterkeyhint 😊

آیا تا به حال متوجه شده‌اید که کیبورد دستگاه شما گاهی نشان می‌دهد چه اتفاقی می‌افتد اگر دکمه Enter را فشار دهید؟ برای مثال، "ارسال"، "جستجو" یا "بعدی".

همه این موارد را می‌توان با استفاده از ویژگی enterkeyhint کنترل کرد که به کاربر دستورالعمل‌های دقیق‌تری می‌دهد و تعامل با فرم‌ها را در دستگاه‌های موبایل راحت‌تر می‌کند. 😁

  <input id="input-default" type="text" enterkeyhint="enter" >

⬆️ مقادیر ممکن به همراه نمونه‌هایی از کیبوردها در تصویر بالا آورده شده است.

👀 این ویژگی توسط همه مرورگرهای مدرن (93%) پشتیبانی می‌شود. می‌توانید بررسی کنید: Can I use (https://caniuse.com/?search=enterkeyhint)

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

👍7❤1

587 views_, 16:31

About

Blog

Apps

Platform