اشتراک در خبرنامه‌ دارکوب وب

با عضویت در خبرنامه‌ی دارکوب وب مقالات و آموزش‌ها هر هفته به ایمیل شما ارسال می‌شود.

آموزش JSON مقدماتی قسمت پنجم

در ابتدا من صفحه ای به نام currency.html می سازم که در آن یک جدول و چند dropDown list برای انتخاب واحد پول و دو input برای گرفتن و نمایش واحد ها خواهم داشت.
Currency.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
</head>
<body>

<div id="box">

<h2>Currency Converter</h2>
<table>
<tr>
<td>
<input type="text" id="fromAmount" value="1"/>
</td>
<td>
<select id="from">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD">Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD" selected>US Dollar(USD)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="toAmount"/>
</td>
<td>
<select id="to">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD" selected>Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD">US Dollar(USD)</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>

خوب تنها کاری که مونده فرستادن طلاعات به این آدرس http://api.fixer.io/latest?symbols=USD,RUB
سپس گرفتن اطلاعات و محاسبه تبدیل ارز را انجام دهیم .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
<script>

function convertCurrency() {

var from = document.getElementById("from").value;
var to = document.getElementById("to").value;

var xmlHttpReq = new XMLHttpRequest();
var url = "http://api.fixer.io/latest?symbols=" + from + "," + to;

xmlHttpReq.open("GET", url, true);
xmlHttpReq.send();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

var result = xmlHttpReq.responseText;
var jsResult = JSON.parse(result);

var oneUnit = jsResult.rates[to]/jsResult.rates[from];
var amt = document.getElementById("fromAmount").value;
document.getElementById("toAmount").value = (oneUnit*amt).toFixed(2);

}

}

}

</script>

</head>
<body onload="convertCurrency();">

<div id="box">

<h2>Currency Converter</h2>
<table>
<tr>
<td>
<input type="text" id="fromAmount" value="1" onkeyup="convertCurrency();"/>
</td>
<td>
<select id="from" onchange="convertCurrency();">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD">Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD" selected>US Dollar(USD)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="toAmount"/>
</td>
<td>
<select id="to" onchange="convertCurrency();">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD" selected>Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD">US Dollar(USD)</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>

و تمام

jsonpic4

خوب آموزش ما اینجا تما می شود در مورد json بیشتر تحقیق کنید ، کد هایی که با هم نوشتیم را بهبود ببخشید و خود از ابتدا آنها را بنویسید ، موفق و شاد باشید.

درباره نویسنده

پوریا

سلام ، من پوریا هستم با جاوا آشنایی دارم به هوش مصنوعی و امنیت علاقه مندم و امید وارم آموزش هایی که در وب سایت قرار می دم برای شما مفید باشه ، موفق باشید {^}

نظر دهید

سوالات، انتقادات و پیشنهادات خود را در مورد این مطلب برای ما بفرستید. :-)