JAVA Class 01
===========
জাভাস্ক্রিপ্ট টিউটোরিয়াল | ভূমিকা
(Javascript
Tutorial in Bangla)
জাভাস্ক্রিপ্ট হল একটি ক্লাইন্ট সাইড স্ক্রিপ্টিং ল্যাংগুয়েজ
বা ব্রাউজার স্ক্রিপ্টিং। ক্লাইন্ট সাইড
স্ক্রিপ্টিং ল্যাংগুয়েজ এর অর্থ হচ্ছে ব্রাউজার এই স্ক্রিপ্টগুলোকে run/execute করবে। ক্লাইন্ট সাইড এর বিপরীত হল সার্ভার সাইড, সার্ভার সাইড ল্যাংগুয়েজ গুলোর কোড ওয়েব
সার্ভার এর মাধ্যমে execute/run হয়।
** JAVA এবং Javascript
সম্পূর্ন আলাদা ল্যাংগুয়েজ। JAVA হচ্ছে পূর্নাঙ্গ একটা অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং ল্যাংগুয়েজ আর Javascript হচ্ছে স্ক্রিপ্টিং ল্যাংগুয়েজ। জাভাস্ক্রিপ্ট ও প্রোগ্রামিং ল্যাংগুয়েজ তবে এটা শুধু ব্রাউজারে
কাজ করে যেখানে JAVA দিয়ে সম্পূর্ন আলাদা এপ্লিকেশন বানানো যায় যেটা পিসিতে রান করে।
** Javascript এর অনেক কিছু বিশেষ করে syntax গুলি JAVA থেকে ধার করা তবে
জাভাস্ক্রিপ্ট শিখতে JAVA বা কোন ল্যাংগুয়েজ আগে থেকে জানার
প্রয়োজন নেই।
** জাভাস্ক্রিপ্ট
মুলত ৩টি জিনিস নিয়ে তৈরী ১. ECMAScript
(এটা হচ্ছে জাভাস্ক্রিপ্টের মুল অংশ বা core
functionality) ২. DOM (Document Object Model - ওয়েব পেজের কনটেন্টের সাথে কাজ করে) এবং ৩. BOM (Browser Object
Model - ব্রাউজারের সাথে কাজ করে)
জাভাস্ত্রিপ্ট এর সাহায্যে একটা HTML পেজে নানান ধরনের ইফেক্ট বা আকর্ষণীয়
জিনিস তৈরী করা যায় এছাড়া ফর্ম ভেলিডেশন এবং এজাক্সের কাজও করা যায়। বহুল পরিচিত কাজের মধ্যে আছে
ঘরি
Mouse Trailers ( site ব্রাউজ এর সময় মাউস এ সৃষ্ট এনিমেশন)
ড্রপডাউন মেনু
Alert মেসেজ
পপআপ উইন্ডো
ফর্ম ভেলিডেশন
স্লাইড শো
চলন্ত খবর
আরও অনেক...
জাভাস্ক্রিপ্ট শুরু করার আগে আপনাকে অবশ্যই এইচটিএমএল সম্বন্ধে
ভাল জানতে হবে।
December 22, 2014 at 5:09pm · Public
Dec 26, 2014 ·
JAVA Class 05
============
বহি:স্থ বা এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল
(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 :
function popup() {
alert("Hello World")
}
<html>
<head>
<script src="/myjs.js">
</script>
</head>
<body>
<input type="button" onclick="popup()"
value="Click Me!">
</body>
</html>
কিছু Tips:
১ আপনি যদি একই Script বিভিন্ন পেজে ব্যবহার করতে চান তাহলে external
জাভাস্ক্রিপ্ট file ব্যবহার করতে পারেন।এর ফলে একই কোড প্রত্যেক পেজের জন্য লেখার প্রয়োজন নেই।
২ উভয় ধরনের Script এর জন্য external জাভাস্ক্রিপ্ট
file ব্যবহার করা যায় যেমন এমন টাইপ যা head tag
(functions) এ রাখা হয় আরেক টাইপ যা body tag এ রাখা হয়।
৩ আপনাকে নিশ্চিত করতে হবে যে external জাভাস্ক্রিপ্ট file এ <script> tag অর্ন্তভুক্ত হবে না। সেখানে শুধুমাত্র HTML comment এবং জাভাস্ক্রিপ্ট code ছাড়া আর কিছু থাকবে না।
Unlike · Share
JAVA Class 06
============
জাভাস্ক্রিপ্ট ভেরিয়েবল টিউটোরিয়াল
(JavaScript
Variable Tutorial in Bangla)
ভেরিয়েবল হচ্ছে একটা পাত্র, এখানে যেকোন মান ধরে রাখা যায় এবং পরে
এই ভেরিয়েবল ধরে কাজ করা যায়। জাভাস্ক্রিপ্টে var শব্দটি দিয়ে একাট ভেরিয়েবল লেখা শুরু করা হয়। var এরপর যেকোন নাম যেমন
var adi;
===========
এটা একটা জাভাস্ক্রিপ্ট ভেরিয়েবল। এই ভেরিয়েবলে এখন যেকোন মান রাখতে পারি যেমন
var adi = 'Hi adi';
অথবা
var adi = 10;
** জাভাস্ক্রিপ্ট এ ভেরিয়েবলের নাম এবং স্টেটমেন্ট case
sensitive অর্থ্যাৎ var webcoach এবং var
Webcoach সম্পূর্ন আলাদা ভেরিয়েবল।
** নম্বর দিয়ে ভেরিয়েবলের
নাম শুরু করা যাবেনা যেমন var
5firstNUmber এটা ভুল হবে। আরও কিছু চিহ্ন আছে যেগুলি দিয়ে নাম শুরু করা যাবেনা যেমন
&, % ইত্যাদি। এছাড়া কিছু সংরক্ষিত নাম আছে এগুলি ভেরিয়েবলের নাম হিসেবে
দেয়া যাবেনা যেমন with, var ইত্যাদি।
কিছু সংরক্ষিত নাম
============
break, do, instanceof, typeof, case, else, new, var, catch, finally,
return, void, continue, for, switch, while.... ইত্যাদি
জাভাস্ক্রিপ্ট এ অন্যান্য ল্যাংগুয়েজের মত ডেটা type লিখে দিতে হয়না। পিএইচপির মত সে নিজে নিজেই বের করে নিতে পারে যে ভেরিয়েবলের
মান বা ডেটা টি কোন ধরনের। string নাকি float নাকি
integer সব নিজেই বের করে নেয়।
<!DOCTYPE html>
<html>
<head>
<script>
var adi = 'This is a String';
alert(adi);
var adi= 10;
alert(adi);
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
এখানে রান করিয়ে দেখুন প্রথমে এলার্ট দিবে "This is a String" এরপর var
webcoach এর মান পরিবর্তন হয়ে ১০ হয়েছে তাই পরেরবার এলার্ট দিবে
10. কেননা প্রথমবার "This is a String" মান থাকলেও
পরেরবার webcoach এর মান 10 assign হয়ে গেছে।
ডেটা টাইপ
===============
জাভাস্ক্রিপ্টে কয়েক ধরনের ডেটা আছে।
==> Numerical বা সংখ্যাত্নক ডেটা : এখানে আবার দুটি ভাগ আছে
১. Integer
(পূর্নসংখ্যা) : যেকোন পূর্নসংখ্যা ই integer যেমন 15, 20... এমনকি ঋনাত্নক মানও হতে পারে। শুধু শর্ত হচ্ছে পূর্নাঙ্গ সংখ্যা হতে হবে। -253 থেকে 253 পর্যন্ত।
২. Floating-point
বা দশমিক সংখ্যা : যেকোন দশমিক সংখ্যা হলেই এটার ডেটা টাইপ বা ধরন
হচ্ছে floating-point number. যেমন 2.365 বা এরকম যেকোন সংখ্যা
==> Boolean
ডেটা : এই ডেটা টাইপে শুধু ২ ধরনের মানই থাকতে পারে true এবং false . true হচ্ছে 1 এর সমান আর false
হচ্ছে 0 এর সমান
==> undefined
ডেটা : যখন একটা ভেরিয়েবল ডিক্লেয়ার করা হয় কিন্তু এতে কিছু assign
করা হয়না বা initialize করা না হয় তখন এই
ভেরিয়েবলটির ডেটা টাইপ "undefined" হবে। এই ডেটা টাইপের একটাই মান undefined
==> string ডেটা : যেকোন লেখা বা টেক্সট কে জাভাস্ক্রিপ্ট
স্ট্রিং ডেটা হিসেবে গন্য করে। স্ট্রিং কে সবসময় ডাবল বা সিঙ্গেল কোটেশনের (যেমন "Hi webcoachbd" বা 'Hi
webcoachbd') ভিতর রাখতে হয়। যদি সিঙ্গেল কোটেশনের ভিতর রাখেন তবে স্ট্রিংয়ের ভিতর সিঙ্গেল
quote থাকলে ব্যাকস্ল্যাশ (\) দিয়ে escape করতে হয়। যেমন
var student = 'We are good student, isn\'t not';
==> null ডেটা : null আর undefined
প্রায় একই, একটা পার্থক্য হচ্ছে কোন ভেরিয়েবলের
মান null assign করতে পারে কিন্তু undefined দিতে পারবেন না। যাইহোক var webcoach = null; এভাবে ভেরিয়েবল initialize
করতে পারেন। এই ডেটা টাইপের মান একটাই অর্থ্যাৎ null.
জাভাস্ক্রিপ্টে typeof একটা অপারেটর আছে এটা দিয়ে কোন ভেরিয়েবলে কোন ধরনের
ডেটা আছে বা এর ডেটা টাইপ কি সেটা বের করা যায়। যেমন আমরা উপরে আলোচিত সবগুলি ডেটা টাইপ typeof দিয়ে বের করে যদি দেখতে চাই
<!DOCTYPE html>
<html>
<head>
<script>
var adi;
document.write (typeof adi + '<br/>') ;
var adi = 'Hi adi';
document.write (typeof adi + '<br/>');
var adi = 15;
document.write (typeof adi + '<br/>');
var adi = 20.325;
document.write (typeof adi + '<br/>');
var adi = false;
document.write (typeof adi + '<br/>');
var adi = null;
document.write (typeof adi + '<br/>');
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
null এর ডেটা টাইপ object আসছে কেননা
জাভাস্ক্রিপ্ট null কে একটা ফাকা অবজেক্ট হিসেবে গন্য করে।
December 27, 2014 at 5:30am · Public
Unlike Page · Report
JAVA Class 11
============
জাভাস্ক্রিপ্ট if স্টেটমেন্ট টিউটোরিয়াল
(JavaScript
If Statement Tutorial in Bangla)
এতক্ষনে অনেকগুলি if স্টেটমেন্ট দেখে এসেছেন আগের টিউটোরিয়ালগুলিতে। এটা তেমন কিছুই নয় শুধুমাত্র if() এর ভিতর যে এক্সপ্রেশনটি থাকে সেটা
যাচাই করে।boolean মান যাচাই করে অর্থ্যাৎ দেখে যে এক্সপ্রেশনটি true নাকি false (1 নাকি 0) রিটার্ন করে। যদি true হয় তাহলে
if স্টেটমেন্ট টি এক্সিকিউট হয় এবং এই কোডব্লকে ঢুকে যায়। আর যদি false হয় মানে ০ রিটার্ন করে তাহলে else স্টেটমেন্ট এর কোডব্লকে ঢুকে যায়। যেমন শুধু if স্টেটমেন্টের একটা উদাহরন
var x = 'hi';
if(x == 'hi'){
document.write('yes "x" is equal to "hi"');
}
যদি ২ নম্বর লাইনের এক্সপ্রেশন যদি true রিটার্ন না করত তাহলে কোন আউটপুট দেখাত
না।
if ... else স্টেটমেন্ট
এর উদাহরন
==========================
এখানে দেখুন if() এরপর দ্বিতীয় বন্ধনীতে যে কোডটুকু আছে সেটা ধরলাম স্টেটমেন্ট
১ আর else এর পর দ্বিতীয় বন্ধনীতে যেকোড আছে সেটা ধরলাম স্টেটমেন্ট
২। তাহলে এর ব্যাখ্যা
হবে - যদি এক্সপ্রেশন (x == y) true রিটার্ন করে তাহলে স্টেটমেন্ট ১ এক্সিকিউট হবে আর যদি false রিটার্ন করে (তখনি false রিটার্ন করবে যখন x
ও y সমান হবেনা) তবে স্টেটমেন্ট ২ এক্সিকিউট
হবে।
এই উদাহরনে স্টেটমেন্ট ১ কিংবা স্টেটমেন্ট ২ এ একটি করে লাইন
আছে, এখানে অনেক লাইন থাকতে পারে। এই দ্বিতীয় বন্ধনীর (curly braces) ভিতরে যত কোডই থাকুক না কেন এটা একটা কোডব্লক
বা স্টেটমেন্ট ব্লক।
January 1 at 5:30am · Public
Unlike Page · Report
JAVA Class 12
============
জাভাস্ক্রিপ্ট else if স্টেটমেন্ট টিউটোরিয়াল
(JavaScript
Else If Statement Tutorial in Bangla)
এর আগে if এবং if.. else স্টেটমেন্ট উদাহরন
সহ দেখে এলাম। if দিয়ে একটা কোডব্লক এক্সিকিউট করানো যায় আর if.. else দিয়ে দুটি কোডব্লক লেখা যায় যেখানে কন্ডিশনের উপর
ভিত্তি করে যেকোন একটি কোডব্লক এক্সিকিউট হবে। এখন আপনার যদি একের অধিক কন্ডিশন চেক করতে হয় তখন কি করবেন? এতক্ষন তো একটা কন্ডিশন চেক করা শিখলাম,
একাধিক কন্ডিশন চেক করতে if...else if... else স্টেটমেন্ট আছে জাভাস্ক্রিপ্টে। শুধু জাভাস্ক্রিপ্ট নয় সব প্রোগ্রামিং ল্যাংগুয়েজেই এইসব
স্টেটমেন্টের সুবিধা আছে।
var i = 5;
if(i < 3){
document.write('Hi "i" is small than 5');
}else if(i == 5){
document.write('Hi "i" is equal to 5');
}else{
document.write('bla bla...');
}
আমরা সব উদাহরনে সহজভাবে একটা ভেরিয়েবল ডিক্লেয়ার করে সেটার
একটা স্টাটিক মান দিয়েছি এবং সেই ভেরিয়েবল চেক করে করে if else এগুলির উদাহরন দিয়ে দেখাচ্ছি। এটা শুধু শেখার জন্য আসলে বাস্তবে অনেক কঠিন কঠিন এবং জটিল
এক্সপ্রেশন if() কিংবা
else if() এর ভিতরে চেক করতে হবে এবং এক একটা কোডব্লকে শত
শত লাইন/স্টেটমেন্ট থাকবে। আমাদের উদাহরনে
তো মাত্র একটি করে লাইন আছে। কাজেই খুব গুরত্ব
দিয়ে টিউটোরিয়ালগুলি পড়ুন এবং প্রাকটিস করুন।
শুধু আমরা যেটুুকু দিয়েছি সেটাই শেষ নয়। আমাদের কোড এডিটরে যখন উদাহরনগুলি দেখতে যান তখন সেখানে নিজে
নিজে বিভিন্ন পরিবর্তন করে পরিপক্কতা অর্জন করুন। যেমন উপরের উদাহরনে গিয়ে var x=3 করে দিয়ে দেখতে পারেন, অন্য
এক্সপ্রেশন দিয়ে দেখতে পারেন ইত্যাদি।
January 2 at 5:30am · Public
Unlike Page · Report
JAVA Class 13
============
জাভাস্ক্রিপ্ট হোয়াইল লুপ টিউটোরিয়াল
(JavaScript
While Loop Tutorial in Bangla)
প্রোগ্রামিং এ বিভিন্ন সময় একই কোড বারবার এক্সিকিউট করানোর
প্রয়োজন হয় যেমন যতক্ষন ৫০ পর্যন্ত না পৌছাবে ততক্ষন ০ থেকে ৫০ পর্যন্ত সব বিজোর সংখ্যা
দেখিয়ে যেতে থাকবে। এরুপ কাজ করতে
লুপিং ব্যবহার করা হয়। একটা কন্ডিশন/এক্সপ্রেশন
দেয়া হয় যতক্ষন এই কন্ডিশন পুরন হবেনা ততক্ষন while স্টেটমেন্টের কোড এক্সিকিউট হতে থাকবে।
var i = 0;
while( i < 50){
if(i % 2 != 0){
document.write(i + '<br/>');
}
i++;
}
এখানে while ()
এর ভিতর এক্সপ্রেশনটি চেক করে দেখবে যে i এর মান ৫০ এর চেয়ে ছোট কিনা যদি ছোট হয় তাহলে true রিটার্ন করবে এবং বিজোর সংখ্যার বের করার কোডটুকু (কোডব্লকটুকু) এক্সিকিউট
হবে। বিজোড় হলে document.write এর মাধ্যমে সংখ্যাটি লিখে
দেবে এবং i++ দিয়ে এক এক করে বাড়াতে থাকবে।
প্রথমে i এর মান ০ থেকে শুরু হবে কেননা অামরা var i = 0; আগে ডিক্লেয়ার করেছি লুপের ভিতর প্রবেশের পূর্বেই। এভাবে এক এক করে বাড়বে এবং প্রতিবার i<50 কন্ডিশন/এক্সপ্রেশনটি চেক করবে
যখন i এর মান ৫০ এর সমান হয়ে যাবে তখন false রিটার্ন করবে এবং লুপের ভিতর আর ঢুকবেনা।
===> % দিয়ে মডুলাস ব্যবহার করা হয়েছে, এভাবে জোড় বিজোড় সংখ্যা বের করা যায়। যদি i কে ২ দিয়ে ভাগ করে ভাগশেষ ০ হয় তাহলে i জোড় হয়
আর তা না হলে বিজোড়।
do-while লুপ
==============
do .. while লুপ আর while লুপ একই
শুধু পার্থক্য হচ্ছে do... while লুপে কন্ডিশন চেক হয় শেষে
যেখানে while লুপে শুরুতেই চেক হয়। do... while লুপে শেষে কন্ডিশন চেক হওয়াতে কমপক্ষে একবার লুপটি এক্সিকিউট হবে এমনকি যদি
false রিটার্ন করে।
var i = 0;
do
{
document.write(i+ '<br>')
i++;
}
while (i <= 8)
** while, for ইত্যাদি লুপের ভিতর break স্টেটমেন্ট ব্যবহার করে যেকোন সময় (কন্ডিশনের উপর ভিত্তি করে) বের হয়ে আসা
যায়। break স্টেটমেন্ট লুপ বন্ধ করে দেয় এবং লুপের পরবর্তী কোড এক্সিকিউট করতে নিয়ে যায়। যেমন
var i = 0;
while( i < 50){
if(i % 2 != 0){
if(i > 30){break;}
document.write(i + '<br/>');
}
i++;
}
প্রথম উদাহরনে এটা রান করিয়ে দেখতে পারেন এভাবে do.. while এও break স্টেটমেন্ট ব্যবহার করা যায় যেমন
var i = 0;
do
{
if(i > 5){break;}
document.write(i+ '<br>');
i++;
}
while (i <= 8)
এছাড়া continue
স্টেটমেন্ট ব্যবহার করা যায় লুপের ভিতর, এটার উদাহরন ফর লুপে আলোচনা হবে।
January 3 at 5:30am · Public
Unlike Page · Report
JAVA Class 14
============
জাভাস্ক্রিপ্ট ফর লুপ টিউটোরিয়াল
(JavaScript
For Loop Tutorial in Bangla)
ফর লুপ দিয়েও while লুপের কাজ করা যায়। ফর লুপ দিয়ে যেসব কাজ হয় while দিয়েও ঐ কাজ করা যাবে। ফর লুপ while এর মতই pretest লুপ,
মানে আগে কন্ডিশন চেক করবে এরপর true হলে
লুপের অভ্যন্তরের কোড এক্সিকিউট হবে। ফর লুপে ৩ টি এক্সপ্রেশন থাকতে পারে
১. ভেরিয়েবল initialization : প্রথম এক্সপ্রেশন দিয়ে ভেরিয়েবল initialize
করা হয় এবং এই এক্সপ্রেশন লুপ এক্সিকিউট হওয়ার আগেই এক্সিকিউট বা
চেক হবে।
২. কন্ডিশন : এরপর একটা কন্ডিশন দেয়া হয় যেটা চেক করে true রিটার্ন করলে লুপ এক্সিকিউট হবে,
তবে এটিও ঐচ্ছিক যদি এই্ কন্ডিশন না দেয়া হয় তাহলে ফর লুপ বাই ডিফল্ট
true রিটার্ন করে।
৩. শেষ এক্সপ্রেশন : এটা দিয়ে ভেরিয়েবলটি আপডেট করা হয় (বাড়ানো
কিংবা কমানো হয়)। এটা সবার শেষে
এক্সিকিউট হয়। প্রতিবার লুপ ঘুরে
আসার পর এটি এক্সিকিউট হয়।
for(i = 10; i > 0; i--){
document.write(i + '<br/>');
}
ব্যাখ্যা: এখানে প্রথমে লুপে i এর মান ১০ দিয়ে initialize করেছি।
এরপর সেমিকোলন (;) দিয়ে দ্বিতীয় এক্সপ্রেশন লিখতে হয় যেমন i >
0 দিয়েছি এটা হচ্ছে কন্ডিশন। প্রতিবার লুপ ঘোরার সময় এই কন্ডিশন চেক হবে।
শেষে i-- দিয়ে i এর মান এক করে কমিয়েছি। এটা হচ্ছে শেষ এক্সপ্রেশন।
১. প্রথমবার লুপটি দেখবে i = 10 এবং এরপর দেখবে i এর মান ০
এর চেয়ে বড় কিনা, যেহেতু ১০ শূন্যের চেয়ে বড় তাই পরের এক্সপ্রেশনে
(i--) যাবে এবং মান ১ কমাবে এবং লুপে প্রবেশ করে document.write(i
+ '<br/>'); এক্সিকিউট করবে (i মান
লিখে দিবে)।
২. দ্বিতীয়বার i এর মান ৯ হয়ে গেল কেননা এক কমানো হয়েছে, আবার কন্ডিশন চেক করবে অর্থ্যাৎ i এর মান ০ এর
চেয়ে বড় কিনা। যেহেতু ৯ শূন্যের
চেয়ে বড় তাই আবার পরের এক্সপ্রেশনে (i--) যাবে এবং মান ৯ থেকে এক কমাবে এবং document.write(i
+ '<br/>'); এক্সিকিউট হবে।
এভাবে i এর মান যতক্ষন শূন্যের সমান না হবে ততক্ষন লুপটি একই সিস্টেমে চলতে থাকবে।
** লুপের ভিতর var i = 10; এভাবে না দিলেও হয়। যদি ভেরিয়েবল initialize করতে চান তাহলে লুপের বাইরে করে রাখতে পারেন যেমন
var i;
for(i = 10; i > 0; i--){
document.write(i + '<br/>');
}
** লুপ ছাড়া যদি আমি এভাবে ১০ থেকে ০ পর্যন্ত এক এক করে কমিয়ে
দেখাতে চাইতাম তাহলে নিচের মত লিখতে হত।
document.write(10 + '<br/>');
document.write(9 + '<br/>');
document.write(8 + '<br/>');
document.write(8 + '<br/>');
document.write(7 + '<br/>');
document.write(6 + '<br/>');
document.write(5 + '<br/>');
document.write(4 + '<br/>');
document.write(3 + '<br/>');
document.write(2 + '<br/>');
document.write(1 + '<br/>');
এত বড় কোডের কাজ লুপ দিয়ে কয়েক লাইনেই হয়ে যায়। এরুপ তারিখের জন্য মাস, বছর, দিন ইত্যাদি কাজের জন্য লুপ
ব্যবহার করা হয়। লুপ খুবই গুরত্বপূর্ন, যেকোন প্রোগ্রামিং এ লুপের অবদান অনস্বীকার্য। তাই খুব ভালভাবে শিখতে হবে।
for...in লুপ
=================
ফর ইন লুপ দিয়ে একটা অবজেক্টের প্রোপার্টিজ এর মধ্যে লুপিং
করা যায়। যেমন আমি যদি BOM window অবজেক্টের প্রোপার্টি দেখতে
চাই তাহলে
for(var propName in window){
document.write(propName + '<br/>');
}
continue স্টেটমেন্ট
========================
অন্যান্য লুপিং এর মত ফর লুপেও break কিংবা continue স্টেটমেন্ট ব্যবহার করা যায়। এর আগে while লুপে break এর উদাহরন দেখিয়েছি
এখানে continue স্টেটমেন্টের ব্যবহার দেখাচ্ছি।
continue স্টেটমেন্ট
ব্যবহার করলে লুপ চলতে থাকবে কিন্তু একবার লুপ বন্ধ হয়ে যাবে যখন কন্ডিশন true হবে। উদাহরন দেখলে পরিষ্কার হবে
for(i = 10; i > 0; i--){
if(i % 2 == 0){continue;}
document.write(i + '<br/>');
}
যখনি (i % 2 ==
0) এই কন্ডিশনটি true হবে অর্থ্যাৎ জোড় সংখ্যা
আসবে তখন লুপ সাথে সাথে বন্ধ হয়ে যাবে এবং এইবার আউটপুট না দিয়ে পরেরবার লুপ চলবে। তাই এখানে আউটপুটে দেখুন ১০ থকে ০ পর্যন্ত শুধু ঐ সংখ্যাগুলি
দেখাচ্ছে যেগুলি বিজোড়। কেননা যখন জোড়
আসছে তখন continue এর কারনে ঐবার লুপ চলেনি।
** যেহেতু এক লাইনের
কোড তাই continue এর আগে পিছে দ্বিতীয় বন্ধনী (curly
braces) না দিলেও হত।
for(i = 10; i > 0; i--){
if(i % 2 == 0)
continue;
document.write(i + '<br/>');
}
January 4 at 5:30am · Public
Unlike Page · Report
JAVA Class 15
============
জাভাস্ক্রিপ্ট মন্তব্য
(JavaScript
Comments Tutorial in Bangla )
কোডে কমেন্ট করা একটা ভাল অভ্যাস বরং অত্যাবশ্যকীয় মনে করা
উচিৎ। বড় বড় প্রজেক্টে
যখন কাজ করবেন, এক একটা
স্ক্রিপ্ট অনেক বড় বড় হবে। কোন্ কোড বা ফাংশন
কিসের জন্য লেখা হচ্ছে এটা যদি কোডেই লিখে না রাখেন তাহলে এই স্ক্রিপ্ট পরে আপনি বা
অন্য কোন প্রোগ্রামার কাজ করার জন্য যখন খুলবেন তখন কাজ ১০ গুন বেড়ে যাবে। কেননা পুরো স্ক্রিপ্ট এবং এই স্ক্রিপ্টের সংশ্লিষ্ট কোডও
পড়ে পড়ে বের করতে হবে কোন কোড কিসের জন্য লিখেছেন।
যাইহোক যেকোন কোডব্লক শুরু করার আগে যদি কমেন্ট বা মন্তব্য
করে রাখেন তাহলে পরে এই কোড দেখে সহজেই বুঝে ফেলবেন এটা কিসের জন্য লিখেছিলাম। জাভাস্ক্রিপ্টে দুইভাবে কোডে মন্তব্য/Comments করা যায়।
যদি এক লাইন মন্তব্য করেন (Signle line comment)
শুধুমাত্র // বা ডাবল স্ল্যাশ চিহ্ন দিয়ে জাভাস্ক্রিপ্টে
একটি লাইন কমেন্ট করে রাখতে পারেন। যেমন
document.write('Hello Javascript');
// make a alert
alert('Hi Webcoachbd');
** কমেন্ট করা লাইন এক্সিকিউট হয়না। তাই যেকোন কিছু কমেন্ট করে রাখতে পারেন।
একাধিক লাইন কমেন্ট করা (Multi line comment)
=====================================
যদি একসাথে অনেক লাইন কমেন্ট করতে হয় তাহলে কমেন্ট শুরু করতে
হয় /* এটা দিয়ে এবং শেষ করতে হয় */ এটা দিয়ে। ধরুন কোডের সম্পর্কে কমেন্ট করতে গিয়ে কয়েক লাইন লিখতে হল
কিংবা কয়েকলাইন কোডই কমেন্ট করে রাখবেন তখন এই ব্যবস্থা।
/* This function for
manipulating
form validation
*/
function validateForm(){
var x = document.getElementById('password1').value;
var y = document.getElementById('password2').value;
if(x != y){
document.write('Password must match');
} else {
document.write('match');
}
return false;
}
// write a sentence (single line comment)
document.write('Hello Javascript');
ফর্ম ভেলিডেশনের জন্য ছোট একটি কোড এটি। এখানে কোড দেখানো উদ্দেশ্য নয় বরং কিভাবে এক/একাধিক লাইন
কমেন্ট করেছি সেটা দেখুন।
** অনেক সময় এমন হতে
পারে যে কোন কোডব্লক আপনার স্ক্রিপ্টে বাদ দেয়া দরকার শুধু পরীক্ষা করার জন্য তবে পরে
আবার লাগবে। এমন সময় ঐ কোডব্লক
কমেন্ট করে রাখতে পারেন আর এক্সিকিউট হবেনা। পরে যখন লাগবে তখন কমেন্টের জন্য দেয়া চিহ্ন উঠিয়ে দিলেই
হবে। এমনকি চাইলে উপরের
উদাহরনের ফাংশনটি পুরোটা কমেন্ট করে রাখতে পারেন ফলে ফাংশনটি আর কাজ করবেনা তবে স্ক্রিপ্টে
কোডটুকু থাকবে।
এছাড়া <!-- চিহ্ন দিয়েও কমেন্ট করা যায় (single line) তবে
এটা সাধারনত ব্যবহার হয়না কেননা single লাইন কমেন্ট করার জন্যেতো
// চিহ্ন আছেই।
January 5 at 5:30am · Public
Unlike Page · Report
JAVA Class 16
============
জাভাস্ক্রিপ্ট অ্যারে টিউটোরিয়াল
(JavaScript
Array Tutorial in Bangla)
জাভাস্ক্রিপ্টে ভেরিয়েবল দেখে এসেছেন নিশ্চয়। একটা ভেরিয়েবলে একটাই মান রাখা যায় এরপর যদি সেই ভেরিয়েবলে
অন্য মান assign করেন
সাথে সাথে ভেরিয়েবলটির মান পরিবর্তন হয়ে যায়। তবে অ্যারে দিয়ে একটা ভেরিয়েবলে অনেক মান একসাথে রাখতে পারেন। যেকোন মান রাখতে পারেন। যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial ভেরিয়েবলে সব মানগুলি রাখা হয়েছে, একসাথে ৪টি। এখন যদি এই মানগুলি
access করতে চাই তাহলে index নাম্বার দিয়ে access করতে হবে। জাভাস্ক্রিপ্ট অটোমেটিক প্রতিটি মানের জন্য একটা index নাম্বার দিয়ে রাখে (ক্রমানুসারে)। যেমন আমি যদি প্রথম মানটি দেখতে চাই তবে tutorial[0] এভাবে দিতে হবে যেমন
document.write(tutorial[0]);
এভাবে যদি দ্বিতীয় মানটি দেখতে চান তাহলে tutorial[1] এবং এরুপে অন্যান্যগুলি।
** অ্যারের প্রতিটি
মানকে এলিমেন্ট বলে অর্থ্যাৎ উপরের tutorial অ্যারেতে ৪টি এলিমেন্ট আছে। প্রত্যেকটি এলিমেন্ট যেকোন কিছু হতে পারে, একটা স্ট্রিং কিংবা একটা পূর্নসংখ্যা
এমনকি একটা অবজেক্ট।
** প্রথম মানের জন্য
০ শূন্য দিয়ে শুরু করে এভাবে ক্রমানুসারে পরেরগুলির জন্য জাভাস্ক্রিপ্ট index নাম্বার দেয়। একসেস নেয়ার সময় প্রথমে ভেরিয়েবলের নাম এরপর তৃতীয় বন্ধনীর
(square bracket) এর ভিতর index নাম্বারটি। যেমন ২য় মানটি
একসেস করতে চাইলে tutorial[1] এভাবে।
** অ্যারে বানাতে
হয় প্রথম উদাহরনের মত, তৃতীয় বন্ধনীর ভিতর single বা double কোটেশনের ভিতর মান দিতে হয় এবং প্রতিটি মান কমা (,) দিয়ে আলাদা রাখতে হবে। এভাবে অ্যারে তৈরীর প্রক্রিয়ার টেকনিকাল নাম হচ্ছে "অ্যারে লিটারেল"।
এছাড়া new কিওয়ার্ড Array() ফাংশন (এটার নাম আসলে কনস্ট্রাক্টর)
ব্যবহার করে অ্যারে বানানো যায় যেমন উপরের অ্যারেটি চাইলে নিচের মত করে তৈরী করতে পারেন।
var tutorial = new Array('HTML', 'CSS', 'JavaScript', 'PHP');
** যদি কনস্ট্রাক্টর
দিয়ে অ্যারে বানান তাহলে এর ভিতরে দেয়া মানগুলি (যেগুলি কোটেশনের ভিতর রাখা হচ্ছে এবং
কমা দিয়ে আলাদা করা হচ্ছে) অ্যারের এলিমেন্ট হয়ে যায়। এখানে একটু সমস্যা হচ্ছে যদি কনস্ট্রাক্টর এর মান একটি দেন
এবং সেটা হয় পূর্নসংখ্যা তাহলে অ্যারেতে মোট সেই সংখ্যা পরিমান এলিমেন্ট আছে বলে জাভাস্ক্রিপ্ট
ধরে নেয়।
যেমন যদি var tutorial = new Array(8); দিলে জাভাস্ক্রিপ্ট ধরবে tutorial
একটি অ্যারে এবং এখানে ৮টি এলিমেন্ট আছে আর যদি var
tutorial = new Array(8, 'HTML', 'CSS'....); এভাবে দেন তাহলে ৮ কে
সে একটা এলিমেন্ট হিসেবে গন্য করবে যেমন 'HTML' কে করছে। এভাবে কনস্ট্রাক্টর দিয়ে অ্যারে বানানোর চেয়ে প্রথম উদাহরনের
মত করে অর্থ্যাৎ "অ্যারে লিটারেল" এইভাবে অ্যারে তৈরী করা ভাল।
কনস্ট্রাক্টর ব্যবহার করে বানানো অ্যারেকে আবার নিচের মত
করেও লিখতে পারেন
var tutorial = new Array();
tutorial[0] = 'HTML';
tutorial[1] = 'CSS';
tutorial[2] = 'JavaScript';
tutorial[3] = 'PHP';
January 6 at 5:30am · Public
Unlike Page · Report
JAVA Class 17
============
বাকি অংশ
জাভাস্ক্রিপ্ট অ্যারে টিউটোরিয়াল (Part 2)
(JavaScript Array Tutorial in Bangla)
বাকি অংশ
অ্যারে কিন্তু বিশেষ ধরনরে একটা অবজেক্ট। ভেরিয়েবল টিউটোরিয়ালে typeof অপারেটর দিয়ে কিভাবে ভেরিয়েবলের ধরন বের করতে হয় সেটা
দেখানো হয়েছে। যেকোন একটা চেক
করে দেখবেন "object" দেখাবে। যাইহোক এর length নামে একটা প্রোপার্টি যেটা দিয়ে
অ্যারেতে কয়টি এলিমেন্ট আছে সেটা দেখা যায়। যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
document.write (tutorial . length);
আউটপুট 4 দেখাবে। কারন অ্যারেতে ৪টি এলিমেন্ট আছে।
এই length প্রোপার্টি দিয়ে শুধু অ্যারের এলিমেন্ট সংখ্যা দেখার কাজ ছাড়াও আরও কয়েকটি
কাজ হয়, যেমন আপনি চাইলে অ্যারে থেকে একটি এলিমেন্ট বাদ দিয়ে
দিতে পারেন এভাবে
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial . length = 3;
ব্যাস ৪ টি এলিমেন্ট থেকে এখন অ্যারেতে ৩টি এলিমেন্ট হয়ে
গেছে, শেষেরটি বাদ পরেছে। যদি পরীক্ষা করে দেখতে চান তাহলে ৪ নম্বর এলিমেন্ট টিতে একসেস
নিতে চেষ্টা করুন।
document.write(tutorial[3]);
আউটপুট দেখুন "undefined" আসবে। কেননা শেষের এলিমেন্টটি আর নেই। এভাবে ইচ্ছে করলে এলিমেন্ট সংখ্যা বাড়াতেও পারেন যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial . length = 20;
এখন অ্যারের এলিমেন্ট সংখ্যা ২০ হয়ে গেছে, তবে ৪ এর পরের এলিমেন্টগুলির মান হবে
"undefined". tutorial[18] দিয়ে একসেস করুন
"undefined" দেখাবে।
length প্রোপার্টি দিয়ে
অ্যারের শেষে এলিমেন্ট যোগ করা যায় যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial[tutorial.length] = 'Framework';
tutorial[tutorial.length] = 'jQuery';
tutorial[tutorial.length] = 'Database';
document.write(tutorial[5]);
আউটপুট "jQuery" দেখাবে। উপরের উদাহরেন tutorial অ্যারেতে tutorial[tutorial.length] এভাবে আরো মোট ৩টি এলিমেন্ট একটার পর একটা যোগ করা হয়েছে এবং জাভাস্ক্রিপ্ট
অটোমেটিক এসব যোগকৃত এলিমেনন্টের index নাম্বার আপডেট করে
নেয়। এমনকি document.write(tutorial.length); দিয়ে
চেক করে দেখুন ৭ দেখাবে অর্থ্যাৎ এলিমেন্ট সংখ্যাও আপডেট হয়ে যায়।
তবে এভাবে অ্যারেতে এলিমেন্ট যোগ করা হয়না বরং push() নামে একটা মেথড আছে এটা দিয়ে অ্যারেতে
এলিমেন্ট যোগ করা হয়। push() এর ভিতর একাধিক এলিমেন্ট সিঙ্গেল বা ডাবল কোটেশনের ভিতর রেখে কমা (,) চিহ্ন দিয়ে আলাদা রাখা হয় এবং এগুলি
সব অ্যারের শেষে গিয়ে যুক্ত হয় যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.push('Framework', 'jQuery', 'Database');
document.write(tutorial.length + '<br/>');
document.write(tutorial[6]);
** অ্যারের নাম tutorial এরপর ডট
(.) দিয়ে push() এর ভিতর যেসব এলিমেন্ট দিতে চান সেগুলি কমা
দিয়ে দিয়ে কোটেশনের ভিতরে রাখলেই অ্যারেতে যোগ হয়ে যাবে।
যদি অ্যারের প্রথমেই এলিমেন্ট যোগ করতে চান তাহলে unshift() মেথড আছে যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.unshift('Framework', 'jQuery', 'Database');
document.write(tutorial.length + '<br/>');
document.write(tutorial[0]);
দেখুন অ্যারের প্রথমে ছিল "HTML" এবং এর index নাম্বার ছিল ০। unshift() দিয়ে শুরুতে এলিমেন্ট যোগ করাতে যোগকৃত এলিমেন্টগুলির index শূন্য (০) থেকে শুরু হয়েছে। ফলে এখন "HTML" এর index নাম্বার হবে
৩।
++++++++++++++++++++++++++++++++++++++++++++++++
অ্যারে ক্রমানুসারে সাজানো
===================
একটা অ্যারের এলিমেন্টগুলি যদি অগোছালো থাক তাহলে sort() মেথড দিয়ে অ্যারে ক্রমানুসারে সাজাতে
পারেন (ছোট থেকে বড় তবে নাম্বার অনুযায়ী নয় - অক্ষর অনুযায়ী) যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.sort();
document.write(tutorial[0] + ', ' + tutorial[1] + ', ' + tutorial[2] + ',
' + tutorial[3]);
//now array becomes ['CSS', 'HTML', 'JavaScript', 'PHP']
sort() দিয়ে a - z এভাবে ক্রমানুসারে
আসে আপনি যদি এর বিপরীতভাবে অ্যারে সাজাতে চান তাহলে আছে reverse() মেথড।
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.sort();
tutorial.reverse();
document.write(tutorial[0] + ', ' + tutorial[1] + ', ' + tutorial[2] +
', ' + tutorial[3]);
//now array becomes ['PHP', 'JavaScript', 'CSS', 'HTML']
sort() মেথডে একটা ফাংশন
প্যারামিটার হিসেবে পাঠানো যায়। চাইলে এই ফাংশন
ব্যবহার করে অ্যারেকে সংখ্যার ক্রমানুসারে সাজাতে পারেন। যেমন
var tutorial = [1,60,3,55,8,40];
tutorial.sort(comparison);
function comparison(x, y){
if(x > y){
return 1;
}else if (x < y){
return -1;
}else{
return 0;
}
}
document.write(tutorial);
অথচ এই ফাংশন ব্যবহার না করলে আউটপুট এভাবে ছোট থেকে বড় আসতনা। এবার এখান reverse() মেথড ভ্রবহার করে বড় থেকে ছোট করতে পারেন।
shift() মেথড ব্যবহার
করে অ্যারের প্রথম এলিমেন্ট টিকে মোছা যায় যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.shift();
//now array becomes ['CSS','JavaScript','PHP']
pop() মেথড ব্যবহার করে অ্যারের শেষ এলিমেন্ট মোছা যায় যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.pop();
//now array becomes ['HTML', 'CSS', 'JavaScript']
একটা অ্যারে থেকে কিছু এলিমেন্ট নিয়ে আরেকটা নতুন অ্যারে
তৈরী করা যায় slice() মেথড
দিয়ে যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.slice(1);
// now array becomes ['CSS', 'JavaScript', 'PHP']
tutorial.slice(1,3);
//no array becomes ['CSS', 'JavaScript']
** slice() মেথডে দুটি প্যারামিটার পাঠানো যায় সংখ্যা দিয়ে। প্রথম প্যারামিটার (সংখ্যা) দিয়ে সে ঠিক করবে কোন্ এলিমেন্ট
থেকে নেয়া শুরু হবে এবং পরের প্যারামিটার দিয়ে ঠিক করবে কোথা পর্যন্ত নিবে। যেমন slice(1,3)
দেয়াতে ১ নম্বর এলিমেন্ট থেকে ৩ নাম্বারের আগে পর্যন্ত নিয়েছে (শেষেরটি
নেয়না)।
** একটা প্যারামিটার
দিলে ঐ নাম্বার থেকে শুরু করে শেষ পর্যন্ত নিবে।
splice() মেথড ব্যবহার
করে মুলত অ্যারের মাঝখানে এলিমেন্ট ঢুকানো যায় তবে এটা দিয়ে আরো কাজ হয়। যেমন আপনি একটা অ্যারের ১ থেকে ৩ নাম্বার পর্যন্ত যদি সব
এলিমেন্ট মুছতে চান তাহলে
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.splice(1,3);
//now array becomes ['HTML']
যদি অ্যারের মাঝে কোন এলিমেন্ট ঢুকাতে চান তাহলে
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
tutorial.splice(1, 1, 'jQuery', 'MySQL');
//now array becomes ['HTML', 'jQuery', 'MySQL', 'JavaScript', 'PHP']
splice() এর ভিতর প্রথম প্যারামিটার 1 দিয়ে ১ নম্বর ইনডেক্স
থেকে এলিমেন্ট প্রবেশ করবে এ নির্দেশনা দেয়া হয়েছে এরপরের প্যারামিটার 1 দিয়ে ১ নম্বর
ইনডেক্সধারী এলিমেন্ট টি মুছে দেয়া হয়েছে ("CSS")। সবশেষে "jQuery" এবং "MySQL" হচ্ছে নতুন এলিমেন্টগুলি
যেগুলি প্রবেশ করানো হচ্ছে। আপনি চাইলে আরো
এলিমেন্ট দিতে পারে আমি ২টি দিলাম।
২য় প্যারামিটারে যদি 0 দেন তাহলে কোন এলিমেন্ট মুছবেনা। এখানে যে সংখ্যা দিবেন ততটি এলিমেন্ট মুছে যাবে আর মোছা শুরু
হবে ১ম প্যারামিটারে যে সংখ্যাটি দিবেন সেই সংখ্যা যার ইনডেক্স হবে সেখান থেকে। সোজা কথা ১ম প্যারামিটারে যে সংখ্যা থাকবে সেই পজিশন থেকে
ততটা এলিমেন্ট মুছে দিবে যেটা ২য় প্যারামিটারে (যে সংখ্যা) থাকবে। এরপর পরের প্যারামিটারগুলিতে দেয়া এলিমেন্টগুলি ঢুকিয়ে দেবে।
indexOf() এবং lastIndexOf() মেথড
===========================
একটা অ্যারের কোন একটা এলিমেন্ট কোন্ পজিশনে আছে সেটা খুজে
বের করতে indexOf() মেথড ব্যবহার করা হয়। যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'erte'];
var ind = tutorial.indexOf('JavaScript');
document.write(ind);
অর্থ্যাৎ 'JavaScript' এলিমেন্ট টি অ্যারের ২ নাম্বার পজিশনে আছে।
** indexOf() এ আরেকটা প্যারামিটার (পূর্নসংখ্যা) দেয়া যায়। এই প্যারামিটার দিয়ে ঠিক করে দিতে পারেন যে কত নম্বর পজিশন
থেকে খোজা শুরু করবে। যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'HTML'];
var ind = tutorial.indexOf('HTML', 3);
document.write(ind);
কারন ৪ নম্বর পজিশনে 'HTML' নামে আরেকটা এলিমেন্ট আছে এবং indexOf('HTML',
3) দেয়াতে ৩ নম্বর পজিশন থেকে 'HTML' খোজা
শুরু করেছে। যদি এই প্যারামিটারটি
(3) না দিতাম তাহলে আউটপুট ০ আসত। কারন তখন প্রথম
থেকে খোজা শুরু করত।
lastIndexOf() দিয়ে অ্যারের শেষ দিকে থেকে খোজা শুরু করে যেখানে indexOf() দিয়ে অ্যারের প্রথম দিক থেকে
খোজা শুরু করে।
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'HTML'];
var ind = tutorial.lastIndexOf('HTML');
document.write(ind + '<br/>');
// with two parameter
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP', 'HTML'];
var ind1 = tutorial.lastIndexOf('HTML', 1);
document.write(ind1);
খুবই সহজ, ব্যাখ্যার প্রয়োজন মনে করছিনা। সমস্যা হলে ফোরামে
join() ফাংশন
====================
এই ফাংশন দিয়ে অ্যারের এলিমেন্টকে স্ট্রিং এ রুপান্তর করা
যায় এবং আপনি চাইলে যেকোন চিহ্ন দিয়ে স্ট্রিংগুলিকে আলাদা করে দেখতে পারেন। join() এর ভিতর ঐ চিহ্নটি প্যারামিটার হিসেবে পাঠাতে হয়। যেমন
var tutorial = ['HTML', 'CSS', 'JavaScript', 'PHP'];
var atoS = tutorial.join(',');
document.write(atoS );
** দেখুন অ্যারের প্রতিটি এলিমেন্ট কে স্ট্রিং বানিয়েছে এবং
কমা দিয়ে আলাদা করেছে। যদি join() এর ভিতর কমা না দিয়ে অন্য চিহ্ন
দিতাম তখন সেই চেহ্ন থাকত প্রতিটি স্ট্রিংয়ের মাঝে।
আবার split() একটা ফাংশন আছে এটা দিয়ে স্ট্রিংকে অ্যারে বানানো যায় যেমন
var tutorial = 'HTML,CSS,JavaScript,PHP';
tutorial.split(',');
//now an array created ['HTML', 'CSS', 'JavaScript', 'PHP']
** স্ট্রিং যে চিহ্ন দিয়ে আলাদা থাকবে সেটা join()
এর ভিতর প্রথম প্যারামিটার হিসেবে পাঠাতে হবে যেমন আমি পাঠিয়েছি
(কমা চিহ্ন)। সাধারনত স্ট্রিং
স্পেস দিয়ে আলাদা থাকে তখন split('
') এভাবে দিতে হবে। এছাড়া join() এ পূর্নসংখ্যা হিসেবে আরেকটা ২য় প্যারামিটার পাঠানো যায় সেটা দিলে ঐ সংখ্যা
পরিমান দীর্ঘ হবে অ্যারেটি। আর যদি কিছু না
দেন তাহলে split() ফাংশন
পুরো স্ট্রিং কে ভেঙ্গে ভেঙ্গে অ্যারে বানিয়ে ছাড়বে।
January 7 at 5:30am · Public
JAVA Class 18
============
জাভাস্ক্রিপ্ট এলার্ট ফাশন টিউটোরিয়াল
(Javascript
Alert Function Tutorial in Bangla)
এতক্ষনে অনেকগুলি alert() এর ব্যবহার দেখে এসেছেন। alert() এর ভিতর যেকোন স্ট্রিং কোটেশনের ভিতরে দিলে সেটা ব্রাউজারে এলার্ট দেখায় এবং
সেটা ok না করা পর্যন্ত ইউজার কোন কাজ করতে পারবেনা।
বেশ কিছু ক্ষেত্র আছে যেখানে এই এলার্ট খুব কাজে লাগে যেমন
মূলত ইউজারকে সতর্ক করাই এলার্টের আসল কাজ। এছাড়া ডেভলপারদের অনেক কাজে লাগে এই্ এলার্ট, কোড ডিবাগিং এর জন্য।
এই্চটিএমএল এ onclick ইভেন্ট দিয়ে সরাসরি এলার্ট ফাংশন ব্যবহার করা যায়। যেমন
<form>
<input onclick= "alert('This product is sold')"
value="Sold">
</form>
ডেভলপারদের কোড ডিবাগিং এর জন্য এটা একটা মোক্ষম হাতিয়ার। যেমন আমি একটা ভেরিয়েবল এর মান যেকোনভাবে পরিবর্তন করলাম
এখন ভেরিয়েবলটির সর্বশেষ মান কি সেটা দেখতে আমরা এলার্ট ব্যবহার করি। এরুপ আরো বহু ক্ষেত্র আছে যেখানে এলার্ট ফাংশন ব্যবহার করে
অ্যারের মান, ইনডেক্স,
ভেরিয়েবলের মান ইত্যাদি দেখা যায়।
var x = 14;
var y = 5;
if(x > y){
alert('x is greater than y');
}else{
alert('x is less than y');
}
January 8 at 5:30am · Public
Unlike Page · Report
JAVA Class 19
============
জাভাস্ক্রিপ্ট কনফার্ম ফাংশন টিউটোরিয়াল
(Javascript
Confirm Function Tutorial in Bangla)
alert() মেথড দিয়ে শুধু একটা মেসেজ দেয়া যায় এবং OK
ক্লিক করা ছাড়া ইউজারের আর কোন অপশন নেই। confirm() আরেকটা মেথড আছে এটা Ok এবং Cancel এদুটি অপশন সহ মেসেজ (এলার্ট) প্রদর্শন
করে। ফলে ইউজার Ok অথবা Cancel করতে পারবে।
মূলত যে কাজে এটা বেশি ব্যবহার হয় সেটা হল ডিলিটের সময় ইউজারকে
একটা সতর্কীকরন মেসেজ দেয়া। প্রথম ক্লিকেই
ইউজারকে সতর্কীকরন মেসেজ দেয়া হয় যে আপনি নিশ্চিত কিনা যে ডিলিট করার ব্যাপারে যদি
Ok দেয় তাহলে confirm() মেথড true রিটার্ন করে এবং Cancel দিলে false রিটার্ন করে।
ডিলিটের ব্যাপার আসে যখন পিএইচপিতে কাজ করবেন এবং ইউজারের
জন্য কোন প্যানেল ইত্যাদি থাকবে। এখানে সাধারন একটি
উদাহরন দিয়ে দেখাচ্ছি
<html>
<head>
<script type="text/javascript">
function confirmation() {
var answer = confirm("Leave webcoachbd.com?")
if (answer){
alert("Allah hafiz!")
window.location = "http://www.google.com/";
}
else{
alert("Thanks for staying with us!")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()"
value="Leave Us">
</form>
</body>
</html>
এই কোড index.html নামে সেভ করে যেকোন ব্রাউজারে রান করিয়ে দেখুন।
** এখানে answer দুটির যেকোন একটি রিটার্ন করবে হয়
true (যদি Ok দেয়) না হয় false
(Cancel দিলে)। যখন Ok দিবে তখন
গুগলে চলে যাবে আর Cancel দিলে এই সাইটেই থাকবে।
** পিএইচপিতে যেটা
করা হয় সেটা হচ্ছে Ok দিলে একটা পিএইচপি স্ক্রিপ্ট এক্সিকিউট হয় এবং ডেটা মুছে যাবে আর Cancel
দিলে কিছুই হবেনা। এটা ছাড়া confirm() অন্য কাজেও ব্যবহার করা হয়।
January 9 at 5:30am · Public
JAVA Class 20
============
জাভাস্ক্রিপ্ট প্রম্পট টিউটোরিয়াল
(Javascript
Prompt Tutorial in Bangla)
জাভাস্ক্রিপ্ট প্রম্পট ব্যবহার করে ইউজারের কাছ থেকে তথ্য
নেয়া যায়। ইনপুট বক্সে ইউজার
তথ্য দিয়ে Ok দিলে
(ইনপুট না দিলেও) true রিটার্ন করবে এবং Cancel দিলে false রিটার্ন করবে।
prompt() ফাংশনে দুটি
প্যারামিটার দেয়া যায়। প্রথম প্যারামিটারে
আপনি যে মেসেজ ইউজারকে দেখাতে চান সেটা আর দ্বিতীয় প্যারামিটারে ইনপুট বক্সে যদি কোন
ডিফল্ট মান দেখাতে চান সেটা। যেমন
<head>
<script type="text/javascript">
function prompter() {
var answer = prompt("What is your favorite site",
"Webcoachbd.com")
if(answer){
alert( "Your favorite site is " + answer + "!");
}else{
alert("canceled");
}
}
</script>
</head>
<body>
<input type="button" onclick="prompter()"
value="Favorite">
</body>
২য় প্যারামিটার যদি ফাকা রাখেন তাহলে কোন ডিফল্ট মান দেখাবেনা।
** Cancel দিলে prompt()
মেথড null রিটার্ন করে। এই prompt()
এর কাজ বেশি নেই। এর ব্যবহার খুব অল্প।
January 10 at 5:30am · Public
Unlike Page · Report
JAVA Class 21
============
জাভাস্ক্রিপ্ট প্রিন্ট ফাংশন টিউটোরিয়াল
(Javascript
Print Function Tutorial in Bangla)
JavaScript print ফাংশনটি একই কাজ করে যেমনটি করে আপনার ব্রাউজার
উইন্ডোর ফাইল মেনুর print অপশনটি । JavaScript print ফাংশন টি ওয়েবপেজ এর কনটেন্ট কে ব্যবহারকারীর(user)প্রিন্টারে পাঠিয়ে দেয়।
অনেকে এই ফাংশনটিকে অনর্থক মনে করে।অনেকে আছে যারা কম্পিউটার সম্বন্ধে ভাল যানে না তাদের ক্ষেত্রে এই অপশনটি থাকলে
অনেক সুবিধা হবে।
JavaScript Print Script - window.print():
JavaScript print function যা window.print() এটি ওয়েবপেজ কে প্রিন্ট করে ।এই ফাংশনটিকে এইচটিএমএল বাটনে রাখবো যা onClick event এর মাধ্যমে কাজ করবে।
<form>
<input type="button" value="Print This Page"
onClick="window.print()" />
</form>
নোটপ্যাড(notepad++) or software এ রান করে দেখুন
Yesterday at 5:30am · Public
Unlike Page · Report
JAVA Class 22
============
জাভাস্ক্রিপ্ট পূন:নির্দেশ বা রিডাইরেক্ট টিউটোরিয়াল
(Javascript
Redirect Tutorial in Bangla)
পেজ রিডাইরেক্ট করা অনেক সময় প্রয়োজন হয়ে পরে। পেজ রিডাইরেক্ট হচ্ছে ইউজার একটা পেজে যাবে এবং যাওয়ার সাথে
সাথে অটোমেটিক অন্য কোন পেজে তাকে নিয়ে যাবে। সাধারনত নিম্নোক্ত ক্ষেত্রগুলিতে পেজ রিডাইরেক্ট করা প্রয়োজন
হয়
==> আপনি আপনার সাইটের ডোমেইন পরিবর্তন করেছেন। ধরুন আগে আপনার সাইটের নাম ছিল www.abcd.com
এখন আপনি সাইটের ডোমেইন পরিবর্তন করে নতুন নাম নিয়েছেন www.atoz.com কিন্তু ইউজার এটা জানেনা যে আপনি নাম বদলেছেন। যাইহোক www.abcd.com এ ইউজার যখন ঢুকবে তখন জাভাস্ক্রিপ্ট দিয়ে রিডাইরেক্ট করে ইউজারকে www.atoz.com এ আনা যাবে।
সাইটের যেকোন একটা URL পরিবর্তন করলেন কিন্তু ইউজার আগের ঠিকানা টি জানে সে তো
আগেরটাতেই যাবে। যখন যাবে তখন তাকে
রিডাইরেক্ট করে নতুন টিতে নিয়ে আসা যায়।
==> ব্রাউজার কিংবা দেশ ভিত্তিক কনটেন্ট অনেক সময় থাকে এসব ক্ষেত্রে
রিডাইরেক্ট প্রয়োজন হয়ভ
==> সার্চ ইন্জিনগুলিতে আগের সাইট সংক্রান্ত অনেক তথ্য নিশ্চয় থেকে থাকবে। যদি রিডাইরেক্ট না করেন তাহলে তো সার্চ ইন্জিন থেকে যেসব
ইউজার আসবে তারা এসে পুরানা সাইটে ঢুকবে এবং সেখানকার সব জিনিস আপনি মুছেও দিয়ে থাকতে
পারেন। যাইহোক এসব সমস্যা
সমাধান হবে রিডাইরেক্ট দিয়ে।
window.location এরপর সমান (=) চিহ্ন দিয়ে কোটেশনের ভিতর URL দিতে হয়। এটা <head>
ট্যাগের ভিতর রাখতে হবে যদি চান পুরানা সাইটে (URL) এ ঢোকার সাথে সাথে নতুন URL এ নিয়ে যাবেন। যেমন
<!DOCTYPE html>
<html>
<head>
<script>
window.location="http://www.google.com/";
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
যেমন দেখুন এই সাইটের www.atoz.com/redirect.html
এই পেজ থেকে সরাসরি কিভাবে গুগলে রিডাইরেক্ট করে নিয়ে যাচ্ছি। রিডাইরেক্ট করুন
যদি কিছুক্ষন দেরি করে এরপর একটা মেসেজ দেখিয়ে এরপর রিডাইরেক্ট
করাতে চান তাহলে
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function rdirect()
{
window.location="http://www.atoz.com/";
}
document.write("You will be redirected to main page in 10
sec.");
setTimeout('rdirect()', 10000);
</script>
</head>
<body>
<!-- any HTML element here -->
</body>
</html>
www.atoz.com/redirect_10.html
এ যান এবং দেখুন ১০ সেকেন্ড পর রিডাইরেক্ট হয়ে মুল সাইটে চলে আসবে। এর আগে একটা মেসেজ দেখাবে।
setTimeout() ফাংশনটি প্রথম
প্যারামিটার একটা ফাংশন নেয় এবং পরেরটি কতক্ষন সময় পর ফাংশনটি এক্সিকিউট হবে সেটা। যেমন এখানে 10000 দেয়াতে rdirect() ফাংশনটি ১০ সেকেন্ড পর কাজ করা শুরু করবে,
এরমধ্যে document.write() দিয়ে যে মেসেজটি
দিয়েছি সেটা পেজে দেখাবে।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন