Cara menggunakan isi nilai dengan javascript

Artikel ini adalah salah satu artikel dari seri Belajar Javascript Dasar. Kali ini kita akan belajar bagaimana menampilkan output dan menerima input dalam javascript. Secara umum javascript dapat menerima semua masukan dari berbagai elemen form HTML, namun untuk saat ini materi kita belum sampai kesana. jadi sekarang kita akan menggunakan script prompt() sebagai input dari javascript

    
    Say Greeting


    
Selamat datang para pelajar
    

Perhatikan kembali script diatas, pada script diatas secara default kita menyembunyikan teks selamat datang menggunakan css (style=”display. tidak ada"). lalu di bagian bawah body kita sisipkan srcipt untuk memanggil fungsi inputName(). Fungsi ini berisi masukan menggunakan fungsi prompt, dimana akan muncul popup dialog seperti di bawah ini. coba isi dengan nama anda sendiri, lalu lihat apa yang terjadi. Jika teks selamat datang muncul, maka kita telah berhasil mempelajari salah satu input javascript

Keluaran JavaScript

Pada materi di atas, dan materi sebelumnya, secara tidak langsung kita sudah mencoba mengeluarkan input melalui javascript ke dalam elemen html dengan menggunakan metode innerHTML. Kali ini kami akan menjelaskan fungsi lain yang sering digunakan untuk menghasilkan output dari input javascript. Fungsinya adalah sebagai berikut

• innerHTML. tulis keluaran ke dalam tag/elemen HTML
• dokumen. menulis(). tulis hasilnya ke halaman HTML
• jendela. peringatan(). tulis hasilnya ke peringatan popup
• menghibur. catatan(). tulis hasilnya ke browser konsol. Metode ini sering digunakan ketika kita melakukan debugging pada suatu proses

untuk memahami semua contoh di atas, perhatikan sintaks di bawah ini

Lihat script di atas, lalu coba klik tab HTML. Pada kasus diatas, kita tidak menulis apapun pada halaman HTML, kita menulis semua teks dalam javascript menggunakan metode document. menulis(). Pada contoh diatas, script akan secara otomatis menghitung umur kita dengan rumus tahun berjalan new Date(). getFullYear() dikurangi tahun kelahiran
Mari kita amati contoh selanjutnya

Pada script diatas, ketika kita klik tombol 'click me' maka akan muncul popup text. Munculan dipanggil melalui fungsi sayGreeting() yang disisipkan dalam acara onlick

Fungsi keluaran terakhir di JavaScript yang akan kita bahas hari ini adalah konsol. log. Keluaran ini berfungsi sebagai log dan hanya dapat dilihat di browser konsol. Untuk mengetahui apa itu console browser mari kita download terlebih dahulu browser chrome atau firefox kemudian buat script seperti contoh dibawah ini lalu simpan dengan nama console. html

      
      greet


      
      Click Me
         

jalankan/buka file diatas menggunakan browser yang kita download tadi. klik kanan pada browser anda, lalu pilih inspect element. Di bagian bawah halaman akan muncul tab seperti gambar di bawah ini. pilih tab console, lalu coba isi form diatas dan klik tombol yang sudah disediakan. pastikan hasilnya seperti di bawah ini

Selamat. telah kita pelajari selama ini. Itulah penjelasan singkat tentang input/output pada javascript. Jika ada beberapa materi yang kurang dimengerti atau jika ada beberapa pertanyaan yang ingin ditanyakan, silahkan kirim komentar dibawah. Selamat belajar dan tetap semangat. ^_^

Variabel adalah nama yang mewakili nilai. Variabel dapat diisi dengan berbagai nilai seperti

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Bisa kita bandingkan, variabel itu seperti wadah untuk menyimpan sesuatu

Pada kesempatan kali ini kita akan belajar tentang variabel dan tipe data pada Javascript

Mulai dari cara membuat, cara mencetak variabel ke output, memuat ulang, dan menghapusnya dari memori

Siap?

Mari kita mulai…

Cara Membuat Variabel di Javascript

Cara membuat variabel yang biasa digunakan dalam javascript adalah dengan menggunakan kata kunci

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Contoh

var title = "Belajar Pemrograman Javascript";

Pada contoh diatas, kita membuat variabel bernama

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Contoh lain

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Perhatian

Pada contoh di atas, kita menggunakan huruf kapital untuk nama variabel yang terdiri dari dua suku kata

Mengapa tidak menggunakan garis bawah?

Dalam Javascript kami merekomendasikan penggunaan camelCase dalam penamaan. Anda dapat menggunakan kasus ular atau garis bawah seperti ini

var site_name = "Petani Kode";
var visitor_count = 1243;

Itu tidak akan menjadi masalah, program ini masih berlaku. Namun, sebagian besar pemrogram Javascript menggunakan camelCase

Pilihan ada di tangan kamu, mau ikut mayoritas atau minoritas, 😄

Baca juga. Mengetahui 4 Jenis Gaya Penulisan Kasus pada Kode Program

Lanjut…

Anda juga harus tahu bahwa, selain kata kunci

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

var site_name = "Petani Kode";
var visitor_count = 1243;

Contoh

// membuat variabel dengan kata kunci let
let price = 15000;

// membuat variabel tanpa awalan apapun
stock = 12

Apa perbedaan antara menggunakan

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

var site_name = "Petani Kode";
var visitor_count = 1243;

Perbedaannya terletak pada jangkauan dan penggunaannya. Nanti akan kita bahas lebih mendalam

Satu pertanyaan lagi

"Apa yang akan terjadi jika nilai variabel tidak diisi?"

Jawabannya adalah variabel tersebut akan memiliki nilai

var site_name = "Petani Kode";
var visitor_count = 1243;

Contoh

var x;

Maka variabel

var site_name = "Petani Kode";
var visitor_count = 1243;

var site_name = "Petani Kode";
var visitor_count = 1243;

Menampilkan isi dari Variabel

Untuk menampilkan isi variabel, kita dapat menggunakan fungsi untuk menampilkan output seperti

• Fungsi

  var site_name = "Petani Kode";
  var visitor_count = 1243;

  _7 menampilkan keluaran ke konsol javascript;
• Fungsi

  var site_name = "Petani Kode";
  var visitor_count = 1243;

  _8 menampilkan keluaran ke dokumen HTML;
• dan Fungsi

  var site_name = "Petani Kode";
  var visitor_count = 1243;

  _9 menampilkan output ke jendela dialog

Mari mencoba…

Buat file bernama

// membuat variabel dengan kata kunci let
let price = 15000;

// membuat variabel tanpa awalan apapun
stock = 12

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Variabel dalam Javascript</title>
    <script>
        // membuat variabel
        var name = "Petani Kode";
        var visitorCount = 50322;
        var isActive = true;
        var url = "https://www.petanikode.com";

        // menampilkan variabel ke jendela dialog (alert)
        alert("Selamat datang di " + name);
    
        // menampilkan variabel ke dalam HTML
        document.write("Nama Situs: " + name + "<br>");
        document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
        document.write("Status Aktif: " + isActive + "<br>");
        document.write("Alamat URL: " + url + "<br>");
    </script>
</head>
<body>
    

</body>
</html>

Setelah itu coba buka dengan browser dan amati hasilnya

Arti dari tanda plus (

// membuat variabel dengan kata kunci let
let price = 15000;

// membuat variabel tanpa awalan apapun
stock = 12

Mengisi Ulang Variabel

Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya dapat diisi ulang (diubah)

Contoh

// mula-mula kita buat variabel dengan isi seperti ini
var age = 18;

// lalu kita isi ulang
age = 21;

Mengapa Anda tidak menggunakan kata kunci

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Karena kata kunci

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Saat kita menggunakan kata kunci

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Menghapus Variabel

Menghilangkan variabel dalam JavaScript jarang dilakukan. Namun untuk program yang membutuhkan ketelitian dalam pengalokasian memori, perlu dilakukan penghapusan variabel agar penggunaan memori lebih optimal

Penghapusan variabel dapat dilakukan dengan kata kunci

// membuat variabel dengan kata kunci let
let price = 15000;

// membuat variabel tanpa awalan apapun
stock = 12

Contoh

bookTitle = "Belajar Pemrograman Javascript";
delete bookTitle;

Kemudian variabel

// membuat variabel dengan kata kunci let
let price = 15000;

// membuat variabel tanpa awalan apapun
stock = 12

Penghapusan variabel hanya dapat dilakukan pada variabel yang dibuat tanpa awalan. Sedangkan variabel yang dibuat dengan kata kunci

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

var site_name = "Petani Kode";
var visitor_count = 1243;

Mengetahui Tipe Data

Tipe data adalah tipe data yang dapat kita simpan dalam variabel

Ada beberapa tipe data dalam pemrograman Javascript

• Tali (teks)
• Integer atau Angka (bilangan bulat)
• Float (Bilangan pecahan)
• Boolean
• Obyek

Javascript adalah bahasa pengetikan dinamis, artinya kita tidak perlu menulis tipe data saat membuat variabel seperti di C, C++, Java, dll. yang merupakan pengetikan statis

Contoh

var name = "Dian";
var age = 22;
var single = true;

Javascript akan secara otomatis mengenali tipe data yang kita berikan pada variabel

Pada contoh di atas variabel

• // membuat variabel dengan kata kunci let
  let price = 15000;
  
  // membuat variabel tanpa awalan apapun
  stock = 12

  9 tipe data String;

• var x;

  0 adalah tipe data integer;
• dan

  var x;

  _1 adalah tipe data boolean

Kami juga dapat memeriksa ini dengan kata kunci

var x;

Contoh

typeof name;
typeof age;
typeof single;

Hasilnya ada di konsol

Bagaimana kita mengenali tipe data selain menggunakan

var x;

Kita bisa mengenalinya melalui cara penulisannya

Contoh

var siteName = "Petani Kode";
var url = "https://www.petanikode.com";
var visitorCount = 5921; 

Aturan Penulisan Nama Variabel di Javascript

Ada beberapa aturan untuk menulis variabel dalam Javascript

• Penamaan variabel tidak boleh menggunakan angka di depannya

  contoh

  var siteName = "Petani Kode";
  var url = "https://www.petanikode.com";
  var visitorCount = 5921; 
  

  1

• Penamaan variabel dapat menggunakan garis bawah awal

  contoh

  var siteName = "Petani Kode";
  var url = "https://www.petanikode.com";
  var visitorCount = 5921; 
  

  2

• Penamaan variabel direkomendasikan menggunakan camelCase jika terdiri dari dua suku kata

  Contoh

  var siteName = "Petani Kode";
  var url = "https://www.petanikode.com";
  var visitorCount = 5921; 
  

  _3

• Penamaan variabel disarankan menggunakan bahasa Inggris

  Contoh

  var siteName = "Petani Kode";
  var url = "https://www.petanikode.com";
  var visitorCount = 5921; 
  

  _4

Apa berikutnya?

Variabel dan tipe data adalah dua hal dasar yang harus dipelajari dalam bahasa pemrograman apapun

Di Javascript, kita tidak perlu menulis tipe data saat membuat variabel, karena Javascript adalah pengetikan dinamis

Sedangkan pada bahasa pemrograman lain seperti C, C++, C#, Java, dll, kita harus menulis atau mendefinisikan tipe data pada variabel yang dibuat.

Setelah mempelajari tentang variabel, selanjutnya silahkan pelajari tentang

• Operator dalam Javascript
• Bercabang dalam Javascript
• Perulangan dalam Javascript

Jika kurang paham dengan pembahasan di atas, silahkan ajukan pertanyaan melalui kolom komentar