Tampilkan postingan dengan label ilmu Javascript. Tampilkan semua postingan
Tampilkan postingan dengan label ilmu Javascript. Tampilkan semua postingan

Contoh Aplikasi-aplikasi Javascript

Di bawah ini akan di sajikan beberapa aplikasi javascript yang dinamis sehingga dapat membuat tampilan web site kita menjadi lebih indah dan interaktif.

1. Aplikasi Jam

clip_image001

clip_image002

Dari script di atas, akan membuat suatu tampillan jam yang dinamis sesuai dengan pergerakan jam yang ada di komputer kita sendiri.

Tampilan di brrosernya adalah :

clip_image003

2 Di bawah ini merupakan contoh link ke beberapa web site terkenal di dunia. Dengan memilih option-nya, kita sudak langsung membuka website tersebut tanpa harus merubah bentuk mouse menjadi seperti tangan. Perhatikan contoh di bawah ini

clip_image004

Tampilannya di browser adalah :

clip_image005

  1. Manipulasi kalkulator

clip_image006

clip_image007

clip_image009

clip_image011

Event Pada Javascript

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 mouse pada 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)”

Untuk lebih jelasnya lagi, perhatikan contoh_9.1.html di bawah ini :

clip_image001

  1. 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”

Perhatikan contoh_9.2.html :

clip_image002

Dari contoh gambar di atas dapat di tarik beberapa kesimpulan, bahwa :

Jika link tersebut di klik yaitu kata pencet, maka akan dijalankan script javascript “document.write ('<h4>'+'selamat datang'+'</h4>')" yang akan menampilkan teks selamat datang pada halaman browser tersebut.

Beberapa apklikasi Event

1. contoh_9.3.html mengenai event Click:

clip_image004

Contoh di atas memberikan gambaran kerja sebuah perhitungan sederhana dengan menggunakan javascript yang menjadi gabungan antara fungsi dan event.

Di bawah ini adalah contoh aplikasi form yang interaktif dengan user ketika memasukkan input ke dalamnya :

Perhatikan contoh_9.4.html, contoh ini merupakan contoh event focus :

clip_image005

Tampilan di browsernya adalah :

clip_image006clip_image007

Perhatikan bagian yang dikenai oleh tanda panah di atas, bagian tersebut merupakan ciri khas dari event focus.

Contoh_9.5.html tentang event Submit adalah :

clip_image008

Tampilan di browsernya adalah :

clip_image009clip_image010

Tampilan yang dikenai oleh tanda panah, merupakan cirri khas dari event onSubmit.

Fungsi Built-in Javascript

Di dalam javascript juga menyediakan beberapa fungsi built-in yang dapat langsung digunakan. Fungsi-fungsi tersebut adalah :

  1. parseInt()
  2. parseFloat()
  3. isNaN()
  4. eval()
  5. escape()
  6. unescape()

Untuk lebih jelasnya lagi, perhatikan penjabaran dari tiap fungsi di atas yang ada di bawah ini :

  1. Fungsi parseInt()

Fungsi parseInt() berguna untuk mengubah dan mengkonversi nilai string menjadi nilai integer dengan menggunakan basis tertentu.

Misalnya :

String “100.12” jika diubah menjadi integer dengan basis sepuluh maka hasilnya adalah 100 karena nilai integer saja yang akan dikonversi.

Sintaknya adalah :

ParseInt (string, basis)

Perhatikan contoh_8.3.html di bawah ini :

clip_image001

2 Fungsi parseFloat()

Fungsi dari fungsi parseFloat() adalah untuk mengubah atau mengkonversi nilai string menjadi nilai floating-point. Nilai floating-point adalah bilangan pecahan atau pangkat).

Sintak fungsi tersebut adalah :

ParseFloat (string)

Perhatikan contoh_8.4.html di bawah ini :

clip_image002

3. Fungsi isNaN

Fungsi isNaN() yang merupakan singkatan dari is Not a Number digunakan untuk menentukan apakah suatu nilai berupa bilangan numerik atau bukan bilangan numerik.

Dengan kata lain bahwa :

- Jika nilai tersebut bukan bilangan numeric, maka fungsi isNaN akan menghasilkan nilai true (benar).

- Jika nilai tersebut bilangan numeric, maka fungsi isNaN akan menghasilkan nilai false (salah).

Sintak dari fungsi tersebut adalah :

IsNaN (value)

Perhatikan contoh_8.5.html di bawah ini :

clip_image003

4. Fungsi eval()

Fungsi eval() digunakan untuk menghitung suatu ekspresi aritmatika.

Sintaknya adalah

Eval (ekspresi)

­Perhatikan contoh_8.6.html di bawah ini :

clip_image005

Ketika halaman ini akan tampil , maka akan tampak kolom tempat memasukkan ekspresi artimatika. Jika kita masukkan suatu ekspresi aritmatika seperti :

clip_image006

Angka 10 di atas merupakan variable yang akan di tampilkan oleh sintak pernyataan, maka akan tampak hasilnya seperti di bawah ini :

clip_image007

Definisi Ekspresi Javascript

Ekspresi merupakan kode-kode pemograman yang digunakan untuk menampilkan perhitungan atau penugasan.

Pada penambahan mengenai operator di atas, anda telah menggunakan ekspresi ini.

Perhatikan contoh berikut :

var nilai = 100

var total = nilai1 + nilai2

Ekspresi perbandingan

Pada javascript, tidak ada ketentuan tertentu untuk penulisan ekspresi. Tetapi ada satu pengecualian yaitu pada ekspresi perbandingan.

Sintak untuk ekspresi perbandingan ini adalah sebagai berikut :

(kondisi) ? nilaibenar : nilaisalah

Dari sintak di atas, jika kondisi benar maka akan diberi nilai yang terdapat pada variable nilaibenar. Sedangkan jika kondisi salah maka akan memberikan nilai yang terdapat pada variable nilaisalah.

Perhatikan contoh di bawah ini :

Jika firdaus ingin mendapatkan mobil maka syaratnya ia harus mendapatkan nilai 90, tetapi jika ternyata nilai yang ia dapat di bawah 90 maka ayahnya akan memberinya sebuah sepeda. Kondisi seperti ini dapat kita terjemahkan ke dalam kalimat :

Hadiah = (nilai > 90) ? “mobil” : “sepeda”

Jika kita terjemahkan ke dalam bahasa javascript (contoh_5.3.html) adalah sebagai berikut :

clip_image001

Perhatikan contoh_5.4.html di bawah ini :

clip_image002

Alert

Alert dalam javascript merupakan script pemberi pesan kepada user ketika user memasukkan input ke dalam kolom data, ketika user sedang menekan tombol yang ada di browser atau peringatan kepada user kerika user salah memasukkan input ke dalam kolom data di mana input tersebut perlawana dengan keinginan script yang ada. Perhatikan contoh_5.5.html :

clip_image003

Memanggil Fungsi dari Fungsi Lainnya pada Javascript

Dalam membuat suatu fungsi, kita juga dapat memanggil fungsi lain yang telah kita baut sebelumnya, dengan kata lain kita membuat suatu fungsi terlebih dahulu kemudian membuat fungsi lainnya yang memanggil fungsi sebelumnya.

Sintaknya adalah :

<script language=”javascript”>

function nama_fungsi1 ()

{

}

function nama_fungsi2 ()

{

… nama_fungsi1()

}

</script>

Untuk lebih jelas lagi. perhatikan contoh_8.2.html di bawah ini :

clip_image002

Dari contoh di atas, tanpak bahwa ada dua jenis fungsi yang berbeda, fungsi pertama menyatakan garis, dan fungsi kedua menyatakan nilai factorial. Kondisi di atas, fungsi gasris dapat dipanggil di dalam fungsi faktorial sehingga selain menampilkan nilai factorial, maka akan tampil juga fungsi garis di antara fungsi factorial.

Operator string Javascript

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 = “firdaus” + “alikomeini”+”adnan”

Dari contoh di atas maka dapat diambil kesimpulan bahwa variable pesan adalah string “firdaus alikomeini adnan”.

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 niali 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 “angkatan2001”, contoh tersebut tidak akan diubah menjadi nilai numerik. Perhatikan table berikut yang menjadi contoh penerapan operator string pada javascript :

Operator

Arti

Contoh

==

Membandingkan string

“roti” == “keju”

>

Lebih besar dari

“100” > “10”

+

Penjumlahan

nama_awal = “firdaus”

nama_akhir = “adnan”

Nama = nama_awal + nama_akhir

+=

Penjumlahan ganda

nama = “firdaus”

nama+=”adnan”

Untuk lebih lengkapnya, perhatikan contoh_5.2.html di bawah ini

clip_image002

Operator Logikal Javascript

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 :

Operator

Arti

keterangan

&&

AND (dan)

Kedua nilai yang dibandingkan harus sesuai dengan kriteria

||

OR (atau)

Salah satu nilai yang dibandingkan harus sesuai dengan kriteria

!

NOT (bukan)

Nilai yang dibandingkan merupakan kebalikannya.

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

clip_image002Untuk lebih jelasnya, perhatikan contoh_5.1.html di bawah ini :

Perintah Fungsi Pada Javascript

Fungsi adalah sekumpulan kode-kode javascript yang jika dijalankan akan menghasilkan atau mengerjakan suatu tugas tertentu. Fungsi dapat di sebut 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 tersbut, 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 terenting 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. Parameter merupakan variable atau nilai yang akan diolah ekspresi-ekspresi yang terdapat di dalam fungsi tersebut.

  1. Isi fungsi harus di letakkan di dalam tanda kurung kurawal.

Untuk lebih jelas lagi, perhatikan contoh_7.3.html :

clip_image001

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. Perhatikan contoh_7.4.html di bawah ini :

clip_image003

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 :

a. 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 :

clip_image004

  1. Fungsi dinpanggil dari skrip javascript yang terletak pada bagian <body>

Perhatikan contoh­_7.6.html berikut :

clip_image005

Operator perbandingan Javascript

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).

Operator

Arti

Contoh

==

Sama dengan

Total==10

!=

Tidak sama dengan

Total !=100

>

Lebih besar dari

Total>100

<

Kurang dari

Total<100

>=

Lebih besar atau sama

Total>=100

<=

Kurang dari atau sama

Total<=100

Perhatikan contoh_4.4.html di bawah ini :

clip_image002

Pernyataan pernyataan pada Javascript

Pernyataan Continue

Pernyataan continue berfungsi untuk menghentikan eksekusi loop. Tetapi hal ini tidak menyebabkan keluar dari loop tetapi hanya melompati satu buah iterasi dan melanjutkan iterasi loop yang selanjutnya.

Perhatikan contoh_7.1.html di bawah ini :

clip_image002

Pernyataan for…in

Pernyataan for…in adalah pernyataan yang melakukan loop(pengulangan) di dalam sebuah objek.

Sintak dari pernyataan for…in adalah :

for (counter in nama_object)

{ekspresi}

Keterangan :

· Counter : jumlah counter di dalam object (jumlah property)

· Nama_object : objek yang ingin dilakukan loop

· Ekspresi : ekspresi yang dijalankan selama loop

Perhatikan contoh_7.2.html di bawah ini :

clip_image003

Pada contoh di atas, objeknya adalah buah sedangkan property untuk objek buah adalah warna, tipe dan rasa. Setiap property memiliki nomor index yang dimulai dari 0. Jadi pada objek buah di atas memiliki counter sebagai berikut :

· buah [0] = buah.warna

· buah [1] = buah.besar

· buah[2] = buah.rasa

Pernyataan with

Seperti halnya dengan pernyataan for…in yang di atas, dalam pernyataan ini ada sedikit perbedaan yaitu pernyataan with berfungsi untuk memberi tahu objek yang sedang kita gunakan. Setiap referensi variable di dalam pernyataan berikutnya akan merujuk kepada objek tersebut.

Sintak pernyataan with sebagai berikut :

with (nama_object)

(ekspresi)

Keterangan :

· nama_object : nama objek yang ibgin di jadikan acuan pernyataan

· ekspresi : ekspresi yang terdapat di dalam objek

contoh :

with (buah)

{

warna = “merah”;

ukuran = “besar”;

rasa = “manis”;

}

Sintak lengkapnya, anda cukup memodifikasi contoh seperti di atas (contoh_7.2.html).

Pernyataan var

Pernyataan var berfungsi untuk menugaskan suatu nilai ke dalam variable. Sitak dari statement (pernyataan) var adalah :

var nama_variable = value

contoh :

var nama = “firdaus”

var a = 5

Pada modul sebelumnya, sebenarnya kita telah memperlajarinya yaitu pada modul variable mengenai nilai dari variable.

Sebenarnya kita bisa memberikan nilai untuk variable tanpa pernyataan var tersebut, seperti :

nama=”firdaus”

Pernyataan komentar

Pernyataan komentar berfungsi untuk menerangkan atau memberi keterangan pada setiap barisnya yang ada di dalam sintak HTML. Pernyataan ini memudahkan bagi user untuk mempelajari script javascript yang kita buat, selain itu komentar yang kita buat dalam script tersebut tidak akan terliah di browser dan hanya bisa terlihat di source-nya saja, karena browser tidak ikut memproses sintak komentar tersebut.

Pada modul sebelumnya, sebenarnya kita telah mempelajari dan membahasnya.

Sintaknya ada dua yaitu :

1. //komentar

2. /* komentar

komentar */

Pernyataan Break Javascript

Pernyataan (statement) break berfungsi sebagai menghentikan ekspresi loop yang sedang dijalankan, dan melanjutkan ke baris skrip di bawah loop tersebut. Jika pengulangannya belum selesai sampai pada statement yang di syaratkan maka ia akan tetap me loop, dan berhenti pada kondisi yang telah ditetapkan di dalam sintak javascript. Perhatikan contoh_6.5.html di bawah ini :

clip_image001

Operator penugasan Javascript

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 kedua, 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 :

Operator

Contoh

Arti

=

nilai = 10

value nilai = 10

+=

nilai += matematika

nilai = nilai + matematika

-=

nilai -= matematika

nilai = nilai – matematika

*=

nilai *= matematika

nilai = nilai * matematika

/=

nilai /= matematika

nilai = nilai / matematika

%=

nilai %=matematika

nilai = nilai % matematika

Perhatikan contoh_4.3.html berikut ini :

clip_image002

Pernyataan for Javascript

Pernyataan for berfungsi melakukan suatu loop atau menjalankan ekspresi berulang-ulang 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

Perhatikan contoh_6.4.html di bawah ini :

clip_image001

Pernyataan while Javascript

Pernyataan while digunakan untuk melakukan suatu loop atau menjalankan ekspresi berulang-ulang selama (while) kondisi yang ditentukan bernilai benar.

Sintak dari pernyataan while adalah sebagai berikut :

While (kondisi)

(ekspresi)

Keterangan :

  • Kondisi : kondisi yang di bandingkan
  • Ekspresi : ekspresi-ekspresi yang akan dijalankan jika kondisi memenuhi syarat.

Contohnya :

Jika seorang nasabah bank ingin menabung si suatu bank dengan dana awal Rp.100.100,-. Dia tidak akan berhenti menabung sampai kas saldonya mencapai satu juta. Maka jika dituangkan pada suatu sintak javascript, sebagai berikut :

var saldo = 100000

while (saldo <=1000000)

(saldo+=100000)

Dari sintak di atas maka dapat di uraikan sebagai berikut :

  • var saldo = 100000 ; aritnya adalah variable saldo di beri nilai awal 1000
  • while (saldo <= 1000000); artinya adalah memeriksa kondisi apakah isi variable saldo kurang dari atau sama dengan 1000000. Jika benar, maka pernyataan berikutnya akan dijalankan.
  • (saldo +=1000); artinya sama dengan saldo= saldo+1000. Variable saldo yang baru diisi dengan variable uang 1000 maka akan ditambah dengan 1000 sehingga jumlahnya kni menjadi 2000, dan begitu seterusnya.

Perhatikan contoh_6.3.html :

clip_image001

Di dalam browser akan terlihat seperti di bawah ini :

clip_image002

Operator Binary Javascript

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 :

Operator

Fungsi

Contoh

+

Penjumlahan

var x = 2 + 3 ; nilai x = 5

-

Pengurangan

var x = 3 – 2; nilai x=1

+

Perkalian

var x = 2*3; nilai x = 6

/

Perkalian

var x = 3/2; nilai x = 1.5

%

Modulus

var x = 3%2; nilai x = 1

Perhatikan contoh di bawah ini

Contoh_4.2.html

clip_image002

Pernyataan if else Javascript

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
  • Ekspresi-1 : ekspresi-ekspresi yang akan dijalankan jika kondisi memenuhi syarat.
  • Ekspresi-2 : ekspresi-ekspresi 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 :

Baris

Keterangan

if (nilai > 90)

(hadiah = “mobil”)

Jika isi variable nilai bernilai lebih besar dari 90 maka variable hadiah akan diberikan nilai “mobil”

Else

(hadiah= “sepeda”)

Jika isi variable nilai bernilai tidak lebih besar dari 90 maka variable hadiah akan diberikan nilai “sepeda”

Perhatikan contoh_6.1.html di bawah ini :

clip_image001

Perhatikan contoh_6.2.html di bawah ini :

clip_image003

Dari contoh di atas maka browser akan meminta masukan dari user yang di jadikannya sebagai variable yang akan di cocokkan pada sintak pernyataan yang telah dibuat pada text editor.

Operator Unary Javascript

Operator unary adalah operator yang hanya mengolah satu nilai atau satu operan saja. Operator unary dalam javascript terbagi atas tiga macam, yaitu :

  1. Increment (penambahan), dengan symbol ++
  2. Decrement (pengurangan), dengan symbol –
  3. Negasi (lawan), dengan symbol –

Untuk lebih jelasnya, kita akan membahas satu-persatu beserta contohnya.

4.2.1 Increment (penambahan)

Operator ini berfungsi untuk menambahkan nilai operan (variable) sebenar satu.

Contoh :

a. total = subtotal++

Dari contoh di atas kita dapat mendefinisikan bahwa variable subtotal dimasukkan ke variable total terlebih dahulu, kemudian nilai variable subtotal ditambah dengan angka satu.

b. total =++ subtotal

Dari contoh di atas kita dapat mendefinisikan bahwa variable subtotal ditambah terlebih dahulu, lalu nilai variable subtotal di masukkan ke variable total.

4.2.2 Decrement (pengurangan)

Operator ini akan mengurangi nilai operan (variable) sebesar satu.

Contoh :

a. total = subtotal--

Artinya variable subtotal dimasukkan ke variable total terlebih dahulu kemudian nilai variable subtotal dikurangi Satu

b. total = --subtotal

Artinya nilai variable subtotal dikurangi satu terlebih dahulu, kemudian nilai variable subtotal dimasukkan ke variable total.

4.2.3 Negasi (lawan)

Operator ini akan membalikkan nilai operan. Jika operan bernilai positif, operator negasi akan menjadikannya negatif dan sebaliknya.

Perhatikan contoh soal berikut :

Contoh_4.1.html

clip_image002

Nilai Dalam Javascript

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 :

Variable

Keterangan

Contoh_3.1

Benar

­­_contoh3.2

Benar

2001_angkatan

Salah

$sql

Salah

  1. Tidak boleh menggunakan spasi , untuk memisahkan antar karakter digunakan garis bawah.

Contoh :

Variable

Keterangan

Firdaus adnan

Salah

Firdaus_adnan

benar

  1. Kapitalisasi (huruf besar dan huruf kecil) dibedakan pada nama variabel.

Contoh :

Firdaus tidak sama dengan firdaus

  1. 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, class, 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.

Memberikan nilai pada variabel

Untuk memberikan nilai pada variabel digunakan sintaks :

var namavariabel = nilai (value)

contoh :

  1. Memberikan nilai string untuk variable :

var nama = “firdaus adnan”

  1. Memberi nilai numerik untuk variable :

var angka = 1000.12

  1. Memberi nilai Boolean untuk variable :

var x = true

var y = false

  1. Memberi nilai null untuk variable :

var nama = null

Jenis Perintah Operator Javascript

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.

Data-data yang dimanipulasi oleh operator untuk memberikan suatu hasil yang 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
  2. Operator Binary
  3. Operator penugasan
  4. Operator penugasan
  5. Operator perbandingan
  6. Operator logical
  7. Operator String

clip_image001

Konstanta/Literal Javascript

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

Literal

Bilangan

2001

Desimal

702

Octal

A33ff

Heksadesimal

2. Literal Floating Point,

yaitu suatu bilangan pecahan atau berpangkat.

Literal

Arti

3.14

3,14

2E3

2 x 10 3

-2E3

-2 x 103

2E-3

2 x 103

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 ( ‘ ).

Literal

Keterangan

“firdaus adnan”

Benar

“firdaus adnan’

Salah

4. Literal Boolean,

adalah suatu litral yang memiliki dua buah nilai yaitu true (benar) dan false (salah)

contoh_3.1.html

clip_image002

contoh di atas menjelaskan bahwa variable yang diidentifikasikan dengan nama menyatakan sebuah string yang valus-nya adalah firdaus. Ketika kita ingin memanggil value tersebut kedalam browser maka kita harus mencantumkan nama variable yang telah kita definisikan di atas yaitu nama kedalam sintak pernyataan atau sintak yang digunakan untuk menampilkan suatu kalimat yaitu document.write dan menambahkan tanda “+” dan tanda kutip dua (“) di samping variable tersebut.

Contoh_3.2.html

clip_image003

Sintak prompt di atas merupakan script dalam javascript untuk memerintahkan user untuk memasukkan input ke dalam box yang telah tersedia, di mana input tersebut menjadi variable terhadap output yang dideklarasikan di dalam sintak pernyataan yaitu di dalam document.write. Beda halnya dengan alert yang akan kita bahas pada bab selanjutnya. Contoh­_3.3.html

clip_image004

Forum Multimedia Edukasi www.formulasi.or.id
Forum Multimedia Edukasi www.formulasi.or.id

Kategori