জাভাস্ক্রিপ্ট চিটশিট
জাভাস্ক্রিপ্ট (JS) একটি প্রোগ্রামিং ভাষা যা ওয়েব পেজকে ইন্টারেক্টিভ করে। এই চিটশিটে জাভাস্ক্রিপ্টের সব গুরুত্বপূর্ণ ধারণা অন্তর্ভুক্ত করা হয়েছে।
১. জাভাস্ক্রিপ্ট কীভাবে যোগ করবেন
HTML-এ JS তিনভাবে যোগ করা যায়:
- ইনলাইন:
<script>
ট্যাগে। - ইন্টারনাল: HTML-এর মধ্যে।
- এক্সটারনাল:
.js
ফাইলে।
উদাহরণ:
ইনলাইন
এক্সটারনাল
২. মৌলিক ধারণা
২.১ ভেরিয়েবল
কীওয়ার্ড | বর্ণনা | উদাহরণ |
---|---|---|
var | পুরানো স্টাইল, ফাংশন স্কোপ। | var x = 10; |
let | ব্লক স্কোপ, পরিবর্তনযোগ্য। | let y = 20; |
const | ব্লক স্কোপ, অপরিবর্তনীয় (মান নয়, রেফারেন্স) | const z = 30; |
উদাহরণ:
২.২ ডেটা টাইপ
টাইপ | বর্ণনা | উদাহরণ |
---|---|---|
Number | সংখ্যা। | let num = 42; |
String | টেক্সট। | let str = "হ্যালো"; |
Boolean | সত্য/মিথ্যা। | let bool = true; |
Object | কী-ভ্যালু জোড়া। | let obj = {name: "করিম"}; |
Array | তালিকা। | let arr = [1, 2, 3]; |
Null | শূন্য মান। | let n = null; |
Undefined | সংজ্ঞায়িত নয়। | let u; |
Symbol | অনন্য মান। | let sym = Symbol("id"); |
উদাহরণ:
২.৩ অপারেটর
ধরন | উদাহরণ |
---|---|
গাণিতিক | + , - , * , / , % , ** (ঘাত) |
তুলনা | == , === , != , !== , > , < , >= |
লজিক্যাল | && (এবং), ` |
অ্যাসাইনমেন্ট | = , += , -= , *= , /= |
উদাহরণ:
৩. কন্ট্রোল স্ট্রাকচার
৩.১ শর্ত (Conditionals)
ধরন | বর্ণনা | উদাহরণ |
---|---|---|
if | শর্ত সত্য হলে কোড চলে। | if (x > 0) { console.log("ধনাত্মক"); } |
else if | একাধিক শর্ত। | else if (x < 0) { console.log("ঋণাত্মক"); } |
else | শর্ত মিথ্যা হলে। | else { console.log("শূন্য"); } |
switch | একাধিক কেস। | switch (day) { case 1: ... } |
উদাহরণ:
৩.২ লুপ (Loops)
ধরন | বর্ণনা | উদাহরণ |
---|---|---|
for | নির্দিষ্ট সংখ্যকবার চলে। | for (let i = 0; i < 5; i++) { ... } |
while | শর্ত সত্য হলে চলে। | while (x > 0) { x--; } |
do...while | কমপক্ষে একবার চলে। | do { x++; } while (x < 5); |
for...of | অ্যারে বা ইটারেবলের জন্য। | for (let val of arr) { ... } |
for...in | অবজেক্টের প্রোপার্টির জন্য। | for (let key in obj) { ... } |
উদাহরণ:
৪. ফাংশন
ধরন | বর্ণনা | উদাহরণ |
---|---|---|
Declaration | নামসহ ফাংশন। | function add(a, b) { return a + b; } |
Expression | ভেরিয়েবলে ফাংশন। | const add = function(a, b) { return a + b; }; |
Arrow | সংক্ষিপ্ত সিনট্যাক্স। | const add = (a, b) => a + b; |
উদাহরণ:
৫. অবজেক্ট এবং অ্যারে
৫.১ অবজেক্ট
৫.২ অ্যারে
মেথড | বর্ণনা | উদাহরণ |
---|---|---|
push | শেষে যোগ। | arr.push(4); |
pop | শেষ থেকে সরানো। | arr.pop(); |
shift | প্রথম থেকে সরানো। | arr.shift(); |
unshift | প্রথমে যোগ। | arr.unshift(0); |
map | প্রতিটি আইটেমে ফাংশন। | arr.map(x => x * 2); |
filter | শর্ত মেনে আইটেম। | arr.filter(x => x > 2); |
reduce | একটি মানে রূপান্তর। | arr.reduce((a, b) => a + b); |
উদাহরণ:
৬. ইভেন্ট হ্যান্ডলিং
ধরন | বর্ণনা | উদাহরণ |
---|---|---|
onclick | ক্লিক ইভেন্ট। | button.onclick = () => alert("ক্লিক!"); |
addEventListener | ইভেন্ট লিসেনার। | button.addEventListener("click", fn); |
উদাহরণ:
৭. DOM ম্যানিপুলেশন
মেথড | বর্ণনা | উদাহরণ |
---|---|---|
getElementById | আইডি দিয়ে এলিমেন্ট। | document.getElementById("id"); |
querySelector | CSS সিলেক্টর। | document.querySelector(".class"); |
innerHTML | HTML কনটেন্ট। | element.innerHTML = "<p>নতুন</p>"; |
style | স্টাইল পরিবর্তন। | element.style.color = "red"; |
উদাহরণ: