دسته: جاوا اسکریپت

گاهی اوقات نیاز است که کد جاوا اسکریپت به وردپرس خود اضافه کنید. برای قرار دادن کد جاوا اسکریپت در وردپرس روش‌های مختلف و متنوعی وجود دارد. می‌توانید این کد را از طریق فایل functions.php قالب فعال خود اضافه کنید، می‌توانید با کمک افزونه‌هایی مانند wpcode اینکار را انجام دهید و یا در صورتیکه قالب شما تنظیمی برای اضافه کردن کد جاوا اسکریپت به وبسایت در نظر گرفته است می‌توانید اینکار را از طریق تنظیمات قالب خود انجام دهید.

اگرچه که راحت‌ترین روش برای قرار دادن کد جاوا اسکریپت در وردپرس، استفاده از تگ <script> به صورت مستقیم در header.php و footer.php فایل قالب است، اما نبایستی هیچگاه اینکار را انجام دهید چرا که با به‌روزرسانی قالب تمامی این تغییرات از بین خواهد رفت و علاوه بر این، لود فایل‌های جاوا اسکریپت به ترتیبی صورت می‌گیرد که بایستی این ترتیب رعایت شود.

جاوا اسکریپت و کاربرد آن

بنابراین هیچگاه کد جاوا اسکریپت را مستقیما به فایل header.php یا footer.php اضافه نکنید.

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

استفاده از افزونه برای قرار دادن کد جاوا اسکریپت در وردپرس

زمانی برای قرار دادن کد جاوا اسکریپت در وردپرس سراغ نصب و استفاده از افزونه می‌رویم که:

• نخواهید به صورت مستقیم فایل های قالب وردپرس را ویرایش کنید.
• بخواهید کد جاوا اسکریپت مدنظر شما مستقل از قالب باشد؛ یعنی اینکه حتی پس از استفاده از قالبی جدید آن را داشته باشید.

افزونه برای ویرایش فایل header.php و footer.php

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

شیوه کار با دستورات شرطی if…else جاوااسکریپت

افزونه Insert Header and Footers افزونه‌ی خوبی است که به شما اجازه می‌دهد تا بخش‌های فوتر و هدر قالب را ویرایش کنید. این افزونه رابط کاربری ساده ای با تنها دو ناحیه متنی دارد – یکی برای بخش اسکریپت‌های هدر و دیگری برای اسکریپت‌های فوتر. این افزونه اسکریپت‌هایی را به action hookهای wp_head یا wp_footer اضافه می‌کند.

بایستی اسکریپت های خود را بین دو تگ <script> و <script/> قرار دهید. جدا از این مساله، می توانید از این افزونه برای افزودن CSS سفارشی به بخش هدر قالب خود با استفاده از تگ <style> و <style/> استفاده کنید.

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

دیگر گزینه قرار دادن کد جاوا اسکریپت در وردپرس، اضافه کردن اسکریپت با کمک افزونه‌هایی مانند Custom JS در مخزن وردپرس است. این افزونه‌ها مشابه افزونه‌های ویرایش هدر و فوتر هستند و اغلب آنها نیز از اکشن هوک‌های wp_head و wp_footer استفاده می‌کنند اما تنظیمات بیشتری در اختیار شما قرار می‌دهند.

برای مثال، افزونه Simple Custom CSS and JS به شما این اجازه را می‌دهد تا پیوند یکتایی برای فایل‌های جاوا اسکریپت خود تعیین کنید و آنها را در پوشه wp-content ذخیره کنید و اسکریپت‌ها را به عنوان یک نوع پست سفارشی مدیریت کنید.

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

افزونه برای قرار دادن کد جاوا اسکریپت در وردپرس به یک هدف مشخص

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

برای مثال، افزونه محبوب GA Google Analytics به شما اجازه می‌دهد تا گوگل آنالیتیک را به وبسایت از طریق ناحیه مدیریت وردپرس بیافزایید. این افزونه تنظیمات زیادی دارد که مختص اسکریپت گوگل آنالیتیک می‌باشد، مثلا مخفی سازی IP و …

ویرایش فایل functions.php قالب فرزند

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

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

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

بایستی با کمک PHP اسکریپت‌های خود را در صف و در فایل functions.php قالب فرزند قرار دهید. می‌توانید این فایل را در ویرایشگر کد خود ویرایش کرده و نسخه به‌روزرسانی شده را به صورت دستی بر روی سرور خود آپلود کنید یا آن را از طریق گزینه ویرایش پوسته در منوی نمایش بخش مدیریت وردپرس خود ویرایش کنید.

enqueue کردن اسکریپت های سفارشی با تابع ()wp_enqueue_script

برای قرار دادن کد جاوا اسکریپت در وردپرس، به توصیه وردپرس بایستی از تابع ()wp_enqueue_script برای اضافه کردن اسکریپت به وردپرس استفاده کنید. این تابع اسکریپت‌ها را در یک سلسله مراتب منظم اجرا می‌کند. شما با کمک این تابع، اسکریپت مدنظر خود را به ترتیب درستی وارد صف خواهید کرد تا با دیگر اسکریپت‌های موجود در هسته وردپرس و افزونه‌های در حال اجرا بر روی وبسایت تداخل نداشته باشد.

با ()wp_enqueue_script، می‌توانید کد سفارشی جاوا اسکریپت خود را به فوتر و هدر قالب اضافه کنید. به صورت پیش فرض، این تابع اسکریپت‌ها را که در بخش <head> صفحه قرا می‌دهد مگر اینکه هنگام تعریف تابع از وردپرس خواسته باشید که اسکریپت در فوتر لود شود.

تفاوت برچسب و دسته‌بندی در وردپرس – بهترین روش برای سئو

اگر می‌خواهید اسکریپت خود را به هدر اضافه کنید، تنها نیاز است که تابع سفارشی ساخته و به اسکریپت مد نظر خود اشاره کنید. به طوری که در زیر می‌بینید، از تابع وردپرس ()get_stylesheet_directory_uri برای دریافت آدرس پوشه پوسته فرزند استفاده شده است. و تابع ()add_action تابع سفارشی ()wproket_enqueue_custom_js را به اکشن هوک wp_enqueue_scripts اضافه می‌کند که به شما اجازه می‌دهد اسکریپت سفارشی را وارد صف کنید.

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

جدای قرار دادن اسکریپت‌ها در صف، می توانید از تابع ()wp_enqueue_script برای اضافه کردن کد سفارشی جاوا اسکریپت به بخش فوتر استفاده کنید. در این حالت، نیاز به تعریف تمام پارامترهای اختیاری دارید، به ترتیب:

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array(), false, true);
}

اگر اسکریپت شما وابسته به اسکریپت‌های دیگر است، بایستی آنها را به پارامتر ()array از تابع ()wp_enqueue_script اضافه کنید. چندین کتابخانه و اسکریپت محبوب مانند jQuery وجود دارد که به صورت پیش‌فرض توسط هسته وردپرس لود می‌شوند و نیازی به لود دوباره آنها نیست.

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'wproket_enqueue_custom_js');
function wproket_enqueue_custom_js() {
  wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array('jquery'), false, true);
}

اگر نیاز به اسکریپتی دارید که توسط وردپرس ثبت نشده است، بایستی آن را ثبت کرده و با تابع ()wp_enqueue_script دیگری آن را وارد صف کنید.

اگر می‌خواهید اسکریپت خود را در بجای لود در فرانت‌اند وبسایت خود در ناحیه مدیریت وبسایت اجرا کنید بایستی به جای استفاده از تابع wp_enqueue_scripts از اکشن هوک admin_enqueue_scripts در تابع add_action استفاده کنید. برای صفحه لاگین بایستی از اکشن هوک login_enqueue_scripts استفاده کنید که اسکریپت‌ها را تنها برای صفحه لاگین وارد صف می‌کند.

اجرای اسکریپت های inline با wp_head یا wp_footer

گاهی در مساله قرار دادن کد جاوا اسکریپت در وردپرس، به دنبال اضافه کردن یک تکه کد کوتاه هستید.

اگرچه که وردپرس استفاده از تابع wp_enqueue_script را برای لود اسکریپت پیشنهاد می‌کند، اما می‌توانید از اسکریپت‌های inline برای وبسایت‌تان با اکشن هوک‌های wp_head و wp_footer استفاده کنید. بجای وارد صف کردن اسکریپت‌های سفارشی خود، این هوک‌ها تنها آنها را وارد بخش فوتر و هدر می‌کنند. بنابراین بایستی تنها از این تکنیک برای اضافه کردن اسکریپت‌های inline و نه فایل‌های js استفاده کنید.

کد زیر نشان می‌دهد که چگونه می‌توانید از اکشن هوک wp_head برای اجرای اسکریپت inline در بخش هدر قالب استفاده کنیم:

<?php
  /* Inline script printed out in the header */
  add_action('wp_head', 'wproket_add_script_wp_head');
  function wproket_add_script_wp_head() { ?>
    <script> console.log("I'm an inline script tag added to the header."); </script>
<?php }

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

<?php
  /* Inline script printed out in the footer */
  add_action('wp_footer', 'wproket_add_script_wp_footer');
  function wproket_add_script_wp_footer() { ?>
    <script> console.log("I'm an inline script tag added to the footer."); </script>
  <?php }

wp_head و wp_footer تنها در بخش فرانت اند وبسایت تان در دسترس هستند و اسکریپت اضافه شده با این هوک‌ها در ناحیه مدیریت و صفحه لاگین بارگذاری نمی‌شوند. برای افزودن اسکریپت‌های inline سفارشی به ناحیه مدیریت خود بایستی از admin_head و admin_footer در تابع ()add_action استفاده کنید. و اگر  می‌خواهید اسکریپت‌ها را در صفحه لاگین اجرا کنید بایستی از اکشن هوک‌های login_head و login_footer استفاده کنید.

به خاطر داشته باشید که برای قرار دادن کد جاوا اسکریپت در وردپرس، افزونه های اشاره شده در این پست از wp_head و wp_footer نه تنها برای اسکریپت های inline بلکه همچنین برای فایل های بیرونی js استفاده می‌شوند. امن‌ترین و بهترین روش استفاده از تابع ()wp_enqueue_script برای لود فایل جاوا اسکریپت در وردپرس محسوب می‌شود..

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

در شیوه آسان مرتب سازی آرایه به صورت پیش فرض، array.sort هر عنصر در آرایه را که بایستی مرتب شود را به یک رشته تبدیل کرده و آن را با موقعیت کد یونیکد مقایسه می کند.

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // returns [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // returns [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

ممکن است که این پرسش برای شما پیش آمده باشد که چرا ۳۲ پیش از ۵ ظاهر شده است. منطقی نیست؟ خب، در واقع منطقی هست. این مساله به این خاطر رخ می دهد که هر عنصر در آرایه ابتدا به یک رشته تبدیل می شود و ۳۲ در ترتیب یونیکد پیش از ۵ قرار می گیرد.

کاربرد جاوا اسکریپت

array.sort تنها ترتیب آرایه را تغییر می دهد.

const baz = ['My cat ate my homework', 37, 9, 5, 17];
baz.sort(); // baz array is modified
console.log(baz); // shows [ 17, 37, 5, 9, 'My cat ate my homework' ]

برای حل این مساله، می توانید نمونه ای از آرایه را برای ذخیره سازی ایجاد کنید و آن را تغییر دهید. این کار با متدی از آرایه که یک کپی از آرایه مدنظر ما برمی‌گرداند امکان پذیر است. برای مثال array.slice

const sortedBaz = baz.slice().sort(); // a new instance of the baz array is created and sorted

یا اگر شیوه بهتری را ترجیح می دهید می توانید از عملگر نقطه با همان نتیجه استفاده کنید:

خروجی هر دو مورد یکسان خواهد بود.

const sortedBaz = [...baz].sort(); // a new instance of the baz array is created and sorted

استفاده از array.sort به تنهایی برای مرتب سازی آرایه ای از اشیا خیلی مفید واقع نخواهد شد. خوشبختانه این تابع یک پارامتر دیگر به نام compareFunction قبول می کند که باعث می شود عناصر آرایه مطابق با مقدار برگشی تابع مقایسه ای مرتب شوند.

ساختار جاوا اسکریپت

استفاده از توابع مقایسه ای برای مرتب سازی

اجازه دهید دو عنصر foo و bar را با استفاده از تابع مقایسه ای مقایسه کنیم. مقدار برگشتی تابع مقایسه ای به صورت زیر است:

• ۱. کمتر از ۰ – foo پیش از bar می آید.
• ۲. بزرگتر از ۰ – bar پیش از foo می آید
• ۳. برابر با ۰ – foo و bar با توجه به یکدیگر بدون تغییر می مانند.

اجازه دهید با آرایه ای از اعداد مثالی بزنیم.

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

مثال زیر را به عنوان تفریق a از b در نظر داشته باشید:

function compare(a, b) {
  return a - b;
}

تابع بالا را می توان به صورت تابع arrow نیز نوشت:

nums.sort((a, b) => a - b);

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

حالا اجازه دهید ببینیم که چطور می توان آرایه ای از اشیا را در جاوا اسکریپت مرتب کرد.

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

می توانیم از تابع مقایسه ای زیر برای مرتب سازی این آرایه از خوانندگان مطابق برندشان استفاده کنیم:

function compare(a, b) {
  // Use toUpperCase() to ignore character casing
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* returns [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

برای رزرو کردن شیوه مرتب سازی، می توانید مقدار بازگشتی را با استفاده از تابع compare معکوس کنید:

function compare(a, b) {
  ...

  //invert return value by multiplying by -1
  return comparison * -1;
}

ساخت تابع پویای مرتب سازی

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

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

function compareValues(key, order = 'asc') {
  return function innerSort(a, b) {
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
      // property doesn't exist on either object
      return 0;
    }

    const varA = (typeof a[key] === 'string')
      ? a[key].toUpperCase() : a[key];
    const varB = (typeof b[key] === 'string')
      ? b[key].toUpperCase() : b[key];

    let comparison = 0;
    if (varA > varB) {
      comparison = 1;
    } else if (varA < varB) {
      comparison = -1;
    }
    return (
      (order === 'desc') ? (comparison * -1) : comparison
    );
  };
}

و طریقه استفاده از آن به صورت زیر است:

// array is sorted by band, in ascending order by default
singers.sort(compareValues('band'));

// array is sorted by band in descending order
singers.sort(compareValues('band', 'desc'));

// array is sorted by name in ascending order
singers.sort(compareValues('name'));

// array is sorted by date if birth in descending order
singers.sort(compareValues('born', 'desc'));

در کد بالا، متد hasOwnProperty برای بررسی این مساله به کار می رود که خصوصیت مشخص شده در هر شی تعریف شده و از طریق prototype ارث برده نمی شود. اگر در هر دو شی تعریف نشود، تابع مقدار ۰ را بازمیگرداند که باعث می شود شیوه مرتب سازی به همان صورتی که بوده باقی بماند (یعنی اشیا با توجه به یکدیگر دست نخورده باقی می مانند).

Callback جاوا اسکریپت چیست و چگونه کار می‌کند؟

عملگر typeof نیز برای بررسی نوع داده های مقدار خصوصیت به کار می رود. این عملگر به تابع اجازه می دهد تا روش مناسبی را برای مرتب سازی آرایه تعیین کند. برای مثال، اگر مقدار خصوصیت مشخص شده یک رشته است، متد toUpperCase برای تبدیل تمام کاراکتر به حروف بزرگ به کار می رود، بنابراین بزرگی کوچکی کاراکتر در زمان مرتب سازی نادیده گرفته می شود.

می توانید تابع بالا را طوری تنظیم کنید تا مطابق با دیگر انواع داده و هر نیازی باشد که اسکریپت شما ممکن است داشته باشد.

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

طریقه استفاده از عبارت If

ساده‌ترین حالت استفاده از شرط if در جاوا اسکریپت به صورت زیر است:

if (condition) {
    // Code to execute if condition is true
}

راهنمای کامل Callback در جاوا اسکریپت

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

if (condition) {
    // Code to execute if condition is true
} else {
    // Code to execute if condition is false
}

همچنین در جاوا اسکریپت، امکان استفاده از else if به جهت بررسی شرایط بعدی نیز وجود دارد.

if (condition1) {
    // Code to execute if condition1 is true
} else if (condition2) {
    // Code to execute if condition2 is true
} else {
    // Code to execute if all conditions are false
}

استفاده از عملگر در شرط if در جاوا اسکریپت

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

• == (برابر)
• =! (نابرابر)
• > (کوچکتر)
• < (بزرگتر)
• => (کوچکتر مساوی)
• =< (بزرگتر مساوی)

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

• && (AND منطقی)
• || (OR منطقی)
• ! (NOT منطقی)

استفاده از Ifهای تو در تو در جاوا اسکریپت

منظور از ifهای تو در تو استفاده از if درون یک دستور if دیگر است. این کار اجازه اجرای شرایط منطقی پیچیده‌تری را به توسعه‌دهندگان می‌دهد.

if (condition1) {
    if (condition2) {
        // Code to execute if both condition1 and condition2 are true
    }
}

اشتباهات معمول در استفاده از شرط if در جاوا اسکریپت

فراموش کردن پرانتزها: یکی از معمول‌ترین اشتباهات در استفاده از شرط if در جاوا اسکریپت، فراموشی بستن پرانتزهای باز شرط if است.

استفاده اشتباه از عملگرهای مقایسه‌ای: استفاده اشتباه از عملگرهای مقایسه‌ای منجربه رفتارهای عجیب در دستور if خواهد شد. خیلی مهم است که از تفاوت بین عملگرهای == و === و دیگر عملگرهای مقایسه‌ای به خوبی آگاه باشیم.

نمونه عملی از شرط if در جاوا اسکریپت

let userInput = prompt("Enter your age:");

if (userInput !== null) {
    let age = parseInt(userInput);

    if (!isNaN(age) && age > 0) {
        console.log("Valid age entered: " + age);
    } else {
        console.log("Invalid age entered. Please enter a positive number.");
    }
} else {
    console.log("User canceled input.");
}

مزایای استفاده از شرط if در جاوا اسکریپت

خوانایی بالاتر: با کمک شرط if در جاوا اسکریپت، توسعه‌دهندگان می‌توانند به صورت کاملا شفاف شرایط برای اجرای کدهای مشخصی بررسی کنند.

کارایی بهتر: منطق شرطی به توسعه‌دهندگان این اجازه را می‌دهد تا کدی موثرتر بنویسند که کدهایی را تنها در شرایطی خاط اجرا می‌کند. این کار باعث کاهش محاسبات غیرضروری و بهبود عملکرد کلی پروژه خواهد شد.

ریسک استفاده از ifهای تو در تو

در حالیکه ifهای تو در تو می‌‎توانند در منطق شرطی پیچیده به کمک توسعه‌دهنده بیایند اما شرایطی وجود دارد که استفاده از ifهای تو در تو می‌تواند منجربه ایجاد مشکلات بالقوه‌ای برای کد شود:

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

پیچیدگی کد: ifهای تو در تو منجربه ساختی مدیریت و حفظ کد می‌شوند. وقتیکه با چندین if تو در تو مواجه باشید، عیب‌یابی و تغییر کد بدون اینکه مساله‌ای دیگر ایجاد شود تقریبا ناممکن است.

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

پیش‌درآمدی بر callback در جاوا اسکریپت

callback تابعی است که پس از تابعی دیگر که اجرایش به پایان رسیده اجرا می شود – از این رو آن را call back می نامند.
در جاوا اسکریپت توابع اشیا هستند. به همین دلیل، توابع می توانند توابع دیگر را به عنوان آرگومان قبول کنند و قابلیت بازگشت توسط توابع دیگر را دارند. توابعی که اینکار را انجام می دهند، توابع مرتبه بالا نامیده می شوند. هر تابعی که به عنوان یک آرگومان ارسال می شود و سپس توسط تابعی که آن را دریافت کرده فراخوانده می شود، تابع callback نامیده می شود.

متغیرهای جاوا اسکریپت: نوع داده و نام متغیر در جاوا اسکریپت

چرا به Callback در جاوا اسکریپت نیازمندیم؟

دلیل نیاز به Callback در جاوا اسکریپت این است که در حقیقت جاوا اسکریپت زبان برنامه نویسی رویدادمحور است. این بدان معناست که به جای انتظار برای پاسخ یک دستور، جاوا اسکریپت به اجرا ادامه خواهد داد. به مثال زیر نگاهی بیاندازید.

function first(){
  console.log(1);
}

function second(){
  console.log(2);
}

first();
second();

همانطور که انتظار دارید، اولین تابع ابتدا اجرا شده و دومین تابع نیز بعد از اجرای تابع اول اجرا می شود. و خروجی به صورت زیر خواهد بود

// ۱
// ۲

اما اگر تابع اول یک سری کد داشته باشد که نبایستی فورا اجرا شود چطور؟ برای مثال، در درخواست API که بایستی ابتدا ارسالش کنیم و سپس منتظر پاسخ آن باشیم شرایط چطور خواهد بود؟ برای شبیه سازی این اقدام، از setTimeout استفاده می کنیم که متد خود جاوا اسکریپت است که می تواند تابعی را پس از تاخیری مشخص فرابخواند. ما تابع خود را برای ۵۰۰ میلی ثانیه به تاخیر می اندازیم تا درخواست API را شبیه سازی کنیم. کد جدید ما به این شکل خواهد بود:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, ۵۰۰ );
}

function second(){
  console.log(2);
}

first();
second();

در اینجا مهم نیست که درباره ()setTimeout می‌دانیم یا نمی‌دانیم. تمام آن چیزی که حائز اهمیت است این است که ما console.log(1) را با تاخیری ۵۰۰ میلی ثانیه جابجا کردیم. بنابراین اتفاقی که در خروجی می افتد به صورت زیر است.

first();
second();
// ۲
// ۱

با وجود اینکه ما تابع ()first را ابتدا فراخواندیم، میبینیم که این تابع پس از تابع ()second فراخوانده می شود.

آشنایی با ساختار جاوا اسکریپت

این بدان معنا نیست که جاوا اسکریپت توابع مان را به شکلی که ما می خواهیم مرتب کرده است بلکه جاوا اسکریپت برای پاسخ ()first پیش از رفتن به اجرای ()second منتظر نمانده است.

شما نمی توانید تابعی را پس از تابعی دیگری فرا بخوانید و امیدوار باشید که به ترتیب و درست اجرا می شوند. Callback در جاوا اسکریپت روشی است که در آن ما مطمئن می شویم که یک کد مشخص تا زمانیکه اجرای کد دیگر به پایان نرسیده باشد، اجرا نمی شود.

ساخت Callback در جاوا اسکریپت

برای ساخت Callback در جاوا اسکریپت تابع زیر را در نظر داشته باشید

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

در بالا ما تابع doHomework را ساختیم. تابع ما یک متغیر قبول می کند، یعنی subject که میخواهیم با آن کار کنیم. تابع خود را تایپ کرده و کد زیر را فرابخوانید.

doHomework('math');
// Alerts: Starting my math homework.

حالا اجازه دهید به عنوان آخرین پارامتر در تابع ()doHomework عبارت callback را بیافزاییم. تابع callback در آرگومان دوم از تابع ()doHomework تعریف می شود.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

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

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

function alertFinished(){
  alert('Finished my homework');
}

doHomework('math', alertFinished);

نتیجه این مثال دقیقا به مانند مثال پیشین است اما راه اندازی آن اندکی متفاوت است. همانطور که میبینید، ما تابع alertFinished را به عنوان آرگومانی طی فراخوانی تابع ()doHomework انتقال دادیم.

یک مثال واقعی‌تر از Callback در جاوا اسکریپت

وقتی که درخواستی به یک API ارسال می کنید بایستی منتظر پاسخ و پیش از استفاده از آن پاسخ باشید. به مثال زیر نگاه بیاندازید:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
});

• وظیفه T.get به صورت ساده این است که درخواست GET را به توییتر می‌فرستیم.
• سه پارامتر در این درخواست وجود دارد: search/tweets ریشه درخواست‌مان است، params که پارامترهای جستجو است و سپس تابع ناشناس که callback ماست.

عملگرها در جاوا اسکریپت: عملگرهای منطقی، ریاضی و مقایسه‌ای

به این دلیل Callback در جاوا اسکریپت اهمیت بسیار زیادی دارد که نیاز داریم پیش از اینکه دستورات دیگر کدمان اجرا شوند منتظر پاسخ درخواست ارسال شده به سرور باشیم. پس از ارسال پارامترهای‌مان به search/tweets از طریق درخواست GET، در حقیقت ما نمی‌دانیم که آیا درخواست API مان موفق خواهد بود یا با شکست مواجه خواهد شد.

وقتیکه توییتر پاسخ می دهد، تابع callback ما اجرا می شود. در این وضعیت توییتر یا یک err(error) یا یک پاسخ را به ما بازخواهد گرداند و دقیقا بعد از این پاسخ است که می‌توانیم در خصوص اجرا یا عدم اجرای باقی کدمان تصمیم بگیریم. در تابع callback ما از عبارت ()if استفاده میکنیم تا بررسی کنیم که آیا درخواستمان موفق بوده یا خیر و سپس طبق داده جدید عمل کنیم.

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

انواع داده جاوا اسکریپت

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

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

• اعداد. مثلا ۱۲۳، ۱۲۰.۵۰ و غیره
• رشته متنی. مثلا «جاوااسکریپت یک زبان برنامه‌نویسی محبوب است.»
• بولین. true یا false

علاوه بر این، دو نوع داده دیگر null و undefined وجود دارد که هر یک تنها یک مقدار را تعریف می کنند. به علاوه این انواع داده اولیه، جاوا اسکریپت از داده های ترکیبی که به عنوان object شناخته می شوند نیز پشتیبانی می کند.

ساختار جاوا اسکریپت

بخاطر داشته باشید که جاوا اسکریپت تفاوتی بین مقادیر integer و اعشاری قایل نمی شود. تمام اعداد در جاوا اسکریپت به عنوان مقادیر اعشاری شناخته می شوند. جاوااسکریپت اعداد را با استفاده از یک فرمت ۶۴ بیتی اعشاری با توسل به استاندارد IEEE 754 نمایش می دهد.

متغیرها در جاوا اسکریپت

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

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

چرا یادگیری HTML بسیار مهم است؟

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

نوع مقدار متغیرها در جاوا اسکریپت می تواند طی اجرای یک برنامه تغییر کرده و جاوا اسکریپت به صورت خودکار این مساله را مدیریت می کند.

محدوده متغیرها در جاوا اسکریپت

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

• متغیرهای سراسری: متغیر سراسری، میدان سراسری دارد بدین معنا که هرجایی در کد جاوا اسکریپت تعریف می شود.
• متغیرهای محلی: متغیر محلی تنها درون تابعی که تعریف شده قابل استفاده است. پارامترهای تابع همیشه برای آن تابع، محلی هستند.

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

<html>
   <body onload = checkscope();>   
      <script type = "text/javascript">
         <!--
            var myVar = "global";      // Declare a global variable
            function checkscope( ) {
               var myVar = "local";    // Declare a local variable
               document.write(myVar);
            }
         //-->
      </script>     
   </body>
</html>

نتیجه عبارت local خواهد بود.

نام متغیرها در جاوا اسکریپت

درحالیکه نامگذاری متغیرها در جاوا اسکریپت را انجام می دهید، موارد زیر را نیز در ذهن بسپارید:

• نبایستی از هیچ کلمه کلیدی رزرو شده در جاوا اسکریپت به عنوان نام یک متغیر استفاده کنید. این کلمات کلیدی در ادامه ذکر خواهند شد.
• نام های متغیر جاوا اسکریپت نبایستی با اعداد شروع شوند. بایستی با یک حرف یا یک کاراکتر زیرخط آغاز شوند. برای مثال 9gag نامعتبر و  wproket معتبر است.
• نام متغیر جاوا اسکریپت به بزرگی و کوچکی حروف حساس هستند. برای مثال، Name و name دو متغیر متفاوت محسوب می شوند.

کلمات رزرو شده جاوا اسکریپت

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

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

نقش عملگرها در جاوا اسکریپت چیست؟

برای بررسی عملگرها در جاوا اسکریپت، اجازه دهید عبارت ساده ۴ + ۵ برابر با ۹ را در نظر داشته باشیم. در اینجا ۴ و ۵ عملوند و + را عملگر می نامند. جاوا اسکریپت از انواع عملگرهای زیر پشتیبانی می کند.

• عملگرهای ریاضی
• عملگرهای مقایسه ای
• عملگرهای منطقی (یا نسبی)
• عملگرهای تخصیصی
• عملگرهای شرطی (یا سه ارزشی)

عملگرهای ریاضی

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

متغیرهای جاوااسکریپت: نوع داده و نام متغیر در جاوااسکریپت

فرض کنید که متغیر A مقدار ۱۰ و متغیر B مقدار ۲۰ را در خود جای داده اند

به خاطر داشته باشید که عملگر افزودن (+) با اعداد و همینطور رشته کار می کند. مثلا عبارت a + 10 مقدار “a10” خواهد داد.

مثال: کد زیر نشان می دهد که چگونه از عملگرهای ریاضی در جاوااسکریپت استفاده کنیم.

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var c = "Test";
            var linebreak = "<br />";
         
            document.write("a + b = ");
            result = a + b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a - b = ");
            result = a - b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a / b = ");
            result = a / b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a % b = ");
            result = a % b;
            document.write(result);
            document.write(linebreak);
         
            document.write("a + b + c = ");
            result = a + b + c;
            document.write(result);
            document.write(linebreak);
         
            a = ++a;
            document.write("++a = ");
            result = ++a;
            document.write(result);
            document.write(linebreak);
         
            b = --b;
            document.write("--b = ");
            result = --b;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>
      
      Set the variables to different values and then try...
   </body>
</html>

خروجی:

a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

عملگرهای مقایسه ای

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

فرض کنید که متغیر A مقدار ۱۰ و متغیر B مقدار ۲۰ را در خود جای داده است.

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

<html>
   <body>  
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
      
            document.write("(a == b) => ");
            result = (a == b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a < b) => ");
            result = (a < b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a > b) => ");
            result = (a > b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a != b) => ");
            result = (a != b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >= b) => ");
            result = (a >= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a <= b) => ");
            result = (a <= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      Set the variables to different values and different operators and then try...
   </body>
</html>

خروجی به این صورت است:

(a == b) => false 
(a < b) => true 
(a > b) => false 
(a != b) => true 
(a >= b) => false 
a <= b) => true
Set the variables to different values and different operators and then try...

عملگرهای منطقی

عملگر منطقی یکی از مهمترین عملگرها در جاوا اسکریپت است. جاوا اسکریپت از عملگرهای منطقی زیر پشتیبانی می کند. فرض کنید که A مقدار ۱۰ و متغیر B مقدار ۲۰ را در خود نگاه داشته است.

مثلا: کد زیر را بررسی کنید تا به شکل دقیقتری به عملکرد عملگرهای منطقی در جاوا اسکریپت پی ببرید.

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = true;
            var b = false;
            var linebreak = "<br />";
      
            document.write("(a && b) => ");
            result = (a && b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a || b) => ");
            result = (a || b);
            document.write(result);
            document.write(linebreak);
         
            document.write("!(a && b) => ");
            result = (!(a && b));
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

خروجی

(a && b) => false 
(a || b) => true 
!(a && b) => true
Set the variables to different values and different operators and then try...

عملگرهای بیتی

یکی از کاربردی‌ترین عملگرها در جاوا اسکریپت، جاوا اسکریپت از عملگرهای بیتی نیز پشتیبانی می‌کند. فرض کنید که A مقدار ۲ و B مقدار ۳ را در خود داشته باشد.

مثال

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

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 2; // Bit presentation 10
            var b = 3; // Bit presentation 11
            var linebreak = "<br />";
         
            document.write("(a & b) => ");
            result = (a & b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a | b) => ");
            result = (a | b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a ^ b) => ");
            result = (a ^ b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(~b) => ");
            result = (~b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a << b) => ");
            result = (a << b);
            document.write(result);
            document.write(linebreak);
         
            document.write("(a >> b) => ");
            result = (a >> b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

خروجی به صورت زیر خواهد بود:

(a & b) => 2 
(a | b) => 3 
(a ^ b) => 1 
(~b) => -4 
(a << b) => 16 
(a >> b) => 0
Set the variables to different values and different operators and then try...

عملگرهای تخصیصی

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

مثال زیر را در خصوص عملگرهای تخصیصی ملاحظه کنید:

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 33;
            var b = 10;
            var linebreak = "<br />";
         
            document.write("Value of a => (a = b) => ");
            result = (a = b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a += b) => ");
            result = (a += b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a -= b) => ");
            result = (a -= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a *= b) => ");
            result = (a *= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a /= b) => ");
            result = (a /= b);
            document.write(result);
            document.write(linebreak);
         
            document.write("Value of a => (a %= b) => ");
            result = (a %= b);
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

خروجی به شکل زیر خواهد بود

Value of a => (a = b) => 10
Value of a => (a += b) => 20 
Value of a => (a -= b) => 10 
Value of a => (a *= b) => 100 
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...

سایر عملگرها

دو عملگر دیگر به نام های عملگر شرطی و عملگر typeof وجود دارد که در زیر درباره آنها توضیح داده شده است.

عملگر شرطی (:?)

عملگر شرطی یکی دیگر از عملگرها در جاوا اسکریپت است که در ابتدا عبارت را بررسی و مقدار true یا false بودن آن را بررسی می کند سپس یکی از دو عبارت را بسته به نتیجه به دست آمده از شرط اجرا می کند.

مثال: کد زیر را برای درک بهتر عملکرد این عملگر مشاهده کنید.

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = 20;
            var linebreak = "<br />";
         
            document.write ("((a > b) ? 100 : 200) => ");
            result = (a > b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         
            document.write ("((a < b) ? 100 : 200) => ");
            result = (a < b) ? 100 : 200;
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

خروجی

((a > b) ? 100 : 200) => 200 
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

عملگر typeof

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

جاوا اسکریپت چیست؟

عملگر typeof برای number، string و boolean بودن بررسی صورت می دهد و در صورت صحیح بودن مقدار true باز می گرداند.

مثلا زیر را در همین رابطه ملاحظه کنید:

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var a = 10;
            var b = "String";
            var linebreak = "<br />";
         
            result = (typeof b == "string" ? "B is String" : "B is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         
            result = (typeof a == "string" ? "A is String" : "A is Numeric");
            document.write("Result => ");
            document.write(result);
            document.write(linebreak);
         //-->
      </script>      
      <p>Set the variables to different values and different operators and then try...</p>
   </body>
</html>

خروجی به صورت زیر خواهد بود:

Result => B is String 
Result => A is Numeric
Set the variables to different values and different operators and then try...

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

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

کاربرد جاوا اسکریپت

اهمیت جاوا اسکریپت در وب گردی

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

فعال کردن جاوا اسکریپت در کروم

برای فعال کردن جاوا اسکریپت در کروم بایستی به صورت زیر عمل کنید:

• مرورگر گوگل کروم را باز کنید و بر روی سه نقطه در بالای مرورگر کلیک کنید.
• گزینه Settings را از منوی باز شده انتخاب کنید.
• در منوی Settings گزینه Privacy and Security را انتخاب کنید.
• در بخش Privacy and Security بر روی گزینه Site Settings کلیک کنید.
• به پایین بروید و بر روی JavaScript کلیک کنید.
• از این بخش می‌توانید جاوا اسکریپت را روی گوگل کروم فعال یا غیرفعال کنید.

فعال کردن جاوا اسکریپت در فایرفاکس

برای فعال کردن جاوا اسکریگت در فایرفاکس به صورت زیر عمل کنید:

• موزیلا فایرفاکس را باز کنید و بر روی دکمه منو کلیک کنید (سه خط افقی).
• گزینه Options را از منوی باز شده انتخاب کنید.
• در منوی Options بر روی گزینه Privacy & Security کلیک کنید.
• به بخش Permissions بروید و گزینه JavaScript را بیابید.
• بر روی گزینه Enable JavaScript کلیک کنید.

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

فعال کردن جاوا اسکریپت در اپرا

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

برای فعال کردن جاوا اسکریپت در مرورگر اپرا به شکل زیر عمل کنید:

• مرورگر اپرا را باز کنید و بر روی دکمه منو کلیک کنید (آیکن اپرا).
• گزینه Settings را از منوی باز شده انتخاب کنید.
• در منوی Settings بر روی Advanced کلیک کنید.
• گزینه Site Settings از بخش Privacy and Securityکلیک کنید.
• گزینه JavaScript را بیابید.
• بر روی گزینه فعال‌سازی/غیرفعال‌سازی جاوا اسکریپت کلیک کنید.

فعال کردن جاوا اسکریپت در مرورگر Edge

برای فعال کردن جاوا اسکریپت در مرورگر Edge مایکروسافت به صورت زیر عمل کنید:

• مرورگر مایکروسافت اج Edge را باز کرده و بر روی دکمه منو کلیک کنید (سه نقطع افقی).
• گزینه Settings را از منوی باز شدنی انتخاب کنید.
• در منوی Settings گزینه Cookies and Permissions را انتخاب کنید.
• به پایین بروید و گزینه JavaScript را انتخاب کنید.
• از این بخش می‌توانید جاوا اسکریپت را فعال یا غیرفعال کنید.

فعال کردن جاوا اسکریپت در مرورگرهای اندروید

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

فعال کردن جاوا اسکریپت در دستگاه‌های iOS

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

• در دستگاه iOS بخش Settings اپ را باز کنید.
• به پایین بروید و سافاری را انتخاب کنید.
• در بخش تنظیمات سافاری، می‌توانید جاوا اسکریپت را فعال یا غیرفعال کنید.

تست بعد از فعال کردن جاوا اسکریپت

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

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

• کش و کوکی مرورگر را به صورت کامل پاک کنید.
• افزونه‌های نصب شده روی مرورگر را غیرفعال کنید.
• مطمئن شوید که از آخرین نسخه مرورگر استفاده می‌کنید.

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

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

نود جی اس NodeJS یک محیط زمان اجرای چندسکویی جاوا اسکریپت و متن‌باز است که کدهای جاوا اسکریپت را خارج از یک مرورگر اجرا می‌کند. NodeJs از موتور V8 جاوا اسکریپت که در اصل توسط گوگل برای استفاده در کروم توسعه داده شد استفاده می‌کند تا کدها را کامپایل و اجرا کند.

نود جی اس توسط Ryan Dahl در سال ۲۰۰۹ ساخته و در سال ۲۰۱۰ منتشر شد. هدف Dahl ساخت یک محیط جاوا اسکریپت سمت سرور بود تا اینکه بتواند چندین ارتباط را به صورت همزمان و بدون محدودیات قبلی مدیریت کند.

نود جی اس چگونه کار می‌کند؟

Node.js معماری رویدادمحور دارد که برای مدیریت عملیات‌های متقارن ایده‌آل است. با کمک Node.js، توسعه‌دهندگان می‌توانند کد سمت سرور را به زبان برنامه‌نویسی جاوا اسکریپت بنویسند که باعث ساده‌سازی روند توسعه و بهبود استفاده‌پذیری کدها می‌شود. علاوه بر این، Node.js امکان ساخت نرم‌افزارهای real-time مانند برنامه‌‌های چت و پلتفرم‌های بازی آنلاین ایجاد می‌کند.

مزایای استفاده از Node.js

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

کاربرد جاوا اسکریپت

علاوه بر این، نود جی اس، برای توسعه برنامه‌های real-time که نیازمند به‌روزرسانی فوری و ارتباط لحظه‌ای بین کاربر و سرور هستند، ایده‌آل است. به دلیل طبیعت رویداد محور و پشتیبانی از WebSocket، به گزینه‌ای ایده‌آل برای ساخت برنامه‌هایی مانند سرور چت، سکوهای بازی آنلاین و… تبدیل می‌شود.

موارد استفاده از نود جی اس

از Node.js معمولا برای ساخت وب سرور استفاده می‌شود چرا که حجمی کم داشته و امکان مدیریت موثر ارتباطات همزمان را دارد. فریمورک‌های محبوب مانند Express.js ابزارهایی را برای ساخت برنامه‌های مقیاس‌پذیر و قدرتمند در اختیار توسعه‌دهندگان قرار می‌دهند.

با کمک Node.js، توسعه APIها بسیار ساده می‌شود. توسعه‌دهندگان امکان نوشتن کد سمت سرور به زبان برنامه‌نویسی جاوا اسکریپت را خواهند داشت. با کمک ابزارهایی مانند Express.js امکان ساخت RESTful API را خواهید داشت.

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

ابزارها و فریمورک‌های نود جی اس

Express.js: یک فریمورک کوچک برای Node.js است که مجموعه‌ای کامل از ویژگی‌ها برای ساخت برنامه‌های تحت وب و API را در اختیار توسعه‌دهندگان می‌دهد. این فریمورک از میان‌افزار و قابلیت‌های مسیریابی پشتیبانی می‌کند.

Socket.io: یک کتابخانه جاوا اسکریپت است که امکان ارتباط real-time بین کاربران و سرور را ایجاد می‌کند. این کتابخانه از فناوری WebSocket برای برقراری ارتباط پایدار استفاده می‌کندکه اجازه مبادله فوری داده و به‌روزرسانی آنی در نرم‌افزارهای real-time را می‌دهد.

ساختار جاوا اسکریپت

Nest.js: یک فریمورک Node.js است که برای ساخت برنامه‌های سمت سرور مقیاس‌پذیر و موثر استفاده می‌شود. این فریمورک از تایپ اسکریپت استفاده می‌کند تا نگهداری و خوانایی کدها افزایش یابد.

چالش‌های استفاده از نود جی اس

جهنم کال‌بک

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

پیچیدگی خطایابی

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

آینده نود جی اس

روز به روز، Node.js دارای ویژگی‌های جدیدتر، بهبودهای بیشتر و نوآوری‌های شگفت‌انگیزتر می‌شود. ابزارهای جذابی مانند GraphQL و WebAssembly آینده توسعه Node.js را شکل می‌دهند.

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

ساده‌ترین ساختار جاوا اسکریپت و شیوه استفاده از جاوا اسکریپت، استفاده از آن در سندهای HTML است. روش بهتر، include کردن فایل‌های جاوا اسکریپت در سند HTML است. ساختار جاوا اسکریپت با یک تگ <script> آغاز شده و با یک تگ بسته <script/> خاتمه می‌یابد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Syntax</title>
    <script>
        // JavaScript code goes here
    </script>
</head>
<body>
    <!-- HTML content -->
</body>
</html>

جاوا اسکریپت یه زبان برنامه‌نویسی مبتنی بر اسکریپت است و اسکریپت نیز در اصل مجموعه‌ای از دستورات برای کامپیوتر می‌باشد. این دستورات یا به شکل statement یا expression بیان می‌شوند.

کاربرد جاوا اسکریپت

statement: دستورات تکی هستند که یک عمل را اجرا می‌کنند. statement با یک ; به پایان می‌رسند.

let x = 5; // Declaration statement
console.log(x); // Function call statement

expression: این دسته از دستورات، مقداری را تولید می‌کنند و می‌توانند ترکیبی از متغیرهاو عملگرها باشند.

let result = x + 10; // Addition expression

متغیرها و انواع داده

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

let name = "John"; // String
let age = 25; // Number
const PI = 3.14; // Constant

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

عملگرها در جاوا اسکریپت

عملگرها در جاوا اسکریپت، نشانه‌هایی هستند که عملیاتی را بر روی متغیرها و مقادیر اجرا می‌کنند. این عملگرها امکان اجرا عملیات ریاضی، اختصاص‌دهی، مقایسه و عملیات منطقی را دارند.

let sum = 5 + 3; // Addition
let isAdult = age >= 18; // Comparison
let isLoggedIn = true;
let canAccessResource = isLoggedIn && isAdult; // Logical AND

جریان کنترل در ساختار جاوا اسکریپت

دستورات شرطی در زبان برنامه‌نویسی جاوا اسکریپت به توسعه‌دهندگان این اجازه را می‌دهند تا کدهای متفاوتی را بر اساس شرایط مشخصی اجرا کنند. معمول‌ترین نوع دستورات شرطی if و else if و else است.

let temperature = 25;

if (temperature > 30) {
    console.log("It's hot outside!");
} else if (temperature > 20) {
    console.log("It's a pleasant day.");
} else {
    console.log("It's cold.");
}

در جاوا اسکریپت، حلقه‌ها، عملیاتی را تکرار می‌کنند. دستوراتی که حلقه ایجاد می‌کنند مانند for و while و do-while هستند.

// For loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// While loop
let counter = 0;
while (counter < 5) {
    console.log(counter);
    counter++;
}

// Do-while loop
let num = 0;
do {
    console.log(num);
    num++;
} while (num < 5);

دستور switch به توسعه‌دهندگان اجازه می‌دهد تا عملیات متفاوتی را بر اساس شرایط متفاوت اجرا کنند.

توابع در ساختار جاوا اسکریپت

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

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("John"); // Output: Hello, John!

آرایه و اشیا در جاوا اسکریپت

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

راهنمای کامل لینک دهی در HTML

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

let person = {
    name: "Alice",
    age: 30,
    isStudent: false,
    greet: function() {
        console.log("Hello, " + this.name + "!");
    }
};

console.log(person.name); // Output: Alice
person.greet(); // Output: Hello, Alice!

در مقابل آرایه‌ها برای ذخیره‌سازی چندین مقدار در یک متغیر استفاده می‌شود.

let colors = ["red", "green", "blue"];
console.log(colors[0]); // Output: red

colors.push("yellow"); // Add an element to the end
console.log(colors); // Output: ["red", "green", "blue", "yellow"]

بهترین روش توسعه با کمک ساختار جاوا اسکریپت

• همیشه از نام‌های معنادار برای متغیرها و توابع خود استفاده کنید و از فاصله‌گذاری و تو رفتگی کدها به جهت بالا بردن خوانایی کد خود استفاده کنید.
• تا حد امکان از متغیرها سراسری فراری باشید. متغیرهای سراسری می‌توانند منجربه تداخل در نام‌گذاری‌ها شده و نگهداری کد را سخت‌تر کنند.
• در صورت امکان از حالت strict یا سخت‌گیرانه استفاده کنید. استفاده از این روش باعث می‌شود که بتوانید خطاهای کدنویسی را بهتر کشف کرده و عیب‌یابی کدها نیز راحت‌تر خواهد شد.
• از درج توضیحات در کدهای خود غافل نشوید. این کار باعث می‌شود که توسعه کد شما برای دیگران بسیار سریع‌تر و بی‌دردسرتر باشد.

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