জাভাস্ক্রিপ্ট টিউটোরিয়াল-শিখুন গল্পে গল্পে সাথে 1100+ Exercise

জাভাস্ক্রিপ্টের সাথে পরিচয়

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


— আরে না, কেউ গুম করে নাই। তবে দিওয়ানা একটু তো হইছিই।


কে সে ভাগ্যবতী, কার প্রেমে তুই দিওয়ানা হইছস।


— সে আর কেউ না, সে হচ্ছে জাভাস্ক্রিপ্ট। যতই দেখি, ততই অবাক হই, তার প্রতিটা ফিচার যেন এক একটা রহস্য। একদিকে তার dynamic nature, অন্যদিকে তার asynchronous আচরণ— কখনো লুপে ফালায় রাখে, আবার কখনো পপ করে রেগে যায়। আবার আমি অভিমান করলে আমার কাছে callback চায় promise করতে বলে। আমি ভাবি, ‘এটা কি প্রেম নাকি ইমোশনাল event bubble।’


তাহলে, প্রেমের bubble টিকবে তো?


— টিকবেই। কারণ, তার scope-এর মধ্যেই আমার সবকিছু। তার execution context-এ আমি closure হয়ে আছি, বেরোনোর উপায়ই নাই।  


বাহ, তুই তো দেখি আসলেই জাভাস্ক্রিপ্টের দিওয়ানা! আমাকেও তার সাথে একটু পরিচয় করায় দে। 

 

— ঠিকাছে। পরিচয় করায় দিব, কিন্তু খেয়াল রাখিস, একবার প্রেমে মজে গেলে আর জাভাস্ক্রিপ্ট থেকে মুক্তি নাই কিন্তু । সারাজীবন ফিদা হয়ে থাকবি।


শুরু করে দিলাম। ক— তাহলে একদম শুরু থেকেই বলতেছি।  

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

বহুকাল আগে, তোর জন্মেরও আগে, সেই ১৯৯৫ সালে— Netscape কোম্পানির Navigator নামে একটা ওয়েব ব্রাউজার ছিল। তখনকার দিনে ওয়েবসাইটগুলো ছিল খুব বোরিং আর স্লো। তাই Netscape কোম্পানি তাদের ব্রাউজার আরেকটু ডাইনামিক করতে চাচ্ছিল। আর সেই দায়িত্ব দেওয়া হয় কোম্পানিতে নতুন জয়েন করা তরুণ টগবগে একজন প্রোগ্রামার ব্রেন্ডন এইককে (Brendan Eich)। তাকে চ্যালেঞ্জ দেওয়া হয় ১০ দিনের মধ্যে একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ বানিয়ে নিয়ে আসতে, যেটাকে খুব সহজেই ওয়েবসাইটের সঙ্গে যোগ করে দেওয়া যাবে।

তুখোড় ব্রেন্ডন ১০ দিনের মধ্যে Mocha নাম দিয়ে ছোট এবং সিম্পল একটা প্রোগ্রামিং ল্যাঙ্গুয়েজ বানিয়ে ফেলে। পরে এই নাম পরিবর্তন করে LiveScript রাখা হয়। তার কয়েক মাস পরে এটাকে জনপ্রিয় করার জন্য JavaScript নাম দেওয়া হয়। কথিত আছে যে, জাভা তখন অনেক জনপ্রিয় ছিল। 

যদিও জাভার সঙ্গে জাভাস্ক্রিপ্টের তেমন মিল নাই। তারপরও জাভাস্ক্রিপ্ট নাম দিলে জাভার সঙ্গে মিল আছে ভেবে প্রোগ্রামাররা সহজেই এটার প্রতি আগ্রহী হয়ে উঠবে। তাই এমন নাম দেওয়া হয়।

তারপর সব জল্পনা-কল্পনার অবসান ঘটিয়ে ১৯৯৫ সালের ৪ ডিসেম্বর জাভাস্ক্রিপ্ট অফিসিয়ালি প্রথম রিলিজ হওয়ার পর খুব দ্রুতই হইচই ফেলে দেয়। আর তা দেখে হিংসায় জ্বলে-পুড়ে যায় বিল গেটসের Microsoft কোম্পানি। তারা জাভাস্ক্রিপ্টকে নকল করে JScript নামে আরেকটা প্রোগ্রামিং ল্যাঙ্গুয়েজ চালু করে। তারপর তাদের ইচ্ছামতো পরিবর্তন নিয়ে আসতে থাকে। এতে প্রোগ্রামাররা পড়ে বিপদে। তারা ওয়েবসাইটের জন্য জাভাস্ক্রিপ্ট ইউজ করবে নাকি JScript ইউজ করবে। এই দেখে ১৯৯৭ সালে মাইক্রোসফটের জ্বালায় অতিষ্ঠ হয়ে Netscape কোম্পানি জাভাস্ক্রিপ্টকে ইউরোপিয়ান স্ট্যান্ডার্ড ECMA International হিসেবে রেজিস্টার্ড করে। তখন জাভাস্ক্রিপ্টের অফিসিয়াল নাম হয় ECMAScript । যদিও ৯৯.৯৯ শতাংশ মানুষ সব সময় জাভাস্ক্রিপ্টকে জাভাস্ক্রিপ্টই বলে।

জাভাস্ক্রিপ্ট একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ। যেকোনো প্রোগ্রামিং ল্যাঙ্গুয়েজের জন্য হাই লেভেল এবং লো লেভেল এই দুই শব্দ চলে আসে।

জাভাস্ক্রিপ্ট হচ্ছে হাই লেভেল ল্যাঙ্গুয়েজ। যেসব প্রোগ্রামিং ল্যাঙ্গুয়েজের কোড মানুষ পড়তে পারে এবং পড়ে বুঝতে পারে যে, কোড দিয়ে কী হচ্ছে। এ ধরনের প্রোগ্রামিং ল্যাঙ্গুয়েজগুলোকে হাই লেভেলের প্রোগ্রামিং ল্যাঙ্গুয়েজ বলে।


জাভাস্ক্রিপ্ট কীভাবে কাজ করে?

সংক্ষেপে বলতে গেলে, যখন তুই জাভাস্ক্রিপ্ট কোড লিখিস, তখন সেটা জাভাস্ক্রিপ্টের ইঞ্জিনের কাছে যায়। এই ইঞ্জিনের একটা নাম আছে, সেটা হচ্ছে V8 ইঞ্জিন। পরে এটা নিয়ে বিস্তারিত আলোচনা করব। ব্রাউজারের মধ্যসাধারণত আমরা তিনটি জায়গায় জাভাস্ক্রিপ্ট কোড লিখি:


নোড.জেএস:

১. https://nodejs.org/en/download/prebuilt-installer/current এই লিংক থেকে নোড ডাউনলোড করে ইনস্টল কর।


২. https://code.visualstudio.com/Download এই লিংক থেকে VS Code ডাউনলোড করে ইনস্টল কর।


৩. তোর কম্পিউটারে একটি নতুন ফোল্ডার তৈরি কর এবং সেটি VS Code-এ ওপেন কর।






৪. ফোল্ডারে একটি নতুন ফাইল তৈরি কর ‘index.js’ নামে এবং নিচের কোড লিখে দে:


   console.log("Hello JavaScript!!");


৫. এরপর VS Code-এর ওপরে View-তে ক্লিক করে Terminal-এ ক্লিক কর বা Ctrl + ` চেপে টার্মিনাল খোল।


৬. টার্মিনালে নিচের কমান্ডটি দে:


   node index.js


তখন আউটপুট দিবে:


   Hello JavaScript!!




2. অনলাইন কোড এডিটর:

তুই মোবাইল, ল্যাপটপ বা কম্পিউটার দিয়ে https://www.jhankarmahbub.com/console/ ওয়েবসাইটে গিয়ে জাভাস্ক্রিপ্টের কোড লেখা প্র্যাকটিস করতে পারবি। আর কোড লেখা হয়ে গেলে Run লেখা বাটনে চাপ দিলে Run লেখা বাটনের নিচে আউটপুট দেখাবে।



3. ব্রাউজার:

তুই চাইলে গুগল ক্রোম বা এই টাইপের কোনো ব্রাউজারের মধ্যে গিয়ে মাউস দিয়ে রাইট বাটন ক্লিক করলে অনেকগুলা অপশন দেখতে পাবি। এর মধ্যে একটি হলো ইন্সপেক্ট (Inspect)। এই ইন্সপেক্টে ক্লিক করলে ব্রাউজারের ডানপাশে একটা জিনিস ওপেন হবে, সেখানে একটু খুঁজে কনসোলে (console) ক্লিক কর। এখানেও তুই জাভাস্ক্রিপ্টের কোড লিখতে পারবি এবং কোড লেখার পর কী-বোর্ডের এন্টার (enter) লেখা বাটনে চাপ দিলে আউটপুট দেখতে পারবি।