জাভাস্ক্রিপ্ট এর অলিগলি [পর্ব-০১]

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

জাভাস্ক্রিপ্ট কিঃ জাভাস্ক্রিপ্ট একটি client side scripting language. মূলত input validation নিয়ন্ত্রণ করার জন্য Netscape Navigator জাভাস্ক্রিপ্টের জন্ম দেয় ১৯৯৫ সালে। বর্তমানে এর নানাবিধ ব্যবহার লক্ষ্য করা যায় এবং জনপ্রিয় সবগুলো browser ই একে সাপোর্ট করে। HTML পেজকে dynamic করতে জাভাস্ক্রিপ্ট ব্যাপকভাবে ব্যবহার করা হয়।

নিবাসঃ জাভাস্ক্রিপ্টের আবাসস্থল হচ্ছে HTML। তাই জাভাস্ক্রিপ্ট জানার আগে অবশ্যই যা জানতে হবে তা হলো HTML ও CSS। একটি HTML পেজে জাভাস্ক্রিপ্টকে তিনভাবে রাখা যায়।

১. হেড সেকসনে।
 
2. বডি সেকসনে।

3. মূল কোড গুলো আলাদা ফাইলে রেখে হেড সেকসনে লিংক করে দেওয়া।

তবে যেভাবেই দেওয়া হোক এর জন্য একটি HTML tag রয়েছে যার ভিতর জাভাস্ত্রিপ্টের কোড গুলো লিখতে হবে। তা হলো-<script></script>। অনেক HTML tag আছে যাদের closing tag না লিখলেও তা কাজ করে। কিন্তু এক্ষেত্রে অবশ্যই তা লিখতে হবে।

শুরুঃ তবে এখন আমরা শুরু করব শুধু <script></script> দিয়ে। অর্থাৎ <html>,<head>,<body> এগুলো আপাতত বাদ দিব। তবে ফাইল সেভের সময় অবশ্যই তার Extention হবে .html বা .htm ।তাহলে শুরু করা যাক----

ও হ্যা…. আমি এক্ষেত্রে যে Editor টি ব্যবহার করেছি তা হলো Notepad++ 6.1.8।

Document.write(): এটি ব্যবহার করা হয় কোনকিছুকে পর্দায় প্রদর্শন করার জন্য। যেমনঃ-

শুধুমাত্র এই তিনটি লাইন লিখলেই browser এ দেখাবে I love Bangladesh. । এভাবে আমার দেয়া লাইনটির জায়গায় আপনার ইচ্ছামত কিছু লিখুন এবং অনুশীলন করুন।

এক্ষেত্রে লক্ষ্যণীয় যা----

১. জাভাস্ক্রিপ্ট case sensitive। দেখুন document.write() এর সবগুলো অক্ষর ছোট হাতের বা lowercase। অতএব, অবশ্যই তা সেভাবে লিখতে হবে। নাহলে ভুল হবে।

২. লাইনের শেষে একটি সেমিকোলন (;) দেয়া হয়েছে। এটি না দিলেও হবে। তবে দেয়া উত্তম।

৩. আবার I love Bangladesh. লিখা হয়েছে ডাবল কোটেশন এর ভিতর। এর দ্বারা লাইনটিকে ‍string ডাটা টাইপ হিসেবে নির্ধারিত করা হয়েছে।

জাভাস্ক্রিপ্টে সাত ধরনের ডাটা টাইপ আছে যা পরবর্তীতে আমরা বিশদ আকারে জানব।

এবার নিচের উদাহরণটি লক্ষ্য করি।

এখানে ১ম অংশে ডাবল কোটেশন নেই কিন্তু ২য়টিতে ডাবল কোটেশন আছে। দুটি আলাদা পেজ তৈরি করে পরীক্ষা করুন। কি? একই রকম আউটপুট দিচ্ছে । তাহলে ডাবল কোটেশনের দরকার কি?  তা বুঝতে হলে নিচে দেয়া কোড দিয়ে যটপট দুটি পেজ তৈরি করে ফেলুন।

১মটির ফলাফল হবে 10310 এবং ২য়টির ফলাফল 113 হবে। আমরা আগেই জেনেছি ডাবল কোটেশনের লিখা হয়  string data তাই ১মটির ক্ষেত্রে 103 ও 13  কে  পাশাপাশি বসানো হয়েছে। কিন্তু ২য়টির ক্ষেত্রে কি হয়েছে?  103 ও 13 এর যোগফল দেখানো হয়েছে। এখানে data type হলো number ।

এক্ষেত্রে লক্ষ্যণীয় যা----

১. String data লিখতে হয় ডাবল কোটেশনের ভিতরে ।

২. Number data লিখতে হয় ডাবল কোটেশন ব্যতীত ।

এবার আসুন দেখি কিভাবে string এবং number কে একত্রে লেখা যায়।

বিষয়টি অতি সহজ । এখানে string এবং number কে নিজ নিজ নিয়ম অনুযায়ী লেখা হয়েছে। তবে সংযোগের জন্য যোগচিহ্ন (+) ব্যবহার করা হয়েছে।

এখন আমরা দেখব document.write() এর মধ্যে কিভাবে HTML tag এবং attribute লেখা যায়।

আশা করি বিষয়টি খুব সহজেই বুঝতে পেরেছনে যেহেত HTML আমাদের জানা আছে । তবে লক্ষ্যণীয় যে color='red' এখানে সিঙ্গল কোটেশন ব্যবহার করা হয়েছে । কারণ একটি ডাবল কোটেশনের ভিতরে আরেকটি ডাবল কোটেশন সরাসরি লেখা যায় না। এবার নিচের উদাহরণটুকু চেস্টা করুন।

প্রথম লাইনটি আশা করি সহজেই বুঝা গেছে। এখানে number ব্যবহার করা হয়েছে। তবে খুব সতর্কতার সাথে  লক্ষ্য করুন ২য় লাইনটি। এখানে যদিও পুরোটাই string কিন্তু  তাকে তিন ভাগে ভাগ করা হয়েছে এবং সবচেয়ে গুরুত্বপূর্ণ যে বিষয়টি তা হলো ভাগগুলো হয়েছে কোন জায়গায়। বিষয়টি মেহেরবানী করে মনের মধ্যে গেথে রাখুন এবং নিজে নিজে বিভিন্ন ভাবে চেস্টা করুন। কেননা ভবিষ্যতে তা আমাদের খুব কাজে লাগবে।

এবার ১ম লাইনের শেষে দেখুন আছে <br/> যা একটি HTML tag এবং এটি দিয়ে লাইন ব্রেক করা হয়। একাধিক document.write() কোন নতুন লাইন শুরু করে না বরং তারা পাশাপাশি একই লাইনে অবস্থান করে। এখন আমরা যদি চাই যে প্রতিটি document.write() নতুন লাইন শুরু করুক তাহলে উপরোক্ত নিয়মে <br/> ব্যবহার ছাড়াও আরো একটি পদ্ধতি রয়েছে যা নিম্নরূপঃ-

[চলবে]

Level 0

আমি bdtuner। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 4 টি টিউন ও 4 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

@bdtuner vai, খুব সুন্দর প্রচেষ্টা, চালিয়ে যান, আমি আপনার সাথে আছি।

আশা করি শেষ পর্যন্ত চালিয়ে যাবেন 🙂

ভিন্নতা আছে…..চালিয়ে যান। ধন্যবাদ।

Ami php niye tune korci techtunes e. Vabcilam php hole javascript start korbo. But apni start koredilen. Thanx and all the best. Ar program likhar somoy code highlighter use korun.

    Level 0

    @রাব্বি: ভাই কোড highlighter কিভাবে ব্যবহার করব, একটু যদি সাহায্য করেন খুব খুশি হতাম।

Level 0

অনেক ভাল প্রচেষ্টা। আমিও জাভাস্ক্রিপ্ট শিখছি http://www.w3schools.com থেকে। কিন্তু অইখানে এত সুন্দর explanation নাই। আশা করি চালিয়ে জাবেন।

Level 0

জাভাস্ক্রিপ্ট শিখতে গিয়ে বুঝলাম আমার দ্বারা সম্ভব হবে না। এখন মনে হচ্ছে bdtuner শিখীয়েই ছাড়বে। Thank you bdtuner.

Level 0

আশাকরি এখান থেকে জাভাস্ক্রিপ্ট ভালভাবে শিখতে পারবো

ভাই আপনাকে অনেক ধন্যবাদ । শেখা শুরু করলাম।

Level 0

thamku vaiay