জেএসওএন ফাংশন ফাইল
রিদওয়ান বিন শামীম
জেএসওএন ফাংশন ফাইল (JSON Function Files)
জেএসওএনএর একটি সাধারণ প্রয়োগ হল ওয়েব সার্ভার থেকে ডাটা পড়া ও ওয়েব পেজে তা প্রদর্শন করা। এই অধ্যায়ে চারটি ছোট ছোট ধাপে দেখানো হবে কীভাবে ফাংশন ফাইল ব্যবহার করে জেএসওএন ডাটা পড়া হয়।
জেএসওএন উদাহরণঃ এই উদাহরণে myTutorials.js থেকে একটি মেনু পড়া হবে ও সেটিকে ওয়েবপেজে দেখানো হবে।
<div id="id01"></div>
<script>
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i<arr.length; i++) {
out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
</script>
<script src="myTutorials.js"></script>
উদাহরণের ব্যাখ্যা
প্রথমতঃ অবজেক্টের শ্রেণীবিন্যাস তৈরি করা হয়ঃ
অক্ষরভিত্তিক শ্রেণীবিন্যাস নির্ধারণ করে কোনো অবজেক্টের শ্রেণীবিন্যাস তৈরি করা হয়। প্রত্যেকটি অবজেক্টের দুটি বৈশিষ্ট্য নির্ধারণ করে দেয়া হয়, display এবং url । শ্রেণীবিন্যাসকে myArray নাম দেয়া হয়।
myArray
var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]
দ্বিতীয়তঃ শ্রেণীবিন্যাস দেখানোর জন্য জাভাস্ক্রিপ্টের একটি ফাংশন তৈরি করা হয়ঃ myFunction() নামের ফাংশন তৈরি করা হয় যা থেকে অবজেক্টগুলো দৃশ্যমান হয় ও এইচটিএমএল লিঙ্ক জাতীয় উপাদান প্রদর্শন করে।
myFunction()
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
myFunction() কে myArray এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়। যথা,
myFunction(myArray);
তৃতীয়ত, কোন অক্ষরভিত্তিক শ্রেণীবিন্যাসকে আর্গুমেন্ট হিসেবে ব্যবহার করা(শ্রেণীবিন্যাস চলকের পরিবর্তে)ঃ
myFunction() কে array literal(অক্ষরভিত্তিক শ্রেণীবিন্যাস)এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়,
Calling myFunction()
myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]);
চতুর্থতঃ ফাংশন কলকে এক্সটারনাল js fileএ রাখা হয়ঃ
myTutorials.js নামক এক্সটারনাল js fileএ ফাংশন কলকে রাখা হয়।
myTutorials.js
myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp""
}
]);
ফাংশন কলের পরিবর্তে পেজে এক্সটারনাল স্ক্রিপ্ট যোগ করা হয়,
Add External Script
<script src="myTutorials.js"></script>
