क्यों जावास्क्रिप्ट HTML HTML: कोड उदाहरण

इसी तरह: HTML, CSS और जावास्क्रिप्ट

HTML: संरचना और शब्दार्थ के लिए

सीएसएस: रूप बदलने के लिए

जावास्क्रिप्ट: व्यवहार को लागू करने के लिए

इंपीरियल बनाम घोषणात्मक प्रोग्रामिंग

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

• . , . , , «» (), , - . , . (, React), , , . , , , , . , :
  
  • « XYZ. , , .
  • उदाहरण: यदि उपयोगकर्ता ने इसे चुना है तो इस तत्व में एक .selected वर्ग है।
  
  

HTML एक घोषणात्मक भाषा है

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

1. एक अनुभाग तत्व बनाएँ ।
2. एक स्तर 1 हेडर तत्व ( h1 ) बनाएँ ।
3. शीर्षक तत्व पाठ "हैलो" पर सेट करें।
4. शीर्षक तत्व को अनुभाग तत्व में रखें।
5. एक पैराग्राफ तत्व ( पी ) बनाएँ ।
6. "मेरा नाम माइक है" पैराग्राफ तत्व का पाठ सेट करें।
7. एक में एक पैराग्राफ तत्व जगह खंड तत्व ।
8. HTML डॉक्यूमेंट में सेक्शन एलिमेंट को रखें ।
9. स्क्रीन पर दस्तावेज़ प्रदर्शित करें।

जावास्क्रिप्ट एक अनिवार्य भाषा है

• ध्वजांकित झंडों की एक सूची, जिनमें से प्रत्येक पंक्ति का चयन होने पर उसका रंग बदल जाता है;
• नीचे दिए गए पाठ, उदाहरण के लिए, "4 में से 1 चयनित", जिसे अपडेट किया जाना चाहिए जब झंडे बदल दिए जाएं;
• सभी बटन का चयन करें, जिसे अक्षम किया जाना चाहिए यदि सभी चेकबॉक्स पहले से ही चयनित हैं;
• कोई भी बटन न चुनें, जो चेकबॉक्स के चयन में अक्षम हो।

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();
  });
});

सिरदर्द जैसा भी हो

• चार पंक्ति तत्व (एक तालिका की एक पंक्ति है, यह एक सूची है), जिनमें से प्रत्येक में एक झंडा होता है। तीसरे ध्वज की जाँच की जाती है।

• एक पाठ है "चयनित 4 में से 1"।

• एक Select All बटन है जो चालू है।

• एक सेलेक्ट कोई नहीं बटन है, जो अक्षम है।

• चेकबॉक्स वाली पंक्ति का पता लगाएं और उसमें सीएसएस वर्ग जोड़ें।

• सूची में सभी झंडे खोजें और गणना करें कि उनमें से कितने चिह्नित हैं और कितने नहीं हैं।

• पाठ ढूंढें और इसे अपडेट करें, चयनित खरीद की सही संख्या और उनकी कुल संख्या का संकेत देता है।

• कोई भी बटन न चुनें का चयन करें और इसे अक्षम होने पर चालू करें।

• यदि सभी चेकबॉक्स अब चेक किए गए हैं, तो सभी का चयन करें बटन को ढूंढें और इसे बंद कर दें।

• ध्वज वाली पंक्ति का पता लगाएं और उसमें से .selected वर्ग को हटा दें।

• सूची में सभी चेकबॉक्स खोजें और गणना करें कि उनमें से कितने चेक किए गए हैं और कितने नहीं हैं।

• रिज्यूम टेक्स्ट आइटम ढूंढें और इसे सत्यापित संख्या और कुल के साथ अपडेट करें।

• सेलेक्ट ऑल बटन को ढूंढें और अगर वह डिसेबल था तो उसे ऑन कर दें।

• यदि सभी बॉक्स अनियंत्रित हैं, तो कोई नहीं चुनें बटन को ढूंढें और इसे बंद करें।

• सूची में सभी चेकबॉक्स खोजें और उन्हें चिह्नित करें।

• सूची में सभी पंक्तियों को खोजें और उन्हें .selected वर्ग जोड़ें।

• टेक्स्ट ढूंढें और इसे अपडेट करें।

• सेलेक्ट ऑल बटन को ढूंढें और इसे बंद करें।

• कोई नहीं चुनें बटन को ढूंढें और इसे चालू करें।

• सूची में सभी चेकबॉक्स खोजें और सभी चेकबॉक्स साफ़ करें।

• सूची में सभी पंक्तियों को ढूंढें और उनसे .selected वर्ग को हटा दें।

• फिर से शुरू पाठ तत्व का पता लगाएं और इसे अद्यतन करें।

• सेलेक्ट ऑल बटन को ढूंढें और इसे चालू करें।

• कोई नहीं चुनें बटन को ढूंढें और इसे बंद करें।

हम सत्य के स्रोत की तलाश कर रहे हैं

मुझे बताओ कि तुम क्या चाहते हो (तुम वास्तव में क्या चाहते हो)

• सही / गलत मानों की एक सूची है, जिसे चेकबॉक्सवैल्यूज़ कहा जाता है जो दिखाता है कि कौन से फ़ील्ड चिह्नित हैं।
  
  • उदाहरण: checkboxValues ​​\ u003d [झूठे, झूठे, सच्चे, झूठे]
  • इस सूची से पता चलता है कि हमारे पास चार झंडे हैं, केवल तीसरा सेट है।

• चेकबॉक्स में प्रत्येक मान के लिए तालिका में, एक पंक्ति है जो:
  
  • यदि कोई सीएसएस वर्ग है जिसे .selected कहा जाता है यदि मान सत्य है, और
  • यदि मान सत्य है, तो एक ध्वज की जाँच की जाती है।

• एक पाठ तत्व है जिसमें "{y} चयनित" का पाठ {{x} शामिल है, जहां {x} चेकबॉक्सवैल्यू में सच्चे मानों की संख्या है, और {y} चेकबॉक्सवैल्यू में कुल मूल्यों की संख्या है।
• एक चयनित ऑल बटन है जो चेकबॉक्सवैल्यूज़ के गलत मान होने पर सक्षम है।
• 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 को हराया: भूखा

आधुनिक दृष्टिकोण के लाभ: पूर्वानुमानशीलता, पुन: प्रयोज्यता और संयोजन

केवल प्रोफ़ाइल में वही जावास्क्रिप्ट

चेतना की आवश्यकता बनाम अचेतन प्रवृत्ति