ICT & others Information: JavaScript

JavaScript_part4_Javascript ফাইল ও ডায়নামিক Html Element তৈরি

March 08, 2020 Sharmin Khan Ishita

ভেরিয়েবল (Variable)

এই অংশে আমরা শিখব-

ভেরিয়েবল কি

ভেরিয়েবল কিভাবে লিখতে হয়

ভেরিয়েবলে ভ্যালু এ্যাসাইন করা

ভেরিয়েবল

মনে করুন আপনি বাজার করতে গেলেন, আপনি বাজার থেকে মাছ এবং চাল কিনবেন। কিন্তু আপনি মাছ এবং চাল কি একই প্যাকেটে রাখবেন? আপনি তা কখনই রাখবেন না, আলাদা আলাদা প্যাকেটে রাখবেন। তাই আপনার মাছ এবং চাল রাখার জন্য আলাদা আলাদা প্যাকেট লাগবে। এই প্যাকেটের প্রতিটির একট নাম থাকবে, যেমন মাছের জন্য মাছের প্যাকেট এবং চালের জন্য চালের প্যাকেট। এখানে মাছের প্যাকেট এবং চালের প্যাকেট-ই হল ভেরিয়েবল।

ভ্যারিয়েবল মূলত রান টাইমে তথ্য সংরক্ষণ করার ধারক। ভ্যারিয়েবল হল ডাটাকে উপস্থাপন করার সিম্বলিক নাম। অন্যান্য প্রোগ্রামিং ল্যাগুয়েজের মত জাভাস্ক্রিপ্টে ভেরিয়েবল আছে। ভেরিয়েবল বাসত্মব সস্মত হওয়া উচিত যেমন Name, Roll, ইত্যাদি।

যদি আপনাকে বলা হয় X= ৭, Y= ৮, Z= Y х X তবে Z এর মান কত ?

আপনি Z= ৫৬ উত্তর বলতে হবে। এখানে Z, Y, X এগুলো আসলে ভেরিয়েবল X এর মান ৭, Y এর মান ৮, হলে Z এর মান কত। আর এই মান বা ভেলু ধারণ করার হল ভেরিয়েবল এর কাজ।

ভেরিয়েবল লেখার নিয়ম

1. এরা কেস সেনসেটিভ মানে name এবং Name এর মানে আলাদা আলাদা।

2. ভেরিয়েবল সবসময় কোন একটি অ্যালফাবেটিক লেটার বা অক্ষর বা ($) সাইন বা (-) সাইন দ্বারা শুরু করতে হয়।

ডিক্লেয়ারিং জাভাস্ক্রিপ্ট ভেরিয়েবল

ভেরিয়েবলের উদ্দেশ্য হলো তথ্য বা ডাটাকে সংরক্ষণ করে রাখা এবং প্রয়োজন অনুসারে তা ব্যবহার করা। জাভাস্ক্রিপ্ট ভেরিয়েবল ডিক্লেয়ার করতে প্রথমে Var কী ওয়ার্ড ব্যবহার করতে হয়। তবে এটা একামত্ম জরম্নরী বিষয় নয় যে আপনাকে Var ব্যবহার করতেই হবে তবে Var ব্যবহার করা ভাল।

ভেরিয়েবল ডিক্লেয়ার করার নিয়ম

Var Variable Name

ভেরিয়েবলে ভ্যালু দেওয়া

ভেরিয়েবল ডিক্লেয়ার করার পর প্রয়োজন অনুযায়ী ভ্যালু অ্যাসাইন করতে হয়। এজন্য অ্যাসাইনমেন্ট অপারেটর ব্যবহার করতে হয়।

চলুন এখন একটি পূর্ণাঙ্গ উদাহরণ দেওয়া যাক

প্রোগ্রাম : ভেরিয়েবলের উদাহরন

১। আপনার এডিটরে নিম্নোক্ত কোডগুলো লিখুন

২। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0012 নামে সেভ করেছি।

<html>

<head>

<title>Variable Example</title>

<head>

<body>

var linebreak = "<br />"

var text = "This is a variable Example ";

document.write(text);

document.write(linebreak);

document.write(text);

</script>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_0012.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

· চিত্র: ভেরিয়েবলের উদাহরনের ফলাফল

ব্যাখ্যা: উপরোক্ত উদাহরণে linebreak এবং text নামে ২টি ভেরিয়েবল ডিক্লেয়ার করা হয়েছে। linebreak এর মধ্যে <br/> ট্যাগ এবং text এর মধ্যে This is a variable Example অ্যাসাইন করা হলো এবং document.write(text) দ্বারা আউটপুটে আমাদের text টি এখন দেখা যাবে।

document.write(linebreak) দ্বারা আউটপুটে একটি লাইন ব্রেক দেয়া হল। তারপর পুনরায় আউটপুটে text টি প্রিন্ট বা লেখা হয়েছে। একই ভেরিয়েবল ব্যবহার করে বিভিন্ন ভ্যালু অ্যাসাইন করা হতে পারে।

প্রোগ্রাম : একই ভেরিয়েবল ব্যবহার করে বিভিন্ন ভ্যালু

১। এডিটরে নিম্নোক্ত কোডগুলো লিখুন।এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0013 নামে সেভ করেছি।

<html>

<head>

<title>Variable Example</title>

<head>

<body>

var linebreak = "<br />"

var text = "This is a variable Example "

document.write(text);

document.write(linebreak);

text = "Now New value assign in variable."; // New Data Assign document.write(text);

document.write(linebreak);

text = "This is Last Line."; // Again new Data Assign in text Variable

document.write(text);

</script>

</body>

</html>

ফলাফলঃ ব্রাউজারে program_0013.html ফাইলটি ওপেন করুন। নিম্নের চিত্রের মত ফলাফল দেখতে পাবেন।

· চিত্র: ভেরিয়েবলের উদাহরনের ফলাফল

ব্যাখ্যাঃ এক্ষেত্রে আমরা text ভেরিয়েবলে নতুন নতুন ডাটা অ্যাসাইন করেছি।

বিঃদ্রঃ ভেরিয়েবল ডিক্লিয়ারের ডাটার নাম অনুসারে হলে প্রোগ্রাম বোঝা সুবিধাজনক। যখন কোন টেক্সট ভ্যালু অ্যাসাইন করতে হবে। ঐ টেক্সট ভ্যালুর দুই পাশে ( ‘‘ ’’ ) ইনভারটেড কমা দিতে হবে। নাম্বার ব্যবহার বা অ্যাসাইন করতে চাইলে ভ্যালুর দুই পাশে ( ‘‘ ’’ ) কমা দেবার প্রয়োজন নেই। ( ‘‘ ’’ ) কমা দিলে এটি টেক্সট হিসাবে গণ্য হবে।

যেমন: x=3

y=x+2

লোকাল ভেরিয়েবল:

যে ভেরিয়েবল জাভাস্ক্রিপ্ট ফাংশনের মধ্যে লেখা হয় এবং ভেরিয়েবলটি কেবল ঐ ফাংশনের মধ্যে ব্যবহারযোগ্য ডাকে লোকাল ভেরিয়েবল বলে।

একই নামের লোকাল ভেরিয়েবল বিভিন্ন ফাংশনে ব্যবহৃত হতে পারে। কারণ ভেরিয়েবলটি কেবল যে ফাংশনের মধ্যে লেখা হয়েছে সেই ফাংশনে ব্যবহৃত হবে। অন্য ফাংশন ভেরিয়েবলটি ব্যবহার করতে পারবে না।

গ্লোবাল ভেরিয়েবল:

যে ভেরিয়েবলে কোন ফাংশনের বাইরে ডিক্লেয়ার করা হয় সেটিই গ্লোবাল ভেরিয়েবল। গ্লোবাল ভেরিয়েবল, স্ক্রিপ্ট এর মধ্যে যে কোন ফাংশনে ব্যবহার করা যায।

এ সম্পর্কিত উদাহরণ আমরা ফাংশন অংশে শিখব।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

Writer: Bappi Ashraf

Published By: Gyankosh Prokashani

Amount of Pages: 464

First Publish: October-2004

Last Edition: We've February-2015 edition. Future edition may be existed!

Book Price: BDT 350 (30% Discount)

The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book. Book's CD Link below...

পরিবেশক/প্রাপ্তিস্থান
Online : www.rokomari.com

Facebook Page

RELATED POST LINKS BELOW ********************************************

part1_জাভাস্ক্রিপ্টের প্রাথমিক ধারণা

part2_জাভাস্ক্রিপ্ট লেখার পদ্ধতি ও ফাংশনের ব্যবহার

part3_Javascript ফাইল ও ডায়নামিক Html Element তৈরি

part4_Javascript ফাইল ও ডায়নামিক Html Element তৈরি

part5_অপারেটর, Arithmetic Operator ও জাভাস্ক্রিপ্ট অ্যাসাইনমেন্ট অপারেটর

part6_Conditional Statement ও Switch Case

part7_জাভাস্ক্রিপ্ট লুপ, While loop, Do while লুপ ও For loop ব্যবহার

part8_Continue Statement, জাভাস্ক্রিপ্ট অ্যালার্ট বক্স ও প্রম্পট বক্স

part9_জাভাস্ক্রিপ্ট ফাংশন ও Return Statement

part10_জাভাস্ক্রিপ্ট ইভেন্ট, স্পেশাল ক্যারেক্টার ও try... catch

part11_জাভাস্ক্রিপ্ট স্পেশাল ক্যারেকটরসমূহ ও জাভাস্ক্রিপ্ট অবজেক্টেসসমূহ

part12_ নাম্বার ফরম্যাট, নাম্বার অবজেক্টের প্রোপার্টিজ ও নাম্বার অবজেক্টের মেথড

part13_IndexOf () মেথড , মেথডের ব্যবহার ও split মেথড

part14_জাভাস্ক্রিপ্ট ডেট (Date) অবজেক্ট ও মেথডের উদাহরন

part15_জাভাস্ক্রিপ্ট অ্যারে অবজেক্ট তৈরি করা, একসেস করা, প্রোপার্টিজ করা, জাভাস্ক্রিপ্ট অ্যারে মেথড ও জাভাস্ক্রিপ্ট কনক্যাট অ্যারে

part16_জাভাস্ক্রিপ্ট ম্যাথ (Math) অবজেক্ট, Math অবজেক্ট মেথড, Sqrt মেথড, Max () মেথড, Min() মেথড, pow() মেথড ও round() মেথড ব্যবহার ,জাভাস্ক্রিপ্ট RegExp অবজেক্ট

part17_জাভাস্ক্রিপ্ট ব্রাউজার অবজেক্ট ও বিভিন্ন রকমের অবজেক্ট এর ব্যবহার

JavaScript_part7_জাভাস্ক্রিপ্ট লুপ, While loop, Do while লুপ ও For loop ব্যবহার

March 07, 2020 Sharmin Khan Ishita

জাভাস্ক্রিপ্ট লুপ (loop)

একই Statement বারবার না লিখে Loop এর মাধ্যমে একাধিক বার ব্যবহার করা যায়। যখন একটি শর্ত সত্য হয় তখন প্রোগ্রামটি বারবার চলতে থাকে শর্তটি মিথ্যা হওয়া মাত্র লুপটি বন্ধ হয় অর্থাৎ প্রোগ্রামটি থেমে যায়। জাভাস্ক্রিপ্ট এ মোট ৩ ধরনের Loop ব্যবহার করা হয় ।

1. While

2. do ...... while

3. for

While loop:

While লুপ কে While statementও বলা হয়। While লুপ এ প্রথমেই Condition (শর্ত) থাকে, যদি শর্তটি সত্য হয় তবে While লুপটি এক্সিকিউশন হওয়া শুরু করে এবং অন্যান্য কোডিং অনুসারে কাজ করে। যদি Condition (শর্ত)টি সত্য না হয় তবে প্রোগ্রাম থেমে যায়।

While লুপের Structure নিন্মরূপ

While (Condition)

{

Statements

}

এবার While loop ব্যবহার করে প্রোগ্রাম লিখব।

প্রোগ্রামঃ While loop ব্যবহার

১। আপনার এডিটরে নিচের কোডিং এর মত করে প্রোগ্রাম লিখুন । এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0028.html নামে সেভ করেছি।

<html>

<head>

<title>While Example</title>

function CalculateLoop()

{

var number=document.getElementById("txtNumber").value;

number=parseInt(number);

var i=1;

while(i<=number)

{

document.write("The Line Number is "+i);

document.write("<br/>");

i++;

}

</script>

<head>

<body>

Input Number: <input type="text" id="txtNumber" /><br />

</body>

</html>

৩। ব্রাউজারে program_0028.html ফাইলটিকে ওপেন করুন।

৪। ইনপুট বক্সে যে কোন একটি নম্বর দিন।

৫। OK বাটনে ক্লিক করুন। ঠিক তত সংখ্যক লাইন দেখতে পাবেন।

ব্যাখ্যা: ইনপুট বক্স থেকে যে ভ্যালুটি নিলাম সেটি number ভেরিয়েবলে অ্যাসাইন করলাম। এবার number-টিকে পূর্বের ন্যায় integer এ কনসার্ট করে নিলাম। কারণ আমাদের কন্ডিশনের চেক করার জন্য যে ভেরিয়েবলটি (i) নেওয়া সেটি integer টাইপের ভেরিয়েবল । i=1 অ্যাসাইন করে নিলাম ।

বিঃদ্রঃ কন্ডিশন চেক সব সময় এভাবেই টাইপ এর ভ্যালুর মধ্যে হতে হয়, ভিন্ন টাইপ দ্বারা কন্ডিশন চেক করা যায় না।

এবার while(i<=number)

ব্যাপারটা এরকম যে লুপটা ঘোরো ততক্ষণ পর্যন্তু, যতক্ষণ না i এবং number এর ভ্যালু সমান হয়।

এবার Statement এর মধ্যে document.write(“this is line number”+i) লাইন নাম্বার প্রিন্ট করার কোড।এবার ইনক্রিমেন্ট স্টেটমেন্ট i++ অর্থ্যাৎ একবার লুপ ঘরে i এর মান বৃদ্ধি দিল।

উপরোক্ত নিয়মে i এর মান বাড়তে বাড়তে number এর সমান হলে while লুপের মধ্যের স্টেটমেন্ট Execute হবে না।

While loop ব্যবহার

এবার while লুপ ব্যবহার করে ১ থেকে n পর্যন্তু যোগফলের একটি প্রোগাম দেখব।

১। নিচের মত করে কোড লিখুন।

<html>

<head>

<title>While Example</title>

function CalculateSum()

{

var number=document.getElementById("txtNumber").value;

number=parseInt(number);

var i=1;

sum=0;

document.write("This Seris is : ");

while(i<=number)

{

sum=sum+i;

document.write(" "+i);

i++;

}

document.write(" = "+sum);

}

</script>

<head>

<body>

Input Number: <input type="text" id="txtNumber" /><br />

</body>

</html>

২। কোডটিকে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0029.html নামে সেভ করেছি।

৩। ব্রাউজারে program_0029.html ফাইলটিকে ওপেন করুন।

৪। ইনপুট বক্সে একটি number ইনপুট দিন। OK বাটন প্রেস করুন। নিম্নোক্ত ফলাফল দেখুন।

Do while লুপ

do ..... while লুপটি অনেকটা While লুপের মত তবে While লুপের প্রথমেই Condition (শর্ত) থাকে এবং শর্তটি সত্য না হলে প্রোগ্রাম লুপের মধ্যে প্রবেশ করে না। অপরদিকে do ..... while লুপে Condition (শর্ত) থাকে সবচেয়ে শেষে। এই কারনে শর্ত সত্য/মিথ্যা যাই হোক প্রথম একবার প্রোগ্রামটি রান করবে এবং শেষে শর্ত না মিললে দ্বিতীয়বার আর রান করবে না। do .... while লুপের Structure নিম্নরূপ:

{

Statement

}

while (Condition)

পূর্বের উদাহরণটিকে (program_0028) আমরা do while ব্যবহার শিখব। এক্ষেত্রে নিচের মত করে কোড লিখুন।

প্রোগ্রামঃ Do while লুপ ব্যবহার

১। নিচের মত করে কোড লিখুন।

<html>

<head>

<title>While Example</title>

function CalculateDo()

{

var number=document.getElementById("txtNumber").value;

number=parseInt(number);

var i=1;

{

document.write("The Line Number is "+i);

document.write("<br/>");

i++;

}

while(i<=number)

{

}

</script>

<head>

<body>

Input Number: <input type="text" id="txtNumber" /><br />

</body>

</html>

২। কোডটিকে এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0030.html নামে সেভ করেছি। ব্রাউজারে program_0030.html ফাইলটিকে ওপেন করুন।

For loop

for ,While এবং do ...... while লুপ কাজ মূলত একই শুধু এদের গঠন কেবল আলাদা। for লুপে তিনটি বিষয় এখানে বিবেচ্য, initialization-লুপের মান কত থেকে শুরু হবে, Test বা Condition-লুপ কখন শেষ হবে, সেই শর্ত দেওয়া হয়। Condition যখন False হয় তখন লুপ শেষ হয়।

Re-initialization-লুপের সংখ্যা লুপ পরিবর্তনের সাথে সাথে কত করে বাড়বে/কমবে সেটি নির্দিষ্ট করে দেওয়া হয়।

for .... Loop এর Structure হচ্ছে নিম্নরূপ

for(initilization; test; re-initilization)

{

body;

}

প্রোগ্রামঃ আমরা for লুপ ব্যবহার করে n! বের করব।

১। আপনার এডিটরে নিম্নোক্ত প্রোগ্রামটি লিখুন। এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0031.html নামে সেভ করেছি।

<html>

<head>

<title>For Loop Example</title>

function CalculateFact()

{

var number=document.getElementById("txtNumber").value;

number=parseInt(number);

var fact=1;

var i;

for(i=1;i<=number;i++)

{

fact=fact*i;

}

alert(" The Factrial of "+number+ " is = " +fact);

}

</script>

<head>

<body>

Input Number: <input type="text" id="txtNumber" /><br />

</body>

</html>

ফলাফল : ব্রাউজারে program_0031.html ফাইলটি ওপেন করুন। যে নম্বরের ফ্যাক্টরিয়াল বের করতে চান তা ইনপুট বক্সে ইনপুট দিন।OK বাটন ক্লিক করুন। নিচের ছবির মত ফলাফল দেখতে পাবেন।আমরা উদাহরণস্বরূপ 6 ইনপুট দিয়েছি। তাই ফলাফল 720 হয়েছে।

বিঃদ্রঃ ভালভাবে প্রোগ্রাম শিখতে হলে লুপ এবং কন্ডিশনাল স্টেটমেন্ট অবশ্য অবশ্য ভালভাবে জানতে হবে।

ব্যাখ্যা: পূর্বের ন্যায় ভ্যালু ইনপুট নিয়ে number ভেরিয়েবলের মধ্যে রাখা হল বা অ্যাসাইন করা হল।

এখানে দেখা গেছে লুপটি (i=1) অর্থ্যাৎ ১ বার হতে (c £ number)। i এর মান number থেকে ছোট বা সমান সংখ্যকবার হওয়া পর্যন্তু ঘুরবে। এখানে increment অপারেটর রয়েছে i++ অর্থ্যাৎ i এর মান প্রতি ধাপে ১ করে বৃদ্ধি করবে।এরপর fact এর মধ্যে পূর্বের fact এর ভ্যালুর সাথে i গুণ হয়ে অ্যাসাইন হবে। এভাবে লুপ শেষ হলেই আমরা ইনপুট করা number এর factional বা ১ থেকে সেই সংখ্যা পর্যন্তু গুণফল বের করতে পারা।

Break Statement: আমরা for loop এর factional উদাহরণে break statement ব্যবহার করেছি।

প্রোগ্রামঃ Break Statement ব্যবহার

১। আপনার এডিটরে নিচের কোডিং এর মত করে প্রোগ্রাম লিখুন ।এবার ফাইলটিকে কে একটি নির্দিষ্ট নামে সেভ করুন। আমরা এখানে program_0032.html নামে সেভ করেছি।

<html>

<head>

<title>While Example</title>

function CalculateGrade()

{

var number=document.getElementById("txtNumber").value;

number=parseInt(number);

var i;

var fact=1;

for(i=1;i<=number;i++)

{

fact=fact*i;

if(i==6)

{

break;

}

alert(" The Factrial of "+i+ " is = " +fact);

}

</script>

<head>

<body>

Input Number: <input type="text" id="txtNumber" /><br />

</body> </html>

ফলাফল : ব্রাউজারে program_0032.html ফাইলটি ওপেন করুন। যে কোন ভ্যালু ইনপুট দিন।

ব্যাখ্যা: দেখা যাবে যে, যত বারই বেশি সংখ্যা দিন না কেন প্রতি বারেই ফলাফল আসবে 720। কারণ এখানে বলা হয়েছে যদি i এর মান 6 হয় তবে লুপ ব্রেক হয়ে পরবর্তী ইন্সট্রাকশন এক্সিকিউট করবে।

if (i==6)

{ break ;

}

অর্থাৎ লুপে i এর মান বৃদ্ধিতে হত 6 এর সমান হলে লুপ থেকে লুপ ব্রেক হয়ে যাবে এবং তখনকার factorial টি দেখাবে।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

Writer: Bappi Ashraf

Published By: Gyankosh Prokashani

Amount of Pages: 464

First Publish: October-2004

Last Edition: We've February-2015 edition. Future edition may be existed!