Teknik Pemrograman Lanjut
Modul ini mengenalkan suatu teknik pemrograman yang lebih tinggi. Dalam bagian ini
Anda akan mempelajari rekursif dan tipe data abstrak.
Setelah menyelesaikan pelajaran ini, diharapkan Anda dapat:
1. Memahami dan menggunakan rekursif
2. Mengetahui perbedaan antara stacks dan queues
2. Mengimplementasikan suatu implementasi sequensial dari stacks dan queues
3. Mengimplementasikan suatu implementasi linked dari stacks and queues
4. Menggunakan Collection classes yang ada
3.2 Rekursif
3.2.1 Apa yang dimaksud dengan Rekursif?
Rekursif adalah teknik pemecahan masalah yang powerful dan dapat digunakan ketika
inti dari masalah terjadi berulang kali. Tentu saja, tipe dari masalah ini dapat dipecahkan
mengunakan perkataan berulang-ulang (i.e., menggunakan konstruksi looping seperti
for, while dan do-while).
Sesungguhnya, iterasi atau perkataan berulang-ulang merupakan peralatan yang lebih
efisien jika dibandingkan dengan recursif tetapi recursion menyediakan solusi yang lebih
baik untuk suatu masalah. Pada rekursif, method dapat memanggil dirinya sendiri. Data
yang berada dalam method tersebut seperti argument disimpan sementara kedalam
stack sampai method pemanggilnya diselesaikan.
3.2.2 Rekursif Vs. Iterasi
Untuk pengertian yang lebih baik dari rekursif, mari kita lihat pada bagaimana macam-
macam dari teknik iterasi. Dalam teknik-teknik tersebut dapat juga kita lihat
penyelesaian sebuah loop yang lebih baik menggunakan rekursif dari pada iterasi.
Menyelesaikan masalah dengan perulangan menggunakan iterasi secara tegas juga
digunakan pada struktur kontrol pengulangan. Sementara itu, untuk rekursif, task
diulangi dengan memanggil sebuah method pengulangan. Maksud dari hal tersebut
adalah untuk menggambarkan sebuah masalah kedalam lingkup yang lebih kecil dari
pengulangan itu sendiri. Pertimbangan suatu perhitungan yang faktorial dalam
penentuan bilangan bulat. Definisi rekursif dari hal tersebut dapat diuraikan sebagai
berikut: factorial(n) = factorial(n-1) * n; factorial(1) = 1. Sebagai contohnya, nilai
faktorial dari 2 sama dengan fatorial (1)*2, dimana hasilnya adalah 2. Faktorial dari 3
adalah 6, dimana sama dengan faktorial dari (2)*3.
Pengenalan Pemrograman 2 1
Gambar 1: Contoh Factorial
Dengan iterasi, proses diakhiri ketika kondisi loop gagal atau salah. Dalam kasus dari
penggunaan rekursif, proses yang berakhir dengan kondisi tertentu disebut
permasalahan dasar yang telah tercukupi oleh suatu pembatasan kondisi. Permasalahan
yang mendasar merupakan kejadian yang paling kecil dari sebuah masalah. Sebagai
contohnya, dapat dilihat pada kondisi rekursif pada faktorial, kasus yang mudah adalah
ketika inputnya adalah 1. 1 dalam kasus ini merupakan inti dari masalah.
Penggunaan dari iterasi dan rekursif dapat bersama-sama memandu loops jika hal ini
tidak digunakan dengan benar.
Keuntungan iterasi dibandingkan recursion adalah performance yang lebih baik. Hal
tersebut lebih cepat untuk recursion sejak terbentuknya sebuah parameter pada sebuah
method yang disebabkan oleh suatu CPU time. Bagaimanapun juga, rekursif mendorong
practice software engineering yang lebih baik, sebab teknik ini biasanya dihasilkan pada
kode yang singkat yang lebih mudah untuk dimengerti dan juga mempromosikan
reuseability pada suatu solusi yang telah diterapkan.
Memilih antara iterasi dan rekursif merupakan masalah dari menjaga keseimbangan
antara baiknya sebuah performance dan baiknya software engineering.
3.2.3 Factorials: Contoh
Listing program berikut ini menunjukkan bagaimana menghitung faktorial menggunakan
teknik iterasi.
class FactorialIter {
static int factorial(int n) {
int result = 1;
for (int i = n; i > 1; i--) {
result *= i;
}
Pengenalan Pemrograman 2 2
return result;
}
public static void main(String args[]) {
int n = Integer.parseInt(args[0]);
System.out.println(factorial(n));
}
}
Dibawah ini merupakan listing program yang sama tetapi menggunakan rekursif.
class FactorialRecur {
static int factorial(int n) {
if (n == 1) { /* The base case */
return 1;
}
/* Recursive definition; Self-invocation */
return factorial(n-1)*n;
}
public static void main(String args[]) {
int n = Integer.parseInt(args[0]);
System.out.println(factorial(n));
}
}
3.2.4 Print n in any Base: Contoh yang lain
Sekarang, pertimbangan dari masalah dalam pencetakkan suatu angka desimal yang
nilai basenya telah ditetapkan oleh pengguna. Ingat bahwa solusi dalam hal ini untuk
menggunakan repetitive division dan untuk menulis sisa perhitungannya. Proses akan
berakhir ketika sisa hasil pembagian kurang dari base yang ditetapkan. Dapat
diasumsikan jika nilai input desimal adalah 10 dan kita akan mengkonversinya menjadi
base 8. Inilah solusinya dengan perhitungan menggunakan pensil dan kertas.
Dari solusi diatas, 10 adalah sama dengan 12 base 8.
Contoh berikutnya. Nilai input desimalnya adalah 165 dan akan dikonversi ke base 16.
Pengenalan Pemrograman 2 3
165 adalah sama dengan A5 base 16. Catatan: A=10.
Berikut ini merupakan solusi iterative untuk masalah diatas.
class DecToOthers {
public static void main(String args[]) {
int num = Integer.parseInt(args[0]);
int base = Integer.parseInt(args[1]);
printBase(num, base);
}
static void printBase(int num, int base) {
int rem = 1;
String digits = "0123456789abcdef";
String result = "";
/* the iterative step */
while (num!=0) {
rem = num%base;
num = num/base;
result = result.concat(digits.charAt(rem)+"");
}
/* printing the reverse of the result */
for(int i = result.length()-1; i >= 0; i--) {
System.out.print(result.charAt(i));
}
}
}
Berikut ini merupakan recursion untuk masalah yang sama dengan solusi sebelumnya.
class DecToOthersRecur {
static void printBase(int num, int base) {
String digits = "0123456789abcdef";
/* Recursive step*/
if (num >= base) {
printBase(num/base, base);
}
/* Base case: num < base */
System.out.print(digits.charAt(num%base));
}
public static void main(String args[]) {
int num = Integer.parseInt(args[0]);
int base = Integer.parseInt(args[1]);
printBase(num, base);
}
}
Pengenalan Pemrograman 2 4
3.3 Abstract Data Type
3.3.1 Apa yang Dimaksud dengan Abstract Data Type?
Abstract Data Type (ADT) adalah kumpulan dari elemen-elemen data yang disajikan
dengan satu set operasi yang digambarkan pada elemen-elemen data tersebut. Stacks,
queues dan binary trees adalah tiga contoh dari ADT. Dalam bab ini, Anda akan
mempelajari tentang stacks dan queues.
3.3.2 Stacks
Stack adalah satu set atau urutan elemen data dimana manipulasi data dari elemen-
elemen hanya diperbolehkan pada tumpukan teratas dari stack. Hal ini merupakan
perintah pengumpulan data secara linier yang disebut “last in, first out” (LIFO). Stacks
berguna untuk bermacam-macam aplikasi seperti pattern recognition dan
pengkonversian antar notasi infix, postfix dan prefix .
Dua operasi yang dihubungkan dengan stacks adalah operasi push dan pop. Push berarti
memasukkan data kedalam stacks yang paling atas dimana pop sebagai
penunjuk/pointer untuk memindahkan elemen ke atas stacks. Untuk memahami
bagaimana cara kerja stacks, pikirkan bagaimana Anda dapat menambah atau
memindakan sebuah data dari tumpukan data. Pikiran Anda akan memberitahu Anda
untuk menambah atau memindahkan data hanya pada stack yang paling atas karena
jika menggunakan cara lain, dapat menyebabkan tumpukan stack akan terjatuh.
Dibawah ini merupakan ilustrasi bagaimana tampilan dari stacks.
n-1
...
6
5 Jayz top
4 KC
3 Jojo
2 Toto
1 Kyla
0 DMX bottom
Tabel 1.2.2: Ilustrasi Stack
Stack akan berarti penuh jika jangkauan cell teratas disimbolkan dengan n-1. Jika nilai
teratas / top sama dengan -1, stack berarti kosong.
Pengenalan Pemrograman 2 5
3.3.3 Queues
Queues adalah contoh lain dari ADT. Hal ini merupakan perintah pengumpulan data yang
disebut “first-in, first-out”. Aplikasi ini meliputi jadwal pekerjaan dalam operating
system, topological sorting dan graph traversal.
Enqueue dan dequeue merupakan operasi yang dihubungkan dengan queues. Enqueu
menunjuk pada memasukkan data pada akhir queue dimana dequeue berarti
memindahkan elemen dari queue tersebut. Untuk mengingat bagaimana queue bekerja,
ingatlah arti khusus dari queue yaitu baris. Berikut ini bagaimana cara kerja queue.
Siapa yang akan mendapatkan kesempatan pertama untuk bertemu bintang idolanya
dari mereka yang sedang menunggu dalam sebuah barisan? Seharusnya orang pertama
yang berada pada barisan tersebut. Orang ini mendapat kesempatan pertama untuk
meninggalkan barisan. Hubungkan hal tersebut dengan bagaimana queue bekerja.
Berikut ini merupakan ilustrasi dari bagaimana tampilan dari queue.
0 1 2 3 4 5 6 7 8 9 ... n-1
Eve Jayz KC Jojo Toto Kyla DMX
fron
t
end Insert
Delete
Tabel 1.2.3: Ilustrasi Queue
Queue akan kosong jika nilai end kurang dari front. Sementara itu, akan penuh jika end
sama dengan n-1.
3.3.4 Sequential and Linked Representation
ADTs biasanya dapat diwakilkan menggunakan sequential dan linked representation. Hal
ini memudahkan untuk membuat sequential representation dengan menggunakan array.
Bagaimanapun juga, masalah dengan menggunakan array adalah pembatasan size,
yang membuatnya tidak fleksibel. Dengan menggunakan array, sering terjadi
kekurangan atau kelebihan space memory. Mempertimbangkan hal tersebut, Anda harus
membuat sebuah array dan mendeklarasikannya agar mampu menyimpan 50 elemen.
Jika user hanya memasukkan 5 elemen, maka 45 space pada memory akan sia-sia.
Disisi lain, jika user ingin memasukkan 51 elemen, space yang telah disediakan didalam
array tidak akan cukup.
Dibandingkan dengan sequential representation, linked representation lebih sedikit rumit
tetapi lebih fleksibel. Linked representation menyesuaikan memory yang dibutuhkan oleh
user. Penjelasan lebih lanjut pada linked representation akan didiskusikan pada bab
berikutnya.
3.3.5 Sequential Representation dari Integer Stack
class SeqStack {
int top = -1; /* initially, the stack is empty */
int memSpace[]; /* storage for integers */
int limit; /* size of memSpace */
Pengenalan Pemrograman 2 6
SeqStack() {
memSpace = new int[10];
limit = 10;
}
SeqStack(int size) {
memSpace = new int[size];
limit = size;
}
boolean push(int value) {
top++;
/* check if the stack is full */
if (top < limit) {
memSpace[top] = value;
} else {
top--;
return false;
}
return true;
}
int pop() {
int temp = -1;
/* check if the stack is empty */
if (top >= 0) {
temp = memSpace[top];
top--;
} else {
return -1;
}
return temp;
}
public static void main(String args[]) {
SeqStack myStack = new SeqStack(3);
myStack.push(1);
myStack.push(2);
myStack.push(3);
myStack.push(4);
System.out.println(myStack.pop());
System.out.println(myStack.pop());
System.out.println(myStack.pop());
System.out.println(myStack.pop());
}
}
3.3.6 Linked Lists
Sebelum mengimplementasikan linked representation dari stacks, pertama mari kita
pelejari bagaimana membuat linked representation. Dalam hal ini, kita akan
menggunakan linked lists.
Linked list merupakan struktur dinamis yang berlawanan dengan array, yang merupakan
struktur statis. Hal ini berarti linked list dapat tumbuh dan berkurang dalam size yang
bergantung pada kebutuhan user. Linked list digambarkan sebagai kumpulan dari nodes,
Yang masing-masing berisi data dan link atau pointer ke node berikutnya didalam list.
Gambar dibawah ini menunjukkan tampilan dari node.
Pengenalan Pemrograman 2 7
Gambar 2.6a: Sebuah node
Berikut ini merupakan contoh dari non-empty linked list dengan 3 node.
Gambar 3.6b: Non-empty linked list dengan tiga node
Berikut ini bagaimana class node diimplementasikan. Class ini dapat digunakan untuk
membuat linked list.
class Node {
int data; /* integer data contained in the node */
Node nextNode; /* the next node in the list */
}
class TestNode {
public static void main(String args[]) {
Node emptyList = null; /* create an empty list */
/* head points to 1st node in the list */
Node head = new Node();
/* initialize 1st node in the list */
head.data = 5;
head.nextNode = new Node();
head.nextNode.data = 10;
/* null marks the end of the list */
head.nextNode.nextNode = null;
/* print elements of the list */
Node currNode = head;
while (currNode != null) {
System.out.println(currNode.data);
currNode = currNode.nextNode;
}
}
}
Pengenalan Pemrograman 2 8
3.3.7 Linked Representation dari Integer Stack
Sekarang Anda telah mempelajari tentang linked list. Maka Anda telah siap untuk
menerapkan apa yang telah Anda pelajari untuk implementasi linked representation dari
stack.
class DynamicIntStack{
private IntStackNode top; /* head or top of the stack */
class IntStackNode { /* node class */
int data;
IntStackNode next;
IntStackNode(int n) {
data = n;
next = null;
}
}
void push(int n){
/* no need to check for overflow */
IntStackNode node = new IntStackNode(n);
node.next = top;
top = node;
}
int pop() {
if (isEmpty()) {
return -1;
/* may throw a user-defined exception */
} else {
int n = top.data;
top = top.next;
return n;
}
}
boolean isEmpty(){
return top == null;
}
public static void main(String args[]) {
DynamicIntStack myStack = new DynamicIntStack();
myStack.push(5);
myStack.push(10);
/* print elements of the stack */
IntStackNode currNode = myStack.top;
while (currNode!=null) {
System.out.println(currNode.data);
currNode = currNode.next;
}
System.out.println(myStack.pop());
System.out.println(myStack.pop());
}
}
Pengenalan Pemrograman 2 9
Gambar 1.2.7: Implementasi linked dari stack
3.3.8 Java Collections
Saat ini Anda telah diperkenalkan kepada dasar abstract data types. Pada intinya, Anda
telah mempelajari tentang dasar dari linked lists, stacks dan queue. Berita baik bahwa
abstract data types telah siap untuk diimplementasikan dan dimasukkan dalam Java.
Class Stack dan LinkedList diperbolehkan digunakan tanpa pengertian yang lengkap dari
konsep ini. Bagaimanapun juga, sebagai ilmuwan komputer, sangat penting untuk
mengerti konsep dari abstract data types. Oleh karena itu, penjelasan terperinci masih
disampaikan dalam bagian yang terdahulu. Dengan peluncuran dari J2SE5.0, queue
interface telah tersedia. Untuk detail pada class dan interface ini, dapat dilihat pada
dokumentasi Java API.
Kepada kita, Java telah menyajikan Collection classes dan interfaces yang lain, yang
semuanya dapat ditemukan di java.util package. Contoh dari Collection classes termasuk
LinkedList, ArrayList, HashSet dan TreeSet. Class tersebut benar-benar implementasi
dari collection interfaces yang berbeda. Induk hirarki dari collection interfaces adalah
collection interfaces itu sendiri. Sebuah collection hanya sebuah grup dari object yang
diketahui sebagai elemennya sendiri. Collection memperbolehkan penggandaan/salinan
dan tidak membutuhkan pemesanan elemen secara spesifik.
SDK tidak menyediakan implementasi built-in yang lain dari interface ini tetapi
mengarahkan subinterfaces, Set interfaces dan List interfaces diperbolehkan. Sekarang,
apa perbedaan dari kedua interface tersebut. Set merupakan collection yang tidak
dipesan dan tidak ada penggandaan didalamnya. Sementara itu, list merupakan
collection yang dipesan dari elemen-elemen dimana juga diperbolehkannya
penggandaan. HashSet, LinkedHashSet dan TreeSet suatu implementasi class dari Set
interfaces. ArrayList, LinkedList dan Vector suatu implementasi class dari List interfaces.
<root interface>
Collection
<interface>
Set
<interface>
List
<implementing classes> <implementing classes>
HashSet LinkedHashSet TreeSet ArrayList LinkedList Vector
Tabel 1.2.8a: Java collections
Berikut ini adalah daftar dari beberapa Collections methods yang disediakan dalam
Collection API dari Java 2 Platform SE v1.4.1. Pada Java 2 Platform SE v.1.5.0, methods
ini telah dimodifikasi untuk menampung generic types. Sejak generic types masih belum
selesai dibahas, sebaiknya mempertimbangkan method ini terlebih dahulu. Disarankan
bahwa Anda mengacu pada Collection methods yang terbaru dimana Anda lebih mudah
Pengenalan Pemrograman 2 10
mengerti generic types, yang akan didiskusikan pada chapter berikutnya.
Collection Methods
public boolean add(Object o)
Memasukkan Object o kedalam collection ini. Mengembalikan nilai true jika o telah
sukse ditambahkan kedalam collection.
public void clear()
Menghapus semua element dari collection ini.
public boolean remove(Object o)
Menghapus single instance dari Object o pada collection ini, jika hal tersebut telah
diinputkan. Mengembalikan nilai true jika o telah ditemukan dan dihapus dari
collection.
public boolean contains(Object o)
Mengembalikan nilai true jika collection ini berisi Object o.
public boolean isEmpty()
Mengembalikan nilai true jika collection ini tidak berisi object atau element apapun.
public int size()
Mengembalikan nomor dari elements pada collection ini.
public Iterator iterator()
Mengembalikan sebuah iterator yang menunjukkan kita pada isi collection ini.
public boolean equals(Object o)
Mengembalikan nilai jika Object o sama dengan yang ada pada collection.
public int hashCode()
Mengembalikan nilai hash code (i.e., the ID) untuk collection ini. Objects atau
collections yang sama memiliki nilai hash code atau ID yang sama.
Tabel 1.2.8b: Methods dari class Collection
Anda diharapkan mengacu pada dokumentasi API untuk mengetahui daftar lengkap dari
methods dalam Collection, List dan Set interface.
Saat ini kita akan melihat beberapa collection classes. Harap mengacu pada API untuk
daftar dari methods yang dimasukkan kedalam class ini.
Pada bagian sebelumnya, Anda telah melihat bagaimana mengimplementasikan linked
list dengan cara Anda sendiri. Java SDK juga telah menyediakan built-implementation
dari linked list untuk kita. LinkedList class berisi methods yang memperbolehkan linked
list digunakan seperti stacks, queue atau ADT yang lain. Listing program berikut ini
menunjukan bagaimana menggunakan class LinkedList.
Pengenalan Pemrograman 2 11
import java.util.*;
class LinkedListDemo {
public static void main(String args[]) {
LinkedList list = new LinkedList();
list.add(new Integer(1));
list.add(new Integer(2));
list.add(new Integer(3));
list.add(new Integer(1));
System.out.println(list + ", size = " + list.size());
list.addFirst(new Integer(0));
list.addLast(new Integer(4));
System.out.println(list);
System.out.println(list.getFirst() + ", " +
list.getLast());
System.out.println(list.get(2) + ", " + list.get(3));
list.removeFirst();
list.removeLast();
System.out.println(list);
list.remove(new Integer(1));
System.out.println(list);
list.remove(3);
System.out.println(list);
list.set(2, "one");
System.out.println(list);
}
}
ArrayList merupakan versi fleksibel dari array biasa. Yang mengimplementasikan List
interface. Telitilah kode berikut ini.
import java.util.*;
class ArrayListDemo {
public static void main(String args[]) {
ArrayList al = new ArrayList(2);
System.out.println(al + ", size = " + al.size());
al.add("R");
al.add("U");
al.add("O");
System.out.println(al + ", size = " + al.size());
al.remove("U");
System.out.println(al + ", size = " + al.size());
ListIterator li = al.listIterator();
while (li.hasNext())
System.out.println(li.next());
Object a[] = al.toArray();
for (int i=0; i<a.length; i++)
System.out.println(a[i]);
}
}
Pengenalan Pemrograman 2 12
HashSet merupakan sebuah implementasi dari Set interface yang berguna pada hash
table. Penggunaan suatu hash table lebih mudah dan cepat untuk melihat lebih detail
elemen-elemen yang ada. Table menggunakan suatu rumusan untuk menentukan
dimana suatu objek disimpan. Teliti program ini, yang menggunakan class HashSet.
import java.util.*;
class HashSetDemo {
public static void main(String args[]) {
HashSet hs = new HashSet(5, 0.5f);
System.out.println(hs.add("one"));
System.out.println(hs.add("two"));
System.out.println(hs.add("one"));
System.out.println(hs.add("three"));
System.out.println(hs.add("four"));
System.out.println(hs.add("five"));
System.out.println(hs);
}
}
TreeSet merupakan sebuah implementasi dari Set interface yang menggunakan tree.
Class ini memastikan bahwa yang disortir akan diurutkan secara ascending.
Pertimbangkan, bagaimana class TreeSet telah digunakan dalam listing program berikut
ini.
import java.util.*;
class TreeSetDemo {
public static void main(String args[]) {
TreeSet ts = new TreeSet();
ts.add("one");
ts.add("two");
ts.add("three");
ts.add("four");
System.out.println(ts);
}
}
Gambar 1.2.8: Contoh TreeSet
Pengenalan Pemrograman 2 13
3.4 Latihan
3.4.1 Faktor Persekutuan Terbesar
Faktor persekutuan terbesar (FPB) dari dua angka adalah angka yang terbesar selalu
dibagi oleh angka yang satunya, kemudian modulus atau sisa pembagian membagi
angka kedua dan seterusnya hingga sisa pembagian dari kedua angka tersebut sama
dengan nol. Menggunakan Euclid's method, buatlah dua kode untuk penghitungan dua
angka. Gunakan iterasi untuk kode program yang pertama dan rekursif untuk kode
program berikutnya.
Catatan pada algoritma Euclid :
1. Sebagai masukkan integers x dan y.
2. Ulangi step dibawah ini while y != 0
a. y = x % y;
b. x = Nilai lama y;
3. Return x.
Contoh, x = 14 dan y = 6.
y = x % y = 14 % 6 = 2
x = 6
y = x % y = 6 % 2 = 0
x = 2 (FPB)
3.4.2 Sequential Representation dari Integer Queue
Dengan menggunakan array, implementasikan sebuah integer queue seperti contoh
pada sequential stack.
3.4.3 Linked Representation dari Integer Queue
Dengan menggunakan ide dari linked list, implementasikan sebuah integer queue
dinamis seperti integer stack dinamis yang diperkenalkan seperti contoh berikut.
3.4.4 Address Book
Dengan menggunakan Java collection, buatlah sebuah program yang memperbolehkan
user untuk insert, delete dan view address. Setiap address berisi nama , alamat dan
nomor telepon dari orang yang mengisinya. Pengisian data dimasukkan dengan cara
queue tetapi penghapusan dilakukan dengan cara stack.
Dalam contoh ini, kita akan menggunakan text editor untuk mengedit program Java.
Juga membuka terminal window untuk meng-compile dan meng-execute program Java
anda.
A. Apa Itu Javascript
Javascript yaitu bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side
programming. Client di sini yaitu browser, seperti: Internet Explorer, Firefox, Safari dan
sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML.
Di mana saya bisa menulis kode javascript? Anda bisa menulis kode javascript di teks editor
seperti notepad dan sebagainya.
Apakah saya butuh compiler untuk menjalankan javascript? Tidak perlu, anda cukup
menjalankan javascript menggunakan browser. Semua browser mempunyai engine yang
menginterpretasikan kode javascript kita.
B. Memulai Javascript
Oke sekarang mari kita coba mulai menulis kode javascript kita. Di sini kita menggunakan
notepad sebagai teks editor.
Kode javascript ditulis diantara tag <script> dan </script>, bisa kita sisipkan di kode-kode HTML
kita.
Sekarang mari kita simpan kode tersebut dengan File Name: tes.html, jangan lupa Save as type:
All Files, seperti gambar di bawah.
7
Untuk mengetesnya, anda tinggal double klik file tes.html yang kita buat tadi, hasilnya akan
seperti berikut:
8
Javascript bisa juga ditulis terpisah, filenya diberi ekstension .js Contoh: namafile.js, nanti cara
menyisipkannya di file html yaitu seperti berikut:
<script type="text/javascript" src="namafile.js"></script>
C. Sintaks Javascript
Sintaks javascript mirip-mirip bahasa C atau java. Javascript bersifat case sensitive, artinya
huruf kecil dan huruf besar yaitu berbeda.
Setiap baris kode javascript dipisahkan baris baru atau bisa juga titik koma (;)
Komentar dalam javascript di awali dengan // atau ditulis diantara /* dan */
D. Variabel
Variabel di javascript bisa ditulis dengan diawalai huruf atau underscore ( _ ) atau tanda dollar
().
Contoh : jumlah_hits , _nama
Deklarasi variable
• Anda bisa mendeklarasi dengan menggunakan var, contoh: var x = 5, ini bersifat local
dan global (bisa di akses oleh semua fungsi)
• Atau langsung deklarasikan tanpa var, x = 5
Contoh:
<script>
var x = 5;
var nama = “Desrizal”;
document.write(nama);
</script>
E. Operator
Operator Aritmatika
Yaitu operator untuk operasi matematika
Operator Definisi Contoh
+ Penambahan 5 + 5 = 10
- Pengurangan 6 – 2 = 4
9
* Pengalian 4 * 4 = 16
/ Pembagian 8 / 2 = 4
% Modulus (sisa hasil
pembagian)
5 % 2 = 1
10 % 4 = 2
Contoh:
<script>
var x = 4;
var y = 2;
z = x + y;
alert(z);
</script>
Operator Assignment
Seperti kebanyakan bahasa pemograman lainnya, untuk memberikan nilai kepada suatu
variable menggunakan tanda sama dengan =
Berikut yaitu penyingkatan penulisan operator
Shorthand Operator Artinya
x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y
Contoh:
<script>
var x = 4;
var y = 2;
x -= y
alert(x);
</script>
Operator Pembanding
Berguna untuk membanding nilai suatu variable
Operator Definisi Contoh
== Sama dengan var1 == “Desrizal”
!= Tidak sama dengan x != y
10
> Lebih besar dari x > y
< Lebih kecil dari x < 6
>= Lebih besar sama dengan x>= y
<= Lebih kecil sama dengan x < 5
Contoh:
<html>
<head>
<script>
var x = 4;
var y = 2;
if(x > y){
alert("x lebih besar dari y");
}
</script>
</head>
<body>
</body>
</html>
Operator Logika
Operator Definisi Contoh
&& DAN x>=5 && x<10
|| ATAU x == 6 || x == 12
! BUKAN !expression
Contoh:
<script>
var x = 76;
if(x >= 80){
alert("Nilai = A");
}else if(x >= 70 && x < 80){
alert("Nilai = B");
}else if(x >= 60 && x < 70){
alert("Nilai = C");
}else{
alert("Nilai = D");
}
</script>
11
F. Statement
Kondisional
Kondisional berguna untuk mengecek suatu kondisi dan melakukan suatu kode jika kondisi
tersebut benar atau salah.
if
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}
Contoh :
<script>
var x = 10;
if(x == 10){
alert("Hai Apa kabar");
}
</script>
if - else
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}else{
kode yang dijalankan jika salah
}
Contoh :
<script>
var x = 5;
if(x == 10){
alert("Hai Apa kabar");
}else{
alert("X tidak sama dengan 10");
}
</script>
if - else if - else
Jika anda membutuhkan kondisi yang banyak
12
Sintaks :
if(kondisi 1){
kode yang dijalankan jika kondisi 1 benar
}else if(kondisi 2){
kode yang dijalankan jika kondisi 2 benar
}else if(kondisi 3){
kode yang dijalankan jika kondisi 3 benar
}else{
kode jika salah satu kondisi di atas tidak ada yang benar
}
Contoh :
<script>
var nilai = 80;
if(nilai >= 85){
alert("A");
}else if(nilai >= 70 && nilai < 85){
alert("B");
}else if(nilai >= 60 && nilai < 70){
alert("C");
}else{
alert("D");
}
</script>
switch
Sama seperti if - else if - else, berguna jika membutuhkan kondisi yang banyak
Sintaks :
switch(ekspresi){
case kondisi1 :
kode yang dijalankan jika kondisi1 benar;
break;
case kondisi2 :
kode yang dijalankan jika kondisi2 benar;
break;
case kondisi3 :
kode yang dijalankan jika kondisi3 benar;
break;
}
Contoh :
<script>
var buah = "mangga";
switch (buah) {
case "apple":
alert("buahnya yaitu apple");
break;
13
case "mangga":
alert("buahnya yaitu mangga");
break;
case "jambu":
alert("buahnya yaitu jambu");
break;
}
</script>
Pengulangan
for
Berguna untuk pengulangan yang sudah ditentukan terlebih dahulu awalnya berapa, dijalankan
sampai kondisi bagaimana.
Sintaks :
for(awal; kondisi; penambahan){
kode untuk dijalankan
}
Contoh :
<script>
for (i = 1; i <= 10; i++) {
document.write(i);
}
</script>
while
Berguna untuk menjalankan suatu kode terus menerus selama kondisi bernilai TRUE
Sintaks :
while(kondisi){
kode untuk dijalankan;
}
Contoh :
<script>
var i=1;
while(i<=5)
{
document.write(“Nomor : "+i +"<br />");
i++;
}
</script>
14
G. Fungsi
Apa itu fungsi? Fungsi yaitu kumpulan blok kode yang membentuk fungsi tersendiri. Kita bisa
membuat sendiri fungsi tersebut
Sintaks:
function nama_fungsi(parameter){
kode-kode javascript
}
Contoh 1:
<script>
function tes(){
document.write("Hello World!");
}
//untuk menjalankan fungsi, cukup tulis namafungsi
tes();
</script>
Contoh 2:
<script>
function kalikan(x,y){
z = x * y;
alert("Hasil kali "+x+" * "+y+" = "+z);
}
kalikan(5,3);
</script>
15
Penanganan Event
16
A. Apa itu Penanganan Event
Penanganan Event atau Event Handler yaitu kemampuan javascript untuk mendeteksi event
atau kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan
suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double
klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan
sebagainya.
Sintaknya:
nama_event=”kode javascript”
Contoh:
<html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘hello’)”>google</a>
</body>
</html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan dieksekusi kode
javascript alert(‘hello’)
Ada macam-macam event yang bisa terjadi pada halaman web atau objek HTML, yaitu sebagai
berikut:
• onblur
• onchange
• onclick
• ondblclick
• onerror
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onreset
• onresize
• onselect
• onsubmit
• onunload
17
B. Contoh-contoh Penanganan Event
1. onclick
Pada contoh dibawah kita membuat tombol, yang kalau diklik akan muncul window alert
<script>
function inform(){
alert("Hai anda mengklik saya")
}
</script>
<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
Pada contoh berikut jika kita mengklik radio button akan mengubah warna latar halaman web
<html>
<body>
<form name="go">
<input type="radio" name="C1" onclick="document.bgColor='lightblue'">
<input type="radio" name="C1" onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1" onclick="document.bgColor='lightgreen'">
</form>
</body>
</html>
2. onload
Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita menaruh
event onload di tag <body>, artinya jika halaman web sudah diload semua, maka dieksekusi
kode javascript
<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('Halaman ini telah selesai di loading')">
Welcome to my page
</body>
</html>
3. onmouseover dan onmouseout
Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di atas suatu objek
HTML, onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML,
contoh:
<html>
<body>
18
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Baris pertama</td>
</tr>
<tr>
<td>Baris kedua</td>
</tr>
</body>
</html>
4. onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman web
<html>
<body onunload="alert('Thank you. Please come back to this site and visit us
soon, ok?')">
<h1>Welcome</h1>
</body>
</html>
19
Objek String
20
A. Memformat teks dengan Javascript
Untuk membantu melakukan formatting terhadap teks secara programming, javascript
menyediakan beberapa metode formatting menggunakan javascript.
Properti Deskripsi
length Menghasilkan jumlah karakter dari suatu string atau teks
Metode Deskripsi
anchor(nama) Menghasilkan string dengan diapit tag <A name="nama">
big() Menghasilkan string dengan diapit tag <BIG>.
blink() Menghasilkan string dengan diapit tag <BLINK>
bold() Menghasilkan string dengan diapit tag <B>
fixed() Menghasilkan string dengan diapit tag <TT> surrounding it.
fontcolor(warna) Menghasilkan string dengan diapit tag <FONT color="warna">
fontsize(size) Menghasilkan string dengan diapit tag <FONT size="size">
italics() Menghasilkan string dengan diapit tag <I>
link(url) Menghasilkan string dengan diapit tag <A href="url">
small() Menghasilkan string dengan diapit tag <SMALL>
strike() Menghasilkan string dengan diapit tag <STRIKE>
sub() Menghasilkan string dengan diapit tag <SUB>
sup() Menghasilkan string dengan diapit tag <SUP>
toLowerCase() Mengubah string menjadi huruf kecil semua.
toUpperCase() Mengubah string menjadu huruf besar semua
Contoh 1:
<script>
var teks = "Desrizal"
panjang = teks.length;
alert(panjang);
</script>
21
Hasilnya:
Contoh 2:
<script>
var message="Welcome to our site!"
document.write(message)
</script>
Output:
Welcome to our site!
<script>
var message="Welcome to our site!"
document.write(message.toUpperCase())
</script>
Output:
WELCOME TO OUR SITE!
Contoh 3:
<script>
var message="Welcome to our site!"
document.write(message.toUpperCase().bold())
</script>
Output:
WELCOME TO OUR SITE!
Contoh 4:
<script>
var message="Welcome to our site!"
var format=message.toUpperCase()
var size=1
for (i=0;i<message.length;i++){
document.write(format.charAt(i).fontsize(size).bold())
if (size<7){
size++
}else{
size=1
22
}
}
</script>
Output:
WELCOME TO OUR SITE!
B. Penanganan Objek String
Setelah kita mempelajari metode string yang berkaitan dengan format teks. Sekarang kita lanjut
metode objek string lainnya ayng bertugas menangani dan memanipulasi objek string dan
contoh-contohnya.
Metode Deskripsi
charAt(x) Menghasilkan karakter pada posisi x dari suatu string.
charCodeAt(x) Menghasilkan nilai Unicode value dari karakter pada posisi x dari
suatu string.
concat(teks1, teks2,...) Menggabungkan satu atau lebih string-string (teks1, teks2, dan
sebagainya).
fromCharCode(c1, c2,...) Meghasilkan string yang dibuat menggunakan urutan dari nilai unicode
indexOf(substr, [start]) Mencari dan (jika ditemukan) menghasilkan nomor index number dari
karakter atau substring yang di dalam string. Jika tidak ditemukan,
hasilnya -1. "Start" yaitu argument opsional,posisi awal di string
untuk memulai pencarian , defaultnya yaitu 0
match(regexp) Mengeksekusi suatu pencarian untuk string berdasarkan pola regular
expression. Menghasikan suatu array informasi, jika tidak ditemukan
menghasilkan null.
replace( regexp, replacetext) Mencari dan menukar string yang dicari berdasarkan pola regular
expression.
search(regexp) Mengetes apakah pola regular expression cocok pada suatu string, jika
cocok akan menghasilkan index dari yang cocok, jika tidak ada yang
cocok menghasilkan -1.
slice(start, [end]) Menghasilkan substring dari suau string berdasarkan “start” dan “end”
argument.
split(delimiter, [limit]) Memotong-motong string berdasarkan pembatas yang ditentukan,
hasilnya dalam bentuk array.
substr(start, [length]) Menghasilkan karakter atau substring dari suatu string yang dimulai
dari “start” sampai panjang “length” yang ditentukan.
23
Contoh-contoh:
1. Validasi email, pada contoh berikut kita akan mengecek apakah email berikut valid atau
tidak. Cara mengeceknya yaitu apakah string yang diinput mengandung karakter @ atau titik
(.)
<form name="test" onSubmit="checkemail(this.test2.value);return false">
<input type="text" size=20 name="test2"> <input type="submit" value="Submit">
</form>
<script type="text/javascript">
function checkemail(email){
if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1)
alert("bagus!")
else
alert("Bukan email")
}
</script>
2. Menghitung kata, Pada contoh berikut kita akan menghitung kata, caranya yaitu
mengambil isi suatu textarea, lalu memotong-motong isinya dengan metode split.
<form name="wordcount">
<textarea rows="12" name="wordcount2" cols="38"
wrap="virtual"></textarea><br>
<input type="button" value="Hitung kata" onClick="hitung()"> <input
type="text" name="wordcount3" size="20">
</form>
<script type="text/javascript">
function hitung(){
var formcontent=document.wordcount.wordcount2.value
isi=formcontent.split(" ")
document.wordcount.wordcount3.value=isi.length
}
</script>
24
C. Parse String ke Integer dan Float
parseInt, untuk mengubah string menjadi Integer
parseFloat, untuk mengubah string menjadi Float
<script type="text/javascript">
document.write(parseInt("10") + "<br />")
document.write(parseInt("10.00") + "<br />")
document.write(parseInt("10.33") + "<br />")
document.write(parseInt("34 45 66") + "<br />")
document.write(parseInt(" 60 ") + "<br />")
document.write(parseInt("40 years") + "<br />")
document.write(parseInt("He was 40") + "<br />")
document.write("<br />")
document.write(parseInt("10")+ "<br />")
document.write(parseInt("10",10)+ "<br />")
document.write(parseInt("010")+ "<br />")
document.write(parseInt("10",8)+ "<br />")
document.write(parseInt("0x10")+ "<br />")
document.write(parseInt("10",16)+ "<br />")
</script>
25
Objek Window
26
A. Membuka Window di Javascript
Untuk membuka window di javascript yaitu dengan metode open()
Sintaks:
window.open(url, nama_window, konfigurasi)
Contoh:
window.open(“http://www.google.com”,”windowku”,”width=300,height=200”);
Untuk konfigurasi yang bisa diset sebagai berikut:
Konfigurasi Deskripsi Nilai
width Lebar window Lebar window dalam pixel
height Tinggi window Tinggi window dalam pixel
toolbar Menampilkan toolbar browser 1 atau 0
menubar Menampilkan menubar browser 1 atau 0
scrollbars Apakah menampilkan scrollbars 1 atau 0
resizable Set apakah bisa window diubah-ubah
ukurannya
1 atau 0
Contoh:
<html>
<body>
<script>
function bukawindow(){
window.open("http://www.google.com","google","width=400,height=300,toolbar=1"
);
}
</script>
<input type="button" onclick="bukawindow()" value="buka">
</body>
</html>
B. Mereload, Menutup, Meloading Halaman Baru, Print
Untuk mereload window yaitu dengan cara:
window.location.reload()
Untuk menutup window yaitu dengan cara:
27
window.close()
Untuk meloading halaman baru yaitu :
window.location="urlkamu.com"
kode di atas akan sama jika anda mengklik suatu link:
<a href=”urlkamu.com”>urlkamu</a>
Untuk mengeprint halaman web
window.print()
C. Komunikasi Antar Window
Adakalanya ketika kita membuka window baru, kita bisa melakukan komunikasi data ke window
parent-nya, atau bisa mengakses dan memanipulasi objek di window parent.
Untuk mengakses window parent gunakan window.opener
Contoh:
Induk.html
<html>
<head>
<title>Test</title>
<script language="javascript">
function buka(){
var x = window.open('anak.html', 'newWindow', 'height=300,width=300');
}
</script>
</head>
<body>
<form name=formulir>
<INPUT type=button value="buka window" name=submit1 onClick="buka();">
<input type=text name=kotak id=kotak>
</form>
</body>
</html>
anak.html
<html>
<head>
<title>testing</title>
<script language=javascript>
function setInduk(){
28
window.opener.document.getElementById("kotak").value =
document.getElementById("inputan").value;
}
</script>
</head>
<body>
<form name=myForm>
<input type=text name="inputan" id="inputan">
<input type=button value="Click Me" onClick="setInduk();">
</form>
</body>
</html>
D. Alert, Confirm dan Prompt
alert digunakan untuk menampilkan window alert
Contoh:
<script>
alert(“Hellow World!!”);
</script>
Hasil:
cofirm, digunakan untuk memunculkan window konfirmasi atau semacam pertanyaan yang
jawabannya antara OK atau Cancel
Contoh:
<script type="text/javascript">
var x=window.confirm("Apakah anda baik-baik saja?")
if (x)
window.alert("Good!")
else
window.alert("Too bad")
</script>
29
prompt, digunakan untuk meminta inputan melalui window
Contoh:
<script type="text/javascript">
var y=window.prompt("Masukkan nama anda")
window.alert(y)
</script>
Hasilnya
30
Array
31
A. Pengenalan Array
Apa sih array? Array yaitu semacam variabel tunggal yang terindex secara teratur, jadi cukup
satu nama variabel tapi bisa punya banyak nilai. Karena terindex sacara teratur kita jadi
gampang mengolah dan menampilkan nilai-nilai dari variabel tersebut.
Contoh bentuk array:
Buah[1] = “Rambutan”
Buah[2] = “Durian”
Buah[3] = “Manggis”
Bagaimana cara buat array di javascript?
Untuk membuat array di javascript, kita perlu mendeklarasikan variabel array dengan cara new
Array()
Contoh:
<html>
<body>
<script type="text/javascript">
var mobil = new Array()
mobil[0] = "Saab"
mobil[1] = "Volvo"
mobil[2] = "BMW"
for (i=0;i<mobil.length;i++){
document.write(mobil[i] + "<br />")
}
</script>
</body>
</html>
Selain di atas kita juga bisa membuat array dengan cara menulis langsung di dalam argument
Array(). Index atau Key array dimulai dari nol (0)
Contoh:
<html>
<body>
<script type="text/javascript">
var buah = new Array("Mangga","Rambutan","Durian");
document.write(buah[1]);
</script>
</body>
</html>
32
Hasilnya yaitu Rambutan
B. Metode untuk Manipulasi Array
Javascript menyediakan metode-metode untuk melakukan manipulasi terhadap objek array
Properti Array
Properti Deskripsi
length Menghasilkan jumlah elemen dalam suatu array
Metode Array
concat()
fungsi:
Menggabungkan dua atau lebih array
Sintaks:
arrayObject.concat(arrayX,arrayX,......,arrayX)
Contoh:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Tove"
arr[2] = "Hege"
var arr2 = new Array(3)
arr2[0] = "John"
arr2[1] = "Andy"
arr2[2] = "Wendy"
var arr3 = new Array(2)
arr3[0] = "Stale"
arr3[1] = "Borge"
document.write(arr.concat(arr2,arr3))
</script>
Hasilnya:
Jani,Tove,Hege,John,Andy,Wendy,Stale,Borge
33
join()
Fungsi:
Menuliskan elemen-elemen array ke dalam satu string dipisahkan oleh karakter yang kita set
Sintaks:
arrayObject.join(pemisah)
Contoh:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr.join() + "<br />")
document.write(arr.join("."))
</script>
Hasilnya:
Jani,Hege,Stale
Jani.Hege.Stale
pop()
Fungsi:
Untuk mendelete elemen terakhir dari suatu array
Sintaks:
arrayObject.pop()
Contoh:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr + "<br />")
document.write(arr.pop() + "<br />")
document.write(arr)
</script>
34
Hasilnya:
Jani,Hege,Stale
Stale
Jani,Hege
push()
Fungsi:
Menambah satu atau lebih elemen ke bagian akhir suatu array
Sintaks:
arrayObject.push(newelement1,newelement2,....,newelementX)
Contoh:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr + "<br />")
document.write(arr.push("Kai Jim") + "<br />")
document.write(arr)
</script>
Hasilnya:
Jani,Hege,Stale
4
Jani,Hege,Stale,Kai Jim
reverse()
Fungsi:
Membalikkan urutan elemen dalam suatu array
Sintak:
arrayObject.reverse()
Contoh:
35
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr + "<br />")
document.write(arr.reverse())
</script>
Hasilnya:
Jani,Hege,Stale
Stale,Hege,Jani
shift()
Fungsi:
Untuk mendelete elemen pertama dari suatu array
Sintaks:
arrayObject.shift()
Contoh:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
Hasilnya:
Jani,Hege,Stale
Jani
Hege,Stale
36
unshift()
Fungsi:
Untuk menambahkan satu atau lebih elemen pada awal array
Sintaks:
arrayObject.unshift(newelement1,newelement2,....,newelementX)
Contoh:
<script type="text/javascript">
var arr = new Array()
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr + "<br />")
arr.unshift("Kai Jim")
document.write(arr)
</script>
Hasilnya:
Jani,Hege,Stale
Kai Jim,Jani,Hege,Stale
sort()
Fungsi:
Untuk mengurutkan elemen array
Sintaks:
arrayObject.sort(sortby)
Contoh:
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
arr[3] = "Kai Jim"
arr[4] = "Borge"
37
arr[5] = "Tove"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
Hasilnya:
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove
38
Tanggal dan Waktu
39
A. Metode Tanggal dan Waktu
Untuk membuat objek tanggal dan waktu terlebih dahulu anda mendeklarasikan variabel/objek
tanggal dan waktu tersebut
var mydate= new Date()
Berikut yaitu beberapa metode tanggal dan waktu di javascript
Metode Deskripsi
getDate() Menghasilkan tanggal dalam suatu bulan
getDay() Meghasilkan nama hari
getHours() Menghasilkan jam (dimulai dari 0-23)!
getMinutes() Menghasilkan menit
getSeconds() Menghasilkan detik
getMonth() Menghasilkan bulan. (dimulai dari 0-11)!
getYear() Menghasilkan tahun
getTime() Menghasilkan waktu yang lengkap
Contoh:
<script type="text/javascript">
var hari_ini= new Date()
var tahun = hari_ini.getYear()
var bulan = hari_ini.getMonth()+1
var tanggal = hari_ini.getDate()
document.write("Tanggal hari ini: ")
document.write(tanggal+"/"+bulan+"/"+tahun)
</script>
Hasilnya:
Tanggal hari ini: 4/12/110
B. Javacsript Timer
Pada javascript terdapat fungsi timer, yaitu seTimeout(), yang berfungsi untuk mengatur timer
untuk mengeksekusi suatu fungsi atau kode tertentu
40
Sintaks:
setTimeout("expression", delaytime)
expression bisa berupa kode javascript atau suatu fungsi
delaytime, yaitu setiap berapa milidetik suatu expression dieksekusi
Contoh:
<html>
<body>
<input type="text" id="timer" size="12">
<input type="button" value="Start" onClick="count()">
<script type="text/javascript">
var c=0
document.getElementById("timer").value = ""
function count(){
document.getElementById("timer").value=c
c=c+1
setTimeout("count()",1000)
}
</script>
</body>
</html>
C. Membuat Jam Digital
<form name="Tick">
<input type="text" size="12" name="Clock">
</form>
<script type="text/javascript">
function show()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=
hours+":"+minutes+":"+seconds+" "+dn
setTimeout("show()",1000)
41
}
show()
</script>
42
Dynamic HTML
43
A. Mengakses dan Manipulasi Objek HTML
Untuk mengakses objek HTML, kita bisa menggunakan document.getElementById(”id_objek”)
atau document.getElementsByName(“nama_objek”)
Contoh:
<html>
<head>
<script type="text/javascript">
function getElement(){
var x=document.getElementById("myHeader")
alert("Ini yaitu elemen " + x.tagName)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">
Klik saya untuk lihat nama tag saya</h1>
</body>
</html>
Berikut metode-metode untuk memanipulasi objek HTML
innerHTML
Fungsi: untuk mendapatkan isi teks atau html suatu objek atau tag HTML
Contoh:
<html>
<head>
<script type="text/javascript">
function lihatisi(){
isi = document.getElementById("kepala").innerHTML;
alert(isi);
}
function tukarisi(){
document.getElementById("kepala").innerHTML = "Tulisan Ini diganti";
}
</script>
</head>
<body>
<h1 id="kepala">Selamat Datang user!!</h1>
<input type="button" onclick="lihatisi()" value="Lihat isi H1">
<input type="button" onclick="tukarisi()" value="Tukar isi H1">
</body>
</html>
44
value
Fungsi: untuk mengambil atau memanipulasi nilai suatu input form
Contoh:
<html>
<head>
<script type="text/javascript">
function lihatisi(){
isi = document.getElementById("teks").value;
alert(isi);
}
function tukarisi(){
document.getElementById("teks").value = "Tulisan Ini diganti";
}
</script>
</head>
<body>
Ketik tulisan di form di bawah:<br>
<input type=text name="teks" id="teks">
<input type="button" onclick="lihatisi()" value="Lihat">
<input type="button" onclick="tukarisi()" value="Tukar">
</body>
</html>
B. Memanipulasi Style atau CSS Objek HTML
Untuk memanipulasi style atau CSS suatu objek, yaitu dengan cara:
objekHTML.style.namaStyle = “style yang diset”
objekHTML.namaStyle = “style yang diset”
atau
document.getElementById(“namaid”).style.namaStyle = “style yang diset”
document.getElementById(“namaid”).namaStyle = “style yang diset”
Mengubah warna latar TD
<html>
<head>
</head>
<body>
<table border=1 width=500 bgcolor="yellow">
<tr>
<td onmouseover="this.bgColor='red'"
onmouseout="this.bgColor='yellow'">Desrizal</td>
</tr>
<tr>
45
<td onmouseover="this.bgColor='red'" onmouseout="this.bgColor='yellow'">Nurmi
Yulita rahmi</td>
</tr>
</body>
</html>
Mengubah warna latar halaman web
<html>
<head>
<script>
function ubah(){
document.bgColor = "lightblue";
}
</script>
</head>
<body>
<input type="button" onclick="ubah()" value="ubah">
</body>
</html>
Mengubah posisi objek
<html>
<head>
<script>
function ubah(){
document.getElementById("kotak").style.top = 300;
document.getElementById("kotak").style.left = 300;
}
</script>
</head>
<body>
<input type="button" onclick="ubah()" value="ubah">
<div id="kotak" style="position:absolute;top:50;left:50;background-
color:yellow;width:50;height:50">
</div>
</body>
</html>
46
Penanganan Form
47
A. Penanganan CheckBox di javascript
Deteksi apakah checkbox sudah dicek
checkboxObject.checked=true|false
Contoh:
<html>
<head>
<script type="text/javascript">
function check(){
document.getElementById("myCheck").checked=true
}
function uncheck(){
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()"
value="Check Checkbox" />
<input type="button" onclick="uncheck()"
value="Uncheck Checkbox" />
</form>
</body>
</html>
Mengambil Nilai checkbox
<html>
<head>
<script type="text/javascript">
function createOrder(){
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i){
if (coffee[i].checked){
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="You ordered a coffee with " + txt
}
</script>
</head>
<body>
<p>How would you like your coffee?</p>
<form>
<input type="checkbox" name="coffee" value="cream">With cream<br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br />
48
<br />
<input type="button" onclick="createOrder()" value="Send order">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>
B. Penanganan Input Radio di Javascript
<html>
<head>
<script type="text/javascript">
function setkelamin(jenis){
document.getElementById("kelaminmu").value = jenis;
}
</script>
</head>
<body>
jenis Kelamin:
<br>
<input type=radio value="Laki-laki" name="kelamin"
onclick="setkelamin(this.value)">Laki-laki<br>
<input type=radio value="Perempuan" name="kelamin"
onclick="setkelamin(this.value)">Perempuan<br>
<input type=text id="kelaminmu">
</body>
</html>
C. Penanganan Select Box di Javacsript
Mengambil nilai select box
<html>
<head>
<script type="text/javascript">
function favBrowser(){
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex
].text
}
</script>
</head>
<body>
<form>
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
49
<option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
Mendelete option dari dropdown list
<html>
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
<option>Melon</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
</body>
</html>
Desrizal
.jpeg)
.jpeg&description=JavaScript 27){kind=link}