Theme
Primary Color
أكاديمية الزيرو

تكليفات الدروس من [ 86 ] إلى [ 93 ]

[ 11 ] تكليفات على [ Document Object Model ]

التكليف 01

  • لديك العنصر التالي في ال HTML عليك إختياره بال JavaScript ب 15 طريقة مختلفة
  • يمكنك إستخدام querySelector أربع مرات فقط وكذلك querySelectorAll اربع مرات فقط
<div id="elzero" class="element" name="js">JavaScript</div>

التكليف 02

  • لدينا مجموعة من الصور في الصفحة عبارة عن 10 صور بلا Source
  • المطلوب هو تغيير ال Src Attribute لصورة اللوجو التالية “https://elzero.org/wp-content/themes/elzero/imgs/logo.png”
  • تغيير محتوى ال Alt Attribute ل Elzero Logo
  • يجب عمل Loop يقوم بالوظيفة مباشرة ولا تقوم بتكرار ال Code
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>
<div>
  <img decoding="async" src="#" alt="" />
</div>

النتيجة المطلوبة هي العنصر التالي مكرر عشر مرات

<div>
  <img decoding="async" src="https://elzero.org/wp-content/themes/elzero/imgs/logo.png" alt="Elzero Logo">
</div>

التكليف 03

  • لديك النموذج التالي الخاص بتحويل العملات
  • كل ما عليك هو كتابة العملة بالدولار داخل حقل الإدخال
  • في مكان النتيجة اسفل حقل الإدخال يجب عليك إظهار العملة بالدولار والمقابل لها بالجنيه المصري
  • الشخص يمكن أن يكتب الرقم أو يقوم بعمل Paste للرقم أيضا
  • يمكنك تغيير ال div الخاص بالنتيجة وتقوم بالتعديل عليه كما تحب
  • لا تقوم بتعديل حقل الإدخال ابدا
  • تنسيقات ال CSS لتجميل الشكل فقط لو أردت عملها لا توجد مشكل
  • الدولار = 15.6 جنيه مصري
  • تأكد ان الكسور التي تظهر في النتيجة لا تتعدي رقمين فقط. مثلا 1500.32
<form action="">
  <input type="number" name="dollar" placeholder="USD Dollar" />
  <div class="result">{0} USD Dollar = {0} Egyptian Pound</div>
</form>

شاهد الصورة التالية لترى المطلوب وتفهم اكثر

التكليف 04

  • لديلك عنصريين محتواهم وال Attributes الخاصة بهم مبعثرة
  • المطلوب نقل المحتوى وال Title Attribute من ال div الأول للثاني ومن الثاني للأول
  • غير مسموح نهائيا كتابة أرقام أو Strings أو إستعمال True أو False بإستثناء أسماء ال Classes طبعا
  • يجب عليك إضافة رقم 2 بجانب كلمة Two
  • شاهد النتيجة لترى المطلوب

ال Code الحالي

<div class="one" title="two">Two</div>
<div class="two" title="one">One</div>

ال Code الحالي

<div class="one" title="one">One</div>
<div class="two" title="two">Two 2</div>

التكليف 05

  • لديك 5 صور في الصفحة بعضهم يحتوي على ال Alt Attributes والباقي لا
  • قم بعمل Loop على جميع الصور وتأكد أن ال Alt Attribute موجود أم لا
  • في حالة كان موجود قم بتغيير القيمة إلى الكلمة Old
  • في حالة لم يكن موجود قم بتغيير القيمة إلى Elzero New
  • شاهد النتيجة لترى المطلوب
<img decoding="async" src="#" alt="One" />
<img decoding="async" src="#" />
<img decoding="async" src="#" alt="Three" />
<img decoding="async" src="#" />
<img decoding="async" src="#" />

النتيجة المطلوبة

<img decoding="async" src="#" alt="Old" />
<img decoding="async" src="#" alt="Elzero New" />
<img decoding="async" src="#" alt="Old" />
<img decoding="async" src="#" alt="Elzero New" />
<img decoding="async" src="#" alt="Elzero New" />

التكليف 06

  • لديك حقل إدخال تقوم بكتابة عدد العناصر التي تريد إنشائها
  • لديك حقل آخر يحتوي على نوع العنصر سواء كان Div أو Section
  • لديك حقل إدخال لكتابة الكلمة التي ستظهر داخل العنصر
  • لديك زر لبدا عملية الإنشاء
  • عند الضغط على إنشاء العناصر تأكد أن اي عناصر قديمة تم إنشاءها سوف يتم إزالتها أولا
  • يمكنك عمل تنسيقات ال CSS بال JavaScript في حالة كنت تريد التمرين على التنسيق بال JavaScript
  • يمكنك عمل التنسيق بشكل طبيعي بال CSS بدون أي مشكلة
  • تأكد أن ال Form لا تقوم بإرسال البيانات حتى لا يتم عمل Refresh للصفحة
  • العنصر يحتوي على ID و Class وال ID يزداد رقم مع كل عنصر شاهد المثال المطلوب لتفهم
<form action="">
  <input type="number" name="elements" class="input" placeholder="Number Of Elements" />
  <input type="text" name="texts" class="input" placeholder="Elements Text" />
  <select name="type" class="input">
    <option value="Div">Div</option>
    <option value="Section">Section</option>
  </select>
  <input type="submit" name="create" value="Create" />
  <div class="results"></div>
</form>

النتيجة المطلوبة داخل ال results div هي كالتالي حسب العدد الذي إخترته وحسب نوع العنصر

<div class="box" title="Element" id="id-1">Hello</div>
<div class="box" title="Element" id="id-2">Hello</div>
<div class="box" title="Element" id="id-3">Hello</div>

شاهد الصورة التالية لترى المطلوب وتفهم اكثر

التكليف 07

  • لديك مجموعة روابط موجودة في الصفحة وأماكنها تتغير بطريقة عشوائية
  • جميع الروابط تحتوي على Classes مختلفة
  • المطلوب فتح الرابط الذي يحتوي على Class بإسم “open” والنص داخل الرابط هو “Elzero”
  • يجب مراعاة أن ال Code سيتم كتابته داخل Script Tag في ال Head
  • يفضل إستخدام ال Class List Object Methods للتدريب على ما تعلمته
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Learn JavaScript</title>
    <script>
      // Your Code Here
    </script>
  </head>
  <body>
    <a class="open" href="https://google.com">Google</a>
    <a class="open" href="https://elzero.org">Elzero</a>
    <a class="not" href="https://facebook.com">Facebook</a>
    <a class="linked" href="https://linkedin.com">Elzero</a>
    <script src="main.js"></script>
  </body>
</html>

التكليف 08

  • شاهد الشكل التالي
  • لديك حقلين إدخال واحد لإضافة ال Classes على العنصر ال Current والثاني لحذف ال Classes من العنصر Current
  • عملية الإضافة تتم بمجرد الخروج من حقل الإدخال Blur
  • تأكد أن إسم ال Class يتم إضافته ك Small Letters بغض النظر عن المدخل
  • إذا قام الشخص بكتابة كلمتين بينهم مسافات يتم إضافتهم ك Two Classes أو حذفهم ك Two Classes أيضا
  • عند الخروج من حقل الإدخال تأكد أن تحذف القيمة الموجودة به
  • يجب التأكد أن الحقل غير فارغ قبل الخروج منه حتى لا يظهر اي خطأ
  • يجب عليك عمل Function يتم تشغيلها كل مرة تقوم بالخروج من حقول الإدخال
  • وظيفة ال Function هي عرض ال Classes الموجودة على العنصر Current في مكان النتيجة في الأسفل
  • ال Function تقوم بترتيب أسماء ال Classes أبجديا قبل إظهارها
  • إذا لم يكن هناك أي Classes على العنصر نظهر رسالة "No Classes To Show"
  • شاهد الشكل لتعرف المطلوب

بنية الصفحة مع التنسيقات في حالة أردت تجربتها

<!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>Learn JavaScript</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      .assign {
        text-align: center;
        padding-top: 20px;
      }
      .assign input {
        padding: 10px;
        width: 300px;
        border: 1px solid #ddd;
      }
      .assign input:focus {
        outline: none;
        border-color: #ccc;
      }
      .assign [title="Current"] {
        padding: 20px;
        margin: 10px auto;
        width: 610px;
        background-color: #f1f0f0;
      }
      .assign .classes-list {
        padding: 20px;
        margin: 10px auto;
        width: 610px;
        background-color: #f1f0f0;
      }
      .assign .classes-list h5 {
        margin: 0 0 10px;
        text-align: left;
      }
      .assign .classes-list div span {
        background-color: #ff5722;
        padding: 6px 10px 8px;
        margin-right: 5px;
        border-radius: 6px;
        color: white;
        display: inline-flex;
      }
    </style>
  </head>
  <body>
    <div class="assign">
      <input type="text" class="classes-to-add" placeholder="Add Classes" />
      <input type="text" class="classes-to-remove" placeholder="Remove Classes" />
      <div class="element current" title="Current">Current Element</div>
      <div class="classes-list">
        <h5>Current Element Class Lists</h5>
        <div></div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

التكليف 09

  • لديك عنصرين موجودين في الصفحة عبارة عن Div و Paragraph
  • المطلوب إزالة ال Paragraph من الصفحة تماما
  • أما بخصوص ال Div المطلوب وضع عنصر قبله وعنصر بعده فيهم المطلوب في المثال بالأسفل

بنية الصفحة في البداية

<div class="our-element">Our Element</div>
<p>Paragraph</p>

البنية المطلوبة

<div class="start" title="Start Element" data-value="Start">Start</div>
<div class="our-element">Our Element</div>
<div class="end" title="End Element" data-value="End">End</div>

التكليف 10

  • لديك البنية التالية في الصفحة
  • المطلوب الوصول لكلمة "Elzero" بدون اي مسافات أو New Line
  • المطلوب جلبها من داخل العنصر وليس كتابتها بيدك
<div>
  <span>Hello</span>
  <!-- We Need The Next Text Without Spaces -->
  Elzero
</div>

التكليف 11

  • لديك في الصفحة جميع عناصر ال HTML ولكن وضعنا منها 5 عناصر فقط
  • المطلوب عند الضغط على أي من العناصر طباعة رسالة في ال Console فيها التالي This Is "Element Type"
  • الحل بسيط جدا ويكن يحتاج لبعض البحث لكيفية الوصول لنوع العنصر
<div>Element</div>
<span>Element</span>
<p>Element</p>
<article>Element</article>
<section>Element</section>

مثلا عند الضغط على عنصر ال Paragraph ستظهر لك هذه الرسالة "This Is P" وهكذا

حلول التكليفات

Premium

حلول التكليفات متاحة للأعضاء ال Premium

راجع الحلول وطور مهاراتك مع العضوية المميزة

اكتشف العضوية المميزة