জাভাস্ক্রিপ্ট দিয়ে ঘড়ি এবং ক্যালকুলেটর তৈরী [আজাইরা পোস্ট]
একটা সময় ছিল যখন ওয়েব ডেভলপাররা নাকের পানি চোখের পানি এক করে এক একটা পেজ তৈরী করতেন। একটা বাটনকে নান্দনিক করার জন্য কত রকম কলাকৌশল যে তাতে প্রয়োগ করতে হতো তার আর দেখে কে? কলাকৌশল আবার কী? লাইনের পর লাইন তারপর আরো লাইন। আর এখনতো রেডিমেট সিএমএসগুলো আসার পর থেকে সুবিধা হতে হতে এতটাই সুবিধা হয়ে গেছে যে, প্রায় সব হোস্টিং প্রোভাইডররাই এখন এক ক্লিকে ওয়েবসাইট সেটাপের সুবিধা দিচ্ছে। এ যেন ডস মোড থেকে একেবারে উইন্ডোজ সেভেনের অবস্থা। সাইটের চেহারা বদলাতে হবে তো পুটুশ করে থিমটি বদলে দিলাম, ব্যাস বদলে গেলো। সাইটে একটা ঘড়ি লাগাতে হবে তো দিলাম একটা প্লাগিন ইনস্টল করে। কিন্তু দেখুন একসময় একটি ঘড়ি তৈরী করতে কতকিছু করতে হতো-
<SCRIPT language="JavaScript">
<!--
function startclock()
{
var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
var AorP=" ";
if (nhours>=12)
AorP="P.M.";
else
AorP="A.M.";
if (nhours>=13)
nhours-=12;
if (nhours==0)
nhours=12;
if (nsecn<10)
nsecn="0"+nsecn;
if (nmins<10)
nmins="0"+nmins;
document.clockform.clockspot.value=nhours+":"+nmins+":"+nsecn+" "+AorP;
setTimeout('startclock()',1000);
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="startclock()">
<FORM name="clockform">
<INPUT TYPE="text" name="clockspot" size="15">
</FORM>
ফলাফল হিসেবে পাওয়া যেত
এরকম একটি নিরীহ প্রকৃতির ঘড়ি। এবার যদি মনে করি ঘড়িটির সাথে তারিখও দেখানো দরকার তাহলেতো আরো লিখতে হবে
<SCRIPT language="JavaScript">
<!--
function startclock()
{
var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
var nday=thetime.getDay();
var nmonth=thetime.getMonth();
var ntoday=thetime.getDate();
var nyear=thetime.getYear();
var AorP=" ";
if (nhours>=12)
AorP="অপরাহ্ন";
else
AorP="পূর্বাহ্ন";
if (nhours>=13)
nhours-=12;
if (nhours==0)
nhours=12;
if (nsecn<10)
nsecn="0"+nsecn;
if (nmins<10)
nmins="0"+nmins;
if (nday==0)
nday="রবিবার";
if (nday==1)
nday="সোমবার";
if (nday==2)
nday="মঙ্গলবার";
if (nday==3)
nday="বুধবার";
if (nday==4)
nday="বৃহস্পতিবার";
if (nday==5)
nday="শুক্রবার";
if (nday==6)
nday="শনিবার";
nmonth+=1;
if (nyear<=99)
nyear= "19"+nyear;
if ((nyear>99) && (nyear<2000))
nyear+=1900;
document.clockform.clockspot.value=nhours+": "+nmins+": "+nsecn+" "+AorP+" "+nday+", "+nmonth+"/"+ntoday+"/"+nyear;
setTimeout('startclock()',1000);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="clockform">
<INPUT TYPE="text" name="clockspot" size="40">
</FORM>
<SCRIPT language="JavaScript">
<!--
startclock();
//-->
</SCRIPT>
তাহলে হবে এরকম-
আর যদি মনে করি জাভাস্ক্রিপ্ট দিয়ে একটা ক্যালকুলেটর বানাবো তাহলেতো মোটামুটি পেট খারাপ হবার জোগাড়। অবস্থা নিজেই দেখুন-
<script language="javascript" type="text/javascript">
<!--
// Hide script from older browsers
var accumulator = 0.0;
var lastentry = 0.0;
var decpos = 0;
var sign = 1;
var lastkey = "equals";
var whattodo = "equals";
function Adddigit(digit) {
var temp,digit;
if (lastkey != "digit") {
document.Calculator.entryresult.value = 0.0;
if (lastkey == "equals") {
accumulator = 0.0;
whattodo = "equals"; } }
temp = parseFloat(document.Calculator.entryresult.value);
if (decpos == 0)
document.Calculator.entryresult.value = temp*10 + parseInt(digit)*sign
else
{ document.Calculator.entryresult.value = temp + parseInt(digit)/decpos*sign;
decpos = decpos * 10;}
lastentry = parseFloat(document.Calculator.entryresult.value);
lastkey = "digit"; }
function DoSomething(TheCalculator) {
switch (whattodo) {
case "equals": {
accumulator = parseFloat(document.Calculator.entryresult.value);
break; }
case "add": {
accumulator = accumulator + lastentry;
document.Calculator.entryresult.value = accumulator;
break; }
case "subtract": {
accumulator = accumulator - lastentry;
document.Calculator.entryresult.value = accumulator;
break; }
case "multiply": {
accumulator = accumulator * lastentry;
document.Calculator.entryresult.value = accumulator;
break; }
case "divide": {
accumulator = accumulator / lastentry;
document.Calculator.entryresult.value = accumulator;
break; } }
if (lastkey != "equals") whattodo = lastkey; }
function Add(TheCalculator) {
decpos = 0;
sign = 1;
lastentry = parseFloat(document.Calculator.entryresult.value);
if (lastkey == "digit")
{ lastkey = "add";
DoSomething(TheCalculator); }
else
{ lastkey = "add"; whattodo = "add"; } }
function Subtract(TheCalculator) {
decpos = 0;
sign = 1;
lastentry = parseFloat(document.Calculator.entryresult.value);
if (lastkey == "digit")
{ lastkey = "subtract";
DoSomething(TheCalculator); }
else
{ lastkey = "subtract"; whattodo = "subtract"; } }
function Multiply(TheCalculator) {
decpos = 0;
sign = 1;
lastentry = parseFloat(document.Calculator.entryresult.value);
if (lastkey == "digit")
{ lastkey = "multiply";
DoSomething(TheCalculator); }
else
{ lastkey = "multiply"; whattodo = "multiply"; } }
function Divide(TheCalculator) {
decpos = 0;
sign = 1;
lastentry = parseFloat(document.Calculator.entryresult.value);
if (lastkey == "digit")
{ lastkey = "divide";
DoSomething(TheCalculator); }
else
{ lastkey = "divide"; whattodo = "divide"; } }
function Equals(TheCalculator) {
decpos = 0;
sign = 1;
if ((lastkey == "add") || (lastkey == "subtract") || (lastkey == "multiply") || (lastkey == "divide"))
whattodo = lastkey;
lastkey = "equals";
DoSomething(TheCalculator); }
function Setdecpos() {
decpos = 10; }
function Squareroot(TheCalculator) {
decpos = 0;
sign = 1;
lastkey = "equals";
temp = parseFloat(document.Calculator.entryresult.value);
document.Calculator.entryresult.value = Math.sqrt(temp);
lastentry = parseFloat(document.Calculator.entryresult.value); }
function Percent(TheCalculator) {
decpos = 0;
sign = 1;
lastkey = "equals";
document.Calculator.entryresult.value = (lastentry / 100) * accumulator;
lastentry = parseFloat(document.Calculator.entryresult.value); }
function ChngeSign(TheCalculator) {
sign = sign * -1;
temp = parseFloat(document.Calculator.entryresult.value);
document.Calculator.entryresult.value = temp * -1;
lastentry = parseFloat(document.Calculator.entryresult.value); }
function Invert(TheCalculator) {
decpos = 0;
sign = 1;
lastkey = "equals";
temp = parseFloat(document.Calculator.entryresult.value);
document.Calculator.entryresult.value = 1 / temp;
lastentry = parseFloat(document.Calculator.entryresult.value); }
function Initialize(TheCalculator) {
accumulator = 0.0;
lastentry = 0.0;
decpos = 0;
sign = 1;
lastkey = "equals";
whattodo = "equals";
document.Calculator.entryresult.value = 0.0;
document.Calculator.entryresult.focus(); }
function ClearEntry(TheCalculator) {
lastentry = 0.0;
decpos = 0;
sign = 1;
document.Calculator.entryresult.value = 0.0;
document.Calculator.entryresult.focus(); }
//-->
</script>
</HEAD>
<BODY BGCOLOR="WHITE">
<form name="Calculator">
<table width="50%" align="center">
<tr>
<td colspan="5" align="center">
<input type="text" name="entryresult" size=40 maxlength=40>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 7 " onClick="Adddigit(7)">
</td>
<td align="center">
<input type="button" value=" 8 " onClick="Adddigit(8)">
</td>
<td align="center">
<input type="button" value=" 9 " onClick="Adddigit(9)">
</td>
<td align="center">
<input type="button" value=" / " onClick="Divide(Calculator)">
</td>
<td align="center">
<input type="button" value="Sqrt" onClick="Squareroot(Calculator)">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 4 " onClick="Adddigit(4)">
</td>
<td align="center">
<input type="button" value=" 5 " onClick="Adddigit(5)">
</td>
<td align="center">
<input type="button" value=" 6 " onClick="Adddigit(6)">
</td>
<td align="center">
<input type="button" value=" * " onClick="Multiply(Calculator)">
</td>
<td align="center">
<input type="button" value=" % " onClick="Percent(Calculator)">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 1 " onClick="Adddigit(1)">
</td>
<td align="center">
<input type="button" value=" 2 " onClick="Adddigit(2)">
</td>
<td align="center">
<input type="button" value=" 3 " onClick="Adddigit(3)">
</td>
<td align="center">
<input type="button" value=" - " onClick="Subtract(Calculator)">
</td>
<td align="center">
<input type="button" value=" 1/x " onClick="Invert(Calculator)">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 0 " onClick="Adddigit(0)">
</td>
<td align="center">
<input type="button" value="+/-" onClick="ChngeSign(Calculator)">
</td>
<td align="center">
<input type="button" value=" . " onClick="Setdecpos()">
</td>
<td align="center">
<input type="button" value=" + " onClick="Add(Calculator)">
</td>
<td align="center">
<input type="button" value=" = " onClick="Equals(Calculator)">
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="On / Clear" onClick="Initialize(Calculator)">
</td>
<td colspan="2" align="center">
<input type="button" value="CE" onClick="ClearEntry(Calculator)">
</td>
</tr>
</table>
</form>
<p> </p>
তাহলে তৈরী হবে এরকম একটা ভাঙাচোরা ক্যালকুলেটর 
বাঃ, বেশ সুন্দর
অনেকের কাজে দেবে, কেউ কেউ শখ করেই ব্যবহার করতে পারবে।