JavaScript
JavaScrpt কি?
JavaScrpt যেটাকে আমরা সংক্ষেপে JS নামেই চিনি , যা একটি লাইট ওয়েট, ইন্টারপ্রেটেড (অর্থাৎ কম্পাইল করার প্রয়োজন নেই) এবং prototype-based, মাল্টি প্যারাডাইম, ডাইনামিক স্ক্রিপ্টিং ল্যাঙ্গুয়েজ যা একাধারে object-oriented, imperative, এবং declarative তথা functional programming স্টাইল সাপোর্ট করে।
যদিও জাভাস্ক্রিপ্টকে একটি ক্লাইন্ট সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ বা ব্রাউজার স্ক্রিপ্টিং ল্যাঙ্গুয়েজ বলা হয় কিন্তু বর্তমানে জাভাস্ক্রিপ্ট ক্লায়েন্ট সাইড অর্থাৎ ব্রাউজার এর বাহিরে সার্ভার সাইড ও নেটওয়ার্ক প্রোগ্রামিং, মোবাইল ও ডেস্কটপ অ্যাপ ডেভেলপমেন্ট, গেইম ডেভেলপমেন্ট থেকে শুরু করে ইন্টারনেট অব থিংস, মেশিন লার্নিং সহ আরো অনেক কাজেই ব্যবহৃত হচ্ছে । আর এটাকে ইন্টারমেডিয়েট ল্যাঙ্গুয়েজ ধরে এর উপর তৈরি হয়েছে বেশ কিছু যেমন CoffeeScript, TypeScript এর মতো সাব ল্যাঙ্গুয়েজ, এ ছাড়াও Apache CouchDB, MongoDB ইত্যাদি ডাটাবেইজ গুলো তাদের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ এবং কুয়েরী ল্যাঙ্গুয়েজ হিসেবে জাভাস্ক্রিপ্ট ব্যবহার করে। আর node.js তো জাভাস্ক্রিপ্টকে ভিত্তি করে পরিপূর্ন Desktop এবং Server Side Scripting Language হিসেবে নিজেকে প্রতিষ্ঠিত করেছে । এছাড়াও জাভাস্ক্রিপ্ট এর উপর ভিত্তি করে তৈরি হাজার হাজার লাইব্রেরী এবং ফ্রেমওয়ার্ক যেমন – AngularJS, VueJS, ReactJS, Express, JQuery বদলে দিয়েছে সফটওয়্যার ডেভেলপমেন্ট এর চেহারা। এবং Cross Mobile Platform গুলো যেমন Vue Native, React Native যেগুলো বদলে দিয়েছে Mobile Apps ডেভেলপমেন্ট এর ধারণা।
JavaScript এর
সংক্ষিপ্ত পরিচিতি
১৯৯৫ সালে নেটস্কেপের প্রকৌশলী Brendan Eich জাভাস্ক্রিপ্ট তৈরি করেন, যা মুক্তি পায় ১৯৯৬ সালের শুরুর দিকে নেটস্কেপ ২ (ব্রাউজার) এর সাথে। এর নাম দেয়া হয়েছিল LiveScript, কিন্তু মার্কেটিং কৌশলের অংশ হিসেবে সান মাইক্রোসিস্টেম এর জাভা ল্যাংগুয়েজের জনপ্রিয়তাকে পুঁজি করার জন্য, জাভা আর জাভাস্ক্রিপ্টের মাঝে তেমন কোন মিল না থাকা সত্ত্বেও এর নাম রাখা হয় জাভাস্ক্রিপ্ট । মাইক্রোসফট এই প্রোগ্রামিং ভাষার সাথে প্রায় মিলে যায় এরকম একটি ল্যাংগুয়েজ JScript নাম দিয়ে প্রায় ৩ মাস পর ইন্টারনেট এক্সপ্লোরারের সাথে বাজারে নিয়ে আসে। এদিকে নেটস্কেপ Ecma International (স্ট্যান্ডার্ড নির্ধারণ করে এরকম একটি ইউরোপীয়ান সংস্থা) এর কাছে ল্যাংগুয়েজটি উপস্থাপন করে – যার ফলাফল ১৯৯৭ সালে ECMAScript এর প্রথম সংস্করণ হিসেবে বাজারে আসে। ১৯৯৯ সালে এই স্ট্যান্ডার্ডটি আরো উন্নত হয় ECMAScript সংস্করণ ৩ হিসেবে – আর সেই থেকে ভাষাটির তেমন কোন বড় পরিবর্তন হয়নি। চতুর্থ সংস্করণটি ভেস্তে যায়, ভাষাটির জটিলতা নিয়ে মতবিরোধের ফলাফল হিসেবে। তবে এই চতুর্থ সংস্করণের অনেক অংশবিশেষ কে ভিত্তি হিসেবে ধরে ২০০৯ সালে নতুন ECMAScript এর পঞ্চম সংস্করণ প্রকাশ করা হয়। সর্বশেষ ২০১৫ সালের ১৭ জুন ECMA International তার ষষ্ঠ প্রধান সংস্করণ প্রকাশ করে, আনুষ্ঠানিক ভাবে যা ECMAScript 2015 নামে অভিহিত, এবং বর্তমানে এটি ECMAScript 6 বা ES6 নামে পরিচিত।
How to Write JS
JavaScript কে HTML Page এর মধ্যে <script> start tag এবং </script> end tag এর মধ্যে লিখে যেমন রান করা যায় , আবার আপনি চাইলে .js extension যুক্ত যেকোনো file এ লিখে সেটিকে পরবর্তীতে অন্য যেকোনো file যেমন .php, .html, .asp, .py সহ আরো অনেক ল্যাংগুয়েজ ফাইল এ সংযুক্তির মাধ্যমে সেই জাভাস্ক্রিপ্টকে রান করতে পারেন। এছাড়া যেকোনো html tag এর মধ্যে লিখেও আপনি JavaScript কে রান করতে পারেন। তো চলুন তিনটা পদ্ধতিই দেখা যাক:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h2>Hello JavaScript</h2>");
</script>
</body>
</html>
সরাসরি
html tag এর মধ্যে
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('p').innerHTML = 'Hello World!'">Just Click Me</button>
<button onclick="alert('Hey Dear!')">Click Again</button>
<p id="p">Hello Bangladesh</p>
</body>
</html>
.js extension যুক্ত
যেকোনো file
function changeMe(){
document.getElementById('p').innerHTML = 'Hello World!';
}
function getAlert(){
alert('Hey Dear!');
}
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
test.html file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="changeMe()">Just Click Me</button>
<button onclick="getAlert()">Click Again</button>
<p id="p">Hello Bangladesh</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src=“assets/js/script.js"></script>
</html>
JavaScript এর
Output কে কয়ভাবে দেখানো যায়
- window.alert() ব্যবহার করে এলার্ট বক্সের মাধ্যমে
- document.write() ব্যবহার করে এইচটিএমএল ডকুমেন্টে লিখে
- .innerHTML ব্যবহার করে এইচটিএলএল এলিমেন্টে লিখে
- console.log() ব্যবহার করে ব্রাউজার কনসোলের মধ্যে দেখানো যায়
window.alert() ব্যবহার
<!DOCTYPE html>
<html>
<body>
<script>
window.alert("Hello I'm From w3programmers.com");
</script>
</body>
</html>
document.write() ব্যবহার
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<b>Hey! do you know? It's Best Platform to learn JavaScript!</b>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="document.write(5 + 6)">click for Summation</button>
</body>
</html>
innerHTML ব্যবহার
HTML Element কে access করার জন্য JavaScript এ document নামক class এর getElementById() Method টি ব্যবহৃত হয়।
HTML এর ট্যাগ গুলোর id এট্রিবিউটটি HTML এর একটা নির্দিষ্ট এলিমেন্টকে নির্দেশ করে এবং innerHTML Property এর মাধ্যমে যেকোনো HTML কন্টেন্টকে নির্দেশ করতে পারে। চলুন একটা উদাহরণ দিয়ে বুঝে নেয়া যাক:
<!DOCTYPE html>
<html>
<body>
<p id="sum"></p>
<script>
document.getElementById("sum").innerHTML = 5 + 6;
</script>
</body>
</html>
console.log () ব্যবহার
JavaScript Code গুলোকে ডিবাগিং করার জন্য অনেক সময় আমাদেরকে বিভিন্ন রকমের তথ্য প্রদর্শন করতে হয় , তখন আমরা এর console Class এর log () মেথডটি ব্যবহার করি। অবশ্য এর জন্য আপনাকে F12 এর মাধ্যমে ব্রাউজার কনসোল সক্রিয় করতে হবে অথবা মেনু থেকে “Console” নির্বাচন করতে হবে। অথবা সরাসরি Ctrl+Shift+I ব্যবহার করতে পারেন। চলুন উদাহরণে দেখা যাক:
<!DOCTYPE html>
<html>
<body>
<p>অবশ্য এর জন্য আপনাকে F12 এর মাধ্যমে ব্রাউজার কনসোল সক্রিয় করতে হবে অথবা মেনু থেকে "Console" নির্বাচন করতে হবে। অথবা সরাসরি Ctrl+Shift+I ব্যবহার করতে পারেন।</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
0 Comments