آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش XML   >   جاوا اسکریپت و XML   >   ساخت یک برنامه کاربردی با XML

ساخت یک برنامه کاربردی با XML :

در این بخش قصد داریم تا با ارایه یک مثال عملی ، نحوه استفاده از XML در عمل و ساخت یک برنامه کاربردی را نشان دهیم .
در این مثال ، یک فایل XML داریم که اطلاعات مربوط به چند آهنگ را در خود نگهداری می کند . اسکریپتی نوشته شده که به وسیله دو دکمه فرمان بعدی و قبلی ، بین آهنگ ها حرکت کرده و با هر بار زدن یک دکمه فرمان ، اطلاعات آهنگ قبلی یا بعدی نشان داده می شود .
این مثال را به صورت گام به گام نمایش داده و تشریح می کنیم .

1 . محتویات فایل XML :

فایل XML به کار رفته در این مثال ، شامل اطلاعات زیر است :

2 . کد اسکریپت و برنامه :

جدول زیر ، کد فایل HTML و اسکریپت طراحی شده در آن را نمایش می دهد . همچنین خروجی واقعی مثال نیز ، نشان داده شده است . کد مثال را مرور نموده و به آن دقت نمایید . سپس در پایان مثال به تشریح نکات مهم آن می پردازیم :

کد <!DOCTYPE html>
<html>
  <head>

    <script>
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari     //  برای تبادل اطلاعات ajax ساخت یک شی
          xmlhttp = new XMLHttpRequest();
        }

        xmlhttp.open("GET", "cd_catalog.xml", false); //  و خواندن اطلاعات آت XML باز کردن فایل
        xmlhttp.send();   //     ارسال درخواست به سرور
        xmlDoc = xmlhttp.responseXML;       //  ذخیره پاسخ سرور در یک متغیر دلخواه

        x = xmlDoc.getElementsByTagName("CD");     //  و ذخیره آن CD  خواندن اطلاعات المنت
        i = 0;       //    تعیین شمارشگر برنامه

        function displayCD() {  //   انتخاب شده و نمایش آن CD تابع خواندن اطلاعات
              artist = (x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);   // نمایش اطلاعات خواننده آهنگ
              title = (x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);  //  نمایش عنوان آهنگ
              year = (x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);   // نمایش سال انتشار
              txt = "Artist: " + artist + "<br>Title: " + title + "<br>Year: " + year;  // ریختن تمام اطلاعات آهنگ در یک متغیر
              document.getElementById("showCD").innerHTML = txt;  //     صفحه جهت نمایشdiv ریختن اطلاعات متغیر بالا در عنصر
          }

       function next( ) { // تابع رفتن به آهنگ بعدی
          if (i < x.length - 1) {
            i++;
            displayCD( );
                }
        }

      function previous( ) { // تابع رفتن به آهنگ قبلی
        if (i > 0) {
        i--;
        displayCD( );
               }
        }
  </script>
</head>
  <body onload="displayCD( )">

    <div id='showCD'></div><br>
    <input type="button" onclick="previous( )" value="<<" />
    <input type="button" onclick="next( )" value=">>" />

  </body>
</html>
خروجی مشاهده خروجی مثال

3 . نکات کد فایل HTML :

  • در تگ body تابع ( ) displayCD فراخوانی شده ، تا در هنگام لود صفحه اطلاعات اولین آهنگ فایل XML به صورت پیش فرض نمایش داده شود .
  • تگ div ، اطلاعات آهنگ انتخاب شده در هر لحظه را نمایش می دهد .
  • دو دکمه فرمان برای انجام عملیات حرکت بین آهنگ ها به کار می روند .


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :