Web java script pada html

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>
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>
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>
var d = new Date()
theDay = d.getDay()
switch (theDay)
{
case 0:
document.write("Hari Minggu")
break

21

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>
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>
var x=0
do
{
document.write(x+"<br>")
x++
}
while (x <= 10)
</script>
</body>
</html>

Output Looping dengan for & do…while

22

c. Looping dengan while
<html>
<head>
</head>
<body>
var x=0
while (x<=10)
{
document.write(x+" &nbsp")
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

Procedure dengan parameter pass by value :
<! -- js_proc2.html -->
<html>
<head>
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>

24

Ket :
- Jika ingin tampil kesamping ubah perintah document.write(nama[i]+ "<br>")
menjadi document.write(nama[i]+"&nbsp") -> HTML
- Jika ingin tampil kesamping ubah perintah document.echo “$value<br>"; }
menjadi “$value&nbsp"; } -> PHP
5. Alert
<! -- js_alert.html -->
<html>
<head>
<title>Contoh Alert</title>
</head>
<body>
alert("Hello World")
</script>
</body>
</html>

6. Confirm

<html>
<head>
<title>Contoh Confirm</title>
</head>
<body>
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

<html>
<head>
<title>Contoh Prompt</title>
</head>
<body>
var name=prompt("Masukkan Nama Anda","")
if (name !=null && name !="")
document.write("Hello "+name)
</script>
</body>
</html>

26

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

Web java script pada html

Recomendados

Recomendados

Más contenido relacionado

Similar a Web java script pada html

Similar a Web java script pada html (20)

Más de SMK Muhammadiyah Kramat

Más de SMK Muhammadiyah Kramat (14)

Web java script pada html