کاربرد‌های XML

کاربرد‌های XML

سلام دوستان
تا حالا از XML زیاد صحبت کردیم حالا وقتش شده که راجب کاربردهای XML براتون بگیم .
این مطلب اخرین مطلب مربوط به این بخش است که با هم بررسی میکنیم.

در این مطلب ما از فایل “cd_catalog.xml” استفاده میکنیم که در مطالب قبل کد هاس ساختاریش گفتیم و دیگه نیاز نیست مجدد بگیم.

Display the First CD in an HTML div Element

مثال زیر داده‌هارا از اولین عنصر CD می‌گیرد. و آن‌هارا در یک عنصر HTML با “id=”showCD نشان می‌دهد.

زمانی که صفحه بارگذاری شد تابع ()displayCD فراخوانی می‌شود:

x=xmlDoc.getElementsByTagName(“CD”);
i=0;
function displayCD()
{
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;
}

Navigate بین  CD ها

نکته: Navigate در اصل به معنای راندن کشتی یا هواپیما می‌باشد که در علوم IT و طراحی وب به معنی جابه‌جایی و گشت زدن بین لینک‌ها، عناصر و … می‌باشد. به همین منظور از ترجمه آن خودداری کرده تا با این کلمه ‌آشنا شوید.

برای جابه‌جایی بین CDها، در مثال پایین، تابع ‌های next() و previous() را اضافه نمودیم:

function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
{
i++;
displayCD();
}
}
function previous()
{ // displays the previous CD, unless you are on the first CD
if (i>0)
{
i–;
displayCD();
}
}

نمایش اطلاعات آلبوم زمانی که روی یک CD  کلیک می‌کنید

در مثال های قبل براتون اطلاعات رو نمایش دادیم و دو تابع برای جابجایی زدیم حالا میخواییم اطلاعات آلبوم را زمانی که کاربر بر روی یک CD کلیک می‌کند نشان دهیم:


<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>
<p>Click on a CD to display album information.</p>
<p id=’showCD’></p>
<table id=”demo”></table>
<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open(“GET”, “cd_catalog.xml”, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName(“CD”);
table=”<tr><th>Artist</th><th>Title</th></tr>”;
for (i = 0; i <x.length; i++) {
table += “<tr onclick=’displayCD(” + i + “)’><td>”;
table += x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue;
table += “</td><td>”;
table += x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue;
table += “</td></tr>”;
}
document.getElementById(“demo”).innerHTML = table;
function displayCD(i) {
document.getElementById(“showCD”).innerHTML =
“Artist: ” +
x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue +
“<br>Title: ” +
x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue +
“<br>Year: ” +
x[i].getElementsByTagName(“YEAR”)[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>

خرورجی کد بالا در مرورگر به صورت زیر است:


<p>Click on a CD to display album information.</p>
<p ></p>
<table ><tbody><tr><th>Artist</th><th>Title</th></tr><tr onclick="displayCD(0)"><td>Bob Dylan</td><td>Empire Burlesque</td></tr><tr onclick="displayCD(1)"><td>Bonnie Tyler</td><td>Hide your heart</td></tr><tr onclick="displayCD(2)"><td>Dolly Parton</td><td>Greatest Hits</td></tr><tr onclick="displayCD(3)"><td>Gary Moore</td><td>Still got the blues</td></tr><tr onclick="displayCD(4)"><td>Eros Ramazzotti</td><td>Eros</td></tr><tr onclick="displayCD(5)"><td>Bee Gees</td><td>One night only</td></tr><tr onclick="displayCD(6)"><td>Dr.Hook</td><td>Sylvias Mother</td></tr><tr onclick="displayCD(7)"><td>Rod Stewart</td><td>Maggie May</td></tr><tr onclick="displayCD(8)"><td>Andrea Bocelli</td><td>Romanza</td></tr><tr onclick="displayCD(9)"><td>Percy Sledge</td><td>When a man loves a woman</td></tr><tr onclick="displayCD(10)"><td>Savage Rose</td><td>Black angel</td></tr><tr onclick="displayCD(11)"><td>Many</td><td>1999 Grammy Nominees</td></tr><tr onclick="displayCD(12)"><td>Kenny Rogers</td><td>For the good times</td></tr><tr onclick="displayCD(13)"><td>Will Smith</td><td>Big Willie style</td></tr><tr onclick="displayCD(14)"><td>Van Morrison</td><td>Tupelo Honey</td></tr><tr onclick="displayCD(15)"><td>Jorn Hoel</td><td>Soulsville</td></tr><tr onclick="displayCD(16)"><td>Cat Stevens</td><td>The very best of</td></tr><tr onclick="displayCD(17)"><td>Sam Brown</td><td>Stop</td></tr><tr onclick="displayCD(18)"><td>T'Pau</td><td>Bridge of Spies</td></tr><tr onclick="displayCD(19)"><td>Tina Turner</td><td>Private Dancer</td></tr><tr onclick="displayCD(20)"><td>Kim Larsen</td><td>Midt om natten</td></tr><tr onclick="displayCD(21)"><td>Luciano Pavarotti</td><td>Pavarotti Gala Concert</td></tr><tr onclick="displayCD(22)"><td>Otis Redding</td><td>The dock of the bay</td></tr><tr onclick="displayCD(23)"><td>Simply Red</td><td>Picture book</td></tr><tr onclick="displayCD(24)"><td>The Communards</td><td>Red</td></tr><tr onclick="displayCD(25)"><td>Joe Cocker</td><td>Unchain my heart</td></tr></tbody></table>

خب دوستان این مطلب هم تموم شد. این مطلب آخریم پست در این بخش بود.

در مطلب بعد بخش جدید از اموزش XML را شروع میکنیم .در بخش بعد تکنولوژی های جدید XML را معرفی میکنیم و چند زبون از XML را مثال میزنیم با ما باشید.

دوستان هر سوالی در مورد این بخش داشتید در نظرات بگید

موفق پیروز باشید

 



اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google