لماذا تلتهم JavaScript HTML: أمثلة التعليمات البرمجية

Likbez: HTML و CSS و JavaScript

HTML: للبنية والدلالات

CSS: لتغيير المظهر

جافا سكريبت: لتنفيذ السلوك

البرمجة الإلزامية مقابل

• . «» , . ( ) : , , . , , . - «». Vanilla JavaScript , jQuery. JavaScript .
  
  • « X, Y, Z».
  • : , .selected; , .selected.

• . , . , , «» (), , - . , . (, React), , , . , , , , . , :
  
  • « XYZ. , , .
  • مثال: يحتوي هذا العنصر على فئة مختارة. إذا اختارها المستخدم.
  
  

HTML هي لغة تعريفية

<section>
  <h1>Hello</h1>
  <p>My name is Mike.</p>
</section>

1. قم بإنشاء عنصر قسم .
2. إنشاء عنصر رأس المستوى 1 ( h1 ).
3. اضبط نص عنصر العنوان على "مرحبًا".
4. ضع عنصر العنوان في عنصر القسم.
5. إنشاء عنصر فقرة ( ع ).
6. اضبط نص عنصر الفقرة على "اسمي مايك".
7. ضع عنصر فقرة في عنصر القسم .
8. ضع عنصر القسم في مستند HTML.
9. اعرض الوثيقة على الشاشة.

JavaScript هي لغة حتمية

• قائمة بالأعلام التي تم وضع علامة عليها ، يتغير لون كل سطر عند تحديدها ؛
• النص أدناه ، على سبيل المثال ، "1 من 4 تم تحديده" ، والذي يجب تحديثه عند تغيير العلامات ؛
• حدد زر الكل ، الذي يجب تعطيله إذا تم تحديد جميع مربعات الاختيار بالفعل ؛
• حدد زر بلا ، والذي يجب تعطيله إذا لم يتم تحديد مربعات الاختيار.

const captionText = document.getElementById('caption-text');
const checkAllButton = document.getElementById('check-all-button');
const uncheckAllButton = document.getElementById('uncheck-all-button');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

function updateSummary() {
  let numChecked = 0;
  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      numChecked++;
    }
  });
  captionText.innerHTML = `${numChecked} of ${checkboxes.length} checked`;
  if (numChecked === 0) {
    checkAllButton.disabled = false;
    uncheckAllButton.disabled = true;
  } else {
    uncheckAllButton.disabled = false;
  }
  if (numChecked === checkboxes.length) {
    checkAllButton.disabled = true;
  }
}

checkAllButton.addEventListener('click', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
    checkbox.closest('tr').className = 'checked';
  });
  updateSummary();
});

uncheckAllButton.addEventListener('click', function() {
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = false;
    checkbox.closest('tr').className = '';
  });
  updateSummary();
});

checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function(event) {
    checkbox.closest('tr').className = checkbox.checked ? 'checked' : '';
    updateSummary();
  });
});

الصداع كما هو

• هناك أربعة عناصر صف (صف جدول ، قائمة) ، يحتوي كل منها على علامة. يتم التحقق من العلم الثالث.

• يوجد نص "تم تحديد 1 من 4".

• يوجد زر تحديد الكل قيد التشغيل.

• يوجد زر تحديد بلا ، وهو معطل.

• ابحث عن الصف الذي يحتوي على مربع الاختيار وأضف فئة CSS المحددة إليه.

• ابحث عن جميع العلامات في القائمة واحسب عدد العلامات المميزة وعددها.

• ابحث عن النص وقم بتحديثه ، مع الإشارة إلى العدد الصحيح لعمليات الشراء المحددة وعددها الإجمالي.

• ابحث عن زر تحديد بلا وقم بتشغيله إذا تم تعطيله.

• إذا تم تحديد جميع مربعات الاختيار الآن ، فابحث عن الزر تحديد الكل وقم بإيقاف تشغيله.

• ابحث عن الصف الذي يحتوي على العلم وأزل الفئة المحددة منه.

• ابحث عن جميع مربعات الاختيار في القائمة واحسب عددها المحددة وعددها.

• ابحث عن عنصر نص السيرة الذاتية وقم بتحديثه برقم تم التحقق منه وإجمالي.

• ابحث عن الزر تحديد الكل وقم بتشغيله إذا تم تعطيله.

• إذا كانت جميع المربعات غير محددة ، فابحث عن الزر تحديد بدون إيقاف تشغيل وإيقاف تشغيله.

• ابحث عن جميع مربعات الاختيار في القائمة وضع علامة عليها.

• ابحث عن جميع الصفوف في القائمة وأضف الفئة المحددة لها.

• ابحث عن النص وقم بتحديثه.

• ابحث عن الزر تحديد الكل وقم بإيقاف تشغيله.

• ابحث عن زر تحديد بلا وقم بتشغيله.

• ابحث عن جميع مربعات الاختيار في القائمة وامسح جميع مربعات الاختيار.

• ابحث عن جميع الصفوف في القائمة وأزل الفئة المحددة منها.

• ابحث عن عنصر نص السيرة الذاتية وقم بتحديثه.

• ابحث عن الزر تحديد الكل وقم بتشغيله.

• ابحث عن زر تحديد بلا وقم بإيقاف تشغيله.

نحن نبحث عن مصدر الحقيقة

أخبرني بما تريد (ما تريده حقًا)

• توجد قائمة بالقيم true / false تسمى checkboxValues ​​التي تعرض الحقول التي تم وضع علامة عليها.
  
  • مثال: checkboxValues ​​\ u003d [false، false، true، false]
  • تظهر هذه القائمة أن لدينا أربعة أعلام ، يتم تعيين الثالث فقط.

• لكل قيمة في خانة اختيار القيم الموجودة في الجدول ، هناك صف:
  
  • لديه فئة CSS تسمى .selected إذا كانت القيمة صحيحة ، و
  • يحتوي على علامة تم التحقق منها إذا كانت القيمة صحيحة.

• هناك عنصر نصي يحتوي على النص "{x} من {y} selected" ، حيث {x} هو عدد القيم الحقيقية في checkboxValues ​​و {y} هو إجمالي عدد القيم في checkboxValues.
• يوجد زر تحديد الكل الذي يتم تمكينه إذا كانت قيم خانة الاختيار قيمًا زائفة.
• Select None, , checkboxValues ​​ true.
• , checkboxValues.
• Select All , checkboxValues ​​ true.
• Select None checkboxValues ​​ false.

function ChecklistTable({ columns, rows, initialValues, ...otherProps }) {
  const [checkboxValues, setCheckboxValues] = React.useState(initialValues);
  
  function checkAllBoxes() {
    setCheckboxValues(new Array(rows.length).fill(true));
  }
  
  function uncheckAllBoxes() {
    setCheckboxValues(new Array(rows.length).fill(false));
  }
  
  function setCheckboxValue(rowIndex, checked) {
    const newValues = checkboxValues.slice();
    newValues[rowIndex] = checked;
    setCheckboxValues(newValues);
  }
  
  const numItems = checkboxValues.length;
  const numChecked = checkboxValues.filter(Boolean).length;
  
  return (
    <table className="pf-c-table pf-m-grid-lg" role="grid" {...otherProps}>
      <caption>
        <span>{numChecked} of {numItems} items checked</span>
        <button
          onClick={checkAllBoxes}
          disabled={numChecked === numItems}
          className="pf-c-button pf-m-primary"
          type="button"
        >
          Check all
        </button>
        <button
          onClick={uncheckAllBoxes}
          disabled={numChecked === 0}
          className="pf-c-button pf-m-secondary"
          type="button"
        >
          Uncheck all
        </button>
      </caption>
      <thead>
        <tr>
          <td />
          {columns.map(function(column) {
            return <th scope="col" key={column}>{column}</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {rows.map(function(row, rowIndex) {
          const [firstCell, ...otherCells] = row;
          const labelId = `item-${rowIndex}-${firstCell}`;
          const isChecked = checkboxValues[rowIndex];
          return (
            <tr key={firstCell} className={isChecked ? 'checked' : ''}>
              <td className="pf-c-table__check">
                <input
                  type="checkbox"
                  name={firstCell}
                  aria-labelledby={labelId}
                  checked={isChecked}
                  onChange={function(event) {
                    setCheckboxValue(rowIndex, event.target.checked);
                  }}
                />
              </td>
              <th data-label={columns[0]}>
                <div id={labelId}>{firstCell}</div>
              </th>
              {otherCells.map(function(cell, cellIndex) {
                return (
                  <td key={cell} data-label={columns[1 + cellIndex]}>
                    {cell}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

function ShoppingList() {
  return (
    <ChecklistTable
      aria-label="Shopping list"
      columns={['Item', 'Quantity']}
      rows={[
        ['Sugar', '1 cup'],
        ['Butter', '½ cup'],
        ['Eggs', '2'],
        ['Milk', '½ cup'],
      ]}
      initialValues={[false, false, true, false]}
    />
  );
}

ReactDOM.render(
  <ShoppingList />,
  document.getElementById('shopping-list')
);

جافا سكريبت هزم HTML: جوعا

مزايا النهج الحديث: القدرة على التنبؤ ، وإعادة الاستخدام والجمع

نفس جافا سكريبت ، في ملف التعريف فقط

الحاجة الواعية مقابل الاتجاه اللاواعي