এই টিউটোরিয়াল অংশটি মুলত জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষার মূল বিষয় সমূহ নিয়ে।
কিন্তু আমাদের স্ক্রিপ্টগুলো চালানোর জন্য একটি কাজের পরিবেশ দরকার এবং যেহেতু এই বইটি অনলাইনে রয়েছে, তাই ব্রাউজার একটি ভাল পছন্দ হবে। আমরা ব্রাউজার-নির্দিষ্ট কমান্ড গুলো (যেমনঃ এলার্ট) সর্বনিম্ন পরিমান রাখবো যাতে করে এতে আপনাদের সময় নষ্ট না হয়, যদি আপনারা অন্য পরিবেশে মনোনিবেশ করার পরিকল্পনা করে থাকেন(যেমনঃ Node.js)। আমরা এই টিউটরিয়ালের পরবর্তী অংশে ব্রাউজারে জাভাস্ক্রিপ্ট উপর গুরুত্ব দিব।
তাই প্রথমে, চলুন আমরা দেখি কিভাবে ওয়েবপেজে একটি স্ক্রিপ্ট সংযুক্ত করে। সার্ভার-সাইড পরিবেশ গুলোর জন্য (যেমনঃ Node.js), আপনি একটা কমান্ড দিয়ে স্ক্রিপ্ট চালাতে পারবেন "node my.js" এর মত করে।
জাভাস্ক্রিপ্ট এর কার্যক্রম গুলো এইচটিএমএল ডকুমেন্টের যেকোনো অংশে রাখা যেতে পারে <script> ট্যাগের সাহায্য নিয়ে।
উদাহরণস্বরূপ:
<!DOCTYPE HTML>
<html>
<body>
<p>স্ক্রিপ্টের আগে...</p>
*!*
<script>
alert( 'হ্যালো, বিশ্ব!' );
</script>
*/!*
<p>...স্ক্রিপ্টের পরে.</p>
</body>
</html>বক্সের উপরের ডান পাশের মাথায় "প্লে" বাটনের ক্লিক করে আপনি উদাহরণটি চালিয়ে দেখতে পারেন।
<script> ট্যাগটি জাভাস্ক্রিপ্ট কোড ধারন করে যেটাকে স্বয়ংক্রিয়ভাবে কার্যকর করা হয় যখন ব্রাউজার ট্যাগটি প্রসেস করে।
<script> ট্যাগে কয়েকটি এট্রিবিউট রয়েছে যেটা আজকাল খুব কম ব্যবহার করা হয় কিন্তু কিছু পুরনো কোডে এখনও এইগুলো পাওয়া যেতে পারে:
<<<<<<< HEAD
type এট্রিবিউট: <script type=...>
: পুরানো এইচটিএমএল স্ট্যান্ডার্ড, এইচটিএমএল ৪ এ একটি স্ক্রিপ্টে type এট্রিবিউটটি থাকা আবশ্যক ছিল। সাধারনত এটা ছিল type="text/javascript"। এটি আর প্রয়োজন হয় না। আরও বলতে গেলে, আধুনিক এইচটিএমএল স্ট্যান্ডার্ড এ পুরোপুরিভাবে এট্রিবিউটসের অর্থই বদলে দিয়েছে। এখন, এটা জাভাস্ক্রিপ্ট মডিউলস এর জন্য ব্যবহার করা যেতে পারে। কিন্তু এটা একটি অ্যাডভান্সড বিষয়, আমরা মডিউলস সম্পর্কে টিউটরিয়ালের অন্য অংশে কথা বলব।
The type attribute: <script type=...>
: The old HTML standard, HTML4, required a script to have a type. Usually it was type="text/javascript". It's not required anymore. Also, the modern HTML standard totally changed the meaning of this attribute. Now, it can be used for JavaScript modules. But that's an advanced topic, we'll talk about modules in another part of the tutorial.
c89ddc5d92195e08e2c32e30526fdb755fec4622
language এট্রিবিউট: <script language=...>
: এই এট্রিবিউটটি স্ক্রিপ্টের ভাষা দেখানোর জন্য বুঝানো হয়েছে। এই এট্রিবিউটটি দিয়ে এখন আর কিছু হয় না কারন জাভাস্ক্রিপ্টই এখন ডিফল্ট ভাষা। এটা ব্যবহার করার এখন আর প্রয়োজন নেই।
স্ক্রিপ্টগুলির আগে এবং পরে মন্তব্যগুলিঃ
সত্যিই পুরনো বই এবং গাইডগুলিতে, আপনারা হয়তো <script> ট্যাগগুলোর মধ্যে মন্তব্যগুলি পেতে পারেন, এটার মতঃ
```html no-beautify
<script type="text/javascript"><!--
...
//--></script>
```
আধুনিক জাভাস্ক্রিপ্টে এই কৌশলটি আর ব্যবহার করা হয় না। এই মন্তব্যগুলি জাভাস্ক্রিপ্ট কোডগুলো কে লুকিয়ে রাখে পুরনো ব্রাউজার গুলো থেকে যারা জানে না কিভাবে `<script>` ট্যাগকে প্রসেস করতে হয়।
যেহেতু গত 15 বছরে প্রকাশিত ব্রাউজারগুলিতে এই সমস্যাটি নেই, এই জাতীয় মন্তব্য আপনাকে অনেক পুরানো কোড সনাক্ত করতে সহায়তা করতে পারে।
যদি আমাদের অনেক জাভাস্ক্রিপ্ট কোড থাকে, তাহলে আমরা এইগুলোকে আলাদা ফাইলে রাখতে পারি।
স্ক্রিপ্ট ফাইল গুলো এইচটিএমএল এ সংযুক্ত করা হয় src এট্রিবিউট দিয়েঃ
<script src="/path/to/script.js"></script>এখানে, /path/to/script.js এই পথটি হয় সাইট এর মূল থেকে স্ক্রিপ্টের জন্য একটি সঠিক পথ। বর্তমান পৃষ্ঠা থেকে যে কেউ আপেক্ষিক পথ সরবরাহ করতে পারে. উদাহরণস্বরূপ, src="script.js" এই "script.js" ফাইল দিয়ে বর্তমান ফোল্ডার থেকে বুঝায়।
আমরা পুরো URL টিও দিতে পারি। উদাহরণস্বরূপ:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>একাধিক ট্যাগ ব্যবহার করে, একাধিক স্ক্রিপ্টগুলো সংযুক্ত করতে পারিঃ
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…বেশিরভাগ ক্ষেত্রেই, শুধু মাত্র সহজ স্ক্রিপ্ট গুলোই এইচটিএমএল এর মধ্যে রাখা হয় এবং অনেক জটিল গুলোকে আলাদা ফাইলে রাখা হয়।
বিভিন্ন ফাইলে রাখার সুবিধাগুলো হল, ব্রাউজার এটাকে ডাউনলোড করে রাখবে এবং [cache](https://en.wikipedia.org/wiki/Web_cache) হিসেবে রেখে দিবে।
অন্যান্য পেইজ যা একই স্ক্রিপ্টকেই উল্লেখ করে এটি ডাউনলোড করার পরিবর্তে এটি ক্যাশে থেকে নেবে, সুতরাং ফাইলটি শুধু মাত্র একবারই ডাউনলোড করা হবে।
যা ট্রাফিক কমায় এবং পেজকে অনেক দ্রুততর করে।
````warn header="যদি src সেট করা হয়, তাহলে স্ক্রিপ্টের ভিতরের কন্টেন্ট গুলো উপেক্ষিত হবে।"
একটি একক `<script>` ট্যাগে কখনই একাধিক `src` এট্রিবিউট এবং ভিতরে কোড থাকতে পারে না।
এটা কাজ করবে না:
<script *!*src*/!*="file.js">
alert(1); // the content is ignored, because src is set
</script>আমাদের অবশই বাছাই করতে হবে হয় বহিরাগত <script src="…"> অথবা স্বাভাবিক <script> ট্যাগ এর ভেতরে কোড।
উপরের উদাহরণটি কাজ করাতে দুইটি স্ক্রিপ্টে বিভক্ত করা যেতে পারে।
<script src="file.js"></script>
<script>
alert(1);
</script>
## সারাংশ
- আমরা একটি পেজে জাভাস্ক্রিপ্ট যোগ করতে `<script>` ট্যাগ ব্যবহার করতে পারি ।
- `type` এবং `language` এট্রিবিউটসের এখন আর প্রয়োজন নেই।
- আলাদা ফাইলের স্ক্রিপ্টগুলো `<script src="path/to/script.js"></script>` এইভাবে রাখা যেতে পারে।
ব্রাউজার স্ক্রিপ্ট এবং ওয়েবপেজের সাথে এদের ইন্টারেকশন সম্পর্কে অনেক কিছু শেখার আছে। তবে, মাথায় রাখা উচিত যে টিউটোরিয়ালটির এই অংশটি উৎসর্গ করা হয় জাভাস্ক্রিপ্ট ভাষার প্রতি, তাই এটির ব্রাউজার-নির্দিষ্ট বাস্তবায়ন দেখে আমাদের নিজেদেরকে বিভ্রান্ত করা উচিত হবে না। আমরা ব্রাউজার শুধু জাভাস্ক্রিপ্ট চালানোর জন্য ব্যবহার করবো, যেটা অনলাইনে পড়ার জন্য সহজ। কিন্তু এটি অনেকগুলি উপায়ের মধ্যে একটি।