Java Script, Tipe Data, dan Hirarki Object

Cerita Dosen, Sepriano, M.Kom - Pada Pertemuan ke-13 kali ini kita akan membahas tentang Java Script, Tipe Data, Hirarki Object pada penjelasan berikut:

Cara Memasukkan kode JavaScript ke dalam HTML

Cara pertama untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan menggunakan tag <script> secara internal. Internal disini berarti bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML, atau di dalam satu file HTML.

Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan diinput diletakkan diantara tag pembuka <script> dan tag penutup </script> seperti berikut ini:

//kode javascript diletakkan disini

</script>

Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah

HTML, tetapi JavaScript.

Sebagai contoh cara penginputan JavaScript dengan tag <script>, berikut adalah kode

HTMLnya:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

alert("Hello World!!");

</script>

</head>

<body>

<h1>Belajar JavaScript</h1>

<p>Saya sedang belajar JavaScript</p>

<p>Belajar Web Programming</p>

</body>

</html>

Dalam contoh diatas, saya meletakkan tag <script> di dalam tag <head> dari HTML (pada baris ke 7). Tag <script> tersebut berisi kode JavaScript: alert(“Hello World!!”);. alert() adalah fungsi dalam JavaScript yang akan menampilkan pesan ke dalam web browser. Fungsi ini sering digunakan dalam proses pembuatan program JavaScript untuk menampilkan output sederhana. Fungsi alert membutuhkan 1 inputan (argumen) bertipe

String. Kita akan membahas cara penulisan fungsi dan tipe-tipe data JavaScript pada tutorial-tutorial selanjutnya.

Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)

Cara berikutnya untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan

Event Handler dari dalam tag HTML.

Konsep Event Handler akan kita pelajari secara khusus pada tutorial terpisah, namun secara sederhananya, event handler adalah pemanggilan kode javascript ketika ‘sesuatu’ terjadi dalam tag HTML.

Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di arahkan mouse, dan lain-lain. Event handler di dalam JavaScript ditulis dengan penambahan kata on. Sehingga jika sebuah tombol di-klik, maka disebut sebagai onclick, jika mouse berada diatas element disebut sebagai onmouseover, dan lain-lain.

Sebagai contoh, ketika sebuah tombol di-klik, maka kita bisa menampilkan alert(“Hello

World!!”). Berikut adalah contoh kode programnya:

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript</title>

</head>

<body>

<h1>Belajar JavaScript</h1>

<p>Saya sedang belajar JavaScript</p>

<p>Belajar Web Programming</p>

<button onclick="alert('Hello World!!')">Klik Saya

</body>

</html>

Dari pembahasan sebelumnya, telah membuat form seperti di bawah ini

Bagaimana menampilkan jendela konfirmasi dan peringatan

Kemudahan untuk menjalankan JavaScript hanya dengan web browser, memberikan permasalah tersendiri untuk programmer. Biasanya dalam membuat program adakalanya kita melakukan kesalahan penulisan program, seperti salah penulisan fungsi, atau lupa menambahkan tanda “;” sebagai penutup baris. Biasanya pesan kesalahan akan langsung ditampilkan, dan kita tinggal melakukan koreksi.

Akan tetapi, pesan kesalahan (error) untuk JavaScript tidak langsung ditampilkan web browser. Web browser pada dasarnya adalah aplikasi untuk menampilkan halaman web, dan secara default web browser “menyembunyikan” permasalahan coding halaman web yang ditampilkan. Hal ini berguna untuk pengguna awam yang pasti akan bingung melihat pesan-pesan error dari sebuah halaman web.

Khusus untuk programmer, kita butuh hal sebaliknya, yaitu agar web browser dapat menampilkan pesan kesalahan dari program yang kita buat.

Sesuai dengan namanya, Developer Tools adalah fasilitas yang dirancang untuk pengembangan web. Dengan fitur ini, kita bisa menampilkan pesan kesalahan JavaScript, HTML, CSS dan melihat efeknya secara real time.

Untuk mengakses fitur ini, cari menu Tools, lalu pilih salah satu Developer Tools atau JavaScript Console. Developer Tools bisa juga dibuka dengan shortcut tombol keyboard: ctrl+shift+i. Untuk kenyamanan, anda dapat menghapalkan tombol shortcut tersebut karena kita akan sering menggunakan fitur Developer Tools ini.

Contoh kasus penggunaan jendela peringatan dan Konfirmasi

Pada pertemuan sebelumnya telah kita buat tombol submit seperti di bawah ini

Selanjutnya untuk menampilkan kode menggunakan javascript, lakukan perubahan seperti di bawah ini

Lalu tambahkan javascript seperti di bawah ini

Penjelasan:

Dari onClick=”clickSaya()” , event tersebut akan mencari kode javascript yang dibuat dengan awalan <script> </script> den mencari function clickSaya()
Perhatikan penulisannya karena bersifat case sensitive
Dari script di atas, ketika kita memilih tombol Simpan maka akan tampil seperti gambar di bawah ini

Selanjutnya untuk script konfirmasi, lakukan seperti di bawah ini

Maka akan dihasilkan seperti gambar di bawah ini

Jika pilihan Cancel (jawaban==false) maka akan muncul pesan

Jika pilihan Ok (jawaban==true) maka akan muncul pesan

Tipe data

1. String

Tipe data String di dalam JavaScript adalah tipe data yang terdiri dari kumpulan karakter yang berurutan. Atau di dalam penggunaan sehari-hari string adalah tipe data yang menampung nilai text atau kalimat.

Untuk membuat sebuah tipe data string, kita hanya tinggal menambahkan tanda kutip (bahasa inggris: ’quotes’) pada awal dan akhir dari text. JavaScript mendukung penggunaan tanda kutip satu ( ’ ) manupun tanda kutip ganda ( ’’ ). Didalam sumber bahasa inggris sering disebut sebagai single quote dan double quote.

Di dalam JavaScript, kedua tanda kutip ini bisa digunakan secara terpisah, maupun secara bersamaan. Perhatikan contoh berikut ini:

Contoh dalam program: Tambahkan

Lalu tambahkan script java di bawah ini

Lihat kasus berikut ini jika kita menggunakan angka untuk dijumlahkan

Tambahkan script

Berikut adalah Escape Sequences di dalam JavaScript:

a. \0: Karakter NUL

b. \b: Backspace

c. \t: Horizontal tab d. \n: Newline

e. \v: Vertical tab f. \f: Form feed

g. \r: Carriage return

h. \”: Tanda kutip dua (double quote)

i. \’: Tanda kutip satu (apostrophe atau single quote)

j. \\: Garis miring backslash

k. \xXX: Karakter Latin-1 dengan menggunakan dua digit heksa desimal XX

l. \uXXXX: Karakter Unicode dengan menggunakan empat digit heksa XXXX Contoh script:

var nama = 'Juma\'in';

//hasil: Juma'in

var situs = 'http:\\\\www.dunia.com';

//hasil: http:\\www.dunia.com

var pesan = "dia berkata:I\"ll be back";

//hasil: dia berkata:I'll be back

var pesan2 = "Kalimat ini terdiri dari\n 2 baris";

// hasil: Kalimat ini terdiri dari

// 2 baris

var santai = "Saya sedang ngopi di caf\u00e9";

//hasil: Saya sedang ngopi di café

</script>

2. Numeric

Dengan memberikan nilai angka ke dalam sebuah variabel, secara otomatis variabel tersebut akan bertipe angka (number). Variabel dengan tipe angka, akan memiliki method yang bisa digunakan untuk memproses data yang ada didalam varibel tersebut.

Di dalam JavaScript, method untuk tipe angka akan lebih banyak berfungsi untuk mengontrol bagaimana angka tersebut ditampilkan ke dalam web browser, dan umumnya akan menghasilkan nilai dengan tipe data String. Kita akan membahas method untuk tipe data number ini secara satu-persatu.

Contoh kasus dapat dilakukan seperti di bawah ini