مقالات آموزشی جاوا اسکریپت ۱۷ تیر ۱۴۰۳ زمان خواندن: ۷ دقیقه

۱۵ کار شگفت‌انگیزی که می‌تونید با جاوااسکریپت ساده انجام بدید 🤯

۱۵ ترفند شگفت انگیز جاوااسکریپت 😊

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

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

اما هیچکس نمی‌تونه انکار کنه که جاوااسکریپت فوق العاده هست.

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

مطمئنم که این لیست شما رو شگفت‌زده میکنه ✌🏻!

📌 پیدا کردن جزئیات سیستم عامل :

می‌دونستید که می‌تونید جزئیات سیستم عامل رو با استفاده از جاوااسکریپت ساده پیدا کنید؟

آبجکت window.navigator شامل اطلاعاتی در مورد جزئیات سیستم عامل مرورگر بازدیدکننده هست. برخی از ویژگی‌های سیستم عامل در زیر ویژگی (پراپرتی) platform قابل دسترس هست.

می‌تونید از کد زیر برای دریافت کردن جزئیات سیستم عامل استفاده کنید.

console.log(navigator.platform);

📌 جلوگیری از ریفرش صفحه با استفاده از void(0) :

از Void(0) برای جلوگیری از ریفرش صفحه استفاده میشه. این کار می‌تونه به حذف اثرات ناخواسته کمک کنه چون ایشون مقدار اولیه undefined برگشت میده.

ایشون به طور معمول در اسناد HTML استفاده میشه که از عناصر لنگر یا همون anchor استفاده می کنه.

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

به عنوان مثال، لینک پایین alert رو بدون ریفرش صفحه نشون میده.

<a href="JavaScript:void(0);" onclick="alert('Ghorbany.DEV')">
  Click Benama!
</a>

📌 ریدایرکت به صفحه جدید :

در جاوااسکریپت خام، میتونید با تنظیم ویژگی href آبجکت location که یک ویژگی از آبجکت window هست، کاربر رو به یک صفحه جدید هدایت کنید.

سینتکس به این شکل خواهد بود:

function redirect() {
  window.location.href = "newPage.html";
 }

وقتی تابع redirect رو صدا می‌زنید، مرورگر به صفحه جدید newPage.html هدایت میشه.

کمی توضیحات اضافه 😊

window : به پنجره (window) مرورگر اشاره میکنه.
location : یک ویژگی از آبجکت window که اطلاعاتی درباره URL فعلی رو نگهداری میکنه.
href : یک ویژگی از آبجکت location که حاوی URL کامل هست. با استفاده از ایشون، میتونید URL رو تغییر بدید و باعث بارگذاری (Load) صفحه جدید توسط مرورگر بشید.

📌 اعتبار سنجی ایمیل‌ها :

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

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

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

function validateEmail(email) {
  var re =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[۰-۹]{۱,۳}\.[۰-۹]{۱,۳}\.[۰-۹]{۱,۳}\.[۰-۹]{۱,۳}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

اگر یکی آسونتر می‌خواید که کاراکترهای یونیکد رو هم قبول کنه، میتونید از این کد استفاده کنید!

function validateEmailUnicode(email) {
  var re =
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(String(email).toLowerCase());
}

این نسخه ساده شده با بیشتر آدرس‌های ایمیل معتبر همخونی داره و در عین حال از برخی از مشکلات regular expressions بیش از حد پیچیده پرهیز می‌کنه.

📌 دریافت آدرس URL فعلی :

بله، این امکان با استفاده از جاوااسکریپت ممکن است!

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

console.log("location.href", window.location.href); // Returns full URL

شما همچنین میتونید از document.URL برای مقاصد فقط خواندنی استفاده کنید (نمیتونید ازش برای رفتن به یک URL جدید استفاده کنید) اما این راه‌حل مشکلاتی در فایرفاکس ایجاد میکنه.

console.log("document.URL", document.URL); // Returns full URL (Read-only)

ممکنه به طور پیوسته در تمام مرورگرها کار نکنه، به ویژه در نسخه‌های قدیمی مرورگر فایرفاکس.

بنابراین، window.location.href به طور کلی برای هم خواندن و هم به روزرسانی URL ترجیح داده میشه.

📌 تشخیص مرورگر موبایل با استفاده از Regex :

شما میتونید از Regex استفاده کنید برای اینکه تشخیص بدید کاربر با گوشی همراهش داره وبگردی میکنه یا نه، که مقدار true یا false برگشت میده. فوق العاده نیست ؟!

window.mobilecheck = function () {
  var mobileCheck = false;
  (function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|۶)۰|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /۱۲۰۷|۶۳۱۰|۶۵۹۰|3gso|4thp|۵۰[۱-۶]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([۴-۷]۰|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-۵|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(۲۰|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|۵۰|۵۴|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|۲۱|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|۰۲|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[۰-۲]|n20[۲-۳]|n30(0|۲)|n50(0|۲|۵)|n7(0(0|۱)|۱۰)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([۱-۸]|c))|phil|pire|pl(ay|uc)|pn\-۲|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|۱۲|۲۱|۳۲|۶۰|\-[۲-۷]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|۰|۱)|۴۷|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-۰|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|۵۰)|t6(00|۱۰|۱۸)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-۹|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|۵[۰-۳]|\-v)|vm40|voda|vulc|vx(52|۵۳|۶۰|۶۱|۷۰|۸۰|۸۱|۸۳|۸۵|۹۸)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
        a.substr(۰, ۴)
      )
    )
      mobileCheck = true;
  })(navigator.userAgent || navigator.vendor || window.opera);
  return mobileCheck;
};

واقعاً کنجکاوم بدونم که کی این قطعه کد رو نوشته 🧐 واقعاً دمش گرم 🙏

📌 تشخیص مرورگر موبایل بدون استفاده از Regex :

میتونید مرورگرهای موبایل رو شناسایی کنید با اجرای ساده یک جستجو در لیست دستگاه ها و چک کنیم که userAgent با چیزی مطابقت دارد یا نه. این یک راه‌حل جایگزین برای استفاده از Regex هست.

function detectmob() {
  if (
    navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/i) ||
    navigator.userAgent.match(/Windows Phone/i)
  ) {
    return true;
  } else {
    return false;
  }
}

این یکی قطعه کد خیلی تمیزتر و خیلییی بهتر قابل درک هست 😁.

📌 تشخیص جاوااسکریپت غیرفعال شده (Disabled) در صفحه :

شما میتونید از تگ <noscript> برای تشخیص اینکه جاوااسکریپت غیرفعال شده یا نه، استفاده کنید.

بلوک کد داخل <noscript> زمانی اجرا میشه که جاوااسکریپت غیرفعال شده باشه و معمولاً برای نمایش محتوای جایگزین هنگامی که صفحه با استفاده از JavaScript تولید شده، بکار میره.

<script type="javascript">
    // JS code
</script>
<noscript>
    <a href="next_page.html?noJS=true">JavaScript is disabled on the page. Enable it asap!</a>
</noscript>

📌 برای دریافت متادیتای یک ماژول :

شما میتونید از آبجکت import.meta استفاده کنید که یک ویژگی متا هست که اطلاعات مربوط به metadata رو به یک ماژول جاوااسکریپت میده.

این شامل اطلاعات درباره ماژول فعلی می‌شود، مانند URL ماژول. در مرورگرها، ممکن است اطلاعات metadata متفاوتی نسبت به NodeJS دریافت کنید.

<script type="module" src="welcome-module.js"></script>;
console.log(import.meta); // { url: "file:///home/user/welcome-module.js" }

📌 دریافت انحراف زمانی timezone از تاریخ :

شما میتونید از متد getTimezoneOffset آبجکت date استفاده کنید. این متد تفاوت منطقه زمانی را به دقیقه برگشت میده، از محل فعلی (تنظیمات سیستم میزبان) تا UTC.

var offset = new Date().getTimezoneOffset();
console.log(offset); // -۳۳۰

📌 تنظیم Cursor به حالت انتظار :

می‌توان نشانگر را در جاوااسکریپت به کمک ویژگی به نام cursor تنظیم کرد. بیاید این کار رو با استفاده از تابع زیر انجام بدیم.

function myFunction() {
  window.document.body.style.cursor = "wait";
}

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

📌 دریافت وضعیت یک چک‌باکس :

برای اینکه ببینی یه چک‌باکس تیک خورده یا نه، می‌تونی خاصیت checked رو روی چک‌باکس توی DOM چک کنی. اگه مقدارش true باشه، یعنی چک‌باکس تیک خورده؛ اگه نباشه، یعنی تیک نخورده.

مثلاً، فرض کن یه چک‌باکس توی HTML داری که می‌خوای وضعیتش رو بررسی کنی:

<input type="checkbox" id="myCheckbox"/>

var checkbox = document.getElementById("myCheckbox");
if (checkbox.checked) {
    console.log("چک‌باکس انتخاب شده است.");
} else {
    console.log("چک‌باکس انتخاب نشده است.");
}

📌 اضافه کردن CSS به پیام‌های کنسول :

بله، حتی می‌تونی به پیام‌های کنسول CSS اضافه کنی، درست مثل متن‌های HTML توی صفحه وب. واقعاً فوق‌العاده است 😊

console.log("%cاین یک پیام با استایل است", "color: blue; font-size: 20px; background-color: yellow; padding: 5px; border-radius: 5px;");

📌 غیرفعال کردن کلیک راست روی صفحه وب :

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

<body oncontextmenu="return false;"></body>

📌 گرفتن رویداد دکمه برگشت مرورگر :

اولش باورم نمی‌شد که این امکان‌پذیر باشه.

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

 window.addEventListener('beforeunload', () => {
   console.log('Clicked browser back button');
 });

📌 گروه‌بندی و تو در تو کردن خروجی کنسول :

می‌تونی از console.group() برای گروه‌بندی پیام‌های لاگ مرتبط استفاده کنی و با console.groupEnd() گروه رو ببندی.

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

برای مثال، اگه بخوای جزئیات یک کاربر رو لاگ کنی:

console.group("User Details");
console.log("name: Younes Ghorbany");
console.log("job: Full-stack Developer");

// Nested Group
console.group("Address");
console.log("Street: my street");
console.log("City: my city");
console.log("State: my state");

// Close nested group
console.groupEnd();

// Close outer group
console.groupEnd();

همچنین میتونید از console.groupCollapsed() به جای console.group() استفاده کنید اگر می‌خواید گروه‌ها به طور پیش‌فرض برای کاربران فشرده بشن.

واقعاً جاوااسکریپت فوق العاده هست 🤯

اگر از مواردی که اینجا قرار دادم چیزی مناسب و خوب پیدا کردی حتماً توی نظرات به من بگو 🌹🙏