Bagaimana Anda menyimpan variabel dalam html?

Sepanjang artikel ini, Anda akan diminta mengetik baris kode untuk menguji pemahaman Anda tentang konten. Jika Anda menggunakan browser desktop, tempat terbaik untuk mengetikkan kode sampel Anda adalah konsol JavaScript browser Anda (lihat Apa itu alat pengembang browser untuk informasi lebih lanjut tentang cara mengakses alat ini)

Variabel adalah wadah untuk nilai, seperti angka yang mungkin kita gunakan dalam penjumlahan, atau string yang mungkin kita gunakan sebagai bagian dari kalimat

Mari kita lihat contoh sederhana

<button id="button_A">Press mebutton>
<h3 id="heading_A">h3>

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Dalam contoh ini menekan tombol menjalankan beberapa kode. Baris pertama memunculkan kotak di layar yang meminta pembaca untuk memasukkan nama mereka, lalu menyimpan nilainya dalam variabel. Baris kedua menampilkan pesan selamat datang yang menyertakan nama mereka, diambil dari nilai variabel dan baris ketiga menampilkan nama tersebut di halaman

Untuk memahami mengapa ini sangat berguna, mari pikirkan tentang bagaimana kita menulis contoh ini tanpa menggunakan variabel. Itu akan berakhir terlihat seperti ini

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Anda mungkin tidak sepenuhnya memahami sintaks yang kami gunakan (belum. ), tetapi Anda harus bisa mendapatkan idenya. Jika kami tidak memiliki variabel yang tersedia, kami harus menanyakan nama mereka kepada pembaca setiap kali kami perlu menggunakannya

Variabel cukup masuk akal, dan saat Anda mempelajari lebih lanjut tentang JavaScript, variabel tersebut akan mulai menjadi kebiasaan

Satu hal khusus tentang variabel adalah mereka dapat berisi apa saja — bukan hanya string dan angka. Variabel juga dapat berisi data kompleks dan bahkan seluruh fungsi untuk melakukan hal-hal menakjubkan. Anda akan belajar lebih banyak tentang ini seiring berjalannya waktu

Catatan. Kami mengatakan variabel mengandung nilai. Ini adalah perbedaan penting yang harus dibuat. Variabel bukanlah nilai itu sendiri; . Anda dapat menganggapnya seperti kotak karton kecil tempat Anda dapat menyimpan barang

Untuk menggunakan variabel, pertama-tama Anda harus membuatnya — lebih tepatnya, kami menyebutnya mendeklarasikan variabel. Untuk melakukan ini, kami mengetikkan kata kunci

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

let myName;
let myAge;

Di sini kita membuat dua variabel yang disebut

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Catatan. Dalam JavaScript, semua instruksi kode harus diakhiri dengan titik koma (

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Anda dapat menguji apakah nilai-nilai ini sekarang ada di lingkungan eksekusi dengan mengetikkan nama variabelnya saja, mis. g

myName;
myAge;

Mereka saat ini tidak memiliki nilai; . Saat Anda memasukkan nama variabel, Anda harus mendapatkan nilai

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

scoobyDoo;

Catatan. Jangan bingung variabel yang ada tetapi tidak memiliki nilai yang ditentukan dengan variabel yang tidak ada sama sekali — mereka adalah hal yang sangat berbeda. Dalam analogi kotak yang Anda lihat di atas, tidak ada berarti tidak ada kotak (variabel) untuk nilai yang masuk. Tidak ada nilai yang ditentukan berarti ada sebuah kotak, tetapi tidak ada nilai di dalamnya

Setelah Anda mendeklarasikan sebuah variabel, Anda dapat menginisialisasinya dengan sebuah nilai. Caranya dengan mengetikkan nama variabel, diikuti dengan tanda sama dengan (

let myName;
let myAge;

myName = 'Chris';
myAge = 37;

Coba kembali ke konsol sekarang dan ketik baris ini. Anda akan melihat nilai yang Anda tetapkan ke variabel dikembalikan di konsol untuk mengonfirmasinya, dalam setiap kasus. Sekali lagi, Anda dapat mengembalikan nilai variabel Anda dengan mengetikkan namanya ke dalam konsol — coba ini lagi

myName;
myAge;

Anda dapat mendeklarasikan dan menginisialisasi variabel secara bersamaan, seperti ini

let myDog = 'Rover';

Ini mungkin yang paling sering Anda lakukan, karena lebih cepat daripada melakukan dua tindakan pada dua baris terpisah

Anda mungkin juga akan melihat cara berbeda untuk mendeklarasikan variabel, menggunakan kata kunci

let myName;
let myAge;

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Kembali ketika JavaScript pertama kali dibuat, ini adalah satu-satunya cara untuk mendeklarasikan variabel. Desain

let myName;
let myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

let myName;
let myAge;

Beberapa perbedaan sederhana dijelaskan di bawah ini. Kami tidak akan masuk ke semua perbedaan sekarang, tetapi Anda akan mulai menemukannya saat Anda mempelajari lebih lanjut tentang JavaScript (jika Anda benar-benar ingin membacanya sekarang, silakan lihat halaman referensi mari kami)

Sebagai permulaan, jika Anda menulis program JavaScript multibaris yang mendeklarasikan dan menginisialisasi variabel, Anda sebenarnya dapat mendeklarasikan variabel dengan

let myName;
let myAge;

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Catatan. Ini tidak akan berfungsi saat mengetik baris individual ke dalam konsol JavaScript, hanya saat menjalankan beberapa baris JavaScript di dokumen web

Ini berfungsi karena mengangkat - baca untuk detail lebih lanjut tentang masalah ini

Mengangkat tidak lagi bekerja dengan

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

let myName;
let myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Kedua, ketika Anda menggunakan

let myName;
let myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Tetapi yang berikut ini akan menimbulkan kesalahan pada baris kedua

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Anda harus melakukan ini sebagai gantinya

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Sekali lagi, ini adalah keputusan bahasa yang masuk akal. Tidak ada alasan untuk mendeklarasikan ulang variabel — itu hanya membuat segalanya lebih membingungkan

Untuk alasan ini dan lainnya, kami menyarankan Anda menggunakan

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

let myName;
let myAge;

let myName;
let myAge;

Catatan. Jika Anda mencoba kode ini di konsol browser Anda, lebih baik salin & tempel setiap blok kode di sini secara keseluruhan. Ada fitur di konsol Chrome yang mengizinkan deklarasi ulang variabel dengan

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

myName;
myAge;

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Setelah variabel diinisialisasi dengan nilai, Anda dapat mengubah (atau memperbarui) nilai tersebut dengan memberinya nilai yang berbeda. Coba masukkan baris berikut ke konsol Anda

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Anda dapat memanggil variabel apa pun yang Anda suka, tetapi ada batasannya. Secara umum, Anda harus tetap menggunakan karakter Latin (0-9, a-z, A-Z) dan karakter garis bawah

• Anda tidak boleh menggunakan karakter lain karena dapat menyebabkan kesalahan atau sulit dipahami untuk audiens internasional
• Jangan gunakan garis bawah di awal nama variabel — ini digunakan dalam konstruksi JavaScript tertentu untuk mengartikan hal-hal tertentu, sehingga dapat membingungkan
• Jangan gunakan angka di awal variabel. Ini tidak diizinkan dan menyebabkan kesalahan
• Konvensi yang aman untuk dipatuhi disebut , di mana Anda menyatukan beberapa kata, menggunakan huruf kecil untuk seluruh kata pertama dan kemudian menggunakan huruf kapital untuk kata-kata berikutnya. Kami telah menggunakan ini untuk nama variabel kami di artikel sejauh ini
• Buatlah nama variabel yang intuitif, sehingga menggambarkan data yang dikandungnya. Jangan hanya menggunakan satu huruf/angka, atau frasa panjang yang besar
• Variabel peka huruf besar/kecil — jadi

  myName;
  myAge;
  

  6 adalah variabel yang berbeda dari

  const buttonB = document.querySelector('#button_B');
  const headingB = document.querySelector('#heading_B');
  
  buttonB.onclick = () => {
      alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
      headingB.textContent = `Welcome ${prompt('What is your name?')}`;
  }
  

  7
• Satu poin terakhir. Anda juga perlu menghindari penggunaan kata-kata yang dicadangkan JavaScript sebagai nama variabel Anda — yang kami maksud dengan ini adalah kata-kata yang membentuk sintaks JavaScript yang sebenarnya. Jadi, Anda tidak dapat menggunakan kata-kata seperti

  let myName;
  let myAge;
  

  _1,

  myName;
  myAge;
  

  9,

  const buttonB = document.querySelector('#button_B');
  const headingB = document.querySelector('#heading_B');
  
  buttonB.onclick = () => {
      alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
      headingB.textContent = `Welcome ${prompt('What is your name?')}`;
  }
  

  5, dan

  scoobyDoo;
  

  1 sebagai nama variabel. Peramban mengenalinya sebagai item kode yang berbeda, sehingga Anda akan mendapatkan kesalahan

Catatan. Anda dapat menemukan daftar kata kunci cadangan yang cukup lengkap untuk dihindari

Contoh nama baik

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Contoh nama buruk

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

Coba buat beberapa variabel lagi sekarang, dengan mempertimbangkan panduan di atas

Ada beberapa jenis data berbeda yang dapat kita simpan dalam variabel. Di bagian ini kami akan menjelaskannya secara singkat, lalu di artikel mendatang, Anda akan mempelajarinya lebih detail

Sejauh ini kita telah melihat dua yang pertama, tetapi ada yang lain

Anda dapat menyimpan angka dalam variabel, baik bilangan bulat seperti 30 (disebut juga bilangan bulat) atau bilangan desimal seperti 2. 456 (disebut juga float atau angka floating point). Anda tidak perlu mendeklarasikan tipe variabel dalam JavaScript, tidak seperti beberapa bahasa pemrograman lainnya. Saat Anda memberi variabel nilai angka, Anda tidak menyertakan tanda kutip

const buttonA = document.querySelector('#button_A');
const headingA = document.querySelector('#heading_A');

buttonA.onclick = () => {
  const name = prompt('What is your name?');
  alert(`Hello ${name}, nice to see you!`);
  headingA.textContent = `Welcome ${name}`;
}

String adalah potongan teks. Saat Anda memberi variabel nilai string, Anda perlu membungkusnya dengan tanda kutip tunggal atau ganda;

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Boolean adalah nilai benar/salah — mereka dapat memiliki dua nilai,

scoobyDoo;

scoobyDoo;

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Padahal kenyataannya akan lebih banyak digunakan seperti ini

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Ini menggunakan operator "kurang dari" (

scoobyDoo;

scoobyDoo;

Array adalah objek tunggal yang berisi banyak nilai yang diapit tanda kurung siku dan dipisahkan dengan koma. Coba masukkan baris berikut ke konsol Anda

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Setelah array ini ditentukan, Anda dapat mengakses setiap nilai berdasarkan lokasinya di dalam array. Coba garis-garis ini

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Tanda kurung siku menentukan nilai indeks yang sesuai dengan posisi nilai yang ingin Anda kembalikan. Anda mungkin telah memperhatikan bahwa array dalam JavaScript tidak diindeks. elemen pertama berada di indeks 0

Anda akan belajar lebih banyak tentang array di artikel mendatang

Dalam pemrograman, objek adalah struktur kode yang memodelkan objek kehidupan nyata. Anda dapat memiliki objek sederhana yang mewakili sebuah kotak dan berisi informasi tentang lebar, panjang, dan tingginya, atau Anda dapat memiliki objek yang mewakili seseorang, dan berisi data tentang nama, tinggi, berat, bahasa apa yang mereka gunakan, bagaimana

Coba masukkan baris berikut ke konsol Anda

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Untuk mengambil informasi yang disimpan dalam objek, Anda dapat menggunakan sintaks berikut

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Kami tidak akan melihat objek lagi untuk saat ini — Anda dapat mempelajari lebih lanjut tentang objek tersebut di modul mendatang

JavaScript adalah "bahasa yang diketik secara dinamis", yang berarti bahwa, tidak seperti beberapa bahasa lain, Anda tidak perlu menentukan tipe data apa yang akan berisi variabel (angka, string, array, dll. )

Misalnya, jika Anda mendeklarasikan variabel dan memberinya nilai yang diapit tanda kutip, browser akan memperlakukan variabel tersebut sebagai string

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Bahkan jika nilai yang diapit tanda kutip hanyalah angka, itu masih berupa string — bukan angka — jadi berhati-hatilah

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Coba masukkan empat baris di atas ke konsol Anda satu per satu, dan lihat hasilnya. Anda akan melihat bahwa kami menggunakan operator khusus yang disebut

scoobyDoo;

scoobyDoo;

scoobyDoo;

scoobyDoo;

Selain variabel, Anda juga dapat mendeklarasikan konstanta. Ini seperti variabel, kecuali itu

• Anda harus menginisialisasi mereka ketika Anda mendeklarasikannya
• Anda tidak dapat memberi mereka nilai baru setelah Anda menginisialisasi mereka

Misalnya, menggunakan

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

<button id="button_B">Press mebutton>
<h3 id="heading_B">h3>

Jika Anda mencoba melakukan ini menggunakan

myName;
myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Demikian pula, dengan

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Jika Anda mencoba melakukan ini menggunakan

myName;
myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Perhatikan bahwa meskipun sebuah konstanta dalam JavaScript harus selalu menamai nilai yang sama, Anda dapat mengubah isi dari nilai yang dinamainya. Ini bukan perbedaan yang berguna untuk tipe sederhana seperti angka atau boolean, tetapi pertimbangkan sebuah objek

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Anda dapat memperbarui, menambah, atau menghapus properti objek yang dideklarasikan menggunakan

myName;
myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Jika Anda tidak dapat melakukan sebanyak mungkin dengan

myName;
myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

myName;
myAge;

Dalam kursus ini, kami menerapkan prinsip berikut tentang kapan harus menggunakan

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

myName;
myAge;

Gunakan

myName;
myAge;

const buttonB = document.querySelector('#button_B');
const headingB = document.querySelector('#heading_B');

buttonB.onclick = () => {
    alert(`Hello ${prompt('What is your name?')}, nice to see you!`);
    headingB.textContent = `Welcome ${prompt('What is your name?')}`;
}

Ini berarti bahwa jika Anda dapat menginisialisasi variabel saat Anda mendeklarasikannya, dan tidak perlu menugaskannya kembali nanti, jadikan itu konstanta

Anda telah mencapai bagian akhir artikel ini, tetapi dapatkah Anda mengingat informasi yang paling penting? . variabel

Sekarang Anda harus mengetahui jumlah yang wajar tentang variabel JavaScript dan cara membuatnya. Di artikel selanjutnya, kita akan fokus pada angka secara lebih mendetail, melihat bagaimana melakukan matematika dasar di JavaScript

Bagaimana Anda menulis variabel dalam HTML?

Bagaimana Anda menyimpan data variabel?

Bagaimana cara menyimpan variabel JavaScript dalam HTML?

Bagaimana Anda menampilkan data variabel dalam HTML?