Awesome! টিউনস
সকল Awesome! টিউনস

জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-১১] :: জাভাস্ক্রিপ্ট অ্যারে (JavaScript Array)

1,815 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ জাভাস্ক্রিট
প্রকাশিত
Level 0

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

আসসালামু আলাইকুম । কেমন আছেন সবাই? আশা করি মহান আল্লাহ্‌ তা'আলার অশেষ রহমতে সবাই ভাল আছেন । আমিও আলহামদুলিল্লাহ্‌ ভাল আছি ।

আমার আজকের আলোচনার বিষয় জাভাস্ক্রিপ্ট অ্যারে । এটি আমার জাভাস্ক্রিপ্ট এর একদশ তম পর্ব । আমি দশম পর্বে জাভাস্ক্রিপ্ট পপ-আপ বক্স নিয়ে আলোচনা করেছিলাম । যাইহোক, এবার আমরা আমাদের মূল আলোচনায় ফিরে আসি । আমরা জাভাস্ক্রিপ্ট এর চতুর্থ পর্বে জাভাস্ক্রিপ্ট ভেরিয়েবল নিয়ে আলোচনা করেছি । জাভাস্ক্রিপ্ট ভেরিয়েবল এ সাধারনত একটি মান ব্যবহার করেছি । এই টিউটোরিয়ালটি পড়ার আগে আপনাকে অবশ্যই জাভাস্ক্রিপ্ট ভেরিয়েবল সম্পর্কে জানতে হবে । যারা জাভাস্ক্রিপ্ট ভেরিয়েবল নিয়ে টিউটোরিয়ালটি দেখেননি তাঁরা  দয়া করে জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৪] :: জাভাস্ক্রিপ্ট ভেরিয়েবল দেখে আসুন । ভেরিয়েবল এ সাধারণত প্রথমে একটি মান সংরক্ষণ করা হয় এবং পরবর্তীতে এই ভেরিয়েবল নিয়ে কাজ করা হয় । তবে, ভেরিয়েবলের একটি সীমাবদ্ধতা রয়েছে । সেটা হচ্ছে একটি ভেরিয়েবল এ আপনি কেবল একটি মান সংরক্ষণ করতে পারেন । অ্যারে হচ্ছে বিশেষ ধরনের ভেরিয়েবল যেখানে আপনি  একাধিক মান রাখতে পারবেন । মূলত, তালিকাযুক্ত ভেরিয়েবল - ই হচ্ছে অ্যারে । বিষয়টি আরেকটু পরিস্কার করার জন্য আপনাদের একটা উদাহরণ দিচ্ছি । আমরা যদি কোন কোম্পানির ভেরিয়েবল এর মাধ্যমে শ্রমিকের নাম রাখতে চাই, তাহলে প্রতিটি শ্রমিকের জন্য আলাদা আলাদা ভেরিয়েবলের নাম দিতে হবে । আর এ কাজটি আমরা যদি অ্যারে (Array) এর মাধ্যমে করি তাহলে একটি ভেরিয়েবলে সমস্ত শ্রমিকের নাম রাখতে  পারবো । তাহলে বুঝতেই পারছেন, অ্যারে এর মাধ্যমে আমরা সহজে এই কাজটি শেষ করতে পারি । আশা করি অ্যারে সম্পর্কে কিছু ধারনা পেয়েছেন ।

আপনি সাধারণত তিনটি পদ্ধতিতে জাভাস্ক্রিপ্ট অ্যারে নির্ধারণ করতে পারেন । এখন আমি জাভাস্ক্রিপ্ট অ্যারে এর তিনটি পদ্ধতি-ই আপনাদের কাছে আলোচনা করবো যেন আপনারা ব্যাপারটি সহজে বুঝতে পারেন;

পদ্ধতিঃ-০১: এখন আমরা একটি জাভাস্ক্রিপ্ট অ্যারে এর প্রথম পদ্ধতি দেখবো । এজন্য নিজের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> JavaScript Array </title>
</head>
<body>
 <script type="text/javascript">
 var product = ["Nokia", "Samgsung","Symphony", "Walton"];
 document.write(product[0]);
 </script>
</body>
</html>

এবার index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করালে ব্রাউজারে Nokia লেখাটি দেখতে পারবেন ।
উপরের উদাহরণটি লক্ষ্য করলে দেখতে পারবেন যে আমরা প্রথমে একটি ভেরিয়েবল নিয়েছি যার নাম দিয়েছি product. এরপর product ভেরিয়েবল চারটি মান দিয়েছি । এই ভেরিয়েবলের মান দিয়েছি যথাক্রমে Nokia, Samsung, Symphony, Walton. এই চারটি আইটেম কে অ্যারের একেকটি উপাদান বলা হয়ে থাকে । প্রতিটি উপাদানের আলাদা সূচক সংখ্যা বা ইনডেক্স থাকে । এই ইনডেক্স বা সূচক সংখ্যার মাধ্যমে আপনি অ্যারের যেকোনো উপদানকে শনাক্ত করতে পারবেন । অ্যারের উপাদানের ইনডেক্স বা সূচক সংখ্যা শুরু হয় ০ (শূন্য) থেকে । এরপর অ্যারের উপাদানের সংখ্যার অনুযায়ী এই সূচক সংখ্যা বা ইনডেক্স ক্রমে ক্রমে বাড়তে থাকে । যেহেতু,  অ্যারের উপাদানের ইনডেক্স বা সূচক সংখ্যা শুরু হয় ০ (শূন্য) থেকে তাই, অ্যারের উপাদনের ইনডেক্স বা সূচক সংখ্যার মান মোট উপাদানের চেয়ে ১ কম হবে । এখানে  Nokia, Samsung, Symphony, Walton চারটি উপাদানের মান যথাক্রমে 0, 1, 2, 3 হবে । এবার document.write ব্যবহার করে ব্রাউজারে অ্যারের উপাদানের আউটপুট দেওয়া হয়েছে ।

পদ্ধতিঃ-০২: এখন আমি একটি জাভাস্ক্রিপ্ট অ্যারে এর দ্বিতীয় পদ্ধতি আলোচনা করবো । জাভাস্ক্রিপ্ট অ্যারে এর তিনটি পদ্ধতি এর প্রথম ও দ্বিতীয় পদ্ধতি প্রায় একই রকম ।এখানে সামান্য কিছু পার্থক্য রয়েছে । আশা করি একটি উদাহরণ দিলে বিষয়টি আপনাদের কাছে পরিস্কার হয়ে যাবে । তাই চলুন দ্বিতীয় পদ্ধতির একটা উদাহরণ দেখা যাক ।  এজন্য নিজের কোডটুকু লিখে index.html নামে সেভ করুন;


<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> JavaScript Array </title>
</head>
<body>
 <script type="text/javascript">
 var product=new Array("Nokia", "Samgsung","Symphony", "Walton");
 document.write(product[1]);
 </script>
</body>
</html>

এবার index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করালে ব্রাউজারে Samgsung লেখাটি দেখতে পারবেন । আশা করি  জাভাস্ক্রিপ্ট অ্যারে এর দ্বিতীয় পদ্ধতি বুঝতে পেরেছেন ।

পদ্ধতিঃ-০৩: এখন আমি একটি জাভাস্ক্রিপ্ট অ্যারে এর তৃতীয় পদ্ধতি আলোচনা করবো । এজন্য নিজের কোডটুকু লিখে index.html নামে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> JavaScript Array </title>
</head>
<body>
 <script type="text/javascript">
 var product=new Array();
 product[0]="Nokia";
 product[1]="Samsang";
 product[2]="Symphony";
 product[3]="Walton";
 document.write(product[2])
 </script>
</body>
</html>

এবার index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করালে ব্রাউজারে Symphony লেখাটি দেখতে পারবেন ।

উপরের উদাহরনে দেখুন, প্রতিটি উপাদানের আলাদা সূচক সংখ্যা বা ইনডেক্স দেওয়া হয়েছে  । এই ইনডেক্স বা সূচক সংখ্যার মাধ্যমে আপনি অ্যারের যেকোনো উপদানকে শনাক্ত করতে পারবেন । এরপর দেখুন document.write(product[2]) ব্যবহার করে ব্রাউজারে অ্যারের তৃতীয় উপাদান ব্রাউজারে আউটপুট করানো হয়েছে । আমরা যদি এখানে document.write(product[3]) ব্যবহার করি তাহলে Walton লেখাটি প্রদর্শিত হবে ।

আশা করি সমস্ত বিষয়টি বুঝতে পেরেছেন । টিউটোরিয়ালটি ভাল লাগলে কমেন্ট করতে ভুলবেন না । যদি বুঝতে কোন অসুবিধা হয় তাহলে কমেন্ট এর মাধ্যমে জানাবেন । আমি সমাধান দেওয়ার চেষ্টা করবো - ইনশাল্লাহ্‌ ।

আমার সাথে ফেইসবুক এ যোগাযোগ করতে এখানে ক্লিক করুন ।

ধন্যবাদ সবাইকে মনোযোগ দিয়ে টিউটোরিয়ালটি পড়ার জন্য । ভাল থাকবেন  সবাই । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 12 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

আমার দেখা নতুনদের জন্য এটাই সবচেয়ে সহজবোধ্য জাভাস্ক্রিপ্ট টিউটোরিয়াল।
তবে , আপনার উল্লেখিত উদাহরনের পাশাপাশি ওয়েবসাইটে (Practical )কোন ক্ষেত্রে এই লুপ, Arrey ইত্যাদি ব্যবহার
করা হয় – এই ধরনের বাস্তব ব্যবহারিক উদাহরন তুলে ধরলে এই বিষয়গুলি আরো শিখতে , মনে রাখতে সহজ হবে।
যেমনঃ ওয়েব সাইটে চলন্ত খবর কোন ফাংশন বা কোন স্ক্রিপ্ট দ্বারা তৈরি করা হয়।
বাস্তবতার সাথে মিলিয়ে পড়লে বা শিখলে সেটা দ্রুত আয়ত্ত করা যায়।
সবশেষে আপনাকে সুন্দর টিউন করার জন্য আন্তরিক ধন্যবাদ। আশা করছি চালিয়ে যাবেন।