1. How to learn javascript basic tutorials (js)
  2. javascript syntax (জাভাস্ক্রিপ্ট syntax) how to learn javascript tutorials
  3. জাভাস্ক্রিপ্ট সক্রিয়করন( Javascript tutorials)
  4. javascript Location (Javascript tutorials)
  5. জাভাস্ক্রিপ্ট External (Javascript tutorials)
  6. জাভাস্ক্রিপ্ট ভেরিয়েবল (Javascript tutorials)
  7. Data Type (javascript tutorials)
  8. জাভাস্ক্রিপ্ট অপারেটর (Javascript operator in javascript tutorials)
  9. জাভাস্ক্রিপ্ট ফাংশন (Javascript function tutorials)
  10. How to learn জাভাস্ক্রিপ্ট ইভেন্ট (Javascript event) | SP Foundationbd
  11. জাভাস্ক্রিপ্ট স্টেটমেন্ট (Javascript statement tutorials ) | SP Foundationbd
  12. Javascript If স্টেটমেন্ট tutorials | SP Foundationbd
  13. Javascript Else If statement tutorials | SP Foundationbd
  14. Javascript While লুপ Tutorials | SP Foundationbd
  15. Javascript For loop tutorials | SP Foundationbd
  16. Js মন্তব্য বা Comments | SP Foundationbd
  17. জাভাস্ক্রিপ্ট অ্যারে tutorials | SP Foundationbd
  18. জাভাস্ক্রিপ্ট এলার্ট tutorial | SP Foundationbd
  19. জাভাস্ক্রিপ্ট Confirm tutorials | SP Foundationbd
  20. জাভাস্ক্রিপ্ট Prompt tutorials | SP Foundationbd
  21. জাভাস্ক্রিপ্ট Print tutorials | SP Foundationbd
  22. জাভাস্ক্রিপ্ট রিডাইরেক্ট Tutorials | SP Foundationbd
  23. জাভাস্ক্রিপ্ট Popup tutorials | SP Foundationbd
  24. জাভাস্ক্রিপ্ট ডেট tutorials | SP Foundationbd
  25. জাভাস্ক্রিপ্ট ফর্ম Tutorials | SP Foundationbd
  26. জাভাস্ক্রিপ্ট স্ট্রিং Tutorials | SP Foundationbd
  27. জাভাস্ক্রিপ্ট স্ট্রিং দৈর্ঘ্য | SP Foundationbd
  28. জাভাস্ক্রিপ্ট স্ট্রিং স্প্লিট | SP Foundationbd
  29. জাভাস্ক্রিপ্ট স্ট্রিং সার্চ tutorials | SP Foundationbd
  30. জাভাস্ক্রিপ্ট রিপ্লেস tutorials | SP Foundationbd
  31. জাভাস্ক্রিপ্ট indexOf tutorials | SP Foundationbd
  32. জাভাস্ক্রিপ্ট getElementById tutorials | SP Foundationbd
  33. জাভাস্ক্রিপ্ট innerHTML tutorials | SP Foundationbd
  34. কিছু জরুরী ফাংশন tutorials | SP Foundationbd
  35. setTimeout ফাংশন tutorials | SP Foundationbd

জাভাস্ক্রিপ্ট অ্যারে tutorials | SP Foundationbd

জাভাস্ক্রিপ্টে ভেরিয়েবল দেখে এসেছেন নিশ্চয়। একটা ভেরিয়েবলে একটাই মান রাখা যায় এরপর যদি সেই ভেরিয়েবলে অন্য মান assign করেন সাথে সাথে variable টির মান পরিবর্তন হয়ে যায়। তবে অ্যারে দিয়ে একটা ভেরিয়েবলে অনেক মান একসাথে রাখতে পারেন। যেকোন মান রাখতে পারেন। যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

tutorial ভেরিয়েবলে সব মানগুলি রাখা হয়েছে, একসাথে ৪টি। এখন যদি এই মানগুলি access করতে চাই তাহলে index নাম্বার দিয়ে access করতে হবে। জাভাস্ক্রিপ্ট অটোমেটিক প্রতিটি মানের জন্য একটা index নাম্বার দিয়ে রাখে (ক্রমানুসারে)। যেমন আমি যদি প্রথম মানটি দেখতে চাই তবে tutorial[0] এভাবে দিতে হবে যেমন

1.document.write(tutorial[0]);

এভাবে যদি দ্বিতীয় মানটি দেখতে চান তাহলে tutorial[1] এবং এরুপে অন্যান্যগুলি।

** অ্যারের প্রতিটি মানকে এলিমেন্ট বলে অর্থ্যাৎ উপরের tutorial array তে ৪টি element আছে। প্রত্যেকটি এলিমেন্ট যেকোন কিছু হতে পারে, একটা স্ট্রিং কিংবা একটা পূর্নসংখ্যা এমনকি একটা object ।

** প্রথম মানের জন্য ০ শূন্য দিয়ে শুরু করে এভাবে ক্রমানুসারে পরেরগুলির জন্য javascript index নাম্বার দেয়। একসেস নেয়ার সময় প্রথমে ভেরিয়েবলের নাম এরপর তৃতীয় বন্ধনীর (square bracket) এর ভিতর index নাম্বারটি। যেমন ২য় মানটি access করতে চাইলে tutorial[1] এভাবে।

 

** অ্যারে বানাতে হয় প্রথম উদাহরনের মত, তৃতীয় বন্ধনীর ভিতর single বা double কোটেশনের ভিতর মান দিতে হয় এবং প্রতিটি মান কমা (,) দিয়ে আলাদা রাখতে হবে। এভাবে অ্যারে তৈরীর প্রক্রিয়ার টেকনিকাল নাম হচ্ছে "অ্যারে লিটারেল"।

এছাড়া new কিওয়ার্ড Array() ফাংশন (এটার নাম আসলে কনস্ট্রাক্টর) ব্যবহার করে অ্যারে বানানো যায় যেমন উপরের অ্যারেটি চাইলে নিচের মত করে তৈরী করতে পারেন।

1.var tutorial = new Array('HTML', 'CSS', 'JavaScript', 'PHP');

 

** যদি কনস্ট্রাক্টর দিয়ে array বানান তাহলে এর ভিতরে দেয়া মানগুলি (যেগুলি কোটেশনের ভিতর রাখা হচ্ছে এবং কমা দিয়ে আলাদা করা হচ্ছে) অ্যারের element হয়ে যায়। এখানে একটু সমস্যা হচ্ছে যদি কনস্ট্রাক্টর এর মান একটি দেন এবং সেটা হয় পূর্নসংখ্যা তাহলে অ্যারেতে মোট সেই সংখ্যা পরিমান এলিমেন্ট আছে বলে javascript ধরে নেয়।

যেমন যদি var tutorial = new Array(8); দিলে জাভাস্ক্রিপ্ট ধরবে tutorial একটি array এবং এখানে ৮টি এলিমেন্ট আছে আর যদি var tutorial = new Array(8, 'HTML', 'CSS'....); এভাবে দেন তাহলে ৮ কে সে একটা এলিমেন্ট হিসেবে গন্য করবে যেমন 'HTML' কে করছে। এভাবে কনস্ট্রাক্টর দিয়ে অ্যারে বানানোর চেয়ে প্রথম উদাহরনের মত করে অর্থ্যাৎ "অ্যারে লিটারেল" এইভাবে অ্যারে তৈরী করা ভাল।

কনস্ট্রাক্টর ব্যবহার করে বানানো অ্যারেকে আবার নিচের মত করেও লিখতে পারেন

1.var tutorial = new Array();

2.tutorial[0] = 'HTML';

3.tutorial[1] = 'CSS';

  1.  

5.tutorial[2] = 'JavaScript';

6.tutorial[3] = 'PHP';

অ্যারে কিন্তু বিশেষ ধরনরে একটা অবজেক্ট। ভেরিয়েবল টিউটোরিয়ালে typeof অপারেটর দিয়ে কিভাবে ভেরিয়েবলের ধরন বের করতে হয় সেটা দেখানো হয়েছে। যেকোন একটা চেক করে দেখবেন "object" দেখাবে। যাইহোক এর length নামে একটা প্রোপার্টি যেটা দিয়ে অ্যারেতে কয়টি element আছে সেটা দেখা যায়। যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.document.write (tutorial . length);


output 4 দেখাবে। কারন অ্যারেতে ৪টি এলিমেন্ট আছে।

এই length প্রোপার্টি দিয়ে শুধু অ্যারের এলিমেন্ট সংখ্যা দেখার কাজ ছাড়াও আরও কয়েকটি কাজ হয়, যেমন আপনি চাইলে অ্যারে থেকে একটি এলিমেন্ট বাদ দিয়ে দিতে পারেন এভাবে

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial . length = 3;


ব্যাস ৪ টি element থেকে এখন array তে ৩টি element হয়ে গেছে, শেষেরটি বাদ পরেছে। যদি পরীক্ষা করে দেখতে চান তাহলে ৪ নম্বর element টিতে access নিতে চেষ্টা করুন।

1.document.write(tutorial[3]);

Output দেখুন "undefined" আসবে। কেননা শেষের element টি আর নেই। এভাবে ইচ্ছে করলে element সংখ্যা বাড়াতে ও পারেন যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial . length = 20;

এখন অ্যারের element সংখ্যা ২০ হয়ে গেছে, তবে ৪ এর পরের element গুলির মান হবে "undefined". tutorial[18] দিয়ে একসেস করুন "undefined" দেখাবে।

 

length প্রোপার্টি দিয়ে array র শেষে element যোগ করা যায় যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial[tutorial.length] = 'Framework';

3.tutorial[tutorial.length] = 'jQuery';

4.tutorial[tutorial.length] = 'Database';

5.document.write(tutorial[5]);

Output "jQuery" দেখাবে। উপরের উদাহরেন tutorial অ্যারেতে tutorial[tutorial.length] এভাবে আরো মোট ৩টি এলিমেন্ট একটার পর একটা যোগ করা হয়েছে এবং javascript অটোমেটিক এসব যোগকৃত এলিমেনন্টের index নাম্বার আপডেট করে নেয়। এমনকি document.write(tutorial.length); দিয়ে চেক করে দেখুন ৭ দেখাবে অর্থ্যাৎ element সংখ্যাও আপডেট হয়ে যায়।

তবে এভাবে array তে element যোগ করা হয়না বরং push() নামে একটা method আছে এটা দিয়ে array তে element যোগ করা হয়। push() এর ভিতর একাধিক element single বা ডাবল কোটেশনের ভিতর রেখে কমা (,) চিহ্ন দিয়ে আলাদা রাখা হয় এবং এগুলি সব অ্যারের শেষে গিয়ে যুক্ত হয় যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.push('Framework', 'jQuery', 'Database');

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

4.document.write(tutorial[6]);

Output

7
Database

 

** Array র নাম tutorial এরপর ডট (.) দিয়ে push() এর ভিতর যেসব element দিতে চান সেগুলি কমা দিয়ে দিয়ে কোটেশনের ভিতরে রাখলেই array তে যোগ হয়ে যাবে।

যদি অ্যারের প্রথমেই এলিমেন্ট যোগ করতে চান তাহলে unshift() মেথড আছে যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

  1. 3.tutorial.unshift('Framework', 'jQuery', 'Database');
  2. 5.document.write(tutorial.length + '<br/>');

6.document.write(tutorial[0]);

Output

7
Framework

দেখুন Array র প্রথমে ছিল "HTML" এবং এর index নাম্বার ছিল ০। unshift() দিয়ে শুরুতে এলিমেন্ট যোগ করাতে যোগকৃত এলিমেন্টগুলির index শূন্য (০) থেকে শুরু হয়েছে। ফলে এখন "HTML" এর index নাম্বার হবে ৩।

Array ক্রমানুসারে সাজানো

একটা অ্যারের Element গুলি যদি অগোছালো থাক তাহলে sort() Method দিয়ে অ্যারে ক্রমানুসারে সাজাতে পারেন (ছোট থেকে বড় তবে নাম্বার অনুযায়ী নয় - অক্ষর অনুযায়ী) যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.sort();

3.document.write(tutorial[0] + ', ' + tutorial[1] + ', ' + tutorial[2] + ', ' + tutorial[3]);

4.//now array becomes ['CSS', 'HTML', 'JavaScript', 'PHP']

Output

CSS, HTML, JavaScript, PHP

sort() দিয়ে a - z এভাবে ক্রমানুসারে আসে আপনি যদি এর বিপরীতভাবে অ্যারে সাজাতে চান  তাহলে আছে reverse() Method

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.sort();

3.tutorial.reverse();

4.document.write(tutorial[0] + ', ' + tutorial[1] + ', ' + tutorial[2] + ', ' + tutorial[3]);

  1. 6.//now array becomes ['PHP', 'JavaScript', 'CSS', 'HTML']

Output

PHP, JavaScript, HTML, CSS

sort() মেথডে একটা function প্যারামিটার হিসেবে পাঠানো যায়। চাইলে এই ফাংশন ব্যবহার করে array কে সংখ্যার ক্রমানুসারে সাজাতে পারেন। যেমন

01.var tutorial = [1,60,3,55,8,40];

02.tutorial.sort(comparison);

03.function comparison(x, y){

04.if(x > y){

05.return 1;

06.}else if (x < y){

07.return -1;

08.}else{

09.return 0;

10.}

  1.  

12.}

13.document.write(tutorial);

Output

1,3,8,40,55,60

অথচ এই ফাংশন ব্যবহার না করলে আউটপুট এভাবে ছোট থেকে বড় আসতনা। এবার এখান reverse() মেথড ভ্রবহার করে বড় থেকে ছোট করতে পারেন।

shift() মেথড ব্যবহার করে অ্যারের প্রথম element টিকে মোছা যায় যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.shift();

  1. 4.//now array becomes ['CSS','JavaScript','PHP']

pop() মেথড ব্যবহার করে অ্যারের শেষ element মোছা যায় যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.pop();

3.//now array becomes ['HTML', 'CSS', 'JavaScript']

একটা array থেকে কিছু element নিয়ে আরেকটা নতুন অ্যারে তৈরী করা যায় slice() method দিয়ে যেমন

01.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

02.tutorial.slice(1);

03.// now array becomes ['CSS', 'JavaScript', 'PHP']

  1. 05.06. 07. 

08.tutorial.slice(1,3);

09.//no array becomes ['CSS', 'JavaScript']

** slice() মেথডে দুটি প্যারামিটার পাঠানো যায় সংখ্যা দিয়ে। প্রথম প্যারামিটার (সংখ্যা) দিয়ে সে ঠিক করবে কোন্ এলিমেন্ট থেকে নেয়া শুরু হবে এবং পরের প্যারামিটার দিয়ে ঠিক করবে কোথা পর্যন্ত নিবে। যেমন slice(1,3) দেয়াতে ১ নম্বর element থেকে ৩ নাম্বারের আগে পর্যন্ত নিয়েছে (শেষেরটি নেয়না)।

** একটা প্যারামিটার দিলে ঐ নাম্বার থেকে শুরু করে শেষ পর্যন্ত নিবে।

splice() Method ব্যবহার করে মুলত অ্যারের মাঝখানে এলিমেন্ট ঢুকানো যায় তবে এটা দিয়ে আরো কাজ হয়। যেমন আপনি একটা অ্যারের ১ থেকে ৩ নাম্বার পর্যন্ত যদি সব element মুছতে চান তাহলে

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.splice(1,3);

3.//now array becomes ['HTML']

যদি Array র মাঝে কোন element ঢুকাতে চান তাহলে

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.tutorial.splice(1, 1, 'jQuery', 'MySQL');

3.//now array becomes ['HTML', 'jQuery', 'MySQL', 'JavaScript', 'PHP']

splice() এর ভিতর প্রথম প্যারামিটার 1 দিয়ে ১ নম্বর ইনডেক্স থেকে element প্রবেশ করবে এ নির্দেশনা দেয়া হয়েছে এরপরের প্যারামিটার 1 দিয়ে ১ নম্বর ইনডেক্সধারী element টি মুছে দেয়া হয়েছে ("CSS")। সবশেষে "jQuery" এবং "MySQL" হচ্ছে নতুন এলিমেন্টগুলি যেগুলি প্রবেশ করানো হচ্ছে। আপনি চাইলে আরো element দিতে পারে আমি ২টি দিলাম।

২য় প্যারামিটারে যদি 0 দেন তাহলে কোন এলিমেন্ট মুছবেনা। এখানে যে সংখ্যা দিবেন ততটি element মুছে যাবে আর মোছা শুরু হবে ১ম প্যারামিটারে যে সংখ্যাটি দিবেন সেই সংখ্যা যার ইনডেক্স হবে সেখান থেকে। সোজা কথা ১ম প্যারামিটারে যে সংখ্যা থাকবে সেই পজিশন থেকে ততটা এলিমেন্ট মুছে দিবে যেটা ২য় প্যারামিটারে (যে সংখ্যা) থাকবে। এরপর পরের প্যারামিটারগুলিতে দেয়া element গুলি ঢুকিয়ে দেবে।

 

indexOf() এবং lastIndexOf() মেথড

একটা অ্যারের কোন একটা এলিমেন্ট কোন্ পজিশনে আছে সেটা খুজে বের করতে indexOf() method ব্যবহার করা হয়। যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'erte'];

2.var ind = tutorial.indexOf('JavaScript');

3.document.write(ind);

output

2

অর্থ্যাৎ 'JavaScript' এলিমেন্ট টি অ্যারের ২ নাম্বার পজিশনে আছে।

 

** indexOf() এ আরেকটা প্যারামিটার (পূর্নসংখ্যা) দেয়া যায়। এই প্যারামিটার দিয়ে ঠিক করে দিতে পারেন যে কত নম্বর পজিশন থেকে খোজা শুরু করবে। যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'HTML'];

2.var ind = tutorial.indexOf('HTML', 3);

3.document.write(ind);

Output

4

কারন ৪ নম্বর পজিশনে 'HTML' নামে আরেকটা এলিমেন্ট আছে এবং indexOf('HTML', 3) দেয়াতে ৩ নম্বর পজিশন থেকে 'HTML' খোজা শুরু করেছে। যদি এই প্যারামিটারটি (3) না দিতাম তাহলে output ০ আসত। কারন তখন প্রথম থেকে খোজা শুরু করত।

lastIndexOf() দিয়ে অ্যারের শেষ দিকে থেকে খোজা শুরু করে যেখানে indexOf() দিয়ে array র প্রথম দিক থেকে খোজা শুরু করে।

01.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'HTML'];

02.var ind = tutorial.lastIndexOf('HTML');

03.document.write(ind + '<br/>');

  1. 05.

06.// with two parameter

  1. 08.vartutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'HTML'];

09.var ind1 = tutorial.lastIndexOf('HTML', 1);

10.document.write(ind1);

Output

4
0

খুবই সহজ, ব্যাখ্যার প্রয়োজন মনে করছিনা।

 

join() function

এই function দিয়ে অ্যারের এলিমেন্টকে string এ রুপান্তর করা যায় এবং আপনি চাইলে যেকোন চিহ্ন দিয়ে স্ট্রিংগুলিকে আলাদা করে দেখতে পারেন। join() এর ভিতর ঐ চিহ্নটি প্যারামিটার হিসেবে পাঠাতে হয়। যেমন

1.var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];

2.var atoS = tutorial.join(',');

3.document.write(atoS );

Output

HTML,CSS,JavaScript,PHP

** দেখুন অ্যারের প্রতিটি element কে string বানিয়েছে এবং কমা দিয়ে আলাদা করেছে। যদি join() এর ভিতর কমা না দিয়ে অন্য চিহ্ন দিতাম তখন সেই চেহ্ন থাকত প্রতিটি স্ট্রিংয়ের মাঝে।

আবার split() একটা ফাংশন আছে এটা দিয়ে স্ট্রিংকে অ্যারে বানানো যায় যেমন

1.var tutorial = 'HTML,CSS,JavaScript,PHP';

2.tutorial.split(',');

3.//now an array created ['HTML', 'CSS', 'JavaScript', 'PHP']

** String যে চিহ্ন দিয়ে আলাদা থাকবে সেটা join() এর ভিতর প্রথম প্যারামিটার হিসেবে পাঠাতে হবে যেমন আমি পাঠিয়েছি (কমা চিহ্ন)। সাধারনত স্ট্রিং স্পেস দিয়ে আলাদা থাকে তখন split(' ') এভাবে দিতে হবে। এছাড়া join() এ পূর্নসংখ্যা হিসেবে আরেকটা ২য় প্যারামিটার পাঠানো যায় সেটা দিলে ঐ সংখ্যা পরিমান দীর্ঘ হবে অ্যারেটি। আর যদি কিছু না দেন তাহলে split() function পুরো string কে ভেঙ্গে ভেঙ্গে array বানিয়ে ছাড়বে।