Scribd
Upload
84 views11 pages

Modul Praktikum JS

The document contains examples of using JavaScript for various purposes like displaying alerts, changing pages, form validation, and basic calculations. It includes code snippets for using onload, onunload, onclick functions, prompts, conditional logic, and manipulating HTML elements. Functions are defined and called to handle events and perform calculations on input values for applications like a calculator and currency converter.

Uploaded by

Muhammad Abdul Karim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
84 views11 pages

Modul Praktikum JS

The document contains examples of using JavaScript for various purposes like displaying alerts, changing pages, form validation, and basic calculations. It includes code snippets for using onload, onunload, onclick functions, prompts, conditional logic, and manipulating HTML elements. Functions are defined and called to handle events and perform calculations on input values for applications like a calculator and currency converter.

Uploaded by

Muhammad Abdul Karim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Onload

<HTML>
<HEAD>
<TITLE>onload</TITLE>
<BODY onload="alert('welcome to my website')">
<H1>welcome to my website</H1>
</BODY>
</HTML>

Onunload
<html>
<head><title>Body onload example</title>
</head>
<body onunload="alert('Terima kasih atas kunjungannya, Selamat datang kembali ! ');">
Welcome to my page
</body>
</html>

Function + Alert with Cmd Button


<html>
<head>

</head>

<title>Belajar Java Script</title>


<script language="javascript">
function salam()
{
alert('Selamat Datang di Webku');
}
</script>

<body>
<form>

<input type="button" name="salamku" value="OK" onClick="salam()">

</form>
</body>
</html>

Function + Alert with Input Text

<BODY>
Workshop Javascript
[email protected]

Halaman 1 dari 11 lembar

<HEAD><TITLE>isi nama</TITLE>
<script type="text/javascript">
function salam()
{
var nama = document.getElementById("inputan");
if (nama.value=="")
alert("Isi nama dulu dong!!")
else
alert("Ahlan ya "+ nama.value)
}
</script>
</HEAD>
<form>
nama <input type="text" id="inputan"><input type="button"
OnClick="salam()" value="go">
</form>
</BODY>
</html>
Function + Link + Alert
<html>
<head>
<script type="text/javascript">
function link()
{
alert("selamat datang di webku")
}
</script>
</head>
<body>
<a href="jumlah.html" onclick="link()">
Menuju ke file jumlah</a>
</body>
</html>
Login

Workshop Javascript
[email protected]

Halaman 2 dari 11 lembar

<BODY>
<HEAD><TITLE>Login Masuk</TITLE>
<script type="text/javascript">
function salam()
{
var nama = document.getElementById("inputan");
var sandi = document.getElementById("pass");
if (nama.value =="nasrul" && sandi.value=="fawwaz")
{
window.location="http://www.nurulfikri.com/";
}

if (nama.value =="" && sandi.value=="")


{
alert("Isi nama & passwd dulu dong!!")
return
}
if (nama.value !="nasrul" && sandi.value!="fawwaz")
{
alert("Maaf !! User & Password anda salah")
return
}
}
function kosong()
{
var nama = document.getElementById("inputan");
var sandi = document.getElementById("pass");
nama.value=""
sandi.value=""
}
</script>
Workshop Javascript
[email protected]

Halaman 3 dari 11 lembar

</HEAD>
<Body>
<form>
<table cellpadding="10" align="center" bgcolor="Silver">
<tr>
<td colspan="2" bgcolor="Gray" align="center">Form Login</td>
</tr>
<tr>
<td>nama</td>
<td><input type="text" id="inputan"></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" id="pass"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" onclick="salam()" value="masuk">
<input type="button" onclick="kosong()" value="batal">
</td>
</tr>
</table>
</form>
</BODY>
</html>
link table
<html>
<head><title>link table</title></head>
<body>
<table border=1>
<tr>
<td width="80" onMouseOver="style.background='yellow'"
onMouseOut="style.background='cyan'">
<a class ="menuitem" href="http://www.google.com">google</a>
</td>
</tr>
<tr>
<td width="80" onMouseOver="style.background='yellow'"
onMouseOut="style.background='cyan'">
<a class ="menuitem" href="http://www.detik.com">detik</a>
</td>
</tr>
<tr>
<td width="80" onMouseOver="style.background='yellow'"
onMouseOut="style.background='cyan'">
<a class ="menuitem" href="http://www.yahoo.com">Yahoo</a>
</td>

Workshop Javascript
[email protected]

Halaman 4 dari 11 lembar

</tr>
</table>
</body>
</html>

Prompt

<script>
var web=prompt("mo buka web apa hari ini")
document.write(web)
if(web=="nf")
{
window.location="http://www.nurulfikri.com";
}
else if(web=="yahoo")
{
else

window.location="http://www.yahoo.com";

}
{

window.location="http://www.detik.com";

}
</script>

Workshop Javascript
[email protected]

Halaman 5 dari 11 lembar

Kalkulator with Prompt

<html>
<head>
<title>Membuat program kalkulator sederhana javascript dengan prompt</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
function penjumlahan()
{
var a1=prompt("Masukkan angka pertama",0);
var a2=prompt("angka "+a1+ " mau ditambahkan dengan angka berapa?",0);
c=eval(a1)+eval(a2);
document.write("Hasil dari "+a1+" + "+a2+" = "+c);
}
function pengurangan()
{
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dikurangi dengan angka berapa?",0);
c=eval(a1)-eval(a2)
document.write("Hasil dari "+a1+" - "+a2+" = "+c);
}
function perkalian() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dikalikan dengan angka berapa?",0);
c=eval(a1)*eval(a2)
document.write("Hasil dari "+a1+"x"+a2+"="+c);
Workshop Javascript
[email protected]

Halaman 6 dari 11 lembar

}
function pembagian() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dibagi dengan angka berapa?",0);
c=eval(a1)/eval(a2)
document.write("Hasil dari"+a1+"/"+a2+"="+c);
}
</SCRIPT>
<body onload="alert('Silahkan klik tombol untuk memulai perhitungan')">
<a href="" onMouseOver="alert('copyleft@nasrul09')"
onMouseOut="style.background='#CC66FF'">
<H1>Program kalkulator dengan Prompt</H1>
</a>
<br><br>
<input type="button" value="Penjumlahan" onClick="penjumlahan()">
<input type="button" value="Pengurangan" onClick="pengurangan()">
<input type="button" value="Perkalian" onClick="perkalian()">
<input type="button" value="Pembagian" onClick="pembagian()">
</body>
</html>

Kalkulator with Input Form

Workshop Javascript
[email protected]

Halaman 7 dari 11 lembar

<html>
<title>Membuat program kalkulator sederhana menggunakan inputan kalkulator </title>
<SCRIPT LANGUAGE="JavaScript">
function tambah()
{
a=eval(kalkulator.a.value)
b=eval(kalkulator.b.value)
c=a+b
kalkulator.hasil.value = c
}
function kurang()
{
a=eval(kalkulator.a.value)
b=eval(kalkulator.b.value)
c=a-b
kalkulator.hasil.value=c
}
function kali()
{
a=eval(kalkulator.a.value)
b=eval(kalkulator.b.value)
c=a*b
kalkulator.hasil.value=c
}
function bagi()
{
a=eval(kalkulator.a.value)
b=eval(kalkulator.b.value)
c=a/b
kalkulator.hasil.value = c
}
function pangkat()
{
a=eval(kalkulator.a.value)
b=eval(kalkulator.b.value)
c=Math.pow(a, b)
kalkulator.hasil.value = c
}
function kosong()
{
kalkulator.a.focus()
kalkulator.a.value=""

Workshop Javascript
[email protected]

Halaman 8 dari 11 lembar

kalkulator.b.value=""
kalkulator.hasil.value=""
}
</SCRIPT>
<body onload="kosong()">
<CENTER>
<font size="5">Program Kalkulator dengan isian kalkulator</font>
<hr size="5" color="red">
<form name="kalkulator">
<pre>
Angka 1 <input type="text" name="a">
Angka 2 <input type="text" name="b">
Hasil <input type="text" name="hasil" disabled="false">
</pre>
<hr size="2" color="blue">
<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" ^ " onClick="pangkat()">
<input type="button" value="Clear" onClick="kosong()"><br>
<br>copyleft@nasrul2009<br>
</form>
</CENTER>
</body>
</html>

Koversi Dollar
<html>

Workshop Javascript
[email protected]

Halaman 9 dari 11 lembar

<HEAD><TITLE>konversi kurs</TITLE>
<style>
fieldset
{
background-color:yellow;
}
</style>
<script language="javascript">
function hitungkurs()
{
var a=parseInt(hitung.input.value)
var b=parseInt(hitung.valas.value)
if (a.lenght<=0 || isNaN(a))
{
alert("isi data yang benar dong")
}
else
{
alert("anda pilih " + hitung.valas.value)
var total=a*b
hitung.hasil.value=total
}
}
</script>
</HEAD>
<BODY>
<div align="center"><h1>KONVERSI KURS</h1></div>
<hr color="red">
<form name="hitung">
<fieldset>
<legend>Konversi dari Valuta Asing ke Rp</legend>
<table border="1" cellpadding="5" width="80%" align="center">
<tbody>
<tr>
<td width="30%">Masukan</td>
<td width="30%">Valas</td>
<td width="30%">Nilai Rupiah</td>
</tr>
<tr>
<td><input type="text" width="30" name="input"></td>
<td>
<select name="valas" onchange="hitungkurs()">
<option value="20000">EUR
<option value="1000">SIN
<option value="2000">JPY
<option value="10000">USD
</select>
</td>
<td><input type="text" name="hasil" width="30" disabled></td>
</tr>
</tbody>
</table>
</fieldset>

Workshop Javascript
[email protected]

Halaman 10 dari 11 lembar

</form>
</BODY>
</html>

GANTI GAMBAR

<HTML>
<HEAD>
<TITLE>
</TITLE>
<script

Pilih Gambar

language="javascript">
function ganti()
{
alert("Ini gambar " + gambar.pilih.value)
document.images.hewan.src=gambar.pilih.options[gambar.pilih.selectedIndex].value
}
</script>
</HEAD>
<BODY>
<form name="gambar">
<select name="pilih" onchange="ganti()">
<option value="bear.jpg">Beruang
<option value="gorilla.jpg">Gorilla
<option value="bison.jpg">Bison
<option value="ape.jpg">Monyet
</select>
</form>
<IMG SRC="bear.jpg" WIDTH="300" BORDER="0" ALT="" name="hewan">
</BODY></HTML>

Workshop Javascript
[email protected]

Halaman 11 dari 11 lembar

You might also like