Web API ব্রাউজার API
Web API হলো কিছু ফাংশনালিটি, যেগুলা ওয়েব ডেভেলপমেন্টের অংশ হিসেবে দেয়া হয়। এদের কিছু ফাংশনালিটি শুধু ব্রাউজারে কাজ করে, সেগুলাকে ব্রাউজার API বলা হয়। তবে সাধারণভাবে সবগুলাকে web api বলে। আমি নিচে কয়েকটা গুরুত্বপূর্ণ ওয়েব API বলে দিচ্ছি। যেগুলার অনেক কিছুই তুই আগে থেকে জানস।
DOM (Document Object Model)
পুরা HTML ডকুমেন্টকে একটি অবজেক্টের আকারে নিয়ে আসে DOM। সাথে স্টাইল চেইঞ্জ করার অপশনও নিয়ে আসে DOM-এর মাধ্যমে। এইটা দিয়ে তুই ওয়েবসাইটের যেকোনো কিচ্ছু চেইঞ্জ করতে পারবি। নতুন কিছু যোগ করতে পারবি। সিম্পল একটা উদাহরণ হচ্ছে—
<h1 id="heading">Original Heading</h1>উপরের html কোড চেইঞ্জ করার জন্য জাভাস্ক্রিপ্ট কোড।
let heading = document.getElementById('heading');
heading.innerText = 'Super duper heading';এছাড়াও ওয়েবসাইট এ ক্লিক, বিভিন্ন ধরনের ইভেন্ট, ডাইনামিক html বানানো, স্টাইল চেইঞ্জ করা, এনিমেশন, সহ ওয়েবসাইটকে ইন্টারেক্টিভ এবং ইন্টারেস্টিং করে তোলার বেশিরভাগ কাজ dom দিয়ে করা হয়।
Fetch API:
এই API ব্যবহার করে ডেভেলপাররা সহজেই নেটওয়ার্ক রিকোয়েস্ট করতে পারে। সার্ভার থেকে ডেটা আনতে বা সার্ভারে ডেটা পাঠাতে পারে। এইটাও অনেক জনপ্রিয় একটা ওয়েব API।
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Error:', error));Local Storage:
কোন সিম্পলডাটা যদি ব্রাউজারে লম্বা সময় ধরে স্টোর করে রাখতে হয় তখন Local Storage খুব কাজে লাগে। যেমন ওয়েবসাইট কি লাইট মুডে নাকি ডার্ক মুডে চলবে। ওয়েবসাইট এ ইউজার যদি কোন নিদৃষ্ট ভাষা ইউজ করতে চায়। কিংবা ভিডিও প্লেয়ারের সাউন্ড লেভেল কত থাকবে। এইটাইপের জিনিস যেগুলা অনেকদিন ধরে ইউজারের কাজে লাগবে। Local Storage এ একবার ডেটা স্টোর করলে তা ব্রাউজার বন্ধ করে পুনরায় খোলার পরেও থেকে যায়। যতক্ষণ পর্যন্ত ইউজার নিজে গিয়ে লোকাল স্টোরেজের ডাটা না মুছে ফেলে ততক্ষণ পর্যন্ত এই ডাটা রয়ে যায়।
ডেটা কি-ভ্যালু পেয়ারে (key-value pairs) সংরক্ষিত হয়, যেখানে কি এবং ভ্যালু উভয়ই স্ট্রিং ফরম্যাটে থাকে।
নিচের কয়েক লাইন কোডের মাধ্যমে কিভাবে লোকাল স্টোরেজে ডাটা যোগ করতে হয়। কিভাবে লোকাল স্টোরেজ থেকে ডাটা বের করতে হয়। আবার চাইলে কোন একটা স্পেসিফিক ডাটা ডিলিট করতে চায় সেটা কিভাবে করবে। এমনকি চাইলে লোকাল স্টোরেজের সব ডাটাও ডিলিট করে দিতে পারবে।
//Save data to Local Storage
localStorage.setItem('username', 'JohnDoe');
// get data from Local Storage
let user = localStorage.getItem('username');
console.log(user); // Output: JohnDoe
// Delete data from Local Storage
localStorage.removeItem('username');
// Delete All Data from Local Storage
localStorage.clear();এইগুলা সবই জাভাস্ক্রিপ্ট দিয়ে ব্রাউজারে ফাংশনালিটি বা API ইউজ করে ওয়েবসাইট ইউজ করার এক্সপেরিয়েন্স অনেক ভালো করে ফেলে।
Session Storage:
সেশন স্টোরেজ লোকাল স্টোরেজের মতোই। শুধু একটা ডিফারেন্স। লোকাল স্টোরেজ ডাটা লম্বা সময় পর্যন্ত সেইভ করা থাকে। ব্রাউজার বন্ধ করে দিলেও চলে যায় না। অন্যদিকে সেশন স্টোরেজ এর ডাটা: ব্রাউজার বন্ধ করলে বা ব্রাউজারের ট্যাব ক্লোজ করলে আর থাকে না। বরং চলে যায়।
এটি Local Storage-এর মতোই সেশন স্টোরেজের ডাটা যোগ করা যায়। কোন ডাটা থেকে ভ্যালু নিয়ে আসা যায়। দরকার হলে একটা একটা করে ডাটা ডিলিট করা যায়। আবার চাইলে সব ডাটা একসাথেও ডিলিট করা যায়।
// Save Data to Session Storage
sessionStorage.setItem('authToken', 'abcd1234');
// Get Data from Session Storage
let token = sessionStorage.getItem('authToken');
console.log(token); // Output: abcd1234
// Delete a Data from Session Storage
sessionStorage.removeItem('authToken');
// Delete All Data from Session Storage
sessionStorage.clear();History API:
History API ব্রাউজারের ব্যাক এবং ফরওয়ার্ড বাটনের মাধ্যমে পেজ নেভিগেশন কন্ট্রোল করতে সাহায্য করে। history-এর মধ্যে বেশ কয়েকটা ইউজফুল ফাংশন দেয়া আছে।
- pushState(): বর্তমান URL পরিবর্তন করে নতুন URL যোগ করে।
- replaceState(): বর্তমান URL নতুন URL দিয়ে প্রতিস্থাপন করে।
- go(): একটি নির্দিষ্ট ধাপ এগিয়ে বা পিছিয়ে যায়।
- back(): ব্যাক বাটনের সমতুল্য।
- forward(): ফরওয়ার্ড বাটনের সমতুল্য।
// Show the previous page in the browning history
history.back();
// Show the next page in the browsing history
history.forward();
// Go to step back in the browsing history
history.go(-2);
// Go to the next page
history.go(1);Practice:
- লোকাল স্টোরেজ আর সেশন স্টোরেজ এর মধ্যে ডিফারেন্স কি কি?
- Local Storage ব্যবহার করে ইউজারের ডার্ক মোড প্রেফারেন্স (on/off) সেভ কর। একটা key সেট কর। যেটার নাম হবে mode এবং সেটার ভ্যালু dark সেট কর। তারপরের আবার এই mode এর মান light সেট কর।
- Session Storage ব্যবহার করে ইউজারের লগইন টোকেন সেভ কর। টোকেনের নাম দে userToken এবং ভ্যালু দে abcd1234। পরে সেটা বের করে কনসোল লগ করে দেখা।
- Local Storage-এ ইউজারের নাম স্টোর কর যার নাম userName এবং ভ্যালু দে Alex। পরে সেই নামকে Local Storage থেকে রিমুভ কর।
- History API দিয়ে ব্রাউজারের দুই স্টেপ ব্যাক কর।