Belajar JavaScript: Tutorial Lengkap dan Praktis
Diterjemahkan oleh
ScribdTranslationsBelajar JavaScript: Tutorial Lengkap dan Praktis
Diterjemahkan oleh
ScribdTranslationsTutorial JavaScript
❮ RumahBerikutnya❯
JavaScript adalah bahasa pemrograman paling populer di dunia.
JavaScript adalah bahasa pemrograman Web.
JavaScript mudah untuk dipelajari.
Tutorial ini akan mengajarkan Anda JavaScript dari dasar hingga lanjutan.
Mulai belajar JavaScript sekarang »
Contoh di Setiap Bab
Dengan editor "Coba Sendiri" kami, Anda dapat mengedit kode sumber dan melihatnya
hasil.
Contoh
JavaScript Pertama Saya
Klik saya untuk menampilkan Tanggal dan Waktu
Coba Sendiri »
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Pertama Saya</h2>
<button type="button">
onclick="[Link]('demo').innerHTML = Date()">
Klik saya untuk menampilkan Tanggal dan Waktu.
<p id="demo"></p>
</body>
</html>
Gunakan Menu
Kami sarankan untuk membaca tutorial ini, dalam urutan yang tercantum di menu.
Jika Anda memiliki layar besar, menu akan selalu ada di sebelah kiri.
Jika Anda memiliki layar kecil, buka menu dengan mengklik tanda menu di atas ☰.
Belajar dengan Contoh
Contoh lebih baik daripada 1000 kata. Contoh seringkali lebih mudah untuk
memahami penjelasan teks daripada.
Tutorial ini melengkapi semua penjelasan dengan klarifikasi 'Coba Sendiri'
contoh.
Jika Anda mencoba semua contoh, Anda akan belajar banyak tentang JavaScript, dalam cara yang sangat
waktu singkat!
Contoh JavaScript »
Mengapa Belajar JavaScript?
JavaScript adalah salah satu dari 3 bahasa yang harus dipelajari oleh semua pengembang web:
[Link] untuk mendefinisikan konten halaman web
[Link] untuk menentukan tata letak halaman web
[Link] untuk memprogram perilaku halaman web
Tutorial ini mencakup setiap versi JavaScript:
JavaScript Asli ES1 ES2 ES3 (1997-1999)
Revisi Utama Pertama ES5 (2009)
Revisi Kedua ES6 (2015)
Semua Penambahan Tahunan (2016, 2017, 2018, 2019, 2020)
IKLAN
Kecepatan Belajar
Dalam tutorial ini, kecepatan pembelajaran adalah pilihan Anda.
Semua tergantung pada Anda.
Jika Anda mengalami kesulitan, ambillah istirahat, atau baca ulang materi tersebut.
Selalu pastikan Anda memahami semua contoh "Coba Sendiri".
Satu-satunya cara untuk menjadi programmer yang pintar adalah: Berlatih. Berlatih.
Latih. Kode. Kode. Kode!
Uji Diri Anda Dengan Latihan
Latihan:
Buat variabel bernamanamaMobildan menetapkan nilaiVolvokepada itu.
var = " ";
Pertanyaan yang Sering Diajukan
Bagaimana cara mendapatkan JavaScript?
Di mana saya dapat mengunduh JavaScript?
Apakah JavaScript Gratis?
Anda tidak perlu mendapatkan atau mengunduh JavaScript.
JavaScript sudah berjalan di browser Anda di komputer Anda, di tablet Anda, dan di
smartphone Anda.
JavaScript gratis digunakan oleh semua orang.
Pembelajaran Saya
Lacak kemajuan Anda dengan program gratis "My Learning" di sini di W3Schools.
Masuk ke akun Anda, dan mulai dapatkan poin!
Ini adalah fitur opsional. Anda dapat belajar di W3Schools tanpa menggunakan My Learning.
Referensi JavaScript
W3Schools mempertahankan referensi JavaScript yang lengkap, termasuk semua objek HTML dan browser.
Referensi berisi contoh untuk semua properti, metode, dan peristiwa, dan terus menerus
diperbarui sesuai dengan standar web terbaru.
Referensi JavaScript Lengkap »
Tes Kuis JavaScript
Uji keterampilan JavaScript Anda di W3Schools!
Mulai Kuiz JavaScript!
Mendorong karir Anda
Dapatkan sertifikasi dari
menyelesaikan kursus JavaScript
Dapatkan sertifikasi w3schools SERTIFIKAT
Pengenalan JavaScript
❮ SebelumnyaSelanjutnya❯
Halaman ini berisi beberapa contoh tentang apa yang dapat dilakukan JavaScript.
JavaScript Dapat Mengubah Konten HTML
Salah satu dari banyak metode HTML JavaScript adalah getElementById().
Contoh di bawah ini "menemukan" elemen HTML (dengan id="demo"), dan mengubah elemen tersebut
Halo JavaScript
Contoh
[Link]("demo").innerHTML ="Halo JavaScript";
Coba Sendiri »
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang Dapat Dilakukan oleh JavaScript?</h2>
<p id="demo">JavaScript dapat mengubah konten HTML.</p>
<button type="button" onclick='[Link]("demo").innerHTML = "Halo "
JavaScript!"'>Klik Saya!</button>
</body>
</html>
JavaScript menerima baik tanda kutip ganda maupun tunggal:
Contoh
[Link]('demo').innerHTML ='Halo JavaScript';
Coba sendiri »
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang Bisa Dilakukan JavaScript?</h2>
<p id="demo">JavaScript dapat mengubah konten HTML.</p>
<button type="button" onclick="[Link]('demo').innerHTML = 'Halo '
JavaScript!'">Klik Saya!</button>
</body>
</html>
JavaScript Dapat Mengubah Atribut HTML
Nilai
Dalam contoh ini, JavaScript mengubah nilai atribut thesrc(sumber) dari tag <img>:
Bola Lampu
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang Bisa Dilakukan JavaScript?</h2>
<p>JavaScript dapat mengubah nilai atribut HTML.</p>
<p>Dalam hal ini, JavaScript mengubah nilai dari atribut src (sumber) dari sebuah</p>
gambar.</p>
<button onclick="[Link]('myImage').src='pic_bulbon.gif'">Nyala
pada cahaya</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="[Link]('myImage').src='pic_bulboff.gif'">Matikan
matikan lampu
</body>
</html>
JavaScript Dapat Mengubah Gaya HTML (CSS)
Mengubah gaya elemen HTML adalah varian dari mengubah HTML
atribut
Contoh
[Link]("demo").[Link] ="35px";
Coba Sendiri »
<!DOCTYPE html>
<html>
<body>
Apa yang bisa dilakukan JavaScript?
<p id="demo">JavaScript dapat mengubah gaya elemen HTML.</p>
<button type="button">
onclick="[Link]('demo').[Link]='35px'">Klik Saya!</button>
</body>
</html>
JavaScript Dapat Menyembunyikan Elemen HTML
Menyembunyikan elemen HTML dapat dilakukan dengan mengubahtampilkanstyle
Contoh
[Link]("demo").[Link] ="none";
Cobalah Sendiri »
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang Bisa Dilakukan JavaScript?</h2>
<p id="demo">JavaScript dapat menyembunyikan elemen HTML.</p>
<button type="button">
onclick="[Link]('demo').[Link]='none'">Klik Saya!</button>
</body>
</html>
JavaScript Dapat Menampilkan Elemen HTML
Menampilkan elemen HTML yang tersembunyi juga dapat dilakukan dengan mengubah
yangtampilanstyle
Contoh
[Link]("demo").[Link] ="block";
Coba Sendiri »
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang Bisa Dilakukan JavaScript?</h2>
<p>JavaScript dapat menampilkan elemen HTML yang tersembunyi.</p>
<p id="demo" style="display:none">Halo JavaScript!</p>
<button type="button">
onclick="[Link]('demo').[Link]='block'">Klik Saya!
</tombol>
</body>
</html>
Tahukah Anda?
JavaScript dan Java adalah dua bahasa yang sepenuhnya berbeda, baik dalam konsep maupun
desain.
JavaScript ditemukan oleh Brendan Eich pada tahun 1995, dan menjadi sebuah ECMA
standar pada tahun 1997.
ECMA-262 adalah nama resmi dari standar tersebut. ECMAScript adalah resmi
nama bahasa.
Versi JavaScript
JavaScript Ke Mana
❮ Sebelumnya Berikutnya❯
Tag <script>
Dalam HTML, kode JavaScript disisipkan di antara<script>dan</script>tag
Contoh
<script>
[Link]("demo").innerHTML ="JavaScript Pertama Saya";
</script>
Cobalah Sendiri »
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript di Badan</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "JavaScript Pertama Saya";
</script>
</body>
</html>
Contoh JavaScript lama mungkin menggunakan atribut tipe: <script
type="text/javascript">.
Atribut tipe tidak diperlukan. JavaScript adalah bahasa skrip default
dalam HTML.
Fungsi dan Acara JavaScript
Sebuah JavaScriptfungsiadalah sekumpulan kode JavaScript, yang dapat dieksekusi
ketika "dipanggil".
Misalnya, sebuah fungsi dapat dipanggil ketika peristiwa terjadi, seperti ketika
pengguna mengeklik tombol.
Anda akan belajar lebih banyak tentang fungsi dan peristiwa di bab-bab selanjutnya.
JavaScript di <head> atau <body>
Anda dapat menempatkan sejumlah skrip dalam dokumen HTML.
Skrip dapat diletakkan di dalam<body>, atau di dalam<head>bagian dari halaman HTML,
atau keduanya.
JavaScript di <head>
Dalam contoh ini, JavaScriptfungsiditempatkan di<kepala>bagian dari sebuah
Halaman HTML.
Fungsi dipanggil (dilakukan) ketika tombol diklik:
Contoh
<!DOCTYPEhtml>
<html>
<kepala>
<script>
fungsi myFunction() {
[Link]("demo").innerHTML ="Paragraf diubah.";
}
</script>
</head>
<body>
<h2>Demo JavaScript di Head</h2>
<pid="demo">Sebuah Paragraf</p>
<buttontype="button"onclick="myFunction()">Coba ini</button>
</body>
</html>
Coba Sendiri »
IKLAN
JavaScript di <body>
Dalam contoh ini, sebuah JavaScriptfungsiditempatkan di<body>bagian dari sebuah
Halaman HTML.
Fungsi dipanggil ketika tombol diklik:
Contoh
<!DOCTYPEhtml>
<html>
<body>
<h2>Demo JavaScript di Badan</h2>
<pid="demo">Sebuah Paragraf</p>
<buttontype="button"onclick="myFunction()">Coba</button>
<script>
fungsi myFunction() {
[Link]("demo").innerHTML ="Paragraf telah diubah.";
}
</script>
</body>
</html>
Coba Sendiri »
Menempatkan skrip di bagian bawah elemen <body> meningkatkan tampilan
kecepatan, karena interpretasi skrip memperlambat tampilan.
JavaScript Eksternal
Skrip juga dapat ditempatkan di file eksternal:
[Link]
fungsi myFunction() {
[Link]("demo").innerHTML ="Paragraf diubah.";
}
Skrip eksternal praktis ketika kode yang sama digunakan di banyak tempat yang berbeda
halaman web.
File JavaScript memiliki ekstensi file .js.
Untuk menggunakan skrip eksternal, masukkan nama file skrip dalamsumber(sumber)
atribut dari a<script>tag
Contoh
<scriptsrc="[Link]"></script>
Coba Sendiri »
Anda dapat menempatkan referensi skrip eksternal di<head>atau<body>sesuka hatimu.
Skrip akan berperilaku seolah-olah berada tepat di mana<script>tag adalah
terletak.
Skrip eksternal tidak dapat berisi<script>tag
Keuntungan JavaScript Eksternal
Menempatkan skrip di file eksternal memiliki beberapa keuntungan:
Ini memisahkan HTML dan kode
Ini membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
File JavaScript yang disimpan dapat mempercepat pemuatan halaman
Untuk menambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip:
Contoh
<script src="[Link]"></script>
<scriptsrc="[Link]"></script>
Referensi Eksternal
Sebuah skrip eksternal dapat dirujuk dalam 3 cara yang berbeda:
Dengan URL lengkap (alamat web lengkap)
Dengan jalur file (seperti /js/)
Tanpa jalur apapun
Contoh ini menggunakan URL lengkap untuk menautkan ke [Link]:
Contoh
<scriptsrc="[Link]
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Eksternal</h2>
<p id="demo">Sebuah Paragraf.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<p>Contoh ini menggunakan URL web penuh untuk menghubungkan ke "[Link]".</p>
<p>(myFunction disimpan di "[Link]")</p>
<script src="[Link]
</body>
</html>
Coba Sendiri »
Contoh ini menggunakan jalur file ke tautan [Link]:
Contoh
<scriptsrc="/js/[Link]"></script>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Eksternal</h2>
<p id="demo">Sebuah Paragraf.</p>
<button type="button" onclick="myFunction()">Coba ini</button>
<p>Contoh ini menggunakan jalur file untuk menghubungkan ke "[Link]".</p>
<p>(myFunction disimpan dalam "[Link]")</p>
<script src="/js/[Link]"></script>
</body>
</html>
Coba Sendiri »
Contoh ini tidak menggunakan jalur untuk menghubungkan ke [Link]:
Contoh
<script src="[Link]"></script>
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript Eksternal</h2>
<p id="demo">Sebuah Paragraf.</p>
<button type="button" onclick="myFunction()">Coba ini</button>
<p>Contoh ini menghubungkan ke "[Link]".</p>
<p>(myFunction disimpan di "[Link]")</p>
<script src="[Link]"></script>
</body>
</html>
Cobalah Sendiri »
Anda dapat membaca lebih lanjut tentang jalur file di chapterHTML Jalur File.
Keluaran JavaScript
❮ Sebelumnya Selanjutnya❯
Kemungkinan Tampilan JavaScript
JavaScript dapat "menampilkan" data dengan cara yang berbeda:
Menulis ke dalam elemen HTML, menggunakaninnerHTML.
Menulis ke dalam output HTML [Link]().
Menulis ke dalam kotak peringatan, [Link]().
Menulis ke konsol browser, [Link]().
Menggunakan innerHTML
Untuk mengakses elemen HTML, JavaScript dapat menggunakan
[Link](id)metode.
Theidatribut mendefinisikan elemen HTML. YanginnerHTMLproperti mendefinisikan
konten HTML:
Contoh
<!DOCTYPEhtml>
<html>
<body>
<h1>Halaman Web Pertama Saya</h1>
<p>Paragraf Pertama Saya</p>
<pid="demo"></pid>
<script>
[Link]("demo").innerHTML =5+6;
</script>
</body>
Cobalah Sendiri »
Mengubah properti innerHTML dari elemen HTML adalah cara umum untuk
tampilkan data dalam HTML.
Menggunakan [Link]()
Untuk tujuan pengujian, sangat nyaman untuk [Link]():
Contoh
<!DOCTYPEhtml>
<html>
<body>
<h1>Halaman Web Pertama Saya</h1>
<p>Paragraf pertama saya.</p>
<script>
[Link](5+6);
</script>
</body>
</html>
Coba Sendiri »
Menggunakan [Link]() setelah dokumen HTML dimuat, akan menghapus semua
HTML yang ada:
Contoh
<!DOCTYPEhtml>
<html>
<body>
<h1>Halaman Web Pertama Saya</h1>
<p>Paragraf pertama saya.</p>
<buttontype="button"onclick="[Link](5 + 6)">Coba</button>
</body>
</html>
Coba Sendiri »
Metode [Link]() sebaiknya hanya digunakan untuk pengujian.
IKLAN
Menggunakan [Link]()
Anda dapat menggunakan kotak peringatan untuk menampilkan data:
Contoh
<!DOCTYPEhtml>
<html>
<body>
<h1>Halaman Web Pertama Saya</h1>
<p>Paragraf pertama saya.</p>
<script>
[Link](5+6);
</body>
</html>
Coba Sendiri »
Anda dapat melewatijendelakata kunci.
Dalam JavaScript, objek window adalah objek ruang lingkup global. Ini berarti bahwa
variabel, properti, dan metode secara default milik objek jendela.
Ini juga berarti bahwa menentukanjendelakata kunci bersifat opsional:
Contoh
<html>
<body>
<h1>Halaman Web Pertama Saya</h1>
<p>Paragraf pertama saya.</p>
<script>
peringatan(5+6);
</script>
</body>
</html>
Cobalah Sendiri »
Menggunakan [Link]()
Untuk tujuan pemecahan masalah, Anda dapat [Link]()metode di dalam
peramban untuk menampilkan data.
Anda akan belajar lebih banyak tentang debugging di bab yang akan datang.
Contoh
<!DOCTYPEhtml>
<html>
<body>
<script>
[Link](5+6);
</script>
</body>
</html>
Cobalah Sendiri »
Cetak JavaScript
JavaScript tidak memiliki objek cetak atau metode cetak.
Anda tidak dapat mengakses perangkat output dari JavaScript.
Satu-satunya pengecualian adalah Anda dapat [Link]()metode dalam
browser untuk mencetak konten dari jendela saat ini.
Contoh
<!DOCTYPEhtml>
<html>
<body>
<button onclick="[Link]()">Cetak halaman ini</button>
</body>
</html>
Pernyataan JavaScript
❮ SebelumnyaBerikutnya❯
Contoh
letx, y, z; // Pernyataan 1
x = 5; // Pernyataan 2
y = 6; // Pernyataan 3
z = x + y; // Pernyataan 4
Coba Sendiri »
Program JavaScript
Program komputer adalah sekumpulan "instruksi" yang akan "dieksekusi" oleh sebuah
komputer.
Dalam bahasa pemrograman, instruksi pemrograman ini adalah
pernyataan yang dipanggil.
Program JavaScript adalah daftar pernyataan pemrograman.
Dalam HTML, program JavaScript dijalankan oleh browser web.
Pernyataan JavaScript
Pernyataan JavaScript terdiri dari:
Nilai, Operator, Ekspresi, Kata Kunci, dan Komentar.
Pernyataan ini memberi tahu browser untuk menulis "Hello Dolly." di dalam HTML
elemen dengan id="demo":
Contoh
[Link]("demo").innerHTML ="Halo Dolly.";
Coba Sendiri »
Sebagian besar program JavaScript mengandung banyak pernyataan JavaScript.
Pernyataan dijalankan, satu per satu, dalam urutan yang sama seperti yang ada
ditulis.
Program JavaScript (dan pernyataan JavaScript) sering disebut JavaScript
kode.
Titik koma ;
Titik koma memisahkan pernyataan JavaScript.
Tambahkan titik koma di akhir setiap pernyataan yang dapat dieksekusi;
Contoh
let a, b, c; // Deklarasikan 3 variabel
a = 5; // Tetapkan nilai 5 ke a
b = 6; // Tetapkan nilai 6 ke b
c = a + b; // Tetapkan jumlah a dan b ke c
DOCTYPE html
<html>
<body>
<h2>Pernyataan JavaScript</h2>
<p>Pernyataan JavaScript dipisahkan oleh titik koma.</p>
demo1
<script>
biarkan a, b, c;
a = 5;
b = 6;
c = a + b;
[Link]("demo1").innerHTML = c;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Pernyataan JavaScript</h2>
<p>Sebuah <b>program JavaScript</b> adalah daftar <b>pernyataan</b> yang harus
dieksekusi oleh komputer.
<p id="demo"></p>
<script>
biarkan x, y, z; // Pernyataan 1
x = 5; // Pernyataan 2
y = 6; // Pernyataan 3
z = x + y; // Pernyataan 4
[Link]("demo").innerHTML =
Nilai z adalah
</script>
</body>
</html>
Cobalah Sendiri »
Ketika dipisahkan dengan titik koma, beberapa pernyataan dalam satu baris diperbolehkan:
a = 5; b = 6; c = a + b;
<!DOCTYPE html>
<html>
<body>
<h2>Pernyataan JavaScript</h2>
<p>Dalam HTML, pernyataan JavaScript dijalankan oleh browser.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Halo Dolly.";
</script>
</body>
</html>
Coba Sendiri »
Di web, Anda mungkin melihat contoh tanpa titik koma.
Mengakhiri pernyataan dengan titik koma tidak diwajibkan, tetapi sangat disarankan.
IKLAN
Spasi Putih JavaScript
JavaScript mengabaikan spasi yang berlebihan. Anda dapat menambahkan spasi kosong ke skrip Anda untuk
buat lebih mudah dibaca.
Garis-garis berikut adalah setara:
Hege
Hege
Praktik yang baik adalah menempatkan spasi di sekitar operator ( = + - * / ):
letx = y + z;
Panjang Baris dan Patah Baris JavaScript
Untuk keterbacaan yang terbaik, pemrogram sering kali lebih suka menghindari baris kode yang lebih panjang dari
80 karakter.
Jika sebuah pernyataan JavaScript tidak muat dalam satu baris, tempat terbaik untuk memecahnya adalah
setelah operator:
Contoh
[Link]("demo").innerHTML =
Halo Dolly!
Coba Sendiri »
Blok Kode JavaScript
Pernyataan JavaScript dapat dikelompokkan bersama dalam blok kode, di dalam kurung kurawal
kurung {...}.
Tujuan dari blok kode adalah untuk mendefinisikan pernyataan yang akan dieksekusi bersama.
Satu tempat di mana Anda akan menemukan pernyataan dikelompokkan dalam blok adalah di
Fungsi JavaScript:
Contoh
fungsi myFunction() {
[Link]("demo1").innerHTML ="Halo Dolly!";
[Link]("demo2").innerHTML ="Apa kabar?";
}
Coba Sendiri »
Dalam tutorial ini, kami menggunakan 2 spasi untuk indentasi blok kode.
Anda akan belajar lebih banyak tentang fungsi di tutorial ini nanti.
Kata Kunci JavaScript
Pernyataan JavaScript sering dimulai dengan kata kunci untuk mengidentifikasi JavaScript
tindakan yang harus dilakukan.
Daftar Kata yang Dipesan Kami mencantumkan semua kata kunci JavaScript.
Berikut adalah daftar beberapa kata kunci yang akan Anda pelajari dalam tutorial ini:
Kata kunci Deskripsi
Variabel Mendeklarasikan sebuah variabel
Biarkan Mendeklarasikan variabel blok
Konst Mendeklarasikan konstanta blok
Jika Menandai sekelompok pernyataan untuk dieksekusi berdasarkan suatu kondisi
alih Menandai blok pernyataan untuk dieksekusi dalam kasus yang berbeda
Untuk Menandai satu blok pernyataan untuk dieksekusi dalam sebuah looping
fungsi Mendeklarasikan sebuah fungsi
kembali Keluar dari sebuah fungsi
Coba Mengimplementasikan penanganan kesalahan pada blok pernyataan
Kata kunci JavaScript adalah kata yang dipesan. Kata yang dipesan tidak dapat digunakan sebagai
nama untuk variabel.
❮ Log masuk untuk melacak kemajuan Selanjutnya❯
Sintaksis JavaScript
❮ SebelumnyaSelanjutnya❯
Sintaksis JavaScript adalah seperangkat aturan, bagaimana program JavaScript dibuat
dibangun
// Cara membuat variabel:
varx;
lety;
// Cara menggunakan variabel:
x = 5;
y = 6;
letz = x + y;
Nilai JavaScript
Sintaksis JavaScript mendefinisikan dua jenis nilai:
Nilai tetap
Nilai variabel
Nilai tetap disebut Literals.
Nilai variabel disebut Variabel.
Literasi JavaScript
Dua aturan sintaksis terpenting untuk nilai tetap adalah:
1. Angka ditulis dengan atau tanpa desimal:
10.50
1001
Coba Sendiri »
[Link] adalah teks, yang ditulis dalam tanda kutip ganda atau tunggal:
John Doe
John Doe
Coba Sendiri »
IKLAN
Variabel JavaScript
Dalam bahasa pemrograman, variabel digunakan untuk menyimpan nilai data.
JavaScript menggunakan kata kuncivar, dankonstantauntuk mendeklarasikan variabel.
biarkan
Tanda sama digunakan untuk menetapkan nilai pada variabel.
Dalam contoh ini, x didefinisikan sebagai variabel. Kemudian, x diberikan (diberikan) nilai
value 6:
letx;
x =6;
Coba Sendiri »
Operator JavaScript
JavaScript menggunakan operator aritmatika+ - * / ) untuk menghitung nilai:
(5+6) *10
Coba sendiri »
JavaScript menggunakan operator penugasan= ) untuk memberikan nilai ke
variabel
letx, y;
x = 5;
y = 6;
Coba Sendiri »
Ekspresi JavaScript
Sebuah ekspresi adalah kombinasi dari nilai-nilai, variabel, dan operator, yang
menghitung menjadi sebuah nilai.
Perhitungan disebut evaluasi.
Misalnya, 5 * 10 sama dengan 50:
5*10
Coba Sendiri »
Ekspresi juga dapat mengandung nilai variabel:
x *10
Coba Sendiri »
Nilai dapat berupa berbagai jenis, seperti angka dan string.
Sebagai contoh, "John" + " " + "Doe", dievaluasi menjadi "John Doe":
John Doe
Coba Sendiri »
Kata Kunci JavaScript
Kata kunci JavaScript digunakan untuk mengidentifikasi tindakan yang akan dilakukan.
Theizinkankata kunci memberi tahu browser untuk membuat variabel:
letx, y;
x = 5 + 6;
y = x * 10;
Coba Sendiri »
Thevarkata kunci juga memberi tahu peramban untuk membuat variabel:
varx, y;
x = 5 + 6;
y = x * 10;
Coba Sendiri »
Dalam contoh-contoh ini, menggunakanvarataubiarkanakan menghasilkan hasil yang sama.
Anda akan belajar lebih banyak tentangvardanbiarkannanti dalam tutorial ini.
Komentar JavaScript
Tidak semua pernyataan JavaScript 'dieksekusi'.
Kode setelah double slashes// atau antara/* dan*/ diperlakukan sebagai komentar.
Komentar diabaikan, dan tidak akan dijalankan:
letx = 5; Saya akan dieksekusi
// x = 6; Saya TIDAK akan dieksekusi
Coba Sendiri »
Anda akan belajar lebih banyak tentang komentar di bab selanjutnya.
Pengidentifikasi / Nama JavaScript
Pengidentifikasi adalah nama-nama JavaScript.
Pengidentifikasi digunakan untuk memberi nama pada variabel, kata kunci, dan fungsi.
Aturan untuk nama legal adalah sama di sebagian besar bahasa pemrograman.
Nama JavaScript harus dimulai dengan:
Sebuah huruf (A-Z atau a-z)
Sebuah tanda dolar ($)
Atau garis bawah (_)
Karakter selanjutnya dapat berupa huruf, angka, garis bawah, atau tanda dolar.
Catatan
Angka tidak diperbolehkan sebagai karakter pertama dalam nama.
Dengan cara ini, JavaScript dapat dengan mudah membedakan pengidentifikasi dari angka.
JavaScript bersifat peka huruf besar dan kecil
Semua pengenal JavaScript bersifat sensitif terhadap huruf besar dan kecil.
Variabel-variabelnamaBelakangdannama belakang, adalah dua variabel yang berbeda:
letlastname, lastName;
Doe
Peterson
Coba Sendiri »
JavaScript tidak menginterpretasikan LET atau Let sebagai kata kunci let.
JavaScript dan Camel Case
Secara historis, programmer telah menggunakan berbagai cara untuk menggabungkan banyak kata
menjadi satu nama variabel:
Tanda hubung:
nama depan
Tanda hubung tidak diizinkan dalam JavaScript. Mereka dicadangkan untuk pengurangan.
Garis bawah
nama_depan
Upper Camel Case (Pascal Case):
NamaDepan
Lower Camel Case
Programmer JavaScript cenderung menggunakan huruf besar kecil yang dimulai dengan huruf kecil
surat:
namaDepan
Set Karakter JavaScript
JavaScript menggunakan set karakter Unicode.
Unicode mencakup (hampir) semua karakter, tanda baca, dan simbol di dalamnya
dunia.
Untuk melihat lebih dekat, silakan pelajari Rujukan Unicode Lengkap kami.
<!DOCTYPE html>
<html>
<body>
<h2>Angka JavaScript</h2>
<p>Angka dapat ditulis dengan atau tanpa desimal.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 10.50;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>String JavaScript</h2>
<p>String dapat ditulis dengan tanda kutip ganda atau tunggal.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
<html>
<body>
<h2>Variabel JavaScript</h2>
<p>Dalam contoh ini, x didefinisikan sebagai sebuah variabel.</p>
Kemudian, x diberikan nilai 6:
<p id="demo"></p>
<script>
biarkan x;
x = 6;
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
<html>
<body>
<h2>Operator JavaScript</h2>
<p>JavaScript menggunakan operator aritmatika untuk menghitung nilai (sama seperti aljabar).</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Menetapkan Nilai JavaScript</h2>
<p>Dalam JavaScript, operator = digunakan untuk menetapkan nilai ke variabel.</p>
<p id="demo"></p>
<script>
biarkan x, y;
x = 5;
y = 6;
[Link]("demo").innerHTML = x + y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ekspresi JavaScript</h2>
Ekspresi menghitung menjadi nilai.
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ekspresi JavaScript</h2>
<p>Ekspresi dihitung menjadi nilai.</p>
<p id="demo"></p>
<script>
var x;
x = 5;
[Link]("demo").innerHTML = x * 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ekspresi JavaScript</h2>
<p>Ekspresi dihitung menjadi nilai.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "John" + " " + "Doe";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Kata kunci <b>let</b> Membuat Variabel</h2>
<p id="demo"></p>
<script>
biarkan x, y;
x = 5 + 6;
y = x * 10;
[Link]("demo").innerHTML = y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Kata kunci var Membuat Variabel</h2>
<p id="demo"></p>
<script>
var x, y;
x = 5 + 6;
y = x * 10;
[Link]("demo").innerHTML = y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Komentar JavaScript TIDAK Dijalankan</h2>
<p id="demo"></p>
<script>
biarkan x;
x = 5;
// x = 6; Saya tidak akan dieksekusi
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript sensitif terhadap huruf besar dan kecil</h2>
<p>Cobalah untuk mengubah lastName menjadi lastname.</p>
<p id="demo"></p>
<script>
biarkan lastname, lastName;
Doe
Peterson
[Link]("demo").innerHTML = lastName;
</script>
</body>
</html>
Komentar JavaScript
❮ SebelumnyaSelanjutnya❯
Komentar JavaScript dapat digunakan untuk menjelaskan kode JavaScript, dan untuk
buat lebih mudah dibaca.
Komentar JavaScript juga dapat digunakan untuk mencegah eksekusi, saat pengujian
kode alternatif.
Komentar Baris Tunggal
Komentar satu baris dimulai dengan//.
Teks apa pun di antara// dan akhir garis akan diabaikan oleh JavaScript (akan
tidak akan dieksekusi).
Contoh ini menggunakan komentar satu baris sebelum setiap baris kode:
Contoh
// Ubah judul:
[Link]("myH").innerHTML ="Halaman Pertama Saya";
// Ubah paragraf:
[Link]("myP").innerHTML = "Paragraf pertama saya.";
Coba Sendiri »
Contoh ini menggunakan komentar satu baris di akhir setiap baris untuk menjelaskan
kode tersebut:
Contoh
letx = 5; // Deklarasikan x, beri nilai 5
lety = x + 2;// Deklarasikan y, berikan nilai x + 2
Coba Sendiri »
Komentar Multi-baris
Komentar multi-baris dimulai dengan/* dan diakhiri dengan*/.
Teks apa pun di antara/* dan*/ akan diabaikan oleh JavaScript.
Contoh ini menggunakan komentar multi-baris (blok komentar) untuk menjelaskan
kode:
Contoh
/*
Kode di bawah ini akan mengubah
judul dengan id = "myH"
dan paragraf dengan id = "myP"
di halaman web saya:
*/
[Link]("myH").innerHTML ="Halaman Pertama Saya";
[Link]("myP").innerHTML ="Paragraf pertama saya.";
Coba Sendiri »
Paling umum untuk menggunakan komentar satu baris.
Komentar blok sering digunakan untuk dokumentasi formal.
Menggunakan Komentar untuk Mencegah Eksekusi
Menggunakan komentar untuk mencegah eksekusi kode adalah cocok untuk pengujian kode.
di depan baris kode mengubah baris kode dari yang dapat dieksekusi
Menambahkan//
garis ke komentar.
Contoh ini menggunakan // untuk mencegah eksekusi salah satu baris kode:
Contoh
//[Link]("myH").innerHTML = "Halaman Pertama Saya";
[Link]("myP").innerHTML ="Paragraf pertama saya.";
Cobalah Sendiri »
Contoh ini menggunakan blok komentar untuk mencegah eksekusi beberapa baris:
Contoh
/*
[Link]("myH").innerHTML = "Halaman Pertama Saya";
[Link]("myP").innerHTML = "Paragraf pertama saya.";
*/
Cobalah Sendiri »
❮ Masuk untuk melacak kemajuan❯
Variabel JavaScript
❮ SebelumnyaSelanjutnya❯
4 Cara untuk Mendeklarasikan Variabel JavaScript:
Menggunakanvar
Menggunakanbiarkan
Menggunakanconst
Menggunakan tidak ada
Apa itu Variabel?
Variabel adalah wadah untuk menyimpan data (menyimpan nilai data).
Dalam contoh ini,x, y, danz, adalah variabel, yang dideklarasikan denganvarkeyword
Contoh
varx = 5;
vary =6;
x + y;
Coba Sendiri »
Dalam contoh ini,x, y, danz, adalah variabel, yang dideklarasikan denganbiarkankeyword
Contoh
letx = 5;
lety =6;
letz = x + y;
Cobalah Sendiri »
Dalam contoh ini,x, y, danz, adalah variabel yang tidak dideklarasikan:
Contoh
x = 5;
y = 6;
z = x + y;
Coba Sendiri »
Dari semua contoh di atas, Anda bisa menebak:
x menyimpan nilai 5
y menyimpan nilai 6
z menyimpan nilai 11
Kapan Menggunakan var JavaScript?
Selalu deklarasikan variabel JavaScript denganvar,biarkan, ataukonstanta.
Thevarkata kunci digunakan dalam semua kode JavaScript dari 1995 hingga 2015.
Yangbiarkandankonstantakata kunci ditambahkan ke JavaScript pada tahun 2015.
Jika Anda ingin kode Anda berjalan di browser yang lebih lama, Anda harus menggunakanvar.
Kapan Menggunakan const di JavaScript?
Jika Anda ingin aturan umum: selalu deklarasikan variabel dengankonstanta.
Jika Anda berpikir nilai variabel dapat berubah, gunakanbiarkan.
Dalam contoh ini,harga1, harga2, dantotal, adalah variabel:
Contoh
constharga1 = 5;
constprice2 = 6;
totalharga = harga1 + harga2;
Coba Sendiri »
Dua variabelharga1danharga2dinyatakan dengankonstantakata kunci.
Ini adalah nilai konstan dan tidak dapat diubah.
Variabeltotaldinyatakan denganbiarkankata kunci.
Ini adalah nilai yang dapat diubah.
Sama Seperti Aljabar
Sama seperti dalam aljabar, variabel memegang nilai:
letx =5;
lety =6;
Sama seperti dalam aljabar, variabel digunakan dalam ekspresi:
letz = x + y;
Dari contoh di atas, Anda dapat menebak bahwa totalnya dihitung menjadi 11.
Catatan
Variabel adalah wadah untuk menyimpan nilai.
IKLAN
Pengidentifikasi JavaScript
Semua variabel JavaScript harus diidentifikasi dengan nama yang unik.
Nama-nama unik ini disebut pengidentifikasi.
Pengidentifikasi dapat berupa nama pendek (seperti x dan y) atau nama yang lebih deskriptif
usia
Aturan umum untuk membangun nama untuk variabel (pengenal unik)
adalah:
Nama dapat mengandung huruf, digit, garis bawah, dan tanda dolar.
Nama harus dimulai dengan huruf.
Nama juga dapat dimulai dengan $ dan _ (tetapi kami tidak akan menggunakannya dalam ini)
tutorial).
Nama bersifat sensitif terhadap huruf besar (y dan Y adalah variabel yang berbeda).
Kata-kata yang dib reservasi (seperti kata kunci JavaScript) tidak dapat digunakan sebagai nama.
Catatan
Identifer JavaScript bersifat sensitif terhadap huruf besar dan kecil.
Operator Penugasan
Dalam JavaScript, tanda sama dengan (=) adalah operator
operator "to".
Ini berbeda dari aljabar. Hal berikut tidak masuk akal dalam aljabar:
x = x + 5
Namun, dalam JavaScript, itu masuk akal: itu menetapkan nilai x + 5
ke x.
(Itu menghitung nilai x + 5 dan memasukkan hasilnya ke dalam x. Nilai x adalah
ditambahkan 5.)
Catatan
Operator "sama dengan" ditulis seperti== dalam JavaScript.
Tipe Data JavaScript
Variabel JavaScript dapat menampung angka seperti 100 dan nilai teks seperti "John"
Doe
Dalam pemrograman, nilai teks disebut string teks.
JavaScript dapat menangani banyak jenis data, tetapi untuk saat ini, pikirkan saja angka
dan string.
String ditulis di dalam tanda kutip ganda atau tunggal. Angka ditulis
tanpa kutipan.
Jika Anda menempatkan angka dalam tanda kutip, itu akan diperlakukan sebagai string teks.
Contoh
const pi = 3.14;
John Doe
Ya, saya!
Cobalah Sendiri »
Mendeklarasikan Variabel JavaScript
Membuat variabel dalam JavaScript disebut "mendeklarasikan" variabel.
Anda mendeklarasikan variabel JavaScript denganvaratau yangbiarkankeyword
namaKendaraan
atau:
namaMobil
Setelah deklarasi, variabel tersebut tidak memiliki nilai (secara teknis itu adalahtidak terdefinisi).
Untuk menetapkan nilai pada variabel, gunakan tanda sama dengan:
Volvo
Anda juga dapat menetapkan nilai pada variabel saat Anda mendeklarasikannya:
Volvo
Dalam contoh di bawah ini, kami membuat sebuah variabel yang disebutnamaMobildan menetapkan
nilai "Volvo" untuk itu.
Kemudian kami 'mengeluarkan' nilai di dalam paragraf HTML dengan id="demo":
Contoh
<pid="demo"></pid>
<script>
Volvo
[Link]("demo").innerHTML = namaMobil;
</script>
Cobalah Sendiri »
Catatan
Merupakan praktik pemrograman yang baik untuk mendeklarasikan semua variabel di awal
sebuah skrip.
Satu Pernyataan, Banyak Variabel
Anda dapat mendeklarasikan banyak variabel dalam satu pernyataan.
Mulailah pernyataan denganbiarkandan pisahkan variabel dengan koma:
Contoh
John Doe
Coba sendiri »
Sebuah deklarasi dapat meliputi beberapa baris:
Contoh
John Doe
Volvo
price =200;
Coba Sendiri »
tidak terdefinisi
Dalam program komputer, variabel sering kali dideklarasikan tanpa nilai. Yang
nilai bisa menjadi sesuatu yang harus dihitung, atau sesuatu yang akan menjadi
akan diberikan nanti, seperti input pengguna.
Sebuah variabel yang dideklarasikan tanpa nilai akan memiliki nilaitidak terdefinisi.
Variabel carName akan memiliki nilaisetelah eksekusi ini
statement
Contoh
carName
Coba Sendiri »
Mendeklarasikan Ulang Variabel JavaScript
Jika Anda mendeklarasikan ulang variabel JavaScript yang telah dideklarasikan denganvar, itu tidak akan kehilangan
nilai.
VariabelnamaMobilakan tetap memiliki nilai "Volvo" setelah pelaksanaan
pernyataan-pernyataan ini:
Contoh
Volvo
namaMobil
Coba Sendiri »
Catatan
Anda tidak dapat mendeklarasikan kembali variabel yang telah dideklarasikan denganbiarkanataukonstanta.
Ini tidak akan berhasil:
Volvo
namaMobil
Aritmetika JavaScript
Seperti halnya aljabar, Anda dapat melakukan aritmatika dengan variabel JavaScript, menggunakan
operator seperti= dan+:
Contoh
letx = 5 + 2 + 3;
Coba Sendiri »
Anda juga dapat menambahkan string, tetapi string akan digabungkan:
Contoh
John Doe
Cobalah Sendiri »
Cobalah yang ini:
Contoh
letx = "5" + 2 + 3;
Coba Sendiri »
Catatan
Jika Anda menempatkan angka dalam tanda kutip, sisa angka akan diperlakukan sebagai
string, dan digabungkan.
Sekarang coba ini:
Contoh
letx = 2 + 3 + "5";
Coba Sendiri »
Tanda Dolar JavaScript $
Karena JavaScript memperlakukan tanda dolar sebagai huruf, pengenal yang mengandung $ adalah
nama variabel yang valid:
Contoh
Halo Dunia
let$$$ =2;
let$myMoney =5;
Cobalah Sendiri »
Menggunakan tanda dolar tidak umum di JavaScript, tetapi profesional.
programmer sering menggunakannya sebagai alias untuk fungsi utama dalam JavaScript
perpustakaan.
Dalam pustaka JavaScript jQuery, misalnya, fungsi utama$ digunakan untuk
pilih elemen HTML. Di jQuery$("p");berarti "pilih semua elemen p".
JavaScript Underscore (_)
Karena JavaScript memperlakukan garis bawah sebagai huruf, pengidentifikasi yang mengandung _ adalah
nama variabel yang valid:
Contoh
Johnson
let_x =2;
let_100 =5;
Coba Sendiri »
Menggunakan tanda garis bawah tidak terlalu umum di JavaScript, tetapi merupakan sebuah konvensi
di antara programmer profesional adalah menggunakan itu sebagai alias untuk "pribadi"
variabel "(tersembunyi)".
Uji Diri Anda Dengan Latihan
Latihan:
Buat variabel yang disebutnamaMobildan tetapkan nilaiVolvokepadanya.
var = " ";
JavaScript Izinkan
❮ SebelumnyaBerikutnya❯
Yangletkata kunci diperkenalkan di ES6 (2015).
Variabel yang didefinisikan denganbiarkantidak dapat dideklarasikan ulang.
Variabel yang didefinisikan denganbiarkanharus dideklarasikan sebelum digunakan.
Variabel yang didefinisikan denganBiarkanmemiliki cakupan blok.
Tidak dapat Dinyatakan Kembali
Variabel yang didefinisikan denganbiarkantidak dapat dideklarasikan ulang.
Anda tidak dapat secara tidak sengaja mendeklarasikan ulang variabel yang telah dideklarasikan denganbiarkan.
DenganbiarkanAnda tidak dapat melakukan ini:
John Doe
letx = 0;
DenganvarAnda bisa:
John Doe
varx = 0;
Ruang Blok
Sebelum ES6 (2015), JavaScript memiliki Lingkungan Global dan Lingkungan Fungsi.
ES6 memperkenalkan dua kata kunci JavaScript baru yang penting:maridankonstanta.
Kedua kata kunci ini menyediakan Lingkup Blok di JavaScript.
Variabel yang dideklarasikan di dalam blok { } tidak dapat diakses dari luar
block
Contoh
{
letx =2;
}
// x tidak dapat digunakan di sini
Variabel yang dideklarasikan denganvarkata kunci TIDAK dapat memiliki ruang lingkup blok.
Variabel yang dideklarasikan di dalam blok { } dapat diakses dari luar blok.
Contoh
{
varx = 2;
}
// x DAPAT digunakan di sini
Mendeklarasikan Ulang Variabel
Mendeklarasikan ulang sebuah variabel menggunakanvarkata kunci dapat menimbulkan masalah.
Mendeklarasikan kembali sebuah variabel di dalam blok juga akan mendeklarasikan kembali variabel di luar
blok tersebut:
Contoh
varx =10;
// Di sini x adalah 10
{
varx = 2;
// Di sini x adalah 2
}
// Di sini x adalah 2
Coba Sendiri »
Mendeklarasikan ulang sebuah variabel menggunakanbiarkankata kunci dapat memecahkan masalah ini.
Mendeklarasikan ulang variabel di dalam sebuah blok tidak akan mendeklarasikan ulang variabel di luar
blok tersebut:
Contoh
letx = 10;
// Di sini x adalah 10
{
letx = 2;
// Di sini x adalah 2
}
// Di sini x adalah 10
Coba Sendiri »
Dukungan Browser
Yangbiarkankata kunci tidak sepenuhnya didukung di Internet Explorer 11 atau yang lebih awal.
Tabel berikut mendefinisikan versi browser pertama dengan dukungan penuh untuk
yangbiarkankeyword
Chrome 49 Edge 12 Firefox 44 Safari 11
Mar, 2016 Jul, 2015 Jan, 2015 Sep, 2017
IKLAN
Mengulangi deklarasi
Mendeklarasikan ulang variabel JavaScript denganvardiizinkan di mana saja dalam sebuah program:
Contoh
varx = 2;
// Sekarang x adalah 2
varx =3;
// Sekarang x adalah 3
Coba Sendiri »
Denganbiarkan, mendeklarasikan ulang variabel di blok yang sama TIDAK diperbolehkan:
Contoh
varx = 2; // Diizinkan
letx = 3; // Tidak diperbolehkan
{
letx = 2; // Diizinkan
letx = 3; // Tidak diizinkan
}
{
letx =2; // Diizinkan
varx = 3; // Tidak diizinkan
}
Mendeklarasikan ulang sebuah variabel denganbiarkan, di blok lain, DIIZINKAN:
Contoh
letx = 2; // Diizinkan
{
3; // Diizinkan
}
{
letx = 4; // Diizinkan
}
Cobalah Sendiri »
Biarkan Pengangkatan
Variabel yang didefinisikan denganvardinaikkan ke atas dan dapat diinisialisasi pada
kapan saja.
Anda bisa menggunakan variabel sebelum deklarasinya:
Contoh
Ini baik-baik saja:
Volvo
namaMobil
Cobalah Sendiri »
Jika Anda ingin belajar lebih lanjut tentang hoisting, pelajari bab JavaScript
Pengangkatan.
Variabel yang didefinisikan denganbiarkanjuga diangkat ke puncak blok, tetapi tidak
diinisialisasi.
Arti: Menggunakan sebuahbiarkanvariabel sebelum dideklarasikan akan menghasilkan
aKesalahanReferensi:
Contoh
Saab
Volvo
Coba Sendiri »
❮ Sebelumnya❯
JavaScript Const
❮ SebelumnyaSelanjutnya❯
Yangkonstantakata kunci diperkenalkan di ES6 (2015).
Variabel yang didefinisikan dengankonstantatidak dapat dideklarasikan ulang.
Variabel yang didefinisikan dengankonstantatidak dapat Dipindahtugaskan.
Variabel yang didefinisikan dengankonstantamemiliki Lingkup Blok.
Tidak Bisa Ditempatkan Ulang
Akonstantavariabel tidak dapat ditugaskan ulang:
Contoh
constPI = 3.141592653589793;
3.14 // Ini akan memberikan kesalahan
PI = PI +10; // Ini juga akan memberikan kesalahan
Coba Sendiri »
Harus Ditugaskan
JavaScriptkonstantavariabel harus diberikan nilai saat mereka dideklarasikan:
Benar
constPI = 3.14159265359;
Salah
konstantaPI;
PI = 3.14159265359;
Kapan menggunakan const di JavaScript?
Selalu deklarasikan variabel dengankonstantaketika Anda tahu bahwa nilainya
tidak boleh diubah.
Gunakankonstantaketika Anda menyatakan:
Array baru
Objek baru
Sebuah Fungsi Baru
RegExp baru
Objek dan Array Konstan
Kata kuncikonstantasedikit menyesatkan.
Ini tidak mendefinisikan nilai konstan. Ini mendefinisikan referensi konstan ke sebuah
nilai.
Karena ini Anda TIDAK dapat:
Tetapkan ulang nilai konstanta
Menetapkan kembali array konstan
Menyerahkan kembali objek konstan
Tapi Anda BISA:
Ubah elemen dari array konstan
Ubah properti objek konstan
Array Konstan
Anda dapat mengubah elemen dari array konstan:
Contoh
// Anda dapat membuat array konstanta:
constcars = ["Saab","Volvo","BMW"];
// Anda dapat mengubah elemen:
Toyota
// Anda dapat menambahkan elemen:
[Link]("Audi");
Coba Sendiri »
Tapi Anda TIDAK bisa menetapkan ulang array:
Contoh
constcars = ["Saab","Volvo","BMW"];
cars = ["Toyota","Volvo","Audi"]; KESALAHAN
Coba Sendiri »
Objek Konstan
Anda dapat mengubah properti objek konstan:
Contoh
// Anda dapat membuat objek const:
constcar = {type:"Fiat", model:"500", color:"white"};
Anda dapat mengubah suatu properti:
merah
Anda dapat menambahkan properti:
Johnson
Coba Sendiri »
Tapi Anda TIDAK dapat menetapkan ulang objek tersebut:
Contoh
constcar = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // KESALAHAN
Coba Sendiri »
Dukungan Browser
Thekonstantakata kunci tidak sepenuhnya didukung di Internet Explorer.
Tabel berikut mendefinisikan versi browser pertama dengan dukungan penuh untuk
thekonstantakeyword
Chrome 49 Tepi 12 Firefox 36 Safari 11
Mar, 2016 Jul, 2015 Feb, 2015 Sep, 2017
IKLAN
Ruang Blok
Mendeklarasikan sebuah variabel dengankonstantasama denganbiarkanketika datang ke Block
Ruang lingkup.
x yang dideklarasikan dalam blok, dalam contoh ini, tidak sama dengan x
dideklarasikan di luar blok:
Contoh
constx = 10;
// Di sini x adalah 10
{
constx = 2;
// Di sini x adalah 2
}
// Di sini x adalah 10
Coba Sendiri »
Anda dapat mempelajari lebih lanjut tentang ruang lingkup blok di bab Ruang Lingkup JavaScript.
Deklarasi Ulang
Mendeklarasikan ulang JavaScriptvarvariabel diizinkan di mana saja dalam program:
Contoh
varx = 2; // Diizinkan
varx = 3; // Diizinkan
x = 4; // Diizinkan
Mendeklarasikan ulang yang sudah adavarataubiarkanvariabel kekonstanta, dalam lingkup yang sama, adalah
tidak diizinkan
Contoh
varx = 2; // Diizinkan
constx = 2; Tidak diizinkan
{
letx = 2; // Diizinkan
constx = 2; Tidak diizinkan
}
{
constx = 2; // Diizinkan
constx = 2; // Tidak diizinkan
}
Menugaskan ulang yang adakonstantavariabel, dalam lingkup yang sama, tidak diizinkan:
Contoh
constx = 2; // Diizinkan
x = 2; Tidak diperbolehkan
varx = 2; Tidak diperbolehkan
letx =2; // Tidak diizinkan
constx = 2; // Tidak diizinkan
{
constx = 2; // Diizinkan
x = 2; // Tidak diizinkan
varx = 2; Tidak diizinkan
letx = 2; // Tidak diperbolehkan
constx = 2; // Tidak diizinkan
}
Mendeklarasikan kembali sebuah variabel dengankonstanta, dalam ruang lingkup lain, atau dalam blok lain, adalah
diizinkan
Contoh
constx = 2; // Diizinkan
{
constx = 3; // Diperbolehkan
}
{
constx = 4; // Diizinkan
}
Pengangkatan
Variabel yang didefinisikan denganvardiangkat ke atas dan dapat diinisialisasi di
kapan saja.
Arti: Anda dapat menggunakan variabel sebelum dideklarasikan:
Contoh
Ini baik-baik saja:
Volvo
namaKendaraan
Coba Sendiri »
Jika Anda ingin belajar lebih banyak tentang hoisting, pelajari bab JavaScript
Peningkatan.
Variabel yang didefinisikan dengankonstantajuga diangkat ke atas, tetapi tidak diinisialisasi.
Arti: Menggunakan sebuahkonstantavariabel sebelum dideklarasikan akan menghasilkan
aReferensiKesalahan:
Contoh
perhatian (namaMobil);
Volvo
Coba Sendiri »
Operator JavaScript
❮ SebelumnyaBerikutnya❯
Operator Penjumlahan + menambahkan angka:
Operator Penugasan = menetapkan nilai ke sebuah variabel.
Tugas JavaScript
Operator Penugasan=) menetapkan nilai pada sebuah variabel:
Contoh Tugas
letx = 10;
Cobalah Sendiri »
// Tetapkan nilai 5 ke x
letx =5;
// Tetapkan nilai 2 pada y
lety =2;
// Assign nilai x + y ke z:
letz = x + y;
Cobalah Sendiri »
Penjumlahan JavaScript
Operator Penjumlahan(+) menambahkan angka:
Menambahkan
letx =5;
lety =2;
letz = x + y;
Cobalah Sendiri »
Perkalian JavaScript
Operator Perkalian(*) mengalikan angka:
Mengalikan
letx =5;
lety =2;
letz = x * y;
Coba Sendiri »
IKLAN
Jenis Operator JavaScript
Ada berbagai jenis operator JavaScript:
Operator Aritmatika
Operator Penugasan
Operator Perbandingan
Operator String
Operator Logika
Operator Bitwise
Operator Ternary
Operator Tipe
Operator Aritmetika JavaScript
Operator Aritmatika digunakan untuk melakukan operasi aritmatika pada angka:
Contoh Operator Aritmatika
leta =3;
letx = (100+50) * a;
Cobalah Sendiri »
Operator Deskripsi
+ Penambahan
- Pengurangan
* Perkalian
** Pangkat (ES2016)
/ Divisi
% Modulus (Sisa Pembagian)
++ Peningkatan
-- Pengurangan
Operator aritmetika dijelaskan secara lengkap di bab Aritmetika JS.
Operator Penugasan JavaScript
Operator penugasan menetapkan nilai ke variabel JavaScript.
Operator Penugasan Penjumlahan(+=) menambahkan nilai ke variabel.
Tugas
letx =10;
x += 5;
Cobalah Sendiri »
Operator Contoh Sama Dengan
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Operator penugasan dijelaskan sepenuhnya dalam bab Penugasan JS.
Operator Perbandingan JavaScript
Operator Deskripsi
== sama dengan
=== nilai yang sama dan tipe yang sama
!= tidak sama dengan
!== nilai tidak sama atau tipe tidak sama
> lebih besar dari
< kurang dari
>= lebih besar dari atau sama dengan
<= kurang dari atau sama dengan
? operator ternary
Operator perbandingan dijelaskan secara lengkap dalam bab Perbandingan JS.
Perbandingan String JavaScript
Semua operator perbandingan di atas juga dapat digunakan pada string:
Contoh
A
B
letresult = text1 < text2;
Coba Sendiri »
Perhatikan bahwa string dibandingkan secara alfabetis:
Contoh
20
5
letresult = teks1 < teks2;
Coba Sendiri »
Penambahan String JavaScript
Yang+ juga dapat digunakan untuk menambahkan (menggabungkan) string:
Contoh
John
Doe
lettext3 = text1 +" " + text2;
Coba Sendiri »
Yang+= operator penugasan juga dapat digunakan untuk menambahkan (menggabungkan) string:
Contoh
Betapa sangat
hari yang menyenangkan
Hasil dari text1 adalah:
Hari yang sangat bagus
Coba Sendiri »
Ketika digunakan pada string, operator + disebut operator konkatenasi.
Menambahkan String dan Angka
Menambahkan dua angka, akan mengembalikan jumlah, tetapi menambahkan angka dan string
akan mengembalikan sebuah string:
Contoh
letx = 5 + 5;
lety ="5"+5;
letz = "Halo" + 5;
Hasil dari x, y, dan z akan menjadi:
10
55
Halo5
Coba Sendiri »
Jika Anda menambahkan sebuah angka dan sebuah string, hasilnya akan menjadi sebuah string!
Operator Logika JavaScript
Operator Deskripsi
&& dan logis
|| ataupun logis
! tidak logis
Operator logika dijelaskan sepenuhnya dalam bab Perbandingan JS.
Operator Tipe JavaScript
Operator Deskripsi
tipe dari Mengembalikan jenis variabel
instanceof Mengembalikan true jika suatu objek adalah instance dari objek t
Operator jenis dijelaskan sepenuhnya dalam bab Konversi Tipe JS.
Operator Bitwise JavaScript
Operator bit bekerja pada angka 32 bit.
Setiap operand numerik dalam operasi dikonversi menjadi angka 32 bit.
hasil dikonversi kembali menjadi angka JavaScript.
Operator Deskripsi Contoh Sama dengan
& DAN 5&1 0101 & 0001
| ATAU 5|1 0101 | 0001
~ TIDAK ~5 ~0101
^ XOR 5^1 0101 ^ 0001
<< geser kiri 5 << 1 0101 << 1
>> geser kanan 5 >> 1 0101 >> 1
>>> geser kanan tanpa tanda 5 >>> 1 0101 >>> 1
Contoh di atas menggunakan contoh unsigned 4 bit. Tetapi JavaScript menggunakan 32-
bilangan bertanda bit.
Karena ini, di JavaScript, ~ 5 tidak akan mengembalikan 10. Itu akan mengembalikan -6.
~00000000000000000000000000000101 akan mengembalikan
11111111111111111111111111111010
Operator bitwise dijelaskan sepenuhnya dalam bab Bitwise JS.
Uji Diri Anda Dengan Latihan
Latihan:
Kalikan10dengan5, dan beri tahu hasilnya.
peringatan(10 5);
Aritmatika JavaScript
❮ SebelumnyaBerikutnya❯
Operator Aritmatika JavaScript
Operator aritmatika melakukan operasi aritmatika pada angka (literal atau variabel).
Operator Deskripsi
+ Penambahan
- Pengurangan
* Perkalian
** Pangkat (ES2016)
/ Divisi
% Modulus (Sisa)
++ Peningkatan
-- Pengurangan
Operasi Aritmatika
Operasi aritmatika yang khas beroperasi pada dua angka.
Kedua angka tersebut dapat berupa literal:
Contoh
letx = 100 + 50;
Cobalah Sendiri »
atau variabel:
Contoh
letx = a + b;
Coba Sendiri »
atau ekspresi:
Contoh
letx = (100+50) * a;
Coba Sendiri »
Operator dan Operan
Angka-angka (dalam operasi aritmetika) disebut operand.
Operasi (yang akan dilakukan antara dua operand) didefinisikan oleh
seorang operator.
Operand Operator Opera
100 + 50
IKLAN
Menambahkan
Operator penjumlahan (+) menambahkan angka:
Contoh
letx =5;
lety =2;
letz = x + y;
Coba Sendiri »
Pengurangan
operator pengurangan-) mengurangi angka.
Contoh
letx =5;
lety =2;
letz = x - y;
Coba Sendiri »
Mengalikan
Operator perkalian*) mengalikan angka.
Contoh
letx = 5;
lety =2;
letz = x * y;
Coba sendiri »
Membagi
operatorpembagian/) membagi angka.
Contoh
letx = 5;
lety =2;
letz = x / y;
Coba Sendiri »
Sisa
operator modulus%) mengembalikan sisa pembagian.
Contoh
letx =5;
lety =2;
letz = x % y;
Coba Sendiri »
Dalam aritmatika, pembagian dua bilangan bulat menghasilkan kuotien dan
sisa.
Dalam matematika, hasil dari operasi amodulo adalah sisa dari sebuah
pembagian aritmetika.
Meningkatkan
Operator penambah (++) meningkatkan angka.
Contoh
letx =5;
x++;
letz = x;
Coba Sendiri »
Pengurangan
Operator pengurangan (--) mengurangi angka.
Contoh
letx =5;
x--;
x;
Cobalah Sendiri »
Pangkat
operator eksponensiasi**) mengangkat operand pertama ke pangkat dari
operand kedua.
Contoh
letx =5;
letz = x **2;
Coba Sendiri »
x ** y menghasilkan hasil yang sama [Link](x,y):
Contoh
letx = 5;
letz = [Link](x,2);
Coba Sendiri »
Precedence Operator
Prioritas operator menggambarkan urutan di mana operasi dilakukan
dalam sebuah ekspresi aritmatika.
Contoh
letx = 100 + 50 * 3;
Coba Sendiri »
Apakah hasil dari contoh di atas sama dengan 150 * 3, atau sama dengan 100?
+ 150?
Apakah penjumlahan atau perkalian yang dilakukan terlebih dahulu?
Seperti dalam matematika sekolah tradisional, perkalian dilakukan terlebih dahulu.
Perkalian*) dan pembagian (/) memiliki prioritas lebih tinggi daripada penjumlahan (+)
dan pengurangan (-).
Dan (seperti dalam matematika sekolah) urutan dapat diubah dengan menggunakan
kurung.
Saat menggunakan tanda kurung, operasi di dalam tanda kurung adalah
dihitung terlebih dahulu:
Contoh
letx = (100+50) *3;
Coba Sendiri »
Ketika banyak operasi memiliki tingkat kepentingan yang sama (seperti penjumlahan dan
pengurangan atau perkalian dan pembagian), mereka dihitung dari kiri ke
benar
Contoh
letx = 100 + 50 - 3;
Coba Sendiri »
letx = 100/50*3;
Cobalah Sendiri »
Catatan
Untuk daftar lengkap nilai prioritas operator, pergi ke:
Nilai Prioritas Operator JavaScript.
Uji Diri Anda Dengan Latihan
Latihan:
Bagi10oleh2, dan beri tahu hasilnya.
peringatan(10 2);
Tugas JavaScript
❮ SebelumnyaBerikutnya❯
Operator Penugasan JavaScript
Operator penugasan memberikan nilai kepada variabel JavaScript.
Operator Contoh Sama Dengan
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Operator Penugasan Pergeseran
Operator Contoh Sama Dengan
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
Operator Penugasan Bitwise
Operator Contoh Sama Dengan
&= x &= y x=x&y
^= x ^= y x=x^y
|= x |= y x=x|y
Operator Penugasan Logis
Operator Contoh Sama Dengan
&&= x &&= y x = x && (x = y)
||= x ||= y x = x || (x = y)
??= x ??= y x = x ?? (x = y)
Catatan
Operator penugasan logis adalah ES2020.
Operator =
Operator Penugasan Sederhana memberikan nilai kepada sebuah variabel.
Contoh Tugas Sederhana
letx =10;
Coba Sendiri »
letx =10+ y;
Coba Sendiri »
Operator +=
Operator Penugasan Penjumlahan menambahkan nilai ke sebuah variabel.
Contoh Tugas Penjumlahan
letx =10;
x +=5;
Coba Sendiri »
Halo
Coba Sendiri »
Operator -=
Operator Penugasan Pengurangan mengurangkan nilai dari suatu variabel.
Contoh Penugasan Pengurangan
letx =10;
x -=5;
Coba Sendiri »
Operator *=
Operator Penugasan Perkalian mengalikan suatu variabel.
Contoh Penugasan Perkalian
letx =10;
x *= 5;
Coba Sendiri »
Operator **=
Operator Penugasan Eksponensiasi mengangkat variabel ke pangkat
dari operand.
Contoh Penugasan Pembangunan
letx =10;
x **=5;
Coba Sendiri »
Operator /=
Operator Pembagian TheDivision membagi sebuah variabel.
Contoh Penugasan Pembagian
letx =10;
x /=5;
Cobalah Sendiri »
Operator %=
Operator Penugasan Sisa menetapkan sisa ke sebuah variabel.
Contoh Penugasan Sisa
letx =10;
x %= 5;
Coba Sendiri »
IKLAN
Operator <<=
Operator Penugasan Pergeseran Kiri menggeser sebuah variabel ke kiri.
Contoh Penugasan Perpindahan Kiri
letx = -100;
x <<=5;
Coba Sendiri »
Operator >>=
Operator Penugasan Shift Kanan menggeser variabel (bertanda).
Contoh Penugasan Pergeseran Kanan
letx = -100;
x >>=5;
Coba Sendiri »
Operator >>>=
Operator Penugasan Pergeseran Kanan Tanpa Tanda menggeser variabel
(tidak ditandatangani).
Contoh Penugasan Pergeseran Kanan Tanpa Tanda
letx = -100;
x >>>=5;
Coba Sendiri »
Operator &=
Operator Penugasan Bitwise AND melakukan operasi AND bitwise pada
dua operand dan menetapkan hasilnya ke variabel.
Contoh Penugasan AND Bitwise
letx =10;
x &= 5;
Coba Sendiri »
Operator |=
Operator Penugasan Bitwise OR melakukan operasi OR bitwise pada dua
operand dan menetapkan hasilnya ke variabel.
Contoh Penugasan OR Bitwise
letx =10;
x |=5;
Coba Sendiri »
Operator ^=
Operator Penugasan XOR Bitwise melakukan operasi XOR bitwise pada
dua operand dan menetapkan hasilnya kepada variabel.
Contoh Penugasan XOR Bitwise
letx =10;
x ^= 5;
Coba Sendiri »
Operator &&=
Operator penugasan AND Logis digunakan di antara dua nilai.
Jika nilai pertama benar, nilai kedua akan ditetapkan.
Contoh Penugasan AND Logis
letx =10;
x &&=5;
Coba Sendiri »
Yang&&= operator adalah fitur ES2020.
Operator ||=
Operator penugasan OR Logis digunakan di antara dua nilai.
Jika nilai pertama salah, nilai kedua akan diberikan.
Contoh Penugasan OR Logis
letx =10;
x ||=5;
Coba Sendiri »
The||= operator adalah fitur ES2020.
Operator ??=
Operator penugasan penggabungan null digunakan antara dua nilai.
Jika nilai pertama tidak terdefinisi atau null, nilai kedua akan ditetapkan.
Contoh Penugasan Koalesensi Nullish
letx =10;
x ??=5;
Coba Sendiri »
Yang??= operator adalah fitur ES2020.
Uji Diri Anda Dengan Latihan
Latihan:
Gunakan operator penugasan yang benar yang akan menghasilkanxmenjadi15(sama denganx =
x + y).
x = 10;
y = 5;
x y;
Tipe Data JavaScript
❮ SebelumnyaSelanjutnya❯
JavaScript memiliki 8 Tipe Data
String
2. Nomor
3. Bigint
4. Boolean
5. Tidak Terdefinisi
6. Null
7. Simbol
8. Objek
Tipe Data Objek
Tipe data objek dapat berisi:
1. Sebuah objek
2. Sebuah array
3. Tanggal
Contoh
// Angka:
letlength =16;
letweight =7.5;
Strings
Kuning
Johnson
// Boolean
letx =true;
lety =false;
Object
constperson = {firstName:"John", lastName:"Doe"};
// Objek array:
constcars = ["Saab","Volvo","BMW"];
// Objek tanggal:
const tanggal = new Tanggal("2022-03-25");
Catatan
Sebuah variabel JavaScript dapat menyimpan jenis data apapun.
Konsep Tipe Data
Dalam pemrograman, tipe data adalah konsep yang penting.
Untuk dapat beroperasi pada variabel, penting untuk mengetahui sesuatu tentang
tipe.
Tanpa tipe data, komputer tidak dapat dengan aman menyelesaikan ini:
letx = 16 + "Volvo";
Apakah masuk akal untuk menambahkan "Volvo" ke enam belas? Apakah itu akan menghasilkan kesalahan atau
apakah itu akan menghasilkan hasil?
JavaScript akan memperlakukan contoh di atas sebagai:
letx = "16" + "Volvo";
Catatan
Saat menambahkan angka dan string, JavaScript akan menganggap angka sebagai
string.
Contoh
letx = 16 + "Volvo";
Coba Sendiri »
Contoh
letx = "Volvo" + 16;
Cobalah Sendiri »
JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda bisa
menghasilkan hasil yang berbeda:
JavaScript:
letx = 16 + 4 + "Volvo";
result
20Volvo
Coba Sendiri »
JavaScript:
letx = "Volvo" + 16 + 4;
Hasil:
Volvo164
Cobalah Sendiri »
Dalam contoh pertama, JavaScript memperlakukan 16 dan 4 sebagai angka, sampai mencapai
Volvo
Dalam contoh kedua, karena operand pertama adalah string, semua operand adalah
diperlakukan sebagai string.
IKLAN
Tipe JavaScript adalah Dinamis
JavaScript memiliki tipe dinamis. Ini berarti bahwa variabel yang sama dapat menjadi
digunakan untuk menampung berbagai tipe data:
Contoh
letx; // Sekarang x tidak terdefinisi
x = 5; // Sekarang x adalah sebuah Angka
x = "John";// Sekarang x adalah sebuah String
Coba Sendiri »
String JavaScript
Sebuah string (atau teks string) adalah serangkaian karakter seperti "John Doe".
String dituliskan dengan kutipan. Anda dapat menggunakan kutipan tunggal atau ganda:
Contoh
// Menggunakan tanda kutip ganda:
Volvo XC60
// Menggunakan tanda kutip tunggal:
Volvo XC60
Coba Sendiri »
Anda dapat menggunakan kutipan di dalam string, asalkan tidak cocok dengan kutipan.
mengelilingi string:
Contoh
// Tanda kutip tunggal di dalam tanda kutip ganda:
Tidak apa-apa
// Kutipan tunggal di dalam kutipan ganda:
Dia dipanggil 'Johnny'
// Kutipan ganda di dalam kutipan tunggal:
Dia dipanggil "Johnny"
Coba Sendiri »
Anda akan belajar lebih banyak tentang string nanti dalam tutorial ini.
Angka JavaScript
Semua angka JavaScript disimpan sebagai angka desimal (floating point).
Angka dapat ditulis dengan, atau tanpa desimal:
Contoh
// Dengan desimal:
letx1 =34.00;
// Tanpa desimal:
letx2 =34;
Coba Sendiri »
Notasi Eksponensial
Angka ekstra besar atau ekstra kecil dapat dituliskan dengan ilmiah
(notasi) eksponensial:
Coba Sendiri »
Halo
Coba Sendiri »
Operator -=
Operator Penugasan Pengurangan mengurangkan nilai dari suatu variabel.
Contoh Penugasan Pengurangan
letx =10;
x -=5;
Coba Sendiri »
Operator *=
Operator Penugasan Perkalian mengalikan suatu variabel.
Contoh Penugasan Perkalian
letx =10;
x *= 5;
Coba Sendiri »
Operator **=
Operator Penugasan Eksponensiasi mengangkat variabel ke pangkat
dari operand.
Contoh Penugasan Pembangunan
letx =10;
x **=5;
Coba Sendiri »
Boolean hanya dapat memiliki dua nilai:benaratausalah.
Contoh
letx = 5;
lety =5;
letz =6;
(x == y) // Mengembalikan true
(x == z) // Mengembalikan false
Cobalah Sendiri »
Boolean sering digunakan dalam pengujian bersyarat.
Anda akan belajar lebih banyak tentang boolean di kemudian hari dalam tutorial ini.
Array JavaScript
Array JavaScript ditulis dengan tanda kurung siku.
Item dalam array dipisahkan oleh koma.
Kode berikut mendeklarasikan (membuat) sebuah array bernamamobil, berisi tiga
nama mobil
Contoh
constcars = ["Saab","Volvo","BMW"];
Coba Sendiri »
Indeks array dimulai dari nol, yang berarti item pertama adalah [0], yang kedua adalah
[1], dan seterusnya.
Anda akan belajar lebih banyak tentang array nanti di tutorial ini.
Objek JavaScript
Objek JavaScript ditulis dengan tanda kurung kurawal{}.
Properti objek ditulis sebagai pasangan nama:nilai, dipisahkan dengan koma.
Contoh
constperson = {firstName:"John", lastName:"Doe", age:50,
biru
Cobalah Sendiri »
Objek (orang) dalam contoh di atas memiliki 4 properti: firstName,
namaBelakang
Anda akan belajar lebih banyak tentang objek nanti dalam tutorial ini.
Operator typeof
Anda dapat menggunakan JavaScripttipeoperator untuk menemukan jenis dari JavaScript
variabel.
Thetipe darioperator mengembalikan tipe dari sebuah variabel atau ekspresi:
Contoh
tipe dari "" // Mengembalikan "string"
typeof"John" // Mengembalikan "string"
tipe dari "John Doe" // Mengembalikan "string"
Cobalah Sendiri »
Contoh
tipe0 // Mengembalikan "nomor"
tipe314 // Mengembalikan "angka"
tipe dari 3.14 // Mengembalikan
typeof(3) // Mengembalikan "angka"
tipe(3+4) // Mengembalikan "nomor"
Coba Sendiri »
Anda akan belajar lebih banyak tentang typeof di tutorial ini.
Tak terdefinisi
Dalam JavaScript, sebuah variabel tanpa nilai, memiliki nilaitidak terdefinisi. Tipe
jugatidak terdefinisi.
Contoh
mobil // Nilai tidak terdefinisi, tipe tidak terdefinisi
Coba Sendiri »
Setiap variabel dapat dikosongkan, dengan mengatur nilainya menjaditidak terdefinisiTipe akan
juga menjaditidak terdefinisi.
Contoh
tidak terdefinisi // Nilai tidak ditentukan, tipe tidak ditentukan
Coba Sendiri »
Nilai Kosong
Nilai kosong tidak ada hubungannya dengantidak terdefinisi.
String kosong memiliki nilai yang sah dan jenis.
Contoh
letcar // Nilainya adalah "", jenis datanya adalah "string"
Coba Sendiri »
Uji Diri Anda Dengan Latihan
Latihan:
Gunakan komentar untuk menggambarkan tipe data yang benar dari variabel berikut:
let panjang = 16;
Johnson
const x = {
John
Doe
}; //
Fungsi JavaScript
❮ SebelumnyaSelanjutnya❯
Fungsi JavaScript adalah sekumpulan kode yang dirancang untuk melakukan suatu hal tertentu
tugas.
Fungsi JavaScript dijalankan ketika "sesuatu" memanggilnya.
Contoh
// Fungsi untuk menghitung produk dari p1 dan p2
fungsi myFunction(p1, p2) {
returnp1 * p2;
}
Cobalah Sendiri »
Sintaks Fungsi JavaScript
Sebuah fungsi JavaScript didefinisikan denganfungsikata kunci, diikuti oleh
nama, diikuti oleh tanda kurung().
Nama fungsi dapat berisi huruf, digit, garis bawah, dan tanda dolar
(aturan yang sama seperti variabel).
Tanda kurung dapat menyertakan nama parameter yang dipisahkan oleh koma:
(parameter1, parameter2, ...)
Kode yang akan dijalankan, oleh fungsi, ditempatkan di dalam kurung kurawal:{}
fungsinama(parameter1, parameter2, parameter3) {
//kode yang akan dijalankan
}
Parameter fungsi dicantumkan di dalam tanda kurung () dalam fungsi
definisi.
Argumen fungsi adalah nilai yang diterima oleh fungsi ketika itu
dipanggil.
Di dalam fungsi, argumen (parameter) berperilaku sebagai lokal
variabel.
Panggilan Fungsi
Kode di dalam fungsi akan dijalankan ketika "sesuatu" memanggil (menggunakan)nya
fungsi:
Ketika sebuah peristiwa terjadi (ketika seorang pengguna mengklik tombol)
Ketika dipanggil dari kode JavaScript
Secara otomatis (dipanggil sendiri)
Anda akan belajar lebih banyak tentang pemanggilan fungsi di kemudian hari dalam tutorial ini.
IKLAN
Pengembalian Fungsi
Ketika JavaScript mencapai sebuahmengembalikanpernyataan, fungsi akan berhenti dieksekusi.
Jika fungsi dipanggil dari suatu pernyataan, JavaScript akan "kembali" ke
jalankan kode setelah pernyataan pemanggil.
Fungsi sering menghitung nilai kembalian. Nilai kembalian 'dikirimkan' kembali
kepada "penelepon":
Contoh
Hitunglah hasil kali dua angka, dan kembalikan hasilnya:
letx = fungsiSaya(4,3); // Fungsi dipanggil, nilai yang dikembalikan akan
berakhir di x
fungsi myFunction(a, b) {
returna * b; // Fungsi mengembalikan hasil kali a dan b
}
Hasil di x akan menjadi:
12
Coba Sendiri »
Mengapa Fungsi?
Anda dapat menggunakan kembali kode: Definisikan kode satu kali, dan gunakan berkali-kali.
Anda dapat menggunakan kode yang sama berkali-kali dengan argumen yang berbeda, untuk menghasilkan
hasil yang berbeda.
Contoh
Ubah Fahrenheit ke Celsius:
functiontoCelsius(fahrenheit) {
return(5/9) * (fahrenheit-32);
}
[Link]("demo").innerHTML = toCelsius(77);
Coba sendiri »
Operator () Menghimpun Fungsi
Menggunakan contoh di atas,keCelsiusmerujuk pada objek fungsi,
dankeCelsius()mengacu pada hasil fungsi.
Mengakses suatu fungsi tanpa () akan mengembalikan objek fungsi bukannya
fungsi hasil.
Contoh
fungsi keCelsius(fahrenheit) {
kembalikan (5/9) * (fahrenheit-32);
}
[Link]("demo").innerHTML = toCelsius;
Coba Sendiri »
Fungsi yang Digunakan sebagai Nilai Variabel
Fungsi dapat digunakan dengan cara yang sama seperti Anda menggunakan variabel, di semua jenis
rumus, tugas, dan perhitungan.
Contoh
Alih-alih menggunakan variabel untuk menyimpan nilai kembali dari sebuah fungsi:
letx = keCelsius(77);
Suhu adalah
Anda dapat menggunakan fungsi tersebut secara langsung, sebagai nilai variabel:
Suhu adalah
Coba Sendiri »
Anda akan belajar lebih banyak tentang fungsi di kemudian hari dalam tutorial ini.
Variabel Lokal
Variabel yang dideklarasikan di dalam fungsi JavaScript, menjadi LOKAL terhadap
fungsi.
Variabel lokal hanya dapat diakses dari dalam fungsi.
Contoh
// kode di sini TIDAK dapat menggunakan carName
fungsi myFunction() {
Volvo
// kode di sini DAPAT menggunakan namaMobil
// kode di sini TIDAK bisa menggunakan carName
Coba Sendiri »
Karena variabel lokal hanya dikenali di dalam fungsi mereka, variabel dengan
nama yang sama dapat digunakan dalam fungsi yang berbeda.
Variabel lokal dibuat ketika sebuah fungsi dimulai, dan dihapus ketika
fungsi telah selesai.
Uji Diri Anda Dengan Latihan
Latihan:
Jalankan fungsi yang bernamamyFunction.
fungsi myFunction() {
peringatan("Halo Dunia!");
}
;
Objek JavaScript
❮ SebelumnyaSelanjutnya❯
Objek Kehidupan Nyata, Sifat, dan Metode
Dalam kehidupan nyata, mobil adalah sebuah objek.
Sebuah mobil memiliki properti seperti berat dan warna, serta metode seperti mulai dan
berhenti
Objek Aset
Fiat
500
850kg
putih
Semua mobil memiliki sifat yang sama, tetapi nilai sifat berbeda dari mobil ke mobil.
ke mobil.
Semua mobil memiliki metode yang sama, tetapi metode tersebut dilakukan di
waktu yang berbeda.
Objek JavaScript
Anda sudah belajar bahwa variabel JavaScript adalah wadah untuk data
nilai.
Kode ini menetapkan nilai sederhana (Fiat) ke variabel yang bernama mobil:
Fiat
Cobalah Sendiri »
Objek juga merupakan variabel. Namun objek dapat mengandung banyak nilai.
Kode ini menetapkan banyak nilai (Fiat, 500, putih) ke variabel bernama mobil:
constcar = {type:"Fiat", model:"500", color:"white"};
Coba Sendiri »
Nilai ditulis sebagai pasangan nama: nilai (nama dan nilai dipisahkan oleh
kolon).
Merupakan praktik umum untuk mendeklarasikan objek dengankonstantakata kunci.
Pelajari lebih lanjut tentang menggunakankonstantadengan objek dalam bab:JS Const.
IKLAN
Definisi Objek
Anda mendefinisikan (dan membuat) objek JavaScript dengan literal objek:
Contoh
constperson = {firstName:"John", lastName:"Doe", age:50,
biru
Coba Sendiri »
Ruang dan jeda baris tidak penting. Definisi objek dapat meluas
beberapa baris:
Contoh
constperson = {
John
Doe
age:50,
biru
};
Coba Sendiri »
Properti Objek
Pasangan nilai nama dalam objek JavaScript disebut properti.
Properti Nilai Properti
namaDepan John
namaBelakang Betina
usia 50
warna mata biru
Mengakses Properti Objek
Anda dapat mengakses properti objek dengan dua cara:
[Link]
atau
namaObjek
Contoh1
[Link]
Cobalah Sendiri »
Contoh2
orang
Cobalah sendiri »
Objek JavaScript adalah wadah untuk nilai bernama yang disebut properti.
Metode Objek
Objek juga dapat memiliki metode.
Metode adalah aksi yang dapat dilakukan pada objek.
Metode disimpan dalam properti sebagai definisi fungsi.
Properti Nilai Properti
namaDepan John
namaBelakang Rusa betina
usia 50
warnaMata biru
namaLengkap fungsi() {kembali [Link] + " " + [Link];}
Metode adalah fungsi yang disimpan sebagai properti.
Contoh
constperson = {
John
Doe
id : 5566,
fungsi() {
kembalikan [Link] +" "+[Link];
}
};
Dalam contoh di atas,inimengacu pada objek orang.
[Link] properti firstName dari this.
[Link] propertiem pertama orang.
Apa ini?
Dalam JavaScript,inikata kunci merujuk pada suatu objek.
Objek mana yang tergantung pada bagaimanainisedang dipanggil (digunakan atau disebut).
Theinikata kunci merujuk pada objek yang berbeda tergantung pada bagaimana ia digunakan:
Dalam metode objek,inimengacu pada objek.
Sendirianinimerujuk pada objek global.
Dalam sebuah fungsi,inimengacu pada objek global.
Dalam sebuah fungsi, dalam mode ketat,iniadalahtidak terdefinisi.
Dalam sebuah acara,inimerujuk pada elemen yang menerima acara.
Metode sepertipanggil(), terapkan(), danmengikat()dapat merujukinikepada objek mana pun.
Catatan
inibukanlah variabel. Itu adalah kata kunci. Anda tidak dapat mengubah nilai dariini.
Lihat Juga:
Tutorial JavaScript ini
Kata Kunci ini
Dalam sebuah definisi fungsi,inimerujuk pada "pemilik" dari fungsi tersebut.
Dalam contoh di atas,iniapakah objek orang yang "memiliki"
yangnamaLengkapfungsi.
Dengan kata lain,[Link] yangnamaDepansifat objek ini.
Pelajari lebih lanjut tentanginidi Tutorial JavaScript ini.
Mengakses Metode Objek
Anda mengakses metode objek dengan sintaks berikut:
[Link]()
Contoh
[Link]();
Coba Sendiri »
Jika Anda mengakses metode tanpa tanda kurung (), itu akan mengembalikan
definisi fungsi:
Contoh
[Link]
Coba Sendiri »
Jangan Deklarasikan String, Angka, dan
Boolean sebagai Objek!
Ketika sebuah variabel JavaScript dideklarasikan dengan kata kunci "baru, variabelnya adalah
dibuat sebagai objek:
x =newString(); // Menyatakan x sebagai objek String
y =angkaBaru(); // Menyatakan y sebagai objek Number
z = newBoolean(); // Mendeklarasikan z sebagai objek Boolean
HindariString, Nomor, danBooleanobjek. Mereka mempersulit kode Anda dan memperlambat
menurunkan kecepatan eksekusi.
Anda akan belajar lebih banyak tentang objek nanti di tutorial ini.
Uji Diri Anda Dengan Latihan
Latihan:
PeringatanJohndengan mengekstrak informasi dariorangobjek.
const person = {
John
Doe
};
peringatan( );
Peristiwa JavaScript
❮ Sebelumnya Berikutnya❯
Peristiwa HTML adalah "hal-hal" yang terjadi pada elemen HTML.
Ketika JavaScript digunakan di halaman HTML, JavaScript dapat "bereaksi" terhadap ini
acara.
Peristiwa HTML
Sebuah peristiwa HTML bisa jadi sesuatu yang dilakukan oleh browser, atau sesuatu yang dilakukan oleh pengguna.
melakukannya.
Berikut adalah beberapa contoh peristiwa HTML:
Sebuah halaman web HTML telah selesai dimuat
Sebuah field input HTML telah diubah
Tombol HTML telah diklik
Seringkali, ketika peristiwa terjadi, Anda mungkin ingin melakukan sesuatu.
JavaScript memungkinkan Anda menjalankan kode ketika peristiwa terdeteksi.
HTML memungkinkan atribut pengendali acara, dengan kode JavaScript, untuk ditambahkan ke
Elemen HTML.
Dengan kutip satu:
<peristiwa elemen='beberapa JavaScript'>
Dengan tanda kutip ganda:
<acara elemenbeberapa JavaScript
Dalam contoh berikut, sebuahklikatribut (dengan kode), ditambahkan ke
a<tombol>elemen
Contoh
<button onclick="[Link]('demo').innerHTML =
Tanggal()"Waktu sekarang adalah?" tombol>
Coba Sendiri »
Dalam contoh di atas, kode JavaScript mengubah konten dari
elemen dengan id="demo".
Pada contoh berikut, kode mengubah konten elemen itu sendiri
([Link]):
Contoh
<button onclick="[Link] = Date()">Jam berapa?</button>
Coba Sendiri »
Kode JavaScript sering kali terdiri dari beberapa baris panjang. Lebih umum untuk melihat kejadian
atribut memanggil fungsi:
Contoh
<button onclick="displayDate()">Waktu adalah?</button>
Coba Sendiri »
IKLAN
Peristiwa HTML Umum
Berikut adalah daftar beberapa peristiwa HTML yang umum:
Acara Deskripsi
pada perubahan Sebuah elemen HTML telah diubah
klik Pengguna mengklik elemen HTML
onmouseover Pengguna menggerakkan mouse di atas elemen HTML
onmouseout Pengguna menggerakkan mouse menjauh dari elemen HTML
onkeydown Pengguna menekan tombol keyboard
pada pemuatan Browser telah selesai memuat halaman
Daftar ini jauh lebih panjang: Referensi JavaScript W3Schools peristiwa DOM HTML.
Penangkap Acara JavaScript
Penangan acara dapat digunakan untuk menangani dan memverifikasi input pengguna, tindakan pengguna, dan
browser_actions
Hal-hal yang harus dilakukan setiap kali sebuah halaman dimuat
Hal-hal yang harus dilakukan ketika halaman ditutup
Tindakan yang harus dilakukan ketika pengguna mengklik tombol
Konten yang harus diverifikasi saat pengguna memasukkan data
Dan lebih banyak ...
Banyak metode berbeda yang dapat digunakan untuk membuat JavaScript bekerja dengan peristiwa:
Atribut acara HTML dapat mengeksekusi kode JavaScript secara langsung
Atribut acara HTML dapat memanggil fungsi JavaScript
Anda dapat menetapkan fungsi pengendali acara Anda sendiri ke elemen HTML
Anda dapat mencegah peristiwa untuk dikirim atau ditangani
Dan lebih banyak lagi ...
Anda akan belajar lebih banyak tentang peristiwa dan pengendali peristiwa di DOM HTML
bab.
Uji Diri Anda Dengan Latihan
Latihan:
Yang<tombol>elemen harus melakukan sesuatu ketika seseorang mengkliknya. Cobalah untuk memperbaikinya!