JavaScript ইন্ট্রোডাকশন
JavaScript একটি শক্তিশালী প্রোগ্রামিং ভাষা যা ওয়েব পেজগুলিকে ইন্টারঅ্যাক্টিভ করে তোলে। HTML এবং CSS এর সাথে মিলে JavaScript ওয়েব ডেভেলপমেন্টের ভিত্তি।
JavaScript কোথায় লিখবেন?
/* 1. Inline - HTML এর মধ্যে */
<button onclick="alert('হ্যালো!')">
ক্লিক করুন
</button>
/* 2. Internal - <script> ট্যাগ */
<script>
console.log("হ্যালো জাভাস্ক্রিপ্ট!");
</script>
সেরা উপায়: External File
/* 3. External - আলাদা ফাইল */
<script src="script.js"></script>
// script.js ফাইলে:
console.log("বাহ্যিক ফাইল");
alert("এটি কাজ করছে!");
🎯 লাইভ ডেমো: আপনার প্রথম JavaScript
Output এখানে দেখা যাবে...
💡 শুরু করার আগে জানুন
Console ব্যবহার করুন: ব্রাউজারে F12 চাপুন এবং Console ট্যাবে যান। এখানে কোড লিখে ফলাফল দেখতে পারবেন।
ছোট থেকে শুরু করুন: প্রথমে console.log() দিয়ে শুরু করুন এবং ধীরে ধীরে জটিল জিনিস শিখুন।
ভেরিয়েবল এবং Scope
ভেরিয়েবল হল ডেটা সংরক্ষণের জন্য একটি নাম। এটি একটি বাক্সের মতো যেখানে আমরা মূল্য সংরক্ষণ করি।
var (পুরানো)
এটি পুরানো উপায়। এড়িয়ে চলুন।
var name = "রবিউল";
var age = 25;
শেখা দরকার
let (আধুনিক)
পরিবর্তনযোগ্য মূল্য। সবসময় এটি ব্যবহার করুন।
let name = "রবিউল";
let age = 25;
name = "করিম";
সুপারিশকৃত
const (ধ্রুবক)
অপরিবর্তনীয় মূল্য। প্রথম পছন্দ হওয়া উচিত।
const PI = 3.14159;
const country = "বাংলাদেশ";
const age = 25;
সুপারিশকৃত
🎯 ভেরিয়েবল ডেমো
ডেটা টাইপ
JavaScript এ দুই ধরনের ডেটা আছে: Primitive (সহজ) এবং Non-Primitive (জটিল)।
Primitive ডেটা টাইপ
// String - টেক্সট
const name = "রবিউল";
// Number - সংখ্যা
const age = 25;
const price = 99.99;
// Boolean - সত্য/মিথ্যা
const isActive = true;
// Undefined - মূল্য নির্ধারিত নয়
let x;
// Null - খালি মূল্য
let y = null;
Non-Primitive ডেটা টাইপ
// Array - তালিকা
const fruits = ["আম", "কলা"];
// Object - সম্পত্তি সহ
const person = {
name: "করিম",
age: 30
};
// Function
function greet() {
return "সালাম!";
}
🎯 ডেটা টাইপ চেক করুন
অপারেটর
অপারেটর হল বিশেষ চিহ্ন যা গণিতের কাজ, তুলনা এবং অন্যান্য কার্যক্রম করতে ব্যবহৃত হয়।
যোগ/বিয়োগ/গুণ
মৌলিক গণনা কাজ করতে ব্যবহৃত হয়।
let a = 10, b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
বেসিক
তুলনা অপারেটর
দুটি মূল্য তুলনা করে true/false দেয়।
console.log(5 == 5); // true
console.log(5 === "5"); // false
console.log(5 > 3); // true
console.log(5 <= 5); // true
বেসিক
যুক্তি অপারেটর
একাধিক শর্ত একসাথে পরীক্ষা করে।
let a = true, b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
বেসিক
🎯 অপারেটর ডেমো
শর্তাবলী (If/Else)
শর্তাবলী আমাদের বিভিন্ন পরিস্থিতিতে বিভিন্ন কাজ করতে সাহায্য করে।
If Statement
const age = 18;
if (age >= 18) {
console.log("আপনি প্রাপ্তবয়স্ক");
}
If/Else
const age = 15;
if (age >= 18) {
console.log("প্রাপ্তবয়স্ক");
} else {
console.log("নাবালক");
}
If/Else If/Else
const score = 75;
if (score >= 80) {
console.log("এ+ (চমৎকার)");
} else if (score >= 70) {
console.log("এ (খুব ভালো)");
} else {
console.log("বি (ভালো)");
}
Ternary Operator
const age = 20;
const status = (age >= 18) ?
"প্রাপ্তবয়স্ক" : "নাবালক";
console.log(status);
🎯 শর্তাবলী ডেমো
লুপ (পুনরাবৃত্তি)
লুপ একই কাজ একাধিকবার করার জন্য ব্যবহৃত হয়।
For Loop
নির্দিষ্ট সংখ্যক বার পুনরাবৃত্তি করে।
for (let i = 1; i <= 5; i++) {
console.log("সংখ্যা: " + i);
}
বেসিক
While Loop
শর্ত সত্য থাকা পর্যন্ত চলে।
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}
বেসিক
forEach
অ্যারের প্রতিটি উপাদানে কাজ করে।
const arr = [1, 2, 3];
arr.forEach(item => {
console.log(item);
});
আধুনিক
🎯 লুপ ডেমো
ফাংশন
ফাংশন হল কোডের একটি ব্লক যা একটি নির্দিষ্ট কাজ করে। একে বার বার ব্যবহার করা যায়।
সাধারণ ফাংশন
function greet(name) {
return "আস্সালামু আলাইকুম, " + name;
}
console.log(greet("করিম"));
Arrow Function
const add = (a, b) => {
return a + b;
};
console.log(add(5, 3)); // 8
🎯 ফাংশন ডেমো
অ্যারে
অ্যারে হল একাধিক মূল্য একসাথে সংরক্ষণ করার উপায়।
অ্যারে তৈরি করা
বিভিন্ন উপায়ে অ্যারে তৈরি করুন।
// সরাসরি
const fruits = ["আম", "কলা"];
// নতুন Array
const nums = new Array(1,2,3);
বেসিক
অ্যারে মেথড
অ্যারে পরিবর্তন করার মেথড।
const arr = [1, 2];
arr.push(3); // শেষে যোগ করুন
arr.pop(); // শেষ উপাদান সরান
arr.length; // দৈর্ঘ্য জানুন
বেসিক
অ্যারে অ্যাক্সেস
অ্যারের উপাদান পান।
const arr = ["ক", "খ", "গ"];
console.log(arr[0]); // ক
console.log(arr[1]); // খ
বেসিক
🎯 অ্যারে অপারেশন
অবজেক্ট
অবজেক্ট হল সম্পত্তি এবং মূল্যের সমন্বয়ে তৈরি। এটি বাস্তব জিনিসের প্রতিনিধিত্ব করে।
অবজেক্ট তৈরি করা
const person = {
name: "করিম",
age: 25,
city: "ঢাকা",
greet: function() {
return "আস্সালামু আলাইকুম";
}
};
অবজেক্ট অ্যাক্সেস
console.log(person.name);
// বা
console.log(person["name"]);
// মেথড কল করা
console.log(person.greet());
🎯 অবজেক্ট ডেমো
DOM (ডকুমেন্ট অবজেক্ট মডেল)
DOM হল HTML পেজের সব উপাদানের একটি রিপ্রেজেন্টেশন। JavaScript দিয়ে আমরা DOM পরিবর্তন করতে পারি।
⚠️ গুরুত্বপূর্ণ: DOM পরিবর্তন এই ওয়েবপেজে সম্পূর্ণভাবে কাজ করবে না কারণ এটি একটি সিঙ্গেল পেজ অ্যাপ্লিকেশন। আপনার নিজস্ব HTML ফাইলে এই কোড প্র্যাকটিস করুন।
এলিমেন্ট খুঁজে পাওয়া
HTML এলিমেন্ট খুঁজুন।
// ID দিয়ে
const el = document.getElementById("id");
// ক্লাস দিয়ে
const els = document.getElementsByClassName("cls");
বেসিক
এলিমেন্ট পরিবর্তন
এলিমেন্টের কন্টেন্ট বদলান।
// টেক্সট পরিবর্তন
el.textContent = "নতুন টেক্সট";
// HTML পরিবর্তন
el.innerHTML = "<p>নতুন</p>";
বেসিক
স্টাইল পরিবর্তন
CSS স্টাইল পরিবর্তন করুন।
el.style.color = "লাল";
el.style.fontSize = "20px";
el.style.backgroundColor = "হলুদ";
বেসিক
💡 DOM এর সাথে কাজ করার টিপস
আপনার নিজস্ব HTML ফাইল তৈরি করুন এবং সেখানে JavaScript লিখুন। এই ওয়েবপেজে DOM সরাসরি পরিবর্তন করা যায় না কিন্তু আপনার ব্রাউজার console এ অন্য পেজের DOM নিয়ে খেলতে পারবেন।
ইভেন্ট
ইভেন্ট হল ব্যবহারকারীর ক্রিয়াকলাপ যেমন ক্লিক, টাইপ করা ইত্যাদি।
Click ইভেন্ট
যখন কেউ ক্লিক করে।
const btn = document.getElementById("btn");
btn.addEventListener("click", function() {
console.log("ক্লিক করা হয়েছে!");
});
বেসিক
Input ইভেন্ট
ইনপুট ফিল্ডে লেখা হলে।
const inp = document.getElementById("input");
inp.addEventListener("input", function() {
console.log(inp.value);
});
বেসিক
সাধারণ ইভেন্ট
অন্যান্য গুরুত্বপূর্ণ ইভেন্ট।
// মাউস ওভার
el.addEventListener("mouseover", fn);
// ফোকাস পাওয়া
inp.addEventListener("focus", fn);
বেসিক
🎯 ইভেন্ট ডেমো
স্ট্রিং
স্ট্রিং হল অক্ষর এবং শব্দের একটি সংগ্রহ।
স্ট্রিং তৈরি
বিভিন্ন উপায়ে।
const str1 = "হ্যালো";
const str2 = 'বিশ্ব';
const str3 = `টেমপ্লেট`;
বেসিক
স্ট্রিং মেথড
স্ট্রিং পরিবর্তন করুন।
const str = "হ্যালো";
console.log(str.length);
console.log(str.toUpperCase());
console.log(str.toLowerCase());
বেসিক
টেমপ্লেট লিটারেল
ভেরিয়েবল সরাসরি ব্যবহার করুন।
const name = "করিম";
const msg = `আস্সালামু আলাইকুম ${name}`;
console.log(msg);
আধুনিক
🎯 স্ট্রিং অপারেশন
অ্যাডভান্সড কনসেপ্ট
এখানে আমরা আরও জটিল কিন্তু গুরুত্বপূর্ণ JavaScript কনসেপ্ট শিখব।
Callback ফাংশন
একটি ফাংশনকে অন্যের আর্গুমেন্ট হিসেবে পাঠান।
function greet(name, callback) {
console.log("হ্যালো " + name);
callback();
}
greet("করিম", () => {
console.log("সম্পন্ন!");
});
মধ্যম
Destructuring
অ্যারে বা অবজেক্ট সহজে আনপ্যাক করুন।
const [a, b] = [1, 2];
const {name} = {name: "করিম"};
console.log(a, name);
মধ্যম
Spread Operator
অ্যারে এবং অবজেক্ট ছড়িয়ে দিন।
const arr1 = [1, 2];
const arr2 = [...arr1, 3];
const obj2 = {...obj1, age: 30};
মধ্যম
💡 অ্যাডভান্সড টপিক্স শিখার পরামর্শ
এই কনসেপ্টগুলি বোঝার জন্য আপনাকে অবশ্যই প্রথমে বেসিক কনসেপ্টগুলি ভালোভাবে জানতে হবে।
নিয়মিত প্র্যাকটিস করুন এবং বিভিন্ন প্রজেক্টে ব্যবহার করুন। শুধু পড়া নয়, সরাসরি কোড লিখুন এবং পরীক্ষা করুন।