مافائدة الجافاسكريبت

Mr Mohamed Alsdawy · 3 مارس 2023

عند استخدام ال DOM في ال JS واضافة عنصر عن طريق ال JS هل يمكننا التعديل عليه من خلال الCSS ؟

ولماذا وضعنا كل هذه الاكواد داخل JS ولم نضعها داخل الHTML اسهل ويمكن التعديل عليها وكتابة اكواد اقل؟

تم التعديل في 3 مارس 2023 بواسطة شرف الدين حفني
تعديل العنوان وتوضيحه

شرف الدين حفني · 3 مارس 2023

بالنسبة لسؤالك الأول هل يمكننا التعديل على العنصر من خلال الcss?

أجل يمكنك إضافة class في الcss وعند إضافة عنصر من خلال الجافاسكريبت تقوم بإعطاء هذا العنصر الclass الموجود في الcss كما يظهر في المثال التالي

.my_class {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

 element.classList.add("my_class");

هنا قمنا بإعطاء العنصر كلاس اسمه my_class وبالتالي سيأخذ العنصر التنسيقات الخاصة بالكلاس my_class

وبالنسبة لسؤالك الثاني عن لماذا نستخدم الdom فذلك لإضافة الديناميكية في الصفحة , على سبيل المثال لو أردنا عمل زر عند الضغط عليه يتغير تنسيق الصفحة, مثلًا أردنا عمل الdark mode في صفحتنا في تلك الحالة نحتاج إستخدام الجافاسكريبت حتى نقوم بتغيير تنسيق الصفحة عند الضغط على الزر المسؤل عن تغيير الdark mode

Mustafa Suleiman · 3 مارس 2023

يمكن التعديل على العنصر الذي تم إنشاؤه باستخدام DOM من خلال CSS.

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

لتعديل العنصر الذي تم إنشاؤه باستخدام DOM بواسطة CSS ، يمكننا استخدام معرف العنصر أو فئته أو أي مجموعة أخرى من المحددات التي تستخدمها CSS.

على سبيل المثال ، إذا كان لدينا عنصر "div" تم إنشاؤه باستخدام DOM ، يمكننا تغيير لون خلفيته باستخدام الكود التالي:

let divElement = document.createElement("div");
divElement.style.backgroundColor = "red";

يمكننا الآن تغيير لون الخلفية لعنصر "div" باستخدام CSS ببساطة:

div {
  background-color: blue;
}

يمكننا أيضًا استخدام معرف العنصر في CSS:

let divElement = document.createElement("div");
divElement.id = "myDiv";

وبعد ذلك يمكننا تعديل العنصر باستخدام معرفه في CSS:

#myDiv {
  background-color: blue;
}

السؤال الثاني:

سبب وضع الأكواد داخل JS وليس HTML ، فهناك العديد من الأسباب التي يمكن أن تجعل هذا الأمر مفيدًا. ومن بين هذه الأسباب:

1- الحفاظ على تنظيم الشفرة: عندما يكون لديناعدد كبير من أسطر الكود ونقوم بوضعه داخل الصفحة HTML ، فقد يصعب تنظيم هذا الكود ويصعب العثور على الأخطاء فيما بعد.

2- تحسين أداء الصفحة: يمكن أن يؤدي وضع الأكواد في ملف JavaScript إلى تحسين أداء الصفحة بشكل كبير. عندما يتم تحميل الصفحة ، يتم تنفيذ الأكواد التي تم وضعها في ملف JavaScript بشكل مستقل عن الصفحة ، وهذا يتيح للصفحة أن تحمل بسرعة أكبر. وبالإضافة إلى ذلك ، يمكن استخدام ملف JavaScript لتحميل الأكواد التي تحتاجها الصفحة فقط ، بدلاً من تحميل جميع الأكواد في كل مرة يتم فيها تحميل الصفحة.

3- سهولة الصيانة: عندما يتم وضع الأكواد في ملف JavaScript ، يمكن للمطورين تحديث الأكواد بشكل أسهل وأكثر سرعة من خلال تعديل ملف JavaScript الواحد بدلاً من العديد من صفحات HTML المختلفة.

4- قابلية إعادة الاستخدام: يمكن إعادة استخدام الأكواد التي تم وضعها في ملف JavaScript في الصفحات المختلفة ، مما يسهل ويسرع عملية التطوير.

للتعرف على الفرق بين وضع الأكواد داخل HTML ووضعها داخل JavaScript ، يمكن أن نلقي نظرة على المثال التالي:

HTML:

<div id="myDiv"></div>
<script>
document.getElementById("myDiv").innerHTML = "Hello World!";
</script>

JavaScript:

<div id="myDiv"></div>
<script src="script.js"></script>

وفي ملف script.js:

document.getElementById("myDiv").innerHTML = "Hello World!";

كما نلاحظ ، في المثال الثاني تم وضع الأكواد داخل ملف JavaScript وتم استدعاءها في الصفحة HTML بواسطة عنصر "script" ، مما يسهل إعادة استخدام الأكواد في الصفحات المختلفة ويسهل الصيانة ويحسن أداء الصفحة.

محمد Fahmy · 3 مارس 2023

بالنسبة لسؤالك الأول فلقد تم الإجابة عليه بالتفصيل في الإجابات السابقة, لذلك سوف أقوم بشرح السؤال الثاني بتفصيل أكثر.

السؤال الثاني.

اقتباس

ولماذا وضعنا كل هذه الاكواد داخل JS ولم نضعها داخل الHTML اسهل ويمكن التعديل عليها وكتابة اكواد اقل؟

سوف أشرح فائدة أستخدام ال JavaScript DOM بدل وضع الأكواد مباشر في ملف HTML.

لنفترض أنك لديك زر وتريد عند الضغط عليه أن يتحول لون الزر إلى اللون الأحمر, إذا فكرت في الأمر لن تستطيع فعل ذلك بأستخدام HTML و CSS فقط.

هنا سوف تحتاج إلى أستخدام JavaScript DOM, أنظر إلى هذا الكود.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="func()" id="btn">hello</button>
  <script>
    // دالة تقوم بتغير لون الزر
    function func(){
      // نقوم بحديد الزر من خلال DOM
      document.getElementById("btn").style.backgroundColor = "red";
    }
  </script>
</body>
</html>

في هذا المثال قمنا بتعريف دالة باسم func يتم تنفيذها عند الضغط علي الزر الذي يحمل المعرف(id) btn.

تقوم هذه الدالة بتغير لو الخلفية الخاص بالزر إلى الون الأحمر من خلال تحدد الزر بواسطة JavaScript DOM وأعطاء الزر الون الأحمر.

من خلال هذا الكود.

document.getElementById("btn").style.backgroundColor = "red";

وهذه بعض المصادر المفيدة.

مافائدة الجافاسكريبت

السؤال

Mr Mohamed Alsdawy

3 أجوبة على هذا السؤال

Recommended Posts

شرف الدين حفني

Mustafa Suleiman

محمد Fahmy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية