java_script الدرس 12

java_script الدرس 12


النتائج 1 إلى 3 من 3

الموضوع: java_script الدرس 12

  1. #1

    new java_script الدرس 12



    بسم الله الرحمن الرحيم
    *********
    "اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم "

    تحدثنا فيما سبق عن HTML DOM وماذا تعنى وتكلمنا عن ال element
    وتكلمنا ايضا عن ال node وال parent وال root الى غير ذلك
    لكن نسينا ان نوضح جزئية صغيرة الا وهى ال sibling


    ما هو ال sibling

    ============
    كا ذكرنا ان صفحات ال HTML تشبه لشى ما الشجرة او شجرة العائلة
    وقلنا ان كل Tag عبارة عن Node اذا اشاملت على عدد مت ال tags او element

    كود HTML:
    <!DOCTYPE HTML>
    <html> <!-- root  --> 
        <head> <!-- first child from Html  -->
    	   <title>Untitled 1</title>
        </head>
    
    <body>
    
        <h1>welcome With HTML DOM</h1> <!--     من هنا الى  -->
        <b>by / zaizo max </b>  <!--     sibling  for  <b > and <input>    -->
        <input /> <!--      children          هنا يسمى -->
    
    </body>
    </html>
    هذا توضيح لما سبق الجديد هنا موضوع ال sibling وهنا ان الوسم <h1 > والوسم <b >
    هما sibling اى انهم يندرجان تحت الوسم <body > وهو هنا parent لهما وكلا منهما h1 وال
    b مضافا عليهم input يعتربون children لل body اى ابناء له وكما قلنا فى السابق ان
    كل tag يحتوى على عدد من tags بداخله كل هذه ال tags تعتبر ابناء له وهو الاب لهم


    تطبيق على HTML DOM

    ==================
    ذكرنا فيما سبق كيفية تعريف المتغيرات وكيفية اسناد القيم لها
    لكن اليوم الموضوع مختلف . ارجع معى بالذاكرة الى ان تصل الى انواع المتغيرات
    قلنا ان هناك نوع بسمى Object ولم نتكلم عنه حان الان موعده

    ما هو ال object
    ============
    ال object او الكائن على مختلف التعريفات له هو النسخة من الشئ
    ماذا يعنى هذا ؟!! لاحظ معى ( انت قمت بكتابة الكلمة (ZAizo MAx ) وقمت بعمل
    copy لها وعملت لها paste ماذا لاحظت ؟؟ ان الكلمة هى هى نفس الكمة فى عدد حروفها
    فى شكلها . كذلك ال object اذا عرفنا متتغير على انه object من HTML لاحظ انه سياخد كل
    وسوم HTML كاملة اى كل محتويات الصفحة ومع امكانية التعديل عليها ولاحظ ايضا ان كل Tag
    يعتبر object كما سياتى المطلوب الان انك تعرف ان ال object هو نسخة
    مطابقة من الشئ

    لاحظ معى
    كود HTML:
    <!DOCTYPE HTML>
    <html>
    <head>
    	****** http-*****="content-type" content="text/html" />
        ****** charset="utf-8" />
    	****** name="author" content="ZAizo_max" />
    
    	<title>HTML DOM</title>
    </head>
    
    <body>
    
        <div id="max">
            <p> HTML DOM  اهلا وسهلا بكم معنا فى </p>
        </div>
        <button  onclick="zaizo();" style="width: 50px; height: 25px;" ></button>
        <script type="text/javascript">
        function zaizo()
        {
        var x = document.getElementById("max");
        x.firstChild.innerHTML="This Node انت الان قمت بتغيير محتوى";
        }
        </script>
    </body>
    </html>
    كما سبق وان ذكرت ان كل tag يعتبر object اذن انت الان قد عرفت ان المتغير x تم تعريفه
    على انه object من div اى انه قد حصل على كل خصائصه بدليل انه قد غير محتواه عند الضغط على
    الزر . دعك الان من onClick وماذا تعنى سيتم شرح جميع الاحداث بالتفصيل ان شاء الله

    لكن المثير الان للاهتمام هو x.fiestChild هل لاحظت ذلك ؟!! اذا لاحظت ذلك انت الان قد فهمت ان
    كل tag وفى مثالنا هنا div اذا اشتمل على عدد من ال elements فهو بذلك الاب parent لهم وهم
    ابناء لهم children وهو هنا ال( p) وهو tag اى انه element كما ذكرت اليس كذلك ؟


    اذن انت الان قد عرفت ان DOM تستطيع التعديل على صفحات HTML والتحكم بها
    مثال اخر عملى اخر لكى تتضح صورة parent وال node

    كود HTML:
    <html>
    <head>
    	<title>HTML DOM </title>
    </head>
    
    <body style="">
    
        <div>
        <br />
            <b id="max2">node اضغط الزر ليظهر لك اب هذا ال</b>
        </div>
        <button  onclick="zaizo();" style="width: 50px; height: 25px;" ></button>
        <script type="text/javascript">
        function zaizo()
        {
        var x = document.getElementById("max2");
       alert( x.parentNode.nodeName);
        
        }
        </script>
    </body>
    </html>
    هل لا حظت ذلك x.parentNode وكيفية عرض اسم ال parent لل element وهو B
    والاب له هو div

    مثال اخر لتوضيح فكرة ال object

    كود HTML:
    <html>
    <head>
    	<title>HTML DOM </title>
    </head>
    
    <body style="">
    
        <div id="max">
        <br />
            <b id="max2">object مثال يوضح ان كل تاج عبارة عن </b>
        </div>
        <button  onclick="zaizo();" style="width: 50px; height: 25px;" ></button>
        <script type="text/javascript">
        function zaizo()
        {
        var x = document.getElementById("max2");
      alert( x.parentNode);
        
        }
        </script>
    </body>
    </html>
    هذا يوضح لك ان كل tag عبارة عن object ويمكن التعديل على
    اى خاصية داخل ال element او ال tag

    ============================
    الحمد لله الذى بنعمته تتم الصالحات

    أنا لا أصدق احدا حتى اتأكد مما يقول
    ليس لضعف ثقــــــــة فيـــــــــــــــه
    ولكن هذا ما علمنى إياه ربى
    _____________________zAiZo_MaX________________

  2. #2

    افتراضي رد: java_script الدرس 12

    ابدعت والله اخي شروحات اكثر من متميزة ومن لم يشاهد دروسك
    راح عليه الابداع في الجافا ولن يتعلمها بعد ذلك لانك توضح كل كبيرة وصغيرة
    بارك الله فيك ولك مني اجمل تحيه
    بالتوفيق

  3. #3

    افتراضي رد: java_script الدرس 12

    اقتباس المشاركة الأصلية كتبت بواسطة Mr.JnOoN مشاهدة المشاركة
    ابدعت والله اخي شروحات اكثر من متميزة ومن لم يشاهد دروسك
    راح عليه الابداع في الجافا ولن يتعلمها بعد ذلك لانك توضح كل كبيرة وصغيرة
    بارك الله فيك ولك مني اجمل تحيه
    بالتوفيق
    مشكور جدا اخى مرورك لموضوعاتى شرف كبير
    تمنياتى لك بالابداع فى مجالك
    تحياتى لك
    التعديل الأخير تم بواسطة zaizo max ; 04-13-2013 الساعة 12:19 PM

    أنا لا أصدق احدا حتى اتأكد مما يقول
    ليس لضعف ثقــــــــة فيـــــــــــــــه
    ولكن هذا ما علمنى إياه ربى
    _____________________zAiZo_MaX________________

المواضيع المتشابهه

  1. java_script الدرس 11
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 4
    آخر مشاركة: 01-21-2016, 12:08 PM
  2. java_script الدرس الاول
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 4
    آخر مشاركة: 04-13-2013, 07:50 PM
  3. java_script الدرس الخامس
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 6
    آخر مشاركة: 04-09-2013, 03:07 AM
  4. java_script الدرس الرابع
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 4
    آخر مشاركة: 04-06-2013, 07:48 PM
  5. java_script الدرس الثانى
    بواسطة zaizo max في المنتدى لغات برمجة المواقع
    مشاركات: 3
    آخر مشاركة: 04-03-2013, 03:58 AM

المفضلات

أذونات المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •