كيفية استخدام JavaScript في HTML لإنشاء صفحات ويب تفاعلية

Tweet
Share
Share
Pin

HTML و CSS و JavaScript هي اللغات الرئيسية الثلاث المستخدمة في تطوير الواجهة الأمامية. HTML هي لغة ترميز ، بينما CSS هي لغة تصميم.

JavaScript هي لغة برمجة موجهة للكائنات تستخدم في الغالب في إنشاء جانب العميل لتطبيقات الويب والجوال. أصبحت هذه اللغة الديناميكية مفتوحة المصدر واحدة من أكثر لغات البرمجة استخدامًا نظرًا لمرونتها وسهولة فهمها.

باستخدام HTML5 و CSS3 ، يمكنك إنشاء مواقع ويب ثابتة. ومع ذلك ، لإضافة تفاعل إلى مثل هذا الموقع ، يجب عليك استخدام لغة برمجة مثل JavaScript التي تفهمها المستعرضات.

تشرح هذه المقالة سبب حاجتك إلى استخدام JavaScript مع HTML ، والطرق المختلفة لإضافة كود JavaScript إلى HTML ، وأفضل الممارسات لدمج اللغتين.

لماذا من الضروري استخدام JavaScript في HTML

  • إضافة التفاعلية: التفاعل هو الاستجابة لإدخالات / إجراءات المستخدم في الوقت الفعلي دون إعادة تحميل المتصفح. على سبيل المثال ، يمكن أن يكون لديك عداد يزيد بمقدار واحد في كل مرة يتم النقر عليه. مثال آخر يمكن أن يكون استجابة تخبر المستخدمين أنه تم إرسال ملاحظاتهم في كل مرة ينقرون فيها على زر الإرسال.
  • التحقق من جانب العميل: يمكنك استخدام JavaScript لالتقاط البيانات الصحيحة في النماذج. على سبيل المثال ، يمكنك استخدام لغة البرمجة هذه للتحقق من صحة إدخالات المستخدم في صفحة التسجيل من خلال تنسيق البريد الإلكتروني وطول كلمة المرور ومجموعة الأحرف المراد استخدامها.
  • معالجة DOM: تقدم JavaScript نموذج كائن المستند (DOM) ، مما يجعل من السهل تغيير محتويات صفحة الويب ديناميكيًا. مع تطبيق هذه التقنية ، يتم تحديث محتويات الصفحة تلقائيًا بناءً على إدخالات المستخدم دون إعادة تحميل صفحة الويب.
  • التوافق عبر المستعرضات: يتوافق JavaScript مع جميع المتصفحات الحديثة. ستعمل صفحات الويب التي تم إنشاؤها باستخدام HTML و CSS و JavaScript بشكل مثالي على متصفحات مختلفة.
  شرح التحليلات المعززة في 5 دقائق أو أقل

المتطلبات الأساسية

  • الفهم الأساسي لـ HTML: يمكنك فهم علامات HTML الأساسية ، ويمكنك إضافة أزرار وإنشاء نماذج باستخدام HTML.
  • الفهم الأساسي لـ CSS: أنت تفهم مفاهيم CSS مثل المعرف والفئة ومحددات العناصر.
  • محرر الكود: يمكنك استخدام محرر كود مثل VS Code أو Atom. يمكنك أيضًا استخدام مترجم JavaScript عبر الإنترنت إذا كنت لا ترغب في تثبيت برنامج على نظامك.

كيفية استخدام JavaScript في HTML

يمكنك استخدام ثلاث طرق رئيسية لإضافة كود JavaScript إلى HTML. نستكشف كل نهج وأين يناسبه بشكل أفضل.

# 1. تضمين التعليمات البرمجية بين العلامة

يتيح لك هذا الأسلوب الحصول على أكواد JavaScript و HTML في نفس الملف (ملف HTML). يمكننا البدء بإنشاء مجلد مشروع حيث سنشرح كيف يعمل. يمكنك استخدام هذه الأوامر للبدء ؛

mkdir javascript-html-playground

cd javascript-html-playground

إنشاء ملفين. index.html و style.css

أضف رمز البدء هذا إلى ملف HTML ؛

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>

أضف رمز البدء هذا إلى ملف CSS الخاص بك ؛

.form-container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh; 

  }

  label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

  }

  input[type="text"],

  input[type="email"],

  textarea {

    display: block;

    margin-bottom: 10px;

    padding: 5px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 8px;

  }

  input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    padding: 5px 10px;

    border: none;

    border-radius: 2.5px;

    font-size: 8px;

    cursor: pointer;

  }

  input[type="submit"]:hover {

    background-color: #3e8e41;

  }

عندما يتم عرض صفحة الويب ، سيكون لديك شيء مثل هذا ؛

  أفضل 12 برنامج لتغيير الصوت للديسكورد والألعاب والكمبيوتر الشخصي والجوال والمزيد ...

يمكننا الآن إضافة رمز JavaScript بسيط يقول “تم الإرسال” عند النقر فوق زر الإرسال. ستكون شفرة HTML المعاد تشكيلها باستخدام JavaScript هي ؛

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("submitted");

      }

    </script>

  </body>

</html>

عند النقر فوق زر الإرسال ، ستحصل على شيء مشابه لهذا ؛

Pros of embedding JavaScript code between <script> … </script> tags


  • Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file. 
    • 

  • Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug. 
    • 

Cons of embedding JavaScript code between <script> … </script> tags


  • Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
    • 

  • Slows performance: Big code blocks on the HTML document can slow loading speeds. 
    • 

#2. Inline Code by using JavaScript code directly inside HTML


Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css). 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="alert('inline submit')" />

      </form>

    </div>

  </body>

</html>


عند النقر فوق إرسال ، ستظهر نافذة صغيرة على متصفحك بها الكلمات "إرسال مضمّن". 


إيجابيات إضافة JavaScript كرمز مضمّن


    

  • سريع التنفيذ: ليس عليك الانتقال من مستند إلى آخر لكتابة كود HTML وجافا سكريبت. 
    • 

  • مثالي لتطبيق صغير: إذا كان لديك تطبيق صغير لا يتطلب الكثير من التفاعل ، فإن JavaScript المضمنة هي الخيار الأمثل. 
    • 



  ماذا تعني "NSFW" وكيف تستخدمه؟
سلبيات إضافة JavaScript كرمز مضمّن


    

  • الرمز غير قابل لإعادة الاستخدام: إذا كان التطبيق الخاص بك يحتوي على عدة أشكال ، فستنشئ كود JavaScript لكل نموذج.
    • 

  • يبطئ الأداء: يمكن أن تبطئ كتل التعليمات البرمجية الكبيرة في مستند HTML سرعات التحميل. 
    • 

  • قابلية قراءة الكود: مع استمرار نمو قاعدة التعليمات البرمجية ، تقل قابلية قراءة الكود. 
    • 



# 3.  إنشاء ملف جافا سكريبت خارجي


مع نمو التطبيق الخاص بك ، ستلاحظ أن إضافة كود JavaScript مباشرة إلى ملف HTML ليس فكرة جيدة.  من المحتمل أيضًا أن يكون لديك صفحات ويب بسرعات تحميل منخفضة عندما يكون لديك الكثير من التعليمات البرمجية في ملف HTML الخاص بك. 


قم بإنشاء ملف script.js جديد ليحمل كود JavaScript الخاص بك. 


استيراد ملف script.js على ملف HTML ؛


<head>

   <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

</head>


ستحتوي صفحة HTML المحدثة الجديدة على هذا الرمز ؛


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>


أضف هذا الرمز إلى ملف script.js ؛


document.addEventListener("DOMContentLoaded", function() {

    const form = document.querySelector("form");

    form.addEventListener("submit", function(event) {

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });


يقوم JavaScript بما يلي ؛


    

  • لدينا مستمع الحدث الذي ينتظر إطلاق الحدث DOMContentLoaded. 
    • 

  • يتم تنفيذ وظيفة رد الاتصال بعد إطلاق الحدث DOMContentLoaded.
    • 

  • يستخدم الرمز محدد الاستعلام لاختيار نموذج.
    • 

  • نستخدم event.preventDefault () لمنع DOM من اختيار السلوك الافتراضي (قم بتحديث الصفحة أو الانتقال إلى صفحة جديدة) عند تشغيل حدث الإرسال. 
    • 

  • يتم تشغيل رسالة "إرسال ورقة JS الخارجية" بمجرد إطلاق حدث الإرسال. 
    • 





JavaScript بتنسيق HTML: أفضل الممارسات


    

  • تقليل أحجام الملفات: كلما زاد حجم الملف ، زاد الوقت الذي يستغرقه التحميل على المتصفح.  يزيل التصغير جميع الأحرف غير المرغوب فيها في التعليمات البرمجية المصدر دون تغيير معناه أو أدائه.  يمكنك استخدام أدوات مثل Yahoo YUI Compressor و HTMLMinifier لإنشاء قاعدة كود مضغوطة. 
    • 

  • حافظ على الكود منظمًا: هذا سيجعل قراءتك سهلة وصيانتها.  يمكنك استخدام ملحقات مثل Prettier لتنظيم التعليمات البرمجية الخاصة بك. 
    • 

  • استخدام المكتبات الخارجية: إذا تمكنت مكتبة ما من تنفيذ مهمة معينة لتطبيقك ، فلا داعي لكتابة الكود من البداية.  ومع ذلك ، تجنب استخدام مكتبات متعددة تحقق نفس الأهداف في نفس المشروع. 
    • 

  • تحسين وضع JavaScript: إذا كنت تنوي إضافة كود JavaScript إلى ملف HTML الخاص بك ، فتأكد من أنه يأتي بعد كود HTML.  ضع JavaScript بين علامات