জাভাস্ক্রিপ্ট – CSS & HTTP scripting
DOM পরিবর্তন, নতুন ডিজাইন অথবা form এর ডাটা ভ্যালিডেশন এর জন্য জাভাস্ক্রিপ্ট ব্যবহার করা যায়। Odesk এ জাভাস্ক্রিপ্ট দিয়ে Dom পরিবর্তন সম্পর্কিত প্রশ্ন থাকে।
অবজেক্ট ক্যাশিং (Object caching):
ধরা যাক, কোনো একটা HTML পেজ এ ২০ টা ইমেজ (<img ) আছে। সব গুলো ইমেজ ট্যাগ এর সাথে একটা ক্লাস যোগ করতে চান। ২ ভাবে করা যেতে পারে।
পদ্ধতি ১:
|
1 2 3 4 5 |
<script> for(i = 0; i < document.images.length; i++) { document.images[i].className = "ImageClass"; } </script> |
পদ্ধতি ২ :
|
1 2 3 4 5 6 |
<script> var images = document.images; for(i = 0; i < images.length; i++) { images[i].className = "ImageClass"; } </script> |
যদিও পদ্ধতি ১ এ কম লাইন কোড লেখা হয়েছে, তার মানে এই না যে পদ্ধতি ১ বেশি কার্যকর। আসলে পদ্ধতি ১ এ সময় বেশি লাগবে। পদ্ধতি ২ এ সব গুলো ইমেজ এর রেফারেন্স একটা ভ্যারিয়েবল এ রাখা হয়েছে। ক্লাস নাম যোগ করার সময় বারবার DOM এ খোজা লাগবে না। এই পদ্ধতির আরেক নাম ক্যাশিং। যদি ১০ তার জায়গায় অনেক বেশি ইমেজ থাকে এবং আরো কিছু কাজ করা লাগে ইমেজ ট্যাগ নিয়ে, তাহলে পদ্ধতি ১ খুবই ধীরে কাজ করবে।
HTML এলিমেন্ট এর প্রপার্টি (উদাহরণ : id, class, innerHTML, outerHTML, attributes, childElementCount ..)
অফিসিয়াল ডকুমেন্ট: এলিমেন্ট প্রপার্টি
কিছু কমন এলিমেন্ট প্রপার্টি দেখে নেয়া যাক odesk টেস্ট এর জন্য :
কোনো এলিমেন্ট এর id সেট করতে হলে : element.id = “IdName”;
কোনো এলিমেন্ট এর id পেতে হলে : element.id
কোনো এলিমেন্ট এর ক্লাস নাম পেতে হলে : element.className
কোনো এলিমেন্ট এর ক্লাস নাম দিতে হলে : element.className = “aClassName”;
কোনো এলিমেন্ট এর কয়টি চাইল্ড এলিমেন্ট আছে তা জানা যাবে : element.childElementCount
কোনো এলিমেন্ট এর কোনো attribute সেট করা যাবে : element.setAttribute(“atrributeName”, “attributeValue”)
attributeName হতে পারে : id, class, data …