আসসালামুয়ালাইকুম বন্ধু,আপনি কি কখনো ভেবেছেন, ওয়েবসাইটগুলো কীভাবে এত ইন্টারেক্টিভ হয়? বাটনে ক্লিক করলেই কেনাকাটার কার্টে আইটেম যোগ হয়, ফর্ম জমা দেওয়ার সময় ত্রুটি ধরা পড়ে, বা অ্যানিমেশন দেখা যায়? এর পেছনে মূল কারিগর হলো জাভাস্ক্রিপ্ট। এটি ওয়েব ডেভেলপমেন্টের একটি শক্তিশালী এবং জনপ্রিয় প্রোগ্রামিং ভাষা। আপনি যদি ওয়েব ডেভেলপার হতে চান বা আপনার ক্যারিয়ারে নতুন দক্ষতা যোগ করতে চান, তাহলে জাভাস্ক্রিপ্ট শেখা আপনার জন্য একটি দারুণ শুরু হতে পারে।
এই ব্লগ পোস্টে আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলো—সিনট্যাক্স, ভ্যালু, লিটারেল, ভ্যারিয়েবল, অপারেটর, এক্সপ্রেশন, কীওয়ার্ড, কমেন্ট, আইডেন্টিফায়ার, কেস সেনসিটিভিটি, ক্যামেল কেস, এবং ক্যারেক্টার সেট— খুব সহজ ভাবে বুঝার চেষ্টা করবো, আপনার কাজ শুধু মনোযোগ সহকারে পড়া এবং প্র্যাকটিস করা। প্রতিটি বিষয়ের সাথে থাকবে বাস্তব উদাহরণ এবং প্র্যাকটিস টাস্ক, যাতে আপনি শিখতে শিখতে হাতেকলমে অনুশীলন করতে পারেন। চলুন, শুরু করা যাক!
শুরু করার আগে আপনাকে অবশ্যই আমার আগের পোষ্ট গুলো পড়তে হবে, যদি পরে না থাকেন তাহলে এখুনি পড়ে নিন।
JavaScript Programming Language শিখুন (Basic to Advance) পর্ব ১
JavaScript Programming Language শিখুন (Basic to Advance) পর্ব 2
JavaScript Programming Language শিখুন (Basic to Advance) পর্ব ০৩
যদি পড়া হয়ে থাকে তাহলে, সামনের দিকে এগুনো যাক।
জাভাস্ক্রিপ্ট সিনট্যাক্স
জাভাস্ক্রিপ্ট সিনট্যাক্স হলো এমন একটি নিয়মের সেট, যা জাভাস্ক্রিপ্ট প্রোগ্রাম কীভাবে লিখতে হবে তা নির্ধারণ করে। এটি যেন একটি বাংলা বাক্যের ব্যাকরণ—যেমন শব্দ কীভাবে সাজানো হবে, কোথায় কী ব্যবহার করা হবে, তা নির্দেশ করে। সঠিক সিনট্যাক্স ছাড়া আপনার কোড কাজ করবে না। তাই Syntax সম্পর্কে সঠিক জ্ঞান অবশ্যই আবশ্যক।
জাভাস্ক্রিপ্টে ভ্যারিয়েবল তৈরি করতে var, let, বা const কীওয়ার্ড ব্যবহার করা হয়। এরপর সমান চিহ্ন (=) দিয়ে মান নির্ধারণ করা হয়। নিচে একটি উদাহরণ দেওয়া হলো:
var x; // ভ্যারিয়েবল ঘোষণা
let y; // ভ্যারিয়েবল ঘোষণা
x = 5; // মান নির্ধারণ
y = 6; // মান নির্ধারণ
let z = x + y; // গণনা
console.log(z); // আউটপুট: 11
প্র্যাকটিস টাস্ক:
– একটি ভ্যারিয়েবল age তৈরি করুন এবং আপনার বয়স সেট করুন।
– আরেকটি ভ্যারিয়েবল birthYear তৈরি করুন এবং আপনার জন্মসাল সেট করুন।
– এখন age ও birthYear ব্যবহার করে বর্তমান সাল গণনা করুন এবং ফলাফল কনসোলে প্রিন্ট করুন।
টিপ: বর্তমান সাল জানতে new Date().getFullYear() ব্যবহার করতে পারেন।
জাভাস্ক্রিপ্ট ভ্যালু
জাভাস্ক্রিপ্টে দুই ধরনের ভ্যালু আছে:
– ফিক্সড ভ্যালু (Literals): যেগুলো সরাসরি লেখা হয়, যেমন সংখ্যা বা টেক্সট।
– ভ্যারিয়েবল ভ্যালু (Variables): যেগুলো পরিবর্তনশীল এবং ভ্যারিয়েবলের মাধ্যমে সংরক্ষণ করা হয়।
let number = 42; // লিটারেল
let name = "আলী"; // লিটারেল
let score; // ভ্যারিয়েবল ঘোষণা
score = 100; // পরিবর্তনশীল মান
প্র্যাকটিস টাস্ক:
– একটি ফিক্সড ভ্যালু হিসেবে আপনার নাম স্ট্রিং আকারে সংরক্ষণ করুন।
– একটি ভ্যারিয়েবল তৈরি করুন এবং সেখানে আপনার পছন্দের একটি সংখ্যা সংরক্ষণ করুন।
– উভয় ভ্যালু কনসোলে প্রিন্ট করুন।
জাভাস্ক্রিপ্ট লিটারেল
লিটারেল হলো এমন মান যা সরাসরি কোডে লেখা হয়। জাভাস্ক্রিপ্টে দুটি প্রধান ধরনের লিটারেল আছে:
1. নাম্বার লিটারেল: দশমিক সহ বা ছাড়া সংখ্যা, যেমন 10.50, 1001।
2. স্ট্রিং লিটারেল: একক বা দ্বৈত উদ্ধৃতির মধ্যে টেক্সট, যেমন "John Doe", 'John Doe'।
let price = 99.99; // নাম্বার লিটারেল
let greeting = "হ্যালো, জাভাস্ক্রিপ্ট!"; // স্ট্রিং লিটারেল
console.log(price, greeting);
প্র্যাকটিস টাস্ক:
– একটি নাম্বার লিটারেল তৈরি করুন যা একটি পণ্যের মূল্য নির্দেশ করবে।
– একটি স্ট্রিং লিটারেল তৈরি করুন যা পণ্যের নাম ধারণ করবে।
– উভয় লিটারেল একটি বাক্যে যুক্ত করে কনসোলে প্রিন্ট করুন, যেমন: “আমার পছন্দের বইয়ের দাম ৫০০ টাকা।”
জাভাস্ক্রিপ্ট ভ্যারিয়েবল
ভ্যারিয়েবল হলো ডেটা সংরক্ষণের জন্য একটি পাত্র। জাভাস্ক্রিপ্টে ভ্যারিয়েবল ঘোষণার জন্য তিনটি কীওয়ার্ড ব্যবহৃত হয়: var, let, এবং const।
– var: পুরোনো পদ্ধতি, এখন কম ব্যবহৃত হয়।
– let: পরিবর্তনশীল মানের জন্য ব্যবহৃত হয়।
– const: যে মান পরিবর্তন করা যায় না।
let x; // ভ্যারিয়েবল ঘোষণা
x = 6; // মান নির্ধারণ
const pi = 3.14; // ধ্রুবক মান
x = 10; // মান পরিবর্তন সম্ভব
// pi = 3.15; // এটি ত্রুটি দেবে, কারণ const পরিবর্তন করা যায় না
প্র্যাকটিস টাস্ক:
– একটি let ভ্যারিয়েবল তৈরি করুন এবং আপনার পছন্দের সংখ্যা সংরক্ষণ করুন।
– একটি const ভ্যারিয়েবল তৈরি করুন এবং আপনার শহরের নাম সংরক্ষণ করুন।
– উভয় ভ্যারিয়েবল কনসোলে প্রিন্ট করুন। এরপর let ভ্যারিয়েবলের মান পরিবর্তন করে আবার প্রিন্ট করুন।
জাভাস্ক্রিপ্ট অপারেটর
অপারেটর হলো এমন চিহ্ন যা ভ্যালু বা ভ্যারিয়েবলের উপর গণনা বা ক্রিয়া সম্পাদন করে। জাভাস্ক্রিপ্টে দুই ধরনের প্রধান অপারেটর আছে:
– অ্যারিথমেটিক অপারেটর: যোগ (+), বিয়োগ (-), গুণ (*), ভাগ (/)।
– অ্যাসাইনমেন্ট অপারেটর: মান নির্ধারণের জন্য, যেমন =।
let x = 5, y = 6;
let sum = x + y; // যোগ
let product = x * y; // গুণ
console.log(sum, product); // আউটপুট: 11, 30
প্র্যাকটিস টাস্ক:
– দুটি ভ্যারিয়েবল তৈরি করুন: length এবং width।
– এদের ব্যবহার করে একটি আয়তক্ষেত্রের ক্ষেত্রফল (length × width) গণনা করুন।
– ফলাফলটি কনসোলে প্রিন্ট করুন।
জাভাস্ক্রিপ্ট এক্সপ্রেশন
এক্সপ্রেশন হলো ভ্যালু, ভ্যারিয়েবল, এবং অপারেটরের সমন্বয়, যা একটি নির্দিষ্ট মান তৈরি করে। উদাহরণস্বরূপ, 5 * 10 একটি এক্সপ্রেশন যা ৫০ ফলাফল দেয়।
let result = 5 * 10; // সংখ্যাসূচক এক্সপ্রেশন
let fullName = "আলী" + " " + "হাসান"; // স্ট্রিং এক্সপ্রেশন
console.log(result, fullName); // আউটপুট: 50, আলী হাসান
প্র্যাকটিস টাস্ক:
– একটি এক্সপ্রেশন তৈরি করুন যা দুটি সংখ্যার গুণফল গণনা করে।
– আরেকটি এক্সপ্রেশন তৈরি করুন যা আপনার নাম এবং পদবি যুক্ত করে।
– উভয় ফলাফল কনসোলে প্রিন্ট করুন।
জাভাস্ক্রিপ্ট কীওয়ার্ড
জাভাস্ক্রিপ্টে কিছু শব্দ আছে যেগুলো বিশেষ কাজের জন্য সংরক্ষিত, যেমন var, let, const, if, function। এগুলোকে কীওয়ার্ড বলা হয় এবং এদের ভ্যারিয়েবল নাম হিসেবে ব্যবহার করা যায় না।
let name = "রহিম"; // let হলো কীওয়ার্ড
const maxScore = 100; // const হলো কীওয়ার্ড
প্র্যাকটিস টাস্ক:
– তিনটি ভ্যারিয়েবল তৈরি করুন: একটি var, একটি let, এবং একটি const ব্যবহার করে।
– প্রতিটিতে ভিন্ন মান সেট করুন এবং কনসোলে প্রিন্ট করুন।
– একটি সংরক্ষিত কীওয়ার্ড (যেমন if) ভ্যারিয়েবল নাম হিসেবে ব্যবহার করার চেষ্টা করুন এবং দেখুন কী ত্রুটি হয়।
জাভাস্ক্রিপ্ট কমেন্ট
কমেন্ট হলো কোডের মধ্যে লেখা ব্যাখ্যা, যা কোড চালানোর সময় উপেক্ষা করা হয়। এটি কোড পড়তে এবং বুঝতে সাহায্য করে। জাভাস্ক্রিপ্টে দুই ধরনের কমেন্ট আছে:
– সিঙ্গল লাইন কমেন্ট: // দিয়ে শুরু হয়।
– মাল্টি-লাইন কমেন্ট: /* */ এর মধ্যে লেখা হয়।
// এটি একটি সিঙ্গল লাইন কমেন্ট
let x = 5; // x এর মান ৫
/* এটি একটি মাল্টি-লাইন কমেন্ট
এখানে একাধিক লাইন লেখা যায় */
প্র্যাকটিস টাস্ক:
– একটি কোড লিখুন যেখানে দুটি ভ্যারিয়েবল তৈরি করবেন।
– প্রতিটি ভ্যারিয়েবলের পাশে সিঙ্গল লাইন কমেন্ট যোগ করুন যাতে তার উদ্দেশ্য বোঝা যায়।
– কোডের শুরুতে একটি মাল্টি-লাইন কমেন্ট যোগ করুন যেখানে কোডের উদ্দেশ্য বর্ণনা করবেন।
জাভাস্ক্রিপ্ট আইডেন্টিফায়ার
আইডেন্টিফায়ার হলো ভ্যারিয়েবল, ফাংশন, বা অন্যান্য অবজেক্টের নাম। জাভাস্ক্রিপ্টে নামকরণের কিছু নিয়ম আছে:
– নাম অক্ষর (A-Z, a-z), আন্ডারস্কোর (_), বা ডলার সাইন ($) দিয়ে শুরু হতে হবে।
– প্রথম অক্ষরের পর সংখ্যা (0-9) ব্যবহার করা যায়।
– সংরক্ষিত কীওয়ার্ড ব্যবহার করা যাবে না।
let userName = "করিম"; // বৈধ
let _count = 10; // বৈধ
let $price = 500; // বৈধ
// let 1name = "রহিম"; // অবৈধ, সংখ্যা দিয়ে শুরু হয়েছে
প্র্যাকটিস টাস্ক:
– পাঁচটি বৈধ আইডেন্টিফায়ার তৈরি করুন এবং প্রতিটিতে একটি মান সেট করুন।
– একটি অবৈধ আইডেন্টিফায়ার তৈরি করার চেষ্টা করুন এবং দেখুন কী ত্রুটি হয়।
– ফলাফল কনসোলে প্রিন্ট করুন।
জাভাস্ক্রিপ্ট কেস সেনসিটিভিটি
জাভাস্ক্রিপ্ট একটি কেস-সেনসিটিভ ভাষা, অর্থাৎ বড় হাতের (uppercase) এবং ছোট হাতের (lowercase) অক্ষর আলাদাভাবে বিবেচিত হয়। উদাহরণস্বরূপ, lastname এবং lastName দুটি ভিন্ন ভ্যারিয়েবল।
let lastname = "আহমেদ";
let lastName = "রহমান";
console.log(lastname, lastName); // আউটপুট: আহমেদ, রহমান
প্র্যাকটিস টাস্ক:
– দুটি ভ্যারিয়েবল তৈরি করুন: user এবং User।
– প্রতিটিতে ভিন্ন মান সেট করুন এবং কনসোলে প্রিন্ট করুন।
– দেখুন কীভাবে জাভাস্ক্রিপ্ট এদের আলাদা হিসেবে বিবেচনা করে।
জাভাস্ক্রিপ্ট ক্যামেল কেস
ক্যামেল কেস হলো একটি নামকরণ পদ্ধতি, যেখানে একাধিক শব্দ যুক্ত করা হয় এবং প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের হয় (প্রথম শব্দ ছাড়া)। উদাহরণস্বরূপ, myVariableName। জাভাস্ক্রিপ্টে এটি সবচেয়ে জনপ্রিয় নামকরণ স্টাইল।
অন্যান্য স্টাইল:
– স্নেক কেস: my_variable_name
– প্যাসকেল কেস: MyVariableName
let myFirstName = "করিম"; // ক্যামেল কেস
let my_first_name = "রহিম"; // স্নেক কেস
let MyFirstName = "আলী"; // প্যাসকেল কেস
প্র্যাকটিস টাস্ক:
– তিনটি ভ্যারিয়েবল তৈরি করুন: একটি ক্যামেল কেস, একটি স্নেক কেস, এবং একটি প্যাসকেল কেস ব্যবহার করে।
– প্রতিটিতে ভিন্ন মান সেট করুন এবং কনসোলে প্রিন্ট করুন।
জাভাস্ক্রিপ্ট ক্যারেক্টার সেট
জাভাস্ক্রিপ্ট ইউনিকোড ক্যারেক্টার সেট সমর্থন করে, যার মাধ্যমে আপনি যেকোনো ভাষার অক্ষর ব্যবহার করতে পারেন, যেমন বাংলা, আরবি, চীনা ইত্যাদি। এটি জাভাস্ক্রিপ্টকে বিশ্বব্যাপী ব্যবহারযোগ্য করে তোলে।
let banglaText = "আমি জাভাস্ক্রিপ্ট শিখছি";
let emoji = "😊";
console.log(banglaText, emoji);
প্র্যাকটিস টাস্ক:
– একটি ভ্যারিয়েবল তৈরি করুন এবং তাতে বাংলায় একটি বাক্য সংরক্ষণ করুন।
– আরেকটি ভ্যারিয়েবল তৈরি করুন এবং তাতে একটি ইমোজি সংরক্ষণ করুন।
– উভয় মান কনসোলে প্রিন্ট করুন।
জাভাস্ক্রিপ্ট শেখা শুধু একটি দক্ষতা অর্জন নয়, বরং ওয়েব ডেভেলপমেন্টের একটি বিশাল দুনিয়ায় প্রবেশের চাবিকাঠি। এই ব্লগে আমরা জাভাস্ক্রিপ্টের মৌলিক বিষয়গুলো—সিনট্যাক্স, ভ্যালু, লিটারেল, ভ্যারিয়েবল, অপারেটর, এক্সপ্রেশন, কীওয়ার্ড, কমেন্ট, আইডেন্টিফায়ার, কেস সেনসিটিভিটি, ক্যামেল কেস, এবং ক্যারেক্টার সেট—বিস্তারিতভাবে আলোচনা করেছি। প্রতিটি বিষয়ের সাথে দেওয়া উদাহরণ এবং প্র্যাকটিস টাস্ক আপনাকে হাতেকলমে শিখতে সাহায্য করবে।
এখন সময় এসেছে নিজে হাতেকলমে কোডিং শুরু করার। জাভাস্ক্রিপ্টের এই জগতে আপনার যাত্রা শুধু শুরু হয়েছে। প্রতিদিন একটু একটু করে অনুশীলন করুন, আর দেখবেন কীভাবে আপনি একজন দক্ষ ডেভেলপার হয়ে উঠছেন!
আপনার কোনো প্রশ্ন বা বিষয়ে আরও জানার আগ্রহ থাকলে মন্তব্য করুন। আমি আছি আপনাদের পাশে, বুজতেছেন না কমেন্ট করুন, ধন্যবাদ
ভালো থাকুন,সুস্থ থাকুন banglatrick এর সাথেই থাকুন।
