Jurusan Teknik Informatika Sekolah Tinggi Teknologi Telkom YFA S1/IT/WE/E2/0806 CS4713 Cascading Style Sheet (CSS) dan JavaScript
Apa Itu CSS? Cascading Style Sheet (CSS) merupakan suatu fasilitas yang tersedia dalam pemrograman HTML untuk pengaturan desain, gaya layout/tampilan halaman web menjadi lebih baik. CSS menyediakan mekanisme sederhana style sheet yang memungkinkan desainer atau programmer web untuk menempatkan style; misalnya huruf, warna, spasi maupun margin ke dalam dokumen HTML. Fungsi CSS telah terintegrasi pada web browser Internet Explorer mulai versi 3.0.
Keunggulan CSS CSS memungkinkan pengembang web untuk mengendalikan gaya dan layout banyak halaman web secara sekaligus. Sebelum ada CSS, pengubahan elemen yang terdapat pada banyak halaman web harus dilakukan per halaman. CSS bekerja seperti halnya template, yang dapat dipilih oleh pengembang web untuk diaplikasikan ke halaman-halaman web yang diinginkan.
DHTML Dynamic HTML (DHTML) yaitu HTML dengan tambahan formatformat khusus dan script untuk membuat halaman web menjadi lebih interaktif/menarik. Fitur DHTML ini mulai didukung oleh web browser Internet Explorer 4.0 maupun Netscape Communicator 4.0.
Model Penggunaan CSS Inline Style Sheet Pendefinisian CSS langsung pada tag HTML yang bersangkutan, cara penulisannya dengan menambahkan atribut STYLE=... Embedded Style Sheet CSS didefinisikan terlebih dahulu dalam tag <STYLE>... </STYLE> di atas tag <BODY> Linked Style Sheet Seperti halnya embedded style sheet, hanya saja pendefinisian CSS dalam tag <STYLE>... </STYLE> disimpan terpisah dalam file yang lain.
Inline Style Sheet Atribut CSS hanya berpengaruh pada tag HTML yang bersangkutan dan tidak mempengaruhi tag-tag HTML yang lainnya. Contoh: <body> <p> Contoh tag P tanpa mengggunakan CSS </p> <p style="font-size:30pt"> Contoh penggunaan CSS untuk memformat ukuran font menjadi 30 point </p> <p style="font-size:12pt; color:#ff0000"> Contoh penggunaan CSS untuk memformat ukuran font menjadi 12 point dan berwarna merah </p> </body>
Embedded Style Sheet Atribut-atribut CSS yang telah didefinisikan dalam tag <STYLE>... </STYLE> dapat langsung digunakan dalam tag-tag HTML dan dapat digunakan berulang-ulang. Contoh: <style> body {margin:1in} H1 {font-size:30pt; color:#00aa00;} p {font-size:14pt; font-family:arial; wordspacing:1cm;} </style> <body> Bagian body HTML diformat memiliki margin 1 inch. <H1> Contoh tag H1 dengan CSS </H1> <p> Contoh tag P dengan beberapa format dengan menggunakan CSS </p> </body>
Linked Style Sheet Atribut-atribut CSS yang telah didefinisikan dalam tag <STYLE>... </STYLE> disimpan dalam file yang terpisah, sehingga dapat digunakan berulang-ulang pada file-file HTML yang memerlukan CSS tersebut untuk membentuk keseragaman style. Contoh: Seperti dalam contoh Embedded Style Sheet, seluruh atribut dalam tag <STYLE>... </STYLE> disimpan dalam file tertentu, misal dengan nama style.css. Penggunaan CSS dalam sebuah file HTML, dipanggil dengan tag <link> yang dituliskan pada tag <HEAD>: <head> <link rel=stylesheet href="style.css" type="text/css"> </head>
Contoh CSS 1 <body style="background:#cccccc; font-size:16pt; fontfamily:arial; text-align=center; border:30px solid FF0066;"> <H1 align="center" style="background:#00eeaa; font:40pt courier new; font-style:italic; font-weight:bold; border:thick dashed blue"> Contoh Satu CSS </H1> CSS memungkinkan desain halaman web yang lebih menarik.<br> <p style="line-height=10cm;letter-spacing:2mm"> Cascading Style Sheet </p> </body>
Contoh CSS 2 <style type="text/css"> body { margin:25mm; font-family:arial; font-size:16pt; color:#0099cc; background:black; } H1 { font-size:30pt; color:#00aa00; font-style:italic; word-spacing:20px; line-height:10cm; }
Contoh CSS 2 (lanjutan) p { font-family:verdana; color:rgb(255,175,0); letter-spacing:5mm; } </style> <body> <H1> Contoh Dua - CSS</H1> CSS memungkinkan desain halaman web yang lebih baik. <p> Pilihan atribut CSS cukup beragam. </p> </body>
Apa Itu JavaScript? JavaScript adalah scripting yang dikembangkan oleh Sun Microsystem (pengembang bahasa pemrograman Java) dan Netscape, yang digunakan untuk membuat halaman-halaman web lebih interaktif. JavaScript mulanya diperkenalkan oleh Netscape pada tahun 1995 dengan nama LiveScript. JavaScript bergantung pada web browser yang mengakses halaman web yang berisi script dari JavaScript dalam dokumen HTML. JavaScript tidak memerlukan kompiler untuk menjalankannya (pada kenyataannya kompiler JavaScript sendiri sudah termasuk dalam web browser).
Perbedaan JavaScript dan Java JavaScript: Bahasa yang diinterpretasikan langsung oleh web browser (client). Kode terintegrasi dalam dokumen HTML. Berbasis obyek, menggunakan obyek built-in, obyek extensible, tetapi tanpa kelas dan inheritance. Java: Bahasa yang setengah terkompilasi, memerlukan Java Virtual Machine (JVM) untuk menerjemahkannya. Kompilasi dalam bytecode dari server, dieksekusi pada client. Kode terpisah dari dokumen HTML (berupa applet), diakses pada saat membuka dokumen HTML. Berorientasi obyek, mengandung applet pada kelas obyek dengan inheritance.
Metode Penggunaan JavaScript Tag <SCRIPT> JavaScript baru dijalankan setelah proses pemanggilan halaman/dokumen HTML selesai sepenuhnya. Kasus dimana pemanggilan suatu fungsi JavaScript yang terjadi sebelum proses pemanggilan statement/kode JavaScript selesai dilakukan oleh web browser, maka akan muncul pesan kesalahan (error). Solusi: letak tag <SCRIPT> di dalam tag <HEAD>... </HEAD> dokumen HTML. File eksternal Statement/kode JavaScript disimpan terpisah dalam file yang lain, kemudian file tersebut dipanggil dari dokumen HTML dengan tag: <SCRIPT language="javascript" src="file.js"> </SCRIPT>
Metode Tag <SCRIPT> JavaScript merupakan bahasa yang case sensitive. Format JavaScript: <SCRIPT language="javascript"> statement JavaScript </SCRIPT> Browser atau navigator versi lama, tidak mengenal tag tersebut dan akan melewatkannya untuk dibaca. Oleh sebab itu, tambahkan tag komentar: <SCRIPT language="javascript"> <!-- statement JavaScript //--> </SCRIPT>
Komentar dalam JavaScript Penulisan komentar dalam JavaScript menggunakan cara yang sama dengan aturan pada bahasa C/C++ maupun Java. Komentar satu baris: // Komentar diletakkan setelah tanda tersebut atau untuk komentar dalam beberapa baris: /* Semua baris antara tanda tersebut, dianggap sebagai komentar, dan tidak akan dieksekusi */
Contoh JavaScript 1 <SCRIPT language="javascript"> alert("selamat Datang di Pemrograman JavaScript"); document.write("<h1>rekayasa Aplikasi Internet</H1>"); document.write("<p><b>contoh Pertama JavaScript</b></p><br>"); </SCRIPT>
Obyek dalam JavaScript JavaScript memperlakukan elemen-elemen yang tampil dalam jendela web browser sebagai suatu obyek, artinya: Elemen-elemen tersebut diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa mengetahui dimana letak/lokasi obyek itu sebesarnya. Elemen-elemen tersebut diasosiasikan dengan kondisi atau sifatsifat khusus (properti).
Obyek dalam JavaScript (lanjutan) Kampus Gedung Ruang Kelas Mahasiswa Kucing Gudang Atap Kucing Berdasarkan hirarki di atas, contoh pernyataan kucing yang berada di dalam ruang kelas dapat dituliskan: Kampus.Gedung.Ruang Kelas.Kucing Kucing yang berada di atas atap gudang: Kampus.Gudang.Atap.Kucing
Obyek dalam Web Browser JavaScript membagi halaman web browser dalam berbagai obyek, dengan tujuan untuk memudahkan kita mengakses salah satu dari komponen tersebut. Hirarki yang digunakan yaitu: Obyek paling besar ialah obyek jendela (window) dari web browser. Di dalam obyek jendela, terdapat satu obyek yang ditampilkan dalam bentuk halaman, disebut sebagai obyek dokumen (document). Halaman tersebut berisi banyak obyek sepertii text, image dan lain sebagainya.
Contoh JavaScript 2 <form name="form1"> <br> <input type="checkbox" name="check_box" onclick="modiffield(); return true;"> <br> <input type="text" name="text_field" value="test JavaScript" size=24> </form> <SCRIPT language="javascript"> function ModifField() { if (document.forms["form1"].check_box.checked) {document.forms["form1"].text_field.value="checkbox Dipilih"} else {document.forms["form1"].text_field.value="checkbox Tidak Dipilih"} } </SCRIPT>
Variabel dalam JavaScript Variabel merupakan suatu obyek yang berisikan data, dapat dimodifikasi selama pengeksekusian program. Aturan pemberian nama variabel dalam JavaScript: Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter _. Nama variabel dapat terdiri dari huruf-huruf, angka-angka atau karakter _ serta &, tidak memperbolehkan penggunaan spasi kosong. Nama variabel tidak boleh memakai nama-nama kode yang telah digunakan oleh JavaScript. JavaScript menggunakan sistem case sensitive yang memberdakan variabel dengan huruf besar dan kecil.
Pendeklarasian Variabel Eksplisit: dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel tersebut. Contoh: var test = Hallo Implisit: dengan menuliskan secara langsung nama dari variabel dan diikuti dnegan nilai dari variabel tersebut. Contoh: test = Hallo Web browser versi lama seringkali tidak mengenali pendeklarasian variabel secara implisit, maka disarankan untuk menggunakan cara eksplisit dalam pendeklarasian variabel pada JavaScript.
Contoh JavaScript 3 <SCRIPT language="javascript"> var Variabel1; var Variabel2 = 3; Variabel1 = 2; document.write(variabel1*variabel2); </SCRIPT>
Variabel Global dan Lokal Jika pendeklarasian variabel dilakukan dengan cara implisit, maka variabel tersebut dapat diakses dari seluruh bagian program (semua fungsi dalam program dapat memanggil dan menggunakan variabel ini). Variabel ini disebut sebagai variabel global. Jila pendeklarasian variabel dilakukan dengan cara eksplisit, maka kemungkinan pengaksesan variabel tersebut bergantung pada lokasi penempatan variabel. Jika dideklarasikan pada awal script program, artinya sebelum pendeklarasian semua fungsi, maka variabel ini menjadi variabel global. Jika dideklarasikan di dalam suatu fungsi tertentu, maka variabel ini hanya dapat diakses dalam fungsi tersebut, dan disebut sebagai variabel lokal.
Contoh JavaScript 4 <SCRIPT language="javascript"> var a = 10; var b = 4; function PerkalianDengan2(b) { var a = b * 2; return a; } document.write("nilai awal dari a adalah ",a,"<br>"); document.write("dua kali dari ",b," adalah", PerkalianDengan2(b),"<br>"); document.write("nilai dari a setelah fungsi dijalankan adalah ",a); </SCRIPT>
Contoh JavaScript 5 <SCRIPT language="javascript"> var a = 10; var b = 4; function PerkalianDengan2(b) { a = b * 2; return a; } document.write("nilai awal dari a adalah ",a,"<br>"); document.write("dua kali dari ",b," adalah", PerkalianDengan2(b),"<br>"); document.write("nilai dari a setelah fungsi dijalankan adalah ",a); </SCRIPT> Bandingkan hasil/output antara contoh 4 dan contoh 5!
Tipe Data Variabel JavaScript hanya dapat memanipulasi empat jenis data, yaitu: Bilangan: bulat atau desimal, yang disebut sebagai integer atau float. Kata (kumpulan huruf), yang disebut sebagai string. Boolean: suatu variabel yang memiliki dua nilai (true atau false) dan berfungsi untuk memeriksa suatu kondisi. Null: suatu kata khusus (termasuk keyword juga) untuk menjelaskan bahwa tidak ada data di dalamnya.
Tabel JavaScript memungkinkan untuk menyimpan himpunan/grup data dalam suatu variabel khusus yang disebut tabel. Cara pembuatan tabel dalam JavaScript: var ContohTabel = ["Harimau","Gajah","Singa","Jerapah"]; atau: var ContohTabel = new Array("Harimau","Gajah","Singa","Jerapah");
Contoh JavaScript 6 <SCRIPT language="javascript"> var ContohTabel = ["Harimau","Gajah","Singa","Jerapah"]; document.write("elemen ketiga dari tabel adalah " +ContohTabel[2]); </SCRIPT>
Contoh JavaScript 7 <body onload="window.defaultstatus='tampilkan Tulisan pada Status Bar Browser'"> <p> Contoh link dengan menampilkan pesan pada status bar browser:<br> <a href="link.html" onmouseover="window.status='klik ke Halaman Selanjutnya'; return true"> Contoh Link dengan JavaScript </a> <p> Contoh link dengan menampilkan pesan pada kotak dialog:<br> <a href="link.html" onmouseover="window.alert('klik ke Halaman Selanjutnya')"> Contoh Link dengan JavaScript </a> </body>
Rekayasa Aplikasi Internet: CSS dan JavaScript YFA Yanuar Firdaus A.W, ST., MT. August 2006 http://www.yanuar.net yanuar@stttelkom.ac.id +62 888 275 1300