JavaScript_part15_জাভাস্ক্রিপ্ট অ্যারে অবজেক্ট তৈরি করা, একসেস করা, প্রোপার্টিজ করা, জাভাস্ক্রিপ্ট অ্যারে মেথড ও জাভাস্ক্রিপ্ট কনক্যাট অ্যারে
জাভাস্ক্রিপ্ট অ্যারে(Array) অবজেক্ট
একটি অ্যারে হল একটি বিশেষ ধরনের ভেরিযবেল, যেটি একই সময়ে একাধিক বা অনেক ভেরিযবেল জমা
রাখতে পারে। অনেক প্রোগ্রামাররা অন্যান্য ল্যাংগুএজে যে অ্যারে দেখতে পান জাভাস্ক্রিপ্টের
একই রকম
জাভাস্ক্রিপ্টের অ্যারে ব্যবহার করার সময় নিচের বিষযগুলো সবসময় মনে রাখা
উচিত:
·
অ্যারের
একটি বিশেষ ধরনের. ভেরিযবেল
·
অ্যারের নাম
ব্যবহার করে এবং [] বন্ধনীর মধ্যে পজিশন বা ইনডেক্স ব্যবহার করে অ্যারে-তে ভ্যালু
রাখতে হয়। যেমন myArray[2] = "Hello World";
·
অ্যারের ভ্যালু এক্সেস করার সময় অ্যারের নাম এবং লোকেশন
ব্যবহার করতে হয়।
অ্যারে অবজেক্ট তৈরি করা
অ্যারে ডিক্লায়ের করা সাধারন ভেরিয়েবল লেখার থেকে একটু আলাদা। কারন
জাভাস্ক্রিপ্টে অ্যারের সাথে ভেরিয়েবল এবং প্রোপারটি যুক্ত আছে।অ্যারে অবজেক্ট
তৈরি করতে আপনাকে অবশ্যই একটি বিশেষ ফাংশন (Array()) ব্যবহার করতে হবে।
অ্যারে তিন ভাবে তৈরি
করা যায়
১. রেগুলার নিয়মঃ
var myArray = new Array();
এবার তৈরিকৃত অ্যারেতে
ভ্যালু আসাইন করতে হবে এভাবে-
myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";
২. কন্ডেন্সড নিয়মঃ
var myArray =new Array("Football "," Baseball
"," Cricket ");
৩. লিটারেল নিয়মঃ
var myArray =["Football "," Baseball
"," Cricket "];
এবার উপরোক্ত উদাহরনের
একটি পুর্নাঙ্গ প্রোগ্রাম লিখি
প্রোগ্রাম : Array উদাহরন
১। আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0076.html নামে সেভ করেছি।
<html>
<head>
<title>Array</title>
</head>
<body>
<script
type="text/javascript">
var myArray = new Array();
myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";
document.write(myArray[0] +" "+
myArray[1] +" "+ myArray[2]);
</script>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0076.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
অ্যারে একসেস করা
একটি অ্যারের ইন্ডেক্স
নাম্বার বা লোকেশন নাম্বার ধরে অ্যারে একসেস করতে হয়।
যেমনঃ var
name= myArray [0];
var name1= myArray [1];
…………………………………..
একটি অ্যারেতে বিভিন্ন অবজেক্টস
জাভাস্ক্রিপ্টের সকল ভেরিয়েবলগুলি
হল অবজেক্ট . যেহেতু অ্যারের এলিমেন্ট হল অবজেক্ট, ফাংশনগুলি হল অবজেক্ট তাই আপনি
একটি বিভিন্ন ধরনের অবজেক্ট বা ভেরিয়েবল রাখতে পারবেন।
আপনি একটি অ্যারের মধ্যে অবজেক্টে রাখতে পারেন, আপনি একটি আরের মধ্যে ফাংশন
রাখতে পারেন, আপনি একটি অ্যারের মধ্যে আরে
রাখতে পারেন যেমনঃ
myArray[0]=Date.now;
myArray[1]=myFunction();
myArray[2]=myCars;
myArray[1]=myFunction();
myArray[2]=myCars;
অ্যারে অবজেক্টের প্রোপার্টিজ
constructor, length, prototype এগুলি হল নাম্বার অবজেক্টের প্রোপার্টি
constructor-
অ্যারে অবজেক্ট প্রোটোটাইপ যে
ফাংশনটি তৈরী করবে সেই ফাংশনটি রিটার্ন করে।
length- এটি একটি অ্যারে কতগুলো এলিমেন্ট নিয়ে গঠিত তা নির্নয় করে।
prototype-
পোটোটাইপ ব্যবহার করে
আপনি অ্যারে অবজেক্টের সাথে নতুন
নতুন প্রোপার্টি বা মেথড যোগ করতে পারবেন।
অ্যারে অবজেক্টের মেথড
অ্যারে অবজেক্টের মেথডগুলো নিম্নে দেয়া হল। আমরা এবার এর
কিছু উদাহরন দেখব। তবে তার আগে আমাদের প্রোপার্টিজ এবং মেথডগুলো কে কি ভ্যালু
রিটার্ন করে তা একটু চোখ বুলিয়ে নেই।
মেথড
|
বর্ণনা
|
join()
|
অ্যারের সকল
উপাদানকে একটি স্ট্রিং এ রম্নপামত্মর করে
|
concat()
|
দুটি বা ততোধিক
অ্যারেকে একটি অ্যারেতে রম্নপামত্মর করে
|
pop()
|
শেষ উপদানটি
একটি একটি করে রিমুভ বা মুছে ফেলা হয় এবং ইনডেক্সিং এক এক করে কমতে থাকে
|
pus()
|
একটি অ্যারের
শেট পজিশনে নতুন আরদ্রকটি এলিমেট যুক্ত করা এবং
অ্যারে
ইনডেক্সিং ১ বৃদ্ধি করা।
|
reversre()
|
উল্টাভাবে বা
বিপরীত ক্রমান্বয়ে সাজাতে
|
shift()
|
অ্যারের প্রথম
এলিমেন্টটি রিমুভ
|
slice()
|
একটি অ্যারের
উপাদানকে কেটে ফেলে
|
sort()
|
অ্যারের
এলিমেন্টগুলিকে সর্ট করে
|
spliece()
|
অ্যারে থেকে
উপাদান যোগ বা মুছে ফেলে
|
valueOf()
|
একট অ্যারে তার ভ্যালু রিটার্ন করে।
|
toString()
|
অ্যারেকে
স্ট্রিং-এ রম্নপামত্মর করে
|
unshift()
|
একেবারে
অ্যারের শুরুর ইন্ডেক্স-এ নতুন এলিমেন্ট যোগ করে
|
জাভাস্ক্রি্প্ট অ্যারে push () মেথডঃ
আগেই বলেছি যে পুশ মেথডের কাজ হল একটি অ্যারের শেষ পজিশনে নতুন আরেকটি
এলিমেট যুক্ত করা এবং অ্যারে ইনডেক্সিং ১ বৃদ্ধি করা। এই উদাহনে আমরা দেখব কিভাবে
পুশ মেখড ব্যবহার করতে হয়। এখানে dynamic_array নামক অ্যারে ডিকলার করা হয়েছে। নিচের মত করে প্রোগ্রামটি প্রাকটিস করুন
প্রোগ্রাম : push () মেথডের উদাহরন
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0077.html নামে সেভ করেছি।
<html>
<head>
<title>JavaScript
array push() method example</title>
<script
language="JavaScript">
var dynamic_array = new Array();
function add_item() {
var item = document.getElementById('inputbox').value;
dynamic_array.push(item);
document.getElementById('outputbox').value
= dynamic_array;
}
</script>
</head>
<body>
<h5>Example
of array's push() method</h5>
Input
Item<input type="text" id="inputbox"
value=""/>
<br>
Output
Item<input type="text" id="outputbox"
value=""/>
<br>
<input
type="button" onClick="add_item();"
value="Push"/>
</body>
</html>
ফলাফল : এবার
আপনার ব্রাউজারে program_0077.html
ফাইলটি ওপেন করুন। Input টেক্সট বক্স
ভ্যালু দিন এবং অ্যারে পুশ করুন এবং outপুট টেক্সট বক্স আউটপুট দেখুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।
জাভাস্ক্রিপ্ট অ্যারে
pop( ) মেথডঃ
Push মেথডে আমরা অ্যারের শেষে একটি এ্যলিমেন্ট যুক্ত
করেছি্ । আর pop ( ) মেথড ব্যবহার করে
অ্যারের শেষ উপদানটি একটি একটি করে রিমুভ
বা মুছে ফেলা হয় এবং ইনডেক্সিং এক এক করে
কমতে থাকে। চলুন নিচের প্রোগ্রামটি প্রাকটিস করা যাক।
প্রোগ্রাম : pop() মেথডের উদাহরন
১। আপনার এডিটরে নিম্নোক্ত
কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0078.html নামে সেভ করেছি।
<html>
<head>
<title>JavaScript
array pop example</title>
<script
type="text/javascript">
var arr=new Array(5);
arr[0]="Bappi";
arr[1]="Mebin";
arr[2]="Hira";
arr[3]="Wahid";
arr[4] = "Munir";
arr[5] = "Asad";
document.write("Array contains(Before
pop())="+arr+"</br>");
arr.pop();
arr.pop();
document.write("Array contains(After pop())
="+arr+"</br>");
</script>
</head>
<body>
<h4>Example
of array pop() method</h4>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0078.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
জাভাস্ক্রিপ্ট কনক্যাট(concat( ) অ্যারে
আমরা দুটি বা ততোধিক অ্যারেকে একটি অ্যারেতে রম্নপামত্মর করতে concat( ) মেথড ব্যবহার করব।
নিয়মটি হলো new Array= first Array
.concat( Second Array, Third Array ইত্যাদি)
চলুন নিচের প্রোগ্রামটি
প্রাকটিস করা যাক।
প্রোগ্রাম : concat () মেথডের উদাহরন
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0079.html নামে সেভ করেছি।
<html>
<head>
<title>JavaScript
array concat() example</title>
<script
type="text/javascript">
var firstArray = new Array(3);
firstArray[0]="Bappi";
firstArray[1]="Mebin";
firstArray[2]="Hira";
var secondArray = new Array(3);
secondArray[0]="Munir";
secondArray[1] = "Asad";
secondArray[2] = "Wahid";
var thirdArray = new Array(2)
thirdArray[0] = "Nayan";
thirdArray[1] = "Priom";
var finalArray =
firstArray.concat(secondArray,thirdArray);
document.write("<b>First array
is</b>==>"+firstArray+"<br> ");
document.write("<b>Second array
is</b> ==>" + secondArray + "<br> ");
document.write("<b>Third array
is</b> ==>" + thirdArray + "<br> ");
document.write("<b>Concatenated array is</b>
==>"+finalArray+"<br> ");
</script>
</head>
<body>
<h4>
Example of concatenating two arrays
</h4>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0079.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
ব্যাখ্যা: এখানে আমরা তিনটি অ্যারে ডিকলারের করেছি এবং concat এর নিয়মনুয়ায়ী যুক্ত করেছি।
জাভাস্ক্রিপ্ট reverse( ) মেথড :
Reverse মেথড ব্যবহার করে
একটি অ্যারেকে আমরা উল্টাভাবে বা বিপরীত ক্রমান্বয়ে সাজাতে পারি। । নিয়মটি হল
reversedArray = arrayname.reversec)
চলুন নিচের প্রোগ্রামটি
দেখা যাক
প্রোগ্রাম : reverse() মেথডের উদাহরন
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0080.html নামে সেভ করেছি।
<html>
<head>
<title>JavaScript
array reverse() example</title>
<script
type="text/javascript">
var arr = new Array(5);
arr[0]="Bappi";
arr[1]="Mebin";
arr[2] = "Hira";
arr[3] = "Munir";
arr[4] = "Wahid";
document.write("<b>Before Array
Reverse ==></b>=>"+arr+"<br> ");
document.write("<b>After Reverser
Array ==></b> =>"+arr.reverse()+"<br> ");
</script>
</head>
<body>
<h4>
Example of reversing an array
</h4>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0080.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
জাভাস্ক্রিপ্ট Array shift ( )
Pop ( ) মেথডে যেমন অ্যারে থেকে শেষ এলিমেন্টটি রিমুভ হয়। shift ( ) মেথডে অ্যারের প্রথম এলিমেন্টটি রিমুভ হয়। অর্থাৎ
shift ( ) মেথড হল Pop ( ) মেথডের বিপরীত প্রক্রিয়া নিয়মটি হল
arrayname. shift ( )
চলুন নিচের উদাহরণ দেখা
যাক
প্রোগ্রাম : shift() মেথডের উদাহরন
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0081.html নামে সেভ করেছি।
<html>
<head>
<title>
JavaScript
array shift() example
</title>
<script
type="text/javascript">
var arr =
new Array(3);
arr[0]="Bappi";
arr[1]="Mebin";
arr[2]="Hira";
document.write("<b>Array
before shift is </b>=>"+arr+"<br> ");
document.write("<b>Shifted
element is </b>=>"+arr.shift()+"<br> ");
document.write("<b>Array
after shift is</b>=>"+arr+"<br> ");
</script>
</head>
<body>
<h4>
Example of Shifting array elements
</h4>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0081.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
জাভাস্ক্রিপ্ট Array join ( ) মেথড :
জাভাস্ক্রিপ্টে- এ অ্যারের সকল
উপাদানকে একটি স্ট্রিং এ রম্নপামত্মর করতে হলে join ( ) মেথড ব্যবহার করতে হবে। নিয়মটি হল arrayname.
join (separator ) । চলুন নিচের উদাহরণ
দেখা যাক ।
প্রোগ্রাম : join () মেথডের উদাহরন
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0082.html নামে সেভ করেছি।
<html>
<title>JavaScript Array join</title>
<h3>JavaScript Array join</h3>
<script
language="JavaScript">
var array=new Array();
array[0]="Bappi";
array[1]="Mebin";
array[2]="Hira";
array[3]="Wahid";
document.write("<b>"+"Element of the array before
joining are "+"</b>"+ "<br />");
document.write("================="+ "<br />");
for(var i=0;i<array.length;i++){
document.write(array[i]+"<br>")
}
document.write( "<br
/>");
array1 = array.join("-");
document.write("<b>"+"Element of the array after
joining are "+"</b>"+ "<br />");
document.write("================="+ "<br />");
document.write(array1);
</script>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0082.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
জাভাস্ক্রিপ্ট অ্যারে slice ( ) মেথড :
slice ( ) মেথড একটি অ্যারের উপাদানকে কেটে ফেলে । এক্ষেত্রে শেষ ইনডেক্স দিলে তা ঐ অবস্থানের উপাদান গুলোকে বাদ বা রিমুভ
করে দেয়
নিয়মটি arrayname.
slice (startindex, endindex )
চলুন নিচের
প্রোগ্রামটিকে লক্ষ্য করা যাক ।
প্রোগ্রাম : slice() মেথডের উদাহরন
১. আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0083.html নামে সেভ করেছি।
<html>
<head>
<title>
JavaScript array slice() example
</title>
<script type="text/javascript">
var arr = new Array(5);
arr[0]="Bappi";
arr[1]="Hira";
arr[2]="Mebin";
arr[3]="Wahid";
arr[4]="Munir";
document.write("<b>Original Array is
</b>=>"+arr+"<br>");
document.write("<b>slice(1)</b>=>"+arr.slice(1)+"<br>
");
document.write("<b>slice(0,2)</b>=>"+arr.slice(0,2)+"<br>
");
document.write("<b>slice(3,4)</b>=>"+arr.slice(3,4)+"<br>
");
</script>
</head>
<body>
<h4>
Example of implementing
slice() method on array
</h4>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0083.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
অ্যারে sort ( ) :
sort
( ) মেথড ব্যবহার করে
অ্যারের উপাদানগুলোকে alphabetically সাজাতে পারি।
নিয়মটি হল
arrayname.sort (sort
function name) চলুন নিচের উদাহরণ দেখা যাক।
প্রোগ্রাম : ভেরিয়েবলের উদাহরন
১. আপনার
এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0084.html নামে সেভ করেছি।
<html>
<head>
<title>
JavaScript
array sort() alphabetically
</title>
<script
type="text/javascript">
var
arr = new Array(5);
arr[0]="Wahid";
arr[1]="Bappi";
arr[2]="Mebin";
arr[3]="Asad";
arr[4]="Hira";
document.write("<b>Original
Array is </b>=>"+arr+"<br>");
document.write("<b>Sorted
array is</b>=>"+arr.sort()+"<br> ");
</script>
</head>
<body
>
<h4>
Example of implementing sort() method on alphabets
</h4>
</body>
</html>
ফলাফল : এবার আপনার ব্রাউজারে program_0084.html
ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল
দেখতে পাবেন।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...