Selamat bahagia sahabat-sahabat kiranya kita harus selalau bersyukur atas nikmat yang kita terima karena kita sampai saat ini masih bisa menuntut ilmu. yu ah kita simak aja langsung materinya sahabat
BAB VI
STYLE HALAMAN WEB DAN
CLIENT SIDE SCRIPTING
KOMPETENSI INTI
3. Memahami, menerapkan, menganalisis,
dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar,
dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat
Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks
pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja,
warga masyarakat nasional, regional, dan internasional.
4. Melaksanakan tugas spesifik dengan
menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta
memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak.
Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur
sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar,
mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri,
kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan
dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di
bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan,
meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret
terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu
melaksanakan tugas spesifik di bawah pengawasan langsung.
KOMPETENSI DASAR
3.9 Menerapkan client side scripting pada
halaman web interaktif
4.9 Membuat halaman web interaktif menggunakan
client side scripting
APERSEPSI
Mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan bahasa pemrograman. Pada umumnya, CSS dipakai untuk memformat tampilan
halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan
ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran borders. warna
border, warna hyperlink, warna mouse over, spasi antarparagraf, spasi
antarteks, margin kiri, kanan, atas, bawah, dan parameter lainnya, Dalam hal
ini, layout berkaitan dengan tata cara
penataan elemen-elemen dalam sebuah halaman dengan benar. Dengan desain
halaman web yang baik dan tepat akan membuat pengunjung (visitor) merasa nyaman
dengan tampilan (layout) halaman web tersebut dan tetap dapat fokus pada isi
(content).
MENGAMATI
Pelajarilah buku teks maupun sumber
lain tentang style halaman web dan client side scripting dengan baik dan benar!
AYO PAHAMI
CLIENT SIDE SCRIPTING PADA HALAMAN
WEB INTERAKTIF
Bahasa pemrograman
client side adalah bahasa yang berjalan pada client atau komputer user itu
sendiri, di mana sebuah website bahasa client side akan berjalan di browser
masing-masing komputer. Dengan demikian, bahasa pemprograman client side tidak
membutuhkan web server untuk menjalankannya.
1. Perintah-Perintah Dasar dalam
Aplikasi Client Side Programming
Penulisan
kode Javascript di HTML dapat dilakukan dengan beberapa cara Embed (ditempel
langsung pada HTML), Inline (penulisan kode pada atribut), dan Eksternal
(ditulis terpisah dengan file HTML).
a.
Penulisan
Kode Javascript dengan Embed
Pada dasarnya, tag <script> digunakan untuk menempelkan
(embed) kode Javascript pada HTML, Tag ini dapat ditulis di alam tag
<head> dan <body>. Kode penulisanya diuraikan sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar
Javascript dari nol</title>
<script>
// ini adalah penulisan
kode javascript
// di dalam tag
<Head>
console.log("Hello
JS dari HEAD");
</script>
</head>
<body>
<p>Tutorial Javascript
untuk pemula</p>
<script>
// ini adalah penulisan
kode javascript
// di dalam tag
<body>
console.log("Hello
JS dari BODY");
</script>
</body>
</html>
b.
Penulisan
Kode Javascript Inline
Metode ini biasanya digunakan untuk memanggil suatu fungsi
pada event tertentu dengan menulis kode Javascript di dalam atribut HTML.
c.
Penulisan
Kode Javascript Eksternal
Cara ini paling sering digunakan pada proyek-proyek besar
karena kode akan lebih mudah dirawat.
2. Program “Hello World” dengan JavaScript /VBscript
Tingkat
kesulitan pembuatan aplikasi HTML bergantung pada kompleksitas pembuatan
aplikasinya. Untuk membuat aplikasi dengan HTML sangat mudah, bisa membuatnya
secara langsung dengan editor teks (berupa kode), ataupun menggunakan
Dreamweaver dengan mode Design.
a.
Buka
editor teks (misalnya Notepad++) dan tulis kode seperti di bawah ini, laiu
disimpan dengan nama HELLOWORLD.HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello,
World!</title>
<style
type="text/css">
h2 {color: olive;
border-bottom: 3px solid black;}
</style>
<script>
function validasi(){
if
(fom.nama.value=="") {
alert("Silahkan
masukan nama Anda ....!");
}else{
alert("Hai,
"+fom.nama.value+"! Bagaimana Kabarmu?");
}
}
</script>
</head>
<body>
<h1>Hello, World! </h1>
<h2>Masukan nama anda disini!</h2>
<form name="fom">
<table>
<tr>
<td>Nama</td><td><input
type="text" name="nama" length="40"
maxlength="40"></td>
</tr>
<tr>
<td><input
type="button" name="masuk" value="MASUK!"
onclick="validasi();"></td><td><input
type="reset" value="HAPUS!"></td>
</tr>
</table>
</form>
</body>
</html>
b. Tes file HTML tersebut dengan
membukanya pada browser da hasilnya akan terlihat sebagai berikut.
Berikut penjelasan tiap-tiap bagian
kode.
1) Tag adalah
bagian header, berisi judul, style CSS, dan kode JavaScript.
2)
Tag
<TITLE> adalah elemen judul, yang ditampilkan di Title Bar pada browser
Anda.
3)
Tag
<style> adalah elemen format
style berupa kode css.
4)
Tag
<script> adalah elemen kode JavaScript.
5)
Tag
<BODY> adalah elemen "tubuh" HTML yang isinya ditampilkan di
browser.
6)
Tag
<h2> adalah style header (biasanya untuk judul), tetapi stylenya dapat
di-override dengan style CSS yang telah didefinisikan seperti sebelumnya.
7)
Tag
<form> adalah elemen form yang biasa digunakan untuk mengisi data dari
input pengguna.
8)
Pada
bagian form tersebut, terdapat button "Submit" yang akan mensubmisi
masukan. Action yang dijalankan adalah fungsi yang telah didefinisikan di kode
JavaScript.
MENGASOSIASIKAN DAN MENGOMUNIKASIKAN
§ Uraikan kembali informasi yang
diperoleh tentang masalah perintah-perintah dasar dalam aplikasi Client Side
Programming terutama dalam penulisan kode Javascript dengan Embed!
§ Presentasikan kesimpulan masalah
Program "Hello World" dengan Javascript/VBscript terutama tingkat
kesulitan pembuatan aplikasi HTML!
INFO
Sejarah dan Asal Usul 'Hello World'
Siapa yang tidak kenal
dengan program Hello World? Sebuah program yang paling sederhana di dunia.
Fungsi utama dari program ini adalah menampilkan pesan 'hello world' ke layar. Hampir di
setiap bahasa pernrograman menggunakan program
Hello World untuk perkenalan pertama. Namun, tidak banyak yang tahu, kapan
program ini pertama kali dibuat? Siapa yang membuatnya dan kenapa harus Hello
World?
Orang yang pertama
kali menulis program Hello World adalah Brian Kernighan. Ketika itu, beliau
menulis dokumentasi untuk bahasa pemrograman BCPL (Basic Combined Programming
Language) dan memberikan contoh program Hello World
RANGKUMAN
1. Setiap halaman memiliki posisi dan
kesamaan tampilan (layout), yang berbeda
hanya isinya (content).
2. Cara kerja FRAMESET sama seperti cara
kerja tag TABLE, di mana tag TABLE
digunakan untuk membuat halaman dokumen HTML menjadi beberapa bagian kolom dan baris.
3. TAG DIV tidak dapat berdiri sendiri
dalam penggunaannya, di mana TAG DIV
harus disandingkan dengan CSS supaya dapat menghasilkan bentuk design layout yang lebih menarik.
4. Tampilan sebuah form akan lebih
terlihat menarik apabila diterapkan CSS di
dalamnya. Style CSS dapat digunakan di berbagai komponen input di dalam
form. Penggunaan style CSS akan mengurangi beban halaman dan konsumsi
bandwidth.
5. Contoh dari client side script ini,
antara lain HTML, XHTML, CSS, JavaScript, XML, dan JQUERY.
Assessmen !
Klik Link Berikut Ini
.png)
Tidak ada komentar:
Posting Komentar
Thank you for visiting Edu High School. This comment is an Auto Answer from our system please wait if your comment needs to be replied to urgently.
Greetings from us Edu High School.