টিউটোরিয়ালবিডি » জাভাস্ক্রিপ্ট http://tutorialbd.com/bn First Bangla Tutorial Online Platform | বাংলা টিউটোরিয়াল ভান্ডার Thu, 23 Feb 2012 02:37:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 জাভাস্ক্রিপ্ট ফাংশন http://tutorialbd.com/bn/?p=3776 http://tutorialbd.com/bn/?p=3776#comments Tue, 08 Jun 2010 12:21:56 +0000 মাহবুব টিউটো http://tutorialbd.com/bn/?p=3776 বেশ কিছুদিন ধরে জাভাস্ক্রিপ্টের উপর লেখ বন্ধ আছে। অনেকেই এ ব্যাপারে টিউটরিয়াল চালু করার জন্য অনুরোধ করায় আবার শুরু করলাম। আমি নিজে জাভাস্ক্রিপ্টে বেশ ঝানু না তবে যতটুকু জানি ততটুকু শেয়ার করার চেস্টা করছি। জাভা

জাভাস্ক্রিপ্ট (JavaScript) ফাংশন হলো কিছু কোডের সমস্টি যা বিভিন্ন সময় প্রয়োজন অনুসারে ব্যবহার করা যায়। ওয়েবসাইটটি লোড হওয়ার পরে বিভিন্ন ইভেন্টেও ফাংশনটিকে ডেকে নিয়ে কাজ করানো যায়। (এরকম একটি প্রজেক্ট এখানে দেখতে পারেন)

গঠন (Syntax):

function functionname(var1,var2,…,varX)
{
কোড সমুহ
}

ফাংশন ডিক্লার করতে প্রথমেই function লিখে স্পেস দিয়ে তার পর ফাংশন নাম দিতে হবে। কোন ফাংশনের প্যারমিটারগুলো কমা দিয়ে প্রকাশ করতে হবে।

ফাংশনে যে সব জাভাস্ক্রিপ্ট কোড ব্যবহার করা হবে তা অবশ্যই { } এর মধ্যে দিতে হবে।

যে সব ফাংশনের কোন প্যারামিটার থাকবে না তা অবশ্যই তাতে অবশ্যই () ব্যবহার করতে হবে।

ফাংশনের নাম অবশ্যই ছোট হাতের অক্ষরে লিখতে হবে।

নিচের প্রোগ্রামটি দেখুন

<html>
<head>
<script type=”text/javascript”>
function displaymessage()
{
alert(“Hello World!”);
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Click me!” onclick=”displaymessage()” />
</form>
</body>
</html>

এর আউটপুট দেখতে এখানে ক্লিক করুন।

রিটার্ণ স্টেটমেন্ট

আমরা ফাংশনের মাধ্যমে একটি ছোট যোগ অংক করবো । প্রোজেক্টটি দেখুন:

<html>
<head>
<script type=”text/javascript”>
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type=”text/javascript”>
document.write(product(4,3));
</script>

</body>
</html>

আউটপুট দেখতে এখানে ক্লিক করুন।

যতক্ষন জাভাস্ক্রিপ্ট ফাংশনটি চলমান থাকে ততক্ষন ভ্যারিয়্যাবলটি কাজ করবে। ফাংশনটি বন্ধ হওয়ার সাথে সাথে তা সয়ংক্রিয়ভাবে মুছে যায়।

ফাংশনের বাইরের ভ্যারিয়্যাবলের মান পৃষ্ঠাটি চলমান থাকা পর্যন্ত কাজ করে।

এই টিউটরিয়ালটি w3schools এর এখান থেকে বাংলায় অনুবাদকৃত। এই সাইটে অনেক সুন্দর সুন্দর টিউটরিয়াল আছে আপনারা দেখে শিখে নিতে পারেন,যা হয়তো বাংলা কোন টিউটরিয়াল সাইটে পাবেন না।

]]> http://tutorialbd.com/bn/?feed=rss2&p=3776 8 HTML ফর্ম জাভাস্ক্রিপ্ট ইভেন্ট http://tutorialbd.com/bn/?p=3756 http://tutorialbd.com/bn/?p=3756#comments Sun, 06 Jun 2010 06:20:40 +0000 মাহবুব টিউটো http://tutorialbd.com/bn/?p=3756 বেশ কিছু দিন HTML এর নিয়মিত টিউটরিয়াল লিখছিলাম। সেখানে সর্ব শেষ টিউটরিয়াল ছিল ফর্ম ডিজাইনের উপরে। ওয়েবে ফর্ম ডিজাইন করার পর সাধারনত: তাকে কাজ করার জন্য জাভাস্ক্রিপ্ট বা পিএইচপি ব্যবহার করতে হয়। ফর্মের টেক্সটবক্স,ইনপুট বক্স,বাটন,চেকবক্স ইত্যাদির ক্লিক ডাবলক্লিক, ফোকাস,লস্ট ফোকাস ইত্যাদি ইভেন্ট সম্পর্কে আজকের আলোচনা। ছোট জাভাস্ক্রিপ্ট দিয়ে কাজটি উদ্ধার করতে হবে,তা না হলে সম্পুর্ণ বেপারটি বুঝা যাবে না।
tutorialbd,html,javascript

লিংক ইভেন্ট

onClick

এর মাধ্যমে ক্লিকের পরের কি হবে তা প্রকাশ করে দিতে পারেন। নিচের কোডটা দেখুন

<IMG SRC = http://tutorialbd.files.wordpress.com/2010/03/logo.gif onClick = “alert(‘This is Logo of TutorialBD.com’)”>

আউটপুট দেখুন: ছবিটিতে ক্লিক করলেই This is Logo of TutorialBD.com কমান্ডটি দেখা যাবে।

onDblClick

onDblClick এর জায়গায় onDblClick ণিখে কোড এক্সিকিউট করলে , ছবিটিতে ডাবল ক্লিক করলে একই ঘটনা ঘটবে।

mouseOut

মাউস কোন একটি লিঙ্কের উপর থেকে চলে গেলে,সেই ইভেন্টটি কাজ করবে।

mouseOver

মাউসটি কোন লিংকের উপরে আসলে সেই ইভেন্টটি কাজ করবে।

ইনপুট ইভেন্ট

blur

কোন একটি ইনপুট অবজেক্ট থেকে সরে গিয় অন্য অবজেক্টে কাজ করার সময়টাকে বুঝায়। (ফিজুয়ালবেসিকে এটাকে LostFocus বলা হয়।) সাধারনত: ডাটা চেক করতে এটি ব্যবহার করা হয়।নিচের কোডটা দেখুন।

<INPUT TYPE = text onBlur = “alert(‘Lost focus’)”>

এবার আউটপুট দেখুন। ইনপুট বক্সে কিছু লিখুন ।এবার অন্য কোথাও ক্লিক করুন। এলার্ট ব্কটি আসবে।

তাহলো আমরা একটি জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে এর ব্যবহারিক দিক দেখবো।

Enter email address <INPUT TYPE="text" VALUE=""          NAME="userEmail" onBlur=addCheck()>

<script type="text/javascript" language="JavaScript">

function addCheck() {
alert("Please check your email details are correct          before submitting")
}

</script>

পরবর্তিতে নিচের ইভেন্টগুলো আলোচনা করা হবে:

  • change
  • focus
  • reset
  • select
  • submit

টিউটরিয়ালবিডির ভক্ত হিসেবে আমি মনে করি ফিড সাবক্রাইব করার সুবিধা নিতে ভুলবেন না। আর টিউটরিয়ালবিডির লিংকটি আপনার সাইটের (যদি থাকে) কোন অংশে প্রদান করে-এগিয়ে চলার পথ সহজ করলে আমারা আরও নতুন নতুন টিউটরিয়াল নিয়ে হাজির হতে পারবো। ই-মেইলের মাধ্যমে অনেকেই টিউটিরয়াল পড়ছেন। এ পোস্ট লেখা পর্যন্ত প্রায় ৩০০+ জনকে প্রতিটি টিউটরিয়াল ই-মেইলের মাধ্যমে পাঠানো হচ্ছে। আপনি যদি ই-মেইল পাঠক হতে চান তাহলে এখানে আপনার ইমেইল আইডি দিয়ে দিন, তার পর নিজের মেইল ব্ক্স থেকে একটিভেট করে নিন। এছাড়াও টুইটারে,গুগল বাজ এবং ফেসবুকে টিউটরিয়ালবিডিকে পাবেন।

]]> http://tutorialbd.com/bn/?feed=rss2&p=3756 6 জাভাস্ক্রিপ্টে পপ আপ বক্স :জাভাস্ক্রিপ্ট টিউটরিয়াল -৩ http://tutorialbd.com/bn/?p=3472 http://tutorialbd.com/bn/?p=3472#comments Sun, 11 Apr 2010 11:58:46 +0000 মাহবুব টিউটো http://tutorialbd.com/bn/?p=3472 আবার ফিরে এলাম ধারাবাহিক জাভাস্ক্রিপ্ট টিউটরিয়ালে। এ পর্বে আমরা শিখবো পপআপ মেনুর ব্যবহার, কমান্ড বক্স,ইনপুট বক্স ইত্যাদি সম্পর্কিত প্রাথমিক ধারণা।যারা আগের টিউটরিয়ালে চোঁখ রাখতে পারেন নি তারা আগের পর্ব আগে শেষ করুন।

জাভাস্ক্রিপ্ট এক দুই তিন

জাভাস্ক্রিপ্ট ভ্যারিয়্যাবল ও সাধারন গানিত

এলার্ট বক্স


জাভাস্ক্রিপ্টে
alert(“I am an alert box!”);
এতটুকু লিখলেই একটি এলার্ট বক্স আসবে।

একটি বাটনে ক্লিক করলেই এলার্ট ব্ক্সটি আসতে পারে।

<head>
<script type=”text/javascript”>
function show_alert()
{
alert(“I am an alert box!”);
}
</script>
</head>
<body>

<input type=”button” onclick=”show_alert()” value=”Show alert box” />

কনফার্ম বক্স

কনফার্ম বক্স
এটির মাধ্যমে ভিজিটর থেকে সিদ্ধান্ত নেয়া হয়। confirm(“Press a button!”); ফাংশনটি true অথবা false মান রিটার্ন করে। ok বাটনে ক্লিক করলে true আর cancel বাটনে ক্লিক করলে false রিটার্ন করে।
নিচের উদাহরণটি দেখুন:

<html>
<head>
<script type=”text/javascript”>
function show_confirm()
{
var r=confirm(“Press a button!”);
if (r==true)
{
document.write(“You have pressed OK”);
}
else
{
document.write(“You Have pressed Cancel”);
}
}
</script>
</head>
<body>

<input type=”button” onclick=”show_confirm()” value=”Show a confirm box” />

</body>
</html>

ইনপুট বক্স


প্রমোট বক্সের মাধ্যমে ইউজারের কাছ থেকে ইনপুট নেয়া করা হয়। এটি একটি ভ্যারিয়্যাবলের মান হিসেবে ডিক্লার করতে হয়। ইনপুট বক্সের মানটি সেই ভ্যারিয়্যাবলে জমা থাকে।
প্রকাশের পদ্ধতি:
prompt(“টেক্সট যা ইনপুট বক্সের উপরে লেখা থাকে”,”ইনপুট বক্সের ডিফল্ট মান”);

var name=prompt(“নিচের টেক্সট বক্সে আপনার নাম লিখুন”,”নাম”);
if (name!=null && name!=”")
{
document.write(“স্বাগতম ” + name + “! আপনি কেমন আছেন?”);
}

]]> http://tutorialbd.com/bn/?feed=rss2&p=3472 1 জাভাস্ক্রিপ্ট ভ্যারিয়্যাবল ও সাধারন গানিত http://tutorialbd.com/bn/?p=3311 http://tutorialbd.com/bn/?p=3311#comments Sun, 21 Mar 2010 10:59:32 +0000 মাহবুব টিউটো http://tutorialbd.com/bn/?p=3311 বেশ কিছু দিন পর আবার ফিরে এলাম জাভাস্ক্রিপ্ট বাংলা টিউটরিয়ালে। যারা প্রাখমিক পর্যায়ে আছে তাদের জন্যই এ টিউটরিয়াল। আগের পর্বটি যারা না দেখেছেন তারা দেখে নিন জাভাস্ক্রিপ্ট এক দুই তিন। এ পর্বে আমরা জাভাস্ক্রিপ্ট এর স্টেটমেন্ট এবং ভ্যারিয়্যাবল নিয়ে কাজ করবো।

যারা এইচটিএমএল শিখতে আগ্রহী তারা নজর রাখুন আমাদের আগের টিউটরিয়ালগুলো।

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)

HTMLপর্ব- দুই: রঙের ব্যবহার

HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার

HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১

HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২

HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার

জাভাস্ক্রিপ্ট স্টেটমেন্ট:

জাভাস্ক্রিপ্ট স্টেটমেন্ট মূলত: ব্রউজারকে কোন কিছু করতে বলে।
document.write(“Hello Dolly”);
স্টেটমেন্ট দিয়ে ব্রাউজারকে Hello Dolly লিখতে বলে। স্টেটমেন্টের শেষে সেমিকোলন (;) দিয়ে শেষ করতে হয়। একের পর এক স্টেটমেন্ট লিখতে পারেন এভাবে

<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

কমেন্টস:

আপনি যদি আগের কোন প্রগ্রামিং ল্যাঙ্গুয়েজ শিখে থাকেন তাহলে comments এর প্রয়োজনিয়তা বুঝতে পারেন। প্রগ্রামের মধ্যে যা প্রগ্রামের অংশ না কিন্তু প্রগ্রামারের সুবিধার জন্য নোট আকারে comments লেখা হয়।( সিএসএস এ কমেন্ট লেখার পদ্ধতি এখানে লেখা আছে।)
কমেন্ট লেখার ক্ষেত্রে // চিহ্ন দিয়ে কমেন্ট লিখুন। যেমন-

<script type="text/javascript">
// এটি কমেন্ট, যা প্রোগ্রামের অংশ নয়।
document.write("<h1>This is a heading</h1>");
// এক লাইনের কমেন্ট এভাবে লিখুন
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

একাধিক লাইন হলে

<script type="text/javascript">
/*
উপরের চিহ্ন দিয়ে কমেন্ট লেখা শুরু করুন
একাধিক লাইনের কমেন্ট এভাবে লিখতে হয়।
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

অংক শেখা:

স্কুলে পড়ার সময়ের যোগ বিয়োগ অংক শিখবো, একটু ভিন্নভাবে-প্রোগ্রামের ভাষায়। কম্পিউটারের নাম যদি হয় গণক, তাহলে কেন আমরা এটা দিয়ে এত বেশি অংক করি না। চলুন এখন অংক করা যাক। জাভাস্ক্রিপ্টের ভাষায় কাজটি করতে গেলে প্রথমে দুই ভ্যারিয়্যাবল দিয়ে কাজ করতে হবে।
ভ্যারিয়্যাবল কি?
Variables হচ্ছে একটা পাত্রের মত(Container)যেখানে আমরা অনেক তথ্য রাখতে পারি।যেমন একটা টেক্সক্ট String “Hello Bangladesh” অথবা একটা integer value 100. কোন একটা Variable এ একবার তথ্য রেখে (কোন Variable এ কিছু রাখা এটাকে বলে Variable declare বা ঘোষনা)সেটা পুরো কোডজুরে বারবার ব্যাবহার করতে পারেন*

ভ্যারিয়্যাবল ডিক্লার করা:

ভ্যারিয়্যাবল প্রকাশ করতে হলে প্রথমে var লিখে তারপর ভ্যারিয়্যাবলের নাম উল্লেখ করে সেমিকোলন(;) দিতে হবে। যেমন-
var x;
var carname;
সাথে সাথে মান উল্লেখ করতে চাইলে সমান (=) চিহ্ন দিয়ে মান লিখে দিন। যেমন-
var x=5;
var carname=”Volvo”;

গানিতিক স্টেটমেন্ট

কোন ভ্যারিয়্যাবলের সাথে অন্যটি যোগ/বিয়োগ করার পদ্ধতি:
y=x-5;
z=y+5;

নিচের ছকে অপারেটরের ব্যবহার দেখুন:

Operator Description Example Result
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
– Decrement x=–y x=4

একাধিক স্ট্রিং এক করার ক্ষেত্রে + অপারেটরটি ব্যবহার করা যায়।
txt1=”What a very”;
txt2=”nice day”;
txt3=txt1+” “+txt2;

কোডটুকুর আউটপুট হবে-
What a very nice day

তাহলে হয়ে যাক একটি ছোট প্রজেক্ট

<html>
<body>

<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>

<p>The rule is: If you add a number and a string, the result will be a string.</p>

</body>
</html>

আউটপুট হবে:
10
55
55
55

The rule is: If you add a number and a string, the result will be a string.

আমাদের সাথে থাকার জন্য ধন্যবাদ। আমাদের HTML ও  সিএসএস এর টিউটরিয়াল গুলো দেখুন। আশা করা যায় আমরা ওয়েব প্রোগ্রামিং এ ভাল অবস্থান তৈরী করতে পারবো।

সিএসএস টিউটরিয়াল সূচিপত্র:

CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)

সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন) CSS পাঠ-২

ব্যাগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা

সুন্দর সুন্দর বক্স মডেল

সহজেই বানিয়ে ফেলি ছবির গ্যালারী

বেশি কিছু না, সিএসএস (CSS) ১০টি টিপস

৭ টি সিএসএস গরম মসলা

]]> http://tutorialbd.com/bn/?feed=rss2&p=3311 2 জাভাস্ক্রিপ্ট এক দুই তিন http://tutorialbd.com/bn/?p=3233 http://tutorialbd.com/bn/?p=3233#comments Thu, 11 Mar 2010 07:23:05 +0000 মাহবুব টিউটো http://tutorialbd.com/bn/?p=3233

নিয়মিত কোন কিছুই ভাল লাগে না। নিয়মিত কোন কিছু করলে নাকি সফল হওয়া যায়। কিছু দিন আগে ওয়ারলেস নেটওয়ার্কের উপর লেখালেখি করতে গিয়ে বেশি দূর এগিয়ে যেতে পারি নি। এরপর ওয়ার্ডপ্রেস ও সি.এস.এস এর উপরও কিছু লিখতে চেস্টা করেছি। এখন ভাবছি ওয়েব প্রোগ্রামিং এর আরও কিছু করতে। জাভান্ক্রিপ্টের উপর লেখারও সখ জাগলো। তাই কিছু কিছু করে শুরু করি জাভাস্ক্রিপ্ট টিউটরিয়াল। আশা করবো আমার সাথে থাকবেন এবং মতামতের মাধ্যমে আমাকে অনুপ্ররণা দিয়ে সহযোগিতা করবেন।

জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট মূলত: HTMLএ ওয়েব  ডিজাইনারদের প্রগ্রামিং এ কাজ করার সুবিধা দেয়।

জাভাস্ক্রিপ্ট সরাসরি HTML পেজে এমবেড করে এবং আলাদা ফাইল আকারে ব্যবহার করা যায়।

জাভাস্ক্রিপ্টের অনন্য বৈশিষ্ট্য

.           জাভাস্ক্রিপ্ট HTML পেজে ডায়নামিক কনটেন্ট যুক্ত করার সুবিধা প্রদান করে।যেমন- document.write(“<h1>” + name + “</h1>”) এর মতো করে HTML কোড লেখা যায়।

.             জাভাস্ক্রিপ্টের মাধ্যমে ইভেন্ট নিয়ে কাজ করা যায়। যখন কোন ইলিমেন্ট এ ক্লিক করা হয় তখনই নতুন করে কোন স্ক্রিপ্ট লোড করার ব্যবস্খা করা যায়।

.             জাভাস্ক্রিপ্ট কোন HTML ইলিমেন্টকে ডায়নামিকভাবে লোড করতে বা আনলোড করতে পারে।

.              জাভাস্ক্রিপ্টের মাধ্যমে ফরমের ডাটা ভেলিডেশন চেক করতে পারে।

.             ভিজিটরের ব্রাউজার ডিটেক্ট করে ভিন্ন ভিন্ন কোড এক্সিকিউট করতে পারে।

.             ইউজারের কম্পিউটারের তথ্য নিতে পারে ।

.             কুকি ব্যাবহার করতেও জাভাস্ক্রিপ্টের দরকার পরে।

কোড লেখার নিয়ম কানুন

১.HTML কোডের মধ্যে জাভাস্ক্রিপ্ট কোড লিখতে হলে

<script>এর মধ্যে কোড লিখতে হয়</script>

নিচে দেখি

<html>
<body>
<script>
document.write(“Hello World!”);
</script>
</body>
</html>

২. কোথায় লিখবেন কোড

কোন পেজের লোড ইভেন্টে কাজ করতে হলে <head></head> সেকশনে জাভাস্ক্রিপ্ট কোড লিখতে হয়। যেমন-

<html>
<head>
<script>
function message()
{
alert(“This alert box was called with the onload event”);
}
</script>
</head>

<body>
</body>
</html>

তা না করে বডিতেও কোড লিখতে পারেন।

<html>
<head>
</head>

<body>
<script>
document.write(“This message is written by JavaScript”);
</script>
</body>

</html>

৩. বাইরের জাভাস্ক্রিপ্ট ফাইল কল করা

জাভাস্ক্রিপ্ট কোড লিখে  *.js ফরমেটে সেভ করতে পারেন। এটাকে কল করেও কাজ করা যায়। যেমন-

<html>
<head>
<script src=”xxx.js”></script>
</head>
<body>
</body>
</html>

প্রখম ক্লাস হিসেবে আজ এ পর্যন্তই থাক।আগামী ক্লাসে আরও নিয়ম কানুন আর ছোট ছোট প্রজেক্ট নিয়ে হাজির হবো।আশা করি, আপনার সু চিন্তিত মতামত দিয়ে আমাদের সহযোগিতা করবেন। আজ এ পযর্ন্তই সাথে থাকুন, ভাল থাকুন।

]]> http://tutorialbd.com/bn/?feed=rss2&p=3233 12