Pengenalan Javascript

MODUL KULIAH
PROGRAM KULIAH KARYAWAN & PROFESIONAL

STTI ITECH
Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Semester
Kelas PKKP
Dosen Jefri Rahmadian M.Kom
Pertemuan : 10 (sembilan) Waktu : Sabtu,....... 2012
Modul 10 (sembilan)
Topik Javascript
Sub Topik Pengenalan Javascrip
Materi  Dasar-dasar javascript

 Dasar Pemrograman Javascript
 Contoh penggunaan Javascript
Tujuan Mahasiswa memahami dan mengetahui cara penulisan dengan
javascript untuk fungsi aplikasi berbasis web dan dapat
menerapkan javascript pada aplikasi berbasis web
Sekilas tentang JavaScript
Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi
klien.
Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas.
Sebagai
contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-
masukan pada formulir sebelum formulir dikirimkan ke server.
Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript
diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
Struktur JavaScript
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak
mengenali JavaScript maka browser akan memperlakukannya sebagai komentar
sehingga
tidak ditampilkan pada jendela browser.
JavaScript sebagai bahasa berorientasi pada obyek

Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna
mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu
tindakan
terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo”)
Letak JavaScript dalam HTML

Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body
 DASAR-DASAR JAVASCRIPT
 Pemakaian alert sebagai property window
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
</BODY>
</HTML>
 Pemakaian metode dalam objek.

<HTML>
<HEAD>
<TITLE>Skrip JavaScript</TITLE>
</HEAD>
<BODY>
Percobaan memakai JavaScript:<BR>

</SCRIPT>
</BODY>
</HTML>
 Pemakaian prompt
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
 DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT

 Operasi dasar aritmatika
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function test (val1,val2)
{
document.write("<br>"+"Perkalian : val1*val2 "+"<br>")
document.write(val1*val2)
document.write("<br>"+"Pembagian : val1/val2 "+"<br>")
document.write(val1/val2)
document.write("<br>"+"Penjumlahan : val1+val2 "+"<br>")
document.write(val1+val2)
document.write("<br>"+"Pengurangan : val1-val2 "+"<br>")
document.write(val1-val2)
document.write("<br>"+"Modulus : val1%val2 "+"<br>")
document.write(val1%val2)
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="arithmetic"
onclick=test(9,4)>
</BODY>
</HTML>
 Operasi relational
<HTML>
<HEAD>
</HEAD>
function test () {
val1=window.prompt("Nilai I :")
val2=window.prompt("Nilai II :")
document.write("<br>"+"val1==val2"+"<br>")
document.write(val1==val2)
document.write("<br>"+"val1!=val2"+"<br>")
document.write(val1!=val2)
document.write("<br>"+"val1&gtval2"+"<br>")
document.write(val1>val2)
document.write("<br>"+"val1&ltval2"+"<br>")
document.write(val1<val2) }
</SCRIPT>
<BODY>
<input type="button" name="button1" value="relational"
onclick=test()>
</BODY>
</HTML>
 Seleksi kondisi (if..else)

<HTML>
<HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
 Penggunaan operator switch untuk seleksi kondisi

<HTML>
<HEAD>
</HEAD>
function test ()
{
val1=window.prompt("Input Nilai (1-5):")
switch (val1)
{
case "1" :
document.write("bilangan satu")
break
case "2" :
document.write("bilangan dua")
break
case "3" :
document.write("bilangan tiga")
break
case "4" :
document.write("bilangan empat")
break
case "5" :
document.write("bilangan lima")
break
default :
document.write("bilangan lainnya")
}
}
</SCRIPT>
<BODY>
<input type="button" name="button1" value="switch"
onclick=test()>
</BODY>
</HTML>
 Pemakaian looping < for >
<HTML>
<HEAD>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
 Pemakaian looping < do..while >

<HTML>
<HEAD>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
 Pemakaian looping < while >
<HTML>
<HEAD>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
 PEMBUATAN FORM
 Form input :
<html>
<head> </head>
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1"
onclick=test()>
</p>
</form>
</body>
</html>
 Form button :
<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>

</SCRIPT>
<H1>TES</H1>
<FORM>
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Hijau"
onClick = "ubahWarnaLB('GREEN')">
VALUE = "Latar Belakang Putih"
onClick = "ubahWarnaLB('WHITE')">
VALUE = "Teks Kuning"
onClick = "ubahWarnaLD('YELLOW')">
VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
</FORM>

</SCRIPT>
</BODY>
</HTML>
Contoh Penggunaan JavaScript didalam Aplikasi Web

 Menambahkan Tanggal
 Pertama kita klik pada bagian dari layout dimana kita akan
menempatkan script tanggal, setelah itu klik kanan pada bagian tersebut
dan pilih Quick Tag editor..
Dan akan muncul perintah berikutnya

 Dan setelah muncul perintah seperti gambar diatas Paste script
javascript tanggal tersebut (sebelumnya terlebih dahulu tanda <>
dihapus)..
 Setelah selesai lihat tampilan pada browser dan akan memunculkan
seperti gambar dibawah
 Membuat Kalender
 klik pada bagian dari layout dimana kita akan menempatkan script
tanggal, setelah itu klik kanan pada bagian tersebut dan pilih Quick Tag
editor..
Dan akan muncul perintah berikutnya
 Dan setelah muncul perintah seperti gambar diatas Paste script

javascript Kalender tersebut (sebelumnya terlebih dahulu tanda <>
dihapus).
 Setelah selesai lihat tampilan pada browser dan akan memunculkan
 Membuat Background scroll
 Untuk membuat background yang dapat scroll secara otomatis,
terlebih dahulu kita harus menambahkan beackround dalam bentuk
image
 Masukan image dengan pengaturan klik page properties pada panel
properties
 Dan kemudian ubah Background image dengan gambar yang dipilih,

 Setelah background tersedia kemudian kita masukan script deng

melakukan seleksi pada bagian luar dari layout tepatnya pada
background
 Kemudian klik kanan pada bagian tersebut dan pilih Quick Tag editor..
 Setelah selesai lihat tampilan pada browser

Pengenalan Javascript

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pengenalan Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL KULIAH

PROGRAM KULIAH KARYAWAN & PROFESIONAL

Mata kuliah Aplikasi Berbasis Web ( 3 sks )

Dosen Jefri Rahmadian M.Kom

Pertemuan : 10 (sembilan) Waktu : Sabtu,....... 2012

Sub Topik Pengenalan Javascrip

Materi  Dasar-dasar javascript

JavaScript sebagai bahasa berorientasi pada obyek

Letak JavaScript dalam HTML

 Pemakaian metode dalam objek.

 DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT

 Seleksi kondisi (if..else)

 Penggunaan operator switch untuk seleksi kondisi

 Pemakaian looping < do..while >

Contoh Penggunaan JavaScript didalam Aplikasi Web

Dan akan muncul perintah berikutnya

 Dan setelah muncul perintah seperti gambar diatas Paste script

 Dan kemudian ubah Background image dengan gambar yang dipilih,

 Setelah background tersedia kemudian kita masukan script deng

 Setelah selesai lihat tampilan pada browser

Anda mungkin juga menyukai