জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল (পর্ব-৯)

জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল এর নবম ও শেষ পর্বে আপনাকে স্বাগতম। এই পর্বে আমরা জাভাস্ক্রিপ্ট এর অ্যানিমেশন, ইমেজ ম্যাপ, টাইমিং ইভেন্ট ও কিছু অবজেক্ট নিয়ে আলোচনা করব।

জাভাস্ক্রিপ্ট এর অ্যানিমেশন তৈরির জন্য:

<html>
<head>
<script
 type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>
</head>
<body>
<a href="http://www.google.com " target="_blank">
<img border="0" alt="Visit Google!" src="b_pink.gif" id="b1" 
width="26" height="26" onMouseOver="mouseOver()" onMouseOut="mouseOut()"
 /></a>
</body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

জাভাস্ক্রিপ্ট এর ইমেজ ম্যাপ তৈরির জন্য:

<html>
<head>
<script
 type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" 
usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter 
are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study 
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often considered a  
twin sister to the Earth because Venus is the nearest planet to us, and 
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc">
</p>
</body>
</html>

<html>

<head>

</head>

<body>

<area shape ="rect" coords ="0,0,82,126"

onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')"

href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"

onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')"

href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"

onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')"

href ="venus.htm" target ="_blank" alt="Venus" />

</map>

</body>

</html>

জাভাস্ক্রিপ্ট এর টাইমিং ইভেন্ট এ ভবিষ্যতে কোনো এক সময়ে একটি কোডকে দেখানোর জন্য setTimeout() মেথড ব্যবহার করা হয়ে থাকে।

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">
</form>
<p>
Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>

<html>

<head>

</head>

<body>

<form>

</form>

<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>

</body>

</html>

clearTimeout() মেথড:

<html>
<head>
<script
 type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
<p>
Click on the "Start count!" button above to start the timer. The input 
field will count forever, starting at 0. Click on the "Stop count!" 
button to stop the counting.
</p>
</body>
</html>

<html>

<head>

</head>

<body>

<form>

</form>

<p>

Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.

</p>

</body>

</html>

টাইমিং ইভেন্ট ব্যবহার করে ঘড়ি তৈরি করা:

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt">
</div>
</body>
</html>

<html>

<head>

</head>

</body>

</html>

একটি অবজেক্ট এর ডাইরেক্ট ইনস্ট্যান্স তৈরি করা:

<script type="text/javascript">
personObj=new Object();
personObj.firstname="Fazle";
personObj.lastname="Hasan";
personObj.age=63;
personObj.eyecolor="black";
document.write(personObj.firstname + " is " + personObj.age + " years old.");
</script>

একটি অবজেক্ট এর জন্য একটি টেম্পলেট তৈরি করা:

<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("Fazle","Hasan",63,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

বাসায় এই কোড গুলো ভালোভাবে চর্চা করুন। আশা করি এই নয়টি টিউটোরিয়াল ভালোভাবে চর্চা করতে পারলে জাভাস্ক্রিপ্ট এর বেসিক ধারণা পেয়ে যাবেন। ধন্যবাদ।

বি. দ্র.: পুরো টিউটোরিয়ালটি কেমন হলো জানাতে ভুলবেন না। কারণ আপনাদের মন্তব্যই আমার একমাত্র উৎসাহের হাতিয়ার। সম্পুর্ণ ভিডিওতে আমার জানা-অজানায় অনেক ভুল হতে পারে। ভিডিওতে কোনো কথা কোন ব্যক্তি বা প্রতিষ্ঠানকে নিয়ে যদি বলা হয়ে থাকে, তা নিতান্তই অনিচ্ছাকৃত। নিজ গুণে ক্ষমা করে দিবেন। কোথাও কোনো ভুল থাকলে অথবা কোনো প্রশ্ন থাকলে অবশ্যই মন্তব্য করে জানাবেন।

জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল (পর্ব-৯)

Share to:

একটি মন্তব্য পোস্ট করুন Blogger Facebook

জনপ্রিয়

মন্তব্য

আর্কাইভ

জাভাস্ক্রিপ্ট বাংলা টিউটোরিয়াল (পর্ব-৯)

Share to:

Next

নবীনতর পোস্ট

Previous

পুরাতন পোস্ট

একটি মন্তব্য পোস্ট করুন Blogger Facebook