তুমি react এর জন্য রেডি কিনা, বোঝা যাবে আজকে (মডিউল ৪৪)
#module_release #browser_debug_milestone #module_44
এই মাইলস্টোনসহ চার মাইলস্টোন ধরে জাভাস্ক্রিপ্ট দেখতেছো। কিছু সহজ আর কিছু কঠিন মিলিয়ে কোনরকম পারতেছো। হয়তো ভালো, না হয় খারাপ-ভালো মিলিয়ে। এইবার তোমার কাজ হচ্ছে রিভিশন দেয়া। এই এসাইনমেন্ট এর আগে রিভিশন দাও। এসাইনমেন্ট এর পরেও দুই দিন রিভিশন দিতে পারবে। তখন স্পেশাল দুই দিন দেয়া হবে। সো, চাপ নেয়ার কিছু নাই। আমি সিম্পল একটা লিষ্ট দিয়ে দিচ্ছি। যাতে তোমার ঘাটতি থাকলে নেক্সট এক সপ্তাহের মধ্যে পুষিয়ে নিতে পারো।
আজকের মডিউল:
আজকের ১০টা ভিডিও একটু বেশিই স্পেশাল এবং এতে আগের টপিকগুলোই আবার রিভিশন দেয়ার জন্য দেয়া হয়েছে ।জাভাস্ক্রিপ্ট এর একজন জুনিয়র ডেভেলপার হওয়ার জন্য যা যা লাগে সেগুলোর একটা লিষ্ট এর মতো করে দিয়েছি যাতে এই টপিকগুলো দেখে তুমি নিজেও বুঝতে পারো।
আজকের জাভাস্ক্রিপ্ট এর কনসেপ্টগুলো React এ গেলে কাজে লাগবে।
.
১. কিভাবে let, const দিয়ে ভেরিয়েবল লিখতে হয়,কখন কোনটা ইউজ করে তুমি কি জানো ?var নামক একটা জিনিস আছে সেটাও জানতে হবে।
২.১ কিভাবে কন্ডিশন লিখতে হয়, ছয় রকমের কন্ডিশন (>, <, >=, <=, ==, !=, ===, !==) কোনটা কোন জিনিসের জন্য ইউজ করবে। এছাড়াও && বা ।। দিয়ে কিভাবে একাধিক কন্ডিশন এর মধ্যে দুইটাই ফুলফিল করতে হবে আবার দুইটার যেকোন একটা ফুলফিল করতে হবে, সেটা কিভাবে করবে।
২.২. এক বা একাধিক কন্ডিশন দিয়ে কিভাবে if-else লিখে আবার কখন if-else if – else লিখে। সেই রকম একটা উদারহণ চিন্তা করে তুমি লিখে ফেলো। else ছাড়া শুধু if দিয়েও কন্ডিশন লিখো। একটা if অনেকগুলা else if এবং লাস্টে একটা else এর কন্ডিশন লিখো। হতে পারে গ্রেডিং বের করার জন্য কন্ডিশন লিখবে তুমি।
৩. array কিভাবে ডিক্লেয়ার করে array এর মধ্যে length, index, push, pop, indexOf, includes এইগুলা কিভাবে কাজ করে। কোনটা দিয়ে কি করে? সেগুলা কি তুমি জানো? কোন একটা জিনিস array কিনা সেটা চেক করার সিস্টেম জানতে হবে। আরেকটু ভালো হয় slice এবং splice জানলে। আরো বোনাস কিছু জানতে চাইলে shift, unshift, join দেখতে পারো। এডভান্স হিসেবে reduce দেখতে পারো।
৪. দুইটা বেসিক লুপ ,এর মধ্যে for loop তোমাকে জানতেই হবে। while লুপটাও দেখে রাখতে পারো। যদিও আমরা এই দুইটা লুপই কম ইউজ করবো। তাও কখনো লাগলে যেন তুমি বুঝে ফেলতে পারো। এছাড়া কখন for of আর কখন for in ইউজ করবে সেটা তুমি জানো।
৫. function একটা অবশ্য জিনিস। বিশেষ করে সিম্পল একটা ফাংশন কখন ডিক্লেয়ার করতে হয়। কখন ফাংশন থেকে return করে। আর কখন করে না। আর কিভাবে ফাংশন এর মধ্যে parameter নিতে হয়। কিভাবে কল করে। ফাংশন এর রিটার্ন কোন ভেরিয়েবলে রেখে সেই ভেরিয়েবল নিয়ে কিভাবে কাজ করে।
৬. আখেরি রত্ন হচ্ছে Object তাই কোন একটা অবজেক্ট কিভাবে ডিক্লেয়ার করে। সেখান property কিভাবে কিভাবে একসেস করা যায়। এছাড়াও অবজেক্ট এর প্রপার্টি এর ভ্যালু হিসেবে কিভাবে array, object ইউজ করা যায়।
.
সিম্পল বেসিক কয়েকটা ডাটা টাইপ সম্পর্কে জানতে হবে।
১. string কি জিনিস। স্ট্রিং কেমনে ডিক্লেয়ার করে। স্ট্রিং থেকে কিভাবে কোন একটা ক্যারেক্টার খুঁজে বের করে। চাইলে স্ট্রিং এর উপরে কি লুপ চালানো যায়। এছাড়াও length, includes, indexOf, toUpperCase, toLowerCase, জানতেই হবে। subString, concat জানলে ভালো। বোনাস হিসেবে জানতে পারো string কি mutable নাকি immutable
২. number সম্পর্কে জানতে হবে। integer, float কোনগুলা। স্ট্রিং থেকে নাম্বারে রূপান্তর করার সিস্টেম। কোন একটা সংখ্যা integer কিনা সেটা চেক করার সিস্টেম জানতে হবে। NaN বলতে একটা জিনিস আছে। সেটা কি জিনিস।
৩. true false কখন ইউজ করে। সেটা জানতে হবে। কি কি ধরনের জিনিস জাভাস্ক্রিপ্ট এর truthy আর কি কি জিনিস জাভাস্ক্রিপ্ট এ falsy সেটা জানতে হবে।
৪. null এবং undefined কি জিনিস। কখন কোনটা ইউজ করা হয়। বা কখন কোনটা কিভাবে চেক করতে হয়। সেটা জানতে হবে।
ES6 রিলেটেড সাতটা জিনিস তোমাকে জানতে হবে
১. একটা টেম্পলেট স্ট্রিং দিয়ে একটা স্ট্রিং ভেরিয়েবল ডিক্লেয়ার করো। সেটার মধ্যে অবজেক্ট এর প্রপার্টি এর মান কিভাবে বসায় সেটা জানতে হবে। বিশেষ করে নেস্টেড অবজেক্ট আছে সেটার প্রপার্টি থেকে। বা কোন একটা অবজেক্ট এর প্রপার্টি array সেই array থেকে ভ্যালু এনে কিভাবে টেমপ্লেট স্ট্রিং এর মধ্যে বসাতে পারবে ।
২. স্প্রেড অপারেটর (…) কিভাবে কাজ করে। বিশেষ করে একটা array কে কপি করে নতুন করে array বানাবে এবং সেখানে একটা উপাদান যোগ করবে। আবার একটা উপাদান কে বাদ দিয়ে বাকি সব উপাদানকে কিভাবে যোগ করবে (filter ইউজ করে)
৩.১. শূন্য প্যারামিটারওয়ালা একটা অ্যারো ফাংশন কিভাবে লিখে। উদাহরণ হিসাবে তুমি এখন একটা অ্যারো ফাংশন লিখবে যেটা ৯ রিটার্ন করবে।
৩.২. এক প্যারামিটার ওয়ালা একটা অ্যারো ফাংশন ডিক্লেয়ার করবে। এই ফাংশনের কাজ হবে যে প্যারামিটার নিবে সেটাকে ১২ দিয়ে গুণ করে গুণফল রিটার্ন করবে।
৩.৩ দুই, প্যারামিটার ওয়ালা একটা অ্যারো ফাংশন লিখবে। এই ফাংশনের কাজ হবে যে দুইটা প্যারামিটার ইনপুট নিবে। সেই দুইটা প্যারামিটারকে যোগ করে যোগফলকে চার দিয়ে ভাগ করে ভাগফল রিটার্ণ করে দাও।
৩.৪ একাধিক লাইনওয়ালা অ্যারো ফাংশন লিখো। সেটাতে দুইটা প্যারামিটার নিবে। ওই arrow ফাংশনটা হবে অনেকগুলা লাইনের। সেখানে প্রত্যেকটা ইনপুট প্যারামিটার এর সাথে ৫ যোগ করবে তারপর যোগফল দুইটাকে আবার গুণ করবে। ক্যামনে করবে সেটা চিন্তা করে বের করার চেষ্টা করো।
Fundamentals js
// 1. How to declare a variable using let and const
const fatherName = 'Arnold';
let season = 'rainy';
season = 'winter';
// 2. conditions
// 6 basic conditions: >,<, ===, !==, <=, >=
// multiple conditions: &&, ||
if (fatherName === 'arnold' || season === 'rainy') {
}
else if (fatherName === 'Arnold') {
}
else {
}
// 3. array declare
// index,
// length, push,
const numbers = [89, 35, 98, 12];
numbers[0] = 56;
// 4. for loop
for (let i = 0; i < numbers.length; i++) {
const number = numbers[i];
confirm.log(number);
}
// 5. function
function multiply(num1, num2) {
const result = num1 * num2;
return result;
}
const output = multiply(35, 78);
// 6. Object
// 3 ways to access property by name
const student = {
name: 'Salib Khan',
age: 32,
movies: ['king khan', 'Dhakar Mastan']
}
const myVariable = 'age';
console.log(student.age); // direct by property
console.log(student['age']);// access via property name string
console.log(student[myVariable]); // access via property name in a variableNotation js
const person = {
name: 'Lal Nil Holud mia',
profession: 'Traffic Surgeon',
age: 39,
25: 'Summer',
'son-name': 'Sunny',
address: 'Shahabag'
}
// dot notation
const prof1 = person.profession;
// bracket notation
const prof2 = person["profession"];
const pName = 'profession';
const prof3 = person[pName];
// console.log(prof3);
const season = person[25];
// console.log(season);
const son = person['son-name'];Array mathod js
const products = [
{ name: 'laptop', price: 3200, brand: 'lenovo', color: 'silver' },
{ name: 'phone', price: 7000, brand: 'iphone', color: 'golden' },
{ name: 'watch', price: 3000, brand: 'casio', color: 'yellow' },
{ name: 'sungalss', price: 300, brand: 'ray', color: 'black' },
{ name: 'camera', price: 9000, brand: 'canon', color: 'gray' }
];
const brands = products.map(product => product.brand);
// console.log(brands);
const prices = products.map(product => product.price);
// console.log(prices);
// products.forEach(product => console.log(product))
// products.forEach(product => console.log(product.color))
products.forEach(product => {
})
// 3. filter
const cheap = products.filter(product => product.price <= 5000);
// console.log(cheap);
const specificName = products.filter(p => p.name.includes('n'));
// console.log(specificName);
//4. find
const special = products.find(p => p.name.includes('n'));
console.log(special);
Distruring js
// 1. array destructuring
const numbers = [42, 65];
// const x = numbers[0];
// const y = numbers[1];
// const [x, y] = [42, 65]
const [x, y] = numbers;
function boxify(num1, num2) {
const nums = [num1, num2];
return nums;
}
// const [first, second] = [90, 34]
const [first, second] = boxify(90, 34);
// console.log(boxify(90, 34));
const student = {
name: 'Salib Khan',
age: 32,
movies: ['king khan', 'Dhakar Mastan']
}
const [firstMovie, secondMovie] = student.movies;
// object destructuring
const { name, age } = { name: 'alu', age: 14 };
const { name, age } = { id: 12, name: 'alu', salary: 3400, age: 14 };
const employee = {
ide: 'VS Code',
designation: 'developer',
machine: 'mac',
languages: ['html', 'css', 'js'],
specification: {
height: 66,
weight: 67,
address: 'kumarkhali',
drink: 'water',
watch: {
color: 'black',
price: 500,
brand: 'garmin'
}
}
}
const { machine, ide } = employee;
// const { weight, address } = employee.specification;
const { brand } = employee?.specification?.watch;Es6 js
const numbers = [89, 35, 98, 12];
const student = {
name: 'Salib Khan',
age: 32,
movies: ['king khan', 'Dhakar Mastan']
};
// 1. template string
const about = `My Name is ${student.name} age of ${student.age} has number ${numbers[2]} also liked movies ${student.movies[0]}`;
console.log(about)
// 2. arrow function
const getFiftyFive = () => 55;
const addSixtyFive = num => num + 65;
const isEven = x => x % 2 == 0;
const addThree = (x, y, z) => x + y + z;
const doMath = (num1, num2) => {
const sum = num1 + num2;
return sum;
}
// spread operator
const newNumbers = [...numbers];
// create a new array from an older array and add an element
const currentNumbers = [...numbers, 55];
numbers.push(99);
numbers.push(99);
numbers.push(99);
console.log(numbers);
console.log(newNumbers);
console.log(currentNumbers);Fetch Js
// 1. JSON => stringify, parse
const student = {
name: 'Salib Khan',
age: 32,
movies: ['king khan', 'Dhakar Mastan']
}
const studentJSON = JSON.stringify(student);
// console.log(student);
// console.log(studentJSON);
const studentObj = JSON.parse(studentJSON);
// console.log(studentObj);
//2. fetch
fetch('url')
.then(res => res.json())
.then(data => console.log(data));
// keys, values
const keys = Object.keys(student);
const values = Object.values(student);
// for
const numbers = [23, 54, 67, 87, 23, 78];
numbers.forEach(num => console.log(num));
numbers.map(num => num * 2);
// for of on array like object
// loop on an object using for in
// add or remove from an array
const products = [
{ name: 'laptop', price: 3200, brand: 'len', color: 'silver' },
{ name: 'phone', price: 7000, brand: 'HTC', color: 'golden' },
{ name: 'watch', price: 3000, brand: 'casio', color: 'yellow' },
{ name: 'sungalss', price: 300, brand: 'ray', color: 'black' },
{ name: 'camera', price: 9000, brand: 'canon', color: 'gray' }
];
const newProduct = { name: 'webcam', price: 700, brand: 'Lal' };
// copy products array and then add newProduct
const newProducts = [...products, newProduct];
// create a new array without one specific item
// remove phone means create a new array without the phone
const remaining = products.filter(p => p.name !== 'phone');Short js
// 'almas', 5, true, {}, []
// '', 0, false, null, undefined
// check truthy
let myVar = 5;
// check any truthy
if (myVar) {
myVar = myVar * 100;
}
else {
myVar = 0;
}
let myMoney = 50;
// you check negative or falsy anything
if (!myMoney) {
}
const money = 800;
let food;
if (money > 100) {
food = 'biryani';
}
else {
food = 'cha biscuit';
}
// ternary
let food1 = money > 100 ? 'biryani' : 'cha biscuit';
// console.log(food1);
let drink = (money > 100 && myVar > 100) ? 'coke' : 'filter water';
// console.log(drink);
// number to string conversion
const num1 = 52;
// console.log(num1);
const numStr = num1 + '';
// console.log(numStr)
// string to number
const input = '560';
const inputNum = +input;
// console.log(inputNum);
//
let isActive = true;
const showUser = () => console.log('display User');
const hideUser = () => console.log('hide User');
// isActive ? showUser() : hideUser();
// use && if the left side is true then right side will be executed
isActive && showUser();
// use || if the left side is false then right side will be executed
isActive || hideUser();
// toggle boolean
isActive = !isActive;Storage js
const addToLocalStorage = () => {
const idInput = document.getElementById('storage-id');
const id = idInput.value;
const valueInput = document.getElementById('storage-value');
const value = valueInput.value;
//
if (id && value) {
localStorage.setItem(id, value);
}
idInput.value = '';
valueInput.value = '';
}Summary
/*
Fundamentals
1.1 variable (let, const) three types variable
1.2 condition (<. >, ===, !==. <=, >=) && ||, if-else if-else
1.3 array: declare, length, index, push, pop, indexOf, includes
1.4 for loop, while
1.5 function return parameter
1.6 Object property, including array, object
------------------
ES6
1. template string ${}
2. spread (...)
2.1 copy an array then add a new element to an array
2.1 use filter to remove an element from an array
3. Arrow function
3.1 no parameter ()
3.2 single parameter
3.3 multiple parameters ()
3.4 multi line
4 destructuring : object destructuring array destructuring
5. object declaration shorthand
6. function parameter default value
7. Optional chaining (?.)
--------------------------
Browser API
1. local storage session stoage
2. location API
3. History API
4. fetch
--------------------
Others
1. array: map, forEach, filter, find
2. ternary operator
3. logical and logical or && ||
4. JOSN (stringify, parse)
5. +,
*/
const x = 50;
const y = 100;
const obj = {
x: x,
y: y
};
// shortchut
const obj1 = { x, y }
const name = 'Solimullah';
const area = 'Dhaka';
const nobab = {
name: name,
area: area
}
const nobab2 = { name, area };