Senin, 04 Juni 2012

JAVA SCRIPT : Membuat Kalkulator 2


JAVA SCRIPT : Kalkulator 2

<html>
<head>
<title>anwari-kyu1</title>
<meta name="Programmer" content="Muhammad Anwari" />
<script language="javascript" type="text/javascript">
<!--
  var flag = false;
  function isi(num) {
    if (flag) calc.b.value += num;
    else calc.a.value += num;
  }
  function tambah()
  {
    calc.opr.value = ' + '
    flag = true;
    calc.b.focus()
  }
  function kurang()
  {
    calc.opr.value = ' - '
    flag = true;
    calc.b.focus()
  }
  function kosong()
  {
    calc.a.focus()
    calc.a.value=""
    calc.opr.value=""
    calc.b.value=""
    calc.c.value=""
    flag = false;
  }
//-->
</script>
<style type="text/css">
p {
  line-height:1.3em;
  color:#00CC00
}
</style>
</head>
<body bgcolor="#000000">
<body onload=kosong()>
<center>
<p style="padding:20px 0px 30px 0px"><font size="6">JavaScript Calculator</font></p>
<form name="calc">
  <table border="2" bordercolor="#CCFF33">
    <tr>
      <td>
      <input type="text" name="a" size="2" />
      <input type="text" name="opr" size="1" />
      <input type="text" name="b" size="2" /> =
      <input type="text" name="c" size="2" />
      <br/>
      </td>
    </tr>
    <tr>
      <td>
      <input type="button" name="one"   value="  1  " onClick="isi(1)" />
      <input type="button" name="two"   value="  2  " onClick="isi(2)" />
      <input type="button" name="three" value="  3  " onClick="isi(3)" />
      <input type="button" name="plus"  value="  +  " onClick="tambah()" />
      <br/>
      <input type="button" name="four"  value="  4  " onClick="isi(4)" />
      <input type="button" name="five"  value="  5  " onClick="isi(5)" />
      <input type="button" name="six"   value="  6  " onClick="isi(6)" />
      <input type="button" name="minus" value="  -  " onClick="kurang()" />
      <br/>
      <input type="button" name="seven" value="  7  " onClick="isi(7)" />
      <input type="button" name="eight" value="  8  " onClick="isi(8)" />
      <input type="button" name="nine"  value="  9  " onClick="isi(9)" />
      <br/>
      <input type="button" name="clear" value="  c  " onClick="kosong()" />
      <input type="button" name="zero"  value="  0  " onClick="isi(0)" />
      <input type="button" name="DoIt"  value="  =  " onClick="calc.c.value=eval(calc.a.value+calc.opr.value+calc.b.value)" />
      <br/>
      </td>
    </tr>
  </table>
</form>
<font face="pristina"size="7"color="#00FF00">
<p>Created by : <br/>Muhammad Anwari<br>STM Muhammadiyah Tasikmalaya</p><hr/></font>
<font face="rockwell"size="4"color="#00FF00">
<p>Kampung Situbeet Mangkubumi</p></font>
</center>
</body>
</html>

Save dengan nama kalkulator.html
Maka akan tampil gambar dibawah ini 


JAVA SCRIPT : Membuat Kalkulator 1

JAVA SCRIPT : Membuat Kalkulator

<html>
<head>
<script type='text/javascript'>
alert ("SELAMAT DATANG DI KALKULATOR SEDERHANA ^_^")
</script>
<script type='text/javascript'>
alert ("Anda Ganteng Sekali")
</script>
<title>anwari-kyu1</title>
<body background="anwari.jpg">
<b>
<center><font color="aqua"size="7">HASIL PERHITUNGAN DENGAN</font><font color="#0000FF"size="7"> JAVA SCRIPT</font></center><hr align="center"color="#FFFFFF"size="5"width="50%"><br>
<center><font color="white"size="6"face="comic sans ms">Muhammad Anwari</center></font><br>
<font color="white"size="3">
<script language="javascript">
var n1 = prompt ("Masukan Nilai 1","");
var n2 = prompt ("Masukan Nilai 2","");
alert ('anda telah memasukkan angka dengan benar');
document.write ("Nilai Pertama &nbsp;:&nbsp; "+n1+" "+"<br>");
document.write ("Nilai Kedua &nbsp;&nbsp;&nbsp;&nbsp;:&nbsp; "+n2+" "+"<br><br><br>");

c = eval(n1)+eval(n2)
document.write ("Penjumlahan &nbsp;&nbsp;&nbsp;= "+c+"<br>");

c = eval(n1)-eval(n2)
document.write ("Pengurangan &nbsp;&nbsp;= "+c+"<br>");

c = eval(n1)/eval(n2)
document.write ("Pembagian &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= "+c+"<br>");

c = eval(n1)*eval(n2)
document.write ("Perkalian &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= "+c+"<br>");

</script>
</head>
</body>
</html>

Simpan dengan nama kalkulator+prompt.html

CSS : Create Layout

CSS : Membuat Layout 

Nah pada materi CSS ini saya akan memberikan ilmu kepada anda tentang cara membuat Layout/tampilan agar tampilan WEB anda menjadi lebih keren, enak dipandang,ok daripada banyak basa basi langsung aja yuk praktek..!

1. Pertama buat file CSS nya terlebih dahulu, copas atau ketik ulang syntax css dibawah ini!
 
body {
margin:0;
padding:0;
background-color : #000000;
color : #FFFBF0;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}

a{text-decoration:none; color : #3A3A3A;}
a : hover  {color : #FF0000;text-decoration:none;}

#centerColumn {
margin-top:2em;
margin-left: 6em;
margin-right:6em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:6em;                  
margin-right:6em;
padding:1em .5em 2em .5em;
background-color : #000000;
text-align:left;
border:2px solid #00FF00;
}

html>body #centerColumn {
margin-left:6em;
margin-right:6em;
}

#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
}

#header {
margin:-1em -.5em 0 -.5em !important;
margin:-2em -1em 0 -1em;
padding:0 0 0 0;
height:5em;
background-color : #000000;
}

#header h1 {
margin:0 0 -.6em 0;
padding:.5em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
}

#header h2 {
margin:0 0 0 0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
}

#nav {
margin:0 0 1em 0;
padding:.4em 0 0 0;
background-color : #00FF00;
}

#nav ul {
margin:0;
padding:0;                                                         
list-style:none;
}

#nav li {
margin:0;
padding:.25em;
display:inline;
}

#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background : #00FF00;
border-top:2px solid #FFFF00;
}

Setelah diketik atau di copas syntax css diatas, simpan dengan nama style.css

2. setelah membuat file css, kita buat file htmlnya, silahkan anda ketik atau copas syntax dibawah ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>anwari</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="centerColumn">
  <div id="header">
    <h1>Welcome</h1>
    <h2>Anwari</h2>
  </div>
  <!--//end #headern//-->
  <div id="nav">
    <ul>
      <li><a href="rumah.html">Rumah</a></li>
      <li><a href="profil.html">Profil</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
  <!--//end #nav//-->
  <marquee><font size="6"color="red"face="chiller">Wilujeng Sumping</font></marquee>
<p><font color="#0000CC"size="3">
   Isi text</p>
Formulir
<ul>
 <li type="disc">Nama : Anwari</li>
 <li type="disc">Kelas : XI RPL 1</li>
 <li type="disc">Sekolah : STM Muhammadiyah</li>
</ul>
  <div id="footer"> <font size="4"><a target="_blank" href="anwari-kyu1.blogspot.com" title="anwari-kyu1">Muhammad Anwari</a></font></div>
  <!--//end #footer//-->
</div>
<!--//end #centerColumn//-->
</body>
</html>

Simpan dengan layout.html

Maka hasil tampilannya seperti dibawah ini