Wednesday, August 10, 2022

এইচটিএমএল পেইজে জাভাস্ক্রিপ্ট কিভাবে লিখে?

আজকের এই আর্টিকেলে জানানো হবে আপনি এইচটিএমএল পেইজের মধ্যে জাভাস্ক্রিপ্ট কিভাবে লিখবেন অথবা জাভাস্ক্রিপ্ট কিভাবে ইমপ্লিমেন্ট করবেন? জাভাস্ক্রিপ্ট যারা একদম নতুন শিখছেন তাদের জন্য আজকের এই আর্টিকেলটি খবই গুরুত্বপুর্ন! সুতরাং সবাই মোনোযোগ সহকারে পরবেন।
এইচটিএমএল পেইজের মধ্যে জাভাস্ক্রিপ্ট লিখার ২টি পদ্বতি আছে। এই দুটি হলো-
  1. Inpage JavaScript 
  2. External JavaScript

Inpage JavaScript 

ইনপেইজ জাভাস্ক্রিপ্ট এটার মানে হলো জেই পেইজে আপনি এইচটিএমএল কোড লিখেছেন সেই পেইজের মধ্যেই জাভাস্ক্রিপ্ট কোড লিখা। নিচের ছবিটি যদি লখ্য করেন তাহলে জানতে পারবেন কিভাবে আপনি এইচটিএমএল কোডের মধ্যে জাভাস্ক্রিপ্ট লিখবেন।
উপরের ছবিটি যদি একটু লক্ষ্য করেন এখানে কিন্তু <Script> নামক একটি ট্যাগ লিখা হয়েছে, মূলত এর মধ্যেই জাভাস্ক্রিপ্ট কোড লিখতে হয়। আরেকটি বিষয় হয়ত আপনারা লক্ষ্য করতে পেরেছে সেটা হচ্ছে এখানে স্ক্রিপ্ট ট্যাগ ২ বার স্টার্ট ও ক্লোজ করা হয়েছে। আসলে জাভাস্ক্রিপ্ট আপনি চাইলে <head> ট্যাগের যে কোন অংশে লিখতে পারেন অন্যথায় আপনি এটা <body> ট্যাগের একদম শেষে বা </body> যেখানে এই ক্লোজিং ট্যাগ আছে তার ঠিক উপরেই <script> ট্যাগ শুরু ও শেষ করতে পারেন। 

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

External JavaScript

এক্সটার্নাল জাভাস্ক্রিপ্ট এটা মূলত কাজ হচ্ছে লিংক করা। যেমন সিএসএস  লিখার সময় সিএসএস এর জন্য একটি আলাদা ফাইল করে পরবর্তীতে সেই ফাইল এইচটিএমএল পেইজের সাথে কানেক্ট করে নিলে সিএসএস এ যাই লিখি এটা এইচটিএমএল এর পেইজে চলে আসে। একই ভাবে জাভাস্ক্রিপ্টের রয়েছে এরকমই একটি সিস্টেম। যেমন জাভাস্ক্রিপ্টের জন্য আপনি একটি ফাইল তৈরি করলেন, javascript.js নামে, (.js এটা জাভাস্ক্রিপ্টের ফাইল এক্সটেনশন)। এবার এই ফাইলটা এইচটিএমএল এর সাথে কানেক্ট করতে হবে। কিভাবে কানেক্ট করবেন নিচের ছবি গুলো মনোযোগ সহকারে লখ্য করুন।
উপরের ছবিটি লখ্য করলে দেখবেন এখানে লাল মার্ক করে একটি লাইন লিখা হয়েছে। যেটা দ্বারা অন্য কোনো একটি জাভাস্ক্রিপ্ট ফাইলকে কানেক্ট করা হয়েছে। <script src="javascript.js"></script>

উপরের ছবিতে দেখা যাচ্ছে আমার কম্পিউটারে একটি ফোল্ডার ওপেন করেছি এবং ফোল্ডারে ২টা ফাইল আছে। ২টি ফাইল কিন্তু একই ফোল্ডারে আছে এর জন্য মূলত ডাইরেক্ট src="file_name" দিয়ে দিতে পারছি। কিন্তু এটা যদি অন্য কোনো ফোল্ডারে থাকতো? সেই ক্ষেত্রে প্রথমত ফোল্ডারের নাম যেমন jsFile এর পর একটি স্লাশ (/) jsFile/ এবং এবারে আপনার ফাইল নাম যেমন javascript.js অতএব myFile/javascript.js এইভাবে কানেক্ট করতে পারেন। 

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

আজকের টিউটোরিয়াল এই পর্যন্ত ধন্যবাদ সবাইকে।


শেয়ার করুন