এইচটিএমএল জাভাস্ক্রিপ্ট কি ? ( WHAT IS HTML JAVASCRIPT ? )
জাভাস্ক্রিপ্ট একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ, আর এইচটিএমএল একটি মার্কআপ ল্যাংগুয়েজ এই দুইটির সমন্বয়ে যখন কোন ওয়েব পেজ তৈরি করা হয় তখন একটি পেজকে Static থেকে ডায়নামিক এ রূপান্তর করা হয় | এই স্ট্যাটিক থেকে ওয়েবপেজকে ডাইনামিক এ রুপান্তর করার প্রক্রিয়া এইচটিএমএল জাভাস্ক্রিপ্ট |
এইচটিএমএল জাভাস্ক্রিপ্ট এর উদাহরণ ( EXAMPLE OF JavaScript IN HTML)
এখানে যদি আমরা কোন ওয়েব পেজের মধ্যে বাটনের মাধ্যমে আপডেটেড ডেট এন্ড টাইম দেখাতে চাই, তাহলে যেভাবে এটি কাজ করবে সেটা আমরা এখন সেটা দেখব |
<body>
<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = Date()”>
Click here to display Date and Time.</button>
<p id=”demo”></p>
</body>
উপরের কোডটি যদি ব্রাউজারের রান করা হয় তাহলে এটি যেভাবে শো করবে-
এখানে প্রথমে আপনার উপরের ইমেজের মত একটি বাটন শো করবে বাটনে ক্লিক করলে আপনার কাঙ্খিত তারিখ এবং সময় দেখতে পাবেন |
এভাবেই মূলত, এইচটিএমএল এর মধ্যে জাবস্ক্রিপট কাজ করে |
এইচটিএমএল জাভাস্ক্রিপ্ট দিয়ে কোন ধরনের কাজ করা যায়?
সাধারনত এইচটিএমএল জাভাস্ক্রিপ্ট এর মাধ্যমে বিভিন্ন ধরনের ডাইনামিক কাজ করা হয় | এইচটিএমএল জাভাস্ক্রিপ্ট এর মাধ্যমে আরো যেসব কাজ করতে পারবেন তার কিছু কথা নিচে তুলে ধরা হলো –
- যেকোনো ধরনের ইমেজ মানিপুলেশন এর ক্ষেত্রে এইচটিএমএল জাভাস্ক্রিপ্ট ব্যবহার করা হয় |
- এইচটিএমএল এর মাধ্যমে ওই পেজগুলো তৈরি সেই পেজের মধ্যে বিভিন্ন প্রয়োজনে যে ফর্ম গুলো ব্যবহার করা হয় সে ফর্ম ভ্যালিড করতে এইচটিএমএল জাভাস্ক্রিপ্ট ব্যবহার করা হয় |
- ওয়েব পেজের মধ্য যেকোনো টেক্সট এর সাইজ নির্ধারণের ক্ষেত্রে ব্যবহার করা হয় |
- ফন্ট কালার এবং ব্যাকগ্রাউন্ড কালার চেঞ্জ করার ক্ষেত্রেও এইচটিএমএল জাভাস্ক্রিপ্ট ব্যবহার করা হয় |
- যেকোনো ধরনের টেক্সট পরিবর্তন করতে এইচটিএমএল জাভাস্ক্রিপ্ট ব্যবহার করা হয় |
- যদি HTML Script কোন ব্রাউজার সাপোর্ট না করে তাহলে Noscript এর মাধ্যমে ওই স্ক্রিপ্টগুলো ব্রাউজারে প্রদর্শন করা হয় |
এইচটিএমএল জাভাস্ক্রিপ্ট কত প্রকার ও কি কি ? ( TYPES OF HTML JAVASCRIPT ? )
জাভাস্ক্রিপ্ট ট্যাগ দুই ধরনের-
- স্ক্রিপ্ট ( <script> ) – ক্লায়েন্ট সাইট স্ক্রিপ্ট নির্ধারণের জন্য ব্যবহার করা হয় |
- নোস্ক্রিপ্ট ( <noscript> ) – যেসব ব্রাউজারে এলিমেন্ট সাপোর্ট করেনা সেই ব্রাউজারের জন্য কন্টাক্ট প্রদর্শন করার জন্য ব্যবহার করা হয় |
এইচটিএমএল জাভাস্ক্রিপ্ট ট্যাগ লিস্ট ( HTML JavaScript )
ট্যাগ নেম (TAG NAME) ——————– বর্ণনা (DEFINITION)
- <script> – </script> ——- ক্লায়েন্ট সাইট স্ক্রিপ্ট নির্ধারণ করে দেওয়ার জন্য ব্যবহার করা হয় |
- <noscript> – </noscript> — যখন কোন স্ক্রিপ্ট ব্রাউজারে Show না করে অথবা স্ক্রিপ্টে ব্যবহারের অনুপযোগী হয়ে যায় তখন নোস্ক্রিপ্ট(NoScript) ট্যাগ এর মাধ্যমে যেকোনো স্ক্রিপ্ট কে ব্রাউজার show করানো হয় |
স্ক্রিপ্ট ট্যাগ ( <SCRIPT> TAG )
স্ক্রিপ্ট ট্যাগ কি ( What is Script Tag ? )
ওয়েব পেজ তৈরি করার সময় সার্ভার সাইড এবং ক্লায়েন্ট সাইট দুই ধরনের স্ক্রিপ্ট প্রয়োজন হয় | স্ক্রিপ্ট ট্যাগ হচ্ছে ক্লায়েন্ট সাইড সার্ভার এর ডাটা নির্ধারণ করে দেওয়া |
এইচটিএমএল এর মধ্যে যখন ক্লায়েন্ট সাইট নির্ধারণ করার প্রয়োজন হয় তখন স্ক্রিপ্ট ট্যাগ ব্যবহার করা হয় |
স্ক্রিপ্ট tag এর উদাহরণ ( EXAMPLE OF SCRIPT TAG )
যদি কোন স্ক্রিপ্ট কে চেঞ্জ করার জন্য স্ক্রিপ্ট ট্যাগ ব্যবহার করি তাহলে এটি যেভাবে কাজ করবে,
<p id=”test”></p>
<script>document.getElementById(“test”).innerHtml =”WigMarketing”; ></script>
স্ক্রিপ্ট ট্যাগ এর ব্যবহার ( Using areas of Script Tag )
সাধারণত এইচটিএমএল এরমধ্যে স্ক্রিপ্ট ট্যাগ ব্যবহার করা হয় ফর্ম ভালিডেশন, ডায়নামিক ভাবে কোন টেক্সটকে পরিবর্তন করার জন্য এবং ইমেজ মানিপুলেশন এর ক্ষেত্রে |
স্ক্রিপ্ট ট্যাগ এর বেসিক সিনটেক্স – document.getElementById()
স্ক্রিপ্ট ট্যাগের মাধ্যমে যেসব পরিবর্তন করা সম্ভব তার লিস্ট
- স্ক্রিপ্ট ট্যাগের মাধ্যমে ডায়নামিক content পরিবর্তন করা যায় |
- ইমেজ সাইজ নির্ধারণ করা যায়
- টেক্সট কালার পরিবর্তন করা যায়
- ব্যাকগ্রাউন্ড কালার পরিবর্তন করা সম্ভব
- যেকোনো ফর্ম ভালিডেশন এর ক্ষেত্রে ব্যবহার করা হয়
নোস্ক্রিপট ( <NOSCRIPT> TAG )
নো-স্ক্রিপট ট্যাগ কি ? ( What is NoScript Tag ? )
যখন ব্রাউজার কোন স্ক্রিপ্ট সাপোর্ট না করে অথবা নির্দিষ্ট কোন স্ক্রিপ্ট যখন ব্রাউজারে প্রদর্শিত না হয় অথবা কোন স্ক্রিপ্ট যদি অকেজো হয়ে যায় তখন সেই স্ক্রিপ্ট ব্রাউজার এ প্রদর্শন করানোর ক্ষেত্রে যে ট্যাগ ব্যবহার করা হয় তাই নোস্ক্রিপ্ট ট্যাগ।
নো স্ক্রিপ্ট এর উদাহরণ ( EXAMPLE OF NOSCRIPT TAG )
<p id=”text”> </p>
<script> document.getElementById(“test”).innerHTML = “First JavaScript!”</script>
<noscript> দুঃখিত, আপনার ব্রাউজার জাভা স্ক্রিপ্ট করে না !</noscript>
<p> কোন ব্রাউজার যখন জাভাস্ক্রিপ্ট সাপোর্ট করে না তখন No স্ক্রিপ্ট এর মাধ্যমে সেই Content দেখানো হয় | </p>