জাভাস্ত্রিপ্ট এর সাহায্যে নিচের কাজগুলো এর যায়।
- ঘরি
- Mouse Trailers ( site ব্রাউজ এর সময় মাউস এ সৃষ্ট এনিমেশন)
- ড্রপডাউন মেনু
- Alert মেসেজ
- পপআপ উইন্ডো
- ফর্ম ভেলিডেশন
- স্লাইড শো
- চলন্ত খবর
- আরও অনেক…
| জাভাস্ক্রিপ্ট কিভাবে লিখতে হয় (Javascript Syntax Tutorial in Bangla) |
তিনটি গুরুত্বপুর্ন ধাপ রয়েছে যা আপনাদের জাভাস্ক্রিপ্ট লেখার ক্ষেত্রে প্রয়োজন ।
আপনার প্রথম জাভাস্ক্রিপ্ট কোড আমাদের প্রথম ধাপ হচ্ছে <script> ট্যাগ ব্যবহারের মাধ্যমে ব্রাউজার কে বোঝাতে হবে যে আমরা জাভাস্ক্রিপ্ট ব্যবহার করছি। script type হিসাবে “text/JavaScript” সেট করতে হবে। আপনারা সিএসএস এর ক্ষেত্রে দেখেছেন type হিসাবে আমরা “text/css” সেট করছি। 01.<html> 02.<body> 03.<script type=”text/JavaScript”> 04.<!– 05.document.write(“Hello World!”) 06.//–> 07.</script> 08.</body> 09.</html> প্রদর্শন: Hello world! document.write: আমাদের script এর শেষ ধাপ হচ্ছে ফাংশন এর ব্যবহার যার নাম document.write ।যার মাধ্যমে text, HTML অথবা ঊভয়ই লেখা যায়। আমরা এই ফাংশন এ একটা বিখ্যাত text string ব্যবহার করেছি যা ”Hello World!” নামে পরিচিত। এটি ব্রাউজার এ প্রদর্শিত হবে। Syntax বা চিহ্ন: উপরের জাভাস্ত্রিপ্ট কোড লক্ষ্য করলে দেখতে পাবেন যে “document.write(Hello World!)” এই statement এর শেষে কোন সেমিকোলন নেই। কারন প্রত্যেক statement এর শেষ নির্দেশ করতে জাভাস্ত্রিপ্ট এ সেমিকোলন এর প্রয়োজন নেই। তবে আপনি যদি অভিজ্ঞ প্রোগ্রামার হয়ে থাকেন তবে সেক্ষেত্রে ব্যবহার করতে পারেন। তবে সেমিকোলন ব্যবহার করা জরুরী যখন আমরা এক লাইনে দুটি statement ( দুটি document.write statements ) লিখি। |
| জাভাস্ক্রিপ্ট সক্রিয় করা (JavaScript Enable Tutorial in Bangla) |
| এ অধ্যায়ে আপনাদের দেখাবো কিভাবে জাভাস্ত্রিপ্ট ইন্টারনেট এক্সপ্লোরার,ফায়ারফক্স, এবং অপেরা তে সচল (active) করতে হয়।জাভাস্ক্রিপ্ট কে ইন্টারনেট এক্সপ্লোরার- এ সচল করারপদ্ধতি: Internet Explorer 6/7 এ আপনি security setting এ গিয়ে check করতে পারেন যে আপনার জাভাস্ত্রিপ্টটি কি সচল রয়েছে কিনা। নিচে জাভাস্ত্রিপ্ট সচল করার উপায় দেয়া হলো। ১ প্রথমে Tools menu তে Click করতে হবে ২ তারপর menu হতে Internet Options নির্বাচন করতে হবে ৩ Internet Options এর Security tab এ Click করতে হবে ৪ তারপর Custom Level বাটনে Click করে security settings এ প্রবেশ করতে হবে ৫ Scroll করে Scripting section এ যেতে হবে ৬ script সচল করা জন্য Enable বাটন Select করতে হবে ৭ প্রক্রিয়াটি সম্পন্ন করতে OK বাটনে Click করতে হবে ৮ করার জন্য Yes বাটনে Click করতে হবে জাভাস্ক্রিপ্ট কে ফায়ারফক্স- এ সচল করারপদ্ধতি: Firefox 2 এ আপনি Options এর Content setting এ গিয়ে check করতে পারেন যে আপনার জাভাস্ত্রিপ্টটি কি সচল রয়েছে কিনা। নিচে জাভাস্ত্রিপ্ট সচল করার উপায় দেয়া হলো। ১ প্রথমে Tools menu তে Click করতে হবে ২ তারপর menu হতে Options নির্বাচন করতে হবে ৩ Options এর Content tab এ Click করতে হবে ৪ নিশ্চিত করুন যে Enable JavaScript check box এ টিক দেয়া আছে কিনা ৫ প্রক্রিয়াটি সম্পন্ন করতে OK বাটনে Click করতে হবে জাভাস্ক্রিপ্ট কে অপেরা – তে সচল করারপদ্ধতি: Opera তে আপনি Preferences এর Content setting এ গিয়ে check করতে পারেন যে আপনার জাভাস্ত্রিপ্টটি কি সচল রয়েছে কিনা। নিচে জাভাস্ত্রিপ্ট সচল করার উপায় দেয়া হলো। ১ প্রথমে Tools menu তে Click করতে হবে ২ তারপর menu হতে Preferences নির্বাচন করতে হবে ৩ Preferences এর Advanced tab এ Click করতে হবে ৪ বাম পাশের লিস্ট item হতে Content নির্বাচন করতে হবে ৫ নিশ্চিত করুন যে Enable JavaScript check box এ টিক দেয়া আছে কিনা ৬ প্রক্রিয়াটি সম্পন্ন করতে OK বাটনে Click করতে হবে |
| জাভাস্ক্রিপ্ট কোড কোথায় থাকবে (Where To place Javascript Code) |
| তিনটি সাধারন অবস্থান রয়েছে যেখানে জাভাস্ক্রিপ্ট কোডকে রাখা যায় ।১ head ট্যাগ এর ভিতরে ২ body ট্যাগ এর মধ্যে ৩ বহিঃস্থ (external) file হিসাবে head or body এর অবস্থান পছন্দ করা খুব সাধারন। যদি আপনি চান জাভাস্ক্রিপ্ট কে কিছু event (যেমন যখন কোন ব্যবহারকারী কোন স্থানে ক্লিক করবে, event সম্বন্ধে আলোচনা করা হয়েছে) এর উপর রান করাবেন সেক্ষেত্রে আপনি জাভাস্ক্রিপ্ট কে head ট্যাগ এ রাখতে পারেন। আবার যদি আপনি জাভাস্ক্রিপ্ট কে রান করাতে চান যখন পেজ লোড হবে (পুর্ববতি অধ্যায়ের “Hello World!” উদাহরনের মত),সেক্ষেত্রে আপনি জাভাস্ক্রিপ্ট কে body ট্যাগ এর মধ্যে রাখতে পারেন। বহিঃস্থ (External) জাভাস্ক্রিপ্ট ফাইল এবং তাদের ব্যবহার পরবর্তি অধ্যায়ে আলোচনা করা হয়েছে । Head Script এর উদাহরন: যেহেতু আমরা দেখেছি যে এক প্রকারের Script যা body tag এর মধ্যে লেখা যায়। আমরা কিছু Script লিখবো যার মাধ্যমে কিছু event সংঘটিত হবে ।যেমন ব্যবহারকারী যখন বাটনে ক্লিক করবে তখন alert box দেখাবে। 01.<html> 02.<head> 03.<script type=”text/JavaScript”> 04.<!– 05.function popup() { 06.alert(“Hello World”) 07.} 08.//–> 09.</script> 10.</head> 11.<body> 12.<input type=”button” onclick=”popup()” value=”popup”> 13.</body> 14.</html> প্রদর্শন: আমরা একটা ফাংশন তৈরী করেছি যার নাম পপআপ এবং এটাকে এইচটিএমএল ডকুমেন্ট এর head ট্যাগ এ রেখেছি ।এখন আমরা যতবারই বাটনে ক্লিক করবো ততবারই “Hello World!” নামের alert box দেখাবে। পরবর্তি অধ্যায়গুলিতে ফাংশন এবং event সম্বন্ধে বিস্তারিত আলোচনা করা হয়েছে । |
| বহি:স্থ বা এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল (External JavaScript File Tutorial in Bangla) |
| এইচটিএমএল ডকুমেন্ট এর head এবং body ট্যাগ এ জাভাস্ক্রিপ্ট এর অবস্থান পুর্ববর্তি অধ্যায়ে আলোচনা করা হয়েছে । এখন আমরা আলোচনা করবো তৃতীয় অবস্থান সম্পর্কে যা হচ্ছে external জাভাস্ক্রিপ্ট file ।বহি:স্থ (External) জাভাস্ক্রিপ্ট ফাইল ইমপোর্ট করার নিয়ম: external জাভাস্ক্রিপ্ট file Import করা ঝামেলামুক্ত কাজ। প্রথমত যে ফাইলটিকে Import করবেন সেটা বৈধ এবং শুধুমাত্র জাভাস্ক্রিপ্ট file হতে হবে।দ্বিতীয়ত ফাইল extension টি অবশ্যই “.js” হতে হবে ।পরিশেষে আপনাকে অবশ্যই file এর অবস্থান জানতে হবে। ধরা যাক “myjs.js” নামের আমাদের একটি file আছে যা এক লাইনের Hello World নামের alert function টি ধারন করছে।আরও ধরা যাক HTML file এবং জাভাস্ক্রিপ্ট file একই directory তে আছে। myjs.js নামের জাভাস্ক্রিপ্ট file : 1.function popup() { 2.alert(“Hello World”) 3.} 01.<html> 02.<head> 03.<script src=”/myjs.js”> 04.</script> 05.</head> 06.<body> 07.<input type=”button” onclick=”popup()” value=”Click Me!”> 08.</body> 09.</html> প্রদর্শন: কিছু Tips: ১ আপনি যদি একই Script বিভিন্ন পেজে ব্যবহার করতে চান তাহলে external জাভাস্ক্রিপ্ট file ব্যবহার করতে পারেন।এর ফলে একই কোড প্রত্যেক পেজের জন্য লেখার প্রয়োজন নেই। ২ উভয় ধরনের Script এর জন্য external জাভাস্ক্রিপ্ট file ব্যবহার করা যায় যেমন এমন টাইপ যা head tag (functions) এ রাখা হয় আরেক টাইপ যা body tag এ রাখা হয়। ৩ আপনাকে নিশ্চিত করতে হবে যে external জাভাস্ক্রিপ্ট file এ <script> tag অর্ন্তভুক্ত হবে না। সেখানে শুধুমাত্র HTML comment এবং জাভাস্ক্রিপ্ট code ছাড়া আর কিছু থাকবে না। |
| জাভাস্ক্রিপ্ট অপারেটর টিউটোরিয়াল (JavaScript Operator Tutorial in Bangla) |
অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ এর অপারেটর এর সাথে জাভাস্ক্রিপ্ট অপারেটর এর মিল আছে। অপারেটর হচ্ছে এমন একটি symbol(প্রতীক) যা কোন গানিতীক কাজ করতে ব্যবহ্ণত হয়। বেশির ভাগ ক্ষেত্রে কাজগুলো হচ্ছে পাটিগনিতীয়( arithmetic) যেমন যোগ, বিয়োগ ইত্যাদি তবে সবক্ষেত্রে নয়।জাভাস্ক্রিপ্ট এর পাটিগনিতীয় অপারেটর এর তালিকা:
নিচে একটা সাধারন উদাহরন দেয়া হলো যেখানে মৌলিক পাটিগনিতীয় কার্য সম্পন্ন হয়েছে । 01.<body> 02.<script type=”text/JavaScript”> 03.<!– 04.var two = 2 05.var ten = 10 06.var linebreak = “<br />” 07. 08.document.write(“two plus ten = “) 09.var result = two + ten 10.document.write(result) 11.document.write(linebreak) 12. 13. 14.document.write(“ten * ten = “) 15.result = ten * ten 16.document.write(result) 17.document.write(linebreak) 18. 19.document.write(“ten / two = “) 20.result = ten / two 21.document.write(result) 22.//–> 23.</script> 24.</body> প্রদর্শন: two plus ten = 12 ten * ten = 100 ten / two = 5 Comparison অপারেটর: variables বা values এর মধ্যে সম্পর্ক নির্ণয় করতে Comparison অপারেটর ব্যবহ্নত হয়। একটা equal চিহ্ন যে ভেলু সেট করে আর double equal চিহ্ন (==) দুটি ভেলুর মধ্যের তুলনা করে Comparison অপারেটর যা conditional statement এর ভিতরে ব্যবহ্নত হয় এবং সত্য, মিথ্যা নির্ণয় করে। conditional statement সম্বন্ধে পরবর্তি অধ্যায়ে আলোচনা করা হয়েছে ।
|
| জাভাস্ক্রিপ্ট ভেরিয়েবল টিউটোরিয়াল (JavaScript Variable Tutorial in Bangla) |
| লেখক মো:ফেরদৌস আলম |
| ভেরিয়েবল হল একটা প্রতীকি (symbolic) নাম যা আপনার নির্দিষ্ট করে দেয়া ভেলুকে উপস্থাপন করে। ভেরিয়েবল এর উদ্দেশ্য হচ্ছে আপনার তথ্যকে জমা রাখা যাতে আপনি পরবর্তিতে তা ব্যবহার করতে পারেন। ভেরিয়েবল নামকে যদি আমরা একটা সবজি ব্যাগের সাথে তুলনা করি তাহলে এই ব্যাগের সবজিকে ড্যাটার (data)সাথে তুলনা করা যায়। Variable নাম ( name) দ্বারা ড্যাটা মোড়ানো থাকে যাতে আপনি সহজে এটাকে move করাতে পারেন। ভেরিয়েবল এর উদাহরন: প্রথমবার ভেরিয়েবল ব্যবহারের ক্ষেত্রে ভেরিয়েবল নামের পুর্বে “var” লেখা জরুরী নয় তবে ভাল programming practice এর জন্য প্রথমবার ভেরিয়েবল নামের পুর্বে “var” লেখা উচিত।নিচে উদাহরনের মাধ্যমে বিষয়টি পরিস্কার করা হল। 01.<body> 02.<script type=”text/JavaScript”> 03.<!– 04.var linebreak = “<br />” 05.var my_var = “Hello World!” 06. 07.document.write(my_var) 08.document.write(linebreak) 09. 10.my_var = “I am learning JavaScript!” 11.document.write(my_var) 12.document.write(linebreak) 13. 14.my_var = “Script is Finishing up…” 15.document.write(my_var) 16.//–> 17.</script> 18.</body> প্রদর্শন: Hello World! I am learning JavaScript! Script is Finishing up… উপরের উদাহরনে আমরা দুটি ভেরিয়েবল তৈরী করেছি যার একটি লাইন ব্রেকের জন্য HTML কে ধরেছে অপরটি হচ্ছে ডাইনামিক ভেরিয়েবল যার উপরের script এর মধ্যে তিনটি ভিন্ন ধরনের ভেলু রয়েছে। ভেরিয়েবল এর ভেলু নির্দিষ্ট করতে সমান চিহ্ন (=) ব্যবহার করতে হবে। যেখানে বাম পাশে থাকবে ভেরিয়েবল এবং ডান পাশে থাকবে ভেরিয়েবল এর ভেলু। যেমন my_var = “Hello World!” এর মানে হচ্ছে my_var সমান “Hello World!” । ভেরিয়েবল এবং এর ভেলু বসানোর order ঠিক রাখতে হবে অথাৎ প্রথমে ভেরিয়েবল এর নাম পরে ভেরিয়েবল এর ভেলু তা না হলে script ঠিকমত কাজ করবে না। জাভাস্ক্রিপ্ট ভেরিয়েবল নামের নিয়মনীতি: যখন আপনি ভেরিয়েবল নাম ( name)পছন্দ করবেন তখন অবশ্যই লক্ষ্য রাখতে হবে নামটি যেন জাভাস্ক্রিপ্ট এর reserve নাম না হয়। ভেরিয়েবল নাম (name)পছন্দের ভাল practice হল বণর্নামূলক নামের ব্যবহার যেন নামটি ভেরিয়েবল ভেলুকে এক কথায় নির্দেশ করে। যেমন ধরুন আপনার ভেরিয়েবল ভেলু জুতার সাইজকে নির্দেশ করছে সেক্ষেত্রে ভেরিয়েবল নাম দিতে পারেন “shoe_size”। যা খুব সহজে পড়া এবং বোঝা যাবে। জাভাস্ক্রিপ্ট ভেরিয়েবল নাম সংখ্যা(০-৯) দিয়ে শুরু হবে না। যা ব্যবহার করা বৈধ নয়। যেমন: 7lucky, 99bottle এবং 3charm । সবচেয়ে ভাল হয় ভেরিয়েবল নাম কে ছোট হাতের বর্ণ দিয়ে শুরু করা এবং ভেরিয়েবল নাম যদি একের অধিক শব্দ বিশিস্ট হয় তাহলে শব্দগুলোকে underscore দিয়ে পৃথক করতে হয়।যেমন: my_var, strong_man, happy_coder ইত্যাদি। |
| জাভাস্ক্রিপ্ট ফাংশন টিউটোরিয়াল (JavaScript Function Tutorial in Bangla) |
| যদি আপনার কোন প্রোগ্রামিং এর অভিজ্ঞতা থাকে তাহলে এই অধ্যায়টি শিখতে কম সময় লাগবে। অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজের (সি, মি++,পিএইচপি ইত্যাদি) ফাংশন এর মত জাভাস্ক্রিপ্ট এর ফাংশন প্রায়ই একই। এটি যদি আপনার ফাংশন শেখার প্রথমবার হয়ে থাকে তাহলে এই অধ্যায়টি খুব মনোযোগ সহকারে পড়া উচিত।ফাংশন কি? ফাংশন হল এক টুকরা কোড যা সুপ্ত অবস্থায় থাকে যতক্ষণ পযর্ন্ত না তাকে কাজ করতে বলা হয়। পুনরাবৃত্তি কাজের ক্ষেত্রে ফাংশন অনেক সময় বাচাঁয় । ফাংশন এর মাধ্যমে একই কোড বার বার না লিখে একই কাজ বার বার করা যায় । জাভাস্ক্রিপ্ট ফাংশন এর উদাহরন: ফাংশন কে এইচটিএমএল ডকুমেন্ট এর head ট্যাগ এর ভিতরে রাখা উচিত। ফাংশন তৈরী করা খুব সহজ। প্রথমে ফাংশন এর নাম দিতে হবে তারপর সাধারন জাভাস্ক্রিপ্ট কোড লিখতে হবে ।নিচে উদাহরনের মাধ্যমে বিষয়টি পরিস্কার করা হল। 01.<html> 02.<head> 03.<script type=”text/javascript”> 04.< 05.function popup() { 06.alert(“Hello World”) 07.} 08.> 09.</script> 10.</head> 11.<body> 12.<input type=”button” onclick=”popup()” value=”popup”> 13.</body> 14.</html> প্রদর্শন: ফাংশন কথাটি লেখার মাধ্যমে browser কে বুঝিয়েছি যে আমরা ফাংশন ব্যবহার করতে যাচ্ছি। তারপর আমরা ফাংশন এর নাম দিয়েছি যাতে এটাকে পরবর্তিতে ব্যবহার করতে পারি। যেহেতু আমরা pop up alert তৈরী করেছি ফলে এই ফাংশন কে “popup” ফাংশন বলে ডাকতে পারি। এই “{,}” ব্রাকেটটি আমাদের ফাংশন কোড এর সীমানা নির্ধারন করে। সকল popup ফাংশন এর কোড এই ব্রাকেটের ভিতরে লেখা হয় । সাধারনত একটা বিষয় এলোমেলো লাগতে পারে যে আমরা কিভাবে popup ফাংশন এর ভিতরে আরেকটি alert ফাংশন ব্যবহার করলাম। এই alert ফাংশন টি আমাদের লেখাকে popup box সহ প্রদর্শন করে।এটাই হল ফাংশন ব্যবহারের সবচেয়ে বড় বিষয় তা হলো ফাংশন এর ভিতর ফাংশন এর ব্যবহার ।উপরের উদাহরনে দেখেছি বাটনে click করার ফলে popup box দেখেছি । বাটনে click করাকে event বলে । এ বিষয়ে পরবর্তি অধ্যায়ে আলোচনা করা হয়েছে । |
| জাভাস্ক্রিপ্ট ইভেন্ট টিউটোরিয়াল (JavaScript Event Tutorial in Bangla) |
| জাভাস্ক্রিপ্ট বিষয়ে পরম শীতল ব্যাপার হচ্ছে এর ক্ষমতা দ্বারা আপনাকে ডাইনামিক ওয়েবপেজ করতে সাহায্য করবে । ফলে আপনার সাইটটি ভিজিটর এর নিকট প্রানবন্ত ,চোখের সামনে সব জীবন্ত মনে হবে। আকর্ষনীয় ওয়েব পেজ তৈরীর ভিত্তি হচ্ছে জাভাস্ক্রিপ্ট ইভেন্ট । জাভাস্ক্রিপ্ট এর ইভেন্ট হল এমন এক জিনিস যা ওয়েবপেজ এর সাথে বা এর উপরে কিছু ঘটায় ।নিচে জাভাস্ক্রিপ্ট ইভেন্ট এর কিছু উদাহরন দেয়া হলো ।১ একটি মাউস ক্লিক ২ ওয়েব পেজ লোড হওয়া ৩ চিহ্নিত স্থানের উপর মাউস রাখা যাকে আমরা hover নামে জানি । ৪ এইচটিএমএল ফর্ম এ ইনপুট বক্স কে সিলেক্ট করা ৫ একটি keystroke জাভাস্ক্রিপ্ট ইভেন্টs এর উদাহরন: জাভাস্ক্রিপ্ট এর কিছু পুর্বনির্ধারিত নাম রয়েছে যার মাধ্যমে অনেক ইভেন্ট ঘটে উপরে তার লিস্ট দেয়া হয়েছে। আপনি যখন ইভেন্ট কে নির্দিষ্ট করবেন তখন কিছু কাজ সংঘটিত হয়। আপনাকে অবশ্যই ইভেন্ট কে নির্দিষ্ট করতে হবে কারন HTML element ইভেন্ট এর জন্য অপেক্ষা করবে এবং ইভেন্ট ঘটার ফলে সাথে সাথে function কাজ করবে । আমরা পুর্ববতি অধ্যায়ে জাভাস্ক্রিপ্ট ইভেন্ট ব্যবহার করেছিলাম যেখানে বাটনে ক্লিক করার সাথে সাথে alert popup প্রদর্শন করেছিল ।এটা ছিল ”onclick” জাভাস্ক্রিপ্ট ইভেন্ট ।একই ধরনের উদাহরন নিচে দেয়া হলো সাথে mouseover এবং mouseout ইভেন্ট যোগ করা হলো । 01.<html> 02.<head> 03.<script type=”text/javascript”> 04.<!– 05.function popup() { 06.alert(“Hello World”) 07.} 08.//–> 09.</script> 10.</head> 11.<body> 12. 13.<input type=”button” value=”Click Me!” onclick=”popup()”> 14. 15.</body> 16.</html> প্রদর্শন: |
| জাভাস্ক্রিপ্ট স্টেটমেন্ট স্টেটমেন্ট টিউটোরিয়াল (JavaScript Statement Tutorial in Bangla) |
| লেখক মো:ফেরদৌস আলম |
| আপনি ইচ্ছামত জাভাস্ক্রিপ্ট কোড লিখতে পারেন তবে বেশির ভাগ ক্ষেত্রে জাভাস্ক্রিপ্ট কোডগুলো পৃথক পৃথক স্টেটমেন্ট বা বিবৃতি দ্বারা গঠিত । একটি স্টেটমেন্ট ভেরিয়েবল সেট করতে পারে যা ভেলুর সমান । একটি স্টেটমেন্ট ফাংশন কে কল করতে পারে। স্টেটমেন্ট নির্দেশ করে যে Script কি করবে এবং কিভাবে কাজ করবে ।স্টেটমেন্ট এর সমাপ্তি: অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজের(সি,পিএইচপি ইত্যাদি) এর সমাপ্তি নির্দেশ করতে semicolon(;) ব্যবহার করা হয়।আমরা জাভাস্ক্রিপ্ট এ দেখেছে যে semicolon(;) এর ব্যবহার বাধ্যবাধকতা বিষয় নয়। স্টেটমেন্ট এর প্রকারভেদ: মানসম্মত স্টেটমেন্ট যাদের ভেরিয়েবল এর মান পরিবর্তন, নতুন মান প্রদান করা বা ফাংশন কে ডাকা ইত্যাদি করা সম্ভব ।যাহোক কিছু প্রকারের স্টেটমেন্ট রয়েছে যারা তাদের উদ্দেশ্য অনুযায়ী একে অপর হতে পৃথক । এই অধ্যায়ে আমরা এসব প্রকারের স্টেটমেন্ট এর সংক্ষিপ্ত ধারনা দিব তবে পরবর্তি অধ্যায়ে এদের বিষদ আলোচনা করা হবে। নিচে এদের প্রকার ভেদ উল্লেখ করা হল । ১ কন্ডিশনাল (শর্তবাচক) স্টেটমেন্ট ২ লুপ (পুনরাবৃত্তি) স্টেটমেন্ট ৩ অবজেক্ট (বস্তূ) ম্যানিপুলেশন স্টেটমেন্ট ৪ কমেন্ট (মন্তব্য) স্টেটমেন্ট ৫ এক্সসেপশন (ব্যতিক্রম) হ্যান্ডলিং স্টেটমেন্ট কন্ডিশনাল স্টেটমেন্ট: যদি আপনি ১০০ মিলিয়ন ডলারের লটারি জিতেন , তবে আপনি সম্ভবত চাকরি ছেড়ে দিবেন।শেষের টি শর্তবাচক( conditional) if/then statement যা প্রোগ্রামিং এর ক্ষেত্রে অধিক পরিমানে ব্যবহার হয়। যদি কিছু শর্ত (condition) (অর্থাৎ লটারি জেতা)সত্য হয়, তবে কিছু(আপনার চাকরি ছেড়ে দেয়া) ঘটবে । যদি শর্ত (condition)(অর্থাৎ আপনি লটারি জিততে পারেননি)মিথ্যা হয়,তবে আপনি সেই কাজটি(চাকরি ছেড়ে দেয়া) করতে পারবেন না। আপনার Script কে নিয়ন্ত্রন করার জন্য কন্ডিশনাল স্টেটমেন্ট ব্যবহার করা হয় যাতে অবস্থার পরিপ্রেক্ষিতে বিভিন্ন কাজ করা যায় । ধরুন আপনি কোন বিশেষ ছবি ছুটির দিনে আপনার website এর home page এ দেখাতে চান। এই শর্ত নির্ভর করে দিনটি কি ছিল এবং যদি এটি ছুটির দিন হয় তবে ছুটির দিনের জন্য রাখা বিশেষ ছবিটি আপনার website-এ ভিজিটরের সামনে প্রদর্শিত হবে। কন্ডিশনাল স্টেটমেন্ট সম্বন্ধে সঠিক জ্ঞান ছাড়া আপনি আপনার website কে প্রত্যাশা অনুযায়ী প্রানবন্ত,আকর্ষনীয়,ডায়নামিক করতে পারবেন না। লুপ (পুনরাবৃত্তি) স্টেটমেন্ট আপনি কি কখনও বিয়ের নিমন্ত্রনপত্র পাঠিয়েছিলেন? যদি না পাঠান তবে জানুন এটা এভাবে পাঠাতে হয়। প্রথমে নিমন্ত্রনপত্রটি নিবেন তারপর খামে ঢুকাবেন,খামের মুখ থুথু দিয়ে ভেজাবেন, মুখটি ভালভাবে এটে দিবেন তারপর পাঠিয়ে দিবেন। যদি আপনার ১০০টি নিমন্ত্রনপত্র থাকে তবে বাকি ৯৯টি একইভাবে করতে হবে। এভাবে বারবার একই কাজ করা বিরক্তিকর। তবে কোন সহজ পদ্ধতি কি আছে? হ্যাঁ ,প্রোগ্রামিং এর ক্ষেত্রে সহজ উপায় আছে তা জাভাস্ক্রিপ্ট দিয়ে করা যায়। এই পদ্ধতির নাম হচ্ছে “looping”।সঠিক পরিকল্পনার মাধ্যমে looping এর সাহায্যে আপনি আপনার ছোট সুন্দর Script কে শক্তিশালী কর্মক্ষম অশ্বে পরিনত করতে পারবেন। loop statement তদন্ত করে দেখে যে, কোন শর্ত সত্য হচ্ছে কিনা।যদি কোন শর্ত সত্য হয় তবে loop statement টি শর্তসাপেক্ষে জাভাস্ক্রিপ্ট কোডকে কাজে পরিনত করে। জাভাস্ক্রিপ্ট কোডকে কাজে পরিনত করা পর শর্তটিতে আবার চেক করে দেখা হয়। যদি শর্ত ঠিক থাকে তবে প্রক্রিয়াটি আবার শুরু হয়। যদি শর্ত মিথ্যা হয় তবে loop (অর্থাৎ পুনরাবৃত্তি কাজ) থেমে যাবে।যদি আমরা বিবাহের নিমন্ত্রনপত্রের কথা চিন্তা করি তবে প্রথমে আমরা চেক করবো কোন নিমন্ত্রপত্র বাকি আছে কিনা। বাকি থাকে তাহলে এটাকে আমরা আগের মত খামে পুরে পাঠাবো। আর যদি বাকি না থাকে তবে looping বন্ধ হয়ে যাবে । অবজেক্ট (বস্তূ) ম্যানিপুলেশন স্টেটমেন্ট object model এর সুযোগ সুবিধা পেতে এই statement গুলো ব্যবহ্নত হয় । এ মুহুর্তে আপনারা যদি object model সম্বন্ধে না বুঝেন তবে সমস্যা নেই এ বিষয়ে পরে আলোচনা করা হয়েছে। কমেন্ট (মন্তব্য) স্টেটমেন্ট Comment statement দ্বারা আপনি যে কোডকে কাজে লাগাতে চান না সেই কোডকে ব্রাউজারে কার্য সম্পন্ন হওয়া থেকে বিরত রাখতে পারেন । তবে মনে প্রশ্ন জাগতে পারে কেন আমরা তা করতে চাই? তার অনেক কারন রয়েছে। যেসব লেখাকে আমরা প্রকাশের অনুমতি দেইনি সেসব শুধু আমদের নিজেদের জন্য রেখেছি যা HTML comments এর মত। আবার আমাদের প্রয়োজন মত সেসব কোডকে কাযে লাগাতে পারি। Single লাইন comment এ দুটো //(slash) থাকে। আর অধিক লাইন বিশিষ্ট শুরু হয় (/*) দিয়ে এবং শেষ হয় (*/) দিয়ে।পরবর্তিতে এ বিষয়ে বিস্তারিত আলোচনা করা হয়েছে। |
| জাভাস্ক্রিপ্ট ইফ স্টেমেন্ট টিউটোরিয়াল (JavaScript If Statement Tutorial in Bangla) |
| জাভাস্ক্রিপ্ট program কে নিখুঁত করতে আপনাকে কন্ডিশনাল স্টেটমেন্ট ব্যবহার করতে হবে যা আপনার program কে সিদ্ধান্ত নিতে সাহায্য করবে । আন্যান্য প্রোগ্রামিং ল্যাংগুয়েজও কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে জাভাস্ক্রিপ্ট তার ব্যতিক্রম নয়।ভেরিয়েবল এবং কিছু প্রকারের data-র উপর ভিত্তি করে “If Statement” এর সাহায্যে সির্দ্ধান্ত নেয়া যায়।উদাহরন স্বরুপ আপনার variable থাকতে পারে যা তথ্য জমা রাখে। আপনার এই ক্ষুদ্র তথ্যের সাহায্যে আপনি ছোট Script এর মাধ্যমে সহজে প্রোগ্রাম তৈরী করতে পারেন। “Today is my Birthday!” এই বাক্যটি তখনই প্রদর্শিত হবে যখন দিন এবং মাস আপনার জন্মদিনের সমান হবে।জাভাস্ক্রিপ্ট If Statement Syntax(চিহ্ন): If Statement এর প্রধান দুটি অংশ রয়েছে তার একটি কন্ডিশনাল স্টেটমেন্ট এবং অপরটি হল নির্দিষ্ট কোড যা কার্যে পরিনত হবে। কন্ডিশনাল স্টেটমেন্ট হল এমন একটি স্টেটমেন্ট যা সত্য, মিথ্যা যাচাই করে।বেশির ভাগক্ষেত্রে কন্ডিশনাল স্টেটমেন্ট দিয়ে কোন কিছু চেক করতে ব্যবহ্নত হয়যদি কিছু তার ভেলুর সমান হয় ।উদাহরন স্বরুপ বলা যায় এটা চেক করবে যদি তারিখটি আপনার জন্মদিনের সমান হয় । নিচে জাভাস্ক্রিপ্ট কোড লিখা হল তা কার্যে পরিনত হবে যদি If Statement শর্তটি সত্য হয়।নিচে If Statement উদাহরন দেয়া হলো । আমরা একটি মেসেজ দেখতে পাব যদি variable টি ৭ এর সমান হয় । 01.<script> 02.<!– 03.var myNum = 7; 04. 05. 06.if(myNum == 7){ 07.document.write(“Lucky 7!”); 08.} 09.//–> 10.</script> প্রদর্শন: Lucky 7! উপরের উদাহরনে variable নাম দিয়েছি myNum এবং তার ভেলু সেট করে দিয়েছি তা হচ্ছে ৭। Num এখানে বলতে নম্বর বোঝায়।তারপর আমরা চেক করে দেখবো যে If Statement’ এর শর্তটি পুরুন হচ্ছে কিনা অর্থাৎ myNum সমান ৭ হচ্ছে কিনা (“myNum == 7″) যদি হয় তবে এটাকে সত্য বলে বিবেচনা করবে।ফলে মেসেজটি( Lucky 7! )প্রদর্শিত হবে । কারন কন্ডিশনাল স্টেটমেন্ট টি সত্য ছিল যে কোডটি আমাদের If Statement (“document.write…”) এর সাথে সংশ্লিষ্ট ছিল তা কার্যে পরিনত হয়েছে। জাভাস্ক্রিপ্ট If Statement: Else এটা আলোচনা করা হয়েছে যে যদি শর্তটি সত্য হয় তবে কিভাবে কোড কার্যে পরিনত হয় ।কিন্তূ যদি শর্তটি মিথ্যা হয় তবে আপনি আপনার ইচ্ছা অনুযায়ী আরেকটি কোডকে কার্যে পরিনত করতে পারেন।এটা হচ্ছে If Statement এর বর্ধিত অংশ(extension) তা হচ্ছে Else clause । Else clause টি কাজ করে যখন কন্ডিশনাল স্টেটমেন্ট টি মিথ্যা হয়। উপরের উদাহরনের সাথে আমরা শুধু Else clause যোগ করেছি এবং myNum এর ভেলু (৭ এর পরিবর্তে ১০)পরিবর্তন করে দিয়েছি যাতে আমাদের কন্ডিশনাল স্টেটমেন্ট টি মিথ্যা হয়। 01.<script> 02.<!– 03.var myNum = 10; 04. 05. 06.if(myNum == 7){ 07.document.write(“Lucky 7!”); 08.}else{ 09.document.write(“You’re not very lucky today…”); 10.} 11.//–> 12.</script> প্রদর্শন: You’re not very lucky today… |
| জাভাস্ক্রিপ্ট এলস ইফ টিউটোরিয়াল (JavaScript Else If Statement Tutorial in Bangla) |
| পুববর্তি অধ্যায়ে আপনারা শিখেছেন যে, জাভাস্ক্রিপ্ট- এ কিভাবে basic If Statement তৈরী করা যায়। single If Statement এ একের অধিক শর্ত নির্ণয় করার ক্ষেত্রে basic If Statement টি সহায়তা দিয়ে থাকে।Else If statement হল basic If Statement এর একটি extension যার মাধ্যমে আপনি অনেকগুলো conditional statement তৈরী করতে পারেন। জাভাস্ক্রিপ্ট Else If এর উদাহরন: ধরুন আপনি চাচ্ছেন আপনার ছোট “student” script টি customized মেসেজ আকারে প্রদর্শিত হোক যা নির্ভর করে কে ওয়েব পেজ টি ব্যবহার করছে। যদি আপনার একের অধিক custom মেসেজ থাকে তবে extension হিসাবে আপনি Else If statement টি ব্যবহার করতে পারেন। 01.<script> 02.<!– 03.var visitor = “principal”; 04. 05. 06.if (visitor == “teacher”){ 07.document.write (“My dog ate my homework…”); 08.} else if (visitor == “principal”) { 09.document.write (“What stink bombs?”); 10.} else { 11.document.write (“How do you do?”); 12.} 13.//–> 14.</script> প্রদর্শন: What stink bombs? কিছু গুরুত্বপুর্ন বিষয়: ১ Else If statement ব্যবহার করার আগে আপনাকে অবশ্যই সাধারন If Statement ব্যবহার করতে হবে। কারন Else If statement টি হচ্ছে basic If Statement এর বর্ধিত অংশ। ২ আপনার অনেক গুলো Else If statement থাকতে পারে, উপরের উদাহরনে আমরা মাত্র Else If statement একটি ব্যবহার করেছি তবে আপনি আপনার ইচ্ছা মত Else If statement ব্যবহার করতে পারেন। |
| জাভাস্ক্রিপ্ট হোয়াইল লুপ টিউটোরিয়াল(JavaScript While Loop Tutorial in Bangla) |
| লেখক মো:ফেরদৌস আলম |
| while loop হল একটি advance প্রোগ্রামিং পদ্ধতি যার মাধ্যমে কোন কাজ বারবার করতে পারেন যখন আপনার কন্ডিশনাল স্টেটমেন্ট টি সত্য হবে । যদিও while loop এর সাধারন ব্যবহার একটু জটিল । এ অধ্যায়ে আপনাদেরকে দেখাবো কিভাবে জাভাস্ক্রিপ্ট এ while loop তৈরী করা যায়।জাভাস্ক্রিপ্ট While Loop এর ব্যাখ্যা: জাভাস্ক্রিপ্ট while loop এর প্রধান দুটি অংশ রয়েছে। ১ while loop এর কোড কার্যে পরিনত হওয়ার জন্য অবশ্যই কন্ডিশনাল স্টেটমেন্ট টিকে সত্য হতে হবে। ২ while loop এর কোড বাকানো ব্রাকেট “{ }” ধারন করে যা কাজে পরিনত হবে যদি কন্ডিশনাল স্টেটমেন্ট টি সত্য হয়। যখন while loop শুরু হয়, জাভাস্ক্রিপ্ট চেক করে দেখে যে condition statement টি সত্য হয়েছে কিনা ।যদি সত্য হয় তবে বাকানো ব্রাকেট “{ }” এর মধ্যের কোডটি কার্যে পরিনত হবে ।কোড অংশের শেষে ”}” while loop টি আবার condition statement এ ফিরে যায় এবং আবার শুরু হয়। যদি condition statement টি সবসময় সত্য হয় তবে আপনি কখনও while loop হতে বের হয়ে আসতে পারবেন না । তাই while loop ব্যবহারের সময় সতর্ক হওয়া উচিত। সাধারন While Loop এর উদাহরন: এ উদাহরনে দেখানো হয়েছে কিভাবে basic while loop তৈরী এর যায়। যায় document.write কে ১০ বার কার্যে পরিনত করেছে । তারপর loop statement হতে বের হয়ে এসেছে । 01.<script type=”text/javascript”> 02.<!– 03.var myCounter = 0; 04.var linebreak = “<br />”; 05.document.write(“While loop is beginning”); 06.document.write(linebreak); 07. 08.while(myCounter < 10){ 09.document.write(“myCounter = ” + myCounter); 10.document.write(linebreak); 11.myCounter++; 12.} 13. 14.document.write(“While loop is finished!”); 15.</script> প্রদর্শন: While loop is beginning myCounter = 0 myCounter = 1 myCounter = 2 myCounter = 3 myCounter = 4 myCounter = 5 myCounter = 6 myCounter = 7 myCounter = 8 myCounter = 9 While loop is finished! আমাদের variable myCounter টি ০ হতে শুরু হয়যা ১০ হতে ছোট, ফলে while loop এর কোডকে কার্যে পরিনত করতে পারে। ভেলু ০ যা ব্রাউজারে প্রদর্শিত হয়। তারপর variable myCounter ১ করে বৃদ্ধি পায় এবং while loop পুনরায় শুরু হয়। ১ যা ১০ হতে ছোট ফলে while loop এর কোড কার্যে পরিনত হবে । প্রক্রিয়াটি চলতে থাকবে । myCounter যখন ১০ যা ১০ হতে ছোট নয় সেক্ষেত্রে while loop এর কোড কার্যে পরিনত হবে না । তাই ভেলু ১০ প্রদর্শিত হয় নি। ফলে শেষ ভেলু হিসাবে ৯ প্রদর্শিত হয়েছে। |
| জাভাস্ক্রিপ্ট ফর লুপ টিউটোরিয়াল (JavaScript For Loop Tutorial in Bangla) |
| জাভাস্ক্রিপ্ট ফর লুপ অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজের ফর লুপ এর মত । এটা ব্যবহার হয়ে থাকেযখন আপনার অনেকবার কোন নির্দিষ্ট( set of operations) কাজ করার প্রয়োজন হয় এবং নির্দিষ্ট কোড এর মাধ্যমে প্রত্যেকবার কাজ চলার পর কিছু জিনিস বৃদ্ধি পায় । জাভাস্ক্রিপ্ট ফর লুপ এর ব্যাখ্যা: জাভাস্ক্রিপ্ট ফর লুপ এর চারটি গুরুত্বপুর্ন বিষয় রয়েছে। ১ counter variable কে শুধুমাত্র ফর লুপ এর ক্ষেত্রে ব্যবহার করার জন্য তৈরী এর হয়েছে। এই counter variable দ্বারা গননা করা হয়যে কতবার ফর লুপ এর পুনরাবৃত্তি ঘটবে। i হল counter variable এর সাধারন লেভেল। ২ conditional statement টি সিদ্ধান্ত নেয় যে ফর লুপ টি অনবরত কাজে (executing)নিয়োজিত হবে কি হবে না। কিছু উপায়ে এটি counter variable কে চেক(check) করে। ৩ ফর লুপ এর increment সেকশনে প্রত্যেক loop বা পুনরাবৃত্তির পর counter variable এর বৃদ্ধি হয়।এই বৃদ্ধির পরিমান কোডে লিখা থাকে। ৪ ফর লুপ এর মধ্য দিয়ে প্রতেক loop বা পুনরাবৃত্তির জন্য নির্দিষ্ট কোড কাজে(executed) পরিনত হয়। এটা অদ্ভুত মনে হতে পারে তবে ১-৩ সবই একই লাইনের কোড এর জন্য ঘটে। এর কারন হচ্ছে ফর লুপ standard প্রোগ্রামিং এর অনুশীলন।যা designer গণ অনুভব করতে পারে । ফর লুপ এর মাধ্যমে কিছু স্পেস এবং বিশৃংখলা হতে রক্ষা পাওয়া যায়। জাভাস্ক্রিপ্ট ফর লুপ এর উদাহরন: এই উদাহরনের মাধ্যমে আমরা দেখব যে কিভাবে সাধারন ফর লুপ তৈরী করা যায় এবং আমাদের counter এর value প্রদর্শিত হবে যতক্ষন না counter ৫ এ পৌছায়। loop কোডের প্রথম লাইনের তিনটি ভিন্ন (i = 0; i < 5; i++)item এর দিকে বিশেষ মনোযোগ দেয়া উচিত। এগুলো ফর লুপ এর গুরুত্বপুর্ন বিষয় যা উপরের ১ হতে ৩ পয়েন্টে আলোচনা করা হয়েছে। 01.<script type=”text/javascript”> 02.<!– 03.var linebreak = “<br />”; 04.document.write(“For loop code is beginning”); 05.document.write(linebreak); 06. 07.for(i = 0; i < 5; i++){ 08.document.write(“Counter i = ” + i); 09.document.write(linebreak); 10.} 11. 12.document.write(“For loop code is finished!”); 13.</script> প্রদর্শন: For loop code is beginning Counter i = 0 Counter i = 1 Counter i = 2 Counter i = 3 Counter i = 4 For loop code is finished! counter variable নাম (name) i কে দেখে অদ্ভুত লাগতে পারে তবে এটা ব্যবহার হয়ে আসছে। ভাষা কোন সমস্যা নয়। i হচ্ছে loop counter এর default (name) নাম । অন্যান্য কমন variable নাম হচ্ছে j,k,x,yএবং z। এই উদাহরনে আমাদের counter কে প্রথমে ০ তে (“i = 0;”) সেট করা হয়েছে। তারপর conditional statement সেট (“i < 5;”) করা হয়েছে। আমাদের counter ৫ হতে ছোট তাই ফর লুপ এর কোড কাজে(executed) পরিনত হয়েছে । ফর লুপ এর কোড কাজে(executed) পরিনত হওয়ার পর (“i++”) বৃদ্ধি ঘটেছে। counter i সমান ১ হিসাবে তৈরী করা হয়েছে ।তারপর চেক করা হয় যদি ৫ এর চেয়ে ছোট হয় তবে পুনরায় ফর লুপ এর কোড কাজে(executed) পরিনত হয়।এই looping চলতে থাকে যতক্ষন না counter i ৫ এর সমান হচ্ছে । কিন্তূ ৫ তো ৫ হতে ছোট নয় ফলে ফর লুপ এর কোড কাজে(executed) পরিনত হওয়া বন্ধ হয়ে যাবে। |
| জাভাস্ক্রিপ্ট মন্তব্য (JavaScript Comments Tutorial in Bangla ) |
| আপনি কি কখনও Script বা প্রোগ্রাম অতীতে লিখেছেন যা ছয় মাস আগে দেখেছেন কিন্তূ কোন ধারনা নেই যে এই কোড দিয়ে আপনি কি করবেন।আপনি সম্ভবত ভুলে গেছেন কি করতে চেয়েছিলেন।সেজন্য কমেন্টস (Comments)লেখা উচিত।যখন আপনি কোড লিখেন তখন আপনার অনেক জটিল লজিক থাকতে পারে তবে সবচেয়ে ভাল হয় কোডের সাথে কিছু কমেন্টস (Comments)অন্তর্ভক্ত করা যা আপনাকে ব্যাখ্যা করবে কি হতে যাচ্ছে। এটা শুধু আপনাকে পরবর্তিতে স্বরন রাখতে সাহায্য করবে তা নয়, আপনি যদি আপনার কোড কাউকে দেখান তবে তারাও খুব সহজে কোড বুঝতে পারবে। কমেন্টস(Comments) এর আরেকটি বড় সুবিধা হচ্ছে যখন আপনার কোডের ভুল ত্রুটি দুর করার সময়ে কমেন্টস(Comments)এর সাহায্যে অনাকাংখিত কোড দুর করতে পারবেন। এই অধ্যায়ে আপনাদের দেখাবো কিভাবে দুই ধরনের কমেন্টস(Comments) JavaScript এ লেখা যায় ১ single লাইন কমেন্টস( comments ) ২ multi-লাইন কমেন্টস( comments ) Single Line Comments তৈরী করা: জাভাস্ক্রিপ্ট এ single লাইন কমেন্টস( comments ) তৈরী করতে হলে আপনাকে কোড বা text এর সামনে দুটি স্ল্যাস (slashes) “//” দিতে হবে।কাজে পরিনত বা প্রদর্শিত হবে না। যখন আপনি এই দুটি (slashes) “//” দিবেন তখন তার ডান পাশের সকল text প্রদর্শিত হবে না।যতক্ষন না পরবর্তি লাইনে যায়। 1.<script type=”text/javascript”> 2.<!– 3.// This is a single line JavaScript comment 4. 5.document.write(“I have comments in my JavaScript code!”); 6.//document.write(“You can’t see this!”); 7.//–> 8.</script> প্রদর্শন: I have comments in my JavaScript code! Multi-line Comments তৈরী করা: যদিও single লাইন কমেন্টস (comments ) মোটামুটি উপকারী তবে যখন আপনি কোন বড় অংশের কোড কে অক্ষম রাখতে চান সেক্ষেত্রে single লাইন কমেন্টস( comments ) এর ব্যবহার কখনও কখনও বোঝা হয়ে দাড়ায়। এ রকম বড় ধরনের কমেন্টস( comments ) এর জন্য জাভাস্ক্রিপ্ট multi-লাইন কমেন্টস( comments ) ব্যবহার করা উচিত।যা শুরু হয় /* দিয়ে এবং শেষ হয়*/ দিয়ে। 01.<script type=”text/javascript”> 02.<!– 03.document.write(“I have multi-line comments!”); 04./*document.write(“You can’t see this!”); 05.document.write(“You can’t see this!”); 06.document.write(“You can’t see this!”); 07.document.write(“You can’t see this!”); 08.document.write(“You can’t see this!”); 09.document.write(“You can’t see this!”); 10.document.write(“You can’t see this!”);*/ 11.//–> 12.</script> প্রদর্শন: I have multi-line comments! |
| জাভাস্ক্রিপ্ট অ্যারে টিউটোরিয়াল (JavaScript Array Tutorial in Bangla) |
| অ্যারে হল একটি ভেরিয়েবল যা নিজের মধ্যে অনেকগুলো ভেরিয়েবল জমা করে রাখতে পারে। অনেক প্রোগ্রামার অন্য ল্যাংগুয়েজের অ্যারে দেখেছে যা জাভাস্ক্রিপ্ট হতে ভিন্ন নয়।যখন আপনারা জাভাস্ক্রিপ্ট এ অ্যারে ব্যবহার করবেন তখন নিচের পয়েন্টসগুলো অবশ্যই মনে রাখা উচিত। ১ অ্যারে হচ্ছে একটা বিশেষ ধরনের ভেরিয়েবল ২ array name ব্যবহার করার মাধ্যমে অ্যারে এর ভেলুকে জমা করে রাখা হয়। অ্যারে তে অবস্থান ঠিক করে আপনার ইচ্ছা অনুযায়ী ব্রাকেটে ভেলু জমা করে রাখতে পারেন। যেমন: myArray[2] = “Hello World”; ৩ array name এর মাধ্যমে ভেলু এবং তার অবস্থান বের যায় ।যেমন: myArray[2] ৪ জাভাস্ক্রিপ্ট এ অ্যারে এর জন্য built-in function রয়েছে। তাই ব্যবহার করার আগে দেখে নেয়া উচিত। জাভাস্ক্রিপ্ট অ্যারে তৈরীর নিয়ম: সাধারন ভেরিয়েবল তৈরী করা হতে অ্যারে তৈরী করা কিছুটা ভিন্ন। কারন JavaScript এ ভেরিয়েবল এবং property রয়েছে যা অ্যারে এর সহিত সংশ্লিষ্ট। নতুন অ্যারে তৈরী করতে আপনি special function ব্যবহার করতে পারেন। নিচের উদাহরনের মাধ্যমে দেখানো হয়েছে যে কিভাবে আপনি সাধারন অ্যারে তৈরী করতে পারবেন, সেখানে ভেলু জমা রাখতে পারবেন, সেই ভেলু নির্ণয় করতে পারবেন। 01.<script type=”text/javascript”> 02.<!– 03.var myArray = new Array(); 04. 05.myArray[0] = “Football”; 06.myArray[1] = “Baseball”; 07.myArray[2] = “Cricket”; 08. 09.document.write(myArray[0] + myArray[1] + myArray[2]); 10.//–> 11.</script> প্রদর্শন: FootballBaseballCricket লক্ষ্য আপনি ব্রাকেটে ভেলুর position ঠিক করে দেয়ার ফলে আপনার ইচ্ছা অনুযায়ী ভেলু বের করতে পেরেছেন। জাভাস্ক্রিপ্ট অ্যারে সর্টিং: ধরুন আপনি অ্যারে কে বর্ণমালা অনুসারে সাজাতে (sort) চান তা আমরা অ্যারে এর sortmethod এর মাধ্যমে করতে পারি। 01.<script> 02.<!– 03.var myArray2= new Array(); 04. 05. 06.myArray2[0] = “Football”; 07.myArray2[1] = “Baseball”; 08.myArray2[2] = “Cricket”; 09. 10. 11.myArray2.sort(); 12. 13. 14.document.write(myArray2[0] + myArray2[1] + myArray2[2]); 15.//–> 16.</script> প্রদর্শন: BaseballCricketFootball |
| জাভাস্ক্রিপ্ট এলার্ট ফাশন টিউটোরিয়াল (Javascript Alert Function Tutorial in Bangla) |
| যদি আপনার ওয়েব ব্রাউজার এ জাভাস্ক্রিপ্ট এক্টিভ করা না থাকে তাহলে আপনি Alert দেখতে পাবেন না। জাভাস্ক্রিপ্ট এলার্ট হচ্ছে একটা ডায়ালগ বক্স যা pops up এবং চলতি ব্রাউজার উইন্ডো হতে দৃষ্টি আর্কষন করে। ওয়েব ব্রাউজার কে Alert মেসেজটি পড়তে বাধ্য করে।যখন আমরা Popups / Alerts ব্যবহার করব: নিচের অবস্থার ক্ষেত্রে JavaScript alert ব্যবহার করা যায়। ১ আপনি যদি নিশ্চিত হতে চান যে ব্যবহারকারী(user) website এ কোন কিছু করার আগে মেসেজ দেখেন। ২ কিছু বিষয় সম্বন্ধে ব্যবহারকারীকে(user)সর্তক করতে । যেমন:এই মেসেজটি দিয়ে সর্তক করতে পারেন “the following page contains humor not suitable for those under the age of 14″ ৩ একটা ভুল হয়ে গেছে। এ ব্যাপারে আপনি ব্যবহারকারীকে(user) জানাতে চান। ৪ কিছু কাজের ব্যাপারে নিশ্চিত হতে ব্যবহারকারীকে(user) জিজ্ঞাসা করতে পারেন। যেমন: যদি তারা বাড়ির চুক্তির ব্যাপারে সাইন করতে রাজি হয় তবে আপনি তাদেরকে আবার জিজ্ঞাসা করবেন যদি তারা চুক্তির ব্যাপারে নিশ্চিত তবে তারা এই সিদ্ধান্তের আওতায় পড়বে। সাধারন জাভাস্ক্রিপ্ট এলার্ট: ধরুন আমরা একটি তৈরী করেছি যেখানে জনগনকে বলা হয়েছে বাড়ি আদান প্রদান চুক্তির ব্যাপারে ।ফলে জনগনের সাথে চুক্তির ব্যাপার নিশ্চিত করা জন্য আমাদের একটি alert যা ওয়েবসাইট এ যোগ করতে হবে। নিচের কোডে alert যুক্ত করা হয়েছে যেখানে এইচটিএমএল এবং বাটন onClick event যুক্ত হয়েছে। view source print? 1.<form> 2.<input onclick= 3.”alert(‘Are you sure you want to give us the deed to your house?’)” 4.value=”Confirmation Alert”> 5.</form> প্রদর্শন: Top of Form Bottom of Form |
| জাভাস্ক্রিপ্ট কনফার্ম ফাংশন টিউটোরিয়াল (Javascript Confirm Function Tutorial in Bangla) |
| JavaScript confirm ফাংশন এবং JavaScript alert ফাংশন প্রায় একই রকম।এটা একটা ছোট ডায়ালগ বক্স যা ওয়েব পেজ এর সামনে সরাসরি দৃষ্টি পাত করার জন্য প্রদর্শিত হয়।confirm box যা alert box হতে ভিন্ন ।এটা ব্যবহারকারীকে দুটি অপশন দেয়:১ পপআপ মেসেজটি যদি তারা confirm করতে চায় তবে OK প্রেস করতে হবে। ২ বা পপআপ মেসেজটির সাথে একমত না হয় তবে cancel প্রেস করতে হবে। কোন কিছু নিশ্চিত করার জন্য confirm ফাংশন টি প্রায়ই ব্যবহার হয়ে থাকে। এই গুরুত্বপুর্ন কাজটি website এর মাধ্যমে সম্পন্ন করা হয়। ব্যবহারকারীগন কোন কিছু submission এবং ব্যবহারকারীকে বিজ্ঞপ্তি প্রদান করে যে তারা যে লিংকে ক্লিক করেছে তার মাধ্যমে অন্য website এ যেত ইচ্ছুক কিনা। JavaScript Confirm এর উদাহরন : 01.<html> 02.<head> 03.<script type=”text/javascript”> 04.<!– 05.function confirmation() { 06.var answer = confirm(“Leave webcoachbd.com?”) 07.if (answer){ 08.alert(“Allah hafiz!”) 09.window.location = “http://www.google.com/”; 10.} 11.else{ 12.alert(“Thanks for staying with us!”) 13.} 14.} 15.//–> 16.</script> 17.</head> 18.<body> 19.<form> 20.<input type=”button” onclick=”confirmation()” value=”Leave webcoachbd.com”> 21.</form> 22.</body> 23.</html> প্রদর্শন: Top of Form Bottom of Form ফাংশন কে ডেকেছি।ফলে JavaScript popup window তৈরী করেছে যার দুটি বিষয় পছন্দ করার অপশন রয়েছে। জাভাস্ক্রিপ্ট ভেলু ফিরিয়ে আনে যা নির্ভর করে ব্যবহারকারী কোন বাটনে ক্লিক করবে। যদি ব্যবহারকারী OK ক্লিক করে তবে ভেলু ১ ফিরে আসবে, যদি ব্যবহারকারী cancel ক্লিক করে তবে ভেলু ০ ফিরে আসবে। আমরা answer এর মধ্যে এই ভেলুকে জমা রাখি। এই answer কে confirm ফাংশন এর সমান হিসাবে সেট করি। Answer ভেলু জমা রাখার পর,আমরা Answer কে কন্ডিশনাল স্টেটমেন্ট হিসাবে ব্যবহার করেছি। যদি Answer শূন্য ছাড়া অন্য কিছু হয় তবে আমরা ব্যবহারকারীকে আমাদের webcoachbd.com হতে অন্য কোথাও পাঠিয়ে দেবো। যদি Answer সমান শূন্য হয় তবে ব্যবহারকারী আমাদের সাইটে থাকবে কারন ব্যবহারকারী cancel বাটনে ক্লিক করেছে। প্রতিক্ষেত্রেই জাভাস্ক্রিপ্ট alert box প্রদর্শিত হবে যা ব্যবহারকারীকে জানাবে কি হতে যাচ্ছে। যদি আপনি আমাদের সাইটটি ত্যাগ করতে চান তবে “Bye bye!” প্রদর্শন করবে আর যদি আমাদের সাইটে থাকতে চান তবে “Thanks for sticking around!” প্রদর্শন করবে। এই অধ্যায়ে আমরা প্রথম বারের মত window.location property ব্যবহার করেছি। এই বিষয়ে পরবর্তি অধ্যায়ে আলোচনা করা হয়েছে। |
| জাভাস্ক্রিপ্ট প্রম্পট টিউটোরিয়াল (Javascript Prompt Tutorial in Bangla) |
| জাভাস্ক্রিপ্ট প্রম্পট এর ব্যবহার বর্তমানে কম দেখা যায়। জাভাস্ক্রিপ্ট প্রম্পট এর উদ্দেশ্য হচ্ছে ব্যবহারকারী(user) হতে তথ্য সংগ্রহ করা যাতে এই তথ্যগুলোকে এ ব্যবহার করা যায় যারফলে ব্যবহারকারীর(user) ব্যক্তিগত অনুভুতি সৃষ্টি হবে।আগের দিনে আমরা prompt এর ব্যবহারে দেখা গেছে সেখানে personal webpage এ নাম জিজ্ঞাসা করা হতো। তারপর তথ্য লেখার পর আপনাকে অভিবাদন মেসেজ দেয়া হতো যেমন: “Welcome to My Personal WebPage ferdous alam!” (এখানে আপনি যে নাম দিবেন তা প্রদর্শিত হবে) জাভাস্ক্রিপ্ট প্রম্পট খুব কাজে লাগে না এটা অনেকের কাছে বিরক্তি কর। তবে শেখার জন্য এখানে শিখবো। সাধারন JavaScript prompt: 01.<head> 02.<script type=”text/javascript”> 03.<!– 04.function prompter() { 05.var reply = prompt(“Hey there, good looking stranger! What’s your name?”, “”) 06.alert ( “Nice to see you around these parts ” + reply + “!”) 07.} 08.//–> 09.</script> 10.</head> 11.<body> 12.<input type=”button” onclick=”prompter()” value=”Say my name!”> 13.</body> প্রদর্শন: তবে তথ্য সংগ্রহ করার সবচেয়ে ভাল উপায় হচ্ছে এইচটিএমএল ফর্ম এর ব্যবহার । |
| জাভাস্ক্রিপ্ট প্রিন্ট ফাংশন টিউটোরিয়াল (Javascript Print Function Tutorial in Bangla) |
| JavaScript print ফাংশনটি একই কাজ করে যেমনটি করে আপনার ব্রাউজার উইন্ডোর ফাইল মেনুর print অপশনটি । JavaScript print ফাংশন টি ওয়েবপেজ এর কনটেন্ট কে ব্যবহারকারীর(user)প্রিন্টারে পাঠিয়ে দেয়।অনেকে এই ফাংশনটিকে অনর্থক মনে করে।অনেকে আছে যারা কম্পিউটার সম্বন্ধে ভাল যানে না তাদের ক্ষেত্রে এই অপশনটি থাকলে অনেক সুবিধা হবে। JavaScript Print Script – window.print(): JavaScript print function যা window.print() এটি ওয়েবপেজ কে প্রিন্ট করে ।এই ফাংশনটিকে এইচটিএমএল বাটনে রাখবো যা onClick event এর মাধ্যমে কাজ করবে। 1.<form> 2.<input type=”button” value=”Print This Page” onClick=”window.print()” /> 3.</form> প্রদর্শন: Top of Form Bottom of Form |
| জাভাস্ক্রিপ্ট পূন:নির্দেশ বা রিডাইরেক্ট টিউটোরিয়াল (Javascript Redirect Tutorial in Bangla) |
| ধরুন আপনি আপনার সাইটটিকে কোন নতুন ডোমেইন নামে নিতে চাচ্ছেন। সাইট ডিজাইন করার সময় মাঝে মাঝে এটা প্রয়োজন হতে পারে যে আপনি একটা পেজের লোকেশন পরিবর্তন করবেন অর্থ্যাৎ সার্ভারে একটা পেজের লোকেশন পরিবর্তন করবেন। এসব ব্যাপারে JavaScript redirect আপনাকে সাহায্য করবে।যখন আপনার ওয়েবপেজটি টি সরানো হবে তখন এই পরিবর্তনটি ব্যবহারকারীকে দেখাতে চাইতে পারেন। সেক্ষেত্রে ভাল উপায় হচ্ছে পুরাতন location এ পেজ redirect করা অর্থ্যাৎ পূন:নির্দেশ করা । তারপর কিছু সময়ের ব্যবধানে ব্যবহারকারী নতুন অবস্থান টি দেখতে পাবে। JavaScript redirect এর মাধ্যমে আপনি এসব করতে পারেন। JavaScript Window.Location: কোন পেজটি লোড হবে JavaScript property window.location এর সাহায্যে নিয়ন্ত্রন করা যায়। window.location তারপর “=” চিহ্নএবং তারপর নতুন URL সেট করে আপনার বর্তমান পেজ থেকে নির্দিষ্ট পেজে যেতে পারেন। আপনি যদি চান সকল ব্যবহারকারী আপনার সাইটে ঢোকার সাথে সাথে redirect হয়ে www.google.com এর চলে তবে নিচের কোডটি লিখুন। 1.<script type=”text/javascript”> 2.<!– 3.window.location = “http://www.google.com/” 4.//–> 5.</script> JavaScript Time Delay এটা নিম্নোক্ত পরিস্থিতিতে বেশ উপকারী। ১.যদি কোন পেজের লোকেশন পরিবর্তন করেন তাহলে “Update your bookmarks ” এ ধরনের একটা মেসেজ দেখিয়ে নতুন লোকেশনে নিয়ে যেতে পারেন। ২.নির্দিষ্ট সময় পর পর যদি আপনি আপনার ওয়েবসাইট রিফ্রেশ করতে চান। নিচের উদাহরনে লিংকটিতে ক্লিক করলে tizag.com এর একটা পেজে নিয়ে যাবে।অর্থ্যাৎ নতুন পেজের লোকেশন tizag.com এর ঐ পেজটি। 01.<html> 02.<head> 03.<script type=”text/javascript”> 04.<!– 05.function delayer(){ 06.window.location = “../javascriptredirect.php” 07.} 08.//–> 09.</script> 10.</head> 11.<body onLoad=”setTimeout(‘delayer()’, 5000)”> 12.<h2>Prepare to be redirected!</h2> 13.<p>This page is a time delay redirect, please update your bookmarks to our new 14.location!</p> 15. 16.</body> 17.</html> প্রদর্শন: Time Delay Redirect Time Delay অর্থ্যাৎ কিছু সময় দেরি । এটা পেতে আমরা JavaScript এর setTimeout function টি অবশ্যই ব্যবহার করবো। যদি function delayer() টি ৫ সেকেন্ড (৫০০০ মিলিসেকেন্ড) দেরিতে কাজ করাতে চাই সেক্ষেত্রে আমরা setTimeout সেট করবো যার দুটি বিষয় রয়েছে। ১. ‘delayer()’ – আমরা চাই setTimeout()function টি নির্দিষ্ট সময়ের পর যেন কাজে পরিনত হয়। ২. 5000 - মিলিসেকেন্ডের সংখ্যা । আমরা চাই function delayer() টি কাজে পরিনত হয়া আগে setTimeout() function টি 5000 - মিলিসেকেন্ড দেরি করুক। Web Page Redirection: যখন আপনি ওয়েবসাইটের এর URL পরিবর্তন করতে চান বা ফাইলকে নতুন location/অবস্থানে এ সরাতে চান সেক্ষেত্রে JavaScript redirect ব্যবহার করা যায়। যদি এমন হয় সাধারন HTML hyperlink এর মাধ্যমে পেজ বা URL রিপ্লেস করা যায় তবে JavaScript redirect ব্যবহার করা উচিত নয় । |
| জাভাস্ক্রিপ্ট পপ আপ উইন্ডো টিউটোরিয়াল (Javascript Popup Window Tutorial in Bangla) |
| এ অধ্যায়ে আমরা শিখবো কিভাবে সাইটে এ পপআপ তৈরী করা যায়। আমরা যেসব জায়গায় দরকার সেসব জায়গার জন্য পপআপ উইন্ডো তৈরী করবো কারন অযথা পপআপ উইন্ডো ব্যবহারকারীদের বিরক্তির কারন হবে। যদি আপনি অতিরিক্ত তথ্য দিতে চান বা আপনি কোন নতুন window ওপেন চান যা এইচটিএমএল এনকর ট্যাগ (hyperlink) নয়।সেক্ষেত্রে popup window ব্যবহারকরা উচিত।JavaScript window.open Function: এইচটিএমএল এনকর ট্যাগ এর ব্যবহার ছাড়াই আমরা window.open() function টির সাহায্যে নতুন browser window তৈরী করতে পারি। আমাদের একটি function তৈরী করতে যা window.open() function টিকে ব্যবহার করে। 01.<sup><head> 02.<script type=”text/javascript”> 03.<!– 04.function myPopup() { 05.window.open( “http://www.google.com/” ) 06.} 07.//–> 08.</script> 09.</head> 10.<body> 11.<form> 12.<input type=”button” onClick=”myPopup()” value=”POP!”> 13.</form> 14.<p onClick=”myPopup()”>CLICK ME TOO!</p> 15.</body> 16.</sup> প্রদর্শন: Top of Form Bottom of Form JavaScript Window.Open Arguments: window.open() function টির মাধ্যমে আমরা popup window কে customize করতে পারি। window.open function এ তিন ধরনের যুক্তি রয়েছে। ১ webpage এর URL ওপেন করতে । ২ window এর text এর নামের জন্য জন্য। ৩ একটা লম্বা string যা window এর ভিন্ন properties ধারন করে। window এর নামকরন একটা গুরুত্বপুর্ন বিষয় যদি আপনি এটিকে জাভাস্ক্রিপ্ট এর সাহাধ্যে পরিচালনা করতে চান। যাহোক এই সুযোগ এই অধ্যায়ে নেই । আমরা এখানে এর বিভিন্ন properties সম্বন্ধে আলোকপাত করবো। নিচে গুরুত্বপুর্ন আলোচনা করা হলো। ১ dependent – যদি আপনার browser window টি বন্ধ হয় তবে Subwindow টি বন্ধ হবে। ২ fullscreen – fullscreen mode এ browser প্রদর্শিত হওয়া। ৩ height – নতুন window এর height, pixels –এ । ৪ width – নতুন window এর width, pixels-এ । ৫ left – screen এর বামপাশ হতে Pixel offset। ৬ top – screen এর উপর হতে Pixel offset । ৭ resizable – ব্যবহারকারীকে window resize করার অনুমতি দেয়া বা ব্যবহারকারীকে window resize করা থেকে বিরত রাখা। ৮ status – status bar প্রদর্শন করা বা না করা। Dependent, fullscreen, resizable,এবং status সবগুলো ON/OFF properties এর উদাহরন। আপনি তাদেরকে শূন্য সেট করে বন্ধ করতে পারেন বা এক সেট করে অন করতে পারেন। এসব এ এই দুই সেটিং এর মাঝে আর অন্য কোন সেটিং নেই। উন্নত জাভাস্ক্রিপ্ট পপআপ উইন্ডো: 01.<head> 02.<script type=”text/javascript”> 03.<!– 04.function myPopup2() { 05.window.open( “http://www.google.com/”, “myWindow”, 06.”status = 1, height = 300, width = 300, resizable = 0″ ) 07.} 08.//–> 09.</script> 10.</head> 11.<body> 12.<form> 13.<input type=”button” onClick=”myPopup2()” value=”POP2!”> 14.</form> 15.<p onClick=”myPopup2()”>CLICK ME TOO!</p> 16.</body> প্রদর্শন: Top of Form Bottom of Form |
| জাভাস্ক্রিপ্ট তারিখ টিউটোরিয়াল (Javascript Date Tutorial in Bangla) |
Date object খুবই গুরুত্বপুর্ন যখন আপনি তারিখ প্রদর্শন করতে চান অথবা এক প্রকার calculation এর ক্ষেত্রে timestamp ব্যবহার করার সময়। জাভাস্ক্রিপ্ট এ ব্যবহারকারীর computer clock অনুযায়ী Date object তৈরী করা হয়।যখন Date object তৈরী করা হয় কম্পিউটার এর অভন্তরীন ঘরি অনুযায়ী তখন এটা খুবই গুরুত্বপুর্ন যদি কেউ ঘরি বন্ধ করে রাখে বা কেউ যদি ভিন্ন time zone এ অবস্থান করেজাভাস্ক্রিপ্ট তারিখ (আজকের বর্তমান সময়):আমাদের জাভাস্ক্রিপ্ট Date object এর দক্ষতা বাড়াতে সহজ কিছু করা উচিত। আপনি যদি Date constructor (যে Date object তৈরী করে ) কে কোন যুক্তি বা শর্ত না দেন তবে এটি ব্যবহারকারীর computer clock অনুযায়ী Date object তৈরী করবে।1.<h4>It is now 2.<script type="text/javascript">3.<!--4.var currentTime = new Date()5.//-->6.</script>7.</h4>প্রদর্শন: It is nowকোন সময় প্রদর্শন করছে না কারন আমরা Date object এর কোন পদ্ধতি অবলম্বন করেনি।জাভাস্ক্রিপ্ট সময়:Date object তৈরী হয়েছে এবং আমাদের ভেরিয়েবল রয়েছে যা বর্তমান তারিখকে ধারন করে। তথ্য পাওয়ার জন্য যা আমরা প্রদর্শন করব সেজন্য আমরা কিছু ফাংশন ব্যবহার করব। নিচে উল্লেখ করা হলো।১. getTime() – মিলিসেকেন্ড গণনা since ১/১/১৯৭০ @ ১২:০০ am ২. getSeconds() – সেকেন্ড গণনা (০-৫৯) ৩. getMinutes() – মিনিট গণনা (০-৫৯) ৪. getHours() – ঘন্টা গণনা (০-২৩) ৫. getDay() – সপ্তাহের দিন গণনা (০-৬). ০=রবিবার, … , ৬= শনিবার ৬. getDate() – মাসের দিন গণনা (০-৩১) ৭. getMonth() – মাস গণনা (০-১১) ৮. getFullYear() – চার ডিজিটের বছর (১৯৭০-৯৯৯৯) এখন তারিখ বিষয়ক তথ্য প্রদর্শন করতে পারবো। নিচের উদাহরনে আমরা getDate, getMonth, এবং getFullYear ফাংশন ব্যবহার করেছি। 01.<h4>It is now 02.<script type="text/javascript">03.<!--04.var currentTime = new Date()05.var month = currentTime.getMonth() + 106.var day = currentTime.getDate()07.var year = currentTime.getFullYear()08.document.write(month + "/" + day + "/" + year)09.//-->10.</script>11.</h4>প্রদর্শন: It is nowলক্ষ্য করুন যে month variable (currentTime.getMonth() + 1) এর সাথে ১ যোগ করা হয়েছে । যেহেতু জানুয়ারী মাস ০ এবং ডিসেম্বর মাস ১১ নম্বর তাই এই সমস্যা সমাধান করতে month variable এর সাথে ১ যোগ করা হয়েছে । ১ যোগ করার পর জানুয়ারী মাস ১ এবং ডিসেম্বর মাস ১২ নম্বর হয়েছে।জাভাস্ক্রিপ্ট (বর্তমান) সময় ঘরি:আমরা এখন Date প্রদর্শন করার পরিবর্তে এমন একটা ফরমেট প্রদর্শন করবো যা ডিজিটাল ঘড়িতে দেখা যায়। HH:MM AM/PM (H = ঘন্টা , M =মিনিট )।01.<h4>It is now 02.<script type="text/javascript">03.<!--04.var currentTime = new Date()05.var hours = currentTime.getHours()06.var minutes = currentTime.getMinutes()07.if (minutes < 10){08.minutes = "0" + minutes09.}10.document.write(hours + ":" + minutes + " ")11.if(hours > 11){12.document.write("PM")13.} else {14.document.write("AM")15.}16.//-->17.</script>18.</h4>প্রদর্শন: It is nowযদি hours or minutes variable 10 হতে কম হয় তবে ৭ ৮ ৯ ইত্যাদি তবে এই সংখ্যার সামনে শূন্য বসানো ভাল অর্থ্যাৎ ০৭, ০৮, ০৯ ইত্যাটি। যদি সময় হয় ১:০১ am তবে ১:১ am লিখলে ভাল দেখায় না। |
| জাভাস্ক্রিপ্ট ফর্ম ভেলিডেশন (JavaScript Form Validation Tutorial in Bangla) |
| Order গ্রহন করা,guestbook entry করা, বা অন্যান্য ডেটা যেগুলি ফর্মের মাধ্যমে সাবমিট করে,একজন ইউজার যদি এগুলি অসম্পুর্ন করে সাবমিট করে তাহলে এর চেয়ে বড় ঝামেলা আর কিছু নেই। জাভাস্ক্রিপ্ট এর মাধ্যমে এসব ঝামেলা এড়াতে পারেন। এই কৌশলকে বলা হয় “ফর্ম ভেলিডেশন”।জাভাস্ক্রিপ্ট ফর্ম ভেলিডেশন এমন একটি কৌশল যার মাধ্যমে ব্যবহারকারীগন ডেটা সাবমিট করার আগে তার ফর্ম এর তথ্যকে যাচাই করে।জাভাস্ক্রিপ্ট আপনাকে সাহায্যকারী এলার্ট দেখাবে এবং সেটা ব্যবহারকারীগনকে জানাবে যে তার তথ্যটি ভুল বা অসম্পুর্ন ছিল এবং আরও বলবে যে কিভাবে সে সমস্যাটি সমাধান করতে পারবে। এ অধ্যায়ে আমরা কিছু বেসিক ফর্ম ভেলিডেশন নিয়ে আলোচনা করবো। নিচের বিষয় গুলোকে আমরা কিভাবে যাচাই করব তা ধাপে ধাপে আলোচনা করা হয়েছে। ১.একটা text input টি খালি নাকি খালি নয়। ২.যদি text input টি সব সংখ্যার হয়। ৩.যদি text input টি সব বর্ণের হয়। ৪. যদি text input টি সব alphanumeric character (numbers এবং letters) এর হয়। ৫.যদি text input টিতে সঠিক সংখ্যার character থাকে। বিষয়টি দরকার যখন username বা password এর length কে restriction দেয়া থাকে অর্থ্যাৎ তা নির্দিষ্ট সংখ্যা বা বর্ণের বেশি হবে না। ৭.ইমেইল এড্রেস টি বৈধ কিনা ইত্যাদি দেখার জন্য ফর্ম ভেলিডেশন ব্যবহৃত হয়। ফর্ম ভেলিডেশন :Non-Empty চেক করা: এটা একটা common টাইপের ফর্ম ভেলিডেশন । আপনি নিশ্চিত হতে পারবেন যে ব্যবহারকারী এইচটিএমএল ফিল্ড এর মধ্যে ডেটা লিখেছে কিনা। এইচটিএমএল ইনপুট টি খালি নাকি খালি নয় এসব নির্ণয়ের জন্য নিচে বেসিক জাভাস্ক্রিপ্ট কোড লিখা হলো। 01.// If the length of the element’s string is 02.0 then display helper message 03.function notEmpty(elem, helperMsg){ 04.if(elem.value.length == 0){ 05.alert(helperMsg); 06.elem.focus(); // set the 07.focus to this input 08.return false; 09.} 10.return true; 11.} notEmpty function টি চেক করে দেখে যে এইচটিএমএল input এর যে লেখাটি আমরা পাঠাবো সেখানে কিছু আছে কিনা। elem হল HTML text input আমরা এই ফাংশনটি পাঠাবো । জাভাস্ক্রিপ্ট strings এর built in property রয়েছে। তার মধ্যে একটি হল length property । যা string এর length কে return করে। একটা বড় কোড elem.value যা input এর ভিতরে string কে আটকে রাখে। কোডের সাখে length যুক্ত হয়। শেষে দাড়ায় elem.value.length । elem.value.length যদি শূন্য না হয় বা খালি না হয় তবে আমরা সত্য বলে ফিরে পাই। অন্যথা helperMsg এর সাহায্যে ব্যবহারকারীর সামনে একটি alert মেসেজ প্রর্দশিত হয় । কোথায় ব্যবহারকারীর ভুল হয়েছে এই মেসেজটি তা নির্দেশ করে। এটা মিথ্যা হিসাবে ফিরে পাওয়া যায়। উদাহরন: 01.<script type=’text/javascript’> 02.function notEmpty(elem, helperMsg){ 03.if(elem.value.length == 0){ 04.alert(helperMsg); 05.elem.focus(); 06.return false; 07.} 08.return true; 09.} 10.</script> 11.<form> 12.Required Field: <input type=’text’ id=’req1′/> 13.<input type=’button’ 14.onclick=”notEmpty(document. 15.getElementById(‘req1′), ‘Please Enter a Value’)” 16.value=’Check Field’ /> 17.</form> প্রদর্শন: Top of Form Bottom of Form যদি কেউ ক্রেডিট কার্ড,ফোন নম্বর, zip কোড ইত্যাদি ইনপুট টেক্সটে লিখে তবে আপনাকে কোডের মাধ্যমে নিশ্চিত করতে হবে যে ইনপুট টেক্সটটি হবে সংখ্যার। এসব চেক করার দ্রুত উপায় হচ্ছে যদি input এর string ভেলু হয় সব সংখ্যার যার regular expression হচ্ছে /^[0-9]+$/ এবং তা match করবে যদি string হয় সব সংখ্যার আর তা অন্ততপক্ষে এক character এর হয়। 01.// If the element’s string matches the 02.regular expression it is all numbers 03.function isNumeric(elem, helperMsg){ 04.var numericExpression = /^[0-9]+$/; 05.if(elem.value.match(numericExpression)){ 06.return true; 07.}else{ 08.alert(helperMsg); 09.elem.focus(); 10.return false; 11.} 12.} উপরের কোডের ভিতরে প্রত্যেকটি string হল একটি function যার নাম match । এই function টি ব্যবহার করে দেখতে পারেন যে string এর সাথে match করেছে কিনা। আমরা টিকে এভাবে ব্যবহার করতে পারি যেমন: elem.value.match(এখানে expression) আমরা যদি দেখতে চাই যে ইনপুটের string টি সব সংখ্যা ছিল কিনা, সেক্ষেত্রে আমরা সংখ্যা চেক করার জন্য regular expression তৈরী করেছি যা numericExpression হিসাবে জমা রাখে। আমরা regular expression এর সহিত match function ব্যবহার করেছি। যদি এটা numeric হয়ে থাকে তবে match function টি সত্য বলে ফিরে পাব। আমাদের isNumeric function টিও সত্য বলে ফিরে পাব। যদি ইনপুট string টি বর্ণ বা অন্য characters হয় তবে আমাদের expression টি ব্যর্থ হবে। ফলে helperMsg টি প্রদর্শিত হবে এবং মিথ্যা বলে ফিলে পাব। উদাহরন: 01.<script type=’text/javascript’> 02.function isNumeric(elem, helperMsg){ 03.var numericExpression = /^[0-9]+$/; 04.if(elem.value.match(numericExpression)){ 05.return true; 06.}else{ 07.alert(helperMsg); 08.elem.focus(); 09.return false; 10.} 11.} 12.</script> 13.<form> 14.Numbers Only: <input type=’text’ id=’numbers’/> 15.<input type=’button’ 16.onclick=”isNumeric(document.getElementById 17.(‘numbers’), ‘Numbers Only Please’)” 18.value=’Check Field’ /> 19.</form> প্রদর্শন: Top of Form Bottom of Form এই isAlphabet function টি isNumeric function এর মত তবে ব্যতিক্রম শুধুমাত্র regular expression পরিবর্তনের ক্ষেত্রে। আমরা ভিতরে match function টি ব্যবহার করেছি । এখানে আমরা সংখ্যা চেক করার পরিবর্তে বর্ণ চেক করবো। আমরা যদি দেখতে চাই আমাদের string টি শুধু বর্ণ ধারন করবে, তবে আমরা lowercase এবং uppercase উভয়ের ক্ষেত্রে expression নির্দিষ্ট করে দেব। 01.// If the element’s string matches the 02.regular expression it is all letters 03.function isAlphabet(elem, helperMsg){ 04.var alphaExp = /^[a-zA-Z]+$/; 05.if(elem.value.match(alphaExp)){ 06.return true; 07.}else{ 08.alert(helperMsg); 09.elem.focus(); 10.return false; 11.} 12.} উদাহরন: 01.<script type=’text/javascript’> 02.function isAlphabet(elem, helperMsg){ 03.var alphaExp = /^[a-zA-Z]+$/; 04.if(elem.value.match(alphaExp)){ 05.return true; 06.}else{ 07.alert(helperMsg); 08.elem.focus(); 09.return false; 10.} 11.} 12.</script> 13.<form> 14.Letters Only: <input type=’text’ id=’letters’/> 15.<input type=’button’ 16.onclick=”isAlphabet(document.getElementById 17.(‘letters’), ‘Letters Only Please’)” 18.value=’Check Field’ /> 19.</form> প্রদর্শন: Top of Form Bottom of Form আমরা isAlphabet এবং isNumeric function উভয় কে একত্র করে একটি function এ রুপান্তরিত করেছি যা দ্বারা আমরা ইনপুটের বর্ণ ও সংখ্যা উভয়কে চেক করতে পারি। যেমন: isAlphanumeric 01.// If the element’s string matches the regular 02.expression it is numbers and letters 03.function isAlphanumeric(elem, helperMsg){ 04.var alphaExp = /^[0-9a-zA-Z]+$/; 05.if(elem.value.match(alphaExp)){ 06.return true; 07.}else{ 08.alert(helperMsg); 09.elem.focus(); 10.return false; 11.} 12.} ফর্ম ভেলিডেশন – Character এর দৈর্ঘ্য বা Length এর বিধিনিষেধ: Character নম্বরের বিধিনিষেধ দেয়ায় ব্যবহারকারী সহজে field এ প্রবেশ করতে পারবে ফলে অপ্রাসঙ্গিক ডেটা প্রতিরোধ করা যায়। যেমন আপনি জানেন যে zip কোড ৫ সংখ্যার হওয়া উচিত সেক্ষেত্রে ২ সংখ্যার হওয়া উচিত নয়। নিচে আমরা lengthRestriction function টি তৈরী করেছি সেখানে আমরা দুটি সংখ্যার মাধ্যমে টেক্সটে ডেটা ইনপুট করার জন্য minimum এবং maximum Character এর সংখ্যা নির্ধারন করে দিয়েছি। 01.function lengthRestriction(elem, min, max){ 02.var uInput = elem.value; 03.if(uInput.length >= min && uInput.length <= max){ 04.return true; 05.}else{ 06.alert(“Please enter between “ 07.+min+ ” and ” +max+ ” characters”); 08.elem.focus(); 09.return false; 10.} 11.} উদাহরন: 01.<script type=’text/javascript’> 02.function lengthRestriction(elem, min, max){ 03.var uInput = elem.value; 04.if(uInput.length >= min && uInput.length <= max){ 05.return true; 06.}else{ 07.alert(“Please enter between “ 08.+min+ ” and ” +max+ ” characters”); 09.elem.focus(); 10.return false; 11.} 12.} 13.</script> 14.<form> 15.Username(6-8 characters): <input 16.type=’text’ id=’restrict’/> 17.<input type=’button’ 18.onclick=”lengthRestriction 19.(document.getElementById(‘restrict’), 6, 8)” 20.value=’Check Field’ /> 21.</form> প্রদর্শন: Top of Form Bottom of Form এখানে madeSelection function টি ব্যবহার করা হয়েছে। ব্যবহারকারী এইচটিএমএল select input হতে যেকোন বিষয় select করতে পারবেন। আপনি সাধারন trick হিসাবে ব্যবহারকারীর জন্য প্রথম অপশন কে সাহায্যকারী prompt হিসাবে রাখতে পারেন। প্রথম অপশন হিসাবে select input- এ কিছু রাখতে পারেন যেমন: “Please Choose” । 01.function madeSelection(elem, helperMsg){ 02.if(elem.value == “Please Choose”){ 03.alert(helperMsg); 04.elem.focus(); 05.return false; 06.}else{ 07.return true; 08.} 09.} উদাহরন: 01.<script type=’text/javascript’> 02.function madeSelection(elem, helperMsg){ 03.if(elem.value == “Please Choose”){ 04.alert(helperMsg); 05.elem.focus(); 06.return false; 07.}else{ 08.return true; 09.} 10.} 11.</script> 12.<form> 13.Selection: <select id=’selection’> 14.<option>Please Choose</option> 15.<option>CA</option> 16.<option>WI</option> 17.<option>XX</option> 18.</select> 19.<input type=’button’ 20.onclick=”madeSelection(document.getElementById 21.(‘selection’), ‘Please Choose Something’)” 22.value=’Check Field’ /> 23.</form> প্রদর্শন: Top of Form Bottom of Form এখন আপনাদের দেখাবো যে, ব্যবহারকারীর ইমেইলটি বৈধ কিনা তা কিভাবে আপনি চেক করতে পারবেন । অবশ্যই ইমেইলে অন্ততপক্ষে @ sign এবং dot (.) থাকবে যেখানে @ sign টি ইমেইল এর প্রথম Character হবে না এবং শেষের dot (.) টি @ sign এর পরে অবশ্যই এক Character এর হবে। Valid উদাহরন:
02.var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+ 03.\.[a-zA-z0-9]{2,4}$/; 04.if(elem.value.match(emailExp)){ 05.return true; 06.}else{ 07.alert(helperMsg); 08.elem.focus(); 09.return false; 10.} 11.} উদাহরন: 01.<script type=’text/javascript’> 02.function emailValidator(elem, helperMsg){ 03.var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+ 04.\.[a-zA-z0-9]{2,4}$/; 05.if(elem.value.match(emailExp)){ 06.return true; 07.}else{ 08.alert(helperMsg); 09.elem.focus(); 10.return false; 11.} 12.} 13.</script> 14.<form> 15.Email: <input type=’text’ id=’emailer’/> 16.<input type=’button’ 17.onclick=”emailValidator(document.getElementById 18.(‘emailer’), ‘Not a Valid Email’)” 19.value=’Check Field’ /> 20.</form> প্রদর্শন: Top of Form Bottom of Form |
| জাভাস্ক্রিপ্ট স্ট্রিং ফাংশন (JavaScript String Functions Tutorial in Bangla) |
| এটা আপনার কাছে পুরাতন মনে হতে পারে তবে ভিতরে প্রত্যেক জাভাস্ক্রিপ্ট স্ট্রিং হল কতিপয় ফাংশন যা আপনার আদেশক্রমে কাজের অপেক্ষায় থাকে। এর কারন হচ্ছে জাভাস্ক্রিপ্ট-এ স্ট্রিং মূলত এক গুচ্ছ property এবং function(যাকে method ও বলা হয়) বিশিষ্ট object ।Pseudo জাভাস্ক্রিপ্ট কোড: 01.<script> 02.var myString = “Hello Thur!”; 03. 04.//This is how you would access a property 05.var myProperty = myString.property; 06. 07.//This is how you would access a function 08.var myFunctionResult = myString.function(argument1, argument2); 09.</script> স্ট্রিং প্রোপার্টি কি?(String Property) String property হচ্ছে যা object সম্পর্কে কিছু মৌলিক তথ্য দেয়।যেমন: String object এর length property রয়েছে যা String-এ characters এর সংখ্যা জমা রাখে। স্ট্রিং ফাংশন কি? (String Function) আপনার String সম্পর্কে অনেককিছু পেতে String Function টি অনেক উপকারী। যেমন: আপনি String Function এর মাধ্যমে String পেলেন এবং অনেকগুলো খন্ডে বিভক্ত করলেন যেখানে character গুলো আপনি সরবারহ করেছেন। এটা গুরুত্বপুর্ন বিষয় হচ্ছে এই ফাংশনগুলি মূলত String কে পরিবর্তন করে না তবে তারা নতুন String রিটার্ন করে যা আপনি জমা রাখতে পারেন। String Functions এবং Properties: এই অধ্যায়ে দেখানো হয়েছে কিভাবে আপনি String কে পরিচালনা,গণনা,প্রতিস্থাপন,রিঅর্ডার এবং সার্চ করতে পারেন। এই advanced বিষয়টি আপনাকে dynamic ওয়েব পেজ তৈরীর ক্ষেত্রে নতুন এক জগতের দ্বার উন্মোচন করে দেবে । |
| জাভাস্ক্রিপ্ট স্ট্রিং লেংথ বা দৈর্ঘ্য (JavaScript String Length) |
| জাভাস্ক্রিপ্ট স্ট্রিং লেংথ বা দৈর্ঘ্য (JavaScript String Length)Advanced scripter দের প্রায়ই জানার প্রয়োজন হয় যে String টি কেমন হবে। যেমন ধরুন একজন ওয়েব ডেভেলপার একটা submission ফর্ম তৈরী করলো যেখানে ইউজার নেম এর জন্য ২০ অক্ষরের এর বেশি নির্ধারন করা হয়নি, ফলে তার উচিত হবে ব্যবহারকারীকে ফর্ম ডেটা সাবমিট করতে অনুমতি দেয়ার আগে স্ট্রিং এর length চেক করে নেয়া। স্ট্রিং লেংথ প্রোপার্টি (String Length Property) length property টি character এর সংখ্যাকে রির্টান করে যা স্ট্রিং-এ রয়েছে। 01.<script> 02.var myString = “123456″; 03. 04.var length = myString.length; 05. 06.document.write(“The string is this long: ” + length); 07. 08.// Same thing, but using the property inside the write function 09.document.write(“<br />The string is this long: ” + myString.length); 10. 11.</script> প্রদর্শন: The string is this long: 6 The string is this long: 6The string is this long: 6 The string is this long: 6 স্ট্রিং পরিবর্তন হলে Length ও পরিবর্তন হবে: স্ট্রিং এ কিছু character যোগ করার পর যদি আপনি length property র রেফারেন্স দেন তবে length property টির পরিবর্তন হবে। 1.<script> 2.var myString = “123456″; 3.document.write(“The string is this long: ” + myString.length); 4. 5.myString = myString + “7890″; 6.document.write(“<br />The string is now this long: ” + myString.length); 7. 8.</script> প্রদর্শন: The string is this long: 6 The string is now this long: 10The string is this long: 6 The string is now this long: 10 |
| জাভাস্ক্রিপ্ট স্ট্রিং স্প্লিট ফাংশন (JavaScript Split Function) |
| স্ট্রিং কে বিভিন্ন টুকরাতে বিভক্ত করার ক্ষমতা যা অনেক প্রোগ্রামিং ল্যাংগুয়েজ সমর্থন করে। জাভাস্ক্রিপ্টও তা করে।যদি আপনার অনেক লম্বা স্ট্রিং যেমন: “Bobby Susan Tracy Jack Phil Yannis” এবং প্রত্যেকটি নামকে আলাদা আলাদা ভাবে জমা রাখতে পারেন। আপনি space character ” ” কে নির্দেশ করতে পারেন। split function টি নতুন টুকরা তৈরী করবে যা প্রত্যকবার স্পেসকে লক্ষ করে।স্প্লিট ফাংশন ডিলিমিটার (Split Function: Delimiter) space character ” ” টি হবে আমাদের delimiter এবং split function যা স্ট্রিং কে বিভক্ত করতে এটা ব্যবহার করে। প্রত্যেক সময় এটা delimiter কে লক্ষ করে যা আমরা নির্দেশ করেছি। এটা array তে নতুন এলিমেন্ট তৈরী করে। split function এর প্রথম যুক্তি হচ্ছে delimiter । সাধারন স্প্লিট ফাংশন এর উদাহরন: নিচে সংখ্যার স্ট্রিং এর উদাহরন দেয়া হলো। স্ট্রিং টি বিভক্ত হয় যখন এটি ৫ সংখ্যাটিকে দেখে। এখানে ৫ হচ্ছে delimiter । লক্ষ্য করার বিষয় হচ্ছে split function টি array কে রির্টান করে যাকে mySplitResult এ জমা রাখতে পারি। 1.<script> 2.var myString = “123456789″; 3. 4.var mySplitResult = myString.split(“5″); 5. 6.document.write(“The first element is ” + mySplitResult[0]); 7.document.write(“<br /> The second element is ” + mySplitResult[1]); 8.</script> প্রদর্শন: The first element is 1234 The second element is 6789The first element is 1234 The second element is 6789 উপরের উদাহরনে আমরা ৫ কে delimiter হিসাবে পছন্দ করেছি। তবে এটা আমাদের ফলাফল নয়। কারন delimiter টি String হতে বিতাড়িত হয়। পরবর্তি character গুলো ফাঁকা অংশ দ্বারা পৃথক হয়। বড় Split Function এর উদাহরন: নিচে আমরা split function এর উদাহরন তৈরী করেছি যেখানে বর্ণিত হয়েছে যে কিভাবে এই ফাংশনটি স্ট্রিং কে split করে। আমরা শূন্য হতে চারের স্ট্রিং তৈরী করেছি। এই উদাহরনে delimiter হচ্ছে space character ” ” । 01.<script> 02.var myString = “zero one two three four”; 03. 04.var mySplitResult = myString.split(” “); 05. 06.for(i = 0; i < mySplitResult.length; i++){ 07.document.write(“<br /> Element ” + i + ” = ” + mySplitResult[i]); 08.} 09.</script> প্রদর্শন: Element 0 = zero Element 1 = one Element 2 = two Element 3 = three Element 4 = four Element 0 = zero Element 1 = one Element 2 = two Element 3 = three Element 4 = four |
| জাভাস্ক্রিপ্ট স্ট্রিং অনুসন্ধান (JavaScript String Search) |
| আপনার যদি অনলাইন ফোরাম থাকে এবং যেই ইউজার নেম এ অপ্রত্যাশিত শব্দ অন্তর্ভুক্ত হয়েছে যদি আপনি চান জনগন সেই ইউজার নেম তৈরী করা থেকে বিরত থাকুক তবে আপনি search function এর মাধ্যমে সেসব খুজে বের করে ইউজার নেম এর অপ্রত্যাশিত শব্দগুলোকে বাদ দিতে পারেন।স্ট্রিং অনুসন্ধান ফাংশন (JavaScript Search Function) এই স্ট্রিং ফাংশনটি regular expression গ্রহন করে এবং স্ট্রিং কে পরীক্ষা করে দেখে যে তা regular expression এর সাথে match করেছে কিনা। যদি match করে তবে এটা স্ট্রিং এর position রিটার্ন করবে। আর যদি match না করে তবে -১ রিটার্ন করবে। Search Function Regular Expression: এটা মনে রাখা গুরুত্বপুর্ন যে, যখন আপনি regular expression তৈরী করবেন তখন এটা অবশ্যই দুটি slash এর মধ্যে থাকবে। নিচে উদাহরন দেয়া হলো। 01.<script> 02.var myRegExp = /Alex/; 03.var string1 = “Today John went to the store and talked with Alex.”; 04.var matchPos1 = string1.search(myRegExp); 05. 06.if(matchPos1 != -1) 07.document.write(“There was a match at position ” + matchPos1); 08.else 09.document.write(“There was no match in the first string”); 10. 11. 12.</script> প্রদর্শন: There was a match at position 45There was a match at position 45 লক্ষ্য করুন, আমাদের regular expression টি ছিল শুধু একটা নাম ”Alex” । ফলে search function টি এই নাম ব্যবহার করে দেখেছে যে string1 এ এটা উপস্থিত রয়েছে কিনা। এটা ফাংশনের সাথে match করেছে ফলে আমরা match এর পজিশন (৪৫) ফিরে পেয়েছি। স্ট্রিং অনুসন্ধান ফাংশন (String Search Function: Alternative Searches) regular expression এর আরেকটি বেসিক টুল হলো pipe character “|” । যার মাধ্যমে Alternative শব্দ search করতে পারেন । এর ফরমেট হলো /RegExp1|RegExp2/ । শুধুমাত্র একটা শব্দ search করার পরিবর্তে আপনি এখন pipe character এর মাধ্যমে অনেক গুলো শব্দ search করতে পারেন। 01.<script> 02.var myRegExp = /Alex|John/; 03.var string1 = “Today John went to the store and talked with Alex.”; 04.var matchPos1 = string1.search(myRegExp); 05. 06.if(matchPos1 != -1) 07.document.write(“There was a match at position ” + matchPos1); 08.else 09.document.write(“There was no match in the first string”); 10. 11. 12.</script> প্রদর্শন: There was a match at position 6There was a match at position 6 লক্ষ্য করুন আমাদের regular expression এ দুটি নাম রয়েছে: Alex এবং John । ফলে search function টি এই নাম দুটি খুজতে ব্যবহার করেছে এবং দেখেছে string1 এ এগুলো উপস্থিত রয়েছে কিনা। উন্নততর অনুসন্ধান ফাংশন এর উদাহরন (Advanced Search Function) নিচের উদাহরনের মাধ্যমে পরিস্কার ভাবে বোঝা যাবে যে search function টি কিভাবে কাজ করে। 01.<script> 02.var myRegExp1 = /Tom|Jan|Alex/; 03.var string1 = “John went to the store and talked with Alexandra today.”; 04.var matchPos1 = string1.search(myRegExp1); 05. 06.if(matchPos1 != -1) 07.document.write(“The first string found a match at ” + matchPos1); 08.else 09.document.write(“No match was found in the first string”); 10. 11.var myRegExp2 = /Tom|Jan|Alex /; 12.var string2 = “John went to the store and talked with Alexandra today.”; 13.var matchPos2 = string2.search(myRegExp2); 14.if(matchPos2 != -1) 15.document.write(“<br />The second string found a match at ” + matchPos2); 16.else 17.document.write(“<br />No match was found in the second string”); 18. 19.var myRegExp3 = /Tom|Jan|Alexandra/; 20.var string3 = “John went to the store and talked with Alexandra today.”; 21.var matchPos3 = string3.search(myRegExp3); 22.if(matchPos3 != -1) 23.document.write(“<br />The third string found a match at ” + matchPos3); 24.else 25.document.write(“<br />No match was found in the third string”); 26. 27.var myRegExp4 = /Tom|Jan|Alexandra/; 28.var string4 = “John went to the store and talked with Alex today.”; 29.var matchPos4 = string4.search(myRegExp4); 30.if(matchPos4 != -1) 31.document.write(“<br />The fourth string found a match at ” + matchPos4); 32.else 33.document.write(“<br />No match was found in the fourth string”); 34.</script> প্রদর্শন: The first string found a match at 39 No match was found in the second string The third string found a match at 39 No match was found in the fourth stringThe first string found a match at 39 No match was found in the second string The third string found a match at 39 No match was found in the fourth string |
| জাভাস্ক্রিপ্ট স্ট্রিং রিপ্লেস (JavaScript String Replace) |
| জাভাস্ক্রিপ্ট স্ট্রিং অবজেক্ট এর এমন ক্ষমতা রয়েছে যার মাধ্যমে আপনি স্ট্রিং এর ভেতর যেকোন শব্দকে রিপ্লেস করতে পারেন। রিপ্লেস ফাংশনের সাহাধ্যে আপনি এইটটিএমএল ফর্ম এর মাধ্যমে আপনি ব্যবহারকারীর নাম সংগ্রহ করতে পারেন।স্ট্রিং রিপ্লেস ফাংশন: স্ট্রিং রিপ্লেস ফাংশন এর দুই ধরনের যুক্তি রয়েছে: ১.SearchFor: কোন শব্দটি রিপ্লেস হতে যাচ্ছে। এটা হতে পারে স্ট্রিং বা রেগুলার এক্সপ্রেশন। ২.ReplaceText: কোন শব্দকে রিপ্লেস করা হবে। এর স্ট্রিং এর প্রয়োজন। রিপ্লেস ফাংশনটি রিপ্লেসকৃত শব্দসহ নতুন স্ট্রিং রিটার্ন করে। যদি কোন নতুন শব্দ রিপ্লেস করা না হয় তবে পুরাতন স্ট্রিংটি রিটার্ন করে। রিপ্লেস ফাংশন:স্ট্রিং রিপ্লেস এখন আমরা স্ট্রিংকে সার্চ করবো এবং ব্যবহারকারীর নাম দ্বারা এটাকে রিপ্লেস করবো। প্রথম যুক্তি হচ্ছে আমরা কি সার্চ করছি এবং দ্বিতীয়টি হচ্ছে কি রিপ্লেস করতে যাচ্ছি। 01.<script> 02.var visitorName = “Chuck”; 03.var myOldString = “Hello username! I hope you enjoy your stay username.”; 04.var myNewString = myOldString.replace(“username”, visitorName); 05. 06.document.write(“Old string = ” + myOldString); 07.document.write(“<br />New string = ” + myNewString); 08. 09.</script> প্রদর্শন: Old string = Hello username! I hope you enjoy your stay username. New string = Hello Chuck! I hope you enjoy your stay username.Old string = Hello username! I hope you enjoy your stay username. New string = Hello Chuck! I hope you enjoy your stay username. উপরে দেখা যাচ্ছে শুধুমাত্র প্রথম ইউজার নামটি পরিবর্তিত হয়েছে। এটা হচ্ছে SearchFor যুক্তির সীমাবদ্ধতা। রেগুলার এক্সপ্রেশন ব্যবহারের মাধ্যমে এই সমস্যা দুর করতে পারি। রিপ্লেস ফাংশন:রেগুলার এক্সপ্রেশন আমরা স্ট্রিং এর পরিবর্তে রেগুলার এক্সপ্রেশন ব্যবহার করব। এখানে পার্থক্য হচ্ছে শুধু কোয়াটেশনের পরিবর্তে স্ল্যাশ ব্যবহার করবো। 01.<script> 02.var visitorName = “Chuck”; 03.var myOldString = “Hello username! I hope you enjoy your stay username.”; 04.var myNewString = myOldString.replace(/username/, visitorName); 05. 06.document.write(“Old string = ” + myOldString); 07.document.write(“<br />New string = ” + myNewString); 08. 09.</script> প্রদর্শন: Old string = Hello username! I hope you enjoy your stay username. New string = Hello Chuck! I hope you enjoy your stay username.Old string = Hello username! I hope you enjoy your stay username. New string = Hello Chuck! I hope you enjoy your stay username. কিন্তু তারপরও দেখা যচ্ছে সব ইউজার নাম পরিবর্তন হয়নি।রেগুলার এক্সপ্রেশন এর গ্লোবাল প্রপার্টির মাধ্যমে এই সমস্যা দুর করা যায়। রিপ্লেস ফাংশন:গ্লোবাল রেগুলার এক্সপ্রেশন রেগুলার এক্সপ্রেশন এর শেষে g ইনপুট করে আমরা গ্লোবাল এক্সপ্রেশন তৈরী করতে পারি। 01.<script> 02.var visitorName = “Chuck”; 03.var myOldString = “Hello username! I hope you enjoy your stay username.”; 04.var myNewString = myOldString.replace(/username/g, visitorName); 05. 06.document.write(“Old string = ” + myOldString); 07.document.write(“<br />New string = ” + myNewString); 08. 09.</script> প্রদর্শন: Old string = Hello username! I hope you enjoy your stay username. New string = Hello Chuck! I hope you enjoy your stay Chuck.Old string = Hello username! I hope you enjoy your stay username. New string = Hello Chuck! I hope you enjoy your stay Chuck. যাহোক শেষে আমরা সফল হলাম।আমাদের মনে রাখতে হবে যে যদি আমরা একটি শব্দ রিপ্লেস করতে চাই সেক্ষেত্রে স্ট্রিং বা সাধারন রেগুলার এক্সপ্রেশন ব্যবহার করা উচিত।যদি সব রিপ্লেস করতে চাই সেক্ষেত্রে গ্লোবাল রেগুলার এক্সপ্রেশন ব্যবহার করা উচিত। |
| জাভাস্ক্রিপ্ট স্ট্রিং ইনডেক্সঅফ ফাংশন টিউটোরিয়াল (JavaScript indexOf Function) |
| লেখক মো:রেজওয়ানুল আলম | |
| স্ট্রিং ফাংশন indexOf এর মাধ্যমে আপনি সাধারন সার্চের প্রয়োজনে দুই ধরনের যুক্তি ফাংশনটির মাধ্যমে পাবেন। প্রথমটি হচ্ছে সার্চ কোয়েরি এবং পরেরটি হচ্ছে অফসেট।স্ট্রিং ইনডেক্সঅফ ফাংশন: ইনডেক্সঅফ ফাংশনে দু ধরনের যুক্তি রয়েছে। যার দ্বিতীয়টি হচ্ছে ঐচ্ছিক। ১.SearchString:যা আপনি সার্চ করতে চাচ্ছেন। ২.Offset (ঐচ্ছিক): ইনডেক্সঅফ ফাংশন উদাহরন: সাধারন ইউআরএল স্ট্রিং এ www এর পজিশন বের করতে পারি। 1.<script> 2.var aURL = “http://www.tizag.com/”; 3.var aPosition = aURL.indexOf(“www”); 4.document.write(“The position of www = ” + aPosition); 5.</script> প্রদর্শন: The position of www = 7The position of www = 7 ইনডেক্সঅফ ফাংশন অফসেট উদাহরন: যদি আমরা ইনডেক্সঅফ ফাংশন ব্যবহার করে প্রথম www এর পজিশন বের করতে পারি তেমনি প্রথম www কে বন্ধ করে পরের www এর পজিশন বের করতে পারি। 1.<script> 2.var aURL = “http://www.tizag.com/www.html”; 3.var aPosition = aURL.indexOf(“www”); 4.var secondPos = aURL.indexOf(“www”, aPosition + 1); 5.document.write(“The position of www = ” + aPosition); 6.document.write(“<br />The position of the second www = ” + secondPos); 7.</script> প্রদর্শন: The position of www = 7 The position of the second www = 21The position of www = 7 The position of the second www = 21 | |
| জাভাস্ক্রিপ্ট গেটএলিমেন্টবাইআইডি(JavaScript getElementById Tutorial in Bangla) | |
আপনি কি কখনও জাভাস্ক্রিপ্ট ব্যবহার করে ফর্ম ভেলিডেশন করেছেন?টেক্সট ফিল্ডের কোন ভেলু যাচাই করতে কোন সমস্যায় পড়েছেন?একটা সহজ উপায়ের মাধ্যমে এইচটিএমএল এলিমেন্ট নিয়ন্ত্রন করতে পারেন।আইডি এট্রিবিউট এবং গেটএলিমেন্টবাইআইডি ফাংশনের মাধ্যমে তা করতে পারেন।জাভাস্ক্রিপ্ট: ডকুমেন্ট.গেটএলিমেন্টবাইআইডি (document.getElementById)01.<script type="text/javascript">02.function notEmpty(){03.var myTextField = document.getElementById('myText');04.if(myTextField.value != "")05.alert("You entered: " + myTextField.value)06.else07.alert("Would you please enter some text?") 08.}09.</script>10.<input type='text' id='myText' />11.<input type='button' onclick='notEmpty()' value='Form Checker' />প্রদর্শন: document.getElementById টি মাইটেক্সট এইচটিএমএল এলিমেন্ট এর রেফারেন্সকে রিটার্ন করে।আমরা এই রেফারেন্সকে myTextField নামক ভেরিয়েবলে জমা করতে পারি। গেটএলিমেন্টবাইআইডি বিষয়ে যা মনে রাখা দরকার: যখন আপনি getElementById function ব্যবহার করবেন তখন আপনাকে কিছু বিষয় সন্বন্ধে নিশ্চিত হওয়া প্রয়োজন। আপনাকে অবশ্যই মনে রাখা প্রয়োজন যে গেটএলিমেন্টবাইআইডি হচ্ছে ডকুমেন্ট অবজেক্ট এর পদ্ধতি বা ফাংশন।আপনি এই গেটএলিমেন্টবাইআইডি ফাংশন ব্যবহার করতে চাইলে আপনাকে অবশ্যই এইচটিএমএল এলিমেন্ট এর আইডি এট্রিবিউট ব্যবহার করতে হবে। |
| জাভাস্ক্রিপ্ট ইনার এইচটিএমএল(JavaScript innerHTML) |
এটা বিম্ময়কর যে আমরা কিভাবে এইচটিএমএল কনটেন্টকে পরিবর্তন করতে পারবো! ইনার এইচটিএমএল এর মাধ্যমে আমরা টেক্সটকে পরিবর্তন করতে পারি।
ইনার এইচটিএমএল (innerHTML) এর মাধ্যমে টেক্সটের পরিবর্তন:
প্রত্যেক এইচটিএমএল এলিমেন্ট এর ইনার এইচটিএমএল প্রপার্টি রয়েছে যা এইচটিএমএল কোড এবং টেক্সট উভয়কে নির্দেশ করে যাকে ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে পাওয়া যায়।এলিমেন্টের ইনার এইচটিএমএল প্রপার্টি পরিবর্তন করে আকর্ষণীয় ওয়েব পেজ তৈরী করা যায়।ইনার এইচটিএমএল প্রপার্টি কে সহজভাবে ব্যবহার করতে চাইলে কিছু প্রস্তুতির প্রয়োজন। প্রথমে এলিমেন্ট এর আইডি দিতে হবে তারপর তাকে getElementById function এর মাধ্যমে পরিচালনা করতে হবে।
1.<script type="text/javascript">2.function changeText(){3.document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';}4.</script>5.<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 6.<input type='button' onclick='changeText()' value='Change Text'/>প্রদর্শন
Welcome to the site dude
যাহোক আমরা জানলাম কিভাবে এইচটিএমএল এলিমেন্ট এর টেক্সটকে পরিবর্তন করা যায়।কিন্তু আমরা এখনও জানিনা কিভাবে ব্যবহারকারীর দেয়া টেক্সটের সাপেক্ষে আমরা এইচটিএমএল টেক্সটকে পরিবর্তন করতে পারবো। নিচে এর আলোচনা করা হলো।
ইউজার ইনপুটের উপর ভিত্তি করে টেক্সটের পরিবর্তন:
01.<script type="text/javascript">02.function changeText2(){03.var userInput = document.getElementById('userInput').value;04.document.getElementById('boldStuff2').innerHTML = userInput;}05. 06.</script>07.<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 08.<input type='text' id='userInput' value='Enter Text Here' />09.<input type='button' onclick='changeText2()' value='Change Text'/> প্রদর্শন
Welcome to the site dude
ইনার এইচটিএমএল (innerHTML) এর সহিত এইচটিএমএল এর পরিবর্তন:
আপনি এলিমেন্টের মধ্যে এইচটিএমএল ইনসার্ট করতে পারেন। আমরা টেক্সটের কালারও পরিবর্তন করতে পারি।
01.<script type="text/javascript">02.function changeText3(){03.var oldHTML = document.getElementById('para').innerHTML;04.var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>";05.document.getElementById('para').innerHTML = newHTML;}06. 07.</script>08.<p id='para'>Welcome to the site <b id='boldStuff3'>dude</b> </p> 09.<input type='button' onclick='changeText3()' value='Change Text'/>প্রদর্শন
Welcome to the site dude
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন