MODUL PRAKTIKUM PEMROGRAMAN INTERNET
MODUL PRAKTIKUM
PEMROGRAMAN INTERNET
JAVASCRIPT DAN PENGGUNAAN KANVAS
DISUSUN OLEH :
Astrid Lestari Tungadi, S.Kom
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS ATMA JAYA
MAKASSAR
2014
JAVASCRIPT
JavaScript adalah sebuah bahasa pemrograman berbentuk skrip yang dapat dipakai untuk
mengakses elemen-elemen di dokumen HTML. Oleh karena itu, dimungkinkan untuk
mengendalikan perilaku elemen-elemen HTML.Sebagai contoh, Anda bisa mengatur agar gambar diganti jika sedang disorot dan akan
dikembalikan lagi jika penunjuk mouse meninggalkan gambar. Anda juga bisa membuat
gambar capung melayang-layang mengikuti penujuk mouse. Namun, tentu saja kemampuan
JavaScript jauh lebih ampuh daripada sekedar contoh-contoh tersebut.Perbanyak referensi dan latihan! <script type=”text/javascript”> …… </script> JavaScript (JS) dapat diinterpretasikan melalui 2 cara, yaitu sebagai berikut :
1. Secara Embedding Jika suatu perintah JS akan direpresentasikan secara embeded maka akan terlihat sebagai berikut :
<html> <head>
<title>My Personal Website</title> <script type=”text/javascript”> window.onload = init; function init() { var img = document.getElementById(”Pemandangan”); img.onmouseover = function()
{ img.setAttribute(”src”, ”nama_file1.png”); } img.onmouseout = function() { img.setAttribute(”src”, ”nama_file2.png”); }
} </script>
</head> <body>
<p>Welcome to My Website</p> </body>
</html>
pernyataan yang selalu berakhir dengan ; (titik koma)
2. Secara Eksternal
Jika suatu perintah JS akan direpresentasikan secara eksternal maka akan terlihat sebagai
berikut : File script.jswindow.onload = init; function init() { var img = document.getElementById(”Pemandangan”); img.onmouseover = function() { img.setAttribute(”src”, ”nama_file1.png”); } img.onmouseout = function() { img.setAttribute(”src”, ”nama_file2.png”); }
}
File index.html
<html> <head><title>My Personal Website</title></head> <script type=”text/javascript” src=”script.js”></script> <body>
<img id=”pemandangan” src=”nama_file1.png”> </body>
</html>
diawali dengan $, garis bawah ( _ ), atau huruf (bisa huruf kapital ataupun huruf
kecil) berikutnya bisa berupa $, _, huruf, atau angka simbol unicode yang ditulis dengan format \uXXX juga bisa digunakan model penulisan bentuk format unta biasa digunakan Contoh : namaBelakangSiswa
Format unta ialah huruf kecil digunakan sebagai awalan dan setiap awal kata
dikapitalkan dan digabungkan secara langsung dengan kata sebelumnyaPENGGUNAAN KANVAS
Kanvas merupakan fitur baru yang terdapat pada HTML5. Dengan demikian, Anda tidak
perlu menggunakan file eksternal atau bahkan plugin untuk membuat gambar. Sebuah kanvas
bisa diciptakan dengan kode sederhana, seperti : <canvas height=”300px” width=”500px”></canvas>
Kode sederhana diatas berarti membuat kanvas dengan tinggi 300 piksel dan lebar 500 piksel.
Kanvas sederhana diatas menjadi tidak berarti apa-apa tanpa keberadaan kode JavaScript.
Dengan menggunakan JavaScript dan juga API (Application Programming Interface) yang
disediakan oleh World Wide Web Consortium (W3C), implementasi pada kanvas mudah
dilakukan.
Spesifikasi kanvas dapat dilihat p
1. Membuat Kanvas
<html> <head> <title>Kanvas</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.fillRect(100, 100, 200, 100); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
2. Membuat Kanvas Ditambah Bingkai
<html> <head> <title>Kanvas</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.fillRect(100, 100, 200, 100); }; </script> <style> #id-kanvas
{ border: solid 1px black; } </style> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
Sebelum melangkah lebih jauh dalam membuat gambar di kanvas, ada baiknya Anda
memahami sistem koordinat di kanvas. Gambar 1 menunjukkan sistem koordinat untuk
menyatakan piksel dalam kanvas. x y
Gambar 1. Sistem Koordinat pada Kanvas
Piksel yang terletak di pojok kiri atas dinyatakan dengan (0,0), sedangkan yang ditandai
dengan bullet hitam ialah (2,3) dan (5,2). Secara umum, notasi yang digunakan untuk menyatakan suatu piksel berupa :
(x, y) Dalam hal ini, x menyatakan baris dan y menyatakan kolom. Langkah-langkah dalam pembuatan garis ialah :
1. Pertama-tama, yang harus dilakukan adalah memanggil metode beginPath()pada
konteks yang melakukan render 2D.2. Meletakkan posisi awal garis dengan cara memanggil metode moveTo()
3. Membuat garis dari posisi yang disebutkan dalam moveTo() ke posisi akhir yang
dikehendaki dengan menggunakan lineTo()
4. Apabila berikutnya Anda ingin membuat garis dari posisi akhir yang dihasilkan oleh
lineTo() sebelumnya, menuju ke suatu posisi, Anda bisa memanggil lineTo() lagi
5. Untuk mendapatkan efek tertentu, setelah semua garis sudah dibuat, panggillah metode
closePath()
6. Untuk membuat garis benar-benar ditampilkan di kanvas, panggillah metode stroke().
Metode ini akan membuat gambar di kanvas dalam bentuk garis (tidak diblok) CATATAN
Kanvas menggunakan istilah path dan subpath untuk kepentingan pembuatan garis atau
bahkan bentuk yang kompleks. Path adalah nol, satu, dan sekumpulan subpath.Setiap subpath terdiri dari satu atau beberapa titik, dihubungkan oleh garis lurus atau
lengkung, dan sebuah tanda yang menyatakan subpath sudah ditutup atau belum. Subpath yang hanya berisi sebuah titik akan diabaikan ketika ada proses untuk menorehkan ke kanvas.Dengan menggunakan istilah diatas, perintah moveTo() menciptakan sebuah subpath
dengan nilai yang diberikan pada argumennya.Itulah sebabnya, ketika kemudian terdapat lineTo(), maka titik yang disebutkan dalam
argumen ikut ditambahkan ke dalam subpath dan sebuah garis lurus ditambahkan dari titik yang pertama ke titik yang kedua (yang baru saja ditambahkan).Saat closePath() dijalankan, subpath sekarang ditutup dan subpath baru diciptakan.
beginPath() mengosongkan titik dalam path sekarang. Itulah sebabnya jika Anda
ingin membuat gambar yang tidak terpengaruh oleh titik sebelumnya, beginPath() perlu dipanggil. Hal inilah yang menjadi penting untuk terbiasa menggunakan beginPath() setiap kali ingin membuat sebuah gambar agar tidak terpengaruh oleh keadaan gambar sebelumnya.<html> <head> <title>Segitiga</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.beginPath(); konteks.moveTo(50, 50); konteks.lineTo(400, 100); konteks.lineTo(150, 300); konteks.lineTo(50, 50); konteks.closePath(); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
Dalam membuat kotak, ada tiga metode yang bisa dipakai, yaitu : clearRect() berguna untuk menghapus area persegi panjang.
fillRect() berguna untuk membuat persegi panjang berdasarkan style yang sedang
berlaku. Bawaannya berupa kotak berwarna hitam.strokeRect() berguna untuk membuat persegi panjang, tetapi hanya menggambar
bingkainya.Ketiga metode tersebut menggunakan empat buah argumen (x, y, l, t) yang secara berturut-
turut menyatakan posisi x, posisi y (keduanya menyatakan pojok kiri kotak), lebar, dan
tinggi.<html> <head> <title>Kotak</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.fillRect(60, 60, 200, 80); konteks.strokeRect(210,40, 30, 40); konteks.clearRect(70,70, 100, 60); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
Pembuatan busur, lingkaran, ataupun potongan lingkaran bisa ditangani dengan
menggunakan metode arc(). Argumennya secara berturut-turut berupa posisi x, posisi y
(keduanya menyatakan titik pusat), jari-jari, sudut awal, dan sudut akhir. Perlu diketahui,
nilai yang digunakan untuk sudut bukan dalam derajat, tetapi dalam radian. Hubungan derajat
dan radian ialah radian = n x sudut / 1801. Lingkaran
<html> <head> <title>Arc</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); // Lingkaran 1 konteks.beginPath(); konteks.arc(110, 90, 80, 0, Math.PI * 2, false); konteks.closePath(); konteks.stroke(); // Lingkaran 2 konteks.beginPath(); konteks.arc(330, 90, 80, 0, Math.PI * 2, false); konteks.closePath(); konteks.fill(); // Potongan lingkaran 1 konteks.beginPath(); konteks.arc(220, 200, 70, 0, Math.PI, true); konteks.closePath(); konteks.stroke(); // Potongan lingkaran 2 konteks.beginPath(); konteks.arc(220, 210, 70, 0, Math.PI, false); konteks.closePath(); konteks.stroke(); // Pembuatan busur konteks.beginPath(); konteks.arc(220, 218, 80, 0, Math.PI, false); konteks.stroke(); konteks.closePath(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
2. Lengkungan
<html> <head> <title>Lengkugan</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.beginPath(); konteks.moveTo(20, 30); konteks.arcTo(380, 30, 380, 60, 20); konteks.arcTo(380, 300, 20, 300, 20); konteks.arcTo(0, 300, 20, 30, 20); konteks.arcTo(0, 30, 380, 20, 20); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
3. Pewarnaan menggunakan RGB <html> <head> <title>Warna Garis</title> <script type="text/javascript"> window.onload = init; function init()
{
var kanvas = document.getElementById("id-kanvas");
var konteks = kanvas.getContext("2d"); konteks.beginPath(); konteks.strokeStyle = "rgb(0,0,255)"; konteks.strokeRect(50, 50, 100, 200); konteks.strokeStyle = "rgb(0,255,0)"; konteks.strokeRect(75, 60, 200, 100); konteks.strokeStyle = "rgb(222,0,0)"; konteks.strokeRect(225, 100, 75, 150); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body>4. Tebal Garis <html> <head> <title>Tebal Garis</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.beginPath(); konteks.lineWidth = 5; konteks.strokeStyle = "rgb(0,0,255)"; konteks.strokeRect(50, 50, 100, 200); konteks.strokeStyle = "rgb(0,255,0)"; konteks.strokeRect(75, 60, 200, 100); konteks.lineWidth = 20; konteks.strokeStyle = "rgb(222,0,0)"; konteks.strokeRect(225, 100, 75, 150); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
5. Bentuk Ujung Garis
Bentuk ujung garis bisa diatur melalui atribut lineCap. Nilainya bisa diisi dengan :
“butt” yaitu ujung kotak“round” yaitu ujung agak membulat dan garis akan ditambahkan pada kedua ujung
“square” yaitu ujung kotak dan garis akan ditambahkan pada kedua ujung
<html> <head> <title>Bentuk Ujung Garis</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); // Buat garis vertikal konteks.strokeStyle = "grey"; konteks.moveTo(200, 20); konteks.lineTo(200, 140); konteks.moveTo(400, 20); konteks.lineTo(400, 140); konteks.stroke(); konteks.lineWidth = 20; konteks.strokeStyle = "blue"; // butt konteks.beginPath(); konteks.lineCap = "butt"; konteks.moveTo(200, 40); konteks.lineTo(400, 40); konteks.stroke(); // round konteks.beginPath(); konteks.lineCap = "round"; konteks.moveTo(200, 80); konteks.lineTo(400, 80); konteks.stroke(); // square konteks.beginPath(); konteks.lineCap = "square"; konteks.moveTo(200, 120); konteks.lineTo(400, 120); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
6. Bentuk Pertemuan Dua Garis
Bentuk pertemuan dua garis bisa diatur melalui atribut lineJoin. Nilainya bisa diisi dengan : “bevel” “round” “miter”
<html> <head> <title>Tanda Segitiga</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); // Segitiga 1 konteks.beginPath(); konteks.lineWidth = 20; konteks.lineJoin = "round"; konteks.moveTo(200, 40); konteks.lineTo(300, 240); konteks.lineTo(100, 240); konteks.lineTo(200, 40); konteks.closePath(); konteks.stroke(); // Segitiga 2 konteks.beginPath(); konteks.lineWidth = 20; konteks.lineJoin = "bevel"; konteks.moveTo(430, 40); konteks.lineTo(520, 240); konteks.lineTo(330, 240); konteks.lineTo(430, 40); konteks.closePath(); konteks.stroke(); // Segitiga 3 konteks.beginPath(); konteks.lineWidth = 20; konteks.lineJoin = "miter"; konteks.moveTo(660, 40); konteks.lineTo(750, 240); konteks.lineTo(560, 240); konteks.lineTo(660, 40); konteks.closePath(); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="780"> </canvas> </body> </html>
7. Pewarnaan Suatu Bentuk
<html> <head> <title>Tanda Segitiga</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.beginPath(); konteks.fillStyle = "#ffc821"; konteks.moveTo(200, 40); konteks.lineTo(300, 240); konteks.lineTo(100, 240); konteks.lineTo(200, 40); konteks.fill(); konteks.lineWidth = 20; konteks.lineJoin = "round"; konteks.closePath(); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
8. Gradasi
<html> <head> <title>Pola</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.beginPath(); var gradien = konteks.createLinearGradient( 0, 0, 0, 200); // 200 adalah tinggi tanda segitiga gradien.addColorStop(0, "#ffc821"); gradien.addColorStop(1, "#faf100"); konteks.fillStyle = gradien; konteks.moveTo(200, 40); konteks.lineTo(300, 240); konteks.lineTo(100, 240); konteks.lineTo(200, 40); konteks.fill(); konteks.lineWidth = 20; konteks.lineJoin = "round"; konteks.closePath(); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
9. Warna Kanvas Gradasi
<html>
<title>Mewarnai Kanvas</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); var gradien = konteks.createLinearGradient(0, 0, 0, kanvas.height); gradien.addColorStop(0, "rgb(0,0,0)"); gradien.addColorStop(1, "rgb(255,255,255)"); konteks.fillStyle = gradien; konteks.fillRect(0, 0, kanvas.width, kanvas.height); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
10. Radial Gradasi 2 Warna
<html> <head> <title>Gradasi radial</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); var gradien = konteks.createRadialGradient(238, 50, 10, 238, 50, 200); gradien.addColorStop(0, "#8ED6FF"); // Biru muda gradien.addColorStop(1, "#004CB3"); // Biru tua konteks.fillStyle = gradien; konteks.fillRect(50,50, 400, 200); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500" style="border: solid 1 px black;"> </canvas> </body> </html>
11. Radial Gradasi Lebih Dari 2 Warna
<html> <head> <title>Gradasi radial</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); var gradien = konteks.createRadialGradient(238, 50, 10, 238, 50, 200); gradien.addColorStop(0, "red"); gradien.addColorStop(0.17, "orange"); gradien.addColorStop(0.33, "yellow"); gradien.addColorStop(0.5, "green"); gradien.addColorStop(0.666, "blue"); gradien.addColorStop(1, "violet"); konteks.fillStyle = gradien; konteks.fillRect(50,50, 400, 200); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500" style="border: solid 1 px black;"> </canvas> </body> </html>
12. Bayangan Kanvas menyediakan perintah untuk membuat bayangan. Ada empat properti yang disediakan yaitu sebagai berikut :
Properti Keterangan shadowColor berisi warna untuk bayangan shadowOffsetX berisi nilai ofset bayangan pada arah sumbu x shadowOffsetY berisi nilai ofset bayangan pada arah sumbu y berisi nilai yang menyatakan level pengaburan bayangan shadowBlur
a. bayangan1.html
<html> <head> <title>Bayangan</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.shadowOffsetX = 5; konteks.shadowOffsetY = 10; konteks.shadowBlur = 75; konteks.shadowColor = "red"; konteks.fillRect(50, 50, 200, 150); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
b. bayangan2.html
<html> <head> <title>Bayangan</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.shadowBlur = 75; konteks.shadowColor = "red"; konteks.fillRect(50, 50, 200, 150); konteks.stroke(); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
c. bayangan3.html
<html> <head> <title>Bayangan</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.shadowOffsetX = -45; konteks.shadowBlur = 75; konteks.shadowColor = "red"; konteks.fillRect(50, 50, 200, 150);
}; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
d. bayangan4.html
<html> <head> <title>Tulisan dengan Bayangan</title> <script type="text/javascript"> window.onload = init; function init()
{ var kanvas = document.getElementById("id-kanvas"); var konteks = kanvas.getContext("2d"); konteks.shadowOffsetX = 5; konteks.shadowOffsetY = 10; konteks.shadowBlur = 75; konteks.shadowColor = "purple"; konteks.font = "50pt Arial"; konteks.fillText("Selamat Belajar", 0, 60); }; </script> </head> <body> <canvas id="id-kanvas" height="300" width="500"> </canvas> </body> </html>
TUGAS
1. Buatlah handphone sederhana menggunakan HTML5 + JavaScript + CSS
2. Buatlah kalkulator sederhana menggunakan HTML5 + JavaScript + CSS
3. Buatlah gambar packman menggunakan prinsip JavaScript dan kanvas pada fitur baru
HTML5