كيفية ربط JavaScript بـ HTML و CSS

نشرت: 2022-02-25

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

قبل المضي قدمًا ، أود أن تتاح لي الفرصة لشكر NaturHandel.dk و Virksomhedsoplysninger.dk لجعل هذه المقالة ممكنة الإنشاء.

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

دعنا نقسمها أكثر ، حتى نتمكن من ربط العلاقة بين هذه اللغات بشكل كامل ، فهل نقوم بما يلي:

شرح لغات الكود المختلفة

لغة البرمجة

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

CSS

  • اوراق النمط المتعاقب
  • هذا هو المكان الذي يمكنك الآن الوصول إليه وتصميمه وتحديد الحجم وإضافة اللون إلى عملك الفني أو صفحة الويب الخاصة بك بناءً على الفكرة أو المسودة الأولى التي قمت بها في لوحتك. يمكن توجيه جميع العناصر الجمالية هنا وإدخالها هنا ليراها جمهورك.

جافا سكريبت

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

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

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

فيما يلي ملاحظة مفصلة حول كيفية ربط JavaScript (مع HTML و CSS):

HTML مع علامة البرنامج النصي

<title> جافا سكريبت </ title>

في هذا المثال ، يمكنك ربط JavaScript عبر HTML بهذه الطريقة. عند تحميله ، يُنظر إليه على أنه "JavaScript" كعنوان لصفحة الويب الخاصة بك.

HTML عبر برمجة التعليمات البرمجية

يتم استخدام هذا بشكل أكبر للإجراءات الديناميكية في الصفحة مثل انتقال الألوان ، وأحجام النصوص ، والرسوم المتحركة ، وما إلى ذلك ، ويمكن معالجة ذلك بلغتك عبر <script type = ”text / JavaScript”> ('<body style = ”background-color : (أدخل اللون الذي تفضله) ”> ')

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

HTML عبر ملف منفصل

يمكنك أيضًا تجربته كملف منفصل بدون علامات نصية عبر javascript.js. لكن هذه التقنية صعبة بعض الشيء لأن هذا يربك المكان الذي يحدد فيه المتصفح الرمز وقد يؤدي إلى حدوث أخطاء.

لتجنب هذه الأخطاء عند استخدام هذه الطريقة ، قم بإرفاق مسار لتمكين الاتجاه عبر <script src = (insert “PATH”)>

CSS عبر Style Tag

في نص HTML الخاص بك ، أضف شيئًا يمكن أن ينسب إلى النمط الذي يتضمن ربط الاثنين (أو كيف تريد عرض النص الخاص بك) عبر <title> ربط CSS و JavaScript </title>

يجب وضع عنصر الارتباط الخاص بك بعلامة JavaScript بين المستند المصدر و

لغة البرمجة. بهذه الطريقة ، تُنسب العلاقة بين كل رمز مطابق إلى حد ما.

على الرغم من أنه يُنصح بأن هذا لا يتم بالضرورة في معظم الحالات لأن بعض الوظائف في CSS و JavaScript يمكن أن تقدم ما يُنسب إليهما ، إلا أنه لا يزال ممكنًا.

يمكن هنا معالجة لون خلفية صفحتك وحجم النص أو الخط وديناميكيات النصوص.

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