Halaman Kuliahku

Sabtu, 06 Maret 2010

Kalkulator sederhana dibuat menggumakan javascript

Pada 1901, penyelam di perairan pulau Antikythera, Greece menemui artifak berusia lebih 2,000 tahun dari sebuah runtuhan dasar laut. Artifak menyerupai jam itu dikaji penyelidik, Derek J De Solla Price dan didapati ia berfungsi sebagai ‘kalkulator’ yang menghitung pergerakan bintang dan planet.
hingga jaman modern saat ini,, jenis kalkulator begitu beragam, diantaranya ada kalkulator yang sengaja dibuat menggunakan javascript, dan berikut ini adalah script yang digunakan untuk membuat java kalkulator seperti tampilan diatas.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Tugas kalkulator sederhana </title>

<style type="text/css">

td{text-align:center}

.kiri{text-align:left}

textarea{text-align:right;

font-size:16}

input{width:50;height:35 ; color:red}

a{font-size:18}

pre{font-size:14 ;color:red}

</style>

<script language="javascript">

temp=new Array();

sementara="";

opr_s="";

hasil="";

function periksa(a){

switch(a){

case "Bksp" :

temp.pop();document.form1.layar.value=parseInt(temp.join(""));break;

case "CE" :

hapusIsiArray(temp.length);document.form1.layar.value=0;sementara=0;hasil=0;opr_s="";break;

case "Clr" :

hapusIsiArray(temp.length);document.form1.layar.value="";sementara=0;hasil=0;opr_s="";break;

case "1" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "2" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "3" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "4" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "5" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "6" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "7" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "8" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "9" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "0" :

temp.push(a);document.form1.layar.value=parseInt(temp.join(""));break;

case "," :

alert("program ini dibuat untuk \n melengkapi \n tugas ke tiga \n\n mata kuliah yang dibimbing oleh bapak didik");break;

case "=" :

operasi(a);break;

case "+" :

operasi(a);break;

case "-" :

operasi(a);break;

case "*" :

operasi(a);break;

case "/" :

operasi(a);break;

case "Mod" :

operasi(a);break;

}

}

function hitung(opr1,opr2,operator){

var a=parseInt(opr1);

var b=parseInt(opr2);

var oprt=operator;

switch(oprt){

case '+' :

return(a+b);

break;

case '-' :

return(a-b);

break;

case '*' :

return(a*b);

break;

case '/' :

return(a/b);

break;

case "Mod" :

return(a%b);

break;

case'=' :

return(hasil);

break;}

}

function operasi(operator){

var oprt2=operator;

if(sementara==0 && opr_s==""){

sementara=parseInt(document.form1.layar.value);

opr_s=oprt2;

hapusIsiArray(temp.length);

document.form1.layar.value=sementara;

}

else {

sementara=hitung(sementara,parseInt(document.form1.layar.value),opr_s);

hasil=sementara;

hapusIsiArray(temp.length);

opr_s=oprt2;

document.form1.layar.value=hasil;

}

}

function hapusIsiArray(b){

var a=0;

while(a<b){

temp.shift();

a++;

}

}

</script>

</head>

<body bgcolor=lightgreen>

<table border=1 cellpadding=1 cellspacing=1 bgcolor=lightgreen>

<caption>Kalkulator java script o/ Rizqi ka</caption>

<form name=form1 >

<tr>

<td colspan=4>

<textarea cols=22 rows=1 name="layar"></textarea>

</td>

</tr>

<tr>

<td><input type=button value="Bksp" onClick="periksa(this.value)"></input></td>

<td><input type=button value="CE" onClick="periksa(this.value)"></input></td>

<td><input type=button value="Clr" onClick="periksa(this.value)"></input></td>

<td><input type=button value="Mod" onClick="periksa(this.value)"></input></td>

</tr>

<tr>

<td><input type=button value="7" onClick="periksa(this.value)"></input></td>

<td><input type=button value="8" onClick="periksa(this.value)"></input></td>

<td><input type=button value="9" onClick="periksa(this.value)"></input></td>

<td><input type=button value="/" onClick="periksa(this.value)"></input></td>

</tr>

<tr>

<td><input type=button value="4" onClick="periksa(this.value)"></input></td>

<td><input type=button value="5" onClick="periksa(this.value)"></input></td>

<td><input type=button value="6" onClick="periksa(this.value)"></input></td>

<td><input type=button value="*" onClick="periksa(this.value)"></input></td>

</tr>

<tr>

<td><input type=button value="1" onClick="periksa(this.value)"></input></td>

<td><input type=button value="2" onClick="periksa(this.value)"></input></td>

<td><input type=button value="3" onClick="periksa(this.value)"></input></td>

<td><input type=button value="-" onClick="periksa(this.value)"></input></td>

</tr>

<tr>

<td><input type=button value="0" onClick="periksa(this.value)"></input></td>

<td><input type=button value="," onClick="periksa(this.value)"></input></td>

<td><input type=button value="=" onClick="periksa(this.value)"></input></td>

<td><input type=button value="+" onClick="periksa(this.value)"></input></td>

</tr>

</tr>

</form>

</table>

</td>

<td class=kiri valign=top><pre><h3>

Keterangan Program Kalkulator :

<ol>

<li>Program ini menggunakan javascript untuk melakukan operasi aritmatika</li>

<li>Pastikan web browser anda mendukung javascript</li>

<li>Tombol "CE" dan "clr" digunakan untuk merefresh data</li>

<li>Tombol "Bksp" digunakan untuk menghapus satu angka terakhir</li>

</ol>

</h3></pre></td>

</tr>

</table>

</body>

</html>

Selasa, 02 Maret 2010

desain web session 2

Kelanjutan dari lessons pembuatan desain web pada minggu lalu adalah membuat desain lain yang lebih kompleks dan lebih atraktif. Selain itu, perancangan desain web pada minggu lalu pembuatannya msih menggunakan table, dan desain web pada minggu ini sudah menginjak pada pembuatan menggunakan divisi-divisi dan tidak berbasis table lagi.

Tampilan berikut ini adalah tampilan kerangka web yang dirancang tidak menggunakan table lagi, melainkan telah menggunakan divisi-divisi yang telah disesuaikan penempatannya, selain tampilannya bias dibuat semenarik mungkin, perancangan menggunakan divisi juga lebih atraktif dan tidak monoton dalam modelnya. Dalam pembuatan desain pada minggu ini, dibutuhkan juga file ber contain “.css” sebagai file pendukung devisi-devisi itu sendiri. Jadi pembuatan web yag lebih menarik, sudah pasti dalam perjalanannya juga akan sedikit agak rumit.

Script berikut adalah list script dot html, yang digunakan untuk perancangan desain web

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Tugas lanjutan Layout sederhana </title>

<body>

Header

</div>

Sisi kiri

</div>

Gambar

</div>

Inti

</div>

Informasi

</div>

Footer

</div>

</body>

</html>

dan skrip berikut dibawah ini adalah script pendukung .css

#wrapper {

margin: auto;

width: 1000px;

padding:5px 2px 5px 2px;

border: 1px solid red;

}

#header {

height: 100px;

margin-bottom:5px;

border: 1px solid yellow;

}

#inner {

margin: auto;

border: 1px solid blue;

}

#sidebar {

float: left;

width: 200px;

height: 390px;

border: 1px solid pink;

}

#top {

float: right;

width: 750px;

height: 390px;

border: 1px solid magenta;

}

#content {

height: 100px;

border: 1px solid black;

}

#isi{

float: left;

width: 400px;

height:250px;

border: 1px solid green;

}

#info {

float: right;

width: 280px;

height: 170px;

border: 1px solid purple;

}

#footer {

clear: both;

height: 50px;

border: 1px solid cyan;

}

Berikutnya adalah pengaplikasian lebih lanjut dari uraian diatas,,,,

baik dari segi tampilan, isi, dot html, dan dit css yang digunakan pun sudah jauh lebih kompleks

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Tugas2 Desain Layout Sederhana</title>

<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="header">

<img src="logo.jpg" width="110" height="100" align="left" />

<div id="header1">Halaman muka | Biografi | Acara | Forum</div>

<div id="header2">

<h1>ALL About Paramore </h1>

</div>

<div id="header3">Cari

<input type="text" />

</div>

</div>

<div id="inner">

<div id="sidebar">

<div id="leftmenu">

<ul>

<li><a href="#"><strong>Halaman muka</strong></a></li>

<li><strong><a href="#">Biografi</a></strong></li>

<li><strong><a href="#">Acara</a></strong></li>

<li><strong><a href="#">Forum</a></strong></li>

<li><strong><a href="#">Contac person</a></strong></li>

</ul>

</div>

</div>

<div id="top">

<div id="content"><img src="logo1.jpg" width="800" height="102" /></div>

<div id="isi">

<h2>Paramore</h2>

<p>22 Feb 2010 [23:00]<br />

Paramore adalah band internasional yang berasal dari Franklin, Tennesse yang mengusung aliran "Pop Rock", terbentuk pada tahun 2004 yang digawangi oleh Hayley williams pada vocal dan keyboardist, Josh farro pada lead gitar, Jeremy davis pada bass, zac farro pada drum, dan Taylor york pada rhythm gitar. Album "Riot" yang keluar pada tahun 2007 berhasil membawa berbagai penghargaan, diantarannya piala platinum dari amerika dan gold platinum yang diakui di berbagai negara, diantaranya australia, kanada, new zealand dan inggris. Setalah vakum beberapa waktu, akhirnya Paramore kembali hadir dengan wajah baru "brand new eyes" adalah album yang diluncurkan pada tahun 2009 .</p>

<p>Baca Selengkapnya...</p>

</div>

<div id="info">

<p><strong>Artikel yang berkaitan

</strong>

<ul>

<li>Meet & greet with Hayley</li>

<li>Paramore live in senayan</li>

<li>The Final Riot</li>

</ul>

</div>

</div>

</div>

<div id="footer">

<p align="center">

© Paramore reviews 2010

</div>

</div>

</body>

</html>

berikut ini file extensi dot css nya.

#wrapper {

margin: auto;

width: 1000px;

background-color:LimeGreen;

padding: 5px 2px 5px 2px;

}

#header {

height: 105px;

background-color:MediumSlateBlue;

}

#header1 {

height: 20px;

text-align:right;

padding-right: 10px;

color:DarkOrange;

}

#header2 {

height: 35px;

color:SandyBrown;

}

#header3 {

height: 25px;

text-align:right;

color:DeepSkyBlue;

padding-right: 10px;

}

#inner {

margin:auto;

}

#sidebar {

float: left;

width: 200px;

height: 400px;

background-color:BurlyWood;

}

#top {

float: right;

width:800px;

height: 400px;

}

#content {

height: 100px;

}

#isi {

float: left;

width: 580px;

padding-left: 10px;

height: 300px;

background-color:LimeGreen;

}

#info {

float: right;

width: 200px;

height: 130px;

padding-left: 10px;

background-color:Tomato;

}

#footer {

clear: both;

height: 50px;

color:Yellow;

background-color:MediumSlateBlue;

}

#leftmenu ul {

width: 200px;

list-style-type:none;

padding:0; margin:0;

}

#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {

padding-left: 15px;

text-decoration: none;

}

#leftmenu a {

padding: 5px 0px 5px 15px; display: block;

background: Red no-repeat left center;

margin: 0px 0px 1px; color: Black;

}

#leftmenu a:hover {

background: Magenta no-repeat left center; color: GreenYellow;

}

Jumat, 19 Februari 2010

Langkah awal pembuatan design web menggunakan tabel

script berikut dibawah adalah script yang digunakan untuk menempilkan design web berbasiskan tabel seperti gambar yang tertera diatas.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>

<title>Tugas1/rizqi407532352875</title>

</head>

<body>

<table border=3 align="center" cellspacing=0 cellpadding=15>

<tr>



<th width="1000" colspan=3 bgcolor=magenta>atas</th>

</tr>



<tr>

<th width="150" height="500" bgcolor=cyan>tengah kiri</th>

<th width="700" height="500" bgcolor=darkorange>tengah</th>

<th width="150" height="500" bgcolor=greenyellow>tengah
kanan</th>

</tr>

<tr>



<th width="1000" colspan=3 bgcolor=forestgreen>bawah</th>

</tr>

</table>

</body>

</html>

Halaman Kuliahku

Sabtu, 06 Maret 2010

Kalkulator sederhana dibuat menggumakan javascript

Selasa, 02 Maret 2010

desain web session 2

Jumat, 19 Februari 2010

Langkah awal pembuatan design web menggunakan tabel

Label

Pengikut

Arsip Blog

Mengenai Saya