ICT & others Information

JavaScript_part15_জাভাস্ক্রিপ্ট অ্যারে অবজেক্ট তৈরি করা, একসেস করা, প্রোপার্টিজ করা, জাভাস্ক্রিপ্ট অ্যারে মেথড ও জাভাস্ক্রিপ্ট কনক্যাট অ্যারে

March 05, 2020 Sharmin Khan Ishita

জাভাস্ক্রিপ্ট অ্যারে(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>

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;

অ্যারে অবজেক্টের প্রোপার্টিজ

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>

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>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0077.html ফাইলটি ওপেন করুন। Input টেক্সট বক্স ভ্যালু দিন এবং অ্যারে পুশ করুন এবং outপুট টেক্সট বক্স আউটপুট দেখুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

জাভাস্ক্রিপ্ট অ্যারে pop( ) মেথডঃ

Push মেথডে আমরা অ্যারের শেষে একটি এ্যলিমেন্ট যুক্ত করেছি্ । আর pop ( ) মেথড ব্যবহার করে অ্যারের শেষ উপদানটি একটি একটি করে রিমুভ বা মুছে ফেলা হয় এবং ইনডেক্সিং এক এক করে কমতে থাকে। চলুন নিচের প্রোগ্রামটি প্রাকটিস করা যাক।

প্রোগ্রাম : pop() মেথডের উদাহরন

১। আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0078.html নামে সেভ করেছি।

<html>

<head>

<title>JavaScript array pop example</title>

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();

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>

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>

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>

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>

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>

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>

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 ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

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...