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 “}”
* Untuk menyimpan & menampilkan output, Simpan di Notepad dengan format: Save As-->File Name terserah misal Latihan1 di kasih titik html-->Save As Type: Harus All files, Jadi seperti ini Latihan1.html
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
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
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 :
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">
function total(a,b)
{
return(a*b)
}
</script>
</head>
<body>
<script language="javascript">
sum=total(2,3)
document.write(sum)
</script>
</body>
</html>
Output :
6
Berikut ini contoh fungsi (function) dengan parameter pass by reference dengan pemanggilan langsung.
<! -- js_func2.html -->
<html>
<head>
<script language="javascript">
function totalx(a,b)
{
return (a * b)
}
</script>
</head>
<body>
<script language="javascript">
val1=window.prompt("Value 1 : ")
val2=window.prompt("Value 2 : ")
document.write(totalx(val1,val2))
</script>
</body>
</html>
4. Array (HTML & PHP)
<! -- js_array1.html -->
<html>
<body>
<script language="javascript">
var nama=new Array(3)
nama[0]="Yudi"
nama[1]="Amel"
nama[2]="Rani"
nama[3]="Heru"
for (i=0;i<=3;i++)
document.write(nama[i]+"<br>")
</script>
</body>
</html>
<! -- php_array1.php -->
<html>
<body>
<h2>Demo Array</h2>
<?php
$nama[0]="Yudi";
$nama[1]="Amel";
$nama[2]="Rani";
$nama[3]="Heru";
foreach($nama as $value) {
echo "$value ";
echo "<br>"; }
?>
</body>
</html>
<! -- js_array2.html -->
<html>
<body>
<script language="javascript">
var nama=new Array("Yudi","Amel","Rani","Heru")
x=nama.length
for (i=0;i<x;i++)
document.write(nama[i]+"<br>")
</script>
</body>
</html> <! -- php_array2.php -->
<html>
<body>
<h2>Demo Array</h2>
<?php
$nama=array("Yudi","Amel","Rani","Heru");
foreach($nama as $value) {
echo "$value<br>"; }
?>
</body>
</html>
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>
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 Keterangan
href Ke halaman website yang akan dituju
target Dibuka pada window baru atau tidak
style Penambahan css
class Nama class yang dipanggil
name 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
0 komentar:
Posting Komentar