ইন্টারনেটে বহুল ব্যবহৃত সবচেয়ে জনপ্রিয় এবং সকল প্রকার ব্রাউজারে সাপোর্টেবল একটি Client-side scripting language ও browser-based scripting language হলো জাভাস্ক্রিপ্ট। এটি একটি প্রোটোটাইপ-ভিত্তিক স্ক্রিপ্টিং ল্যাংগুয়েজ যাতে পরিবর্তনশীল এবং প্রথম শ্রেণীর ফাংশন রয়েছে। এটি অবজেক্ট-ওরিয়েন্টেড ও ডায়নামিক প্রোগ্রামিং ল্যাংগুয়েজ। সারাবিশ্বে ১.৮ বিলিয়ন ওয়েবসাইট রয়েছে, তার মধ্যে ৯৫% ওয়েবসাইট ই জাভাস্ক্রিপ্ট ব্যবহার করেছে। গিটহাবের ২০২০ এর Octoverse report অনুসারে, জাভাস্ক্রিপ্ট এখন পর্যন্ত সবচেয়ে বেশি ব্যবহৃত ভাষা।
১৯৯৫ সালে নেটস্কেপের ডেভলপার Brendan Aich এই প্রোগ্রামিং ল্যাঙ্গুয়েজটি তৈরি করেন এবং ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ ব্রাউজারের সাথে ‘Live Script’ নামে সকলের কাছে এই ল্যাঙ্গুয়েজটি উদ্বোধন করেন। এরপর একই বছরের ৪ ডিসেম্বর এটির নামকে পরিবর্তন করে রাখা হয় জাভাস্ক্রিপ্ট (JavaScript)। যা সংক্ষেপে JS নামেও পরিচিত। ১৯৯৭ সালে Ecma International এটির সাথে সমন্বয় করে EcmaScript এর প্রথম সংস্করণ নিয়ে বাজারে আসে। ১৯৯৯ সালে এর তৃতীয় সংস্করণ খুব আলোড়ন সৃষ্টি করে এবং মানুষের কাছে আরো বেশি পরিচিত হয়ে ওঠে। EcmaScript International তার ধারাবাহিকতা অব্যাহত রেখে ২০১৫ সালের জুনে বাজারে নিয়ে আসে ষষ্ঠ সংস্করণ। তাই বুঝা যাচ্ছে জাভাস্ক্রিপ্ট একটি ইন্টারপ্রেটেড হাই লেভেল প্রোগ্রামিং ল্যাঙ্গুয়েজ। জাভাস্ক্রিপ্ট মুলত ৩টি জিনিস নিয়ে তৈরী :-
১. ECMAScript (এটি হচ্ছে জাভাস্ক্রিপ্টের মুল অংশ বা core functionality)
২. DOM (Document Object Model – ওয়েব পেজের কনটেন্টের সাথে কাজ করে)
৩. BOM (Browser Object Model – ব্রাউজারের সাথে কাজ করে)
জাভাস্ক্রিপ্ট সেটআপ
যেকোনো ওয়েবসাইট ডেভেলপমেন্ট এর জন্য তিনটি প্রোগ্রামিং ল্যাংগুয়েজ মূল ভুমিকা পালন করে। HTML, CSS ও Javascript। জাভাস্ক্রিপ্ট এই তিনটি ল্যাংগুয়েজের মধ্যে অন্যতম। এটির সাহায্যে একটা HTML পেজে নানান ধরনের ইফেক্ট বা আকর্ষণীয় জিনিস তৈরী করা যায় এছাড়া ফর্ম ভেলিডেশন এবং এজাক্সের কাজও করা যায়। জাভাস্ক্রিপ্ট ব্যবহার করে বহুল পরিচিত কাজের মধ্যে আছে ঘড়ি, ড্রপডাউন মেনু, চলন্ত খবর, Alert মেসেজ, পপআপ উইন্ডো, ফর্ম ভেলিডেশন, স্লাইড শো, Mouse Trailers (ওয়েবসাইট ব্রাউজ এর সময় মাউসে এনিমেশন সৃষ্টি) ও আরও অন্যান্য। তিনটি অবস্থানে জাভাস্ক্রিপ্ট কোডকে রাখা যায়।
১. head ট্যাগ এর ভিতরে
২. body ট্যাগ এর মধ্যে
৩. External file হিসাবে
Html ফাইলে head or body এর অবস্থানে জাভাস্ক্রিপ্ট ব্যবহার খুবই সাধারন।
head tag এর উদাহরন
<html>
<head>
<script type=”text/JavaScript”>
function popup() {
alert(“Hello World”)
}
</script>
</head>
<body>
<input type=”button” onclick=”popup()” value=”Try it”>
</body>
</html>
এখানে একটি ফাংশন তৈরী করা হয়েছে যার নাম পপআপ এবং এটিকে HTML document এর head ট্যাগ এ রাখা হয়েছে। এখন আউটপুটে যতবারই বাটনে ক্লিক করা হবে ততবারই “Hello World!” নামের alert box দেখাবে।
body tag এর উদাহরণ
জাভাস্ক্রিপ্ট প্রোগ্রামে <script> ট্যাগ ব্যবহার করে একটি HTML ফাইলের প্রায় যেকোনো জায়গায় জাভাস্ক্রিপ্ট ফাংশন সন্নিবেশ করা যেতে পারে। আপনাদের বোঝার সুবিধার্থে দুটি উদাহরণে একই ফাংশন রাখা হয়েছে, HTML tag ভিন্ন করে।
<html>
<head>
</head>
<body>
<button onclick=”myFunction()”>Try it</button>
<script>
function myFunction() {
alert(“Hello World”);
}
</script>
</body>
</html>
এখানেও আউটপুট একইরকম আসবে।
External ফাইলের উদাহরণ
একই Script ওয়েবসাইটের বিভিন্ন পেজে ব্যবহার করার জন্য external জাভাস্ক্রিপ্ট file ব্যবহার সবচেয়ে উত্তম এবং সহজ পন্থা। এর কারণ একই কোড ওয়েবসাইটের প্রত্যেক পেজের জন্য লেখার প্রয়োজন হয় না। শুধু জাভাস্ক্রিপ্ট ফাইলটি HTML ফাইলে script tag এর মাঝে যোগ করে দিতে হয়। External জাভাস্ক্রিপ্ট ফাইল Import করা ঝামেলামুক্ত কাজ। প্রথমত যে ফাইলটিকে Import করা হয় সেটি বৈধ এবং শুধুমাত্র জাভাস্ক্রিপ্ট file-ই হতে হয়। দ্বিতীয়ত ফাইলের extension টি অবশ্যই “.js” হতে হয় ।
ধরা যাক, “myjs.js” নামের কম্পিউটারে একটি file আছে যা এক লাইনের Hello World নামের alert function টি ধারন করে আছে। আরও ধরা যাক HTML file এবং জাভাস্ক্রিপ্ট file টি কম্পিউটারের একই directory তে আছে। এখন দুটিকে একসাথে করে আউটপুট প্রদর্শন করানো যাক।
myjs.js নামের Javascript ফাইল :
function popup(){
alert(“Hello World”)
}
myhtml.html নামের html ফাইল :
<html>
<head>
<script src=”/myjs.js”>
</script>
</head>
<body>
<input type=”button” onclick=”popup()” value=”Click Me!”>
</body>
</html>
আপনারা আউটপুট দেখতে আপনাদের কম্পিউটার ব্যবহার করতে পারেন। আপনাদের সুবিধার্থে জানিয়ে দিচ্ছি, জাভাস্ক্রিপ্ট কিংবা যেকোনো প্রোগ্রামিং ল্যাংগুয়েজ লেখার জন্য আমরা Integrated development environment (IDE) কিংবা Visual Studio Code, Atom, Sublime Text কোড ইডিটরগুলো ব্যবহার করতে পারি। তবে সবচেয়ে ব্যবহৃত ও সহজে কোড লেখার জন্য Visual Studio Code অন্যতম।
জাভাস্ক্রিপ্ট Event
Event অর্থ সোজা বাংলায়, কোনো ঘটনা। HTML ডকুমেন্টের কোথাও ক্লিক করা অথবা একটি element এর উপর মাউস পয়েন্টার করা অথবা কী-বোর্ডের কোনো কী-তে চাপ দেয়া, এগুলো সবই ইভেন্টের অন্তর্ভুক্ত। অন্যদিকে পেজ লোড করা, পেজকে রিসাইজ করা এগুলোও ইভেন্টের মধ্যে পড়ে। এরকম কোনো ইভেন্ট এ আমরা হয়তো কোনো অ্যাকশন দিতে চাইতে পারি। যেমন, কেউ অমুক বাটনে ক্লিক করলে একটা ম্যাসেজ পরিদর্শন করবে। অথবা পেজটি পুরোপুরি লোড না হওয়া পর্যন্ত একটা loader শো করাবো। অথবা ওয়েবসাইটের কোনো ফর্ম সাবমিট করার সময় ইনপুট ফিল্ডগুলো ভ্যালিড কিনা দেখা যাবে। এগুলো সবই ইভেন্ট এর সাহায্যে করা যায়। জাভাস্ক্রিপ্ট এর event দিয়ে একটি পেজ অনেকটা ডায়নামিক পেজের মতো করে ফেলা যায়। পেজ রিলোড না করেও অনেকসময় ইনস্ট্যান্ট ফলাফল, অ্যাকশন দেখা যায় জাভাস্ক্রিপ্ট এর ইভেন্ট ব্যবহার করার মাধ্যমে। এই event এর কারণে একটি ওয়েবসাইটের overall user-experience খুব ভালো পর্যায়ে নিয়ে নেওয়া যায়।
জাভাস্ক্রিপ্টের লাইব্রেরি ও ফ্রেমওয়ার্ক
জাভাস্ক্রিপ্টের জনপ্রিয়তা মূলত বেড়েছে লাইব্রেরি (library) ও ফ্রেমওয়ার্কের (framework) কারণে। আগে জাভাস্ক্রিপ্ট দিয়ে Client-side code লেখার জন্য ব্যবহার হতো। এখন জাভাস্ক্রিপ্ট দিয়ে Backend code ও লেখা হচ্ছে। ওয়েবসাইট তৈরি করতে যেকোনো লাইব্রেরি এবং ফ্রেমওয়ার্কই ব্যবহার করা যায়। সবচেয়ে বেশি ব্যবহৃত লাইব্রেরি এবং ফ্রেমওয়ার্ক হচ্ছে জাভাস্ক্রিপ্টের ফ্রেমওয়ার্ক ও লাইব্রেরি। জাভাস্ক্রিপ্টের অসংখ্য লাইব্রেরি ও ফ্রেমওয়ার্ক রয়েছে। তবে সবগুলোর মধ্যে অন্যতম React.js, jQuery, Express ইত্যাদি। এই লাইব্রেরিগুলো তৈরী হয়েছে একেকটি একেক কাজের জন্য। এখন প্রশ্ন জাগতে পারে, লাইব্রেরী কাকে বলে? আমি একটি উদাহরণ দিয়ে আপনাদের বোঝানোর চেষ্টা করি, মনে করুন আপনার একটি ওয়েবসাইট আছে সেখানে আপনি স্লাইডার যুক্ত করতে চাচ্ছেন। তাহলে অবশ্যই আপনাকে ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে স্ক্র্যাচ থেকে তৈরি করতে হবে। এখন এই কাজটি যদি অন্য কেউ নিজের কাজের জন্য বানিয়ে ছিল তারপর সকলের জন্য উন্মুক্ত করে দিয়েছে, আপনি শুধু তার বানানো প্রোগ্রামটি ব্যবহার করে আপনার কাজটি সম্পন্ন করছেন তখন সেটি কে লাইব্রেরী বলা হবে। এক কথায় বলতে গেলে খণ্ড-খণ্ড কোন সমস্যার সমাধান করার জন্য পূর্বের কোন ডেভেলপার কর্তৃক বানানো স্ক্রিপ্ট যদি আমরা আমাদের নিজস্ব কাজের জন্য ব্যবহার করি তখন সেটিই হবে লাইব্রেরী। জাভাস্ক্রিপ্টের জন্মই হয়েছে user-experience এবং user-interface এর জন্য। জাভাস্ক্রিপ্টের লাইব্রেরি এই বিষয়টিকে আরও সহজতর করে দিয়েছে। বর্তমানে সবচেয়ে জনপ্রিয় user-interface library হচ্ছে React.js। অনেকে এটিকে লাইব্রেরি বলে থাকে আবার অনেকে ফ্রেমওয়ার্কও বলে থাকে। রিয়্যাক্ট একটি ছোট্ট লাইব্রেরি। এটি ব্যবহার করে যেকোন ধরনের ছোট অথবা বড় ওয়েব সাইট তৈরি করা যাবে। তবে সেই ওয়েব সাইটটি হবে সিঙ্গেল পেজ অ্যাপ্লিকেশন। React.js দিয়ে আপনি কত বড় ওয়েব সাইট তৈরি করতে পারবেন সেটার একটি উদাহরণ হলো ফেসবুক। ফেসবুক react.js দিয়ে তৈরি করা হয়েছে। মূলত ফেসবুক কোম্পানি react.js লাইব্রেরি তৈরি করেছে। ফেসবুকের তৈরি এই লাইব্রেরি খুব দ্রুত জনপ্রিয়তা লাভ করছে। অন্যদিকে server-side code রান করার জন্য রয়েছে Node.js লাইব্রেরি। Angular JS আরেকটি জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। যা frontend এর জন্য ব্যবহার করা হয়। Angular js আমরা গুগল থেকে পেয়ে থাকি। এই ফ্রেমওয়ার্কটি ব্যবহার করেও অনেক দারুণ ওয়েব সাইট তৈরি করা যায়। Vue.js একটি ওপেনসোর্স জাভাস্ক্রিপ্ট front-end অ্যাপ্লিকেশন তৈরি করার জন্য প্রগ্রেসিভ ফ্রেমওয়ার্ক। Vue.js তৈরি করেছে Evan You। দীর্ঘ 6 বছর যাবৎ তিনি এবং তাঁর দক্ষ টিম এই ফ্রেমওয়ার্কটির রক্ষণাবেক্ষণ করে আসছেন। এবং খুব দ্রুত গতিতে এর ইউজার বৃদ্ধি পেয়ে যাচ্ছে। React এর মত Vue.js কম্পনেন্ট তৈরি করে যার জন্য খুব একটা রিলোড এর প্রয়োজন পড়ে না। অ্যাপ্লিকেশন তৈরি করার জন্য এট্রিবিউট ভ্যালু ব্যবহার করা যায় HTML এর মার্কআপ এর সাথে। এছাড়াও অন্যান্য কাজে রয়েছে Angular, jQuery, node.js ইত্যাদি। অন্যদিকে machine learning এর জন্যও রয়েছে অনেক গুলো জাভাস্ক্রিপ্ট লাইব্রেরি। TensorFlow.js এর মাধ্যমে জাভাস্ক্রিপ্ট দিয়েই মেশিন লার্নিং মডেল তৈরি করা যাবে। এবং সেই মডেল চাইলে client-side এ অথবা Node.js ব্যবহার করে সার্ভার সাইডে রানও করা যাবে।
জাভাস্ক্রিপ্ট এর ভবিষ্যৎ
ক্যারিয়ার হিসেবে জাভাস্ক্রিপ্ট একটি উজ্জ্বল নক্ষত্র। বর্তমানে জাভাস্ক্রিপ্ট একটা জনপ্রিয় স্ক্রিপ্টিং ল্যাঙ্গুয়েজ। এর চাহিদা এবং জনপ্রিয়তা এতটাই যে ২০১৭ থেকে ডেভেলপার জরিপে, এই ল্যাংগুয়েজটি শীর্ষস্থান অর্জন করে আছে। যদি আপনি ক্যারিয়ার হিসেবে জাভাস্ক্রিপ্টকে বেছে নেন তাহলে কোনো কাজের অভাব হবে না। ভালো সম্মানী ছাড়া যদি কোন ফার্ম এ জব না করতে চান, আপনার জন্য রয়েছে অনলাইন মার্কেটপ্লেস। বর্তমানে অনলাইন মার্কেটপ্লেসগুলোতে জাভাস্ক্রিপ্ট ডেভেলপারদের চাহিদা সবথেকে বেশি। জাভাস্ক্রিপ্টের আদৌ কতটুকু ডিমান্ড? এই বিষয়ে কোনোভাবে প্রশ্ন জাগলে শুধু এটুকু জেনে রাখুন যে, জাভাস্ক্রিপ্ট ১৯৯৫ সালে তৈরি হওয়ার পর থেকে সারা বিশ্বে সর্বত্র এর ব্যবহার রয়েছে এবং এটি পরিবর্তন হওয়ার সম্ভাবনা নেই। এখন প্রশ্ন জাগতে পারে, জাভাস্ক্রিপ্ট কেন এত জনপ্রিয় হয়েছিল অন্যান্য অনেক প্রোগ্রামিং ল্যাঙ্গুয়েজের তুলনায়। এর কারণ হিসেবে একটি ই বলা যায়, সেটি হলো জাভাস্ক্রিপ্ট খুবই সমৃদ্ধ। শুধুমাত্র জাভাস্ক্রিপ্ট জেনে, একটি সম্পূর্ণ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সম্ভব। মোবাইল অ্যাপ্লিকেশন? জাভাস্ক্রিপ্টের প্রচুর ফ্রেমওয়ার্ক রয়েছে যেমন Angular, React.js, Vue.js এবং আরও অনেক কিছু, যার মাধ্যমে সহজেই তৈরি করা যায় অসাধারণ সব মোবাইল অ্যাপ্লিকেশন। তাহলে আর দেরি নয়। এবার জাভাস্ক্রিপ্ট নিয়ে সব কনফিউশন ঝেড়ে ফেলে শেখা শুরু করে দিন।
জাভাস্ক্রিপ্ট সম্পর্কে এই ছিলো প্রাথমিক পর্যায়ের বিস্তারিত সব আলোচনা। আশা করি আপনারা বুঝতে পেরেছেন। যেকোনো প্রশ্ন জাগলে নির্দ্বিধায় কমেন্টবক্সে কমেন্ট করুন। টেকনোলজি সম্পর্কে আরও তথ্য জানতে আমাদের সঙ্গেই থাকুন। সেইসাথে আমাদের অন্যান্য আর্টিকেলগুলোও পড়তে পারেন। ধন্যবাদ।
