0% menganggap dokumen ini bermanfaat (0 suara)

24 tayangan

5) JavaScript Ds

JavaScript adalah bahasa pemrograman yang ringan dan ditafsirkan yang dirancang untuk membuat aplikasi berbasis web yang interaktif. Ia terintegrasi dengan HTML dan tersedia di semua browser modern untuk memungkinkan interaksi sisi klien seperti validasi form dan manipulasi konten. JavaScript memberikan kemampuan untuk membangun antarmuka pengguna yang kaya dan responsif tanpa mengirim permintaan ke server.

Diunggah oleh

Putra Adi firmansyah

Hak Cipta

Format Tersedia

Unduh sebagai ODT, PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

24 tayangan

5) JavaScript Ds

Diunggah oleh

Putra Adi firmansyah

Hak Cipta

Format Tersedia

Unduh sebagai ODT, PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 129

Tutorial Javascript

JavaScript adalah bahasa pemrograman yang ringan dan dapat

ditafsirkan . Ini dirancang untuk membuat aplikasi yang berpusat
pada jaringan. Ini gratis dan terintegrasi dengan
Java. JavaScript sangat mudah diimplementasikan karena
terintegrasi dengan HTML. Ini terbuka dan lintas platform.
Mengapa Mempelajari Javascript
Javascript adalah suatu KEHARUSAN bagi pelajar dan pekerja
profesional untuk menjadi Insinyur Perangkat Lunak yang hebat
khususnya ketika mereka bekerja di Domain Pengembangan
Web. Saya akan mencantumkan beberapa keuntungan utama
mempelajari Javascript:
•Javascript adalah bahasa pemrograman paling populer di dunia
dan menjadikannya pilihan tepat bagi para
programmer. Setelah Anda mempelajari Javascript, ada
baiknya Anda mengembangkan perangkat lunak front-end
dan back-end yang hebat menggunakan kerangka kerja
berbasis Javascript yang berbeda seperti jQuery, Node.JS,
dll.
•Javascript ada dimana-mana, sudah terinstal di setiap
browser web modern sehingga untuk mempelajari Javascript
Anda benar-benar tidak memerlukan pengaturan lingkungan
khusus. Misalnya Chrome, Mozilla Firefox, Safari dan semua
browser yang Anda kenal saat ini, mendukung Javascript.
•Javascript membantu Anda membuat situs web yang sangat
indah dan cepat. Anda dapat mengembangkan situs web
Anda dengan tampilan dan nuansa seperti konsol dan
memberikan Pengalaman Pengguna Grafis terbaik kepada
pengguna Anda.
•Penggunaan JavaScript kini telah meluas ke pengembangan
aplikasi seluler, pengembangan aplikasi desktop, dan
pengembangan game. Ini membuka banyak peluang bagi
Anda sebagai Javascript Programmer.
•Karena tingginya permintaan, ada banyak sekali
pertumbuhan lapangan kerja dan gaji tinggi bagi mereka
yang menguasai JavaScript. Anda dapat menavigasi ke
berbagai situs pekerjaan untuk melihat seperti apa
keterampilan JavaScript di pasar kerja.
•Hal hebat tentang Javascript adalah Anda akan menemukan
banyak sekali kerangka kerja dan Perpustakaan yang telah
dikembangkan yang dapat digunakan secara langsung dalam
pengembangan perangkat lunak Anda untuk mengurangi
waktu pemasaran Anda.
Mungkin ada ribuan alasan bagus untuk mempelajari
Pemrograman Javascript. Namun satu hal yang pasti, untuk
mempelajari bahasa pemrograman apa pun , tidak hanya Javascript,
Anda hanya perlu coding, coding, dan terakhir coding hingga
Anda menjadi ahli.
Halo Dunia menggunakan Javascript
Sekadar memberi Anda sedikit keseruan tentang pemrograman
Javascript , saya akan memberikan Anda program Javascript Hello
World konvensional kecil, Anda dapat mencobanya menggunakan
tautan Demo
Demo Langsung
<html>
<body>
<script language = "javascript" type =
"text/javascript">

</script>
</body>
</html>
Ada banyak kerangka kerja dan perpustakaan Javascript berguna
yang tersedia:
•Angular
•React
•jQuery
•Vue.js
•Ext.js
•Ember.js
•Meteor
•Mithril
•Node.js
•Polimer
•Aurelia
•Backbone.js
Sangat tidak mungkin untuk memberikan daftar lengkap semua
kerangka dan perpustakaan Javascript yang tersedia. Dunia
Javascript terlalu besar dan terlalu banyak hal baru yang terjadi.
Aplikasi Pemrograman Javascript
Seperti disebutkan sebelumnya, Javascript adalah salah satu bahasa
pemrograman yang paling banyak digunakan (Front-end dan juga
Back-end). Ia hadir di hampir setiap bidang pengembangan
perangkat lunak. Saya akan mencantumkan beberapa di
antaranya di sini:
•Validasi sisi klien - Ini sangat penting untuk memverifikasi
masukan pengguna sebelum mengirimkannya ke server dan
Javascript memainkan peran penting dalam memvalidasi
masukan tersebut di front-end itu sendiri.
•Memanipulasi Halaman HTML - Javascript membantu
memanipulasi halaman HTML dengan cepat. Ini membantu
dalam menambahkan dan menghapus tag HTML apa pun
dengan sangat mudah menggunakan javascript dan
memodifikasi HTML Anda untuk mengubah tampilan dan
nuansanya berdasarkan perangkat dan persyaratan yang
berbeda.
•Notifikasi Pengguna - Anda dapat menggunakan Javascript
untuk memunculkan pop-up dinamis di halaman web untuk
memberikan berbagai jenis notifikasi kepada pengunjung
situs web Anda.
•Pemuatan Data Back-end - Javascript menyediakan
perpustakaan Ajax yang membantu memuat data back-end
saat Anda melakukan beberapa pemrosesan lainnya. Ini
benar-benar memberikan pengalaman yang luar biasa
kepada pengunjung website Anda.
•Presentasi - JavaScript juga menyediakan fasilitas untuk
membuat presentasi yang memberikan tampilan dan nuansa
situs web. JavaScript menyediakan perpustakaan RevealJS
dan BespokeJS untuk membangun presentasi slide berbasis
web.
•Aplikasi Server - Node JS dibangun di atas runtime Javascript
Chrome untuk membangun aplikasi jaringan yang cepat dan
skalabel. Ini adalah perpustakaan berbasis peristiwa yang
membantu dalam mengembangkan aplikasi server yang
sangat canggih termasuk Server Web.
Daftarnya berlanjut, ada berbagai bidang di mana jutaan
pengembang perangkat lunak dengan senang hati menggunakan
Javascript untuk mengembangkan situs web hebat dan perangkat
lunak lainnya.
Hadirin
Tutorial ini disiapkan untuk pemula JavaScript untuk membantu
mereka memahami fungsi dasar JavaScript untuk membangun
halaman web dinamis dan aplikasi web.
Prasyarat
Untuk tutorial Javascript ini , diasumsikan bahwa pembaca memiliki
pengetahuan sebelumnya tentang coding HTML. Akan membantu
jika pembaca memiliki pemahaman sebelumnya terhadap konsep
pemrograman berorientasi objek dan gambaran umum tentang
pembuatan aplikasi online.

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman komputer yang dinamis. Ini ringan dan paling
umum digunakan sebagai bagian dari halaman web, yang implementasinya
memungkinkan skrip sisi klien untuk berinteraksi dengan pengguna dan membuat
halaman dinamis. Ini adalah bahasa pemrograman yang ditafsirkan dengan
kemampuan berorientasi objek.
JavaScript pertama kali dikenal sebagai LiveScript, tetapi Netscape mengubah
namanya menjadi JavaScript, mungkin karena kegembiraan yang dihasilkan oleh
Java. JavaScript muncul pertama kali di Netscape 2.0 pada tahun 1995 dengan
nama LiveScript . Inti tujuan umum dari bahasa ini telah disematkan di Netscape,
Internet Explorer, dan browser web lainnya.
Spesifikasi ECMA -262 mendefinisikan versi standar bahasa inti JavaScript.

 JavaScript adalah bahasa pemrograman yang ringan dan ditafsirkan.

 Dirancang untuk membuat aplikasi jaringan-sentris.
 Melengkapi dan terintegrasi dengan Java.
 Melengkapi dan terintegrasi dengan HTML.
 Terbuka dan lintas platform

JavaScript Sisi Klien

JavaScript sisi klien adalah bentuk bahasa yang paling umum. Skrip harus disertakan
atau direferensikan oleh document HTML agar kode dapat ditafsirkan oleh browser.
Ini berarti bahwa halaman web tidak harus berupa HTML statis, tetapi dapat
menyertakan program yang berinteraksi dengan pengguna, mengontrol browser, dan
membuat konten HTML secara dinamis.
Mekanisme sisi klien JavaScript memberikan banyak keuntungan dibandingkan skrip
sisi server CGI tradisional. Misalnya, Anda mungkin menggunakan JavaScript untuk
memeriksa apakah pengguna telah memasukkan alamat email yang valid di kolom
form.
Kode JavaScript dijalankan saat pengguna mengirimkan form, dan hanya jika semua
entri valid, mereka akan dikirimkan ke Server Web.
JavaScript dapat digunakan untuk menjebak peristiwa yang diprakarsai pengguna
seperti klik tombol, navigasi tautan, dan tindakan lain yang diprakarsai pengguna
secara eksplisit atau implisit.
Keuntungan JavaScript
Manfaat menggunakan JavaScript adalah −
 Lebih sedikit interaksi server - Anda dapat memvalidasi input pengguna
sebelum mengirim halaman ke server. Ini menghemat lalu lintas server, yang
berarti lebih sedikit beban di server Anda.
 Umpan balik langsung kepada pengunjung − Mereka tidak perlu menunggu
halaman dimuat ulang untuk mengetahui apakah mereka lupa memasukkan
sesuatu.
 Peningkatan interaktivitas – Anda dapat membuat antarmuka yang bereaksi
ketika pengguna mengarahkannya dengan mouse atau mengaktifkannya melalui
keyboard.
 Antarmuka yang lebih kaya − Anda dapat menggunakan JavaScript untuk
menyertakan item seperti komponen seret dan lepas dan penggeser untuk
memberikan Antarmuka Kaya kepada pengunjung situs Anda.

Keterbatasan JavaScript
Kami tidak dapat memperlakukan JavaScript sebagai bahasa pemrograman yang
lengkap. Itu tidak memiliki fitur penting berikut -
 JavaScript sisi klien tidak mengizinkan pembacaan atau penulisan file. Ini telah
disimpan untuk alasan keamanan.
 JavaScript tidak dapat digunakan untuk aplikasi jaringan karena tidak tersedia
dukungan seperti itu.
 JavaScript tidak memiliki kemampuan multi-threading atau multiprosesor.
Sekali lagi, JavaScript adalah bahasa pemrograman yang ringan dan ditafsirkan yang
memungkinkan Anda membangun interaktivitas ke dalam halaman HTML statis.

Alat Pengembangan JavaScript

Salah satu kekuatan utama JavaScript adalah tidak memerlukan alat pengembangan
yang mahal. Anda dapat memulai dengan editor teks sederhana seperti
Notepad. Karena ini adalah bahasa yang ditafsirkan di dalam konteks peramban web,
Anda bahkan tidak perlu membeli kompiler.
Untuk membuat hidup kita lebih sederhana, berbagai vendor telah menghadirkan alat
pengeditan JavaScript yang sangat bagus. Beberapa dari mereka tercantum di sini −
 Microsoft FrontPage - Microsoft telah mengembangkan editor HTML populer
yang disebut FrontPage. FrontPage juga menyediakan pengembang web dengan
sejumlah alat JavaScript untuk membantu pembuatan situs web interaktif.
 Macromedia Dreamweaver MX − Macromedia Dreamweaver MX adalah editor
HTML dan JavaScript yang sangat populer di kalangan pengembangan web
profesional. Ini menyediakan beberapa komponen JavaScript prebuilt yang
berguna, terintegrasi dengan baik dengan database, dan sesuai dengan standar
baru seperti XHTML dan XML.
 Macromedia HomeSite 5 − HomeSite 5 adalah editor HTML dan JavaScript
yang populer dari Macromedia yang dapat digunakan untuk mengelola situs web
pribadi secara efektif.

Di mana JavaScript Hari Ini?

Standar ECMAScript Edition 5 akan menjadi pembaruan pertama yang dirilis dalam
lebih dari empat tahun. JavaScript 2.0 sesuai dengan Edisi 5 standar ECMAScript, dan
perbedaan antara keduanya sangat kecil.
Spesifikasi untuk JavaScript 2.0 dapat ditemukan di situs
berikut: http://www.ecmascript.org/
Saat ini, JavaScript Netscape dan JScript Microsoft sesuai dengan standar
ECMAScript, meskipun kedua bahasa tersebut masih mendukung fitur yang bukan
merupakan bagian dari standar.

JavaScript - Sintaks
JavaScript dapat diimplementasikan menggunakan pernyataan JavaScript yang
ditempatkan di dalam tag HTML <script>... </script> di halaman web.
Anda dapat menempatkan tag <script> , yang berisi JavaScript Anda, di mana saja di
dalam halaman web Anda, tetapi biasanya disarankan agar Anda menyimpannya di
dalam tag <head> .
Tag <script> mengingatkan program browser untuk mulai menginterpretasikan semua
teks di antara tag-tag ini sebagai skrip. Sintaks sederhana JavaScript Anda akan
muncul sebagai berikut.
<script ...>
JavaScript code
</script>
Tag skrip mengambil dua atribut penting −
 Language − Atribut ini menentukan bahasa scripting apa yang Anda
gunakan. Biasanya, nilainya adalah javascript. Meskipun versi HTML terbaru
(dan XHTML, penggantinya) telah menghapus penggunaan atribut ini.
 Type − Atribut ini sekarang direkomendasikan untuk menunjukkan bahasa
scripting yang digunakan dan nilainya harus diatur ke "text/javascript".
Jadi segmen JavaScript Anda akan terlihat seperti -
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>

Kode JavaScript Pertama Anda

Mari kita ambil contoh contoh untuk mencetak "Hello World". Kami menambahkan
komentar HTML opsional yang mengelilingi kode JavaScript kami. Ini untuk menyimpan
kode kita dari browser yang tidak mendukung JavaScript. Komentar diakhiri dengan "//--
>". Di sini "//" menandakan komentar dalam JavaScript, jadi kami menambahkannya
untuk mencegah browser membaca akhir komentar HTML sebagai bagian dari kode
JavaScript. Selanjutnya, kita memanggil function document.write yang menulis string
ke dalam document HTML kita.
Function ini dapat digunakan untuk menulis teks, HTML, atau keduanya. Lihatlah kode
berikut.
Demo Langsung
<html>
<body>
<script language = "javascript" type = "text/javascript">

</script>
</body>
</html>
Kode ini akan menghasilkan hasil berikut -
Hello World!

Spasi Putih dan Pemisahan Baris

JavaScript mengabaikan spasi, tab, dan baris baru yang muncul di program
JavaScript. Anda dapat menggunakan spasi, tab, dan baris baru secara bebas dalam
program Anda dan Anda bebas memformat dan membuat indentasi program Anda
dengan cara yang rapi dan konsisten yang membuat kode mudah dibaca dan dipahami.

Titik koma adalah Opsional

Pernyataan sederhana dalam JavaScript umumnya diikuti oleh karakter titik koma,
sama seperti di C, C++, dan Java. JavaScript, bagaimanapun, memungkinkan Anda
untuk menghilangkan titik koma ini jika setiap pernyataan Anda ditempatkan pada baris
terpisah. Misalnya, kode berikut dapat ditulis tanpa titik koma.
<script language = "javascript" type = "text/javascript">

</script>
Tetapi ketika diformat dalam satu baris sebagai berikut, Anda harus menggunakan titik
koma −
<script language = "javascript" type = "text/javascript">

</script>
Catatan - Ini adalah praktik pemrograman yang baik untuk menggunakan titik koma.

Sensitivitas Kasus
JavaScript adalah bahasa yang peka terhadap huruf besar-kecil. Ini berarti bahwa kata
kunci bahasa, variabel, nama function, dan pengidentifikasi lainnya harus selalu diketik
dengan kapitalisasi huruf yang konsisten.
Jadi pengidentifikasi Waktu dan WAKTU akan menyampaikan arti yang berbeda dalam
JavaScript.
CATATAN − Kehati-hatian harus dilakukan saat menulis nama variabel dan function
dalam JavaScript.

Komentar dalam JavaScript

JavaScript mendukung komentar gaya-C dan gaya-C++, Jadi -
 Setiap teks antara // dan akhir baris diperlakukan sebagai komentar dan
diabaikan oleh JavaScript.
 Teks apa pun di antara karakter /* dan */ diperlakukan sebagai komentar. Ini
dapat menjangkau beberapa baris.
 JavaScript juga mengenali urutan pembukaan komentar HTML  tidak dikenali oleh JavaScript sehingga harus
ditulis sebagai //-->.
Contoh
Contoh berikut menunjukkan cara menggunakan komentar di JavaScript.
<script language = "javascript" type = "text/javascript">
<!--
// This is a comment. It is similar to comments in C++

/*
* This is a multi-line comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
Mengaktifkan JavaScript di Peramban
Semua browser modern hadir dengan dukungan bawaan untuk JavaScript. Seringkali,
Anda mungkin perlu mengaktifkan atau menonaktifkan dukungan ini secara
manual. Bab ini menjelaskan prosedur mengaktifkan dan menonaktifkan dukungan
JavaScript di browser Anda: Internet Explorer, Firefox, chrome, dan Opera.

JavaScript di Internet Explorer

Berikut adalah langkah-langkah sederhana untuk menghidupkan atau mematikan
JavaScript di Internet Explorer Anda −
 Ikuti Alat → Opsi Internet dari menu.
 Pilih tab Keamanan dari kotak dialog.
 Klik tombol Tingkat Kustom .
 Gulir ke bawah hingga Anda menemukan opsi Scripting .
 Pilih Aktifkan tombol radio di bawah Skrip aktif .
 Terakhir klik OK dan keluar
Untuk menonaktifkan dukungan JavaScript di Internet Explorer, Anda harus
memilih Nonaktifkan tombol radio di bawah Skrip aktif .

JavaScript di Firefox
Berikut adalah langkah-langkah untuk mengaktifkan atau menonaktifkan JavaScript di
Firefox −
 Buka tab baru → ketik about:config di address bar.
 Kemudian Anda akan menemukan dialog alert. Pilih Saya akan berhati-hati,
saya janji!
 Kemudian Anda akan menemukan daftar opsi konfigurasi di browser.
 Di bilah pencarian, ketik javascript.enabled .
 Di sana Anda akan menemukan opsi untuk mengaktifkan atau menonaktifkan
javascript dengan mengklik kanan pada nilai opsi itu → pilih toggle .
Jika javascript.enabled benar; itu berubah menjadi false setelah mengklik toogle . Jika
javascript dinonaktifkan; itu diaktifkan setelah mengklik sakelar.

JavaScript di Chrome
Berikut adalah langkah-langkah untuk mengaktifkan atau menonaktifkan JavaScript di
Chrome −
 Klik menu Chrome di pojok kanan atas browser Anda.
 Pilih Pengaturan .
 Klik Tampilkan pengaturan lanjutan di akhir halaman.
 Di bawah bagian Privasi , klik tombol Setelan konten.
 Di bagian "Javascript", pilih "Jangan izinkan situs apa pun menjalankan
JavaScript" atau "Izinkan semua situs menjalankan JavaScript (disarankan)".

JavaScript di Opera
Berikut adalah langkah-langkah untuk mengaktifkan atau menonaktifkan JavaScript di
Opera−
 Ikuti Alat → Preferensi dari menu.
 Pilih opsi Tingkat Lanjut dari kotak dialog.
 Pilih Konten dari item yang terdaftar.
 Pilih kotak centang Aktifkan JavaScript .
 Terakhir klik OK dan keluar.
Untuk menonaktifkan dukungan JavaScript di Opera, Anda sebaiknya tidak
mencentang kotak Aktifkan JavaScript .

Alert untuk Browser Non-JavaScript

Jika Anda harus melakukan sesuatu yang penting menggunakan JavaScript, maka
Anda dapat menampilkan pesan alert kepada pengguna menggunakan
tag <noscript> .
Anda dapat menambahkan blok noscript segera setelah blok skrip sebagai berikut −
<html>
<body>
<script language = "javascript" type = "text/javascript">

</script>

JavaScript - Penempatan di File HTML

Ada fleksibilitas yang diberikan untuk menyertakan kode JavaScript di manapun dalam
document HTML. Namun cara yang paling disukai untuk menyertakan JavaScript dalam
file HTML adalah sebagai berikut −
 Skrip di bagian <head>...</head>.
 Skrip di bagian <body>...</body>.
 Skrip di bagian <body>...</body> dan <head>...</head>.
 Script dalam file eksternal dan kemudian sertakan di bagian <head>...</head>.
Di bagian berikut, kita akan melihat bagaimana kita dapat menempatkan JavaScript di
file HTML dengan berbagai cara.

JavaScript di bagian <head>...</head>

Jika Anda ingin menjalankan skrip pada beberapa Events, seperti ketika pengguna
mengklik di suatu tempat, maka Anda akan menempatkan skrip itu di kepala sebagai
berikut –
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
Kode ini akan menghasilkan hasil berikut -

JavaScript di bagian <body>...</body>

Jika Anda memerlukan skrip untuk dijalankan saat halaman dimuat sehingga skrip
menghasilkan konten di halaman, maka skrip masuk ke bagian <body>
document. Dalam hal ini, Anda tidak akan memiliki function apa pun yang ditentukan
menggunakan JavaScript. Lihatlah kode berikut.
Demo Langsung
<html>
<head>
</head>

<p>This is web page body </p>

</body>
</html>
Kode ini akan menghasilkan hasil berikut -

JavaScript di Bagian <body> dan <head>

Anda dapat meletakkan kode JavaScript Anda di bagian <head> dan <body> sekaligus
sebagai berikut −
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<input type = "button" onclick = "sayHello()" value = "Say Hello" />

</body>
</html>
Kode ini akan menghasilkan hasil berikut -

JavaScript di File Eksternal

Saat Anda mulai bekerja lebih ekstensif dengan JavaScript, kemungkinan besar Anda
akan menemukan bahwa ada kasus di mana Anda menggunakan kembali kode
JavaScript yang identik di beberapa halaman situs.
Anda tidak dibatasi untuk mempertahankan kode identik dalam banyak file HTML. Tag
skrip menyediakan mekanisme untuk memungkinkan Anda menyimpan JavaScript
dalam file eksternal dan kemudian memasukkannya ke dalam file HTML Anda .
Berikut adalah contoh untuk menunjukkan bagaimana Anda dapat menyertakan file
JavaScript eksternal dalam kode HTML Anda menggunakan tag skrip dan
atribut src- nya .
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>

<body>
.......
</body>
</html>
Untuk menggunakan JavaScript dari sumber file eksternal, Anda perlu menulis semua
kode sumber JavaScript Anda dalam file teks sederhana dengan ekstensi ".js" dan
kemudian menyertakan file tersebut seperti yang ditunjukkan di atas.
Misalnya, Anda dapat menyimpan konten berikut di file namafile.js dan kemudian Anda
dapat menggunakan function sayHello di file HTML Anda setelah menyertakan file
namafile.js.
function sayHello() {
alert("Hello World")
}
JavaScript - Variabel
Tipe Data JavaScript
Salah satu karakteristik paling mendasar dari bahasa pemrograman adalah sekumpulan
tipe data yang didukungnya. Ini adalah jenis nilai yang dapat direpresentasikan dan
dimanipulasi dalam bahasa pemrograman.
JavaScript memungkinkan Anda bekerja dengan tiga tipe data primitif −
 Numbers, mis. 123, 120,50 dst.
 String teks misalnya "String teks ini" dll.
 Boolean misalnya benar atau salah.
JavaScript juga mendefinisikan dua tipe data yang sepele, null dan undefined, yang
masing-masing hanya mendefinisikan satu nilai. Selain tipe data primitif ini, JavaScript
mendukung tipe data gabungan yang dikenal sebagai object . Kami akan membahas
objek secara rinci dalam bab terpisah.
Catatan - JavaScript tidak membuat perbedaan antara nilai integer dan nilai floating-
point. Semua angka dalam JavaScript direpresentasikan sebagai nilai floating-
point. JavaScript mewakili angka menggunakan format floating-point 64-bit yang
ditentukan oleh standar IEEE 754.

Variabel JavaScript
Seperti banyak bahasa pemrograman lainnya, JavaScript memiliki variabel. Variabel
dapat dianggap sebagai wadah bernama. Anda dapat menempatkan data ke dalam
wadah ini dan kemudian merujuk ke data hanya dengan menamai wadah tersebut.
Sebelum Anda menggunakan variabel dalam program JavaScript, Anda harus
mendeklarasikannya. Variabel dideklarasikan dengan kata kunci var sebagai berikut.
<script type = "text/javascript">

</script>
Anda juga dapat mendeklarasikan beberapa variabel dengan kata kunci var yang sama
sebagai berikut –
<script type = "text/javascript">

</script>
Menyimpan nilai dalam variabel disebut inisialisasi variabel . Anda dapat melakukan
inisialisasi variabel pada saat pembuatan variabel atau di lain waktu ketika Anda
membutuhkan variabel tersebut.
Misalnya, Anda dapat membuat variabel bernama uang dan menetapkan nilai 2000,50
nanti. Untuk variabel lain, Anda dapat menetapkan nilai pada saat inisialisasi sebagai
berikut.
<script type = "text/javascript">

</script>
Catatan - Gunakan kata kunci var hanya untuk deklarasi atau inisialisasi, sekali seumur
hidup nama variabel apa pun dalam document. Anda tidak boleh mendeklarasikan
ulang variabel yang sama dua kali.
JavaScript adalah bahasa untyped . Ini berarti bahwa variabel JavaScript dapat
menyimpan nilai dari tipe data apa pun. Tidak seperti banyak bahasa lain, Anda tidak
perlu memberi tahu JavaScript selama deklarasi variabel jenis nilai apa yang akan
disimpan oleh variabel tersebut. Jenis nilai variabel dapat berubah selama eksekusi
program dan JavaScript menanganinya secara otomatis.

Lingkup Variabel JavaScript

Cakupan variabel adalah wilayah program Anda yang mendefinisikannya. Variabel
JavaScript hanya memiliki dua cakupan.
 Variabel Global − Variabel global memiliki cakupan global yang artinya dapat
ditentukan di mana saja dalam kode JavaScript Anda.
 Variabel Lokal − Variabel lokal hanya akan terlihat di dalam function yang
didefinisikan. Parameter function selalu lokal untuk function itu.
Di dalam tubuh function, variabel lokal lebih diutamakan daripada variabel global
dengan nama yang sama. Jika Anda mendeklarasikan variabel lokal atau parameter
function dengan nama yang sama dengan variabel global, Anda secara efektif
menyembunyikan variabel global. Perhatikan contoh berikut.
Demo Langsung
<html>
<body onload = checkscope();>
<script type = "text/javascript">

</script>
</body>
</html>
Ini menghasilkan hasil berikut -
local

Nama Variabel JavaScript

Saat menamai variabel Anda dalam JavaScript, perhatikan aturan berikut.
 Anda tidak boleh menggunakan salah satu kata kunci yang dicadangkan
JavaScript sebagai nama variabel. Kata kunci ini disebutkan di bagian
selanjutnya. Misalnya, nama variabel break atau boolean tidak valid.
 Nama variabel JavaScript tidak boleh dimulai dengan angka (0-9). Mereka harus
dimulai dengan huruf atau karakter garis bawah. Misalnya, 123test adalah nama
variabel yang tidak valid tetapi _123test adalah nama yang valid.
 Nama variabel JavaScript peka terhadap huruf besar-
kecil. Misalnya, Nama dan nama adalah dua variabel yang berbeda.

Kata Cadangan JavaScript

Daftar semua kata yang dicadangkan dalam JavaScript diberikan dalam tabel
berikut. Mereka tidak dapat digunakan sebagai variabel JavaScript, function, method,
label lingkaran, atau nama objek apa pun.

abstrak kalau tidak contoh mengalihkan

boolean enum int disinkronkan

merusak ekspor antarmuka ini

byte memanjang panjang melemparkan

kasus PALSU warga asli melempar

menangkap terakhir baru sementara

arang Akhirnya batal BENAR

kelas mengambang kemasan mencoba

const untuk pribadi jenis

melanjutkan function terlindung var

debugger pergi ke publik ruang kosong

bawaan jika kembali tidak stabil

menghapus alat pendek ketika

Mengerjakan impor statis dengan

dobel di dalam super

JavaScript - Operator
Apa itu Operator?
Mari kita ambil expression sederhana 4 + 5 sama dengan 9 . Di sini 4 dan 5
disebut operan dan '+' disebut operator . JavaScript mendukung jenis operator berikut.

 Operator Aritmatika
 Operator Perbandingan
 Operator Logis (atau Relasional).
 Operator Penugasan
 Operator Conditional (atau terner).
Mari kita lihat semua operator satu per satu.

Operator Aritmatika
JavaScript mendukung operator aritmatika berikut −
Asumsikan variabel A menampung 10 dan variabel B menampung 20, maka -

Sr.No Operator & Deskripsi

1
+ (Tambahan)
Menambahkan dua operan
Mis: A + B akan memberi 30

2
- (Pengurangan)
Kurangi operan kedua dari yang pertama
Mis: A - B akan memberi -10

3
* (Perkalian)
Kalikan kedua operan
Mis: A * B akan memberi 200

4
/ (Divisi)
Membagi pembilang dengan penyebut
Contoh: B/A akan memberikan 2

5
% (Modulus)
Mengeluarkan sisa pembagian bilangan bulat
Contoh: B % A akan memberikan 0
6
++ (Kenaikan)
Meningkatkan nilai integer per satu
Contoh: A++ akan memberikan 11

7
-- (Penurunan)
Mengurangi nilai bilangan bulat satu per satu
Mis: A-- akan memberi 9

Catatan - Operator penambahan (+) berfunction untuk Numerik dan juga

String. misalnya "a" + 10 akan menghasilkan "a10".
Contoh
Kode berikut menunjukkan cara menggunakan operator aritmatika dalam JavaScript.
Demo Langsung
<html>
<body>

<script type = "text/javascript">

<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";

document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);

document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);

document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);

document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);

document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);

a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);

b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);
//-->
</script>

Set the variables to different values and then try...

</body>
</html>
Keluaran
a + b = 43
a - b = 23
a / b = 3.3
a%b=3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

Operator Perbandingan
JavaScript mendukung operator perbandingan berikut −
Asumsikan variabel A menampung 10 dan variabel B menampung 20, maka -

Sr.No Operator & Deskripsi

1
= = (Sama dengan)
Memeriksa apakah nilai dari dua operan sama atau tidak, jika ya, maka kondisi
menjadi benar.
Mis: (A == B) tidak benar.

2
!= (Tidak Sama)
Memeriksa apakah nilai dua operan sama atau tidak, jika nilainya tidak sama,
maka kondisi menjadi benar.
Contoh: (A != B) benar.

3
> (Lebih besar dari)
Mengecek apakah nilai operan kiri lebih besar dari nilai operan kanan, jika ya,
maka kondisi menjadi benar.
Contoh: (A > B) tidak benar.

4
< (Kurang dari)
Mengecek apakah nilai operan kiri lebih kecil dari nilai operan kanan, jika ya,
maka kondisi menjadi benar.
Mis: (A < B) benar.

5
>= (Lebih besar dari atau Sama dengan)
Mengecek apakah nilai operan kiri lebih besar atau sama dengan nilai operan
kanan, jika ya, maka kondisi menjadi benar.
Contoh: (A >= B) tidak benar.

6
<= (Kurang dari atau Sama dengan)
Mengecek apakah nilai operan kiri lebih kecil atau sama dengan nilai operan
kanan, jika ya, maka kondisi menjadi benar.
Mis: (A <= B) benar.

Contoh
Kode berikut menunjukkan cara menggunakan operator perbandingan dalam
JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";

document.write("(a == b) => ");

result = (a == b);
document.write(result);
document.write(linebreak);

document.write("(a < b) => ");

result = (a < b);
document.write(result);
document.write(linebreak);

document.write("(a > b) => ");

result = (a > b);
document.write(result);
document.write(linebreak);

document.write("(a != b) => ");

result = (a != b);
document.write(result);
document.write(linebreak);

document.write("(a >= b) => ");

result = (a >= b);
document.write(result);
document.write(linebreak);

document.write("(a <= b) => ");

result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and different operators and then try...
</body>
</html>
Keluaran
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
Set the variables to different values and different operators and then try...
Operator Logika
JavaScript mendukung operator logika berikut −
Asumsikan variabel A menampung 10 dan variabel B menampung 20, maka -

Sr.No Operator & Deskripsi

1
&& (Logika DAN)
Jika kedua operan bukan nol, maka kondisi menjadi benar.
Mis: (A && B) benar.

2
|| (Logika ATAU)
Jika salah satu dari dua operan bukan nol, maka kondisinya menjadi benar.
Mis: (A || B) benar.

3
! (TIDAK logis)
Membalik keadaan logis dari operannya. Jika suatu kondisi benar, maka
operator Logical NOT akan membuatnya salah.
Contoh: ! (A && B) salah.

Contoh
Coba kode berikut untuk mempelajari cara mengimplementasikan Operator Logika di
JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";

document.write("(a && b) => ");

result = (a && b);
document.write(result);
document.write(linebreak);

document.write("(a || b) => ");

result = (a || b);
document.write(result);
document.write(linebreak);

document.write("!(a && b) => ");

result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Keluaran
(a && b) => false
(a || b) => true
!(a && b) => true
Set the variables to different values and different operators and then try...

Operator Bitwise
JavaScript mendukung operator bitwise berikut −
Asumsikan variabel A menampung 2 dan variabel B menampung 3, maka -

Sr.No Operator & Deskripsi

1
& (Bitwise DAN)
Itu melakukan operasi Boolean AND pada setiap bit argumen integernya.
Mis: (A & B) adalah 2.

2
| (BitWise ATAU)
Itu melakukan operasi Boolean OR pada setiap bit argumen bilangan bulatnya.
Mis: (A | B) adalah 3.

3
^ (Bitwise XOR)
Itu melakukan operasi OR eksklusif Boolean pada setiap bit argumen bilangan
bulatnya. Eksklusif ATAU berarti operan satu benar atau operan dua benar,
tetapi tidak keduanya.
Mis: (A ^ B) adalah 1.

4
~ (Bitwise not)
Ini adalah operator unary dan beroperasi dengan membalik semua bit di
operan.
Contoh: (~B) adalah -4.

5
<< (Pergeseran Kiri)
Itu memindahkan semua bit dalam operan pertamanya ke kiri dengan jumlah
tempat yang ditentukan dalam operan kedua. Bit baru diisi dengan
nol. Menggeser nilai ke kiri satu posisi sama dengan mengalikannya dengan 2,
menggeser dua posisi sama dengan mengalikannya dengan 4, dan
seterusnya.
Mis: (A << 1) adalah 4.

6
>> (Geser Kanan)
Operator Pergeseran Kanan Biner. Nilai operan kiri dipindahkan ke kanan
dengan jumlah bit yang ditentukan oleh operan kanan.
Mis: (A >> 1) adalah 1.

7
>>> (Pergeseran kanan dengan Nol)
Operator ini sama seperti operator >>, hanya saja bit yang digeser ke kiri selalu
nol.
Mis: (A >>> 1) adalah 1.

Contoh
Coba kode berikut untuk mengimplementasikan operator Bitwise di JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);

document.write("(a | b) => ");

result = (a | b);
document.write(result);
document.write(linebreak);

document.write("(a ^ b) => ");

result = (a ^ b);
document.write(result);
document.write(linebreak);

document.write("(~b) => ");

result = (~b);
document.write(result);
document.write(linebreak);

document.write("(a << b) => ");

result = (a << b);
document.write(result);
document.write(linebreak);

document.write("(a >> b) => ");

result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
Set the variables to different values and different operators and then try...

Operator Penugasan
JavaScript mendukung operator penugasan berikut −

Sr.No Operator & Deskripsi

1
= (Tugas Sederhana)
Menetapkan nilai dari operan sisi kanan ke operan sisi kiri
Mis: C = A + B akan menetapkan nilai A + B ke dalam C

2
+= (Tambah dan Penugasan)
Itu menambahkan operan kanan ke operan kiri dan menetapkan hasilnya ke
operan kiri.
Mis: C += A setara dengan C = C + A

3
−= (Kurangi dan Penugasan)
Ini mengurangi operan kanan dari operan kiri dan menetapkan hasilnya ke
operan kiri.
Contoh: C -= A setara dengan C = C - A

4
*= (Perkalian dan Penugasan)
Ini mengalikan operan kanan dengan operan kiri dan menetapkan hasilnya ke
operan kiri.
Contoh: C *= A setara dengan C = C * A

5
/= (Bagi dan Penugasan)
Itu membagi operan kiri dengan operan kanan dan menetapkan hasilnya ke
operan kiri.
Contoh: C /= A setara dengan C = C / A

6
%= (Modul dan Tugas)
Dibutuhkan modulus menggunakan dua operan dan memberikan hasilnya ke
operan kiri.
Contoh: C %= A setara dengan C = C % A

Catatan - Logika yang sama berlaku untuk operator Bitwise sehingga mereka akan
menjadi seperti <<=, >>=, >>=, &=, |= dan ^=.
Contoh
Coba kode berikut untuk mengimplementasikan operator penugasan di JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";

document.write("Value of a => (a = b) => ");

result = (a = b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a += b) => ");

result = (a += b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a -= b) => ");

result = (a -= b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a *= b) => ");

result = (a *= b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a /= b) => ");

result = (a /= b);
document.write(result);
document.write(linebreak);

document.write("Value of a => (a %= b) => ");

result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Keluaran
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...

Operator Lain-Lain
Kami akan membahas dua operator di sini yang cukup berguna dalam
JavaScript: operator kondisional (? :) dan operator typeof .
Operator Conditional (? :)
Operator kondisional pertama mengevaluasi expression untuk nilai benar atau salah
dan kemudian mengeksekusi salah satu dari dua pernyataan yang diberikan tergantung
pada hasil evaluasi.

Sr.No. Operator dan Keterangan

1
? : (Conditional)
Jika Kondisi benar? Maka nilai X : Jika tidak, nilai Y

Contoh
Coba kode berikut untuk memahami cara kerja Operator Conditional dalam JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";

document.write ("((a > b) ? 100 : 200) => ");

result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);

document.write ("((a < b) ? 100 : 200) => ");

result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Keluaran
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

jenis Operator
Operator typeof adalah operator unary yang ditempatkan sebelum operan tunggalnya,
yang bisa bertipe apa saja. Nilainya adalah string yang menunjukkan tipe data operan.
Operator typeof mengevaluasi ke "angka", "string", atau "boolean" jika operannya
berupa angka, string, atau nilai boolean dan mengembalikan benar atau salah
berdasarkan evaluasi.
Berikut adalah daftar nilai kembalian untuk typeof Operator.

Jenis String Dikembalikan berdasarkan typeof

Nomor "nomor"

String "string"

Boolean "boolean"

Obyek "obyek"

Function "function"

Undefined "undefined"

Null "obyek"

Contoh
Kode berikut menunjukkan cara mengimplementasikan operator typeof .
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = "String";
var linebreak = "<br />";

result = (typeof b == "string" ? "B is String" : "B is Numeric");

document.write("Result => ");
document.write(result);
document.write(linebreak);

result = (typeof a == "string" ? "A is String" : "A is Numeric");

document.write("Result => ");
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>
Keluaran
Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...
JavaScript - if...else statement
Saat menulis sebuah program, mungkin ada situasi ketika Anda perlu mengadopsi satu
dari string jalur yang diberikan. Dalam kasus seperti itu, Anda perlu menggunakan
pernyataan Conditional yang memungkinkan program Anda membuat keputusan yang
benar dan melakukan tindakan yang benar.
JavaScript mendukung pernyataan Conditional yang digunakan untuk melakukan
tindakan yang berbeda berdasarkan kondisi yang berbeda. Di sini kami akan
menjelaskan pernyataan if..else .

Flow Chart if-else

Bagan alur berikut menunjukkan cara kerja pernyataan if-else.
JavaScript mendukung bentuk berikut dari pernyataan if..else −
 if statement
 if...else statement
 if...else if... statement

if statement
Pernyataan if adalah pernyataan kontrol mendasar yang memungkinkan JavaScript
membuat keputusan dan mengeksekusi pernyataan secara kondisional .
Sintaksis
Sintaks untuk pernyataan if dasar adalah sebagai berikut -
if (expression) {
Statement(s) to be executed if expression is true
}
Di sini expression JavaScript dievaluasi. Jika nilai yang dihasilkan benar, pernyataan
yang diberikan dijalankan. Jika expression salah, maka tidak ada pernyataan yang tidak
akan dieksekusi. Sering kali, Anda akan menggunakan operator pembanding saat
membuat keputusan.
Contoh
Coba contoh berikut untuk memahami cara kerja pernyataan if .
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var age = 20;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Qualifies for driving
Set the variable to different value and then try...

if...else statement
Pernyataan 'if...else' adalah bentuk berikutnya dari pernyataan kontrol yang
memungkinkan JavaScript mengeksekusi pernyataan dengan cara yang lebih
terkontrol.
Sintaksis
if (expression) {
Statement(s) to be executed if expression is true
} else {
Statement(s) to be executed if expression is false
}
Di sini expression JavaScript dievaluasi. Jika nilai yang dihasilkan benar, pernyataan
yang diberikan di blok 'jika', dieksekusi. Jika expressionnya salah, maka pernyataan
yang diberikan di blok else akan dieksekusi.
Contoh
Coba kode berikut untuk mempelajari cara mengimplementasikan pernyataan if-else
dalam JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var age = 15;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");
} else {
document.write("<b>Does not qualify for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Does not qualify for driving
Set the variable to different value and then try...

if...else statement if...

if...else statement if... adalah bentuk lanjutan dari if…else yang memungkinkan
JavaScript membuat keputusan yang benar dari beberapa kondisi.
Sintaksis
Sintaks pernyataan if-else-if adalah sebagai berikut −
if (expression 1) {
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is true
}
Tidak ada yang spesial dari kode ini. Itu hanyalah sestring pernyataan if , di mana
setiap if adalah bagian dari klausa else dari pernyataan sebelumnya. Pernyataan
dijalankan berdasarkan kondisi yang benar, jika tidak ada kondisi yang benar, maka
blok else dijalankan.
Contoh
Coba kode berikut untuk mempelajari cara mengimplementasikan pernyataan if-else-if
di JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">

</script>
<p>Set the variable to different value and then try...</p>
</body>
<html>
Keluaran
Maths Book
Set the variable to different value and then try...
JavaScript - Switch Case
Anda dapat menggunakan beberapa if...else...if statement, seperti pada bab
sebelumnya, untuk melakukan cabang multiway. Namun, ini tidak selalu merupakan
solusi terbaik, terutama ketika semua cabang bergantung pada nilai satu variabel.
Dimulai dengan JavaScript 1.2, Anda dapat menggunakan pernyataan switch yang
menangani persis situasi ini, dan melakukannya dengan lebih efisien daripada if...else
statement if yang diulang .

Flow chart
Bagan alur berikut menjelaskan cara kerja pernyataan switch-case.
Sintaksis
Tujuan dari pernyataan switch adalah untuk memberikan expression untuk dievaluasi
dan beberapa pernyataan berbeda untuk dieksekusi berdasarkan nilai
expression. Penerjemah memeriksa setiap kasus terhadap nilai expression sampai
ditemukan kecocokan. Jika tidak ada yang cocok, kondisi default akan digunakan.
switch (expression) {
case condition 1: statement(s)
break;

case condition 2: statement(s)

break;
...

case condition n: statement(s)

break;

default: statement(s)
}
Pernyataan break menunjukkan akhir dari kasus tertentu. Jika dihilangkan, penafsir
akan terus mengeksekusi setiap pernyataan dalam setiap kasus berikut.
Kami akan menjelaskan pernyataan break pada bab Loop Control .
Contoh
Coba contoh berikut untuk mengimplementasikan pernyataan switch-case.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var grade = 'A';
document.write("Entering switch block<br />");
switch (grade) {
case 'A': document.write("Good job<br />");
break;

case 'B': document.write("Pretty good<br />");

break;

case 'C': document.write("Passed<br />");

break;

case 'D': document.write("Not so good<br />");

break;

case 'F': document.write("Failed<br />");

break;

default: document.write("Unknown grade<br />")

}
document.write("Exiting switch block");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...
Pernyataan break memainkan peran utama dalam pernyataan switch-case. Coba kode
berikut yang menggunakan pernyataan switch-case tanpa pernyataan break.
Demo Langsung
<html>
<body>
<script type = "text/javascript">

</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try…

JavaScript - While Loops

Saat menulis program, Anda mungkin menghadapi situasi di mana Anda perlu
melakukan tindakan berulang kali. Dalam situasi seperti itu, Anda perlu menulis
pernyataan loop untuk mengurangi jumlah baris.
JavaScript mendukung semua loop yang diperlukan untuk mengurangi tekanan
pemrograman.

While loop
Loop paling dasar dalam JavaScript adalah while loop yang akan dibahas dalam bab
ini. Tujuan dari while loop adalah untuk mengeksekusi pernyataan atau blok kode
berulang kali selama expression itu benar. Setelah expression menjadi false, loop
berakhir.
Flow chart
Bagan alur while loop terlihat sebagai berikut -
Sintaksis
Sintaks while loop dalam JavaScript adalah sebagai berikut −
while (expression) {
Statement(s) to be executed if expression is true
}
Contoh
Coba contoh berikut untuk mengimplementasikan while loop.
Demo Langsung
<html>
<body>

<script type = "text/javascript">

<!--
var count = 0;
document.write("Starting Loop ");

while (count < 10) {

document.write("Current Count : " + count + "<br />");
count++;
}

document.write("Loop stopped!");
//-->
</script>

<p>Set the variable to different value and then try...</p>

</body>
</html>
Keluaran
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

Do...while lopp
Perulangan do...while mirip dengan perulangan while kecuali bahwa pemeriksaan
kondisi terjadi di akhir perulangan. Ini berarti bahwa perulangan akan selalu dieksekusi
setidaknya sekali, meskipun kondisinya demikian salah .
Flow chart
Diagram alir dari do-while loop adalah sebagai berikut -
Sintaksis
Sintaks untuk do-while loop dalam JavaScript adalah sebagai berikut –
do {
Statement(s) to be executed;
} while (expression);
Catatan − Jangan lewatkan titik koma yang digunakan di akhir do ...while loop.
Contoh
Coba contoh berikut untuk mempelajari cara mengimplementasikan do-while loop di
JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var count = 0;

document.write("Starting Loop" + "<br />");

do {
document.write("Current Count : " + count + "<br />");
count++;
}

while (count < 5);

document.write ("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...
JavaScript - for Loop
Perulangan ' for ' adalah bentuk perulangan yang paling ringkas. Ini mencakup tiga
bagian penting berikut −
 Inisialisasi loop tempat kami menginisialisasi penghitung kami ke nilai
awal. Pernyataan inisialisasi dijalankan sebelum perulangan dimulai.
 Pernyataan pengujian yang akan menguji apakah kondisi yang diberikan benar
atau tidak. Jika kondisinya benar, maka kode yang diberikan di dalam loop akan
dieksekusi, jika tidak, kontrol akan keluar dari loop.
 Pernyataan iterasi di mana Anda dapat menambah atau mengurangi penghitung
Anda.
Anda dapat meletakkan ketiga bagian tersebut dalam satu baris yang dipisahkan oleh
titik koma.

Flow chart
Flow Chart for perulangan dalam JavaScript adalah sebagai berikut −
Sintaksis
Sintaks for loop adalah JavaScript adalah sebagai berikut −
for (initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}
Contoh
Coba contoh berikut untuk mempelajari cara kerja for loop di JavaScript.
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");

for(count = 0; count < 10; count++) {

document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...
JavaScript for…in loop
For..in loop digunakan untuk mengulang melalui properti objek. Karena kita belum
membahas Objek, Anda mungkin merasa tidak nyaman dengan perulangan ini. Tapi
begitu Anda memahami bagaimana objek berperilaku dalam JavaScript, Anda akan
menemukan loop ini sangat berguna.

Sintaksis
Sintaks loop 'for..in' adalah −
for (variablename in object) {
statement or block to execute
}
Dalam setiap iterasi, satu properti dari objek ditugaskan ke namavariabel dan
pengulangan ini berlanjut hingga semua properti objek habis.
Contoh
Coba contoh berikut untuk mengimplementasikan loop 'for-in'. Ini mencetak objek
Navigator browser web .
Demo Langsung
<html>
<body>
<script type = "text/javascript">

</script>
<p>Set the variable to different object and then try...</p>
</body>
</html>
Keluaran
Navigator Object Properties
serviceWorker
webkitPersistentStorage
webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
Set the variable to different object and then try...
JavaScript – loop control
JavaScript menyediakan kontrol penuh untuk menangani loop dan beralih
pernyataan. Mungkin ada situasi ketika Anda harus keluar dari lingkaran tanpa
mencapai dasarnya. Mungkin juga ada situasi ketika Anda ingin melewatkan bagian
dari blok kode Anda dan memulai iterasi berikutnya dari loop.
Untuk menangani semua situasi seperti itu, JavaScript menyediakan
pernyataan break dan continue . Pernyataan ini digunakan untuk segera keluar dari
loop apa pun atau untuk memulai iterasi berikutnya dari loop apa pun.
Pernyataan break
Pernyataan break , yang secara singkat diperkenalkan dengan pernyataan switch ,
digunakan untuk keluar dari loop lebih awal, keluar dari kurung kurawal penutup.
Flow chart
Bagan alur dari pernyataan break akan terlihat sebagai berikut -

Contoh
Contoh berikut mengilustrasikan penggunaan pernyataan break dengan perulangan
while. Perhatikan bagaimana loop pecah lebih awal setelah x mencapai 5 dan
mencapai pernyataan document.write (..) tepat di bawah kurung kurawal penutup −
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");

while (x < 20) {

if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...
Kita telah melihat penggunaan pernyataan break di dalam pernyataan switch .

Pernyataan continue
Pernyataan continue memberi tahu interpreter untuk segera memulai iterasi berikutnya
dari loop dan melewati blok kode yang tersisa. Ketika continue ditemui, aliran program
segera berpindah ke expression cek loop dan jika kondisinya tetap benar, maka iterasi
berikutnya akan dimulai, jika tidak, kontrol akan keluar dari loop.
Contoh
Contoh ini mengilustrasikan penggunaan pernyataan continue dengan perulangan
while. Perhatikan bagaimana pernyataan continue digunakan untuk melewatkan
pencetakan ketika indeks yang disimpan dalam variabel x mencapai 5 −
Demo Langsung
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");

while (x < 10) {

x = x + 1;

if (x == 5) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
Keluaran
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

Menggunakan Label untuk Mengontrol Aliran

Mulai dari JavaScript 1.2, label dapat digunakan dengan break dan continue
mengontrol aliran dengan lebih tepat. Label hanyalah pengidentifikasi diikuti oleh titik
dua (:) yang diterapkan pada pernyataan atau blok kode . Kita akan melihat dua contoh
berbeda untuk memahami cara menggunakan label dengan break dan continue.
Catatan - Jeda baris tidak diperbolehkan antara pernyataan 'continue' atau'break' dan
nama labelnya. Juga, tidak boleh ada pernyataan lain di antara nama label dan loop
terkait.
Coba dua contoh berikut untuk pemahaman Label yang lebih baik.
Contoh 1
Contoh berikut menunjukkan cara mengimplementasikan Label dengan pernyataan
break.
Demo Langsung
<html>
<body>
<script type = "text/javascript">

</script>
</body>
</html>
Keluaran
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
Contoh 2
Demo Langsung
<html>
<body>

<script type = "text/javascript">

<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name

for (var i = 0; i < 3; i++) {

document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++) {
if (j == 3) {
continue outerloop;
}
document.write("Innerloop: " + j + "<br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

</body>
</html>
Keluaran
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!
JavaScript - Function
Function adalah sekelompok kode yang dapat digunakan kembali yang dapat dipanggil
di mana saja dalam program Anda. Ini menghilangkan kebutuhan untuk menulis kode
yang sama berulang kali. Ini membantu programmer dalam menulis kode
modular. Function memungkinkan programmer untuk membagi program besar menjadi
beberapa function kecil dan dapat dikelola.
Seperti bahasa pemrograman lanjutan lainnya, JavaScript juga mendukung semua fitur
yang diperlukan untuk menulis kode modular menggunakan function. Anda pasti pernah
melihat function seperti alert() dan write() di bab-bab sebelumnya. Kami menggunakan
function-function ini berulang kali, tetapi hanya sekali ditulis dalam JavaScript inti.
JavaScript memungkinkan kita untuk menulis function kita sendiri juga. Bagian ini
menjelaskan cara menulis function Anda sendiri di JavaScript.

Definisi Function
Sebelum kita menggunakan suatu function, kita perlu mendefinisikannya. Cara paling
umum untuk mendefinisikan function dalam JavaScript adalah dengan
menggunakan function , diikuti dengan nama function yang unik, daftar parameter
(yang mungkin kosong), dan blok pernyataan yang diapit oleh kurung kurawal.
Sintaksis
Sintaks dasar ditampilkan di sini.
<script type = "text/javascript">

</script>
Contoh
Coba contoh berikut. Ini mendefinisikan function yang disebut sayHello yang tidak
memerlukan parameter −
<script type = "text/javascript">

</script>

Memanggil Function
Untuk menjalankan function di suatu tempat nanti di skrip, Anda hanya perlu menulis
nama function tersebut seperti yang ditunjukkan pada kode berikut.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!");
}
</script>

</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>
Keluaran

Parameter Function
Sampai sekarang, kita telah melihat function tanpa parameter. Tetapi ada fasilitas untuk
melewati parameter yang berbeda saat memanggil suatu function. Parameter yang
diteruskan ini dapat ditangkap di dalam function dan manipulasi apa pun dapat
dilakukan pada parameter tersebut. Suatu function dapat mengambil beberapa
parameter yang dipisahkan dengan koma.
Contoh
Coba contoh berikut. Kami telah memodifikasi function sayHello kami di sini. Sekarang
dibutuhkan dua parameter.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years old.");
}
</script>
</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
Keluaran

Pernyataan return
Function JavaScript dapat memiliki pernyataan return opsional . Ini diperlukan jika
Anda ingin mengembalikan nilai dari suatu function. Pernyataan ini harus menjadi
pernyataan terakhir dalam suatu function.
Misalnya, Anda dapat meneruskan dua angka dalam suatu function dan kemudian
Anda dapat mengharapkan function tersebut mengembalikan perkaliannya dalam
program pemanggilan Anda.
Contoh
Coba contoh berikut. Ini mendefinisikan function yang mengambil dua parameter dan
menggabungkannya sebelum mengembalikan resultan dalam program pemanggilan.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Zara', 'Ali');
document.write (result );
}
</script>
</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
Keluaran
Ada banyak hal yang harus dipelajari tentang function JavaScript, namun kami telah
membahas konsep terpenting dalam tutorial ini.

JavaScript - Events
Apa itu Events?
Interaksi JavaScript dengan HTML ditangani melalui peristiwa yang terjadi saat
pengguna atau browser memanipulasi halaman.
Saat halaman dimuat, itu disebut Events. Saat pengguna mengklik tombol, klik itu juga
merupakan peristiwa. Contoh lain termasuk Events seperti menekan tombol apa saja,
menutup window, mengubah ukuran window, dll.
Pengembang dapat menggunakan peristiwa ini untuk mengeksekusi respons kode
JavaScript, yang menyebabkan tombol menutup window, pesan ditampilkan kepada
pengguna, data divalidasi, dan hampir semua jenis respons lain yang bisa dibayangkan.
Events adalah bagian dari Model Objek Document (DOM) Level 3 dan setiap elemen
HTML berisi sestring Events yang dapat memicu Kode JavaScript.
Silakan ikuti tutorial kecil ini untuk pemahaman yang lebih baik tentang Referensi
Events HTML . Di sini kita akan melihat beberapa contoh untuk memahami hubungan
antara Event dan JavaScript −

onclick Jenis Events

Ini adalah jenis peristiwa yang paling sering digunakan yang terjadi saat pengguna
mengeklik tombol kiri mousenya. Anda dapat menempatkan validasi, alert, dll., terhadap
jenis Events ini.
Contoh
Coba contoh berikut.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
Keluaran

Jenis Events onsubmit

onsubmit adalah peristiwa yang terjadi saat Anda mencoba mengirimkan form. Anda
dapat menempatkan validasi form Anda terhadap jenis Events ini.
Contoh
Contoh berikut menunjukkan cara menggunakan onsubmit. Di sini kita memanggil
function validate() sebelum mengirimkan data form ke server web. Jika
function validasi () mengembalikan true, form akan dikirimkan, jika tidak maka tidak
akan mengirimkan data.
Coba contoh berikut.
<html>
<head>
<script type = "text/javascript">

</script>
</head>

onmouseover dan onmouseout

Kedua jenis Events ini akan membantu Anda membuat efek yang bagus dengan
gambar atau bahkan dengan teks juga. Event onmouseover terpicu saat Anda
mengarahkan mouse ke elemen apa pun dan onmouseout terpicu saat Anda
menggerakkan mouse keluar dari elemen tersebut. Coba contoh berikut.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
Keluaran

Events Standar HTML 5

Events HTML 5 standar tercantum di sini untuk referensi Anda. Di sini skrip
menunjukkan function Javascript yang akan dieksekusi terhadap peristiwa itu.

Atribut Nilai Keterangan

Offline script Dipicu saat document offline

onabort script Pemicu pada Events batalkan

onafterprint script Pemicu setelah document dicetak

onbeforeonload script Pemicu sebelum document dimuat

onbeforeprint script Pemicu sebelum document dicetak

onblur script Dipicu saat window kehilangan fokus

Memicu saat media dapat mulai diputar, tetapi mungkin

oncanplay script
harus berhenti untuk buffering

Memicu saat media dapat diputar hingga selesai, tanpa

oncanplaythrough script
berhenti untuk buffering

onchange script Memicu saat elemen berubah

onclick script Pemicu pada klik mouse

oncontextmenu script Dipicu saat menu konteks dipicu

ondblclick script Pemicu pada klik dua kali mouse

ondrag script Memicu saat elemen diseret

ondragend script Pemicu di akhir operasi seret

ondragenter script Dipicu saat elemen telah diseret ke target lepas yang valid

ondragleave script Dipicu saat elemen diseret di atas target lepas yang valid

ondragover script Pemicu di awal operasi di drag

ondragstart script Pemicu di awal operasi di drag

ondrop script Memicu saat elemen yang diseret dijatuhkan

ondurationchange script Dipicu ketika panjang media diubah

Dipicu saat elemen sumber daya media tiba-tiba menjadi

onemptied script
kosong.

onended script Dipicu ketika media telah mencapai akhir

onerror script Dipicu saat terjadi kesalahan

onfocus script Dipicu saat window mendapatkan fokus

onformchange script Memicu saat form berubah

onforminput script Dipicu saat form mendapat input pengguna

onhaschange script Dipicu ketika document telah berubah

oninput script Dipicu saat elemen mendapat input pengguna

oninvalid script Memicu ketika elemen tidak valid

onkeydown script Memicu saat tombol ditekan

onkeypress script Memicu saat tombol ditekan dan dilepaskan

onkeyup script Memicu saat kunci dilepaskan

onload script Dipicu saat document dimuat

onloadeddata script Dipicu saat data media dimuat

Dipicu saat durasi dan data media lainnya dari elemen

onloadedmetadata script
media dimuat

onloadstart script Dipicu saat browser mulai memuat data media

onmessage script Dipicu saat pesan dipicu

onmouseddown script Dipicu saat tombol mouse ditekan

onmousemove script Dipicu saat pointer mouse bergerak

onmouseout script Dipicu saat pointer mouse bergerak keluar dari elemen
onmouseover script Dipicu saat pointer mouse bergerak di atas elemen

onmouseup script Dipicu saat tombol mouse dilepaskan

onmousewheel script Memicu saat roda mouse sedang diputar

onoffline script Dipicu saat document offline

onoine script Dipicu saat document online

online script Dipicu saat document online

onpagehide script Dipicu saat window disembunyikan

onpageshow script Dipicu saat window menjadi terlihat

onpause script Dipicu saat data media dijeda

onplay script Memicu saat data media akan mulai diputar

onplaying script Dipicu saat data media mulai diputar

onpopstate script Dipicu saat riwayat window berubah

onprogress script Dipicu saat browser mengambil data media

onratechange script Dipicu saat laju pemutaran data media telah berubah

onreadystatechange script Dipicu saat status siap berubah

onredo script Memicu saat document melakukan pengulangan

onresize script Dipicu saat window diubah ukurannya

onscroll script Dipicu saat scrollbar elemen sedang di-scroll

Dipicu saat atribut pencarian elemen media tidak lagi

onseeked script
benar, dan pencarian telah berakhir

Dipicu saat atribut pencarian elemen media benar, dan

onseeking script
pencarian telah dimulai

onselect script Dipicu saat elemen dipilih

onstalled script Dipicu saat ada kesalahan dalam mengambil data media

onstorage script Dipicu saat document dimuat

onsubmit script Memicu saat form dikirim

Dipicu saat browser sedang mengambil data media, tetapi

onsuspend script
dihentikan sebelum seluruh file media diambil

ontimeupdate script Memicu saat media mengubah posisi pemutarannya

onundo script Memicu saat document melakukan undo

onunload script Dipicu saat pengguna meninggalkan document

Dipicu saat media mengubah volume, juga saat volume

onvolumechange script
disetel ke "bisu"

Dipicu saat media berhenti diputar, namun diperkirakan

onwaiting script
akan dilanjutkan

JavaScript dan Cookie

Apa itu Cookie?
Peramban Web dan Server menggunakan protokol HTTP untuk berkomunikasi dan
HTTP adalah protokol tanpa kewarganegaraan. Tetapi untuk situs web komersial,
diperlukan untuk memelihara informasi sesi di antara halaman yang berbeda. Misalnya,
satu pendaftaran pengguna berakhir setelah menyelesaikan banyak halaman. Tetapi
bagaimana mempertahankan informasi sesi pengguna di semua halaman web.
Dalam banyak situasi, menggunakan cookie adalah method yang paling efisien untuk
mengingat dan melacak preferensi, pembelian, komisi, dan informasi lain yang
diperlukan untuk pengalaman pengunjung atau statistik situs yang lebih baik.

Bagaimana itu bekerja ?

Server Anda mengirimkan beberapa data ke browser pengunjung dalam bentuk
cookie. Browser dapat menerima cookie. Jika ya, itu disimpan sebagai rekaman teks
biasa di hard drive pengunjung. Sekarang, saat pengunjung tiba di halaman lain di situs
Anda, browser mengirimkan cookie yang sama ke server untuk diambil. Setelah
diambil, server Anda mengetahui/mengingat apa yang disimpan sebelumnya.
Cookie adalah catatan data teks biasa dari 5 bidang panjang variabel −
 Expires – Tanggal cookie akan kedaluwarsa. Jika ini kosong, cookie akan
kedaluwarsa saat pengunjung keluar dari browser.
 Domain − Nama domain situs Anda.
 Path − Path ke direktori atau halaman web yang mengatur cookie. Ini mungkin
kosong jika Anda ingin mengambil cookie dari direktori atau halaman mana pun.
 Secure – Jika bidang ini berisi kata "secure", maka cookie hanya dapat diambil
dengan server yang aman. Jika bidang ini kosong, tidak ada batasan seperti itu.
 Name=Value − Cookie diatur dan diambil dalam bentuk key-value pair
Cookie pada awalnya dirancang untuk pemrograman CGI. Data yang terkandung dalam
cookie secara otomatis dikirimkan antara browser web dan server web, sehingga skrip
CGI di server dapat membaca dan menulis nilai cookie yang disimpan di klien.
JavaScript juga dapat memanipulasi cookie menggunakan properti cookie dari
objek Document . JavaScript dapat membaca, membuat, memodifikasi, dan
menghapus cookie yang berlaku untuk halaman web saat ini.

Menyimpan Cookie
Cara termudah untuk membuat cookie adalah dengan menetapkan nilai string ke objek
document.cookie, yang terlihat seperti ini.
document.cookie = "key1 = value1;key2 = value2;expires = date";
Di sini atribut expires bersifat opsional. Jika Anda memberikan atribut ini dengan
tanggal atau waktu yang valid, cookie akan kedaluwarsa pada tanggal atau waktu
tertentu dan setelah itu, nilai cookie tidak akan dapat diakses.
Catatan − Nilai cookie mungkin tidak termasuk titik koma, koma, atau spasi putih. Untuk
alasan ini, Anda mungkin ingin menggunakan function JavaScript escape() untuk
menyandikan nilai sebelum menyimpannya di cookie. Jika Anda melakukan ini, Anda
juga harus menggunakan function unescape() yang sesuai saat membaca nilai cookie.
Contoh
Coba yang berikut ini. Ini menetapkan nama pelanggan dalam cookie input.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
Keluaran
Sekarang mesin Anda memiliki cookie bernama name . Anda dapat menyetel beberapa
cookie menggunakan beberapa kunci = pasangan nilai yang dipisahkan dengan koma.

Membaca Cookie
Membaca cookie semudah menulis cookie, karena nilai objek document.cookie adalah
cookie. Jadi Anda dapat menggunakan string ini kapan pun Anda ingin mengakses
cookie. String document.cookie akan menyimpan daftar pasangan nama=nilai yang
dipisahkan oleh titik koma, di mana name adalah nama cookie dan value adalah nilai
stringnya.
Anda dapat menggunakan function split() string untuk memecah string menjadi kunci
dan nilai sebagai berikut −
Contoh
Coba contoh berikut untuk mendapatkan semua cookie.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );

// Get all the cookies pairs in an array

cookiearray = allcookies.split(';');

// Now take key value pair out of this array

for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>

<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>
Catatan - Di sini length adalah method kelas Array yang mengembalikan panjang
array. Kami akan membahas Array di bab terpisah. Pada saat itu, cobalah
mencernanya.
Catatan − Mungkin ada beberapa cookie lain yang sudah disetel di mesin Anda. Kode
di atas akan menampilkan semua cookie yang disetel di mesin Anda.

Mengatur Tanggal Kedaluwarsa Cookie

Anda dapat memperpanjang umur cookie di luar sesi browser saat ini dengan menyetel
tanggal kedaluwarsa dan menyimpan tanggal kedaluwarsa di dalam cookie. Ini dapat
dilakukan dengan menyetel atribut 'kedaluwarsa' ke tanggal dan waktu.
Contoh
Coba contoh berikut. Ini menggambarkan cara memperpanjang tanggal kedaluwarsa
cookie selama 1 Bulan.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Keluaran

Menghapus Cookie
Terkadang Anda ingin menghapus cookie sehingga upaya selanjutnya untuk membaca
cookie tidak menghasilkan apa-apa. Untuk melakukan ini, Anda hanya perlu menyetel
tanggal kedaluwarsa ke masa lalu.
Contoh
Coba contoh berikut. Ini mengilustrasikan cara menghapus cookie dengan menyetel
tanggal kedaluwarsa menjadi satu bulan di belakang tanggal saat ini.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"

document.cookie = "name=" + cookievalue;

document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>

<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Keluaran
JavaScript - Pengalihan Halaman
Apa itu Pengalihan Halaman?
Anda mungkin mengalami situasi di mana Anda mengklik URL untuk mencapai
halaman X tetapi secara internal Anda diarahkan ke halaman lain Y. Ini terjadi
karena pengalihan halaman . Konsep ini berbeda dengan JavaScript Page Refresh .
Mungkin ada berbagai alasan mengapa Anda ingin mengalihkan pengguna dari
halaman asli. Kami mencantumkan beberapa alasan -
 Anda tidak menyukai nama domain Anda dan Anda pindah ke yang baru. Dalam
skenario seperti itu, Anda mungkin ingin mengarahkan semua pengunjung ke
situs baru. Di sini Anda dapat mempertahankan domain lama Anda tetapi
menempatkan satu halaman dengan pengalihan halaman sehingga semua
pengunjung domain lama Anda dapat datang ke domain baru Anda.
 Anda telah membuat berbagai halaman berdasarkan versi browser atau
namanya atau mungkin berdasarkan negara yang berbeda, lalu alih-alih
menggunakan pengalihan halaman sisi server, Anda dapat menggunakan
pengalihan halaman sisi klien untuk mendaratkan pengguna Anda di halaman
yang sesuai.
 Mesin Pencari mungkin telah mengindeks halaman Anda. Namun saat pindah ke
domain lain, Anda tidak ingin kehilangan pengunjung yang datang melalui mesin
pencari. Jadi, Anda dapat menggunakan pengalihan halaman sisi klien. Namun
perlu diingat hal ini tidak boleh dilakukan untuk mengelabui mesin pencari,
karena bisa menyebabkan situs Anda diblokir.

Bagaimana Page Re-direction Bekerja?

Implementasi Page-Redirection adalah sebagai berikut.
Contoh 1
Cukup mudah untuk melakukan pengalihan halaman menggunakan JavaScript di sisi
klien. Untuk mengarahkan pengunjung situs Anda ke halaman baru, Anda hanya perlu
menambahkan baris di bagian kepala Anda sebagai berikut.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following button, you will be redirected to home page.</p>

</body>
</html>
Keluaran
Contoh 2
Anda dapat menampilkan pesan yang sesuai kepada pengunjung situs Anda sebelum
mengarahkan mereka ke halaman baru. Ini akan membutuhkan sedikit waktu tunda
untuk memuat halaman baru. Contoh berikut menunjukkan bagaimana menerapkan hal
yang sama. Di sini setTimeout() adalah function JavaScript bawaan yang dapat
digunakan untuk menjalankan function lain setelah interval waktu tertentu.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
</body>
</html>
Keluaran
You will be redirected to tutorialspoint.com main page in 10 seconds!
Contoh 3
Contoh berikut menunjukkan cara mengarahkan pengunjung situs Anda ke halaman
lain berdasarkan browser mereka.
<html>
<head>
<script type = "text/javascript">

</script>
</head>

JavaScript - Kotak Dialog

JavaScript mendukung tiga jenis kotak dialog penting. Kotak-kotak dialog ini dapat
digunakan untuk mengangkat dan memperingatkan, atau untuk mendapatkan
konfirmasi atas masukan apa pun atau untuk mendapatkan semacam masukan dari
pengguna. Disini kita akan membahas masing-masing kotak dialog satu per satu.

Kotak Dialog Alert

Kotak dialog alert sebagian besar digunakan untuk memberikan pesan alert kepada
pengguna. Misalnya, jika satu bidang input perlu memasukkan beberapa teks tetapi
pengguna tidak memberikan input apa pun, maka sebagai bagian dari validasi, Anda
dapat menggunakan kotak alert untuk memberikan pesan alert.
Meskipun demikian, kotak alert masih dapat digunakan untuk pesan yang lebih
bersahabat. Kotak alert hanya memberikan satu tombol "OK" untuk memilih dan
melanjutkan.
Contoh
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>
Keluaran

Kotak Dialog Konfirmasi

Kotak dialog konfirmasi sebagian besar digunakan untuk mengambil persetujuan
pengguna pada opsi apa pun. Ini menampilkan kotak dialog dengan dua
tombol: OK dan Cancel .
Jika pengguna mengklik tombol OK, method window confirm() akan mengembalikan
nilai true. Jika pengguna mengklik tombol Cancel, maka confirm() mengembalikan
false. Anda dapat menggunakan kotak dialog konfirmasi sebagai berikut.
Contoh
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
Keluaran

Kotak Dialog Prompt

Kotak dialog prompt sangat berguna ketika Anda ingin memunculkan kotak teks untuk
mendapatkan input pengguna. Dengan demikian, ini memungkinkan Anda untuk
berinteraksi dengan pengguna. Pengguna perlu mengisi kolom dan kemudian klik OK.
Kotak dialog ini ditampilkan menggunakan method yang disebut prompt() yang
mengambil dua parameter: (i) label yang ingin Anda tampilkan di kotak teks dan (ii)
string default untuk ditampilkan di kotak teks.
Kotak dialog ini memiliki dua tombol: OK dan Cancel . Jika pengguna mengklik tombol
OK, method window prompt () akan mengembalikan nilai yang dimasukkan dari kotak
teks. Jika pengguna mengklik tombol Batal, method window prompt()
mengembalikan null .
Contoh
Contoh berikut menunjukkan cara menggunakan kotak dialog prompt −
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>
Keluaran
JavaScript - Kata Kunci void
void adalah kata kunci penting dalam JavaScript yang dapat digunakan sebagai
operator unary yang muncul sebelum operan tunggalnya, yang dapat berupa jenis apa
pun. Operator ini menentukan expression untuk dievaluasi tanpa mengembalikan nilai.
Sintaksis
Sintaks void dapat berupa salah satu dari dua − berikut
<head>
<script type = "text/javascript">

</script>
</head>
Contoh 1
Penggunaan yang paling umum dari operator ini adalah dalam javascript sisi
klien: URL, yang memungkinkan Anda mengevaluasi expression untuk efek
sampingnya tanpa browser menampilkan nilai expression yang dievaluasi.
Di sini expression alert ('warning!!!') dievaluasi tetapi tidak dimuat kembali ke
document saat ini −
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following, This won't react at all...</p>
<a href = "javascript:void(alert('Warning!!!'))">Click me!</a>
</body>
</html>
Keluaran
Contoh 2
Lihatlah contoh berikut. Tautan berikut tidak melakukan apa-apa karena expression "0"
tidak berpengaruh pada JavaScript. Di sini expression "0" dievaluasi, tetapi tidak dimuat
kembali ke dalam document saat ini.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following, This won't react at all...</p>
<a href = "javascript:void(0)">Click me!</a>
</body>
</html>
Keluaran
Contoh 3
Kegunaan lain dari void adalah dengan sengaja menghasilkan nilai yang tidak
terdefinisi sebagai berikut.
Demo Langsung
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var a,b,c;

a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>

<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>
Keluaran
JavaScript - Pencetakan Halaman
Sering kali Anda ingin meletakkan tombol di halaman web Anda untuk mencetak konten
halaman web tersebut melalui printer yang sebenarnya. JavaScript membantu Anda
menerapkan function ini menggunakan function print dari objek window .
Function cetak JavaScript window.print() mencetak halaman web saat ini saat
dijalankan. Anda dapat memanggil function ini secara langsung menggunakan
event onclick seperti yang ditunjukkan pada contoh berikut.
Contoh
Coba contoh berikut.
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<form>
<input type = "button" value = "Print" onclick = "window.print()" />
</form>
</body>
<html>
Keluaran
Meskipun berfunction untuk mendapatkan cetakan, ini bukan cara yang
disarankan. Halaman ramah printer sebenarnya hanyalah halaman dengan teks, tanpa
gambar, grafik, atau iklan.
Anda dapat membuat printer ramah halaman dengan cara berikut –
 Buat salinan halaman dan tinggalkan teks dan gambar yang tidak diinginkan, lalu
tautkan ke halaman ramah printer dari aslinya. Cek Contoh .
 Jika Anda tidak ingin menyimpan salinan halaman tambahan, Anda dapat
menandai teks yang dapat dicetak menggunakan komentar yang sesuai seperti
.....  dan
kemudian Anda dapat menggunakan PERL atau skrip lain di latar belakang untuk
membersihkan teks dan tampilan yang dapat dicetak untuk pencetakan
akhir. Kami di Tutorialspoint menggunakan method ini untuk memberikan fasilitas
cetak kepada pengunjung situs kami.

Bagaimana Cara Mencetak Halaman?

Jika Anda tidak menemukan fasilitas di atas pada halaman web, maka Anda dapat
menggunakan toolbar standar browser untuk mencetak halaman web tersebut. Ikuti
tautan sebagai berikut.
File → Print → Click OK button.
JavaScript – Objects Overview
JavaScript adalah bahasa Pemrograman Berorientasi Objek (OOP). Bahasa
pemrograman dapat disebut berorientasi objek jika menyediakan empat kemampuan
dasar untuk pengembang −
 Enkapsulasi - kemampuan untuk menyimpan informasi terkait, apakah data atau
method, bersama-sama dalam sebuah objek.
 Agregasi - kemampuan untuk menyimpan satu objek di dalam objek lain.
 Inheritance - kemampuan kelas untuk bergantung pada kelas lain (atau
sejumlah kelas) untuk beberapa properti dan methodnya.
 Polimorfisme − kemampuan untuk menulis satu function atau method yang
bekerja dalam berbagai cara yang berbeda.
Objek terdiri dari atribut. Jika sebuah atribut berisi function, itu dianggap sebagai
method objek, jika tidak, atribut dianggap sebagai properti.

Properti Objek
Properti objek dapat berupa salah satu dari tiga tipe data primitif, atau salah satu dari
tipe data abstrak, seperti objek lain. Properti objek biasanya berupa variabel yang
digunakan secara internal dalam method objek, tetapi juga dapat berupa variabel yang
terlihat secara global yang digunakan di seluruh halaman.
Sintaks untuk menambahkan properti ke objek adalah −
objectName.objectProperty = propertyValue;
Misalnya - Kode berikut mendapatkan judul document menggunakan
properti "judul" dari objek document .
var str = document.title;

Method Objek
Method adalah function yang membiarkan objek melakukan sesuatu atau membiarkan
sesuatu dilakukan padanya. Ada perbedaan kecil antara function dan method – di
function adalah unit pernyataan yang berdiri sendiri dan method dilampirkan ke objek
dan dapat direferensikan dengan kata kunci this .
Method berguna untuk semuanya, mulai dari menampilkan konten objek ke layar
hingga melakukan operasi matematika yang rumit pada sekelompok properti dan
parameter lokal.
Misalnya - Berikut ini adalah contoh sederhana untuk menunjukkan bagaimana
menggunakan method write() objek document untuk menulis konten apa pun pada
document.
document.write("This is test");
Objek yang Ditentukan Pengguna
Semua objek yang ditentukan pengguna dan objek bawaan adalah turunan dari objek
yang disebut Object .
New operator
New operator digunakan untuk membuat instance dari suatu objek. Untuk membuat
objek, new operator diikuti dengan method constructor.
Dalam contoh berikut, method constructornya adalah Object(), Array(), dan
Date(). Constructor ini adalah function JavaScript bawaan.
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");
Constructor Objek()
Constructor adalah function yang membuat dan menginisialisasi objek. JavaScript
menyediakan function constructor khusus yang disebut Object() untuk membangun
objek. Nilai kembalian dari constructor Object() ditugaskan ke sebuah variabel.
Variabel berisi referensi ke objek baru. Properti yang diberikan ke objek bukanlah
variabel dan tidak didefinisikan dengan kata kunci var .
Contoh 1
Coba contoh berikut; itu menunjukkan cara membuat Objek.
Demo Langsung
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohtashim";
</script>
</head>

<body>
<script type = "text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>
Keluaran
Book name is : Perl
Book author is : Mohtashim
Contoh 2
Contoh ini menunjukkan cara membuat objek dengan Function Buatan Pengguna. Di
sini kata kunci this digunakan untuk merujuk ke objek yang telah diteruskan ke suatu
function.
Demo Langsung
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
function book(title, author) {
this.title = title;
this.author = author;
}
</script>
</head>

<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>
Keluaran
Book title is : Perl
Book author is : Mohtashim

Mendefinisikan Method untuk Objek

Contoh sebelumnya menunjukkan bagaimana constructor membuat objek dan
menetapkan properti. Tapi kita perlu melengkapi definisi objek dengan menugaskan
method untuk itu.
Contoh
Coba contoh berikut; itu menunjukkan bagaimana menambahkan function bersama
dengan objek.
Demo Langsung
<html>

<head>
<title>User-defined objects</title>
<script type = "text/javascript">
// Define a function which will work as a method
function addPrice(amount) {
this.price = amount;
}

function book(title, author) {

this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>

<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);

document.write("Book title is : " + myBook.title + "<br>");

document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Keluaran
Book title is : Perl
Book author is : Mohtashim
Book price is : 100

Kata kunci 'with'

Kata kunci 'with' digunakan sebagai semacam singkatan untuk mereferensikan properti
atau method objek.
Objek yang ditentukan sebagai argumen dengan menjadi objek default selama durasi
blok berikutnya. Properti dan method untuk objek dapat digunakan tanpa memberi
nama objek.
Sintaksis
Sintaks untuk dengan objek adalah sebagai berikut -
with (object) {
properties used without the object name and dot
}
Contoh
Coba contoh berikut.
Demo Langsung
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
// Define a function which will work as a method
function addPrice(amount) {
with(this) {
price = amount;
}
}
function book(title, author) {
this.title = title;
this.author = author;
this.price = 0;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>

<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);

document.write("Book title is : " + myBook.title + "<br>");

Objek Asli JavaScript

JavaScript memiliki beberapa objek bawaan atau asli. Objek-objek ini dapat diakses di
mana saja di program Anda dan akan bekerja dengan cara yang sama di browser apa
pun yang berjalan di sistem operasi apa pun.
Berikut adalah daftar semua Objek Asli JavaScript yang penting −
 Objek Nomor JavaScript
 Objek JavaScript Boolean
 Objek String JavaScript
 Objek Array JavaScript
 Objek Tanggal JavaScript
 Objek Matematika JavaScript
 Objek JavaScript RegExp
JavaScript - Objek Bilangan
Objek Number mewakili tanggal numerik, baik bilangan bulat atau angka floating-
point. Secara umum, Anda tidak perlu khawatir tentang objek Number karena browser
secara otomatis mengonversi literal angka menjadi turunan dari kelas angka.
Sintaksis
Sintaks untuk membuat objek angka adalah sebagai berikut −
var val = new Number(number);
Di tempat angka, jika Anda memberikan argumen bukan angka, maka argumen
tersebut tidak dapat diubah menjadi angka, ia mengembalikan NaN (Bukan Angka).

Properti Nomor
Berikut adalah daftar masing-masing properti dan penjelasannya.

Sr.No Deskripsi properti

1 MAX_VALUE
Nilai terbesar yang mungkin dimiliki sebuah angka dalam JavaScript
1.7976931348623157E+308

2 MIN_VALUE
Nilai terkecil yang mungkin dimiliki sebuah angka dalam JavaScript adalah 5E-
324

3 NaN
Sama dengan nilai yang bukan angka.

4 NEGATIVE_INFINITY
Nilai yang kurang dari MIN_VALUE.

5 POSITIVE INFINITY
Nilai yang lebih besar dari MAX_VALUE
6 prototype
Properti statis dari objek Number. Gunakan properti prototype untuk
menetapkan properti dan method baru ke objek Number dalam document saat
ini

7 constructor
Mengembalikan function yang membuat instance objek ini. Secara default ini
adalah objek Number.

Pada bagian berikut, kita akan mengambil beberapa contoh untuk mendemonstrasikan
sifat-sifat Bilangan.

Method Angka
Objek Number hanya berisi method default yang merupakan bagian dari definisi setiap
objek.

Sr.No Method & Deskripsi

1 toExponential()
Memaksa angka untuk ditampilkan dalam notasi eksponensial, bahkan jika
angka tersebut berada dalam rentang di mana JavaScript biasanya
menggunakan notasi standar.

2 toFixed()
Memformat angka dengan jumlah digit tertentu di sebelah kanan desimal.

3 toLocaleString()
Mengembalikan versi nilai string dari nomor saat ini dalam format yang dapat
bervariasi menurut setelan lokal browser.

4 toPrecision()
Menentukan jumlah digit total (termasuk digit di kiri dan kanan desimal) untuk
menampilkan angka.

5 toString()
Mengembalikan representasi string dari nilai angka.
6 valueOf()
Mengembalikan nilai angka.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk menjelaskan method
Bilangan.

JavaScript - Objek Boolean

Objek Boolean mewakili dua nilai, "benar" atau "salah". Jika parameter nilai dihilangkan
atau 0, -0, null, false, NaN, undefined, atau string kosong (""), objek tersebut memiliki
nilai awal false.
Sintaksis
Gunakan sintaks berikut untuk membuat objek boolean .
var val = new Boolean(value);

Properti Boolean
Berikut adalah daftar properti objek Boolean −

Sr.No Deskripsi properti

1 constructor
Mengembalikan referensi ke function Boolean yang membuat objek.

2 prototype
Properti prototype memungkinkan Anda untuk menambahkan properti dan
method ke objek.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mengilustrasikan
properti objek Boolean.

Method Boolean
Berikut adalah daftar method objek Boolean dan penjelasannya.

Sr.No Method & Deskripsi

1 toSource()
Mengembalikan string yang berisi sumber objek Boolean; Anda dapat
menggunakan string ini untuk membuat objek yang setara.

2 toString()
Mengembalikan string "true" atau "false" bergantung pada nilai objek.

3 valueOf()
Mengembalikan nilai primitif dari objek Boolean.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan method Boolean.

JavaScript - Objek Strings

Objek String memungkinkan Anda bekerja dengan sestring karakter; itu membungkus
tipe data primitif string Javascript dengan sejumlah method pembantu.
Karena JavaScript secara otomatis mengonversi antara string primitif dan objek String,
Anda dapat memanggil salah satu method bantuan dari objek String pada string primitif.
Sintaksis
Gunakan sintaks berikut untuk membuat objek String −
var val = new String(string);
Parameter String adalah sestring karakter yang telah dikodekan dengan benar.

Properti Tali
Berikut adalah daftar properti objek String dan deskripsinya.

Sr.No Deskripsi properti

1 constructor
Mengembalikan referensi ke function String yang membuat objek.

2 length
Mengembalikan panjang string.

3 prototype
Properti prototype memungkinkan Anda untuk menambahkan properti dan
method ke objek.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan properti String.

Method Untai
Berikut adalah daftar method yang tersedia di objek String beserta deskripsinya.

Sr.No Method & Deskripsi

1 charAt()
Mengembalikan karakter pada indeks yang ditentukan.

2 charCodeAt()
Mengembalikan angka yang menunjukkan nilai Unicode karakter pada indeks
yang diberikan.

3 concat()
Menggabungkan teks dari dua string dan mengembalikan string baru.

4 IndexOf()
Mengembalikan indeks dalam pemanggilan objek String dari kejadian pertama
dari nilai yang ditentukan, atau -1 jika tidak ditemukan.

5 lastIndexOf()
Mengembalikan indeks dalam pemanggilan objek String dari kemunculan
terakhir dari nilai yang ditentukan, atau -1 jika tidak ditemukan.

6 localeCompare()
Mengembalikan angka yang menunjukkan apakah string referensi datang
sebelum atau sesudah atau sama dengan string yang diberikan dalam urutan.

7 match()
Digunakan untuk mencocokkan expression reguler dengan string.

8 replace()
Digunakan untuk menemukan kecocokan antara expression reguler dan string,
dan untuk mengganti substring yang cocok dengan substring baru.

9 search()
Mengeksekusi pencarian kecocokan antara expression reguler dan string yang
ditentukan.

10 slice()
Mengekstrak bagian string dan mengembalikan string baru.

11 split()
Membagi objek String menjadi array string dengan memisahkan string menjadi
substring.

12 substr()
Mengembalikan karakter dalam string yang dimulai pada lokasi yang
ditentukan hingga jumlah karakter yang ditentukan.

13 substring()
Mengembalikan karakter dalam string antara dua indeks ke dalam string.

14 toLocaleLowerCase()
Karakter dalam string dikonversi menjadi huruf kecil dengan tetap menghormati
lokal saat ini.

15 toLocaleUpperCase()
Karakter dalam string dikonversi menjadi huruf besar dengan tetap
menghormati lokal saat ini.

16 toLowerCase()
Mengembalikan nilai string panggilan yang dikonversi ke huruf kecil.

17 toString()
Mengembalikan string yang mewakili objek tertentu.

18 toUpperCase()
Mengembalikan nilai string panggilan yang dikonversi menjadi huruf besar.

19 valueOf()
Mengembalikan nilai primitif dari objek yang ditentukan.

Pembungkus HTML String

Berikut adalah daftar method yang mengembalikan salinan string yang terbungkus di
dalam tag HTML yang sesuai.

Sr.No Method & Deskripsi

1 anchor()
Membuat jangkar HTML yang digunakan sebagai target hypertext.

2 big()
Membuat string untuk ditampilkan dalam font besar seolah-olah dalam tag
<big>.

3 blink()
Membuat string berkedip seolah-olah berada di tag <blink>.

4 bold()
Membuat string untuk ditampilkan dengan huruf tebal seolah-olah berada
dalam tag <b>.

5 fixed()
Menyebabkan string ditampilkan dalam font fixed-pitch seolah-olah berada
dalam tag <tt>

6 fontcolor()
Menyebabkan string ditampilkan dalam warna yang ditentukan seolah-olah
berada dalam tag <font color="color">.

7 fontsize()
Menyebabkan string ditampilkan dalam ukuran font yang ditentukan seolah-
olah berada dalam tag <font size="size">.

8 italics()
Menyebabkan string menjadi miring, seolah-olah berada dalam tag <i>.

9 link()
Membuat tautan hypertext HTML yang meminta URL lain.

10 small()
Menyebabkan string ditampilkan dalam font kecil, seolah-olah berada dalam
tag <small>.

11 strike()
Menyebabkan string ditampilkan sebagai teks yang dicoret, seolah-olah berada
dalam tag <strike>.

12 sub()
Menyebabkan string ditampilkan sebagai subskrip, seolah-olah berada dalam
tag <sub>

13 sup()
Menyebabkan string ditampilkan sebagai superskrip, seolah-olah berada dalam
tag <sup>

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan method String.

JavaScript - Objek Array

Objek Array memungkinkan Anda menyimpan banyak nilai dalam satu variabel. Ini
menyimpan kumpulan elemen berurutan ukuran tetap dari jenis yang sama. Array
digunakan untuk menyimpan kumpulan data, tetapi sering kali lebih berguna untuk
menganggap array sebagai kumpulan variabel dengan tipe yang sama.
Sintaksis
Gunakan sintaks berikut untuk membuat objek Array −
var fruits = new Array( "apple", "orange", "mango" );
Parameter Array adalah daftar string atau bilangan bulat . Saat Anda menentukan
parameter numerik tunggal dengan constructor Array, Anda menentukan panjang awal
array. Panjang maksimum yang diperbolehkan untuk sebuah array adalah
4.294.967.295.
Anda dapat membuat array hanya dengan menetapkan nilai sebagai berikut -
var fruits = [ "apple", "orange", "mango" ];
Anda akan menggunakan nomor urut untuk mengakses dan menetapkan nilai di dalam
array sebagai berikut.
fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third element

Properti Array
Berikut adalah daftar properti dari objek Array beserta deskripsinya.

Sr.No Deskripsi properti

1 constructor
Mengembalikan referensi ke function array yang membuat objek.

2
index
Properti mewakili indeks berbasis nol dari kecocokan dalam string

3
input
Properti ini hanya ada dalam array yang dibuat oleh pencocokan expression
reguler.

4 lenght
Mencerminkan jumlah elemen dalam array.

5 prototype
Properti prototype memungkinkan Anda untuk menambahkan properti dan
method ke objek.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mengilustrasikan
penggunaan properti Array.
Method Array
Berikut adalah daftar method objek Array beserta deskripsinya.

Sr.No Method & Deskripsi

1 concat()
Mengembalikan array baru yang terdiri dari array ini yang digabungkan dengan
array dan/atau nilai lain.

2 every()
Mengembalikan nilai true jika setiap elemen dalam array ini memenuhi function
pengujian yang disediakan.

3 filter()
Membuat array baru dengan semua elemen array ini yang mengembalikan nilai
benar dari function pemfilteran yang disediakan.

4 forEach()
Memanggil function untuk setiap elemen dalam array.

5 IndexOf()
Mengembalikan indeks pertama (terkecil) dari elemen dalam array sama
dengan nilai yang ditentukan, atau -1 jika tidak ada yang ditemukan.

6 join()
Menggabungkan semua elemen array menjadi string.

7 lastIndexOf()
Mengembalikan indeks terakhir (terbesar) dari elemen dalam array yang sama
dengan nilai yang ditentukan, atau -1 jika tidak ada yang ditemukan.

8 map()
Membuat array baru dengan hasil pemanggilan function yang disediakan pada
setiap elemen dalam array ini.

9 pop()
Menghapus elemen terakhir dari array dan mengembalikan elemen tersebut.

10 push()
Menambahkan satu atau lebih elemen ke akhir array dan mengembalikan
panjang array yang baru.

11 reduce()
Terapkan function secara bersamaan terhadap dua nilai array (dari kiri ke
kanan) untuk menguranginya menjadi satu nilai.

12 reduceRight()
Terapkan function secara bersamaan terhadap dua nilai array (dari kanan ke
kiri) untuk menguranginya menjadi satu nilai.

13 reverse()
Membalik urutan elemen array -- yang pertama menjadi yang terakhir, dan
yang terakhir menjadi yang pertama.

14 shift()
Menghapus elemen pertama dari array dan mengembalikan elemen tersebut.

15 slice()
Mengekstrak bagian dari array dan mengembalikan array baru.

16 some()
Mengembalikan nilai true jika setidaknya satu elemen dalam array ini
memenuhi function pengujian yang disediakan.

17 toSource()
Merupakan kode sumber dari suatu objek

18 sort()
Mengurutkan elemen array

19 splice()
Menambahkan dan/atau menghapus elemen dari array.
20 keString()
Mengembalikan string yang mewakili array dan elemennya.

21 unshift()
Menambahkan satu atau lebih elemen ke depan array dan mengembalikan
panjang array yang baru.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan method Array.

JavaScript - Objek Tanggal

Objek Tanggal adalah tipe data yang dibangun ke dalam bahasa JavaScript. Objek
tanggal dibuat dengan new Date() seperti yang ditunjukkan di bawah ini.
Setelah objek Date dibuat, sejumlah method memungkinkan Anda untuk
mengoperasikannya. Sebagian besar method hanya memungkinkan Anda untuk
mendapatkan dan menyetel bidang tahun, bulan, hari, jam, menit, detik, dan milidetik
objek, menggunakan waktu lokal atau waktu UTC (universal, atau GMT).
Standar ECMAScript mengharuskan objek Tanggal untuk dapat mewakili tanggal dan
waktu apa pun, hingga presisi milidetik, dalam 100 juta hari sebelum atau setelah
1/1/1970. Ini adalah kisaran plus atau minus 273.785 tahun, jadi JavaScript dapat
mewakili tanggal dan waktu hingga tahun 275755.
Sintaksis
Anda dapat menggunakan salah satu sintaks berikut untuk membuat objek Date
menggunakan constructor Date().
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])
Catatan - Parameter dalam tanda kurung selalu opsional.
Berikut adalah deskripsi dari parameter −
 Tanpa Argumen - Tanpa argumen, constructor Date() membuat objek Date yang
diatur ke tanggal dan waktu saat ini.
 milidetik - Ketika satu argumen numerik dilewatkan, itu diambil sebagai
representasi numerik internal dari tanggal dalam milidetik, seperti yang
dikembalikan oleh method getTime(). Misalnya, meneruskan argumen 5000
membuat tanggal yang mewakili lima detik lewat tengah malam pada 1/1/70.
 datestring - Ketika satu argumen string dilewatkan, itu adalah representasi string
dari tanggal, dalam format yang diterima oleh method Date.parse() .
 7 agruments - Untuk menggunakan bentuk terakhir dari constructor yang
ditunjukkan di atas. Berikut adalah deskripsi dari masing-masing argumen −
o year − Nilai bilangan bulat yang mewakili tahun. Untuk kompatibilitas
(untuk menghindari masalah Y2K), Anda harus selalu menentukan tahun
secara lengkap; gunakan 1998, bukan 98.
o month − Nilai bilangan bulat yang mewakili bulan, dimulai dengan 0 untuk
Januari hingga 11 untuk Desember.
o date − Nilai bilangan bulat yang mewakili hari dalam sebulan.
o hour− Nilai bilangan bulat yang mewakili jam dalam sehari (skala 24 jam).
o minute − Nilai bilangan bulat yang mewakili segmen menit dari
pembacaan waktu.
o second − Nilai bilangan bulat yang mewakili segmen kedua dari
pembacaan waktu.
o millisecond − Nilai bilangan bulat yang mewakili segmen milidetik dari
pembacaan waktu.

Properti Tanggal
Berikut adalah daftar properti objek Date beserta deskripsinya.

Sr.No Deskripsi properti

1 constructor
Menentukan function yang membuat prototype objek.

2 prototype
Properti prototype memungkinkan Anda untuk menambahkan properti dan
method ke objek

Di bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan

penggunaan properti Tanggal yang berbeda.

Method Tanggal
Berikut adalah daftar method yang digunakan dengan Date dan deskripsinya.

Sr.No Method & Deskripsi

1 Date()
Mengembalikan tanggal dan waktu hari ini
2 getDate()
Mengembalikan hari dalam sebulan untuk tanggal yang ditentukan menurut
waktu setempat.

3 getDay()
Mengembalikan hari dalam seminggu untuk tanggal yang ditentukan menurut
waktu setempat.

4 getFullYear()
Mengembalikan tahun dari tanggal yang ditentukan menurut waktu setempat.

5 getHours()
Mengembalikan jam pada tanggal yang ditentukan menurut waktu setempat.

6 getMilliseconds()
Mengembalikan milidetik pada tanggal yang ditentukan menurut waktu
setempat.

7 getMinutes()
Mengembalikan menit pada tanggal yang ditentukan menurut waktu setempat.

8 getMonth()
Mengembalikan bulan pada tanggal yang ditentukan menurut waktu setempat.

9 getSeconds()
Mengembalikan detik pada tanggal yang ditentukan menurut waktu setempat.

10 getTime()
Mengembalikan nilai numerik dari tanggal yang ditentukan sebagai jumlah
milidetik sejak 1 Januari 1970, 00:00:00 UTC.

11 getTimezoneOffset()
Mengembalikan offset zona waktu dalam hitungan menit untuk lokal saat ini.

12 getUTCDate()
Mengembalikan hari (tanggal) bulan pada tanggal yang ditentukan menurut
waktu universal.

13 getUTCDay()
Mengembalikan hari dalam seminggu pada tanggal yang ditentukan menurut
waktu universal.

14 getUTCFullYear()
Mengembalikan tahun pada tanggal yang ditentukan menurut waktu universal.

15 getUTCHours()
Mengembalikan jam pada tanggal yang ditentukan menurut waktu universal.

16 getUTCMilliseconds()
Mengembalikan milidetik pada tanggal yang ditentukan menurut waktu
universal.

17 getUTCminutes()
Mengembalikan menit pada tanggal yang ditentukan menurut waktu universal.

18 getUTCMonth()
Mengembalikan bulan pada tanggal yang ditentukan menurut waktu universal.

19 getUTCSeconds()
Mengembalikan detik pada tanggal yang ditentukan menurut waktu universal.

20 getYear()
Usang - Mengembalikan tahun pada tanggal yang ditentukan menurut waktu
setempat. Gunakan getFullYear sebagai gantinya.

21 setDate()
Mengatur hari dalam sebulan untuk tanggal yang ditentukan menurut waktu
setempat.

22 setFullYear()
Menetapkan tahun penuh untuk tanggal yang ditentukan menurut waktu
setempat.
23 setHours()
Mengatur jam untuk tanggal yang ditentukan menurut waktu setempat.

24 setMillidetik()
Setel milidetik untuk tanggal yang ditentukan menurut waktu setempat.

25 setMinutes()
Mengatur menit untuk tanggal yang ditentukan menurut waktu setempat.

26 setMonth()
Mengatur bulan untuk tanggal yang ditentukan menurut waktu setempat.

27 setSeconds()
Mengatur detik untuk tanggal yang ditentukan menurut waktu setempat.

28 setTime()
Setel objek Tanggal ke waktu yang diwakili oleh jumlah milidetik sejak 1
Januari 1970, 00:00:00 UTC.

29 setUTCDate()
Mengatur hari dalam sebulan untuk tanggal tertentu menurut waktu universal.

30 setUTCFullYear()
Menetapkan tahun penuh untuk tanggal tertentu menurut waktu universal.

31 setUTCHours()
Mengatur jam untuk tanggal tertentu menurut waktu universal.

32 setUTCmilidetik()
Setel milidetik untuk tanggal tertentu menurut waktu universal.

33 setUTCminutes()
Mengatur menit untuk tanggal tertentu menurut waktu universal.

34 setUTCMonth()
Mengatur bulan untuk tanggal tertentu menurut waktu universal.

35 setUTCSeconds()
Mengatur detik untuk tanggal tertentu menurut waktu universal.

36 setYear()
Usang - Mengatur tahun untuk tanggal yang ditentukan menurut waktu
setempat. Gunakan setFullYear sebagai gantinya.

37 toDateString()
Mengembalikan bagian "tanggal" dari Tanggal sebagai string yang dapat
dibaca manusia.

38 toGMTString()
Tidak digunakan lagi - Mengonversi tanggal menjadi string, menggunakan
konvensi Internet GMT. Gunakan toUTCString sebagai gantinya.

39 toLocaleDateString()
Mengembalikan bagian "tanggal" dari Tanggal sebagai string, menggunakan
konvensi lokal saat ini.

40 toLocaleFormat()
Mengonversi tanggal menjadi string, menggunakan format string.

41 toLocaleString()
Mengonversi tanggal menjadi string, menggunakan konvensi lokal saat ini.

42 toLocaleTimeString()
Mengembalikan bagian "waktu" dari Tanggal sebagai string, menggunakan
konvensi lokal saat ini.

43 toSource()
Mengembalikan string yang mewakili sumber untuk objek Tanggal yang
setara; Anda dapat menggunakan nilai ini untuk membuat objek baru.

44 toString()
Mengembalikan string yang mewakili objek Tanggal yang ditentukan.

45 toTimeString()
Mengembalikan bagian "waktu" dari Tanggal sebagai string yang dapat dibaca
manusia.

46 toUTCString()
Mengonversi tanggal menjadi string, menggunakan konvensi waktu universal.

47 valueOf()
Mengembalikan nilai primitif dari objek Tanggal.

Mengonversi tanggal menjadi string, menggunakan konvensi waktu universal.

Tanggal Method Statis

Selain banyak method instan yang disebutkan sebelumnya, objek Date juga
mendefinisikan dua method statis. Method ini dipanggil melalui constructor Date() itu
sendiri.

Sr.No Method & Deskripsi

1 Date.parse( )
Mem-parsing representasi string dari tanggal dan waktu dan mengembalikan
representasi milidetik internal dari tanggal tersebut.

2 Date.UTC( )
Mengembalikan representasi milidetik dari tanggal dan waktu UTC yang
ditentukan.

Di bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan

penggunaan method Statis Tanggal.

JavaScript - Objek Matematika

Objek matematika memberi Anda properti dan method untuk konstanta dan function
matematika. Tidak seperti objek global lainnya, Math bukanlah constructor. Semua
properti dan method Math bersifat statis dan dapat dipanggil dengan menggunakan
Math sebagai objek tanpa membuatnya.
Jadi, Anda menyebut konstanta pi sebagai Math.PI dan Anda memanggil
function sinus sebagai Math.sin(x) , di mana x adalah argumen method.
Sintaksis
Sintaks untuk memanggil properti dan method Matematika adalah sebagai berikut
var pi_val = Math.PI;
var sine_val = Math.sin(30);

Properti Matematika
Berikut adalah daftar semua properti Matematika dan deskripsinya.

Sr.No. Deskripsi properti

1 E\
Konstanta Euler dan basis logaritma natural, kira-kira 2,718.

2 LN2
Logaritma natural dari 2, kira-kira 0,693.

3 LN10
Logaritma natural dari 10, kira-kira 2,302.

4 LOG2E
Basis 2 logaritma E, kira-kira 1,442.

5 LOG10E
Basis 10 logaritma E, kira-kira 0,434.

6 PI
Rasio keliling lingkaran dengan diameternya, kira-kira 3,14159.

7 SQRT1_2
Akar kuadrat dari 1/2; ekuivalen, 1 di atas akar kuadrat dari 2, kira-kira 0,707.

8 SQRT2
Akar kuadrat dari 2, sekitar 1,414.
Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan properti Math.

Method Matematika
Berikut adalah daftar method yang terkait dengan objek Math dan deskripsinya

Sr.No Method & Deskripsi

1 abs()
Mengembalikan nilai absolut dari sebuah angka.

2 acos()
Mengembalikan arccosine (dalam radian) dari sebuah angka.

3 isin()
Mengembalikan arcsine (dalam radian) dari sebuah angka.

4 atan()
Mengembalikan arctangent (dalam radian) dari sebuah angka.

5 atan2()
Mengembalikan arctangen dari hasil bagi argumennya.

6 ceil()
Mengembalikan bilangan bulat terkecil yang lebih besar dari atau sama dengan
angka.

7 cos()
Mengembalikan kosinus suatu angka.

8 exp()
Mengembalikan EN , di mana N adalah argumennya, dan E adalah konstanta
Euler, basis logaritma natural.

9 floor()
Mengembalikan bilangan bulat terbesar kurang dari atau sama dengan angka
10 log()
Mengembalikan logaritma natural (basis E) dari sebuah angka.

11 max()
Mengembalikan angka nol atau lebih yang terbesar.

12 min()
Mengembalikan angka terkecil dari nol atau lebih.

13 pow()
Mengembalikan basis ke pangkat eksponen, yaitu eksponen basis.

14 random()
Mengembalikan nomor acak semu antara 0 dan 1.

15 round()
Mengembalikan nilai angka yang dibulatkan ke bilangan bulat terdekat.

16 sin()
Mengembalikan sinus suatu angka.

17 sqrt()
Mengembalikan akar kuadrat dari sebuah angka.

18 tan()
Mengembalikan tangen sebuah angka.

19 toSource()
Mengembalikan string "Matematika".

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan method yang terkait dengan Matematika.

Expression Reguler dan Objek RegExp

Expression reguler adalah objek yang menggambarkan pola karakter.
Kelas JavaScript RegExp mewakili expression reguler, dan baik String
maupun RegExp menentukan method yang menggunakan expression reguler untuk
melakukan function pencocokan pola dan pencarian dan penggantian yang kuat pada
teks.
Sintaksis
Expression reguler dapat didefinisikan dengan constructor RegExp () , sebagai berikut -
var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;
Berikut adalah deskripsi dari parameter −
 pattern − Sebuah string yang menentukan pola expression reguler atau
expression reguler lainnya.
 atribut − String opsional yang berisi atribut "g", "i", dan "m" yang masing-masing
menentukan kecocokan global, case-insensitive, dan multi-line.

Kurung
Tanda kurung ([]) memiliki arti khusus bila digunakan dalam konteks expression
reguler. Mereka digunakan untuk menemukan berbagai karakter.

Sr.No. Expression & Deskripsi

1
[...]
Salah satu karakter di antara tanda kurung.

2
[^...]
Salah satu karakter tidak antara tanda kurung.

3
[0-9]
Ini cocok dengan digit desimal apa pun dari 0 hingga 9.

4
[az]
Ini cocok dengan karakter apa pun dari huruf kecil a hingga huruf kecil z .

5
[AZ]
Ini cocok dengan karakter apa pun dari huruf besar A hingga huruf besar Z .

6
[aZ]
Itu cocok dengan karakter apa pun dari huruf kecil a hingga huruf besar Z .

Kisaran yang ditunjukkan di atas bersifat umum; Anda juga dapat menggunakan
rentang [0-3] untuk mencocokkan angka desimal mulai dari 0 hingga 3, atau rentang
[bv] untuk mencocokkan karakter huruf kecil mulai dari b hingga v .

Pengukur
Frekuensi atau posisi urutan karakter dalam tanda kurung dan karakter tunggal dapat
dilambangkan dengan karakter khusus. Setiap karakter khusus memiliki konotasi
tertentu. Bendera +, *, ?, dan $ semuanya mengikuti urutan karakter.

Sr.No. Expression & Deskripsi

1
p+
Ini cocok dengan string apa pun yang berisi satu atau lebih p.

2
P*
Ini cocok dengan string apa pun yang berisi nol atau lebih p.

3
P?
Itu cocok dengan string apa pun yang berisi paling banyak satu p.

4
p{N}
Itu cocok dengan string apa pun yang berisi urutan N p

5
p{2,3}
Itu cocok dengan string apa pun yang berisi urutan dua atau tiga p.

6
p{2, }
Itu cocok dengan string apa pun yang berisi urutan setidaknya dua p.
7
p$
Itu cocok dengan string apa pun dengan p di ujungnya.

8
^p
Itu cocok dengan string apa pun dengan p di awal.

Contoh
Contoh berikut menjelaskan lebih lanjut tentang pencocokan karakter.

Sr.No Expression & Deskripsi

1
[^a-zA-Z]
Itu cocok dengan string apa pun yang tidak mengandung karakter apa pun
mulai dari a hingga z dan A hingga Z.

2
p.p
Itu cocok dengan string apa pun yang berisi p, diikuti oleh karakter apa pun,
pada gilirannya diikuti oleh p lainnya .

3
^.{2}$
Itu cocok dengan string apa pun yang berisi tepat dua karakter.

4
<b>(.*)</b>
Itu cocok dengan string apa pun yang disertakan dalam <b> dan </b>.

5
p(hp)*
Itu cocok dengan string apa pun yang berisi p diikuti oleh nol atau lebih contoh
urutan hp .

Karakter literal

Sr.No Deskripsi karakter

.
1
Alfanumerik
Diri

2
\0
Karakter NUL (\u0000)

3
\t
tab (\u0009

4
\n
Baris baru (\u000A)

5
\v
Tab vertikal (\u000B)

6
\f
Umpan form (\u000C)

7
\r
Kereta kembali (\u000D)

8
\xnn
Karakter Latin yang ditentukan oleh angka heksadesimal nn; misalnya, \x0A
sama dengan \n

9
\xxxxx
Karakter Unicode ditentukan oleh angka heksadesimal xxxx; misalnya, \u0009
sama dengan \t

10
\cX
Karakter kontrol ^X; misalnya, \cJ setara dengan karakter baris baru \n
Metakarakter
Karakter meta hanyalah sebuah karakter alfabetis yang didahului dengan garis miring
terbalik yang berfunction untuk memberikan arti khusus pada kombinasi tersebut.
Misalnya, Anda dapat mencari sejumlah besar uang menggunakan karakter meta '\
d': /([\d]+)000/ , Di sini \d akan mencari string karakter numerik apa pun.
Tabel berikut mencantumkan sekumpulan karakter meta yang dapat digunakan dalam
Expression Reguler Gaya PERL.

Sr.No. Deskripsi karakter

1
.
satu karakter

2
\s
karakter spasi putih (spasi, tab, baris baru)

3
\S
karakter bukan spasi

4
\d
angka (0-9)

5
\D
non-digit

6
\w
karakter kata (az, AZ, 0-9, _)

7
\W
karakter bukan kata

8
[\b]
backspace literal (kasus khusus).

9
[aeiou]
cocok dengan satu karakter dalam set yang diberikan

10
[^aeiou]
cocok dengan satu karakter di luar set yang diberikan

11
(foo|bar|baz)
cocok dengan salah satu alternatif yang ditentukan

Pengubah
Beberapa pengubah tersedia yang dapat menyederhanakan cara Anda bekerja
dengan regexps, seperti sensitivitas huruf besar-kecil, mencari dalam beberapa baris,
dll.

Sr.No Pengubah & Deskripsi

1
i
Lakukan pencocokan case-insensitive.

2
m
Menentukan bahwa jika string memiliki karakter baris baru atau karakter
carriage return, operator ^ dan $ sekarang akan cocok dengan batas baris
baru, bukan batas string

3
g
Melakukan pencocokan globalyaitu, menemukan semua kecocokan daripada
berhenti setelah pertandingan pertama.

Properti RegExp
Berikut adalah daftar properti yang terkait dengan RegExp dan deskripsinya.
Sr.No. Deskripsi properti

1 constructor
Menentukan function yang membuat prototype objek.

2 global
Menentukan apakah pengubah "g" disetel.

3 ignoreCase
Menentukan apakah pengubah "i" disetel.

4 lanstIndex
Indeks untuk memulai pertandingan berikutnya.

5 multiline
Menentukan apakah pengubah "m" disetel.

6 source
Teks pola.

Di bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan

penggunaan properti RegExp.

Method RegExp
Berikut adalah daftar method yang terkait dengan RegExp beserta deskripsinya.

Sr.No Method & Deskripsi

1 exec()
Mengeksekusi pencarian kecocokan dalam parameter stringnya.

2 test()
Menguji kecocokan dalam parameter stringnya.

3 toSource()
Mengembalikan literal objek yang mewakili objek yang ditentukan; Anda dapat
menggunakan nilai this untuk membuat objek baru.

4 toString()
Mengembalikan string yang mewakili objek tertentu.

Pada bagian berikut, kita akan memiliki beberapa contoh untuk mendemonstrasikan
penggunaan method RegExp.

JavaScript - Model Objek Document atau DOM

Setiap halaman web berada di dalam window browser yang dapat dianggap sebagai
objek.
Objek Document mewakili document HTML yang ditampilkan di window itu. Objek
Document memiliki berbagai properti yang merujuk ke objek lain yang memungkinkan
akses dan modifikasi konten document.
Cara konten document diakses dan dimodifikasi disebut Document Object Model ,
atau DOM . Objek diatur dalam hierarki. Struktur hierarki ini berlaku untuk organisasi
objek dalam document Web.
 Objek window − Bagian atas hierarki. Ini adalah elemen terluar dari hierarki
objek.
 Objek document − Setiap document HTML yang dimuat ke window menjadi
objek document. Document berisi isi halaman.
 Objek form − Semua yang terlampir dalam tag <form>...</form> menetapkan
objek form.
 Elemen form control − Objek form berisi semua elemen yang ditentukan untuk
objek tersebut seperti bidang teks, tombol, tombol radio, dan kotak centang.
Berikut adalah hierarki sederhana dari beberapa objek penting −
Ada beberapa DOM yang ada. Bagian berikut menjelaskan setiap DOM ini secara
mendetail dan menjelaskan bagaimana Anda dapat menggunakannya untuk
mengakses dan mengubah konten document.
 The Legacy DOM − Ini adalah model yang diperkenalkan di versi awal bahasa
JavaScript. Ini didukung dengan baik oleh semua browser, tetapi memungkinkan
akses hanya ke bagian kunci tertentu dari document, seperti form, elemen form,
dan gambar.
 W3C DOM − Model objek document ini memungkinkan akses dan modifikasi
semua konten document dan distandarisasi oleh World Wide Web Consortium
(W3C). Model ini didukung oleh hampir semua browser modern.
 The IE4 DOM − Model objek document ini diperkenalkan pada Versi 4 dari
browser Internet Explorer Microsoft. IE 5 dan versi yang lebih baru menyertakan
dukungan untuk sebagian besar fitur DOM W3C dasar.

Kompatibilitas DOM
Jika Anda ingin menulis skrip dengan fleksibilitas untuk menggunakan W3C DOM atau
IE 4 DOM bergantung pada ketersediaannya, maka Anda dapat menggunakan
pendekatan pengujian kemampuan yang terlebih dahulu memeriksa keberadaan
method atau properti untuk menentukan apakah browser memiliki kemampuan yang
Anda inginkan. Misalnya −
if (document.getElementById) {
// If the W3C method exists, use it
} else if (document.all) {
// If the all[] array exists, use it
} else {
// Otherwise use the legacy DOM
}
JavaScript - Penanganan Kesalahan &
Pengecualian
Ada tiga jenis kesalahan dalam pemrograman: (a) Kesalahan Sintaks, (b) Kesalahan
Runtime, dan (c) Kesalahan Logika.

Kesalahan Sintaks
Kesalahan sintaks, juga disebut kesalahan penguraian, terjadi pada waktu kompilasi
dalam bahasa pemrograman tradisional dan pada waktu interpretasi dalam JavaScript.
Misalnya, baris berikut menyebabkan kesalahan sintaksis karena tidak ada tanda
kurung tutup.
<script type = "text/javascript">

</script>
Ketika kesalahan sintaksis terjadi di JavaScript, hanya kode yang terkandung dalam
utas yang sama dengan kesalahan sintaksis yang terpengaruh dan sisa kode di utas
lainnya akan dieksekusi dengan asumsi tidak ada apa pun di dalamnya yang
bergantung pada kode yang mengandung kesalahan.

Kesalahan Waktu Proses

Kesalahan waktu proses, juga disebut pengecualian, terjadi selama eksekusi (setelah
kompilasi/interpretasi).
Misalnya, baris berikut menyebabkan kesalahan waktu proses karena di sini sintaksnya
benar, tetapi saat waktu proses, ia mencoba memanggil method yang tidak ada.
<script type = "text/javascript">

</script>
Pengecualian juga memengaruhi utas tempat terjadinya, memungkinkan utas
JavaScript lainnya untuk melanjutkan eksekusi normal.

Kesalahan Logis
Kesalahan logika bisa menjadi jenis kesalahan yang paling sulit dilacak. Kesalahan ini
bukan hasil dari kesalahan sintaksis atau runtime. Sebaliknya, itu terjadi saat Anda
membuat kesalahan dalam logika yang menggerakkan skrip Anda dan Anda tidak
mendapatkan hasil yang diharapkan.
Anda tidak dapat menemukan kesalahan tersebut, karena tergantung pada kebutuhan
bisnis Anda jenis logika apa yang ingin Anda masukkan ke dalam program Anda.

Try…catch…finally. Statement
Versi terbaru JavaScript menambahkan kemampuan penanganan
pengecualian. JavaScript mengimplementasikan konstruksi try...catch...finally serta
operator throw untuk menangani pengecualian.
Anda dapat menangkap pengecualian yang dibuat oleh pemrogram dan runtime ,
tetapi Anda tidak dapat menangkap kesalahan sintaksis JavaScript.
Inilah sintaks try...catch...finally block −
<script type = "text/javascript">
<!--
try {
// Code to run
[break;]
}

catch ( e ) {
// Code to run if an exception occurs
[break;]
}

[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>
Blok try harus diikuti dengan tepat satu blok catch atau satu blok finally (atau salah
satu dari keduanya). Ketika pengecualian terjadi di blok try , pengecualian ditempatkan
di e dan blok catch dijalankan. Blok akhirnya opsional dijalankan tanpa syarat setelah
coba/tangkap.
Contoh
Berikut adalah contoh di mana kami mencoba memanggil function yang tidak ada yang
pada gilirannya menimbulkan pengecualian. Mari kita lihat bagaimana perilakunya
tanpa try...catch −
Demo Langsung
<html>
<head>
<script type = "text/javascript">

</script>
</head>

<body>
<p>Click the following to see the result:</p>

<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Keluaran
Sekarang mari kita coba menangkap pengecualian ini menggunakan try...catch dan
tampilkan pesan yang mudah digunakan. Anda juga dapat menyembunyikan pesan ini,
jika ingin menyembunyikan kesalahan ini dari pengguna.
Demo Langsung
<html>
<head>

<script type = "text/javascript">

</script>