JAVA SCRIPT
JavaScript
adalah sebuah bahasa script yang dicantumkan pada sebuah halaman web
dan dijalankan pada browser web. JavaScript adalah nama implementasi
Netscape Communications Corporation untuk ECMAScript standar, suatu
bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe.
Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai
JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip
untuk objek yang dibenamkan (embedded) di aplikasi lain. Walaupun
memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa
pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C.
Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan
bahasa pemrograman Self. Skrip JavaScript yang dimasukkan di dalam
berkas HTML ataupun XHTML harus dimasukkan di antara tag
<script>...</script>. Berikut ini adalah contohnya (yang
akan menampilkan sebuah dialog box berisi Halo Dunia! ketika sebuah
tombol diklik oleh pengguna):
I. MEMASUKKAN JAVA SCRIPT KE DALAM DOKUMEN HTML
Sebenarnya ada dua cara menanamkan JavaScript kddalam dokumen
HTML anda, yaitu :
1. Mengapit JavaScript tersebut dengan tag <script>...</script> Contoh :
2. Menggunakan tag HTML yang menangani event.
Contoh :
Latihan 1
Latihan 2
Latihan 3
II. TYPE DATA
Tipe
Data merupakan besaran yang digunakan untuk melakukan perhitungan,
menulis dan sebagainya. Di dalam javascript terdapat beberapa macam Tipe
Data, yaitu :
1. String
String adalah karakter yang bisa berupa
huruf, kata symbol atau angka. String ditulis diantara tanda kutip ganda
(“) atau tanda kutip tunggal ( ‘ ). Jika terdapat string lain gunakan
tanda kutip tunggal. misal :
<input name = age on focus ="windows.status= ' ketikkan umuranda' ">
name = “firdaus ‘alikomeini’ adnan “ sedang untuk menulis tanda kutip ganda dalam string digunakan tanda (\ “).
Misalnya : name = “Institut \”Teknologi \” Bandung ”
2. Numerik
Berupa bilangan atau angka yang mempunyai sifat matematis (bisa dijumlah, tambah dsb), misalnya : 17, 8, 1945
3. Boolean
Nilai yang hanya memiliki dua nilai yaitu true (benar) dan false (salah)
4. Null
Adalah nilai yang tidak memiliki nilai sama sekali . Null tidak sama denagn karakter kosong atau nilai nol ( 0 ).
III. VARIABLE
Aturan penamaan variable
Java Script memiliki aturan untuk memberi nama variabel :
1. Harus diawali dengan karakter (huruf atau garis bawah ) tidak boleh diawali dengan angka atau symbol.
Contoh :
2. Tidak boleh menggunakan spasi , untuk memisahkan antar karakter digunakan garis bawah.
Contoh :
3. Kapitalisasi (huruf besar dan huruf kecil) dibedakan pada nama variabel. Contoh :
Firdaus tidak sama dengan firdaus
4.
Tidak boleh mengunakan reserverd word, atau nama yang sama dengan
perintah yang ada pada Java Script. Reserved word dalam javascript
adalah : Abstract, Boolean, break, byte, case, catch, char, c lass,
const, continue, default, do, double, else, extends, false, final,
finally, float, for, function, goto, if, implements, import, in, instace
of, int, interface, long, native, new, null, package, private,
protected, public, return, short , static, super, switch, synchronized,
this, throw, throws, transient, true, try, var, void, while, with.
IV. KONSTANTA/LITERAL
Konstanta/literal
adalah suatu nilai pasti yang tidak bisa diubah-ubah. Pengertian ini
relevan dengan kata dasarnya yaitu konstan yang artinya tetap. Jika isi
variable masih bisa diubah, maka konstanta tidak. Antara variable dan
konstanta dapat disatukan. Perhatikan contoh di bawah ini : total =
subtotal +
100. Nilai 100 di atas adalah konstanta/literal sedangkan total dan subtotal
merupakan varible.
Beberapa jenis literal pada Java Script :
1. Literal Integer
yaitu suatu bilangan bulat tanpa pecahan :
2. Literal Floating Point,
yaitu suatu bilangan pecahan atau berpangkat.
3. Literal String,
adalah
suatu karakter yang berisi huruf , angka atau symbol simbol lainnya.
Literal string harus diawali dan diakhiri dengan tanda kutip ganda ( “ )
atau tunggal ( ‘ ).
4. Literal Boolean,
adalah suatu litral yang memiliki dua buah nilai yaitu true (bena r) dan false
(salah)
Latihan 4
Latihan 5
V. Operator
Operator
merupakan perintah yang memanipulasi nilai atau variable dan memberikan
suatu hasil tertentu. Beberapa jenis operator yang sudah umum yaitu
operator aritmatika yang sering kita gunakan dalam membahas matematika,
diantaranya adalah operator tambah (+), kurang (),kali (x), bagi (/) ,
persen (%) dan sebagainya.
Datadata yang dimanipulasi oleh operator untuk memberikan suatu hasil y ang
diinginkan disebut juga dengan operan. Sebagai contoh : X + 3 = 6
Keterangan :
• X dan 3 adalah operan
• + adalah operator
• 6 adalah hasil
Dalam modul ini kita akan mempelajari jenis-jenis operator javascript, di antaranya adalah :
1. Operator Unary
Operator
unary adalah operator yang hanya mengolah satu nilai atau satu operan
saja. Operator unary dalam javascript terbagi atas tiga macam, yaitu :
a. Increment (penambahan), dengan symbol ++
Operator ini berfungsi untuk menambahkan nilai operan (variable) sebanyak satu.
Contoh :
Dari
contoh di atas kita dapat mendefinisikan bahwa variable subtotal
dimasukkan ke variable total terlebih dahulu, kemudian nilai variable
subtotal ditambah dengan angka satu.
Dari
contoh di atas kita dapat mendefinisikan bahwa variable subtotal
ditambah terlebih dahulu, lalu nilai variable subtotal di masukkan ke
variable total.
b. Decrement (pengurangan), dengan symbol – Operator ini akan mengurangi nilai operan (variable) sebesar satu. Contoh :
Artinya variable subtotal dimasukkan ke variable total terlebih dahulu kemudian nilai variable subtotal dikurangi Satu
Artinya nilai variable subtotal dikurangi satu terlebih dahulu, kemudian nilai variable subtotal dimasukkan ke variable total.
c.
Negasi (lawan), dengan symbol – Operator ini akan membalikkan nilai
operan. Jika operan bernilai positif, operator negasi akan menjadikannya
negatif dan sebaliknya. Perhatikan contoh soal berikut :
Latihan 6
2. Operator Binary
Operator Binary adalah operator yang mengolah dua nilai atau dua operan. Perhatikan contoh di bawah ini :
x + y = 5
Tanda
+ adalah operator binary, karena tanda tersebut mengolah dua buah
operan yakni x dan y. Semua operator binary pada javascript adalah
operator aritmatika.
Perhatikan table di bawah ini :
Latihan 7
3. Operator penugasan
Operator
penugasan adalah operator yang memberi nilai kepada variable. Jenis
operator yang umum digunakan adalah tanda sama dengan (=). Contoh :
var nilai = 10
nilai = matematika
Pada
contoh di atas, variable nilai diberi nilai (value) 10. Pada baris k
edua, variable nilai diberi nilai (value) yang terdapat pada variable
matematika.
Jenis operator lainnya merupakan singkatan dari operator binary. Perhatikan contoh di bawah ini :
nilai += matematika
contoh di atas sama artinya dengan :
nilai =nilai + matematika
Beberapa jenis operator penugasan yang terdapat pada javascript adalah :
4. Operator perbandingan
Operator
perbandingan adalah operator yang digunakan untuk membandingkan satu
nilai dengan nilai yang lain, untuk mendapatkan hasil benar atau salah.
Pada umumnya, macam dari jenis operator perbandingan ini adalah sama
dengan (==).
Contohnya : Biaya == 100
Jika nilai dari variable
biaya di atas besarnya sama dengan 100, maka pernyataan di atas akan
memberikan hasil true (benar). Tetapi jika nilai dari variable biaya di
atas besarnya tidak sama dengan 100, maka pernyataan di atas akan
memberikan hasil false (salah).
5. Operator logical
Pada
dasarnya Operator logical hampir sama dengan operator perbandingan yang
berfungsi untuk membandingkan dua buah nilai untuk memberikan hasil
beanr atau salah. Perbedaannya adalah operator logical berfungsi
membandingkan perbandingan. Perhatikan contoh di bawah ini :
( total > 10) && (biaya < 100)
Pada
contoh di atas digunakan operator && yang artinya adalah
mengharuskan kedua nilai memenuhi syarat. Jika kedua nilai benar maka
ekspresi di atas akan bernilai benar. Beberapa jenis operator
yang terdapat di javascript adalah sebagai berikut :
Dari contoh di atas yaitu (total > 10) && (biaya < 100) dapat kita perkirakan bahwa :
• Jika total = 12 (benar) dan biaya = 98 (benar), maka hasilnya adalah benar
• Jika total = 8 (salah) dan biaya = 98 (benar), maka hasilnya adalah salah
• Jika total = 8 (salah) dan biaya = 102 (salah), maka hasilnya adalah salah
Jika operator contoh di atas kita ganti dengan tanda ( || ) maka dapat kita ambil perkiraan yaitu :
• Jika total = 12 (benar) dan biaya = 98 (benar), maka hasilnya adalah benar
• Jika total = 8 (salah) dan biaya = 98 (benar), maka hasilnya adalah benar
• Jika total = 12 (benar) dan biaya = 102 (salah), maka hasilnya adalah benar
• Jika total = 8 (salah) dan biaya = 102 (salah), maka hasilnya adalah salah
Jika contoh di atas dirubah menjadi !((total == 100), maka dapat kita perkirakan hasilnya sebagai barikut :
• Jika total=100 (benar), maka ekspresi di atas salah
• Jika total=98 (salah), maka ekspresi di atas benar
Latihan 10
6. Operator String
Operator
string adalah operator yang mengolah nilai string, yaitu nilai yang
berupa karakter (bukan angka atau ekspresi aritmatik). Jenis operator
string pada dasarnya sama dengan operator-operator yang telah dijelaskan
di atas. Hanya saja, operator-operator tersebut digunakan untuk
memanipulasi string.
Perhatikan contoh di bawah ini. var nama = “adi” + “anak”+”baik”
Dari contoh di atas maka dapat diambil kesimpulan bahwa variable pesan adalah string “adi anak baik”.
Beberapa hal yang perlu diperhatikan adalah :
1. String tidak bisa dibandingkan
Jika kita tidak bisa membandingkan antara “roti” == “keju” atau
“roti”>”keju”. Maka hasil keduanya adalah salah atau false.
2. Javascript mengubah string angka menjadi numerik
Apabila
string berisi angka, javascript akan mengubahnya menjadi nilai numerik,
sehingga dapat dibandingkan. Perhatikan contoh di bawah ini : “100”
> “10”. Javascript akan mengubah “100” menjadi 100 dan mengubah “10”
menjadi 10. Karena 100 lebih besar dari 10, maka ekspresi di atas
bernilai true atau benar.
3. String gabungan tidak diubah
Gabungan
yang dimaksud adalah gabungan antara numerik dengan kalimat. Misalkan
string tersebut berupa “angkatan2014”, contoh tersebut tidak akan diubah
menjadi nilai numerik. Perhatikan table berikut yang menjadi contoh
penerapan operator string pada javascript :
Latihan 11
VI. Logika If
Pernyataan
ini digunakan untuk membandingkan suatu kondisi, jika kondisi itu
benar, maka akan dijalankan ekspresi tertentu, tetapi jika kondisi itu
salah akan dijalankan ekspresi lain. Sintaks dari pernyataan if……else,
If (kondisi)
{ekspresi 1}
else (kondisi)
{ekspresi 2}
Keterangan :
- Kondisi : kondisi yang dibandingkan
- Ekspresi1 : ekspresiekspresi yang akan dijalankan jika kondisi memenuhi syarat.
- Ekspresi2 : ekspresiekspresi yang akan dijalankan jika kondisi tidak memenuhi syarat.
Contoh :Agar
lebih memahami maksud dari pernyataan di atas, simak kalimat berikut :
Jika nilai ujian saya meningkat, saya akan mendapatkan mobil dari
orangtua saya, tetapi jika tetap atau berkurang maka saya tidak
mendapatkan mobil (else) melainkan saya hanya mendapatkan sepeda.
Jika kita terjemahkan ke dalam bahasa javascript maka kalimatnya adalah:
If (nilai >90) (hadiah = “mobil”) else (hadiah=”sepeda”)
Keterangan :
Latihan 12
Latihan 13
VII. Perulangan Dengan For
Pernyataan
for berfungsi melakukan suatu loop atau menjalankan ekspresi
berulangulang untuk kondisi yang telah di tentukan sebelumnya.
Pernyataan for jika dilihat hampir sama dengan pernyataan while, yang
berbeda adalah pernyataan for menyertakan kondisi awal dan kondisi akhir
serta besarnya kenaikan. Sintak pernyataan for adalah :
for (kondisi_awal; kondisi _akhir; kenaikan) (ekspresi)
Keterangan :
• kondisi_awal : kondisi awal yang memenuhi untuk loop dimulai
• kondisi_akhir : kondisi akhir yang memenuhi untuk loop diakhiri
• kenaikan : besarnya kenaikan nilai variable untuk setiap iterasi loop
Latihan 14
VIII. Fungsi
Fungsi
adalah sekumpulan kodekode javascript yang jika dijalankan akan
menghasilkan atau mengerjakan suatu tugas tertentu. Fungsi dapat disebut
sebagai modul atau subprogram dari seluruh skrip atau program
javascript. Pembuatan Fungsi
Dilihat dari segi pembuatan fungsi, maka sintak dasarnya adalah :
function nama_fungsi (parameter)
{ …….. ekspresi ekspresi
……… }
Untuk memposisikan sintak tersebut, maka sintak tersebut harus diletakkan di :
<script language=”javascript”>
function nama_fungsi()
{
### isi fungsi ###
}
</script>
Aturan Pembuatan Fungsi
Ditinjau dari segi pembuatannya, maka fungsi memiliki beberapa aturan pembuatan yang akan di jabarkan di bawah ini :
1. Diawali dengan kata function
2.
Nama fungsi bebas, asalkan dapat menjelaskan fungsi dari fungsi
tersebut. Yang terpenting di sini adalah fungsi harus diikuti oleh tanda
kurung “()” yang digunakan sebagai tempat parameter.
3. Di dalam tanda kurung setelah kata function, dapat diletakkan parameter
fungsi. Untuk lebih jelas lagi perhatikan sintak berikut :
function jumlah (a,b)
{
var c = a+b;
document.write (z)
}
Parameter di dalam fungsi bisa digunakan bisa juga tidak digunakan.
4. Parameter merupakan variable atau nilai yang akan diolah ekspresiekspresi yang terdapat di dalam fungsi tersebut.
Isi fungsi harus di letakkan di dalam tanda kurung kurawal.
Latihan 15
Perhatikan
contoh di atas. Tampak bahwa dengan menuliskan garis() berarti kita
telah memanggil sintak “<hr>” yang di nyatakan di dalam sintak
document.write. Ini disebabkan bahwa kata garis merupakan nama sebuah
fungsi yang bisa dipanggil pada posisi manapun selama nama fungsi
tersebut masih berada di antara sintak javascript. Pada contoh di atas,
tampak bahwa isi parameter masih kosong. Di bawah ini ada script
javascript yang memberikan nilai parameter pada fungsi.
Latihan 16
Memanggil Fungsi javascript
Untuk
menampilkan fungsi yang telah di buat, maka fungsi tersebut harus
dipanggil terlebih dahulu. Ada beberapa cara pemanggilan fungsi
tersebut, yaitu :
1. Fungsi tersebut dipanggil dalam skrip javascript
2. Fungsi dipanggil dari dalam fungsi itu sendiri
3. Fungsi dipanggil dari dalam fungsi yang lain.
Di bawah ini akan dijelaskan secara lebih rinci mengenai metode pemanggilan fungsi javascript tersebut :
Memanggil fungsi dari dalam skrip javascript
Metode ini terbagi dua :
1. Fungsi dipanggil dari skrip yang terletak pada bagian <head> Perhatikan contoh di bawah ini :
Latihan 17
2. Fungsi dipanggil dari skrip javascript yang terletak pada bagian
<body>
Latihan 18
IX. Event
Event
adalah suatu aksi yang dilakukan oleh pemakai yang memicu jalannya kode
JavaScript anda.sebagian besar event dipicu oleh pemakai yang
memanipulasi halaman web pada program browsernya , seperti menggeser
pointer keatas link untuk memicu menampilkan alamat link pada baris
status.
Macam macam event :
1. Click , event ini terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat form.
2.
Focus, event ini terjadi jika pemakai mengklik atau meletakkan pointer
mousepada elemen form seperti field teks , kotak cek dan sebagainya.
3. Blur , event ini terjadi jika pemakai menyingkirkan focus (pointer mouse)
dari elemen form yang sebelumnya diberi focus.
4. Change , event ini terjadi jika pemakai mengubah input atau masukan pada elemen form.
5. MouseOver, terjadi jika pemakai meletakkan mouse di atas sebuah link .
6.
Select, event ini terjadi jika pemakai memilih teks pada elemen form,
seperti menggeser pointer mouse pada teks sambil menahan tombol kiri
mouse.
7. Submit, event ini terjadi bila mengklik tombol “submit”
Menjalankan Event
Event Handler
Event Handler merupakan kode kode javascript yang akan dijalankan apabila event tersebut dipicu.
Untuk menjalankan event tersebut maka digunakan sintaks : On NamaEvent = “
kode JavaScript ”
Contoh :
OnMouseOver =”fungsi_data (a,b)”
Memanggil Event Handler
Metode pemanggilan event handler dapat menggunakan dua metode, yaitu :
1. Memanggil melalui fungsi
Event Handler dapat dijalankan dengan cara memanggil fungsi.
Sintaknya adalah :
OnNamaEvent = “namafungsi (parameter)”
Latihan 19
2. Memanggil dengan menjalankan kode javascript secara langsung
Event Handler dapat dijalankan dengan cara membuat kode javascript secara langsung di text editor. Sintaknya adalah :
OnNamaEvent = “kode javascript”
Latihan 20
Latihan 21
