Add Javascript In Html? কিভাবে HTML এ JavaScript যুক্ত করবেন?

How To Add Javascript In Html? কিভাবে HTML এ JavaScript যুক্ত করবেন

আজকের গতিময় ওয়েব ডেভেলপমেন্ট পরিবেশে, জাভাস্ক্রিপ্ট একটি গুরুত্বপূর্ণ ভূমিকা পালন করে প্রভাবশালীভাবে ইন্টারঅ্যাক্টিভিটি এবং কার্যকলাপ সংযোজন করে। HTML পৃষ্ঠাগুলিতে জাভাস্ক্রিপ্ট যুক্ত করে আপনি মজাদার ব্যবহারকারী অভিজ্ঞতা তৈরি করতে এবং অনেক সম্ভাবনার দরজা উন্মুক্ত করতে পারবেন। এই নিবন্ধে আপনাকে HTML এ JavaScript যোগ করার পদ্ধতিগুলি নির্দেশিত করা হবে, যা আপনাকে জাভাস্ক্রিপ্ট কোডগুলি আপনার HTML ওয়েব পৃষ্ঠাগুলিতে যুক্ত করার জন্য দক্ষতা এবং আত্মবিশ্বাস দেবে।

Table of Contents:

1. HTML এবং JavaScript বোঝার প্রতিষ্ঠা
2. HTML-এ JavaScript যুক্ত করার গুরুত্ব
3. HTML-এ JavaScript যুক্ত করার পদ্ধতি: পদক্ষেপসমূহ
   1. বাহ্যিক JavaScript ফাইলকে সংযুক্ত করা
   2. ইনলাইন JavaScript
   3. ইভেন্ট হ্যান্ডলিং
   4. স্ক্রিপ্ট ট্যাগের মধ্যে স্ক্রিপ্ট যোগ করা
   5. নির্দিষ্ট ট্যাগের সাথে স্ক্রিপ্ট সংযুক্ত করা
   6. ডকুমেন্টের শেষে স্ক্রিপ্ট সংযুক্ত করা
4. JavaScript এর মধ্যে ভ্যারিয়েবল পাঠানো
5. জাভাস্ক্রিপ্ট কোডের ওপর ইভেন্টগুলির নিয়ন্ত্রণ
6. জাভাস্ক্রিপ্ট লাইব্রেরিগুলি ব্যবহার
7. JavaScript কোডে কনডিশনাল স্টেটমেন্ট
8. লুপ এবং ইটারেশনের মাধ্যমে জাভাস্ক্রিপ্ট ব্যবহার
9. জাভাস্ক্রিপ্ট এর ফাংশন
10. জাভাস্ক্রিপ্ট এবং আসলেই প্রভাবশালী ওয়েব ডেভেলপমেন্ট

HTML এ JavaScript যুক্ত করার পদ্ধতি: পদক্ষেপসমূহ

হেডিং 3 সাব-হেডিং 1: বাহ্যিক JavaScript ফাইলকে সংযুক্ত করা
আমাদের প্রথম পদক্ষেপ হলো বাহ্যিক JavaScript ফাইলকে আমাদের HTML ফাইলে সংযুক্ত করা। আপনি নিজের স্ক্রিপ্ট কোডগুলি একটি .js ফাইলে রাখতে পারেন এবং সেই ফাইলটি আপনার HTML পেজে সংযুক্ত করতে পারেন। এটি একটি বেশ প্রচলিত পদ্ধতি যা কোড পুনরাবৃত্তি এবং পার্থক্যপূর্ণতা প্রদান করে।

হেডিং 3 সাব-হেডিং 2: ইনলাইন JavaScript
আপনি চাইলে আপনার HTML ফাইলের মধ্যেই সরাসরি JavaScript কোড লিখতে পারেন। এটি ইনলাইন JavaScript হিসাবে পরিচিত। আপনি script ট্যাগের ভিতরে কোড লিখতে পারেন এবং সেই কোডগুলি আপনার HTML পৃষ্ঠায় সরাসরি প্রয়োগ করা হবে।

হেডিং 3 সাব-হেডিং 3:

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

হেডিং 3 সাব-হেডিং 4:

স্ক্রিপ্ট ট্যাগের মধ্যে স্ক্রিপ্ট যোগ করা আপনি HTML ট্যাগের মধ্যেও JavaScript কোড লিখতে পারেন। জাভাস্ক্রিপ্ট কোডগুলি একটি <script> ট্যাগের মধ্যে লিখতে পারেন, যা স্ক্রিপ্ট কোডটি ডকুমেন্টের শুরু থেকেই এক্সিকিউট করবে। এটি কোডের প্রচলিত পদ্ধতির একটি উদাহরণ।

হেডিং 3 সাব-হেডিং 5:

নির্দিষ্ট ট্যাগের সাথে স্ক্রিপ্ট সংযুক্ত করা কিছু ট্যাগ আছে যেগুলির মধ্যেই আপনি JavaScript কোড সংযুক্ত করতে পারেন। উদাহরণস্বরূপ, <a> ট্যাগ বা <button> ট্যাগের মধ্যে কোড সংযুক্ত করলে বাৎসরিক চালানোর সময় কোডটি এক্সিকিউট হবে।

হেডিং 3 সাব-হেডিং 6:

ডকুমেন্টের শেষে স্ক্রিপ্ট সংযুক্ত করা আপনি চাইলে আপনার ডকুমেন্টের শেষেও JavaScript কোড সংযুক্ত করতে পারেন। এটি প্রথমেই HTML এর সবচেয়ে শেষে এক্সিকিউট হবে।

JavaScript এর মধ্যে ভ্যারিয়েবল পাঠানো

জাভাস্ক্রিপ্টে আপনি ভ্যারিয়েবলগুলি পাঠাতে পারেন যার মাধ্যমে আপনি ডেটা সংরক্ষণ করতে পারেন। ভ্যারিয়েবলগুলির মাধ্যমে আপনি সংখ্যা, স্ট্রিং, অবজেক্ট, বুলিয়ান এবং অন্যান্য ধরণের ডেটা সংরক্ষণ করতে পারেন।

জাভাস্ক্রিপ্ট কোডের ওপর ইভেন্টগুলির নিয়ন্ত্রণ

জাভাস্ক্রিপ্ট ব্যবহার করে আপনি আপনার ওয়েব পৃষ্ঠার ইভেন্টগুলি নিয়ন্ত্রণ করতে পারেন। ইভেন্টগুলি হলো ব্যবহারকারীর ক্লিক, ডাবল ক্লিক, মাউস ওভার, কীবোর্ড ইনপুট ইত্যাদি। জাভাস্ক্রিপ্টের মাধ্যমে আপনি ইভেন্টগুলিতে কাস্টমাইজড কোড বা ফাংশন লিখতে পারেন এবং ঐ ইভেন্টগুলিতে কোড এক্সিকিউট হবে যখন ঐ ইভেন্টগুলি ঘটে।

কনডিশনাল স্টেটমেন্টগুলি ব্যবহার করা

জাভাস্ক্রিপ্টে আপনি কনডিশনাল স্টেটমেন্টগুলি ব্যবহার করতে পারেন যার মাধ্যমে আপনি নির্দিষ্ট শর্ত অনুযায়ী কোডগুলি এক্সিকিউট করতে পারেন। উদাহরণস্বরূপ, আপনি if-else স্টেটমেন্ট ব্যবহার করে একটি শর্ত পরীক্ষা করতে পারেন এবং অনুযায়ী প্রয়োগ করতে পারেন একটি বা একাধিক কোড ব্লক।

ফাংশনগুলি ব্যবহার করা

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

এইচটিএমএল এ জাভাস্ক্রিপ্ট সংযোজনের প্রাথমিক উদাহরণ

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

উপরের কোডটিতে আমরা একটি বাটন সৃষ্টি করেছি এবং ঐ বাটনে ক্লিক করলে একটি পপআপ ম্যাসেজ দেখাবে যা ব্যবহারকারীর নাম পুরন করতে বলবে এবং একটি স্বাগত বার্তা দেখাবে।

জাভাস্ক্রিপ্ট এবং এইচটিএমএল ফাইলের মধ্যে বিভিন্ন সংযোগ পদ্ধতি

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

1. Inline Script: এই পদ্ধতিতে আপনি HTML এর মধ্যে <script> ট্যাগের মধ্যে জাভাস্ক্রিপ্ট কোড লিখতে পারেন। উদাহরণস্বরূপ:

2. Internal Script: এই পদ্ধতিতে আপনি HTML ফাইলের মধ্যে <script> ট্যাগের মধ্যে জাভাস্ক্রিপ্ট কোড লিখতে পারেন। উদাহরণস্বরূপ:

3. External Script: এই পদ্ধতিতে আপনি একটি আলাদা JavaScript ফাইল তৈরি করবেন এবং সেটিকে HTML ফাইলের মধ্যে সংযুক্ত করবেন। উদাহরণস্বরূপ:

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

হেডারে জাভাস্ক্রিপ্ট সংযোগ করা

এইচটিএমএল ফাইলের <head> সেকশনে জাভাস্ক্রিপ্ট সংযোগ করলে সংযোগ সম্পর্কিত কিছু বিষয় বিবেচনা করতে পারেন:

1. সর্বাধিক ব্যবহৃত পদ্ধতি: এই পদ্ধতিতে জাভাস্ক্রিপ্ট ফাইল বা কোডটি <script> ট্যাগের মধ্যে বা একটি <script> ট্যাগ এর মধ্যে লিখা হয়। এটি সবার জন্য সুলভ এবং প্রধানত ছোট ও সাধারণ প্রজন্মের উইবসাইটগুলিতে ব্যবহৃত হয়। উদাহরণস্বরূপ:

2. সিংগেল লাইনে সংযোগ: ক্রমিক এবং ছোট জাভাস্ক্রিপ্ট কোড হলে আপনি সরাসরি <script> ট্যাগের মধ্যে কোডটি লিখতে পারেন। উদাহরণস্বরূপ:

2. বডির শেষে জাভাস্ক্রিপ্ট সংযোগ করা

   এই পদ্ধতিতে আপনি জাভাস্ক্রিপ্ট কোডটি HTML ফাইলের শেষে সংযোগ করতে পারেন। এটি পৃষ্ঠার সাথে সংযোগ বিষয়ে কিছু প্রয়োজনীয় তথ্য ধারণা করতে পারেন:

   1. এক্সটার্নাল স্ক্রিপ্ট: জাভাস্ক্রিপ্ট ফাইলটি HTML ফাইলের শেষে <script> ট্যাগের মধ্যে সংযুক্ত করবেন। উদাহরণস্বরূপ:

2. 2. ইনলাইন স্ক্রিপ্ট: যদি আপনি একটি সিঙ্গেল পেজের জন্য জাভাস্ক্রিপ্ট কোড ব্যবহার করছেন, তবে আপনি এটি HTML ফাইলের শেষে <script> ট্যাগের মধ্যে লিখতে পারেন। উদাহরণস্বরূপ:

জাভাস্ক্রিপ্ট কোডের একটি উদাহরণ

একটি উদাহরণ দেওয়া হলো নীচে:

    
    


    
জাভাস্ক্রিপ্ট সংযোজনের উদাহরণ
    

উপরের উদাহরণটি একটি সহজ HTML পৃষ্ঠায় জাভাস্ক্রিপ্ট সংযোগ করার উদাহরণ দেয়। এখানে একটি বাটন আছে যা ক্লিক করার সময় "আপনার নাম কি?" প্রশ্ন প্রদর্শন করবে এবং একটি স্বাগত অ্যালার্ট ম্যাসেজ দেখাবে।

Frequently Asked Questions. জাভাস্ক্রিপ্ট সংযোগ সংক্রান্ত সাধারণ FAQ

এক্সপার্টদের মধ্যে জাভাস্ক্রিপ্ট সংযোগ সংক্রান্ত কিছু সাধারণ প্রশ্ন এবং তাদের উত্তর নিম্নলিখিত হল:

প্রশ্ন 1: আমি কি একটি জাভাস্ক্রিপ্ট ফাইলকে HTML ফাইলের বাইরে সংযুক্ত করতে পারি?

উত্তর: হ্যাঁ, আপনি একটি জাভাস্ক্রিপ্ট ফাইলকে HTML ফাইলের বাইরে সংযুক্ত করতে পারেন। এটি একটি বাছাইকৃত পদ্ধতি যেখানে আপনি একটি <script> ট্যাগ ব্যবহার করে জাভাস্ক্রিপ্ট ফাইলের সংযোগ লিখতে পারেন। উদাহরণস্বরূপ: <script src="script.js"></script>

প্রশ্ন ২: জাভাস্ক্রিপ্ট কোডটি কোথায় লিখতে হবে, <head> বা <body> সেকশনে?

উত্তর: জাভাস্ক্রিপ্ট কোডটি সাধারণত <head> বা <body> সেকশনে লিখা যেতে পারে। আপনি জাভাস্ক্রিপ্ট সংযোগটি যে স্থানে লিখতে চান সেখানে ব্যবহার করতে পারেন। তবে, সাধারণত সম্পূর্ণ HTML পাঠার শুরুতে জাভাস্ক্রিপ্ট সংযোগ করা হয়, যাতে ব্রাউজারটি পৃষ্ঠাটি প্রদর্শন করার আগে জাভাস্ক্রিপ্ট কোডটি লোড করতে পারে।

প্রশ্ন ৩: কিভাবে ইনলাইন জাভাস্ক্রিপ্ট কোড ব্যবহার করতে পারি?

<p>উত্তর: আপনি ইনলাইন জাভাস্ক্রিপ্ট কোড ব্যবহার করতে পারেন। এটির জন্য আপনাকে শুধুমাত্র জাভাস্ক্রিপ্ট কোডটি লিখতে হবে এবং তা হবে আপনার HTML ফাইলের মধ্যে <code>&lt;script&gt;</code> ট্যাগের ভেতরে। এটি বিশেষত সহজ। নিম্নলিখিত উদাহরণটি দেখুন:</p>
<p>&lt;script&gt;<br>&nbsp; &nbsp; alert("স্বাগত!");<br>&lt;/script&gt;</p>

প্রশ্ন ৪: আমি কিভাবে জাভাস্ক্রিপ্ট ফাইলকে একটি HTML ফাইলের সাথে সংযুক্ত করতে পারি?

উত্তর: আপনি জাভাস্ক্রিপ্ট ফাইলকে HTML ফাইলের সাথে সংযুক্ত করতে পারেন। এর জন্য আপনাকে শুধুমাত্র <script> ট্যাগের মধ্যে একটি src অ্যাট্রিবিউট ব্যবহার করতে হবে এবং সেখানে জাভাস্ক্রিপ্ট ফাইলের ঠিকানা দিতে হবে। নিম্নলিখিত উদাহরণটি দেখুন:

<p><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></p>

উপরের উদাহরণটি একটি HTML পৃষ্ঠায় জাভাস্ক্রিপ্ট ফাইলের সংযোগ করার উদাহরণ দেয়। এটি করে জাভাস্ক্রিপ্ট ফাইলের কোডগুলি আপনার HTML পৃষ্ঠায় লোড করা হয়।

আশা করি উপরের সাধারণ FAQ আপনার বিভিন্ন জাভাস্ক্রিপ্ট সংযোগ সংক্রান্ত প্রশ্নগুলির উত্তর দিয়েছে। যদি আপনার অন্যকোনো প্রশ্ন থাকে বা সাহায্য প্রয়োজন হয়, তবে অনুগ্রহ করে জানান আমি আপনাকে সাহায্য করতে প্রস্তুত।

>সমাপ্তি

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