Javascript Part 5 : Mengenal Tipe Data Javascript

BELAJAR JAVASCRIPT PART 5 : MENGENAL TIPE DATA JAVASCRIPT
Pada kesempatan kali ini kita akan membahas tentang Tipe Data Pada Javascript . jadi kita akan membahas tipe data apa saja yang ada di javascript. Bagaimana cara menggunakanya dan sebagainya yang berhubungan dengan tipe data pada javascript. Seperti apda tutorial sebelumnya kita akan membahas kasus - kasus dan contoh sederhananya.

MENGENAL TIPE DATA JAVASCRIPT
Kita mulai dengan mengenal tipe data javascript. Javascript memiliki 5 tipe data yang memiliki masing - masing memiliki kegunaan dan fungsinya. Berikut tipe data pada javascript

String
Number
Boolean
Array
Object

TIPE DATA STRING JAVASCRIPT
Type Data String menurut saya memegang peran yang penting. Tanpa tipe data string kita tidak dapat mendefinisikan satu variabel dengan lainya. Sebuah type data string menyimpan serangkaian karakter seperti "Saya Sedang Belajar Javascript" . Sebuah string dapat berupa teks dalam tanda kutip dua(") atau satu(') . indeks string berbasis nol: Karakter pertama adalah dalam posisi 0, yang kedua di 1, dan seterusnya. Berikut adalah contoh penggunaan type data string javascript

<!DOCTYPE html>
<html>
<head>
    <title>Belajar javascript part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body style="font-family: raleway">
    <h1>Tipe Data Number Pada Javascript</h1>
    <h2><a href="www.script-kiddies.org">Script Kiddies</a></h2>

    <!-- ID Hasil -->
    <p id="hasil"></p>

    <script>
        // Tipe data number
        var kalimat = "Belajar Javascript di Script Kiddies";

        // Menampilkan tipe data number pada id hasil
        document.getElementById('hasil').innerHTML = kalimat;
    </script>
</body>
</html>

Dapat kita lihat pada contoh diatas kita membuat sebuah type data string dan kita tampilkan dalam tag <p> berikut hasilnya

TIPE DATA NUMBER JAVASCRIPT
Tipe Data Number adalah tipe data yang berbentuk bilangan bulat. Contohnya adalah 1,2,3,4,5,6,7,8,9,0 ..... dst. Berikut adalah contoh penggunaan tipe data javascript

<!DOCTYPE html>
<html>
<head>
    <title>Belajar javascript part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body style="font-family: raleway;">
    <h1>Tipe Data Number Pada Javascript</h1>
    <h2><a href="www.script-kiddies.org">Script Kiddies</a></h2>

    <!-- ID Hasil -->
    <div id="hasil"></div>

    <script>
        // Tipe data number
        var angka = 50;

        // Menampilkan tipe data number pada id hasil
        document.getElementById('hasil').innerHTML = "Hasilnya adalah " + angka;
    </script>
</body>
</html>

Seperti yang dapat kita lihat pada contoh diatas kita type data number tidak membutuhkan tanda petik ( ' ) tidak sep pada pengisian variabelnya. Dan ketika kita run pada web browser maka hasilnya seperti berikut

TIPE DATA OBJECT JAVASCRIPT
Tipe Data Boolean adalah tipe data yang hanya mempunyai dua nilai, yakni benar (True) atau salah (False). Tipe data boolean sering digunakan untuk membuat alur logika program. Struktur logika seperti if, else, while, dan do while, membutuhkan nilai boolean sebagai ‘pengontrol’ alur program. Mungkin sobat akan menemukan nilai seperti berikut

YES / NO
ON / OFF
TRUE / FALSE

Tetapi Boolean hanya memiliki nilai True or False. Berikut adalah contoh sederhana penggunaan tipe data Boolean pada javascript

<!DOCTYPE html>
<html>
<head>
    <title>Tipe Data Boolean Javascript</title>
</head>
<body style="font-family: raleway">
<h2>Tipe Data Boolean Pada Javascript</h2>
Angka 10 Lebih Besar Daripada 9 ( 10 > 9)<br><br>
<button onclick="myFunction()">Cek Kebenaran</button>

<p id="demo">

<script type="text/javascript">
function myFunction() {
    document.getElementById('demo').innerHTML = 10 > 9;
}
</script>

</body>
</html>

Jadi kita akan membuat pengecekan. Ketika kita click buttonya kita akan mengecek apakah variabel yang dibuat benar atau salah. Karena kita mengisikan 10 > 9 maka akan keluar output True jika kita membuat 10 < 9 maka outputnya adalah false

TIPE DATA ARRAY JAVASCRIPT
Tipe Data Array adalah tipe data yang dapat menyimpan beberapa nilai dalam satu buah variabel. Dan nilai dalam variabel tersebut diberikan nomor masing - masing sesuai urutanya. Element pertama dalam array adalah 0, kedua 1 dan seterusnya. Untuk mempermudah kita dalam memanggila atau menampilkan array perhatikan contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Belajar javascript part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body style="font-family: raleway;">
    <h1>Tipe Data Number Pada Javascript</h1>
    <h2><a href="www.script-kiddies.org">Script Kiddies</a></h2>

    <!-- ID Hasil -->
    <div id="hasil"></div>

    <script>
        // Tipe data array
        var hewan = ["Kambing", "Macan", "Kucing"];

        // Menampilkan tipe data number pada id hasil
        document.getElementById('hasil').innerHTML = "Menampilkan element ke 2 yaitu = " + "<b>" + hewan[1] + "</b>"; // Urutan Array berawal dari 0
    </script>
</body>
</html>

Perhatikan pada contoh type data diatas. Terdapat tipe data array didalam variabel hewan

var hewan = ["Kambing", "Macan", "Kucing"];

Didalam variabel array hewan terdapat data Kambing, Macan, Kucing. Berarti angka penyebut untuk Kambing adalah [0], Macan[1], Kucing [2]. Angkanya dimulai dari 0. Dan untuk mengakses/menampilkan adalah sebagai berikut

hewan[1]

Ini berarti kita memilih data array didalam variabel hewan urutan ke 1. Dan akan ditampilkan hewan karena hewan adalah urutan ke 1, lebih detailnya seperti berikut :

0 = Kambing
1 = Macan
2 = Kucing

Saya juga menambahkan kalimat " Menampilkan element ke 2 " seperti yang dapat kita lihat diatas dan kita dapat menambahkan plus ( + ) untuk menggabungkan element html dan variabelnya.

TIPE DATA OBJECT JAVASCRIPT
Tipe data object berisi data yang banyak di dalam sebuah variabel. Memiliki nama dan valuenya masing - masing. Seperti contoh berikut

<!DOCTYPE html>
<html>
<head>
    <title>Belajar javascript part 5 : Mengenal Tipe Data Pada Javascript</title>
</head>
<body style="font-family: raleway">
    <h1>Tipe Data Object Pada Javascript</h1>
    <h2><a href="www.script-kiddies.org">Script Kiddies</a></h2>

    <!-- ID Hasil -->
    <div id="hasil"></div>

    <script>
        // Tipe data object
        var manusia = {
            nama : "Yogi",
            alamat : "Madiun",
            umur : 17,
            status : "lajang"
        };

        // Menampilkan tipe data number pada id hasil
        document.getElementById('hasil').innerHTML = manusia.nama + " Tinggal di " + manusia.alamat + " Dia Sekarang berumur "+ manusia.umur +" Tahun dan statusnya adalah " + manusia.status;
    </script>
</body>
</html>

Disini terdapat tipe data object

// Tipe data object
        var manusia = {
            nama : "Yogi",
            alamat : "Madiun",
            umur : 17,
            status : "lajang"
        };

nama,alamat,umur,status adalah nama data. Dan Yogi, Madiun, 17, lajang adalah valuenya. Untuk mengakses datanya tuliskan variabel, dan kemudian ikuti dengan nama data. Contohnya saya ingin menuliskan data nama dan penulisanya adalah manusia.nama, maka akan ditampilkan Yogi. Dan ketika script diatas kita jalankan pada web browser maka hasilnya seperti berikut

KESIMPULAN
Itulah jenis - jenis tipe data pada javascript terdapat 5 tipe data yaitu String, Number,Boolean,Array,Object yang memiliki fungsinya masing - masing seperti yang sudah saya jelaskan diatas. Jika sobat memiliki pertanyaan silahkan berikan komentar dibawah dan akan saya balas dengan senang hati ^_^

Referensi : Malas Ngoding

TUTORIAL BELAJAR JAVASCRIPT DASAR LAINYA