HTML সম্পর্কে স্বচ্ছ ধারনা তৈরি করে নিন এই টিউটোরিয়াল থেকে - ২য় অংশ

আগের টিউটোরিয়ায়লে আমরা শিখেছিলাম কিভাবে html এর প্রাথমিক গঠন তৈরি করা যায় এবং আমরা একটি করে heading, paragraph এবং button তৈরি করেছিলাম। এই টিউটোরিয়ালে আমরা কাস্টম স্টাইল অ্যাড করব, সেই সঙ্গে জাভাস্ক্রিপ্ট কোডের মাধ্যমে আমরা প্যারাগ্রাফ এলিমেন্টকে ওয়েবপেজ থেকে সরিয়ে দেব। চলুন শুরু করা যাক।

এলিমেন্টগুলির উপর কাস্টম স্টাইল অ্যাড করা

আমরা প্রথমে জেনে নেব কি কি উপায়ে কাস্টম স্টাইল অ্যাড করা যায়, তিনটি পদ্ধতিতে করা যায় যেমনঃ

১. ইনলাইন স্টাইল
২. এম্বেডেড স্টাইল
৩. এক্সটারনাল স্টাইল
আমরা এখানে এক্সটারনাল স্টাইল পদ্ধতি শিখব না কারন আমরা এই সম্পর্কে শিখব সিএসএস এর টিউটোরিয়াল এ, এখানে আমরা ১ ও ২ নং পদ্ধতিতে স্টাইল অ্যাড করা শিখব।

ইনলাইন স্টাইল প্রয়োগের উদাহরন

আমরা ইনলাইন স্টাইল এর উদাহরন হিসাবে আমাদের h1 ট্যাগের উপর স্টাইল যোগ করব এইভাবে,

<h1 style="font-family: Arial, Verdana; font-size: 36px;">... </h1>

এখানে দেখুন আমরা h1 tag এর পরে একটা স্পেস দিয়ে style অ্যাট্রিবিউট যোগ করে দিয়েছি এবং = সিম্বল এর পরে কোটেশন মার্কের ভেতরে css property এবং ভ্যালু দিয়েছি। তাহলে আমরা এখানে দেখলাম,

Style=”property: value;”

এখানে বলে রাখা ভাল যে css এর অনেক রকমের প্রপার্টি আছে যেমন font-family, color, background, font-size, font-weight, line-heigh ইত্যাদি। যেহেতু css এর প্রপার্টির সংখ্যা অনেক তাই পরবর্তী টিউটোরিয়ালে এই বিষয়ে আমরা আলোচনা করব।

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

এখন আপনি যদি ফাইলটিকে সেভ করে দিয়ে ব্রাউজারটিকে একবার রিলোড দেন তাহলে আপনি দেখতে পাবেন যে হেডিং এলিমেন্টে কিছুটা চেঞ্জ এসেছে, যেমন এর ফন্ট স্টাইল এর সঙ্গে সঙ্গে এর সাইজটাও আগের তুলনায় বেড়ে গেছে।

এম্বেডেড স্টাইল প্রয়োগের উদাহরন

আমরা এখন এমেবেডেড স্টাইল সম্পর্কে শিখব। সেজন্য আপনাকে head এলিমেন্টের ভেতরে title ট্যাগের শেষে আপনার মাউসের কার্সারটা রাখুন এবং এন্টার প্রেস করুন, তারপর নিচের ট্যাগটি টাইপ করুন,

<style>
</style>

এরপর এই স্টাইল ট্যাগের ভেতরে আপনি যে এলিমেন্টকে স্টাইল করতে চান সেটার ট্যাগ নেমটা লিখুন, যেমন আমাদের বডি ট্যাগটার নাম হিসাবে নিচে যেটা করা হয়েছে,

body {
 background-color: #f7f7f7;
 font-family: sans-serif;
 line-height: 1.7em;
}

এখানে দেখুন আপনি যে ট্যাগ নেমটা দিলেন এটাকে বলা হয়ে থাকে সিলেক্টর আর এটা শেষ হয় কার্লি ব্রেস দিয়ে।আমরা বডি এলিমেন্টের ব্যাকগ্রাউন্ড কালার করে দিয়েছি হালকা সাদা, ফন্ট-ফ্যামিলি দিয়েছি স্যান্স-সেরিফ এবং দুটি এলিমেন্টের মধ্যে যে লাইন হয় তার হাইট করে দিয়েছি ১.৭ ইএম আর এই বন্ধনীর মধ্যে থাকে css property এবং value. তাহলে এর গঠনটা হবে ঠিক নিচের মত,

selector {
 property: value;
}

এটা হয়ে যাবার পরে আমরা আমাদের বাটন এলিমেন্টকে কিছুটা ডিজাইন করব, এখানে দেখুন hideBtn এর জন্য আমরা # চিহ্ন দিয়েছি, কারন সিএসএসের ক্ষেত্রে id selector কে আমরা # চিহ্ন দিয়ে ব্যবহার করে থাকি।

#hideBtn {
 border: 1px solid black;
 background: red;
 font-size: 24px;
 border-radius: 5px;
 padding: 4px 10px;
}

আমাদের স্টাইলের কাজ শেষ, এখন আমরা জাভাস্ক্রিপ্ট ফাংশন তৈরি করা শুরু করছি।

জাভাস্ক্রিপ্ট

আগে প্ল্যান করে নিই আমাদের জাভাস্ক্রিপ্ট দিয়ে আমরা কি করতে চাচ্ছি। আমরা যখন বাটন এলিমেন্টে ক্লিক করব তখন একটি ফাংশন কল হবে, যার ফলে আমাদের প্যারাগ্রাফ এলিমেন্টে একটা স্টাইল অ্যাড হয়ে যাবে display: none.
চলুন শুরু করা যাক,

আমাদের আগে জাভাস্ক্রিপ্টের মাধ্যমে বাটন এলিমেন্টকে সিলেক্ট করতে হবে, কোন এলিমেন্টকে সিলেক্ট করবার জন্য বিভিন্ন রকমের কোড আছে। আমরা এখানে যেহেতু button-টায় id অ্যাট্রিবিউট অ্যাড করেছি তাই আমরা getElementById লিখে প্রথম বন্ধনীর ভেতরে ওই id টার নামে লিখব যেটা হল hideBtn. তাহলে আমাদের কোডটি হবে নিম্নরুপঃ

document.getElementById('hideBtn')

এরপরে আমরা একটি ডট চিহ্ন দিয়ে এর উপর একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করব onclick. এই onclick করার অর্থ হচ্ছে আমরা যখন button টায় ক্লিক করব তখন এই মেথড টি আমাদের একটি ফাংশন কে কল করবে। এরপর আমরা একটি ইকুয়াল চিহ্ন দিয়ে লিখব function তারপর কার্লি ব্রেস দিয়ে দেব,

document.getElementById('hideBtn').onclick = function () {
    
}

এরপর ঐ কার্লি ব্রেসের মাঝে আমরা p এলিমেন্টকে সিলেক্ট করব getElementsByTagName(‘p’)[0] দিয়ে, যেখানে [0] করার অর্থ হচ্ছে যে জাভাস্ক্রিপ্ট array node এ 0 দিয়ে কোন এলিমেন্টকে স্টার্ট করে। আর এখানে যেহেতু প্যারাগ্রাফ এলিমেন্ট একটাই তাই। এরপর আমরা একটি ডট চিহ্ন দিয়ে লিখব style.displya = ‘none’.

document.getElementsByTagName('p')[0].style.display = 'none';

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

আপনি এই জাভাস্ক্রিপ্ট দিয়ে অনেক রকমের কাজ ব্রাউজারকে দিয়ে করাতে পারবেন, যেমনঃ
১. ঘড়ি,
২. স্লাইড শো অ্যানিমেশন,
৩. ক্লায়েন্ট সাইড ফর্ম ভ্যালিডেশন
৪. অ্যালার্ট মেসেজ শো করান,
৫. পপ আপ উইন্ডো,
৬. টেবিল অফ কন্টেন্ট,
৭. ডেট পিকার,
৮. ব্যাক টু টপ এফেক্ট,
৯. অ্যাকর্ডিয়ান,
১০. অটোকমপ্লিট ইত্যাদি।

আমরা আমাদের HTML, CSS এবং Javascript এর বেসিক টিউটোরিয়াল শেষ করে ফেলেছি। আমি যথাসাধ্য চেষ্টা করেছি আপানদের এই টিউটোরিয়াল শেখানোর, যদি আপনার কোথাও বুঝতে অসুবিধা হয় আপনি কমেন্ট বক্সে আপনার মুল্যবান কমেন্ট গুলি পোস্ট করতে পারেন। তাছাড়া আপনারা কি শিখতে চান এখানে কমেন্ট করতে পারেন। আমি অবশ্যই আমার ব্লগে লেখার চেষ্টা করব।

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

ভিডিও টিউটোরিয়াল

HTML সম্পর্কে স্বচ্ছ ধারনা তৈরি করে নিন এই টিউটোরিয়াল থেকে - ১ম অংশ

কেমন আছেন আপনারা? আশা করি আপনারা ভালই আছেন। আপনারা কি HTML শিখতে আগ্রহী? তাহলে আমার এই ব্লগ আপনাকে শিখতে সাহায্য করবে। আমি মানুষকে শেখাতে ভালবাসি, আর আমার এই টিউটোরিয়াল আপনাদের সঠিক ভাবে শেখাতে সাহায্য করলে আমারও ভাল লাগে। আজকে আমরা একটি HTML ফাইল তৈরি করে আপনাদের HTML, CSS এবং Javascript এর একটা স্বচ্ছ ধারনা দেওয়ার চেষ্টা করব। আমার এই টিউটোরিয়ায়ল থেকে শিখতে পারবেন কিভাবে আপনারা HTML এর মূল গঠন তৈরি করতে পারবেন। আপনাদের পরিচয় করিয়ে দেব নতুন দুটি ল্যাংগোয়েজের সঙ্গে, একটি হল CSS এবং অন্যটি হল Javascript. তাহলে চলুন আরম্ভ করি আমাদের টিউটোরিয়াল?

আমাদের এই টিউটোরিয়ালে আমরা একটা HTML এর প্রাথমিক গঠন তৈরি করব, যেখানে আমরা একটি প্রাথমিক শিরনাম(heading level one) একটি অনুচ্ছেদ(paragraph) এবং একটি button এলিমেন্ট তৈরি করব। তারপর আমরা CSS এর মাধ্যমে পেজটাকে কিছুটা স্টাইল চেঞ্জ করার চেষ্টা করব। তাছারা Javascript দিয়ে আমরা এমন একটা কোডিং করব যাতে ওই button এলিমেন্টে ক্লিক করলেই paragraph অংশটি আমাদের ওয়েব পেজটি থেকে ভিসুয়ালি হাইড হয়ে যাবে।

আমাদের যা করতে হবে

১. HTML এর প্রাইমারী গঠন তৈরী করা
২. প্রথম শ্রেণির হেডিং(h1) তৈরী করা,
৩. একটা প্যারাগ্রাফ(p) এলিমেন্ট তৈরি করা,
৪. একটা button এলিমেন্ট তৈরী করা,
৫. ওয়েবপেজের এলিমেন্ট গুলোতে কাস্টম স্টাইল যোগ করা,
৬. জাভাস্ক্রিপ্টের মাধ্যমে একটি ফাংশন তৈরি করা যার ফলে ঐ বাটন-এ ক্লিক করলে আমাদের প্যারাগ্রাফ এলিমেন্ট ভিসুয়ালি হাইড হয়ে যাবে
শুরু করবার আগে বলে রাখি এখনকার প্রত্যেকটা আপডেটেড ব্রাউজার HTML5 সাপোর্ট করে। তাই আমি আপনাকে আমি HTML5 এর বেসিক পার্টটা শেখাব।

টেক্সট এডিটর

আশা করি আপনার কাছে আগে থেকেই Notepad++ আছে। যদি না থাকে তাহলে এখনই গুগলে Notepad++ সার্চ করে ডাউনলোড করে নিতে পারেন।

নোটপ্যাড খুলে আপনি প্রথমে, মেনু ট্যাবের ল্যাংগোয়েজ ট্যাবে ক্লিক করে H লেখাটায় মাউস টা নিয়ে গিয়ে HTML সিলেক্ট করে নিন syntax hilighting এর সুবিধার জন্য।

আপনি আগে ফাইলটাকে সেভ করে নিন আপনার ডেসটিনেশন ফোল্ডারে যেকোনো একটা নাম দিয়ে, কিন্তু মনে রাখবেন ঐ ফাইলটার নামের শেষে অবশ্যই .html এক্সটেনশন দিতে ভুলবেননা, কারন তাহলে উন্ডোজ বুঝতে পারবেনা আপনার ফাইলটা কি টাইপের ফাইল। যদিও নোটপ্যাড অলরেডি যেকোনো ফাইলের জন্যি .txt এক্সটেনশন যোগ করে।

HTML শিখুন

ফাইলটা সেভ হয়ে গেলে আপনি টাইপ করুন নিচের কোডটি, কপি-পেস্ট করবেননা কারন তাহলে আপনি কি শিখছেন বুঝতে পারবেন না। আপনি যতই টাইপ করবেন, তত ভাল করে বুঝতে পারবেন বেশি, আর কোন জায়গায় ভুল হলে আপনি সেটা যদি ধরতে পারেন তাহলে পরবর্তীতে ভুল হবার চান্স হবে কম।

<!DOCTYPE html>

এখানে একটি ব্যাপার লক্ষ্য করুন আমি প্রথমে লেফট অ্যাঙ্গেল ব্র্যাকেট দিয়ে তারপর এক্সক্লেমেশন(!) মার্ক তারপর DOCTYPE html এবং শেষে রাইট অ্যাঙ্গেল ব্র্যাকেট দিয়েছি, এটা করার কারন হচ্ছে আমরা ব্রাউজারকে নির্দেশ দিচ্ছি যে আমরা HTML5 ভার্সন ব্যবহার করছি।

এরপর লিখুন নিচের কোডটি,

<html>

</html>

আপনি দেখুন, প্রত্যেক্টি এলিমেন্ট <> দিয়ে শুরু এবং </> দিয়ে শেষ হয়। তারমানে আপনি যদি উপরের html ট্যাগটি লেখেন তাহলে < html > হবে Start tag এবং </ html > হবে End tag. এই html ট্যাগটিকে বলা হয় এর রুট ট্যাগ।
এরপর আপনি এই রুট এলিমেন্টের মাঝে একটা এন্টার প্রেস করে দুটি এলিমেন্ট তৈরি করুন একটি হচ্ছে হেড ট্যাগ অন্যটি হল বডি ট্যাগ।

..........
<html>

<head>

</head>
<body>

</body>

</html>

আপনি জেনে রাখুন হেড এলিমেন্টের যে সমস্ত ট্যাগ আমরা ব্যাবহার করি সেগুলো কিন্তু ওয়েব ব্রাউজারের ডকুমেন্ট এ দেখতে পাইনা, কারন হেড ট্যাগ ব্যবহার করা হয় ব্রাউজারকে এবং সারচ-ইঞ্জিনকে নির্দেশ দেবার জন্য। এই হেড এলিমেন্ট-এ যে সমস্ত ট্যাগ ব্যবহার করা হয় সেগুলো হল  title,  বিভিন্ন রকমের মেটা ট্যাগ  (যেমনcharset, keywords, description, author etc.), এক্সটারনাল CSS ফাইল, favicon, RSS এবং জাভাস্ক্রিপ্ট ফাইল অ্যাড করবার জন্য link এবং script tag ইত্যাদি।

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

আপনি যদি এখন ফাইলটাকে সেভ করে মেনু ট্যাব থেকে Run এ ক্লিক করে Launch in firefox অথবা Launch in chrome এ ক্লিক করেন তাহলে আপনি দেখতে পাবেন আপনার ওয়েব পেজটি পুরোপুরি সাদা দেখাচ্ছে। কারন এখনও আমরা কোন এলিমেন্ট বডিতে অ্যাড করিনি। তাছারা আপনি যদি ব্রাউজারের টাইটেল বারের দিকে লক্ষ্য রাখেন আপনি দেখবেন, শুধু ফাইলটার নাম ওই টাইটেল ট্যাব-এ দেখাচ্ছে।

এখন আপনি নিচের ট্যাগটি লিখুন head এলিমেন্টের ভেতরে,

<title>HTML – 1st tutorial </title>

উপরের ট্যাগটি লেখার পরে ফাইলটিকে সেভ করে দিন এবং ব্রাউজারের রিলোড button এ ক্লিক করুন, আপনি দেখতে পাবেন যে ব্রাউজারের টাইটেল বারে HTML – 1st tutorial লেখাটা চলে এসেছে।

এরপর আমরা একটা প্রথম শ্রেণির হেডিং এলিমেন্ট যোগ করব,

<h1>This is first level heading</h1>

হেডিং এলিমেন্ট লেখা হয়ে গেলে আমরা প্যারাগ্রাফ এবং একটি button এলিমেন্ট অ্যাড করব,

<p>This is a paragraph and it will hide from this webpage by javascript when usere click on the button element</p>

<button id="hideBtn">Hide</button>

এখানে লক্ষ্য করুন যে আমি button এলিমেন্টে id অ্যাট্রিবিউট দিয়েছি hideBtn.  এই id কোন এলিমেন্টকে ইউনিক selector যোগ করে, আর এই id কেই পরে css এবং javascript এ ব্যবহার করা হয় নিজের পছন্দ অনুযায়ী কাজ করবার জন্য।

এবার আপনি যদি ফাইলটাকে সেভ করে ব্রাউজারটিকে রিলোড দেন তাহলে আপনি তিনটি এলিমেন্ট দেখতে পাবেন নিচের চিত্রের মত করে,

আপনি যে সমস্ত ডেটাগুলোকে ব্রাউজারে দেখতে পাচ্ছেন প্রত্যেকটাতে ব্রাউজার নিজস্ব ডিফল্ট স্টাইল অ্যাপ্লাই করেছে যেহেতু আমরা কোন কাস্টম স্টাইল অ্যাড করিনি। আমরা এর পরবর্তী টিউটোরিয়ালে শিখব কিভাবে আপনি HTML এলিমেন্টগুলিকে আপনার নিজস্ব স্টাইল অ্যাপ্লাই করবেন এবং জাভাস্ক্রিপ্ট ব্যবহার করবেন।

View Demo

ডেমো টা দেখতে পারেন এই লিঙ্কে ক্লিক করে।

টিউটোরিয়ালঃ জাভাস্ক্রিপ্টের মাধ্যমে আইডি দিয়ে HTML element অপসারণ করুন

আজক আমি এমন একটা জাভাস্ক্রিপ্ট ফাংশন তৈরী করব যেটা দিয়ে যেকোন HTML element কে ডকুমেন্ট থেকে অপসারণ করা সম্ভব এবং আপনার ব্রাউজারকে অবশ্যই আপডেটেড হতে হবে।

HTML Part

<div id="wrapper">
    <div id="header">
        <p>Header Sectioin</p>
    </div>
    <div id="main">
        <div id="sidebar">
            <p>Siebar Section</p>
        </div>

        <div id="content">
            <p>Content Section</p>
        </div>
    </div>
    <div id="footer">
        <p>Footer Section</p>
    </div>
</div>
<button onclick="javascript: document.getElementById('header').remove();this.remove();">Remove Header Element</button>
<button onclick="javascript: document.getElementById('sidebar').remove();this.remove();">Remove Sidebar Element</button>
<button onclick="javascript: document.getElementById('content').remove();this.remove();">Remove Content Element</button>
<button onclick="javascript: document.getElementById('footer').remove();this.remove();">Remove Footer Element</button>
<script>

Javascript Part

Element.prototype.remove = function() {
 this.parentElement.removeChild(this);
}

NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
 var i = 0, len = this.length;
 do {
  if (this[i] && this[i].parentElement) {
   this[i].parentElement.remove(this);
  }
  i++;
 } while (i < len)
}

Demo

এই লিঙ্কে গিয়ে ডেমো দেখতে পারেন।

টিউটোরিয়ালঃ সেট টাইম আউট এবং ক্লিয়ার টাইম আউট

আমাদের এই টিউটোরিয়ালর জন্য একটি ডিভিশন এবং দুটো বাটন এলিমেন্টের প্রয়োজন হবে। ধরুন আমরা এমন একটা টাইম আউট ফাংশন করতে চাই যেখানে টাইমস্ট্যাম্পের আপডেট দেখাবে। এখন আমাদের যেটা করতে হবে সেটা হল আমরা যখন সেট টাইম আউট বাটনে ক্লিক করব তখন এই ফাংশনটা প্রতি ১ সেকেন্ড বা ৫০০ মিলিসেকেন্ড অন্তর অন্তর টাইমস্ট্যামটি আপডেট হতে থাকবে। আর আমরা যখন ক্লিয়ার টাইমআউট বাঁটনটিতে ক্লিক করব তখনই এই টাইমস্ট্যাম্পের আপডেট বন্ধ হয়ে যাবে।
আমরা এখন ৫টি গ্লোবাল ভ্যারিয়েবল(চলরাশি) তৈরি করব যেমন setTime, clearTime, divElement, showTime এবং delay নিচে যেভাবে দেখান হয়েছে,

var setTime = document.getElementById('setTime'), // for first button element
clearTime = document.getElementById('clearTime'), // second button element
divElement = document.getElementById('divElement'), // a div element for viewing time-stamp
showTime, // a variable with no value
delay = 500 // 1 second (to set time);

গ্লোবাল ভ্যারিয়েবল তৈরি হয়ে গেলে আমরা showTimeStamp ফাংশন তৈরি করব যাতে আমাদের div এলিমেন্ট-এ টাইমস্ট্যাম্পের আপডেট দেখায়।
সুতরাং, আমাদের ফাংশন স্টেটমেন্টে একটা লোকাল ভ্যারিয়েবল(time) তৈরি করব, যেটার ভ্যালু হবে
new Date().getTime();
তারপর আমাদের ঐ টাইম-স্ট্যাম্পকে ডিভিশন এলিমেন্ট-এ শো করাব। সুতরাং আমাদের কোডটি হবে,
divElement.innerHTML = time;
এরপর আমরা সেট-টাইমআউট ফাংশন তৈরি করব যা কিনা প্রতি ৫০০ মিলিসেকেন্ড এ showTimeStamp কে কল করবে।

function showTimeStatmp() {
  var time = new Date().getTime();
  divElement.innerHTML = time;
  showTime = setTimeout(showTimeStatmp, delay);
}

এরপর আমরা setTime বাটনটিতে একটি ইভেন্ট লিসেনার সংযুক্ত করব যেখানে ক্লিক করলে আমাদের showTimeStamp ফানশন তার কাজ শুরু করে দেবে।

setTime.addEventListener('click', function () {
  showTimeStatmp();
});

এই ফাংশনটিকে বন্ধ করবার জন্য আমরা দ্বিতীয় বাটন এলিমেন্টে আরেকটা ইভেন্ট লিসেনার সংযুক্ত করব যেখানে ক্লিক করলে আমাদের showTimeStamp ফানশন বন্ধ হয়ে যাবে।

clearTime.addEventListener('click', function () {
  clearTimeout(showTime);
});

ফুল জাভাস্ক্রিপ্ট কোড

var setTime = document.getElementById('setTime'),
 clearTime = document.getElementById('clearTime'),
 divElement = document.getElementById('divElement'),
 showTime,
 delay = 500;

function showTimeStatmp() {
 var time = new Date().getTime();
 divElement.innerHTML = time;
 showTime = setTimeout(showTimeStatmp, delay);
}

setTime.addEventListener('click', function () {
 showTimeStatmp();
});

clearTime.addEventListener('click', function () {
 clearTimeout(showTime);
});

ডেমো

অনলাইন ভারতীয় ভিসা ওয়েবসাইটে অটোফিলিং টিপসঃ জাভাস্ক্রিপ্ট

আজ আমি আপনাকে কিভাবে অনলাইন ভারতীয় ভিসা ওয়েবসাইট থেকে ভিসা ফর্ম সহজে পূরণ করতে পারেন, তার কিছু জাভাস্ক্রিপ্ট টিপস দিতে যাচ্ছি। গত কয়েক দিন থেকেই ওই ওয়েবসাইটের সমস্ত ইনপুট ক্ষেত্রে কোন ভিসা তথ্য পেস্ট করা অসম্ভব ব্যাপার হয়ে যাচ্ছে যেমন ওয়েব ফাইল নম্বর,  জন্ম তারিখ ও পাসপোর্ট নম্বরের ইনপুট টেক্সট। আপাতদৃষ্টিতে এটা একটি সার্ভার সম্পর্কিত সমস্যা মনে হতে পারে, কিন্তু আসলে আমরা যাতে কপি পেস্ট করে ভিসা তথ্য পূরণ করতে না পারি সেজন্যই এই কারসাজি। পুঙ্খানুপুঙ্খভাবে Reprint.jsp  পেজের সোর্স কোড দেখার পর আমি এই সিদ্ধান্তে পৌছতে পারলাম যে তারা কপি পেস্ট প্রক্রিয়া বন্ধ করার জন্যই বডি এলিমেন্ট এ কিছু অ্যাট্রিবিউট যোগ করে দিয়েছেন, যেমন  onpaste="return false;  "oncopy="return false;" oncut="return false;" ইত্যাদি। এর প্রমাণ হিসেবে একটি ইমেজ সংযুক্ত করেছি আমার পোস্ট এ, দেখে নিতে পারেন।

তাই আমরা ম্যানুয়ালি ইনপুট ক্ষেত্রে ঐ তথ্য টাইপ করতে বাধ্য হই। কিন্তু হিট টাইমের সময় সার্ভার যেহেতু ডাউন হয়ে যায়, তাই ম্যানুয়ালি টাইপ করে সাবমিট দিলেও(যেটা কিনা খুবই সময়সাপেক্ষ ব্যাপার) আমরা “নো অ্যাপয়েন্টমেন্ট ডেটস আর আভেইলেবল” কথাখানি দেখতে পাই। এর ফলে আমরা ভারতীয় ভিসা অনলাইন ওয়েবসাইট থেকে অ্যাপয়েন্টমেন্ট তারিখ পেতে পারিনা।আমাদেরকে তাই একটু ভিন্ন ভাবে চিন্তা করতে হবে যে কিভাবে আমরা কোনরকম ভাবে পেস্ট না করেই অনায়াসে অনলাইন ভিসা ফর্মে ভিসা তথ্য পূরণ করতে পারি।

জাভাস্ক্রিপ্ট একটু গভীরে

এই স্ক্রিপ্ট তৈরি করার জন্য আমাদের মাত্র পাচটি জাভাস্ক্রিপ্ট চলরাশির(ভ্যারিয়েবল)প্রয়োজন. প্রথমে আমাদের ফর্ম এর নাম কি এটা জানতে হবে। যদি আপনার ইন্সপেক্ট এলিমেন্ট ডেভেলপার টুলস সম্পর্কে ধারনা থাকে তাহলে ঠিক আছে তবে যারা জানেন না এটা কি করে করতে হয় আমি তাদেরকে বলব যে আপনি কি করে এটা ব্যবহার করতে পারবেন। আপনি Google Chrome (বা আপনার প্রিয় ব্রাউজার) খুলুন,  তারপর https://indianvisaonline.gov.in/visa/ ওয়েবসাইটটিতে যান এবং "Print Registered Application" লিঙ্কটিতে ক্লিক করুন। এখন ওয়েবপেজটির উপর রাইট ক্লিক করুন এবং নিচে প্রদর্শিত চিত্রের মত করে কন্টেক্সট মেনু থেকে “ইন্সপেক্ট এলিমেন্ট” অপশনে এ ক্লিক করুন:

তারপর ইন্সপেক্ট এলিমেন্টের ডান দিকে অবস্থিত ট্যাব কনসোলে যান। এখন আমাদের ভিসা ফর্মটির কি নাম জানার জন্য document.forms [0] টাইপ করে ↵ এন্টার কী চাপতে হবে, তাহলে ব্রাউজার এর কন্সোল ট্যাব এ নিম্নরুপ কোড কন্সোলে দেখাবে:

var form = OnlineForm,

আপনি লক্ষ করুন, ফর্মের নেম আট্রিবিউট দেয়া আছে OnlineForm। সুতরাং, অনলাইন ভারতীয় ভিসা ফর্মের নাম হল OnlineForm এবং আমাদের প্রথম চলরাশি(ভ্যারিয়েবল) হতে হবে:
var form = OnlineForm
আপনি আপনার পছন্দের টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস বা উইন্ডোজের ডিফল্ট টেক্সট এডিটর নোটপ্যাড এ এই জাভাস্ক্রিপ্ট কোড কপি করতে পারেন। তারপর গুগল ক্রোম ব্রাউজার এ ফিরে গিয়ে কনসোল ট্যাবে যান এবং form.getElementsByTagName('input') টাইপ করে ↵ এন্টার কী প্রেস  করুন। ব্রাউজার কনসোল প্যানেলে এই কোডগুলি প্রদর্শিত হবে:

[
<input name="fileno" type="text" class="textBoxDashed" id="fileno" value="" size="20" maxlength="12" title="Please Enter your Application Id" onkeyup="chkAlphaNum(this)" onblur="trim1(this)" isdatepicker="true">
<input name="birthdate" type="text" value="" title="Please Enter you Date of Birth As in Passport" class="textBoxDashed" id="birthdate" datepicker="true" datepicker_max="01/03/2015" size="20" maxlength="10" datepicker_format="DD/MM/YYYY" isdatepicker="true">
<input name="passport_no" type="text" title="Please Enter you Passport No. As in Passport" class="textBoxDashed" id="passport_no" value="" size="20" maxlength="14" onkeyup="chkAlphaNum(this)" onblur="trim1(this);" isdatepicker="true">
<input name="ImgNum" type="text" class="textBoxDashed1" id="ImgNum" onkeyup="chkAlphaNum(this)" size="20" maxlength="6" isdatepicker="true">
<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">
<input name="Appointment" type="button" onclick="chkCapAppt()" class="btn btn-primary" id="Appointment" value="Get Appointment">
<input type="hidden" name="Date" value="01/03/2015">]

কনসোল প্যানেলে যে কোডগুলো আপনি দেখতে পাচ্ছেন সেখান থেকে আপনি শুধু নেম অ্যাট্রিবিউট গুলোই মনোযোগ সহকারে নোট করে রাখুন। আমরা তাহলে প্রয়োজনীয় আরো চারটি ভ্যারিয়েবল তৈরি করতে পারলাম সেগুলো হলঃ

var form = OnlineForm,
 webFileNo = form.fileno,
 dateOfBirth = form.birthdate,
 passportNo = form.passport_no,
 accessCode = form.ImgNum;

আপনি আপনার পছন্দের টেক্সট এডিটরে এই ভেরিয়েবলগুলি কপি করে নিতে পারেন। আমাদের এখন একটি জাভাস্ক্রিপ্ট ফাংশন তৈরী করতে হবে যেখানে আমরা আমাদের ভিসা তথ্যগুলি আগে থেকেই পূরন রাখব। ফাংশন তৈরী করলা, কিন্তু আমরা কিভাবে এই ফাংশনকে কল করাব? এটা কিন্তু মনে রাখবেন যে, ফাংশন কে তৌরী করলেই কিন্তু সেটা কাজ করবে না, এটাকে কল করতে হবে। তাই আমরা একটা ইভেন্ট লিসেনার যুক্ত করব ওই এক্সেস কোড লেখার ইনপুট বক্সের উপর, যেখানে ক্লিক করে বা ট্যাব প্রেস করে ওই বক্সটিতে এলেই সমস্ত ভিসা তথ্য সয়ংক্রিয়ভাবে ব্রাউজার দ্বারা ফিল আপ হয়ে যাবে। এখন নিমোক্ত কোডের উদাহরণটি দেখুন:

accessCode.onfocus = function () {
 webFileNo.value = '12345678';  // Paste Web file no within quotation mark
 dateOfBirth.value = '12/12/12';  // Paste date of birth within quotation mark
 passportNo.value = '1234567890'; // Paste passport no within quotation mark
}

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

কিছু কথা

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

ভিডিও টিউটোরিয়ায়ল

ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা সরকার ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।