মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 6
পাঠ 7: তোমার ওয়েবপেজে জাভাস্ক্রিপ্ট লাইব্রেরীর ব্যবহারজাভাস্ক্রিপ্টের লাইব্রেরির জগৎ
ওয়েবসাইটের ব্যবহারের জন্য হাজার হাজার জাভাস্ক্রিপ্টের লাইব্রেরি আছে এবং এটা ওয়েবসাইটের বিভিন্ন কাজে প্রয়োগ করা হয় যেমন:
- DOM এর কার্যকরী প্রয়োগ (DOM manipulation)
- DOM ইভেন্ট
- AJAX / ডাটা সংগ্রহ (Data retrieval)
- ইফেক্টস & অ্যানিমেশন
- HTML তৈরি করা (templating)
- ওয়েবপেজের নকশা তৈরি করা (Page layout)
- UI গেজেট (UI widgets)
- গ্রাফিক্স & তালিকা
- ডাটা মডেল করা
- রাউটিং & নেভিগেশন
- প্রবেশযোগ্যতা (Accessibility)
- একাধিক ব্রাউজার সমর্থন (Multi-browser support)
- মোবাইল সমর্থন
আরেকভাবে চিন্তা করা যায় - একটি ওয়েবপেজ User Interface-ব্যবহারকারীর ইন্টারফেস (HTML & CSS), Interactivity-ব্যবহারযোগ্যতা (JS + DOM) এবং ডাটা (যা জাভাস্ক্রিপ্টে দিয়ে নিয়ে আসা হয়) দিয়ে গঠিত। লাইব্রেরি ছাড়াই নিজের ইচ্ছামত ডাটা নিয়ে ব্যবহারযোগ্য UI (ব্যবহারকারীর ইন্টারফেস) তৈরি করা যায় অথবা বিভিন্ন লাইব্রেরি ব্যবহার করে প্রয়োজনীয় কাজগুলো সহজেই করা যায়। কিছু লাইব্রেরি আছে যা দিয়ে অনেক কাজ হয়, কিন্তু এমন কিছু লাইব্রেরিও আছে যা দিয়ে শুধু একটি অংশের কাজ করা যায়:
ওয়েবসাইট তৈরি করার ক্ষেত্রে সবচেয়ে কঠিন কাজটি হল উপযুক্ত লাইব্রেরি বাছাই করা, কারণ একবার লাইব্রেরি ব্যবহার করে কোড করলে, পরবর্তীতে লাইব্রেরি বদলানো খুবই কঠিন হয়। এটার কোন সঠিক উত্তর নেই - নিজের কাজ মোতাবেক লাইব্রেরি বাছাই করতে হবে।
ওয়েব ফ্রেমওয়ার্ক (Web frameworks)
এমন কিছু লাইব্রেরি আছে যা দিয়ে "সবকিছু হয়" - ডাটা সংগ্রহ করা থেকে শুরু করে DOM এর কার্যকরী ব্যবহার সহ দারুন সব ব্যবহারকারীর ইন্টারফেস তৈরি করা যায়। নিচের যে কোন ফ্রেমওয়ার্ক ব্যবহার করলেই, নিজেস্ব ওয়েবসাইটে অনেক জাভাস্ক্রিপ্ট চলে আসবে, এজন্য ফ্রেমওয়ার্ক ব্যবহারের আগে কোনটি উপযুক্ত সেটা ভালোভাবে যাচাই করে নিতে হবে। কিছু নির্মাতাদের জন্য, এই ফ্রেমওয়ার্ক খুব বেশি বৈশিষ্ট্য সম্বলিত এবং এজন্য তারা সুনির্দিষ্ট কাজ করার লক্ষ্যে ছোট লাইব্রেরি ব্যবহার করতে স্বাচ্ছন্দ্যবোধ করে থাকে।
সিএসএস (CSS) ফ্রেমওয়ার্ক
একটি CSS লাইব্রেরি হল CSS নীতি সম্বলিত লাইব্রেরি এবং সাথে নথিপত্র আছে যেখানে HTML ট্যাগ ও ক্লাস (class) এর ব্যবহারবিধি দেওয়া থাকে। অনেক জনপ্রিয় CSS লাইব্রেরি রয়েছে যা একটি অসাধারণ ওয়েবসাইট তৈরি করার জন্য যথেষ্ট। অনেক সময় এসব লাইব্রেরিতে ঐচ্ছিক জাভাস্ক্রিপ্ট উইজেটও (widget) থাকে, কিন্তু বেশিরভাগ নির্মাতারাই CSS লাইব্রেরির সাথে আলাদাভাবে জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে থাকে।
জাভাস্ক্রিপ্ট ব্রাউজার লাইব্রেরি
এই লাইব্রেরিগুলো ব্রাউজারের বিভিন্ন কাজ সম্পাদনে সহায়তা করবে - যেমন DOM API, উইন্ডো মেথড - যে বিষয়গুলো আমরা এই কোর্সে দেখেছি। লাইব্রেরিগুলো ব্যবহার করলে অনেক কম কোড করতে হয় এবং বিভিন্ন ব্রাউজারে ব্যবহারের ক্ষেত্রে সমস্যা হয় না।
জাভাস্ক্রিপ্ট অ্যাপ নির্মাণের লাইব্রেরি
ওয়েব অ্যাপ বড় হয়ে গেলে এই লাইব্রেরিগুলো ব্যবহার করা উত্তম। এখন করা কোড সঠিক হলেও, কয়েক শত লাইন কোড করার পর, যখন হাজার লাইনের কোড হয়ে যাবে, তখন বোঝা যাবে যে ভালোভাবে নিয়ম মেনে কোড না করলে "জগাখিচুড়ি" হবে - অর্থাৎ কোড বিশৃঙ্খলভাবে থাকবে। এই লাইব্রেরিগুলো "model (মডেল)" (ডাটা) কে "view (ভিউ)" (উপস্থাপনা) থেকে পৃথক করে এবং প্রায় সময়ই অবজেক্ট-অরিয়েন্টেড প্রোগ্রামিং ব্যবহার করে কোড সংগঠিত করা হয়।
ছোট লাইব্রেরি এবং আরও ছোট লাইব্রেরি
নির্দিষ্ট কাজ সম্পাদনের ক্ষেত্রে নির্মাতারা অনেক ছোট লাইব্রেরি তৈরি করেছেন - যখন একটি লাইব্রেরি অনেক ছোট হয়, তখন তাকে "অতি ক্ষুদ্র লাইব্রেরি" (microlibrary) বলা হয়। নিচে এমন কিছু লাইব্রেরি দেওয়া হল:
- DOM: tinyDOM
- Events: Events.js
- AJAX: MicroAjax
- Animation: Morpheus, Viper
- Data Modeling: Spine, Knockout
- Templates: Handlebars, Mustache
- Routing: PathJS
- Object-Orientation: Classy, Klass
- Graphics: Processing.JS (See example on KA), RaphaelJS (See example on KA), D3, Three.JS (See example on KA), Paper.js
- Charts: gRaphael, High Charts
- Date/time: moment.js
আরও পেতে microjs.com এ যাওয়া যায় অথবা ইন্টারনেটে "javascript library [functionality]" লেখা যায়। functionality এর স্থানে যে কাজটি করতে চাই সেটা লিখতে হবে।
খান একাডেমিতে আগে কি জাভাস্ক্রিপ্ট লাইব্রেরি সম্পর্কে শিখেছ? নিচে কমেন্টে উত্তর দাও।
আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।