웹마스터 팁

간단하지만 응용하면 좀더 멋지고 이쁘게 만들수있을거 같네요.
그림 하나 안들간 폼으로 되어있습니다.
계산기는 처음 배울때 가장 응용하기 쉽다죠. (원작 juwany )

================================================================

완성작 보기 http://my.dreamwiz.com/dong0987/study19.htm  

================================================================

<HTML>
<HEAD>
<TITLE>자바스크립 계산기 소스</TITLE>



<SCRIPT language=javascript>

var novibroj = 0
var memorija = 0

function dodajBroj(operator, noviznak)
{
if (operator == 1) novibroj = 1

if (document.racunalo.display.value == null)
        novibroj = 0
else if (document.racunalo.display.value == "0")
        novibroj = 0

if (novibroj == 0)
        document.racunalo.display.value = noviznak
else
        document.racunalo.display.value += noviznak

novibroj = 1
}

function izracunaj(zarez, decimala, unos)
{with (Math)
  {
        novibroj = 0

        if (zarez >= 1) {broj = unos.value;}
        
        var rezultat = eval(broj);

if (document.racunalo.stupnjevi[1].checked)
        radijani = (rezultat / 180) * PI
else
        radijani = rezultat
        
        if (zarez == 2) rezultat = pow(rezultat, 2);
        else if (zarez == 3) rezultat = sqrt(rezultat);
        else if (zarez == 4) rezultat = -rezultat;
        else if (zarez == 5) rezultat = log(rezultat);
        else if (zarez == 6) rezultat = pow(E, rezultat);
        else if (zarez == 7) rezultat = 1/rezultat;
        else if (zarez == 8) rezultat = log(rezultat)/LN10;
        else if (zarez == 9) rezultat = pow(10, rezultat);
        else if (zarez == 10) memorija = rezultat;
        else if (zarez == 11) memorija += rezultat;
        else if (zarez == 12) memorija -= rezultat;
        else if (zarez == 14) rezultat = tan(radijani);
        else if (zarez == 15) rezultat = cos(radijani);
        else if (zarez == 16) rezultat = sin(radijani);
        else if (zarez == 17) rezultat = rezultat/100;
        else if (zarez == 18) rezultat = rezultat/1000000;
        else if (zarez == 20) rezultat = factorial(rezultat);
        else if (zarez == 21) {
                var eksponent=prompt("Unesite eksponent / Please enter exponent", 3);
                rezultat = pow(rezultat, eksponent);}
        else if (zarez == 22) {
                var eksponent=prompt("Unesite korijen / Please enter root", 3);
                rezultat = pow(rezultat, (1/eksponent));}

                if (decimala == -1)
                        unos.value = rezultat;
                else
                        unos.value = round(rezultat*pow(10, decimala))/pow(10, decimala);

        if (zarez >= 2) broj = rezultat;

        zarez = 1;
  }
}

function factorial(n)
{
  if ((n == 0) || (n == 1))
    return 1
  else {
    rezultat = (n * factorial(n-1) )
    return rezultat}
}

//Eni Generalic, Split, 14.10.1999.-->

</SCRIPT>

<style>
<!-- a:link    { color : #0000CC; text-decoration: none;}
     a:visited { color : #0000CC; text-decoration: none;}
     a:hover   { color : #FF0000; text-decoration: none;}
         h1,h2,h3  { font-family: Arial, Helvetica, Sans-Serif;}
         td,th            { font-family: Arial, Helvetica, Sans-Serif;}
         li,ul           { font-family: Arial, Helvetica, Sans-Serif;}
         dd,dt,dl  { font-family: Arial, Helvetica, Sans-Serif;}
         p                    { font-family: Arial, Helvetica, Sans-Serif;}
     BODY            { font-family: Arial, Helvetica, Sans-Serif;}
-->
</style>
</HEAD>

<BODY TEXT="#234567" BGCOLOR="#FFFFFF" LINK="#0000CC" VLINK="#0000CC" ALINK="#FF0000" onLoad="document.racunalo.display.focus();">

<A NAME="vrh"></A>

<CENTER>



<FORM NAME=racunalo>

<TABLE BORDER="2" CELLSPACING=0 CELLPADDING=1 ALIGN=CENTER bordercolor="#FF00CC" bordercolordark="white" bordercolorlight="#FF00CC" width="246">
<TR>
<TD width="238">

<TABLE BORDER="0" CELLSPACING="1" CELLPADDING=1>
<TR>
<TD COLSPAN=6 ALIGN=CENTER><FONT SIZE=4><INPUT TYPE="text" SIZE="16" NAME="display" VALUE="" STYLE="FONT-SIZE: 13pt; FONT-STYLE: normal; FONT-WEIGHT: bold; HEIGHT: 30px; WIDTH: 260px"></FONT></TD>
</TR>

<TR>
<TD COLSPAN=4 ALIGN=CENTER VALIGN=MIDDLE>
<font size="2"><SELECT NAME=izaZareza SIZE="1" ONCHANGE="if (document.racunalo.display.value != '') {izracunaj(0, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)}">
<OPTION VALUE=-1 SELECTED>decimal</OPTION>
<OPTION VALUE=0> 0 </OPTION>
<OPTION VALUE=1> 1 </OPTION>
<OPTION VALUE=2> 2 </OPTION>
<OPTION VALUE=3> 3 </OPTION>
<OPTION VALUE=4> 4 </OPTION>
<OPTION VALUE=5> 5 </OPTION>
<OPTION VALUE=6> 6 </OPTION>
<OPTION VALUE=7> 7 </OPTION>
<OPTION VALUE=8> 8 </OPTION>
<OPTION VALUE=9> 9 </OPTION>
<OPTION VALUE=10> 10 </OPTION>
<OPTION VALUE=11> 11 </OPTION>
<OPTION VALUE=12> 12 </OPTION>
<OPTION VALUE=13> 13 </OPTION>
<OPTION VALUE=14> 14 </OPTION>
<OPTION VALUE=15> 15 </OPTION>
</SELECT>
<INPUT TYPE="radio" NAME="stupnjevi" CHECKED>Rad
<INPUT TYPE="radio" NAME="stupnjevi">Deg
</font></TD>
<TD ALIGN=CENTER BGCOLOR="#EEEEEE"><A TITLE=" Eni Generalic " HREF="http://www.ktf-split.hr/~eni/" TARGET="myHome"><FONT FACE="Times" SIZE="2"><I><B>EniG.</B></I></FONT></A></TD>
<TD><INPUT HEIGHT="24" WIDTH="38" TYPE="button" NAME="C" VALUE="Cls" ONCLICK="this.form.display.value = ''" STYLE="BACKGROUND: #EEEEEE; FONT-SIZE: 10pt; HEIGHT: 24px; WIDTH: 38px"></TD>
</TR>

<TR colspan=6><TD></TD>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
</TR>

<TR>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="sqrt" VALUE="sqrt" ONCLICK="izracunaj(3, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="root" VALUE="root" ONCLICK="izracunaj(22, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="ln" VALUE="ln" ONCLICK="izracunaj(5, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="log" VALUE="log" ONCLICK="izracunaj(8, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="tan" VALUE="tan" ONCLICK="izracunaj(14, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="MC" VALUE="MC" ONCLICK="memorija=0" STYLE="BACKGROUND: #EEEEEE; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
</TR>

<TR>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="x^2" VALUE="x^2" ONCLICK="izracunaj(2, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="x^y" VALUE="x^y" ONCLICK="izracunaj(21, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="e^x" VALUE="e^x" ONCLICK="izracunaj(6, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="10^x" VALUE="10^x" ONCLICK="izracunaj(9, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="cos" VALUE="cos" ONCLICK="izracunaj(15, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="M" VALUE="M" ONCLICK="izracunaj(10, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
</TR>

<TR>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="-" VALUE="+/-" ONCLICK="izracunaj(4, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="1/x" VALUE="1/x" ONCLICK="izracunaj(7, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="x!" VALUE="x!" ONCLICK="izracunaj(20, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="PI" VALUE="PI" ONCLICK="dodajBroj(2, Math.PI)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="sin" VALUE="sin" ONCLICK="izracunaj(16, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="28" WIDTH="38" TYPE="button" NAME="M-" VALUE="M-" ONCLICK="izracunaj(12, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 28px; WIDTH: 38px"></TD>
</TR>

<TR colspan=6><TD></TD>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
</TR>

<TR>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="7" VALUE="7" ONCLICK="dodajBroj(0, 7)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="8" VALUE="8" ONCLICK="dodajBroj(0, 8)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="9" VALUE="9" ONCLICK="dodajBroj(0, 9)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="/" VALUE="/" ONCLICK="dodajBroj(1, '/')" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="ppm" VALUE="ppm" ONCLICK="izracunaj(18, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="M+" VALUE="M+" ONCLICK="izracunaj(11, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
</TR>

<TR>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="4" VALUE="4" ONCLICK="dodajBroj(0, 4)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="5" VALUE="5" ONCLICK="dodajBroj(0, 5)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="6" VALUE="6" ONCLICK="dodajBroj(0, 6)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="*" VALUE="*" ONCLICK="dodajBroj(1, '*')" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="%" VALUE="%" ONCLICK="izracunaj(17, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="MR" VALUE="MR" ONCLICK="dodajBroj(2, memorija)" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
</TR>

<TR>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="1" VALUE="1" ONCLICK="dodajBroj(0, 1)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="2" VALUE="2" ONCLICK="dodajBroj(0, 2)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="3" VALUE="3" ONCLICK="dodajBroj(0, 3)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="-" VALUE="-" ONCLICK="dodajBroj(1, '-')" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="(" VALUE="(" ONCLICK="dodajBroj(1, '(')" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME=")" VALUE=")" ONCLICK="dodajBroj(1, ')')" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
</TR>

<TR>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="0" VALUE="0" ONCLICK="dodajBroj(0, 0)" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="." VALUE="." ONCLICK="dodajBroj(1, '.')" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="exp" VALUE="exp" ONCLICK="dodajBroj(1, 'E')" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 10pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD><INPUT HEIGHT="32" WIDTH="38" TYPE="button" NAME="+" VALUE="+" ONCLICK="dodajBroj(1, '+')" STYLE="BACKGROUND: #DEDEDE; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 38px"></TD>
<TD COLSPAN=2 ALIGN=CENTER><INPUT HEIGHT="32" WIDTH="82" TYPE="button" NAME=enter ONCLICK="izracunaj(1, racunalo.izaZareza.options[racunalo.izaZareza.selectedIndex].value, document.racunalo.display)" type=button VALUE="=" STYLE="BACKGROUND: #CDCDCD; FONT-SIZE: 12pt; HEIGHT: 32px; WIDTH: 82px"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>



</BODY>
</HTML>
======================================================================