ওয়েবসাইটগুলির হিডেন হিরো: ডিওএম বোঝা

"দম" এমন একটি শব্দ যা ফ্রন্ট-এন্ড ওয়েব ডিজাইন এবং বিকাশে প্রচুর ব্যবহৃত হয়। এটি "ডকুমেন্ট অবজেক্ট মডেল" এর জন্য দাঁড়িয়েছে এবং এটি ওয়েবসাইটগুলির একটি মৌলিক অংশ।

ডিওএম যতটা গুরুত্বপূর্ণ, অনেক লোক এটি বুঝতে পারে না। আসলে, আপনি এগুলি সম্পর্কে অনেক কিছু না শিখে বছরের পর বছর ধরে প্রোগ্রাম করতে পারেন। তবে ফ্রন্ট-এন্ড প্রযুক্তির অগ্রগতি হিসাবে, ডিওএম বোঝা আরও গুরুত্বপূর্ণ হয়ে উঠছে।

ডিওএম চুক্তি বোঝা যাচ্ছে

অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিংয়ে ইন্টারফেস নামে একটি কনস্ট্রাক্ট রয়েছে। একটি ইন্টারফেস নিজে থেকে কিছু করে না। পরিবর্তে, এটি একটি চুক্তি তৈরি করে। এটি বলছে যে যতক্ষণ না এটি ইন্টারফেস চুক্তির নিয়ম অনুসরণ করে অন্য কোনও কিছুর সাথে যোগাযোগ করতে পারে।

একটি ইন্টারফেস থাকা কোনও প্রোগ্রামের কোনও অংশকে নিয়ন্ত্রণের ও অনুমানযোগ্য উপায়ে প্রোগ্রামের অন্য কোনও অংশের সাথে ইন্টারঅ্যাক্ট করতে দেয়। ইন্টারফেসটি প্রোগ্রামের একটি অংশের জন্য অন্য কোনও অংশের সাথে কাজ করাও সম্ভব করে তোলে, এমনকি যদি সে ইন্টারফেসের অন্য দিকে প্রোগ্রামটির অংশ সম্পর্কে কিছু না জানে।

একটি ইন্টারফেস আপনার প্রাচীরের বৈদ্যুতিক আউটলেট মত। ভোল্টেজ সঠিক হওয়ার সাথে সাথে পাওয়ারটি কোথা থেকে আসছে তা আপনার ডিভাইসের জানা দরকার না। কোণে অবস্থিত ট্রান্সফর্মারটি এটি কী চালাচ্ছে তা জানার দরকার নেই। এটি কেবল আপনার বাড়িতে সঠিক ভোল্টেজে বিদ্যুৎ প্রেরণ করা প্রয়োজন।

ডিওএম হ'ল ওয়েব পৃষ্ঠা এবং কোডের মধ্যে একটি ইন্টারফেস স্তর যা এটি তৈরি করে এবং পরিবর্তন করে। আপনি যখন কোনও ওয়েবসাইট পরিদর্শন করেন, আপনি ব্রাউজারটি কীভাবে সেই ওয়েবসাইটটির ডমকে রেন্ডার করে তা দেখছেন। আপনি যখন এইচটিএমএল লেখেন, আপনি আসলে ডিওএম এর এপিআই (প্রোগ্রামিং ইন্টারফেস) ব্যবহার করে প্রোগ্রামিং করেন।

ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম বা ডাব্লু 3 সি নামে একটি সংস্থা DOM স্ট্যান্ডার্ডটি বজায় রাখে। তারা ডিওএম স্ট্যান্ডার্ডকে সংজ্ঞায়িত করে অত্যন্ত বিস্তারিত ডকুমেন্টেশন তৈরি করেছে।

এই মুহুর্তে, আপনি ভাবছেন তারা খুব ভাল কাজ করছেন না। সর্বোপরি, ক্রস ব্রাউজারের সামঞ্জস্যতা সমস্যার কারণে অনেকগুলি সমস্যা রয়েছে।

সমস্যাটি মানের সাথে নয়। এটি ব্রাউজারগুলির সাথে রয়েছে। অনেক ব্রাউজার তাদের ডোম বাস্তবায়নে কার্যকারিতা যুক্ত করেছে যা ডাব্লু 3 সি মান মেনে চলে না। কখনও কখনও সেই কার্যকারিতাটি জনপ্রিয় হয়ে ওঠে এবং অন্য ব্রাউজারগুলিকে ধরতে বাধ্য করে, এটি ডিওএম স্ট্যান্ডার্ডে প্রয়োগ হয়।

অন্য সমস্যাটি হ'ল কিছু লোক এখনও ব্রাউজারগুলির পুরানো সংস্করণ ব্যবহার করছেন যা সর্বশেষতম ডোম স্ট্যান্ডার্ড অন্তর্নির্মিত নেই। এবং কখনও কখনও ব্রাউজারগুলি স্ট্যান্ডার্ডটি সঠিকভাবে প্রয়োগ করে না।

কীভাবে ডিওএম স্ট্রাকচারড

আপনি ডিওএমকে গাছের মতো ভাবতে পারেন। <html> উপাদানটি হ'ল ট্রাঙ্ক এবং এর অভ্যন্তরের সমস্ত উপাদানগুলি শাখা are আপনি যখন কোনও মূল উপাদানটির ভিতরে এইচটিএমএল উপাদানগুলি বাসা বেঁধেন, আপনি আসলে সেই শাখার বাইরে শাখা তৈরি করছেন। প্রতিটি শাখার জন্য উপযুক্ত শব্দটি "নোড"।

গাছের কাঠামোটি পারিবারিক গাছের মতো নোডের মধ্যে যৌক্তিক সম্পর্ক তৈরি করে। প্রতিটি নোডের এমন একটি পিতামাতা এবং পূর্বপুরুষ থাকতে পারে যা থেকে এটি শাখা করে। তাদের ভাই-বোন থাকতে পারে। এবং নোডে শিশু এবং বংশধর থাকতে পারে। জাভাস্ক্রিপ্ট এবং সিএসএস ব্যবহার করে ডিওমের সাথে ইন্টারঅ্যাক্ট করার জন্য এই পদগুলিতে চিন্তাভাবনা অনেক সহায়তা করে।

এইচটিএমএল কিভাবে ডিওএমের সাথে ইন্টারঅ্যাক্ট করে

ডোমটি ডকুমেন্ট ইন্টারফেসের সাথে একটি ডকুমেন্ট অবজেক্ট তৈরি করে সংজ্ঞায়িত করা হয়। আপনার এইচটিএমএল কোডটি কোনও নথি তৈরির সর্বাধিক প্রত্যক্ষ উপায়। এইচটিএমএল আপনাকে প্রথাগত প্রোগ্রামিংয়ের প্রয়োজন ছাড়াই ডকুমেন্টটি সংজ্ঞায়নের একটি সহজ উপায় দেয়।

আপনি যদি কেবল এইচটিএমএল দিয়ে শুরু করছেন, তবে এটির সাথে নিজেকে পরিচিত করার জন্য পাঁচ টি টিপস

এইচটিএমএল প্রচলিত প্রোগ্রামিং ভাষার চেয়ে সহজ এবং ক্ষমাযোগ্য। এটি ডিওএমের সাথে আলাপচারিতা ওয়েব ডিজাইনারদের জন্য সহজ করে তোলে।

সিএসএস কীভাবে ডম এর সাথে ইন্টারঅ্যাক্ট করে

আপনার এইচটিএমএল একবার ডিওএম ডকুমেন্টটি কাঠামোযুক্ত করে ফেললে সিএসএস সেই নথিকে স্টাইল করতে পারে। এটি করতে, এটি আপনার স্টাইল করতে চান এমন উপাদানগুলি সন্ধান করতে সক্ষম হওয়া প্রয়োজন। এটি কয়েক উপায়ে এটি করে।

<div> এবং <p> এর মতো উপাদানের নাম অনুসারে আপনি নথি নোডগুলি অ্যাক্সেস করতে পারেন। CSS ক্লাস এবং আইডি নাম উল্লেখ করে সরাসরি উপাদানগুলিতে অ্যাক্সেস করতে পারে। ক্লাস স্টাইলিং বেশ কয়েকটি উপাদানগুলিতে প্রয়োগ করা হয় যাতে আপনি একই সময়ে সমস্তগুলি স্টাইল করতে পারেন। বিপরীতে, আইডি স্টাইলিং শুধুমাত্র একটি একক উপাদানের পরিবর্তনগুলি প্রয়োগ করে।

আপনি আরও নিয়ন্ত্রণের জন্য পারিবারিক বৃক্ষ কাঠামো সিএসএস এবং সূক্ষ্ম সুরের অ্যাক্সেস সহ অ্যাক্সেস করতে পারেন। সিএসএস নির্বাচনকারীরা আপনাকে একাধিক উপাদান বাছতে দেয় এবং সেগুলি অনুসন্ধানের জন্য আপনাকে একটি ব্যাগ কৌশল দেয়। আপনি বাচ্চাদের তাদের পূর্বপুরুষ, শ্রেণীর সংমিশ্রণ এবং আরও অনেক কিছুর দ্বারা অনুসন্ধান করতে পারেন।

জাভাস্ক্রিপ্ট কীভাবে ডমের সাথে ইন্টারঅ্যাক্ট করে

জাভাস্ক্রিপ্ট ডকুমেন্টের উপর সর্বাধিক নিয়ন্ত্রণ রয়েছে কারণ জাভাস্ক্রিপ্ট হ'ল আসল প্রোগ্রামিং ল্যাঙ্গুয়েজ অবজেক্টস, ফ্লো কন্ট্রোল, ভেরিয়েবল ইত্যাদি with

সম্পর্কিত: জাভাস্ক্রিপ্ট কী?

জাভাস্ক্রিপ্ট নোডগুলি যুক্ত করতে এবং মুছে ফেলার পাশাপাশি তাদের স্টাইল পরিবর্তন করতে পারে। এবং জাভাস্ক্রিপ্ট নথিতে ইভেন্টগুলির জন্য যেমন কোনও উপাদানটির উপর মাউস ঘোরাতে, ক্লিক করতে এবং কীগুলি টিপতে পারে তা দেখতে পারে।

জাভাস্ক্রিপ্ট সিএসএস-তে খুব অনুরূপ উপায়ে ডকুমেন্ট ট্রি অনুসন্ধান এবং নেভিগেট করতে পারে। এটি আইডি এবং শ্রেণি দ্বারা উপাদানগুলি সন্ধান করতে সক্ষম। এবং এটি অ্যারে হিসাবে শিশু উপাদানগুলির তালিকা পুনরুদ্ধার করতে পারে।

ওয়েব ডেভলপমেন্ট এবং ডিওএম এর ভবিষ্যত

প্রথম দিন থেকেই ইন্টারনেট অনেক বদলেছে। প্রথম দিনগুলিতে, জাভাস্ক্রিপ্ট বেশিরভাগ বিশেষ প্রভাব এবং সহজ ডেটা প্রদর্শনের জন্য ব্যবহৃত হত। বেশিরভাগ ওয়েবসাইট ডিজিটাল ব্রোশিওরের চেয়ে বেশি কিছু ছিল না। যদিও এজেএক্স সবকিছু বদলেছে।

এজেএক্স ওয়েবসাইটগুলি পৃষ্ঠাটি পুনরায় লোড না করে ফ্লাইতে একটি সার্ভার থেকে প্রদর্শিত ডেটা আপডেট করার অনুমতি দেয়। AJAX এর আগে, ডেটাতে প্রতিটি পরিবর্তন কেবল তখনই দেখা যায় যখন পৃষ্ঠাটি পুনরায় লোড করা হয়েছিল বা ব্যবহারকারী অন্য পৃষ্ঠায় নেভিগেট করেছেন।

এজেএক্সের পরে ওয়েব অ্যাপস আরও বেশি জনপ্রিয় হয়েছিল। ইন্টারনেট আর সহজ স্ট্যাটিক ওয়েবসাইট এবং ইবেয়ের মতো কয়েকটি উচ্চ কার্যকারিতা অ্যাপ্লিকেশনগুলির সংগ্রহ নয়। এখন ইন্টারনেট প্রায় দ্বিতীয় অপারেটিং সিস্টেম, অত্যন্ত কার্যক্ষম অ্যাপ্লিকেশনগুলিতে পূর্ণ।

ব্যবহারকারীদের প্রত্যাশা বাড়ার সাথে সাথে প্রযুক্তি অবশ্যই বজায় রাখতে হবে। জাভাস্ক্রিপ্ট সবচেয়ে শক্তিশালী বা দ্রুততম ভাষা নয়। এটি ভাসমান-পয়েন্ট নম্বর ত্রুটির মতো কয়েকটি মুষ্টিমেয় সমস্যায় ভুগছে যা এটি বিকাশকারীদের পক্ষে কম কাঙ্ক্ষিত করে তোলে। এখানেই WebAs आशीर्वाद আসে।

ওয়েবঅ্যাসল্যাশ ব্রাউজারে নেটিভ কোডের অনেকগুলি সুবিধা নিয়ে আসে, উন্নত গতি এবং আরও ভাল হার্ডওয়্যার অ্যাক্সেস সহ। এটি প্রোগ্রামারদের সি ++ এবং জাস্টের মতো ওয়েবসাইট তৈরি করতে অন্যান্য ভাষাগুলি ব্যবহার করতে দেবে।

এমনকি ওয়েবঅ্যাস্পাবলিসনে যে বিস্তৃত পরিবর্তন আনা হবে তার পরেও, ডওএম এখনও থাকবে এবং কোড এবং ব্রাউজারে যা প্রদর্শিত হবে তার মধ্যে একটি ধারাবাহিক ইন্টারফেস সরবরাহ করবে।