Scribd
Unggah
78 tayangan14 halaman

Modul Praktikum PPK - Javascript

Buku modul ini membahas tentang materi praktikum Javascript yang mencakup pengertian, fungsi, dan penggunaan Javascript untuk memanipulasi elemen pada halaman web melalui DOM serta event handler."

Diunggah oleh

Cms-Resna Cousen Bladz
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
78 tayangan14 halaman

Modul Praktikum PPK - Javascript

Buku modul ini membahas tentang materi praktikum Javascript yang mencakup pengertian, fungsi, dan penggunaan Javascript untuk memanipulasi elemen pada halaman web melalui DOM serta event handler."

Diunggah oleh

Cms-Resna Cousen Bladz
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

Buku Modul Praktikum

Mata Kuliah Pemrograman Platform Khusus

9
Modul 5
Javascript
Tujuan Praktikum

 Mahasiswa mampu menjelaskan pengertian javascript


 Mahasiswa mampu menjelaskan fungsi javascript
 Mahasiswa mampu menggunakan javascript dengan HTML
 Mahasiswa mampu memahami dan menggunakan javascript untuk memanipulasi
elemen pada document object model (DOM)
 Mahasiswa mampu menggunakan komponen form untuk membuat fungsi validasi pada
HTML
 Mahasiswa mampu menggunakan komponen canvas dan menerapkan beberapa fungsi
untuk menggambar sebuah objek
 Mahasiswa mampu mendefinisikan dan menggunakan javascript object notation (JSON)
 Mahasiswa mampu membuat aplikasi berbasis javascript dengan menerapkan materi-
materi sebelumnya yang telah dipelajari

9.1 Pendahuluan: Pengenalan Javascript


Javascript merupakan salah satu bahasa pemrograman yang popular diantara bahasa
pemrograman yang lain. Asal mula javascript dikembangkan bertujuan untuk memberi unsur
interaktif pada web dan pertama kali berjalan pada browser Netscape Navigator 2. Dan pada
awalnya Javascript dinamakan dengan LiveScript tetapi pada waktu pengembangannya bahasa
pemrograman Java sedang sangat popular sehingga nama LiveScript diganti menjadi JavaScript.
Hal ini dikarenakan pihak Netscape menganggap nama tersebut lebih menarik dan menjual.
Javascript digunakan untuk memberi interaktifitas pada halaman web, dari membuat efek animasi
sederhana, pembuatan validasi pada form, hingga pembangunan aplikasi single-page. Dan tidak
terbatas pada itu saja, sejak diperkenalkan node.js yang merupakan pengaplikasian javascript
pada sisi server berdampak pada meningkatnya jumlah aplikasi yang dikembangkan
menggunakan teknologi ini.
Dengan belajar mengembangkan suatu aplikasi menggunakan javascript yang merupakan salah
satu bahasa pemrograman yang paling populer dapat membuka peluang yang lebih besar untuk
menjangkau berbagai macam platform, perangkat hardware, maupun system operasi yang
berbeda.
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

Terdapat beberapa cara untuk menggunakan javascript pada suatu halaman web sebagai
berikut:
 Secara internal : dimana kode program javascript disisipkan pada tag <head>
ataupun tag <body> pada dokumen html. Kode program penggunaan javascript secara
internal ditunjukkan dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh peletakan javascript</title>
5 <script>
6 // Kode program pada tag <head>
7 alert('javascript pada tag <head>');
8 </script>
9 </head>
10 <body>
11 <script>
12 // Kode program pada tag <body>
13 alert('javascript pada tag <body>');
14 </script>
15 </body>
16 </html>

 Secara eksternal : kode program javascript diletakkan pada file document yang berbeda
dari dokumen html. Sehingga untuk menggunakan javascript dari file yang lain harus
terlebih dahulu didefinisikan alamat filenya seperti yang diilustrasikan pada kode program
dibawah ini.
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <script src="namaFileEksternal.js"></script>
5 </body>
6 </html>

9.1.1 Tipe data pada javascript


Javascript merupakan bahasa pemrograman yang bersifat weakly-typed language sehingga
pendeklarasian sebuah variable hanya menggunakan keyword var. Contoh deklarasi sebuah
variabel pada javascript ditunjukkan pada kode program berikut ini.

1 <!DOCTYPE html>
2 <html>
3 <head>
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

4 <title>Tipe data pada javascript</title>


5 </head>
6 <body>
7 <script>
8 // tipe data string
9 var fakultas = "Filkom";
10 // tipe data string
11 var mk = 'Pemrograman platform khusus';
12 // tipe data integer
13 var tahun = 2017;
14 //tipe data float
15 var durasi = 2.5;
16 // tipe data boolean
17 var status = true;
18 // tipe data array/larik
19 var mahasiswa = new Array();
20 mahasiswa[0] = "Udin";
21 mahasiswa[1] = "Budi";
22 mahasiswa[2] = "Susi";
23
24 alert(mk);
25 alert(mahasiswa);
26 </script>
27 </body>
28 </html>

9.1.2 Operator pembanding pada javascript


Operator pembanding pada javascript agak berbeda dengan yang digunakan pada bahasa
pemrograman java. Asumsikan bahwa nilai x = 1 maka hasil operasi perbandingan ditunjukkan
pada Tabel 1.
Tabel 1. Daftar operator perbandingan pada javascript

Operator Deskripsi Perbandingan Output

== Sama dengan x == 1 True

x == 5 False

=== Sama persis dengan (nilai dan x === 1 True


tipe data)

x === “1” False


Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

!= Tidak sama dengan x != 5 True

x != “1” False

!== Tidak sama persis dengan (nilai x !== “1” True


dan tipe data)

x !== 1 False

> Lebih besar dari x>0 True

< Lebih kecil dari x<0 False

>= Lebih besar sama dengan x >= 0 True

<= Lebih kecil sama dengan x <= 0 False

9.2 Document Object Model (DOM)


DOM merupakan suatu representasi struktur keseluruhan halaman web (HTML). Dengan
memaanfaatkan DOM, developer dapat dengan bebas memanipulasi apapun yang ada pada
halaman web menggunakan javascript.

Gambar 9.1 Hirarki DOM pada HTML

Dengan memanfaatkan DOM, javascript memilih kemampuan untuk membuat halaman web
HTML secara dinamik yang dijabarkan sebagai berikut:
 Dapat mengubah seluruh elemen-elemen HTML pada halaman web
 Dapat mengubah seluruh atribut-atribut HTML pada halaman web
 Dapat merubah seluruh style CSS pada halaman web
 Dapat menambahkan dan juga menghapus elemen serta atribut pada halaman web
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

 Dapat membuat dan merespon event HTML.

9.2.1 Fungsi-fungsi pemanggilan elemen HTML


Sebelum dapat memanipulasi elemen-elemen yang ada pada dokumen HTML terlebih dahulu
perlu didapatkan elemen tertentu yang akan digunakan. Terdapat empat fungsi yang dapat
digunakan untuk memanggil elemen yang ada pada halaman web sesuai informasi yang tertera
pada Tabel 9.1.

Tabel 9.1 Daftar metode pada DOM

Metode Keterangan

document.getElementById(”htmlID”) Memanggil elemen berdasarkan id

document.getElementsByTagName(”htmlTag") Memanggil elemen berdasarkan tag html dan


mengembalikan seluruh tag yang sama

document.getElementsByClassName(”namaKlas”) Memanggil elemen berdasarkan nama kelas yang sama


pada keseluruhan elemen HTML

document.querySelectorAll("p.dasar"); Memanggil semua elemen yang sesuai dengan css


selector

Fungsi getElementById(“htmlID”) digunakan untuk mencari sebuah tag HTML berdasarkan ID,
yang secara sederhana properti dari ID tag seperti ini <NamaTag id=”namaID”>. Penggunaan
fungsi ini ditujukan untuk mencari satu elemen khusus yang akan dimanipulasi. Kode program
penggunaan fungsi ini ditunjukkan bagian dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Pemrograman platform khusus - DOM <b>getElementById</b>
6 </p>
7
8 <p id="ppk">Hello Javascript World!</p>
9
10 <p id="demo"></p>
11
12 <script>
13 var myElement = document.getElementById("ppk");
14 document.getElementById("demo").innerHTML =
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

15 "Kalimat pada paragraf dengan ID (\"ppk\") adalah : " +


16 myElement.innerHTML;
17 </script>
18
19 </body>
20 </html>

Ilustrasi hasil eksekusi kode program diatas ditunjukkan pada Gambar 9.2.

Gambar 9.2 Hirarki DOM pada HTML

Untuk memanggil beberapa elemen dengan jenis tag yang sama sekaligus dapat menggunakan
fungsi getElementByTagName(“htmlTag”). Fungsi ini akan mendapatkan elemen-elemen yang
sama sesuai dengan parameter yang dimasukkan pada fungsi. Kode program fungsi ditunjukkan
pada bagian dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Pemrograman platform khusus - DOM <b>getElementsByTagName</b>
6 </p>
7
8 <p id="ppk">Hello Javascript World!</p>
9
10 <p>Javascript keren!</p>
11
12 <p id="demo"></p>
13
14 <script>
15 var x = document.getElementsByTagName("p");
16 document.getElementById("demo").innerHTML =
17 "Paragraf kedua (indeks 1) adalah: " + x[0].innerHTML;
18 </script>
19
20 </body>
21 </html>
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

9.2.2 Event handler


Javascrip memiliki beberapa event handler yang dapat digunakan untuk mendukung fungsi-
fungsinya pada halaman web HTML Daftar beberapa event handler yang sering digunakan
tertera pada table 2.

Tabel 2. Daftar nama event pada DOM


Event pada mouse
No Nama event Penjelasan
1 onclick Muncul ketika user mengklik elemen/ komponen
2 ondblclick Muncul ketika user mengklik dua kali secara berkelanjutan
(ganda) pada elemen/komponen
3 onmousedown Muncul ketika user menekan salah tombol pada mouse
4 onmousemove Muncul ketika user menggerakkan pointer mouse melewati
elemen tertentu
5 onmouseout Muncul ketika user menggerakkan pointer mouse keluar
dari elemen/komponen control
6 onmouseover Muncul ketika user menggerakkan pointer mouse melalui /
melewati elemen
7 onmouseup Muncul ketika user melepas tombol mouse
Event pada keyboard
8 onkeydown Muncul ketika user menekan suatu tombol pada keyboard
9 onkeypress Muncul ketika user menekan suatu tombol keyboard dan
akan terus muncul sampai user melepas tombol
10 onkeyup Muncul ketika user melepas tombol yang telah ditekan
sebelumnya

Event pada control

11 onblur Muncul ketika HTML control kehilangan focus

12 onchange Muncul ketika HTML control kehilangan focus dan nilainya


berubah

13 onfocus Muncul ketika sebuah HTML control sedang mendapatkan


focus

14 onreset Muncul ketika user menekan tombol reset pada sebuah


HTML

15 onselect Muncul ketika user memilih teks pada sebuah elemen


Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

HTML

16 onsubmit Muncul ke ka user melakukan submit form

Event pada window

17 onload Muncul ketika window telah selesai loading

18 onresize Muncul ketika user merubah ukuran form

19 onunload Muncul ketika user keluar dari halaman web

9.3 Form
Forms menyediakan kemampuan untuk mengelompokkan elemen-elemen HTML dengan tujuan
yang sama. Dengan menggunakan form, developer akan dimudahkan dalam mengatur elemen-
elemen yang mempunyai fungsi yang sama dan mengurangi kemungkinan timbul error. Form
sering digunakan ketika developer ingin mengumpulkan data dari pengunjung. Contohnya ketika
user ingin melakukan proses registrasi pada halaman web. Salah satu penerapan javascript pada
form untuk melakukan validasi terhadap data yang telah dimasukkan. Contoh penerapannya pada
kode program berikut.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Pemrograman platform khusus - javascript#form</title>
5 </head>
6 <body>
7 <form name="ppkForm"
8 onsubmit="return validateForm()">
9 Nama mahasiswa: <input type="text" name="ppkName">
10 <input type="submit" value="submit">
11 </form>
12 <script>
13 function validateForm() {
14 var x = document.forms["ppkForm"]["ppkName"].value;
15 if (x == "") {
16 alert("Nama harus diisi");
17 return false;
18 }
19 else {
20 alert("Nama anda " + x);
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

21 return true;
22 }
23 }
24 </script>
25 </body>
26 </html>

9.4 Canvas
Canvas merupakan elemen HTML untuk menyediakan kemampuan menggambar grafik pada
halaman web menggunakan bantuan javascript. Tag <canvas> hanya sebagai wadah dari grafik
yang akan digambar sedangkan untuk menggambar objeknya tetap diperlukan javascript. Elemen
ini mempunya beberapa fungsi menggambar dari membuat garis, kotak, lingkaran, tulisan, dan
bahkan menambahkan suatu gambar.
Canvas pertama kali diperkenalkan oleh Apple untuk digunakan pada komponen WebKit Mac OS
X pada tahun 2004 untuk memperkuat kemampuan browser safari, hingga akhirnya ditetapkan
sebagai standard teknologi web generasi baru oleh Web Hypertext Application Technology
Working Group (WHATWG). Informasi dukungan dari masing-masing browser terhadap elemen
canvas ditunjukkan pada Gambar 9.4.

Gambar 9.3 Versi browser yang mendukung elemen canvas

Fungsi menggambar jalur direpresentasikan seperti coretan pena pada area canvas, beberap fungsi
yang mendukung untuk menggambar garis terdiri dari moveTo, lineTo, dan stroke. Contoh kode
program untuk menggambar garis ditunjukkan dibagian bawah ini.

1 <!DOCTYPE html>
2 <html>
3 <body>
4 <canvas id="ppkCanvas" width="200" height="100"
5 style="border:1px solid #d3d3d3;">
6 Browser anda tidak mendukung tag canvas HTML5.
7 </canvas>
8 <script>
9 var c = document.getElementById("ppkCanvas");
10 var ctx = c.getContext("2d");
11 ctx.moveTo(0,0);
12 ctx.lineTo(100,50);
13 ctx.stroke();
14 ctx.moveTo(200,0);
15 ctx.lineTo(0,100);
16 ctx.stroke();
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

17 </script>
18 </body>
19 </html>

output dari kode program diatas ditunjukkan pada gambar berikut.

Gambar 9.4 Hasil fungsi menggambar garis

Selain menggambar objek garis, canvas juga memiliki fungsi untuk menggambar objek lingkaran
seperti yang ditunjukkan pada kode program dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <body>
4 <canvas id="ppkCanvas" width="200" height="100"
5 style="border:1px solid #d3d3d3;">
6 Browser anda tidak mendukung tag canvas HTML5.
7 </canvas>
8 <script>
9 var c = document.getElementById("ppkCanvas");
10 var ctx = c.getContext("2d");
11 ctx.beginPath();
12 // Parameter arc(x, y, r, sAngle, eAngle)
13 ctx.arc(100,50,33,0,2*Math.PI);
14 ctx.stroke();
15 </script>
16 </body>
17 </html>

Gambar 9.5 Hasil fungsi menggambar lingkaran


Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

Pada pemanggilan fungsi untuk menggambar lingkaran diatas terdapat lima parameter masukan
yang terdiri dari x, y, r, sAngle, dan eAngle. Dimana x dan y merupakan koordinat lokasi dari inti
lingkaran, r merupakan nilai radius yang menentukan ukuran lingkaran, sedangkan sAngle adalah
titik dimulai menggambar lingkaran dan eAngle adalah titik akhir penggambaran lingkaran.

Fungsi menggambar yang dimiliki oleh canvas tidak hanya terbatas pada fungsi menggambar
objek bangun 2D saja tetapi juga memiliki fungsi untuk menampilkan tulisan maupun gambar.
Kode program untuk memunculkan tulisan dapat dilihat pada bagian dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <body>
4 <canvas id="ppkCanvas" width="400" height="100"
5 style="border:1px solid #d3d3d3;">
6 Browser anda tidak mendukung tag canvas HTML5.
7 </canvas>
8 <script>
9 var c = document.getElementById("ppkCanvas");
10 var ctx = c.getContext("2d");
11 ctx.font = "22px Arial";
12 ctx.fillText("Pemrograman platform khusus",10,50);
13 </script>
14 </body>
15 </html>

Sedangkan fungsi untuk menampikan gambar adalah drawImage yang menerima tiga parameter
masukan yaitu objek gambar, koordinat x, koordinat y. Koda program ditunjukkan pada bagian
dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <body>
4 <p>Contoh gambar:</p>
5 <img id="filkom" src="filkom.png" alt="Fakultas ilmu komputer"
6 width="220" height="277">
7 <p>Area canvas yang akan dimasukkan gambar:</p>
8 <canvas id="ppkCanvas" width="600" height="200"
9 style="border:1px solid #d3d3d3;">
10 Browser anda tidak mendukung tag canvas HTML5.
11 </canvas>
12 <p><button onclick="myCanvas()">Load gambar pada canvas</button></p>
13 <script>
14 function myCanvas() {
15 var c = document.getElementById("ppkCanvas");
16 var ctx = c.getContext("2d");
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

17 var img = document.getElementById("filkom");


18 ctx.drawImage(img,10,10);
19 }
20 </script>
21 </body>
22 </html>

9.5 JSON
Javascript object notation (JSON) merupakan format pertukaran yang ringan, relatif mudah dibaca
serta mudah diterjemahkan dan dibuat oleh komputer. Format ini dibuat berdasarkan bagian dari
javascript menggunakan standard ECMA-262 edisi ke-3 tahun 1999. JSON merupakan format
pertukaran data yang bersifat mandiri hingga dapat digunakan pada platform yang berbeda.

9.5.1 JSON value


Nilai yang dapat dimasukkan pada atribut JSON dapat berupa sebuah string dalam tanda kutip
ganda, atau angka, atau true atau false atau null, atau sebuah objek atau sebuah larik. Struktur-
struktur tersebut dapat disusun bertingkat. Ilustrasi nilai pada JSON ditunjukkan pada Gambar
9.5.

Gambar 9.6 Nilai-nilai pada JSON

9.5.2 JSON object


JSON objek adalah sepasang nama/nilai yang tidak terurut. Objek dimulai dengan “{“ (kurung
kurawal buka) dan diakhiri dengan “}” (kurung kurawal tutup). Setiap nama diikuti dengan
: (titik dua) dan setiap pasangan nama/nilai dipisahkan oleh “,” (koma).
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

Gambar 9.7 Struktur objek pada JSON

Misalkan ada suatu objek JSON dengan nilai {"nim": 101, "nama":"Udin", "umur":17} maka
untuk memunculkan nama dari objek tersebut kode programnya seperti ditunjukkan dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Pemrograman platform khusus</title>
5 </head>
6 <body>
7 <p>PPK javascript - JSON object</p>
8 <p id="demo"></p>
9 <script>
10 var myObject, x;
11 myObject = { "nim": 101, "nama":"Udin", "umur":17};
12 x = myObject.nama;
13 document.getElementById("demo").innerHTML = x;
14 </script>
15 </body>
16 </html>

9.5.3 JSON array


JSON dalam bentuk Array / larik adalah kumpulan nilai yang terurutkan. Larik dimulai dengan
[ (kurung kotak buka) dan diakhiri dengan ] (kurung kotak tutup). Setiap nilai dipisahkan oleh
, (koma). Struktur array pada json diilustrasikan pada Gambar 9.7.

Gambar 9.8 Struktur larik(array) pada JSON

Kode program penggunaan array pada JSON ditunjukkan pada kode program dibawah ini.

1 <!DOCTYPE html>
2 <html>
3 <title>Pemrograman platform khusus</title>
Buku Modul Praktikum
Mata Kuliah Pemrograman Platform Khusus

4 <body>
5 <p>PPK javascript - Demo JSON array/larik</p>
6 <p id="demo"></p>
7 <script>
8 var mhs, x, y;
9 mhs = {
10 "nama":"Udin",
11 "age":17,
12 "kuliah":["pemrograman", "platform", "khusus"]
13 };
14 x = mhs.nama;
15 y = mhs.kuliah[0];
16 document.getElementById("demo").innerHTML =
17 x + " kuliah " + x;
18 </script>
19 </body>
20 </html>

Instruksi Tugas . Kalkulator sederhana

Aplikasi kalkulator sederhana berbasis web dapat dengan mudah dikembangkan


menggunakan bahasa pemrograman javascript. Beberapa fungsi yang ada pada
aplikasi ini meliputi fungsi-fungsi sebagai berikut:

1. Fungsi penambahan
2. Fungsi pengurangan
3. Fungsi perkalian
4. Fungsi pembagian
5. Fungsi sisa bagi

1. Gunakan metode-metode pada DOM untuk mendapatkan nilai-nilai pada


elemen HTML
2. Penataan layout boleh menggunakan tag tabel maupun CSS.

Anda mungkin juga menyukai