كيفية إنشاء عناصر html في الجافاسكربت JavaScript الدرس |28| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الأربعاء، 17 يونيو 2020

كيفية إنشاء عناصر html في الجافاسكربت JavaScript الدرس |28|


التعرف على appendChild في جافاسكربت

في درس اليوم سوف نتعرف على العنصر appendChild الذي نتمكن من خلاله اضافة عناصر html عبر الجافاسكربت.

مثلاً نريد من المستخدم أن يضيف بيانات مطلوبة منه إلى list, نضع حقل input و زر submit عندما المستخدم يكتب اي شيئ في الحقل و يضغط على الزر submit يتم إضافة ما كتبه إلى list.

ليكن في ملف html
<body id="body">
      <input type="text" id="input">
      <button onclick="add()">اضافة</button> 
      <ul id="myList">
      </ul>
</body> 


و في ملف الجافاسكربت يكون
function add(){
var li = document.createElement("LI");
var input = document.getElementById("input").value;
var text = document.createTextNode(input);
li.appendChild(text);
document.getElementById("myList").appendChild(li);
}


في البداية انشأنا function و ربطناها add() مع زر onclick من أجل عند الضغط عليه تعمل function و انشأنا متغير li و اخترنا له createElement أي إنشاء عنصر و ضمن الأقواس و حددنا العنصر LI هكذا أنشأنا العنصر LI, و بعدها حددنا ما يتم إضافته لهذا العنصر و انشأنا متغير input قلنا له سوف نأخذ القيم من العنصر input و ربطناها بـ id العنصر input و من ثم أنشانا متغير اخر بإسم text و اعطيناه الخاصية createTextNode اي إنشاء نص و value يأخذ القيمة عند اضافتها, وبعدها قمنا بإضافة النص بتحديد العنصر li عبر li.appendChild ووضعنا بين الأقواس text اي نريد اخذ القيم من المتغير text و نريد ان نضيف LI على العنصر ul الذي بملف html نقوم بتحديده عبر id و حددنا الايدي myList و ثم وضعنا appendChild اي نريد كلما نضغط إضافة يضيف لنا ما كتبناه وحددنا LI لكي يتم إضافته.


هذه الأسماء كتبناها بالتسلسل كلما نكتب اسم نضغط إضافة و يضيفه لنا و هكذا يكون الزر يعمل بنجاح.

لنقوم بوضع لون خاص للسته و خلفية لها

function add(){
var li = document.createElement("LI");
li.style.background = "aqua";
li.style.color = "green";
li.id = "li";
var input = document.getElementById("input").value;
var text = document.createTextNode(input);
li.appendChild(text);
document.getElementById("myList").appendChild(li);
}


وسنحصل على النتيجة

نلاحظ من ما سبق اننا حددنا خلفية للستة لون aqus و لون خط اخضر عبر الجافاسكربت وتم هذا الامر بنجاح.

استحضار الصور و الفيديو و المقاطع الصوتية عبر جافاسكربت

استحضار الصور

لننشأ div في ملف html
<body>
        <div id = "myDIVE">
        </div>
</body> 

و في ملف الجافاسكربت 
var myIMG = document.createElement("img"); 
myIMG.src = "tr.jpg";
myIMG.id = "img";
myIMG.style.width = "50%";
document.getElementById("myDIVE").appendChild(myIMG);


ونتيجة التصفح


حددنا الصورة tr الذي موجوده لدينا ضمن ملف العمل الرئيسي و استحضرناها عبر جافاسكربت بدون اي تعقيد او مشاكل.

استحضار ملف صوتي

في ملف html
<body>
      <div id = "myAudio">
      </div>
</body>

في ملف الجافاسكربت
var myAudio = document.createElement("audio"); 
myAudio.src = "hazt.mp3";
myAudio.controls = "controls";
document.getElementById("myAudio").appendChild(myAudio);


عند فتحه في المتصفح سيظهر كما بالشكل


كما لاحظنا بأنه تم استحضار الملف الصوتي بنجاح و كأننا استدعيناه عبر html, و ايضاً ملفات الفيديو يتم استحضارها بنفس الطريقة.

للتواصل معنا

قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام