1 Jurusan Teknik Informatika Sekolah Tinggi Teknologi Telkom YFA S1/IT/WE/E2/0806 CS4713 Cascading Style Sheet (CSS) dan JavaScript2 Apa Itu CSS? Casc...
YFA Jurusan Teknik Informatika Sekolah Tinggi Teknologi Telkom
Cascading Style Sheet (CSS) dan JavaScript
S1/IT/WE/E2/0806 CS4713
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.
YFA: Web Engineering
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.
YFA: Web Engineering
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.
YFA: Web Engineering
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> ... di atas tag
Linked Style Sheet Seperti
halnya embedded style sheet, hanya saja pendefinisian CSS dalam tag <STYLE> ... disimpan terpisah dalam file yang lain.
YFA: Web Engineering
Inline Style Sheet
Atribut CSS hanya berpengaruh pada tag HTML yang bersangkutan dan tidak mempengaruhi tag-tag HTML yang lainnya. Contoh:
Contoh tag P tanpa mengggunakan CSS
Contoh penggunaan CSS untuk memformat ukuran font menjadi 30 point
Contoh penggunaan CSS untuk memformat ukuran font menjadi 12 point dan berwarna merah
YFA: Web Engineering
Embedded Style Sheet
Atribut-atribut CSS yang telah didefinisikan dalam tag <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;} Bagian body HTML diformat memiliki margin 1 inch.
Contoh tag H1 dengan CSS
Contoh tag P dengan beberapa format dengan menggunakan CSS
YFA: Web Engineering
Linked Style Sheet
Atribut-atribut CSS yang telah didefinisikan dalam tag <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> ... disimpan dalam file tertentu, misal dengan nama style.css.
Penggunaan CSS dalam sebuah file HTML, dipanggil dengan tag yang dituliskan pada tag :
YFA: Web Engineering
Contoh CSS – 1
Contoh Satu – CSS
CSS memungkinkan desain halaman web yang lebih menarik.
CSS memungkinkan desain halaman web yang lebih baik.
Pilihan atribut CSS cukup beragam.
YFA: Web Engineering
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).
YFA: Web Engineering
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. YFA: Web Engineering
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 ... 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"> YFA: Web Engineering
Metode Tag <SCRIPT>
JavaScript merupakan bahasa yang case sensitive. Format JavaScript: <SCRIPT language="JavaScript"> statement JavaScript
Browser atau navigator versi lama, tidak mengenal tag tersebut dan akan melewatkannya untuk dibaca. Oleh sebab itu, tambahkan tag komentar: <SCRIPT language="JavaScript">
YFA: Web Engineering
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 */
YFA: Web Engineering
Contoh JavaScript – 1 <SCRIPT language="JavaScript"> alert("Selamat Datang di Pemrograman JavaScript"); document.write("
Rekayasa Aplikasi Internet
"); document.write("
Contoh Pertama JavaScript
");
YFA: Web Engineering
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).
YFA: Web Engineering
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
YFA: Web Engineering
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.
YFA: Web Engineering
Contoh JavaScript – 2 <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"} } YFA: Web Engineering
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.
YFA: Web Engineering
Pendeklarasian Variabel
Eksplisit: dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel tersebut. Contoh:
Implisit: dengan menuliskan secara langsung nama dari variabel dan diikuti dnegan nilai dari variabel tersebut. Contoh:
var test = “Hallo”
test = “Hallo”
Web browser versi lama seringkali tidak mengenali pendeklarasian variabel secara implisit, maka disarankan untuk menggunakan cara eksplisit dalam pendeklarasian variabel pada JavaScript.
YFA: Web Engineering
Contoh JavaScript – 3 <SCRIPT language="JavaScript"> var Variabel1; var Variabel2 = 3; Variabel1 = 2; document.write(Variabel1*Variabel2);
YFA: Web Engineering
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. YFA: Web Engineering
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," "); document.write("Dua kali dari ",b," adalah", PerkalianDengan2(b)," "); document.write("Nilai dari a setelah fungsi dijalankan adalah ",a);
YFA: Web Engineering
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," "); document.write("Dua kali dari ",b," adalah", PerkalianDengan2(b)," "); document.write("Nilai dari a setelah fungsi dijalankan adalah ",a); Bandingkan hasil/output antara contoh 4 dan contoh 5! YFA: Web Engineering
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.
YFA: Web Engineering
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");
YFA: Web Engineering
Contoh JavaScript – 6 <SCRIPT language="JavaScript"> var ContohTabel = ["Harimau","Gajah","Singa","Jerapah"]; document.write("Elemen ketiga dari tabel adalah " +ContohTabel[2]);
