1. Penggunaan JavaScript pada HTML
1. Seleksi
a. Perintah If
Untuk penggunaan perintah if pada HTML dengan bantuan JavaScript
mempunyai ketentuan sbb. :
• Setiap kondisi harus diawali dengan “(“ dan diakhiri dengan “)”
•
Tidak menggunakan kata ‘then’
•
Jika lebih dari 1 statement untuk setiap blok statement harus diawali dengan
“{“ dan diakhiri dengan “}”
Contoh :
<html>
<body>
<script language="Javascript">
var d =new Date()
var time = d.getHours()
if (time<10)
document.write("Good Morning")
</script>
</body>
</html>
b. Perintah If …Else
<html>
<body>
<script language="Javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{ document.write("Good Morning<br>")
document.write("Selamat Pagi") }
else { document.write("Good Day<br>")
document.write("Selamat Siang") }
</script>
</body>
</html>
c. Perintah Nested If (HTML & PHP)
<html>
<body>
<script language="Javascript">
var x=10
var y=10
if (x == y)
document.write("X sama dengan Y")
else if (x < y)
document.write("X lebih kecil dari Y")
else
document.write("Y lebih kecil dari X")
</script>
</body>
</html>
<html>
<body>
<?
$x=10;
$y=10;
if ($x == $y)
echo "X sama dengan Y";
elseif ($x < $y)
echo "X lebih kecil dari Y";
else
echo "Y lebih kecil dari X";
?>
</body>
</html>
d. Perintah Switch
<html>
<body>
<script language="Javascript">
var d = new Date()
theDay = d.getDay()
switch (theDay)
{
case 0:
document.write("Hari Minggu")
break
21
2. case 1:
document.write("Hari Senin")
break
case 2:
document.write("Hari Selasa")
break
case 3:
document.write("Hari Rabu")
break
case 4:
document.write("Hari Kamis")
break
case 5:
document.write("Hari Jumat")
break
case 6:
document.write("Hari Sabtu")
break
default:
document.write("Hari Libur")
}
</script>
</body>
</html>
2. Perintah Looping
a. Looping dengan for (HTML & PHP)
<html>
<head>
</head>
<body>
<script language="Javascript">
for (x=0;x<=10;x++)
document.write(x+"<br>")
</script>
</body>
</html>
<html>
<head>
</head>
<body>
<?
for ($x=0;$x<=10;$x++) {
echo "$x<br>"; }
?>
</body>
</html>
b. Looping dengan do..while
<html>
<head>
</head>
<body>
<script language="Javascript">
var x=0
do
{
document.write(x+"<br>")
x++
}
while (x <= 10)
</script>
</body>
</html>
Output Looping dengan for & do…while
22
3. c. Looping dengan while
<html>
<head>
</head>
<body>
<script language="Javascript">
var x=0
while (x<=10)
{
document.write(x+"  ")
x++
}
</script>
</body>
</html>
Output :
3. Subprogram
Subprogram pada Javascript tidak mengenal procedure, tetapi hanya function dimana
kasus procedure ditangani sebagai function tanpa nilai kembali (return value). Berikut
contoh procedure :
<! -- js_proc.html -->
<html>
<head>
<script language="javascript">
function myfunction()
{
alert("STMIK-YMI Tegal")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction()" value="Call Function">
</form>
</body>
</html>
Output :
23
4. Procedure dengan parameter pass by value :
<! -- js_proc2.html -->
<html>
<head>
<script language="javascript">
function myfunction(txt)
{
alert("Hai "+txt)
}
</script>
</head>
<body>
<form>
Nama <input type="text" name="vstring">
<input type="button" onclick="myfunction('Hello')" value="Call Function">
</form>
</body>
</html>
Procedure dengan parameter pass by reference :
Fungsi :
Berikut ini contoh fungsi (function) dengan parameter pass by value dengan pemanggilan
tak langsung atau melakukan assignment terhadap variable SUM terlebih dahulu.
<! -- js_func1.html -->
<html>
<head>
<script language="javascript">
24
6. Ket :
- Jika ingin tampil kesamping ubah perintah document.write(nama[i]+ "<br>")
menjadi document.write(nama[i]+" ") -> HTML
- Jika ingin tampil kesamping ubah perintah document.echo “$value<br>"; }
menjadi “$value "; } -> PHP
5. Alert
<! -- js_alert.html -->
<html>
<head>
<title>Contoh Alert</title>
</head>
<body>
<script language="javascript">
alert("Hello World")
</script>
</body>
</html>
6. Confirm
<!-- js_confirm.html -->
<html>
<head>
<title>Contoh Confirm</title>
</head>
<body>
<script language="Javascript">
var name=confirm("Press a button")
if (name==true)
document.write("You Pressed OK")
else
document.write("You Pressed Cancel")
</script>
</body>
</html>
7. Prompt
<!-- js_prompt.html -->
<html>
<head>
<title>Contoh Prompt</title>
</head>
<body>
<script language="Javascript">
var name=prompt("Masukkan Nama Anda","")
if (name !=null && name !="")
document.write("Hello "+name)
</script>
</body>
</html>
26
7. DAFTAR TABEL Fungsi Tag pada HTML
Tag-Tag Umum pada HTML
Tag
Keterangan
<html>….</html>
Tag untuk mengapit halaman HTML
<head>….</head>
Tag berisi informasi umum dari halaman
<title>….</title>
Judul halaman (terdapat pada <head>)
<body>….</body>
Setting atribut untuk seluruh isi halaman
<b>…..</b>
Untuk menebalkan teks
<i>…..</i>
Untuk memiringkan teks
<u>…..</u>
Untuk menggaris-bawahi teks
<p>….</p>
Untuk membuat paragraph
<font>….</font>
Untuk memanipulasi huruf
<br>….
Untuk pindah ke baris baru
<hr>….
Untuk membuat garis horizontal
<a>….</a>
Untuk membuat links
<table>….</table>
Untuk membuat tabel
Daftar atribut dari tag font
Tag
Keterangan
Name
Untuk menentukan jenis huruf yang digunakan
Size
Untuk menentukan ukuran huruf
Color
Untuk menentukan warna huruf
Daftar atribut dari tag a
Tag
href
target
style
class
name
Keterangan
Ke halaman website yang akan dituju
Dibuka pada window baru atau tidak
Penambahan css
Nama class yang dipanggil
Nama dari link
Daftar atribut dari tag table
Tag
Keterangan
width
Untuk mengatur lebar table (% atau pixel)
height
Untuk mengatur tinggi table
border
Untuk menentukan tebal bingkai
cellpadding
Menentukan jarak padding antar cell
cellspacing
Menentukan jarak spacing antar cell
name
Untuk menentukan nama table
bgcolor
Untuk menentukan warna background
background
Untuk menampilkan gambar sebagai background
align
Letak teks secara horizontal (rata kiri,tengah atau kanan)
valign
Letak teks secara vertikal (rata atas,tengah atau bawah)
style
Untuk css
bordercolor
Untuk mengatur warna bingkai
Daftar atribut tag tr,th dan td
Tag
Keterangan
height
Untuk mengatur tinggi table
bgcolor
Untuk mengatur warna background
background
Untuk menampilkan gambar sebagai background
align
Untuk mengatur letak teks secara horizontal
valign
Untuk mengatur letak teks secara vertikal
colspan
Untuk menghilangkan sejumlah kolom
rowspan
Untuk menghilangkan sejumlah baris
27