به روز رسانی رابط کاربری ui (UI) با جاوا اسکریپت

چگونه با استفاده از جاوا اسکریپت رابط کاربری صفحه وب را تغییر دهیم؟

با استفاده از متدهای جاوا اسکریپت و DOM برای افزودن یک تگh1 به پروژه آغاز میکنیم.

ویرایشگر کد خود را باز کنید و یک فایل index.html جدید ایجاد کنید. داخل فایل HTML کد زیر را اضافه کنید:

<html>
  <body>
    <div>
   </div>
 </body>
</html>

برای اینکه بعدا بتوانید تغییر و به روزرسانی را در المان divانجام دهید به آن یک شناسه id منحصر به فرد بدهید :

<html>
  <body>
    <div id=&quotapp&quot></div>
  </body>
</html>

برای نوشتن جاوا اسکریپت در فایل HTML خود، یک تگ script اضافه کنید:

<html>
  <body>
    <div id=&quotapp&quot></div>
    <script type=&quottext/javascript&quot>
  </body>
</html>

حالا در داخل تگ script می توانید از متد getElementById()استفاده کنید. برای انتخاب عنصر <div> توسط شناسه id آن:

<html>
  <body>
    <div id=&quotapp&quot></div>
    <script type=&quottext/javascript&quot>
      const app = document.getElementById('app');
    
  </body>
</html>

می توانید برای ایجاد یک عنصر <h1> جدید به استفاده از متدهای DOM ادامه دهید:

<html>
  <body>
    <div id=&quotapp&quot></div>
    <script type=&quottext/javascript&quot>
      // انتخاب عنصر دیو با آیدی اپ
      const app = document.getElementById('app');
 
      // ایجاد یک المان هدر با نمره 1
      const header = document.createElement('h1');
 
      // ایجاد یک گره متنی جدید برای عنصر هدر با نمره 1
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
 
      // متن را به عنصر هدر نمره یک اضافه کنید
      header(headerContent);
 
      // Place the H1 element inside the div
      app(header);
    
  </body>
</html>

برای اطمینان از اینکه همه چیز کار می کند، فایل HTML خود را در مرورگر انتخابی خود باز کنید. شما باید تگ h1 را ببینید که می گوید:

'Develop. Preview. Ship.'

من در کدپن یک سند با همین محتویات ایجاد کردم:

https://codepen.io/seyedahmaddv/pen/GRLNGPX

https://codepen.io/seyedahmaddv/pen/GRLNGPX

توضیح کد بالا:در سند html یک عنصر div با شناسه app ایجاد کردیم. سپس با تگ script کدهای جاوا اسکریپت را در سند جاگذاری میکنیم. نوع سند را تعیین میکنیم.

وظیفه این خط: const app = document.getElementById('app') دریافت و ذخیره عنصر div که دارای شناسه 'app' در صفحه وب است.

توضیح تفکیک شده:

بررسی document.getElementById('app'): این قسمت اصلی خط کد هست که از ابجکت document موجود در جاوا اسکریپت استفاده می کند.

بررسی document: این ابجکت نماینده کل صفحه وب بوده و به تمامی عناصر آن دسترسی دارد.

بررسی متد getElementById('app'): این متد بر روی ابجکت document اعمال شده و وظیفه آن پیدا کردن عنصری در صفحه وب با شناسه مشخص شده است. در اینجا شناسه 'app' می باشد.

بررسی const app =: این بخش برای ذخیره کردن نتیجه عملیات قبلی است. در اینجا نتیجه متد getElementById('app') که عنصر div مورد نظر هست، در متغیری به نام app ذخیره می شود.

یادتان باشد این متغیر app از نوع const ارتباطی با شناسه app که در کد html گذاشتیم ندارد.

ذخیره عنصر div با شناسه 'app' این امکان را فراهم می کند که در ادامه کد از آن برای اضافه کردن عناصر جدید استفاده شود.

در ادامه کد، یک عنصر h1 ساخته شده و متنی به آن اضافه می شود. سپس این عنصر h1 به عنوان فرزندی درون عنصر div ذخیره شده در متغیر app قرار می گیرد. این یعنی در نهایت متن "Develop. Preview. Ship." درون عنصر div نمایش داده خواهد شد.


اگر به عناصر DOM درون ابزارهای توسعه دهنده مرورگر خود نگاه کنید، متوجه خواهید شد که DOM شامل <h1>عنصر است. DOM صفحه با کد منبع - یا به عبارت دیگر، فایل HTML اصلی که ایجاد کرده اید متفاوت است.

این به این دلیل است که HTML محتوای صفحه اولیه را نشان می دهد ، در حالی که DOM محتوای صفحه به روز شده را نشان می دهد که توسط کد جاوا اسکریپت شما تغییر کرده است.

به روز رسانی DOM با جاوا اسکریپت ساده بسیار قدرتمند اما پرمخاطب است. شما تمام این کد را برای اضافه کردن یک عنصر <h1>با مقداری متن نوشته اید :

<script type=&quottext/javascript&quot>
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header(headerContent);
  app(header);

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

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

برنامه نویسی دستوری در مقابل اعلامی

برنامه نویسی دستوری imperative programming

برنامه نویسی اعلامی declarative programming

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

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

ریاکت یک کتابخانه اعلامی declarative محبوب است که می توانید برای ساخت رابط های کاربری استفاده کنید.

ریاکت: یک کتابخانه رابط کاربری اعلامی declarative

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

اگر هنوز در جاوا اسکریپت دست و پا میزنی، وقت آن است که به سمت ریاکت و سپس نکست حرکت کنی!

https://www.coffeete.ir/seyedahmaddv

https://www.coffeete.ir/seyedahmaddv