1 MODUL 6 JAVA SCRIPT Tipe Data, Variabel, Object Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang2 Pertemuan Tujuan : 1. Mahasiswa dapat me...
Pertemuan 6 6.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah – perintah javascript 2. Mahasiswa dapat membuat variabel pada javascript 3. Mahasiswa dapat memakai tipe data dan konversi variabel 6.2 Materi : 1. Variabel Java Script 2. Tipe data 3. Konversi Variabel 6.3 Alat Bantu 1. Notepad ++ 2. Page, Image 6.4. Prosedure Praktikum 1. Peserta membaca dan memperlajari materi praktkum sebelumnya 2. Instruktur menerangkan dan menjelaskan teori dan cara kerja 3. Peserta mempraktikkan materi percobaan 4. Peserta membuat penyelesaian terhadap soal latihan, tugas dan berhak mendapatkan nilai praktikum harian 6.5 Teori Tipe Data dan Variabel pada Javascript Lazimnya bahasa pemrograman, javascript memiliki tipe data dan variabel. Variabel pada javascript seperti kotak atau wadah yang digunakan untuk menyimpan informasi yang senantiasa dapat diload. Sedangkan tipe data terkait dengan jenis data atau nilai yang disimpan dalam variabel. Variabel adalah tempat dimana kita menyimpan nilai-nilai atau informasi-informasi pada JavaScript. Variabel yang dideklarasikan dapat di isi dengan nilai apa saja. Dalam JavaScript pendeklarasian sebuah variabel sifatnya opsional, artinya anda boleh mendeklarasikan atau tidak hal tersebut tidak menjadi masalah. Jika anda memberi nilai pada variabel, maka dalam JavaScript dianggap bahwa anda telah mendeklarasikan variabel tersebut. Aturan penamaan variabel : • Harus diawali dengan karakter (huruf atau baris bawah) • Tidak boleh menggunakan spasi • Huruf Kapital dan kecil memiliki arti yang berbeda • Tidak boleh menggunakan kata-kata yang merupakan perintah dalam JavaScript. Deklarasi Variabel Var nama_variabel = nilai Atau Nama_variabel = nilai Contoh : var nama;
var nama = ” Zaskia Mecca” var X = 1998; var Y; Nama = ”Bunga Lestari” X = 1990; Y = 08170223513 Tipe Data Tidak seperti bahasa pemrograman lainnya, JavaScript tidak memiliki tipe data secara explisit. Hal ini dapat dilihat dari beberapa contoh variabel diatas. Anda mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun JavaScript tidak memiliki tipe data secara explisit. JavaScript mempunyai tipe data implisit. Terdapat empat macam tipe data implisit yang dimiliki oleh JavaScript yaitu : • Numerik, seperti : 0222532531, 1000, 45, 3.146789 dsb • String, seperti : “Hallo”, “April”, “Jl. Setiabudi No 17A”, “Cece Kirani” dsb • Boolean, bernilai true atau false • Null, variabel yang tidak diinisilisasi Konversi jenis variabel. Meskipun JavaScript memungkinkan pengaturan perubahan jenis variabel secara transparan, kadang kadang kita perlu juga untuk melakukan konversi jenis variabel secara paksa. Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu : • parseInt() Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan bulat. Sintaksnya adalah sebagai berikut : parseInt(string[, basis]); Agar supaya fungsi parseInt() mengembalikan nilai bilangan bulat, maka parameter yang dilewatkan harus dimulai dengan karakter bilangan [0-9], prefiks hexadesimal 0x, dan/atau karakter +,-,e,dan E. Selain daripada itu maka fungsi parseInt() akan mengembalikan nilai NaN (Not a Number). Jika karakter berikutnya tidak valid, maka dia akan diabaikan oleh fungsi parseInt(), dan akan ditampilkan terpotong jika di bagian depan karakter valid dan bagian belakang karakter tidak valid. Berikut ini salah satu contoh penggunaan fungsi parseInt() : var a = "5"; var b = "10"; document.write(a+b," "); // hasil 510 document.write(parseInt(a)+parseInt(b)," "); // hasil 50
tabel berikut ini memberikan sedikit gambaran penggunaan dari fungsi parseInt() : Contoh parseInt("128.34"); parseInt("12.3E-6"); parseInt("12E+6"); parseInt("Halo"); parseInt("24Halo38"); parseInt("Halo3824"); parseInt("AF8BEF"); parseInt("0284"); parseInt("0284",8); parseInt("AF8BEF",16); parseInt("AB882F",16); parseInt("0xAB882F"); parseInt("0xAB882F",16); parseInt("00100110"); parseInt("00100110",2); parseInt("00100110",8); parseInt("00100110",10); parseInt("00100110",16);
Hasil 128 12 12 NaN 24 NaN NaN 284 2 11504623 11241519 11241519 11241519 100110 38 32840 100110 1048848
• parseFloat() Adalah satu fungsi inti dari JavaScript yang memungkinkan merubah variabel yang dilewatkan dengan parameter tertentu menjadi bilangan desimal, Sintaks dari fungsi parseFloat adalah sebagai berikut : parseFloat(string); tabel contoh tentang penggunaan fungsi parseFloat() Contoh parseFloat("128.34"); parseFloat("128,34"); parseFloat("12.3E-6"); parseFloat("Halo"); parseFloat("24.568Halo38"); parseFloat("Halo38.24"); Tahun 2015
Object. 1. Tentang Obyek Untuk selanjutnya mari kita masuk kebagian berikutnya, yaitu bagian yang berbicara tentang obyek, tujuan dari bagian ini adalah sebagai pengenalan tentang obyek, dan memberikan ide kepada anda apakah yang disebut obyek itu ? ,yang merupakan konsep penting di dalam pembuatan kode JavaScript. JavaScript memperlakukan elemen elemen yang tampil di jendela navigator kita sebagai suatu obyek , yang artinya adalah elemen yang : •
Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa mengetahui dimana letak/lokasi obyek itu sebenernya. • Dimana kita mengasosiasikan dengan kondisi atau sifat-sifat khusus (properti) Pengertian diatas mungkin sedikit membingungkan bagi anda, tapi marilah kita lihat contoh berikut ini untuk memperjelas. Misal kita bayangkan ada satu pohon yang terletak di dalam satu kebun, dimana rumah itu mempunyai banyak kamar, dan di salah satu kamarnya terdapat kasur. Mari kita lihat hirarkinya sebagai berikut. o RT
Rumah • Kamar o Meja o Kasur
Luas Warna Type • Ruang keluarga • Dapur Rumah tetangga Balai RT • Kursi • Papan pengumuman
= 12 X 2 meter = Biru = single
Kasur yang berada di rumah dapat di tuliskan sebagai berikut : RT.Rumah.Kamar.Kasur Sedangkan Kursi yang terletak di balai RT, kita tuliskan sebagai berikut : RT.Balai RT.Kursi Bayangkan sekarang kita ingin ngganti sprei kasur menjadi warna merah yang terletak di kamar, maka kita cukup mengetik perintah berikut ini RT.Rumah.Kamar.Kasur.warna=merah
Nah begitulah ilustrasi tentang bagaimana kita memperlakukan obyek di dalam JavaScript, perbedaanya adalah bukan RT sebagai bentuk obyek kita, akan tetapi navigator kitalah sebagai obyek utamanya. 2. Obyek dari Navigator (browser) JavaScript membagi satu halaman Navigator dalam berbagai obyek-obyek, dengan tujuan untuk memudahkan kita untuk mengakses salah satu dari mereka dan memanipulasinya dengan cara mengubah sifat/kondisi (properti) mereka. Kita mulai dari obyek yang paling besar diantara semuanya (yang berisi semua obyek lainnya), kemudian kita turun berdasarkan tingkatan atau hirarkinya sampai kepada obyek yang kita inginkan. • Obyek paling besar adalah obyek jendela (window) dari navigator. • Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah halaman, kita sebut obyek dokumen atau document. • Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya. Untuk mengakses satu obyek, kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ). ambil sebagai contoh satu obyek (yang bernama checkbox) berikut ini: <TITLE>Contoh Program Javascript Hasil:
• Form untuk untuk contoh ini kita beri nama f1 tujuannya adalah untuk membedakan dengan form form lainnya di dalam satu dokumen, dan dituliskan dalam kode berikut ini : window.document.f1. • Tombol checkbox, dan kita beri nama cek dituliskan dalam bentuk berikut ini : window.document.f1.cek • Nilai dari cek nantinya dapat ditulikan sebagai berikut: window.document.f1.cek.value DOCUMENT.GETELEMETBYID. Dalam Javascript juga memiliki cara lain dalam penamaan variable interface. Jika pada pembahasan sebelumnya kita mempelajari pemanggilan variable dengan jenis “name”, maka sekarang kita akan mempelajari mekanisme deklarasi variable dan pemanggilannya yang berjenis “Id”. Deklarasi pemanggilan variablenya adalah menggunakan parameter: Document.getElementById(“namaId”).value.
Contoh pengunaan: <TITLE>Contoh Program Javascript Contoh pilihan Cara mengidentitaskan id “cek” adalah dengan deklarasi: document.getElementById(“cek”).value 3. Obyek Standart JavaScript Selain obyek navigator, kita juga mengenal obyek standart dari JavaScript. Obyek obyek ini distandarisasikan oleh asosiasi ECMA (European Computer Manufacturer Association). Berikut ini adalah daftar obyek standart JavaScript Nama Obyek Array
Boolean Date Function Math Number RegExp
String
Keterangan obyek array memungkinkan kita untuk membuat tabel. dia mempunyai berbagai Metode untuk menambahkan, menghapus, atau juga mengambil elemen elemen dari suatu tabel dan juga mengurutkan elemen elemen tersebut. obyek boolean memungkinkan kita untuk membuat nilai boolean, dalam artian elemen yang mempunyai dua kondisi : benar atau salah obyek data memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu. obyek function memungkinkan kita untuk membuat fungsi yang sesuai dengan kebutuhan (personalized) obyek math memungkinkan kita untuk memanipulasi fungsi fungsi matematika, seperti contohnya fungsi trigonometri obyek number memungkinkan kita untuk membuat operasi operasi dasar terhadap bilangan obyek regexp memungkinkan kita untuk membuat satu ekspresi umum(regular expression). ekspressi ini berguna untuk melakukan operasi operasi yang lebih canggih terhadap variabel jenis String obyek string menyediakan banyak jenis Metode yang memungkinkan kita untuk memanipulasi variabel jenis String
4. Obyek Array. Obyek array adalah satu obyek yang memungkinkan kita untuk membuat dan memanipulasi tabel, berikut ini adalah sintaks untuk membuat tabel : var x = new Array(elemen1[, elemen2, ...]);
jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi tabel kosong pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut. Sebagai tambahan obyek array mempunyai dua karakteristik properti yaitu properti input dan length. Berikut ini adalah tabel daftar beberapa metode standart dari obyek array Metode concat(tab1,tab2[,tab3, …])
join(table) atau Table.join() pop(table) atau Table.pop() Table.push(nilai1[,nilai2,. …]) Table.reverse() Table.shift() Table.slice() Table.splice() Table.sort() Table.unshift(nilai1[,nilai2, …]) Table.toString() Table.unshift() Table.valueOf()
Keterangan memungkinkan kita untuk menambahkan (concatenate) banyak tabel, dalam artian membuat satu tabel dari beberapa tabel yang berbeda yang dilewatkan sebagai parameter Metode. mengirimkan satu variabel string yang berisi semua elemen dari tabel menghapus elemen terakhir dari tabel. menambahkan satu atau beberapa elemen ke tabel membalikkan (inverse) urutan elemen di tabel menghapus elemen pertama dari tabel mengirimkan satu tabel yang berisi sebagian elemen dari tabel utama menambahkan dan mengurangi elemen elemen tabel mengurutkan elemen elemen tabel mengirimkan kembali kode sumber yang memungkinkan kita untuk membuat obyek array. mengirimkan kembali variabel string yang berhubungan dengan instruksi pembuatan obyek array menambahkan kembali satu atau beberapa elemen pada bagian awal dari tabel mengembalikan nilai dari obyek array dimana obyek array itu yang jadi referensi dari tabel tersebut.
5. Obyek Boolean. obyek boolean adalah obyek standart dari JavaScript yang memungkinkan kita untuk memanipulasi nilai nilai jenis boolean. Berikut ini adalah sintaks yang digunakan untuk membuat obyek booelan : var x = new Boolean(parameter) parameter bisa berupa bisa berupa satu nilai (True atau False) atau bisa juga satu ekspresi, yang mana ekspressi akan di perhitungkan sebagai nilai boolean. Jika tidak ada nilai parameter yang dilewatkan atau nilai 0 atau string kosong atau null atau undefined atau juga NaN(Not a Number), nilai boolean akan diinisialisaikan ke False. Sebaliknya obyek boolean akan mempunyai nilai True Berikut ini adalah tabel daftar beberapa Metode standart dari obyek boolean Metode toSource()
Tahun 2015
Keterangan Metode ini mengirimkan kembali kode sumber yang memungkinkan kita untuk membuat obyek boolean
Metode ini mengirimkan kembali string yang berhubungan dengan instruksi untuk membuat obyek boolean Metode ini mengembalikan nilai asal dari obyek boolean
6. Obyek Date obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga manajemen waktu (durasi waktu). Sintakssintaks untuk membuat obyek date adalah berikut ini : • Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini. • Nama_dari_obyek = new Date(“hari, bulan tanggal tahun jam:menit:detik”) parameter berbentuk string dengan batas batas pemisah sepeti format diatas. • Nama_dari_obyek = new Date(tahun, bulan, hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma • Nama_dari_obyek = new Date(tahun, bulan, hari, jam, menit, detik[,perseribudetik]) parameter adalah 6 integer yang dipisahkan oleh tanda koma JavaScript menyimpan tanggal dalam bentuk string yang berisi hari, bulan, tahun, jam, menit, dan detik. Meskipun demikian sangat sulit bagi kita untuk bisa mengakses satu elemen waktu diatas dengan menggunakan obyek string (sub bab 2.3.5), karena setiap elemen mempunyai ukuran yang berbeda beda.. Sebaliknya obyek date memungkinkan kita untuk mengakses dan memodifikasi satu elemen tersebut. Berikut ini adalah tabel beberapa Metode standart dari obyek date Metode getDate()
getDay()
getFullYear()
getHours()
Tahun 2015
Keterangan untuk memperoleh angka yang berkorespondensi dengan nomer hari dalam satu bulan. untuk memperoleh angka yang berkorespondensi dengan nomer hari dalam satu minggunya
Jenis nilai hasil hasilnya adalah satu integer dengan nilai antara 1 s/d 31 yang berkorespondensi dengan nomer hari dalam satu bulan hasil adalah integer yang berhubungan dengan nomer hari dalam seminggu • 0 : minggu • 1 : senin •…
untuk memperoleh angka yang berkorespondensi dengan tahun dalam 4 bilangan penuh untuk memperoleh angka yang berkorespondensi dengan satuan jam
hasilnya adalah integer yang berhubungan dengan tahun yang ditanyakan dengan format XXXX hasilnya adalah integer dengan nilai antara 0 sampai 23 yang berhubungan dengan obyek date
untuk memperoleh angka yang berkorespondesi dengan satuan perseribu detik
obyek hasil adalah integer antara 0 sampai 999 yang berkorespondensi dengan perseribudetik dari obyek yang dilewatkan di parameter.
getMinutes()
untuk memperoleh angka yang berkorespondensi dengan satuan menit
getMonth()
untuk memperoleh angka yang berkorespondesi dengan nomer bulan dalam setahun
obyek hasil adalah integer antara 0 sampai 59 yang berkorespondensi dengan menit dari obyek yang dilewatkan di parameter hasil adalah integer yang berhubungan dengan nomer bulan dalam setahun • 0 : januari • 1 : februari • …..
getSeconds()
untuk memperoleh angka yang berkorespondensi dengan satuan detik
getTime()
untuk memperoleh jumlah detik sejal tanggal 1 januari 1970
getTimeZoneOffset()
untuk memperoleh perbedaan waktu, antara waktu lokal dan GMT untuk memperoleh nilai tahun dalam 2 bilangan dari obyek date untuk mengkonversi satu tanggal menjadi satu string dengan format GMT untuk mengkonversi satu tanggal menjadi satu string dengan format local
getYear()
toGMTString()
toLocalString()
setDate(X)
setDay(X)
Tahun 2015
untuk memberikan angka yang berkorespondesi dengan nomer hari dalam satu bulan untuk memberikan angka yang berkorespondensi dengan nomer hari dalam satu minggu
hasil adalah integer antara 0 sampai 59 yang berkorespondensi dengan detik dari obyek yang dilewatkan di parameter hasilnya adalah integer, Metode ini sangat berguna untuk melewatkan satu tanggal ke tanggal yang lain, atau juga menambahkan dua tanggal, etc hasilnya adalah integer yang berkorespondensi berapa menit perbedaan dengan GMT hasilnya adalah integer yang berkoresondesni dengan tahun XX hasilnya adalah string dengan format Wed, 3 dec 2003: 15:15:20 GMT hasilnya adalah string dengan format tergantung dari sistem local sebagai contoh : 3/12/03 15:15:20 parameter adalah integer antara 1 dan 31 yang berkorespondensi dengan nomer hari dalam satu bulan parameter adalah integer yang berkorespondensi dengan nomer hari dalam seminggu: • 0 : minggu • 1 : senin •…
untuk memberikan angka yang berkorespondesi dengan nomer bulan
setTime(X)
untuk menentukan tanggal
Praktikum Pemrograman Berbasis Web parameter adalah integer antara 0 sampai 23 yang berkorespondensi dengan angka jam parameter adalah integer antara 0 sampai 11 yang berkorespondensi dengan nomer bulan • 0 : januari • 1 : februari • …. parameter adalah integer yang berkorespondesi dengan jumlah detik sejak tanggal 1 januari 1970
7. Obyek Math obyek math adalah suatu obyek yang mempunyai banyak Metode dan properti untuk memanipulasi bilangan bilangan dan juga fungsi fungsi matematika. Apapaun Metode atau properti yang digunakan kita harus memulainya dengan kata Math, contohnya adalah sebagai berikut : Math.cos(1); Berikut ini adalah tabel beberapa Metode standart dari obyek math : Metode abs()
ceil()
floor()
Keterangan mengembalikan nilai absolut dari satu bilangan, kalau bilangan positif dia akan mengirimkan kembali bilangan itu, sebaliknya kalau bilangan negatif, dia akan mengirimkan bentuk positifnya
Contoh
mengembalikan nilai integer terkecil yang lebih besar sama dengan nilai parameter yang diberikan
x = Math.ceil(6.01); //hasilnya x = 7
mengembalikan nilai integer terbesar yang lebih kecil sama dengan nilai parameter yang diberikan
x = Math.abs(3.17); //hasilnya x = 3.17 x = Math.abs(-3.17); //hasilnya x = 3.17
x = Math.ceil(3.99); //hasilnya x = 4 x = Math.floor(6.01); //hasilnya x = 6 x = Math.floor(3.99); //hasilnya x = 3
8. Obyek String. Obyek string adalah satu obyek yang berisi beberapa Metode dan properti untuk memanipulasi data jenis string. Obyek string sendiri hanya mempunyai satu properti yaitu properti length untuk memperoleh panjang dari variabel data string. Sintaks dari properti ini adalah sebagai berikut : x = nama_variabel_string.length; x = ('sembarang teks').length; Metode dari obyek string memungkinkan kita untuk memperoleh satu potongan/bagian dari data string dan juga memodifikasinya. Berikut ini adalah tabel beberapa Metode standard dari obyek string : Metode string.big() string.small() string.blink() string.bold() string.charAt(posisi) string.charCodeAt(posisi) concat(teks1,teks2,… ) string.fontcolor(warna) string.fontsize(ukuran) string.indexOf(substring, posisi)
Keterangan menaikkan ukuran huruf satu point menurunkan ukuran huruf satu point mentransformasi teks menjadi teks berkedip kedip memtransformasi huruf di teks teks menjadi huruf tebal (tag ) mengembalikan karakter di posisi ke parameter posisi mengembalikan kode Unicode di posisi ke parameter posisi menyambungkan teks teks yang dimasukkan sebagai parameter dari ujung ke ujung memodifikasi warna dari teks (parameter warna, bisa berupa teks ataupun bilangan heksadesimal) memodifikasi ukuran dari teks (parameter ukuran dalam bentuk integer) mengembalikan posisi dari substring (huruf atau kumpulan dari huruf huruf dari satu string), dengan pencarian dari arah kiri ke kanan, dimulai dari lokasi parameter posisi. fungsinya sama dengan Metode indexOf akan tetapi pencarian dari arah kanan ke kiri mentransformasi huruf di teks menjadi huruf miring (tag ) mentransformasikan teks menjadi hiperteks (tag ) mentransformasi huruf di teks menjadi huruf dicoret teks (tag <strike>)
