জাভাস্ক্রিপ্টের ১০ টি ফাংশন (Some JavaScript's Function)

জাভাস্ক্রিপ্টের ১০ টি ফাংশন (Some JavaScript's Function)

charAt(index):  এই মেথড স্ট্রিং থেকে একটা ক্যারেক্টার/অক্ষর বের করে অনতে ব্যবহৃত হয়। এটা স্ট্রিং ম্যানিপুলেশনের একটি মেথড। index এর জায়গায় যে পূর্নসংখ্যা দিবেন স্ট্রিং থেকে সেই ইনডেক্সধারী অক্ষর/ক্যারেক্টার টি রিটার্ন করবে। যেমন

1.var x = 'Hello Webcoachbd';

2.document.write(x.charAt(8));

প্রয়োগ দেখুন

** প্রথম ক্যারেক্টারের ইনডেক্স নাম্বার ০ এভাবে হিসেব করে। তাহলে var x এ ০-১৫ ইনডেক্স পর্যন্ত ক্যারেক্টার আছে। এর বাইরে যদি কোন ইনডেক্স নাম্বার দিতাম উপরের charAt() মেথডে তাহলে এই মেথড একটি ফাকা স্ট্রিং রিটার্ন করবে।

substr(start, length): স্ট্রিং থেকে একটা অংশ/সাবস্ট্রিং বের করার জন্য। start হল স্ট্রিংয়ের কত নম্বর পজিশন থেকে খোজা শুরু করবে আর length হচ্ছে কয়টি ক্যারেক্টার/অক্ষর নিবে। কাজশেষে এই মেথড একটা সাবস্ট্রিং/শব্দ রিটার্ন করে।

1.var x = 'Hello Webcoachbd';

2.document.write(x.substr(3,5));

আউটপুট
lo We

** যদি start এ মাইনাস মান দেন তাহলে স্ট্রিংয়ের পিছন দিক থেকে খোজা শুরু করবে। -1 হচ্ছে শেষ অক্ষরটি, -2 হচ্ছে শেষ থেকে ২য় অক্ষরটি এভাবে..

** যদি start এর জায়গায় কোন সংখ্যা না দেন তাহলে অর্থ্যাৎ substr('',5) এভাবে দেন তাহলে প্রথম থেকে (বা থেকে) খোজা শুরু করবে।

** যদি length না দেন তাহলে যেমন substr(5) এভাবে দেন তখন ৫ নম্বর পজিশন থেকে শুরু করে পুরো স্ট্রিংয়ের বাকি সব নিয়ে নিবে।

substring(start, end): স্ট্রিং থেকে একটা অংশ/সাবস্ট্রিং বের করার জন্য। start প্যারামিটারে যে সংখ্যা দিবেন স্ট্রিংয়ের সেই পজিশন থেকে ক্যারেক্টার নেয়া শুরু করবে এবং end (যে সংখ্যাটি দিবেন ঐ সংখ্যা স্ট্রিংয়ে যে পজিশনে থাকবে) এর আগ পর্যন্ত ক্যারেক্টার নিয়ে সাবস্ট্রিংটি রিটার্ন করবে। লেখাটি একটু জটিল মনে হচ্ছে? উদাহরনটি দেখুন, আসলে সহজ

1.var x = 'Hello Webcoachbd';

2.document.write(x.substring(6, 15));

আউটপুট
Webcoachb

** ৬ নম্বর পজিশন থেকে নেয়া শুরু করেছে (৬ নম্বরে আছে W) এবং ১৫ নম্বর (১৫ নম্বর হচ্ছে d) এর আগ পর্যন্ত নিয়ে সাবস্ট্রিংটি (Webcoachb) রিটার্ন করেছে।

toString(): স্ট্রিং বানাতে ব্যবহৃত হয়। এই মেথড অ্যারে, নাম্বার, boolean, date, ফাংশন, এরর ইত্যাদি সব অবজেক্টের সাথে ব্যবহার করা যায়। আমরা এখানে শুধু অ্যারে এবং নাম্বার দেখাচ্ছি।
আ্যারের ক্ষেত্রে এই মেথডের কাজ হচ্ছে অ্যারেকে স্ট্রিং বানানো। যেমন

1.var arT = ['HTML', 'CSS', '22', 'JS'];

2.var reS = arT.toString();

3.document.write(reS);

আউটপুট
HTML,CSS,22,JS

** স্ট্রিং বানিয়ে কমা দিয়ে আলাদা করে তারপর সেটা রিটার্ন করে।

নাম্বারের ক্ষেত্রে যেকোন নাম্বারকে স্ট্রিং বানানো এই মেথডের কাজ যেমন

1.var n = 22;

2.document.write(typeof(n));

3.document.write('<br/>');

4.var reS = n.toString();

5.document.write(typeof(reS));

আউটপুট
number
string

** এখানে toString() এ radix নামে একটা প্যারামিটার অর্থ্যাৎ কোন সংখ্যাভিত্তিক হবে সেটা ঠিক করে দেয়া যায়। যেমন toString(2) দিলে বাইনারি করে দেখাবে (তবে সংখাটি কিন্তু স্ট্রিং)। radix না দিলে সাধারন ১০ ভিত্তিক সংখ্যা দেখাবে। একটা নাম্বারকে স্ট্রিং বানানোর পর সেটা আবার ২, ১০ ইত্যাদি সংখ্যাভিত্তিক হয় কিভাবে? উত্তর হচ্ছে "স্ট্রিংয়ের সংখ্যাত্নক রুপ" বা "string representation of number"  যাইহোক বাইনারি করে দেখতে চাইলে

1.var n = 22;

2.document.write(typeof(n));

3.document.write('<br/>');

4.var reS = n.toString(2);

5.document.write(reS);

আউটপুট
number
10110

parseInt(string, radix): স্ট্রিং থেকে পূর্নসংখ্যা বানাতে ব্যবহৃত হয়। string এর জায়গায় যেকোন স্ট্রিং আর radix হচ্ছে নাম্বারটিকে কোন সংখ্যাভিত্তিক পদ্ধতিতে প্রসেস (parse) করা হবে। এখানে 2-36 এর মধ্যে কোন সমর্থিত সংখ্যাভিত্তিক পদ্ধতির কোন সংখ্যা। যেমন 2 দিতে পারেন তখন বাইনারি, 8 দিলে অকটাল, 10 দিলে ডেসিমাল ইত্যাদি। radix যদি না দেন বা 0 দেন তাহলে 10 ভিত্তিক (based) সংখ্যাগত পদ্ধতিতে (numeral system) নাম্বারটি প্রসেস করবে। তবে যদি 0x বা 0X থাকে তবে ১৬ হবে এর base তথা radix এর মান।
==> স্ট্রিং এর শুরুতে যে সংখ্যা থাকবে সেটাই রিটার্ন করবে।
==> যদি দশমিক নাম্বার দেন  যেমন 22.36 তাহলে পূর্নসংখ্যা বানিয়ে রিটার্ন করবে।
==> স্ট্রিংয়ের শুরুতে যদি কোন পূর্নসংখ্যা না থাকে তাহলে NaN(Not a Number) রিটার্ন করবে।
==> যদি স্ট্রিং 0 দিয়ে শুরু হয় তাহলে ৮ হবে এর base তথা radix এর মান ধরবে ৮।

কিছু উদাহরন

01.document.write(parseInt('52 Hello Webcoachbd'));

02.document.write('<br/>');

03.document.write(parseInt('52.230'));

04.document.write('<br/>');

05.document.write(parseInt('Hello'));

06.document.write('<br/>');

07.document.write(parseInt('52'));

08.document.write('<br/>');

09.document.write(parseInt('-52'));

10.document.write('<br/>');

11.document.write(parseInt('0Hello'));

12.document.write('<br/>');

13.document.write(parseInt('0xHello'));

14.document.write('<br/>');

15.document.write(parseInt('0x10'));

16.document.write('<br/>');

17.document.write(parseInt('10110001110',2));

18.document.write('<br/>');

19.document.write(parseInt('22',8));

20.document.write('<br/>');

21.document.write(parseInt('22',16));

প্রয়োগ দেখুন

** এই মেথডটি প্রফেশনালি বেশি ব্যবহার হয় শুধু নাম্বার বানানোর জন্য এবং radix প্যারামিটার বেশি ব্যবহার করা হয়না। আরও সহজভাবে বলি ধরুন একটা ফর্মের ডেটা নিয়ে কিছু যোগ, বিয়োগ ইত্যাদি অপারেশন করবেন, এখন একটা ফিল্ড আছে যেখান থেকে আপনি শুধু নাম্বার আসবে (অর্থ্যাৎ ইউজার নাম্বার ইনপুট দিবে) এটাই আশা করছেন। তখন parseInt() দিয়ে ইউজার ইনপুটকে ফিল্টার করে শুধু নাম্বার নিব্নে। ই্উজার যদিও ভুলে "12taka" দেয় তবুও আপনি ক্যালকুলেশনের সময় 12 পাবেন। তাহলে আর যোগ বিয়োগ ইত্যাদি অপারেশনে সমস্যা হয়না।

parseFloat(string): স্ট্রিং থেকে নাম্বার করার জন্য। এখানে string এর জায়গায় যে স্ট্রিং দিবেন সেটার প্রথমে যদি কোন নাম্বার থাকে তাহলে সেটাকে নাম্বার করে রিটার্ন করবে। এখানে কোন radix প্যারামিটারে নেই। বাকি সব কাজ parseInt() এর মতই শুধু পার্থক্য হচ্ছে floating point number (দশমিক নাম্বার) দিলে parseFloat() সেটাকে সেভাবেই রিটার্ন করবে যেখানে parseInt() শুধু পূর্নসংখ্যার অংশটুকু রিটার্ন করবে। যেমন

1.document.write(parseFloat('52'));

2.document.write('<br/>');

3.document.write(parseFloat('52Hello'));

4.document.write('<br/>');

5.document.write(parseFloat('52.36'));

6.document.write('<br/>');

7.document.write(parseFloat('52.00'));

আউটপুট
52
52
52.36
52

floor(): এই মেথড দিয়ে দশমিক সংখ্যাকে কাছাকাছি কোন পূর্নসংখ্যাতে নিয়ে যেতে ব্যবহৃত হয় (নিচের দিকে যাবে)। যেমন ১.৮০ কে ১.০ বানিয়ে দিবে। এটা Math অবজেক্টের একটা মেথড তাই একসেস নিতে Math এরপর ডট (.) দিয়ে ব্যবহার করতে হবে। যেমন

1.document.write(Math.floor(1.80));

2.document.write('<br/>');

3.document.write(Math.floor(1.20));

4. 

5.document.write('<br/>');

6.document.write(Math.floor(-1.80));

আউটপুট
1
1
-2

ceil() : এটাও floor() এর মত শুধু পার্থক্য হচ্ছে ceil() উপরের দিকে যাবে। যেমন ১.৮০ কে সে ২ বানাবে যেখানে floor() মেথড ১ বানাবে।

1.document.write(Math.ceil(1.80));

2.document.write('<br/>');

3.document.write(Math.ceil(1.20));

4.document.write('<br/>');

5.document.write(Math.ceil(-1.80));

আউটপুট
2
2
-1

encodeURI(): uri এ বিভিন্ন ক্যারেক্টার এসকেপ করতে ব্যবহৃত হয়। এখানে uri একটাই প্যারামিটার দেয়া যায়। যেমন

1.var uri = 'http://www.free-bangladesh.com/hello world';

2.var eu = encodeURI(uri);

3.document.write(eu);

আউটপুট
http://www.free-bangladesh.com/hello%20world

** এনকোড শেষ হলে পরিবর্তিত URI টি রিটার্ন করে।

** কিছু কিছু ক্যারেক্টার এই মেথড এসকেপ করেনা। যেমন ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

** এগুলি এসকেপের দরকার হলে encodeURIComponent() আরেকটি মেথড আছে সেটা ব্যবহার করতে পারেন। এটা দিয়ে URI এর প্রতিটি কমপোনেন্ট (যেমন কোয়েরি স্ট্রিংগুলি) অালাদাভাবে এনকোড করা যায়।

decodeURI(): encodeURI() দিয়ে এনকোড করা URI যদি পূর্বাবস্থা আনতে হয় তাহলে সেটা decodeURI() মেথড দিয়ে করতে পারেন যেমন

1.var uri = 'http://www.free-bangladesh.com/hello%20world';

2.var du = decodeURI(uri);

3.document.write(du);

আউটপুট
http://www.free-bangladesh.com/hello world

** যেটা encodeURI() দিয়ে এনকোড হয় সেটাই শুধু decode হবে। যেগুলি ক্যারেক্টার encode হবেনা encodeURI() দিয়ে সেগুলি decode ও হবেনা।