دسته: برنامه نویسی

مقالات درباره زبان‌های برنامه نویسی؛ جاوا اسکریئت، PHP و HTML و CSS و کتابخانه‌هایی مانند جی‌کوئری و …

  • مقدمه‌ای بر HTML: تگ‌ HTML و عملکرد آن به زبان ساده

    مقدمه‌ای بر HTML: تگ‌ HTML و عملکرد آن به زبان ساده

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

    راحت ترین راه برای یادگیری، استفاده از چند مثال است.

    <h1>This is the title to my document</h1>

    می توانید ببینید که <h1> و <h1/> متن this is the title to my document را احاطه کرده است. در واقع می بینید که HTML چگونه عمل می کند. می تواند تگ باز شونده داشته باشد که اطلاعاتی درون آن جای می گیرد یا تگ های بیشتری که داخل آن قرار می گیرند. در این مورد ما یک تگ h1 داریم که تگ تیتر محسوب می شود: برای بزرگترین عنوان صفحه یعنی عنوان به کار می رود.

    ساختار سند HTML و معرفی بخش‌های اصلی آن

    این تکه متن در واقع بزرگترین و ضخیم ترین نوع متن در یک صفحه HTML محسوب می شود چرا که مرورگرها h1 را اینطور توصیف می کنند، این تگ باعث ایجاد اهمیت متن درون آن در صفحه می شود. اما قضیه فراتر از این حرفهاست. تنها مرورگرها نیستند که وبسایت ها را می خوانند.

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

    لینک‌های Absolute، لینک‌های Relative و لینک‌های ID

    یک تگ، چه بازشونده و چه بسته شونده باشند با استفاده از براکت احاطه می شوند؛ < و >. تگ های بسته شونده HTML همیشه یک اسلش / دارند که پس از براکت بازشونده قرار می‌گیرند؛ بنابراین تگ بسته شونده h1 به شکل <h1/> می باشد.

    مواردی هم وجود دارد که به عنوان تگ های خودبسته‌شونده یا تگ های void یا خالی طبقه‌بندی می شوند بدین معنا که خودشان هم باز و بسته شونده هستند. به عنوان نمونه می توانید این تگ را در نظر داشته باشید </ input>. این اسلش در انتها به معنای خودبسته‌شونده بودن آن است. دقت داشته باشید که وجود این اسلش نیز اختیاری است. بنابراین درج <input> نیز صحیح است.

    تگ ها نیز به صورت مشخصی باز و بسته می شوند. جدیدترین تگ باز شده بایستی اولین مورد بسته شونده باشد. برای مثال، اگر یک h1 بعد از div داشته باشید، تگ h1 بایستی در ابتدا بسته شود.

    <div>
      <h1> Hi </h1>
    </div>

    انواع تگ ها

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

    • h1 تا h6 – سرآیندها. اینها شش رده از تیترها و زیرتیترهایی هستند که می توانیم در یک صفحه html از آنها استفاده کنیم. در واقع h2 یک زیرتیتر برای تیتر h1 محسوب می شود. یک h3 نیز زیرتیتر برای تیتر h2 است. برخی متخصصین بر این معتقدند که هر صفحه بایستی تنها یک تگ h1 داشته باشد. البته اینها قراردادی هستند و قانونی برای محدودیت در این زمینه وجود ندارد.
    • p – پاراگراف. متن داخل سند html را بایستی داخل تگ p قرار داد. تنها متن داخل تگ p جای می گیرد. هر یک از این پاراگراف ها یک تگ p محسوب می شوند. مثلا: <p>test is test.</p>
    • a – لینک. تگ a در واقع لینک به جایی دیگر است. هر تگ a نیازمند مقدار مقصدی است که لینک شما را به آنها هدایت می کند.
    • div – مخفف بخش یا division. در حقیقت div عامل تقسیم بندی صفحه است. به خودی خود کاری انجام نمی دهد و تگ div، نگهدارنده کلی برای دسته بندی دیگر عناصر با هم است. در یک سند HTML تعداد زیادی تگ div می بینید. همراه با CSS بسیار مفید هستند. به صورت کلی، اگر می خواهید وبسایتی داشته باشید که لیستی از پست های وبلاگ دارد که هریک پاراگراف، عنوان، تصویر و … دارد بایستی هر پست را در یک div یا دیگر نوع تگ نگهدارنده قرار دهید.
    • span – نگهدارنده تکه های کوچک متن. اگر یک div تقسیم‌کننده و نگهدارنده صفحه است، span نگهدارنده بخش‌ها محسوب می شود. این تگِ شیوه نمایش چیزی را تغییر نمی دهد اما به شما اجازه می دهد تا با کمک CSS و جاوااسکریپت متن را به شکلی متفاوت از نسخه ابتدایی اش نشان دهید.
    • ol، ul و li – هر دوی ol و ul لیست را نشان می دهند. ul لیستی نامرتب است: لیستی است که می تواند بهم بخورد و هنوز هم همان معنای ابتدایی را داشته باشد. مثلا برای لیست کردن بازیگران سینما می توانید از این تگ استفاده کنید. تگ ol لیست سازماندهی شده و مرتب است: موردی که در ابتدا ظاهر می شود از اهمیت برخوردار است. مثلا برای لیست کردن ۱۰ شهر پرجمعیت ایران بایستی از این تگ استفاده کنید و تغییر ترتیب باعث بهم خوردن لیست می شود.
    • button – دکمه. دکمه را می توان در جاوااسکریپت مورد استفاده قرار داد تا با کلیک کاربر بر روی آن باعث اتفاقی شود مثلا در هنگام پر کردن فرم اطلاعات، دکمه درون صفحه می تواند باعث اخطار اشتباه در پر کردن فیلدها شود.
    • img – تصویر. از این تگ برای بارگزاری تصاویر در صفحه استفاده می شود. این تگ می تواند اندکی گیچ کننده باشد چرا که می توانید از CSS نیز برای نمایش تصاویر استفاده کنید. تفاوت کلیدی در این است که وقتی که تصویر جدای از محتوا می شود، مانند یک دیاگرام که داده هایی که درباره آن صحبت می کنید را نشان می دهد یا تصویری که چیزی از مقاله شما را به نمایش می گذارد، بایستی از img استفاده کنید.
      اگر تصویر پس زمینه جذاب یا چیزی برای زیبایی وبسایت تان است، از CSS استفاده کنید. یک تگ img بایستی src داشته باشد که می گوید آن تصویر از کجا می آید و خصوصیت alt که به صفحه خوان ها می گوید این تصویر در چه رابطه است تا از این طریق تصویر همچنان برای نابینایان یا کم بینایان مفید باشد و البته همینطور برای موتورهای جستجو مانند گوگل و بینگ. img همواره تگ خودبسته‌شونده است. مثلا:

      <img src="http://www.placepuppy.net/100/100" alt="an adorable puppy" />
    • input – ورودی های مرورگر. بعضی اوقات نیاز دارید تا ورودی را از کاربر دریافت کنید. خوشبختانه مرورگرها در این زمینه کاملا آماده و قوی هستند. چندین نوع ورودی وجود دارد که می توانید از آنها استفاده کنید. یکی از معمول ترین نوع ورودی ها، ورودی متنی است مثلا
      همچنین می توانید ورودی هایی با نوع اعداد، تاریخ، رنگ، چک باکس، دکمه رادیویی و … داشته باشید.
    • textarea – مشابه یک ورودی input است اما برای متن های طولانی استفاده می شود. با استفاده از این تگ می توانید متن هایی طولانی بنویسید و از اینتر برای درج خط جدید نیز استفاده کنید. با وجود اینکه هیچوقت چیزی داخل تگ textarea قرار نمی گیرد اما یک تگ خودبسته شونده نیست!
    • select و option – برخی اوقات ممکن است که بخواهید انتخاب کاربر را به گروه مشخصی از گزینه ها محدود کنید. اینکه از چه کشوری هستید، در چه ماهی به دنیا آمدید و … select ورودی کاربرپسندی است که یک کاربر می تواند گزینه ای را از منوی بازشونده انتخاب کند. یک option یکی از گزینه های در دسترس تلقی می شود. هر گزینه یا option نیازمند مقداری است که اگر کاربر آن گزینه را انتخاب کند به سرور ارسال می شود. چیزی که داخل option قرار دارد به کاربر نشان داده می شود. مثلا:
      <select>
        <option value="seattle">Seattle</option>
        <option value="portland">Portland</option>
        <option value="san-francisco">San Francisco</option>
      </select>

       

    • form – گروهی از تگ های html که داده هایی را از یک کاربر جمع آوری می کنند. این فرم ترکیبی از تگ های input، textarea و select است. سپس می توانید از این عنصر form برای ارسال داده ها به سرورتان استفاده کنید. تگ form خودش چیزی را به نمایش نمی گذارد؛ تنها یک نگهدارنده برای تگ های دیگر است. مثلا:
      <form>
        <input />
        <textarea></textarea>
      </form>

       

    • table، tr و td – کاربرد آن به مانند ساخت جدول در اکسل و ورد است. اگر جدولی از داده دارید، بهترین روش نمایش آن به این طریق است. table نگهدارنده ای برای کل جدول است، tr نمایانگر ردیف و td نمایانگر یک سلول در جدول است.
      <table>
        <tr>
          <td>(0,0)</td>
          <td>(1,0)</td>
        </tr>
        <tr>
          <td>(0,1)</td>
          <td>(1,1)</td>
        </tr>
      </table>

    توضیحات

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

    ۷ اشتباه رایج برنامه‌نویسان در نوشتن کد HTML و CSS

    اینجا جایی است که توضیح نویسی وارد صحنه می شود. می توانید توضیحات کوتاهی برجای گذارید که کامپیوتر شما کاری به کار آنها ندارد و نادیده شان می گیرد. در HTML روشی که توضیح نویسی را انجام می دهیم به این صورت است:

    <– your comments go here –!>. توضیحاتتان را بین دو علامت <– و –!> قرار دهید تا بعدا متوجه دلیل نگارش این بخش از کدتان شوید. البته در نوشتن توضیحات زیاده روی نکنید.

  • چارچوب بوت استرپ چیست؟

    چارچوب بوت استرپ چیست؟

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

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

    محبوب‌ترین زبان برنامه نویسی، سرور، CMS و ابزارک اجتماعی

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

    از نسخه سوم بوت‌استرپ توجه ویژه ای به شیوه نمایش این چارچوب در گوشی های موبایل شد. اینطور انتظار می رود که از سال ۲۰۲۰، دستگاه های بی سیم و گوشی های تلفن همراه دو سوم از ترافیک اینترنت را به خود اختصاص دهند.

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

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

    بسیار خب، اما چرا چارچوب بوت استرپ تا این اندازه محبوب است؟ چه امکانات و قابلیت هایی دارد که تا این اندازه این چارچوب برنامه نویسی را محبوب کرده است؟

    • متن باز است – دانلود و استفاده از بوت استرپ در پروژه تان کاملا رایگان است.
    • استفاده از آن آسان است – هر فردی می تواند تنها با دانستن HTML و CSS کارش را با بوت استرپ آغاز کند.
    • سیستم شبکه ای قدرتمند – بوت استرپ از سیستم شبکه بندی ۱۲ ستونی قدرتمند و فلکس باکس استفاده می کند تا با استفاده از این امکان بتوان لایه بندی جذاب و کاملا واکنشگرا را برای تمام دستگاه ها ایجاد کرد.
    • واکنشگرایی – نمی توان این واقعیت را انکار کرد که ایجاد و ساخت وبسایت واکنشگرا با استفاده از بوت استرپ تا چه اندازه آسان است. واکنشگرایی عامل بسیار مهمی برای ایجاد تجربه ای عالی برای کاربر است. کاربر بایستی تجربه مرور جذاب و آسانی از وبسایت تان در هر دستگاهی داشته باشد. با استفاده از کلاس های واکنشگرای بوت استرپ می توانید طراحی واکنشگرایی ایجاد کنید.
    • ابتدا موبایل – بوت استرپ به گوشی های هوشمند اولویت می دهد. این بدان معناست که شما وبسایت تان را از پایه بر اساس شیوه نمایش در گوشی های هوشمند می سازید و سپس آن را به مقیاس صفحات بزرگتر در می آورید.
    • لیست گسترده ای از کامپوننت ها – شامل کامپوننت هایی جذاب و کاملا کاربردی از پیش ساخته است که جادادن آنها در یک وبسایت بسیار آسان است و سفارشی‌سازی آنها نیز کاریست سهل.
    • پایداری – راه حلی یکپارچه و تمیز برای ساخت رابط کاربری در اختیار توسعه دهندگان قرار می دهد.
    • پشتیبانی از مرورگرها – بوت استرپ از تمام مرورگرهای محبوب و مدرن پشتیبانی می کند.
    • پشتیبانی در مقابل مشکلات – بوت استرپ از پشتیبانی جامعه بزرگی از توسعه دهندگان بهره می جوید. بنابراین هرگاه دچار مشکلی شدید به آسانی خواهید توانست مشکل خود را حل کنید. در حال حاضر بوت استرپ بر روی گیت هاب میزبانی، توسعه و نگهداری می شود.

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

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

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

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

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

    گاهی اوقات نیاز است که کد جاوا اسکریپت به وردپرس خود اضافه کنید. برای قرار دادن کد جاوا اسکریپت در وردپرس روش‌های مختلف و متنوعی وجود دارد. می‌توانید این کد را از طریق فایل 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 برای تبدیل تمام کاراکتر به حروف بزرگ به کار می رود، بنابراین بزرگی کوچکی کاراکتر در زمان مرتب سازی نادیده گرفته می شود.

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

  • راهنمای کامل درک ساختار HTML

    راهنمای کامل درک ساختار HTML

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

    به صورت معمول، ساختار HTML با تعریف doctype آغاز می‌شود و در ادامه تگ <html> به عنوان ریشه‌ای‌ترین عنصر سند می‌آید. داخل تگ html، دو بخش اصلی به نام‌های <head> و <body> وجود دارد.

    تعریف Doctype در ساختار HTML

    تعریف doctype نسخه html که استفاده می‌شود را تعریف می‌کند و اطمینان حاصل می‌کند که مرورگرهای وب این کد را به درستی خواهند خواند. شیوه تعریف doctype به صورت زیر است:

    <!DOCTYPE html>
    

    عناصر کلیدی ساختار HTML

    تگ <html>: این تگ عنصر ریشه‌ای سند HTML است و تمامی عناصر دیگر را در خود جای می‌دهد.

    تگ <head>: این تک شامل متاداده‌ها و لینک‌هایی به منابع بیرونی مانند استایل و اسکریپت است.

    تگ <title>: این تگ عنوان صفحه جاری را مشخص می‌کند. این عنوان در نوار عنوان یا تب مرورگر نمایش داده می‌شود.

    تگ <meta>: تگ‌های <meta> متاداده‌هایی را درباره سند حاضر HTML ارایه می‌کند مثلا کدگذاری کاراکترها، تنظیمات مربوط به viewport و …

    تگ <body>: این تگ شامل محتوای اصلی صفحه وب است؛ این محتوا شامل متن، تصاویر و عناصر چندرسانه‌ای می‌شوند.

    عناصر ساختاری در سند HTML

    HTML عناصر ساختاری متنوعی را برای سازماندهی محتوا در یک صفحه وب در اختیار توسعه‌دهنده وب قرار می‌دهد.

    هدرها: هدرها یا تیترها با کمک تگ <h1> به عنوان بزرگترین تیتر تا <h6> به عنوان کوچکترین تیتر تعریف می‌شوند.

    پاراگراف: برای نمایش پاراگراف متن از تگ <p> استفاده می‌شود.

    لیست: برای نمایش لیست‌های مرتب از تگ <ol> و برای نمایش لیست‌های غیرمرتب از تگ <ul> استفاده می‌شود.

    عناصر معنایی در ساختار HTML

    تگ‌های <div> و <span>: از این نوع تگ‌ها به عنوان نگهدارنده عمومی برای گروه‌بندی و استایل‌دهی به عناصر استفاده می‌شود.

    تگ‌های <header>، <footer>، <nav>، <article> و <section>: عناصر معنایی مانند این تگ‌ها معنای ساختاری به بخش‌های مختلف صفحه HTML ما می‌دهند.

    بهترین استاندارد برای ساختار HTML

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

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

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

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

    ابزارهای مناسب برای ایجاد ساختار HTML

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

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

    IDEها: محیط‌های توسعه مانند IntelliJ IDEA و Eclipse ابزارهای پیشرفته‌ای برای توسعه وب مانند تکمیل کد و عیب‌یابی را به توسعه‌دهندگان پیشنهاد می‌دهند.

    اشتباهات متداول در ساختار HTML

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

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

    نحوه استفاده از جاوا اسکریپت در HTML

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

    اهمیت بررسی اعتبار ساختار HTML

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

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

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

    شرط 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 در جاوا اسکریپت

    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 دو متغیر متفاوت محسوب می شوند.

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

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

    abstractelseinstanceofswitch
    booleanenumintsynchronized
    breakexportinterfacethis
    byteextendslongthrow
    casefalsenativethrows
    catchfinalnewtransient
    charfinallynulltrue
    classfloatpackagetry
    constforprivatetypeof
    continuefunctionprotectedvar
    debuggergotopublicvoid
    defaultifreturnvolatile
    deleteimplementsshortwhile
    doimportstaticwith
    doubleinsuper 
  • عملگرها در جاوا اسکریپت: عملگرهای منطقی، ریاضی و مقایسه‌ای

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

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

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

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

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

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

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

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

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

    شمارهعملگر و توضیح
    ۱+ (افزودن)
    افزودن دو عملوند
    مثلا: A + B مقدار ۳۰ را خواهد داد
    ۲– (منها)
    منهای عملوند دوم از اول
    مثلا: A-B مقدار ۱۰- خواهد داد
    ۳* (ضرب)
    ضرب دو عملوند
    مثلا: A*B  مقدار ۲۰۰ خواهد داد
    ۴/ (تقسیم)
    تقسیم مقسوم توسط مقسوم علیه
    مثلا: B/A مقدار ۲ خواهد داد
    ۵% (باقیمانده)
    مقدار صحیح باقیمانده حاصل از تقسیم دو عدد را می دهد
    مثلا: B%A مقدار ۰ خواهد داد
    ۶++ (فزاینده)
    مقدار یک عدد صحیح را یک عدد افزایش می دهد
    مثلا ++A مقدار ۱۱ خواهد داد
    ۷— (کاهنده)
    مقدار یک عدد صحیح را یک عدد کاهش می دهد
    مثلا –A مقدار ۹ خواهد داد

    به خاطر داشته باشید که عملگر افزودن (+) با اعداد و همینطور رشته کار می کند. مثلا عبارت 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 مقدار ۲۰ را در خود جای داده است.

    شمارهعملگر و توضیح
    ۱ == (برابری)
    بررسی می کند که آیا مقدار دو عملوند برابر هستند یا خیر، سپس شرط صحیح می شود
    مثلا: (A==B) مقدار true نمی دهد
    ۲=! (نابرابر)
    بررسی می کند که آیا دو عملوند برابر هستند یا خیر، سپس در صورت عدم برابری مقدار true باز میگرداند
    مثلا: (A!=B) مقدار true می دهد
    ۳< (بزرگتر از)
    بررسی می کند که آیا مقدار عملوند سمت چپ بزرگتر از مقدار عملوند راست باشد و در این صورت مقدار true می دهد
    مثلا: (A>B) برابر با true است
    ۴> (کوچکتر از)
    بررسی می کند که آیا مقدار عملوند سمت چپ کوچکتر از مقدار عملوند راست باشد و در این صورت مقدار true می دهد
    مثلا: (A<B) برابر با true نیست
    ۵=< (بزرگتر یا مساوی با)
    بررسی می کند که آیا مقدار عملوند سمت چپ بزرگتر و مساوی با مقدار عملوند راست باشد و در این صورت مقدار true می دهد
    مثلا: (A>=B) برابر با true نیست
    ۶=> (کوچکتر یا مساوی با)
    بررسی می کند که آیا مقدار عملوند سمت چپ کوچکتر و مساوی با مقدار عملوند راست باشد و در این صورت مقدار true می دهد
    مثلا: (A<=B) برابر با true است

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

    <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 مقدار ۲۰ را در خود نگاه داشته است.

    شمارهعملگر و توضیح
    ۱&& (AND منطقی)
    اگر هر دو عملوند غیرصفر باشند، سپس مقدار شرط true خواهد شد.
    مثلا: (A && B) مقدار true خواهد داد
    ۲|| (OR منطقی)
    اگر یکی از دو عملوند غیرصفر باشند مقدار true خواهد داد.
    مثلا: (A && B) مقدار true خواهد داد
    ۳! (NOT منطقی)
    وضعیت منطقی عملوند خود را نقیض خواهد کرد. اگر شرط true باشد سپس این عملگر شرط را false خواهد کرد
    مثلا: (A&&B)! مقدار false خواهد داد

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

    <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 مقدار ۳ را در خود داشته باشد.

    شمارهعملگر و توضیح
    ۱& (AND بیتی)
    عملیات AND بولینی را بر هر بیت از اعداد صحیح اعمال می کند.
    مثلا: (A&B) مقدار ۲ می دهد.
    ۲| (OR بیتی)
    عملیات OR بولینی را بر هر بیت از اعداد صحیح صورت می دهد.
    مثلا: (A|B) مقدار ۳ می دهد.
    ۳^ (XOR بیتی)
    عملیات OR انحصاری بولینی را بر روی هر بیت از اعداد انجام می دهد. OR انحصاری بدین معناست که یا عملوند اول true باشد یا دوم، اما نه هر دو.
    مثلا: (A^B) مقدار ۱ خواهد داد.
    ۴~ (نقیض بیتی)
    این عملگر تمام بیت ها را نقیض خواهد کرد.
    مثلا: (B~) مقدار ۴- دارد.
    ۵>> (شیفت به چپ)
    این عملگر تمام بیت های اولین عملوند را به اندازه عدد دومین عملوند به سمت چپ حرکت خواهد داد. بیت های جدید با مقدار صفر پر خواهند شد. جابجایی یک مقدار به سمت چپ به اندازه یک موقعیت، برابر با ضرب آن عدد در ۲ و جابجایی ۲ موقعیت برابر با ضرب در ۴ و همینطور … می باشد.
    مثلا: (A<<1) مقدار ۴ می دهد.
    ۶<< (شیفت به راست)
    عملگر شیفت به راست دودویی. مقدار عملوند چپ را به تعداد عملوند دوم به سمت راست جابجا خواهد کرد.
    مثلا: (A>>1) برابر با مقدار ۱ است.
    ۷<<< (شیفت به راست با مقدار صفر)
    این عملگر درست مانند عملگر << است جز اینکه بیت های جابجا شده در سمت چپ همواره مقدار صفر خواهند بود.
    مثلا: (A>>>1) مقدار ۱ خواهد داد.

    مثال

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

    <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...

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

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

    شمارهعملگر و توضیح
    ۱= (تخصیصی ساده)
    مقادیر را از طریف عملوندهای سمت راست به عملوند سمت چپ منتقل می کند.
    مثلا: C=A+B مقدار A+B را به متغیر C تخصیص خواهد داد.
    ۲=+ (افزودن و تخصیص)
    عملوند راست را به عملوند چپ افزوده و نتیجه را به عملوند سمت چپی انتقال می دهد.
    مثلا: C+=A برابر است با C=C+A
    ۳=- (کسر کردن و تخصیص)
    عملوند راست را از عملوند چپ کسر کرده و نتیجه را به عملوند سمت چپی انتقال می دهد.
    مثلا: C-=A برابر است با C=C-A
    ۴=* (ضرب کردن و تخصیص)
    عملوند راست را در عملوند چپ ضرب کرده و نتیجه را به عملوند سمت چپی انتقال می دهد.
    مثلا: C*=A برابر است با C=C*A
    ۵=/ (تقسیم کردن و تخصیص)
    عملوند چپ را بر عملوند راست تقسیم کرده و نتیجه را به عملوند سمت چپی انتقال می دهد.
    مثلا: C/=A برابر است با C=C/A
    ۶=% (باقیمانده و تخصیص)
    باقیمانده حاصل تقسیم دو عملوند را به دست آورده و نتیجه را به عملوند سمت چپی انتقال می دهد.
    مثلا: C%=A برابر است با C=C%A

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

    <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 بودن آن را بررسی می کند سپس یکی از دو عبارت را بسته به نتیجه به دست آمده از شرط اجرا می کند.

    شمارهعملگر و توضیح
    ۱: ? (شرطی)
    اگر شرط صحیح باشد ? مقدار X : در غیر این صورت مقدار Y

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

    <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...