Belajar JavaScript (Part2): Variabel JavaScript, Tipe Data Variabel dan Objek JavaScript

tutorial javascript

SeniKoding.com - Sebelum malanjutkan belajar JavaScript di part ini, mungkin Anda akan membaca part sebelumnya yaitu tentang Tutorial Belajar JavaScript (Part1): Apaitu JavaScript dan Sejarah JavaScript.

Tutorial Belajar JavaScript Variabel JavaScript


Variabel adalah tempat menyimpan data atau mengganti dengan alias data tersebut. Variabel diperlukan karena data bisa berubah-ubah dan seringkali perlu dikirimkan ke suatu fungsi yang berbeda. Untuk mendeklarasi/membuat variabel, gunakanlah kata kunci "var". Pengisian nilai pada sebuah variabel menggunakan tanda "=" (sama dengan). Hal yang baik dan bijak dalam menyimpan variabel pada suatu tempat yaitu di bagian awal kode. Tujuannya adalah kerapihan sehingga kode mudah dibaca dan pada saat ada kesalahan kode yang kita identifikasi ini adalah kesalahan deklarasi, maka kita tahu kode yang tersebut ada dimana.

Contoh penulisan kode Variabel:

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            var nama= "Edi"; // Deklarasi sekaligus pengisian
            var perusahaan; // Deklarasi variabel saja
            perusahaan= "Google"; //Pengisian variabel
            document.write(nama);
            document.write(perusahaan);
        </script>
    </body>
</html>

Belajar javascript
Pembuatan variabel javascript



Ada beberapa aturan dalam penamaan variabel di dalam JavaScript:

1. Variabel harus dimulai dengan Huruf
2. Variabel juga bisa dimulai dengan $ dan _
3. Seperti JavaScript sendiri, nama Variabel bersifat "case sensitive"

Tutorial Belajar JavaScript Tipe Data Variabel


Beberapa tipe data variabel didalam JavaScript adalah String, Number, Array dan Objek.
Penggunaannya adalah sebagai berikut:
  • String yaitu untuk menyimpan Teks.
  • Number yaitu untuk menyimpan Angka. Angka tersebut bisa bilangan bulat, desimal maupun bilangan yang sangat besar.kecil.
  • Boolean untuk menyimpan nilai Benar dan Salah(True/False).
  • Array untuk menyimpan data dengan tipe data yang sama. Ibarat kerata api, array memiliki gerbong-gerbong. Setiap gerbong itu menyimpan sesuatu yang sama. Jika kerata barang, maka isi dari setiap gerbong adalah barang. Jika kerata penumpang, maka isinya adalah penumpang. Jika misalnya Jika misalnya array of number, maka setiap elemennya adalah Number. Perlu diingat bahwa array adalah JavaScript dimulai dari Index=0.
  • Objek adalah jika Array untuk menyimpan data dengan tipe yang sama, maka objek justru digunakan untuk menyimpan bebrapa data dengan tipe yang berbeda. Misalnya objek mahasiswa dimana untuk setiap objeknya berisi nama bertipe String, NIM bertipe Number, dan seterusnya. Objek bukan hanya bisa menyimpan variabel (property), tetapi juga method.

Baca juga: Tutorial Belajar JavaScript (Part1): Apaitu JavaScript dan Sejarah JavaScript.

Tutorial Belajar JavaScript Objek JavaScript


Didalam JavaScript, sebuah Objek adalah variabel dengan property dan method. Dengan JavaScript kita dapat menentukan dan membuat Objek sendiri. Property adalah nilai yang terkait dengan sebuah objek, sedangkan Method adalah aksi yang bisa dilakukan pada objek tersebut.

Contoh penulisan Objek JavaScript:

<!DOCTYPE html>
<html>
    <body>
    tesss
        <script type="text/javascript">
            mobil = new Object();
            // Property
            mobil.nama ="Suzuki Escudo";
            mobil.model = "JLX";
            mobil.berat = "1000 Kg";
            mobil.warna = "hijau tua metalik";
           
            // method
            mobil.starter();
            mobil.belok_kiri();
            mobil.belok_kanan();
        </script>
    </body>
</html>

Ada beberapa cara membuat Objek JavaScript baru:
  • Mendefinisikan dan menciptakan satu objek, menggunakan Objek Literal.
  • Mendefinisikan dan menciptakan satu objek, dengan "new" kata kunci.
  • Mendefinisikan Konstruktor Objek, dan kemudian membuat objek dari jenis diobjek tersebut.

1. Objek Literal JavaScript


Objek Literal adalah cara termudah untuk membuat Objek JavaScript. Menggunakan Objek Literal, untuk menentukan dan membuat objek dalam satu pernyataan saja.
Sebuah Literal Objek berisi daftar nama: pasangan nilai (seperti usia: 40) di dalam kurung kurawal {}.
var orang= {nama:"Edi", sifat:"Baik", umur:40, warnaKulit:"Putih"};  
 Atau
var orang= {
    nama:"Edi",
    sifat:"Baik",
    umur:40,
    warnaKulit:"Putih" };

Penerapan membuat Objek JavaScript Literal baru dengan empat sifat:

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            var orang= {
                nama:"Edi", 
                sifat:"Baik", 
                umur:40, 
                warnaKulit:"Putih"}; 

                document.write(orang.nama + " berumur " + orang.umur + " dan berkulit " +  orang.warnaKulit);
        </script>
    </body>
</html>

Hasil di Browser:

Belajar javascript
Penulisan Objek JavaScript

2. Objek "New" JavaScript


Objek "New" JavaScript adalah membuat Objek baru yang di manipulasi dari dalam objeknya.

Contoh membuat Objek JavaScript "new" dengan empat sifat:

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            // New Objek
            var orang = new Object();
            
            orang.nama="Edi";
            orang.sifat="Baik"; 
            orang.umur=40;
            orang.warnaKulit="Putih";

            document.write(orang.nama + " berumur " + orang.umur + " dan berkulit " +  orang.warnaKulit);
        </script>
    </body>
</html>

Hasilnya:

Belajar javascript
Penulisan Objek "new"

Catatan: Kedua contoh di atas yaitu Objek Literal dan Objek New, melakukan hal yang sama. Tidak perlu menggunakan Object New (). Direkomendasikan untuk kesederhanaan, mudah dibaca dan kecepatan eksekusi, menggunakan Objek yang pertama yaitu (objek literal).

3. Konstruktor Objek JavaScript


Dua contoh Objek diatas akan dibatasi dalam banyak situasi tertentu, karena Objek tersebut diatas hanya membuat satu Objek saja. Mungkin kita ingin membuat "jenis Objek" yang bisa digunakan untuk membuat banyak Objek dari satu jenis Objek.
 
Berikut cara untuk membuat "jenis Objek" dengan menggunakan fungsi Objek Konstruktor:

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            function orang(nama, sifat, umur, kulit) {
                this.Name = nama;
                this.Sifatnya = sifat;
                this.Umurnya = umur;
                this.warnaKulit = kulit;
            }
            var teman1 = new orang("Budi", "Baik", 25, "Putih");
            var teman2 = new orang("Agus", "Baik", 30, "Hitam");

            document.write("Beberapa sifat teman saya: " + teman1.Name + " : " + teman1.Sifatnya + " dan " + teman2.Name + " : " + teman2.Sifatnya);
        </script>
    </body>
</html>

Hasilnya:

Belajar javascript
Objek Konstruktor

Fungis "orang" diatas adalah Objek Konstruktor.
Setelah kita mempunyai Konstruktor Objek, kita dapat membuat dua atau lebih Objek baru dengan jenis Objek Konstruktor yang sama.
var teman1 = new orang("Budi", "Baik", 25, "Putih");
var teman2 = new orang("Agus", "Baik", 30, "Hitam");

Berikut ini adalah Objek Standard Javascript:
  • Objek String: menyediakan banyak jenis metode yang memungkinkan kita untuk memanipulasi variabel jenis String.
  • Number: memungkinkan kita untuk membuat operasi terhadap bilangan.
  • 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.
  • Boolean: memungkinkan kita untuk membuat nilai boolean. Dalam artian elemen yang mempunyai dua kondisi yaitu Benar atau Salah.
  • Date: memungkinkan kita untuk membuat dan memanipulasi Tanggal dan juga Durasi Waktu.
  • Math: memungkinkan kita untuk memanipulasi fungsi-fungsi Matematika, seperti contohnya fungsi Trigonometri.
  • Function: memungkinkan kita untuk membuat fungsi yang sesuai dengan kebutuhan.
  • RegExp: memungkinkan kita untuk membuat satu ekspresi umum (Regular Expression). Ekspresi ini berguna untuk melakukan operasi-operasi yang lebih canggih terhadap variabel jenis String.

Sampai disini Belajar JavaScript (Part2): Variabel JavaScript, Tipe Data Variabel dan Objek JavaScript, Semoga bermanfaat.

- Salam -


Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Belajar JavaScript (Part2): Variabel JavaScript, Tipe Data Variabel dan Objek JavaScript"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -