JAVASCRIPT. Pemrograman Web. Rajif Agung Yunmar, S.Kom

JAVASCRIPT Pemrograman Web

Rajif Agung Yunmar, S.Kom

JavaScript ●

● ●

●

Bahasa pemrograman berbasiskan client side scripting. Program akan dieksekusi disisi (browser) client. Client dapat melihat skrip dan mengetahui algoritma dari program yang ditulis. Tidak memerlukan compiler khusus untuk mengeksekusi programnya.

Embedded – Inserting Script ●

Kode program JavScript ditanamkan langsung didalam halaman HTML. Kode program disisipkan diatara tag <script type="JavaScript">.

Program JavaScript Pertama Saya!

<script type="JavaScript"> alert("Hello Dab!");

Inline – Inserting Script ●

●

JavaScript didefinisikan langsung didalam elemen HTML sebagai sebuah atribut. Biasanya berkaitan dengan event, yaitu sebuah aksi yang dilakukan oleh seorang user. Klik Dong!

External – Inserting Script ●

●

●

Menempatkan kode program JavaScript secara terpisah. Terhubung dengan dokumen meletakkanya pada elemen head. File JavaScript ekstensi .js.

disimpan

dengan

menggunakan

External – Inserting Script function sayHello(){ alert("Hello Dab!"); }

<script language="JavaScript" src="08.latihan_03.js"> Klik Dong!

JavaScript Object ●

●

●

JavaScript memperlakukan setiap element pada browser / navigator sebagai sebuah object. Memudahkan kita untuk mengakses dan memanipulasi sifat / properti dari object tersebut. Diklasifikasikan berdasarkan hirarki / tingkatan khusus dan dapat diasosiasikan dengan kondisi dan sifat-sifat khusus (properti).

Description – JavaScript Object ●

●

●

Object yang terbesar adalah object window (jendela) dari browser. Didalam object window terdapat suatu object yang ditampilkan dalam bentuk halaman web yang disebut sebagai document. Object document memiliki banyak turunan. Contohnya : form, text, image, link, dll.

Description – JavaScript Object Klik Dong!

Direct Object Operation ●

●

Mengakses suatu object dibawah object document secara langsung tanpa melalui hirarki yang ada. Mengakses dan mengubah properti dari sebuah object. JavaScript menggunakan fungsi getElementById()

●

Element harus mempunyai identifier unik yang didefinisikan melalui sebuah atribut element yang bernama id

Direct Object Operation

Nama :

Hierarchy Way Direct Way

Other Object Object

Keterangan

Array

Object ini memungkinkan kita untuk membuat sebuah array. Memeiliki berbagai Met ode yang memungkinkan kita untuk menambah, menghapus dan mengurutkan element-element yang terdapat didalamnya.

Boolean

Object ini memungkinkan kita untuk membuat nilai boolean.

Date

Object yang memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu.

Function

Memungkinkan kita untuk membuat fungsi yang dapat kita definisikan sendiri menurut kebutuhan yang diinginkan.

Math

Object math memungkinkan kita untuk menggunakan fungsi-fungsi matematika. Contohnya : sqrt, round, max, dll.

Number

Object ini memungkinkan kita untuk melakukan operasi dasar terhadap sebuah bilangan.

RegExp

Memungkinkan kita untuk melakukan operasi menggunakan teknik-teknik regular expression.

String

Menyediakan metode untuk melakukan manipulasi terhadap sebuah string.

pencarian

string

Variable ●

Sebuah pengenal yang digunakan untuk menyimpan suatu nilai yang nilai tersebut dapat berubah-ubah selama dijalankannya program.

Explisit – Variable Declaration ●

Menuliskan variabel dengan diawali dengan keyword var kemudian diikuti nama variabel dan nilai yang dikandungnya. var var

test = "Sesuatu"; bil_1, bil_2, total;

Implisit – Variable Declaration ●

Menuliskan variabel secara langsung diikuti dengan nilai yang dikandungnya. test = "Sesuatu"; bil_1 = 5; bil_2 = 10;

Rule – Variable Declaration ●

●

●

●

Terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasi antara ketiganya. Tidak boleh mengandung spasi dan terdiri dari minimal satu karakter. Dimulai dengan huruf atau garis bawah, tidak boleh diawali dengan angka. Bersifat case sensitive, yaitu huruf besar dan kecil dibedakan.

Variable Example <script language="JavaScript"> var bil_1, bil_2, total; bil_1 = 5; bil_2 = 10; total = bil_1 * bil_2; document.writeln(bil_1 + " * " + bil_2 + " = " + total);

Variable Type ●

●

●

JavaScript tidak mengenakan tipe data tertentu pada sebuah variabel atau bersifat variant. Sebuah variabel dalam JavaScript dapat menampung jenis data yang berbeda-beda dalam satu siklus eksekusi program. JavaScript tetap menyediakan sebuah mekanisme untuk melihat tipe data dari sebuah variabel.

Variable Type <script language="JavaScript"> var sesuatu; sesuatu = 14; document.write("Variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("
"); sesuatu = "ada deh.."; document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));

Type Casting - Variable ●

Mekanisme pengubahan / konversi sebuah variabel kepada tipe data tertentu.

Type Casting - Variable <script language="JavaScript"> var sesuatu; sesuatu = 14; document.write("Variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("
"); sesuatu = String(sesuatu); document.write("Variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("
"); sesuatu = Boolean(sesuatu); document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));

Constants ● ●

●

Sebuah tetapan nilai dalam sebuah program. Nilai konstanta tidak dapat diubah selama program dijalankan. Deklarasi konstanta dapat dilakukan dengan cara menuliskan keyword const diikuti dengan nama konstanta dan nilai dari konstanta tersebut.

Constants Rule ●

●

●

Hanya terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasinya. Nama konstanta harus dimulai dengan huruf atau garis bawah ( _ ). Konstanta tidak dapat dideklarasikan ulang dan nilainya tetap.

Event ●

●

●

Aksi yang dilakukan oleh seorang user terhadap object-object pada halaman web yang dapat memicu berjalannya program JavaScript. Dituliskan sebagai atribut dari sebuah element HTML. Browser secara otomatis mengenali atributatribut tertentu sebagai sebuah event.

Event Example Klik Donk!

Branching ● ●

Disebut dengan istilah dicision-making. Memungkinkan aplikasi untuk memeriksa isi sebuah variabel atau hasil perhitungan dan ekspresi kemudian mengambil tindakan yang sesuai.

Branching Example <script language="JavaScript"> var nilai, index; nilai = 80; if(nilai >= 85 && nilai <= 100){ index = "A"; } else if(nilai >= 70){ index = "B"; } else if(nilai >= 50){ index = "C"; } else if(nilai >= 30){ index = "D"; } else { index = "E"; } document.write("Nilai anda adalah : " + nilai); document.write("
"); document.write("Dengan index : " + index);

Function ●

●

Sebuah blok program yang merupakan sekumpulan statement yang bertujuan untuk menyelesaikan suatu tugas tertentu. Sebuah fungsi dibuat untuk membantu mengerjakan tugas yang kompleks secara efektif dan efisien.

Function Rule ●

●

● ●

Tidak boleh sama dengan fungsi yang sudah ada didalam JavaScript. Hanya terdiri dari huruf, angka dan garis bawah (underscore). Tidak boleh diawali dengan angka. Parameter bersifat optional. Namun tanda kurung harus tetap ditampilkan.

Function Example <script language="JavaScript"> function ckMarital(status){ document.getElementById('txtStatus').innerHTML = status; }

Sudah Menikah? : Sudah Belum
Status : <span id="txtStatus">Tidak ditentukan

Dialog Box ●

●

Satu element window yang tampil pada layer paling depan. Kotak dialog memungkinkan program untuk berinteraksi dengan user dengan cara : ➢

Memberikan peringatan kepada user.

➢

Memberikan pilihan kepada user.

➢

Meminta user untuk melengkapi isian pada suatu form field.

Alert – Dialog Box ●

●

Memungkinkan browser untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan (sebagai satu satu parameter dari fungsi). Pada saat kotak dialog ini muncul, user tidak punya pilihan lain selain menekan tombol OK.

Alert Example – Dialog Box <script language="JavaScript"> alert("Perhatian!"); alert("Ini adalah contoh dari fungsi Alert.");

Confirm – Dialog Box ●

●

Fungsi Confirm hampir sama seperti fungsi Alert, dengan tambahan kita bisa melakukan pilihan OK atau Cancel. Pada saat kita pilih OK maka fungsi ini akan mengirimkan nilai true dan mengirimkan nilai false jika kita memilih Cancel.

Confirm Example – Dialog Box <script language="JavaScript"> function ckMarital(){ if(confirm("Apakah anda benar-benar sudah menikah?")){ document.getElementById("ckStatus").checked = true; } else { document.getElementById("ckStatus").checked = false; } }

Sudah Menikah? : Ya

Prompt – Dialog Box ●

●

Sedikit berbeda dibandingkan kedua fungsi sebelumnya. Karena dilengkapi dengan satu cara untuk mendapatkan informasi yang diberikan oleh user. Terdiri dari 2 komponen: Pertama, teks untuk pertanyaan dan yang kedua adalah teks default dari field informasi yang akan diisi oleh user.

Prompt Example – Dialog Box <script language="JavaScript"> var nama; nama = prompt("Siapakah nama kekasih anda?",""); document.write("Nama kekasih anda adalah : " + nama);

Any Question?