5) JavaScript Ds
5) JavaScript Ds
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.
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>
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.
/*
* 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 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 .
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
Sekarang, jika browser pengguna tidak mendukung JavaScript atau JavaScript tidak
diaktifkan, maka pesan dari </noscript> akan ditampilkan di layar.
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>
Kode ini akan menghasilkan hasil berikut -
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<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">
<!--
var money;
var name;
//-->
</script>
Anda juga dapat mendeklarasikan beberapa variabel dengan kata kunci var yang sama
sebagai berikut –
<script type = "text/javascript">
<!--
var money, name;
//-->
</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">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</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.
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 -
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
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>
Operator Perbandingan
JavaScript mendukung operator perbandingan berikut −
Asumsikan variabel A menampung 10 dan variabel B menampung 20, maka -
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 />";
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 />";
Operator Bitwise
JavaScript mendukung operator bitwise berikut −
Asumsikan variabel A menampung 2 dan variabel B menampung 3, maka -
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);
Operator Penugasan
JavaScript mendukung operator penugasan berikut −
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 />";
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.
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 />";
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.
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 />";
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...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;
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;
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;
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>
document.write("Loop stopped!");
//-->
</script>
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;
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 />");
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">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator) {
document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
//-->
</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 /> ");
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 /> ");
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...
</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">
<!--
function functionname(parameter-list) {
statements
}
//-->
</script>
Contoh
Coba contoh berikut. Ini mendefinisikan function yang disebut sayHello yang tidak
memerlukan parameter −
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello there");
}
//-->
</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 −
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>
Keluaran
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
<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
ondragenter script Dipicu saat elemen telah diseret ke target lepas yang valid
ondragleave script Dipicu saat elemen diseret di atas target lepas yang valid
onmouseout script Dipicu saat pointer mouse bergerak keluar dari elemen
onmouseover script Dipicu saat pointer mouse bergerak di atas elemen
onratechange script Dipicu saat laju pemutaran data media telah berubah
onstalled script Dipicu saat ada kesalahan dalam mengambil data media
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">
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
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
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 );
<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.
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) + ";"
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) + ";"
<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.
<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type = "button" value = "Redirect Me" onclick = "Redirect();" />
</form>
</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">
<!--
function Redirect() {
window.location = "https://www.tutorialspoint.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</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">
<!--
var browsername = navigator.appName;
if( browsername == "Netscape" ) {
window.location = "http://www.location.com/ns.htm";
} else if ( browsername =="Microsoft Internet Explorer") {
window.location = "http://www.location.com/ie.htm";
} else {
window.location = "http://www.location.com/other.htm";
}
//-->
</script>
</head>
<body>
</body>
</html>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
Keluaran
<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">
<!--
void func()
javascript:void func()
or:
void(func())
javascript:void(func())
//-->
</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
<!-- CETAK MULAI DI SINI -->..... <!-- CETAK BERAKHIR DI SINI --> 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.
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
<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;
}
<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
Properti Nomor
Berikut adalah daftar masing-masing properti dan penjelasannya.
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.
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.
Properti Boolean
Berikut adalah daftar properti objek Boolean −
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.
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.
Properti Tali
Berikut adalah daftar properti objek String dan deskripsinya.
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.
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.
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.
Properti Array
Berikut adalah daftar properti dari objek Array beserta deskripsinya.
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.
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.
Properti Tanggal
Berikut adalah daftar properti objek Date beserta deskripsinya.
1 constructor
Menentukan function yang membuat prototype objek.
2 prototype
Properti prototype memungkinkan Anda untuk menambahkan properti dan
method ke objek
Method Tanggal
Berikut adalah daftar method yang digunakan dengan Date dan deskripsinya.
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.
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.
Properti Matematika
Berikut adalah daftar semua properti Matematika dan deskripsinya.
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
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.
Kurung
Tanda kurung ([]) memiliki arti khusus bila digunakan dalam konteks expression
reguler. Mereka digunakan untuk menemukan berbagai karakter.
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.
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.
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
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.
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.
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.
Method RegExp
Berikut adalah daftar method yang terkait dengan RegExp beserta deskripsinya.
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.
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">
<!--
window.print(;
//-->
</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 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">
<!--
function myFunc() {
var a = 100;
alert("Value of variable a is : " + a );
}
//-->
</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>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Keluaran
Anda dapat menggunakan blok finaly yang akan selalu dijalankan tanpa syarat setelah
mencoba/menangkap. Ini sebuah contoh.
Demo Langsung
<html>
<head>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Keluaran
Pernyataan throw
Anda dapat menggunakan pernyataan throw untuk menaikkan pengecualian bawaan atau
pengecualian khusus Anda. Nanti pengecualian ini dapat ditangkap dan Anda dapat mengambil
tindakan yang sesuai.
Contoh
Contoh berikut menunjukkan cara menggunakan pernyataan throw .
Demo Langsung
<html>
<head>
try {
if ( b == 0 ) {
throw( "Divide by zero error." );
} else {
var c = a / b;
}
}
catch ( e ) {
alert("Error: " + e );
}
}
//-->
</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
Anda dapat memunculkan pengecualian dalam satu function menggunakan string, bilangan bulat,
Boolean, atau objek, lalu Anda dapat menangkap pengecualian tersebut baik dalam function
yang sama seperti yang kita lakukan di atas, atau dalam function lain menggunakan blok
try... catch .
Method onerror()
Onerror event handler adalah fitur pertama yang memfasilitasi penanganan error di
JavaScript . Peristiwa kesalahan dipicu pada objek window setiap kali terjadi pengecualian pada
halaman.
Demo Langsung
<html>
<head>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Keluaran
Penangan kejadian onerror menyediakan tiga informasi untuk mengidentifikasi sifat sebenarnya
dari kesalahan −
Error message − Pesan yang sama yang akan ditampilkan browser untuk kesalahan yang
diberikan
URL − File di mana kesalahan terjadi
Nomor baris − Nomor baris di URL yang diberikan yang menyebabkan kesalahan
Berikut adalah contoh untuk menunjukkan cara mengekstrak informasi ini.
Contoh
Demo Langsung
<html>
<head>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>
Keluaran
Anda dapat menampilkan informasi yang diekstraksi dengan cara apa pun yang menurut Anda
lebih baik.
Anda dapat menggunakan method onerror , seperti yang ditunjukkan di bawah ini, untuk
menampilkan pesan kesalahan jika terjadi masalah saat memuat gambar.
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />
Anda dapat menggunakan onerror dengan banyak tag HTML untuk menampilkan pesan yang
sesuai jika terjadi kesalahan.
JavaScript - Validasi Form
Validasi form biasanya terjadi di server, setelah klien memasukkan semua data yang diperlukan
dan kemudian menekan tombol Kirim. Jika data yang dimasukkan oleh klien salah atau hilang
begitu saja, server harus mengirim semua data kembali ke klien dan meminta agar form
dikirimkan kembali dengan informasi yang benar. Ini benar-benar proses yang panjang yang
biasanya membebani server.
JavaScript menyediakan cara untuk memvalidasi data form di komputer klien sebelum
mengirimkannya ke server web. Validasi form umumnya melakukan dua function.
Basic validation − Pertama-tama, form harus diperiksa untuk memastikan semua bidang
wajib diisi. Ini hanya membutuhkan satu putaran melalui setiap bidang dalam form dan
memeriksa data.
Validasi Format Data - Kedua, data yang dimasukkan harus diperiksa untuk bentuk dan
nilai yang benar. Kode Anda harus menyertakan logika yang sesuai untuk menguji
kebenaran data.
Contoh
Kami akan mengambil contoh untuk memahami proses validasi. Berikut adalah form sederhana
dalam format html.
Demo Langsung
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[choose yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Keluaran
JavaScript - Animasi
Anda dapat menggunakan JavaScript untuk membuat animasi kompleks yang memiliki, namun
tidak terbatas pada, elemen berikut −
Fireworks
Fade Effect
Roll-in atau Roll-out
Page-in atau Page-out
Object movements
Anda mungkin tertarik dengan perpustakaan animasi berbasis JavaScript yang
ada: Script.Aculo.us .
Tutorial ini memberikan pemahaman dasar tentang cara menggunakan JavaScript untuk
membuat animasi.
JavaScript dapat digunakan untuk memindahkan sejumlah elemen DOM (<img />, <div> atau
elemen HTML lainnya) di sekitar halaman menurut semacam pola yang ditentukan oleh
persamaan atau function logis.
JavaScript menyediakan dua function berikut yang sering digunakan dalam program animasi.
setTimeout( function, duration) − Function ini
memanggil function setelah durasi milidetik dari sekarang.
setInterval(function, duration) − Function ini memanggil function setelah setiap
milidetik durasi .
clearTimeout(setTimeout_variable) − Panggilan function ini menghapus pengatur
waktu yang diatur oleh function setTimeout().
JavaScript juga dapat mengatur sejumlah atribut objek DOM termasuk posisinya di layar. Anda
dapat mengatur atribut atas dan kiri objek untuk memposisikannya di mana saja di layar. Ini
sintaksnya.
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
Animasi Manual
Jadi mari terapkan satu animasi sederhana menggunakan properti objek DOM dan function
JavaScript sebagai berikut. Daftar berikut berisi method DOM yang berbeda.
Kami menggunakan function JavaScript getElementById() untuk mendapatkan objek
DOM dan kemudian menugaskannya ke variabel global imgObj .
Kami telah mendefinisikan function inisialisasi init() untuk menginisialisasi imgObj di
mana kami telah mengatur posisinya dan atribut kiri .
Kami memanggil function inisialisasi pada saat memuat window.
Terakhir, kita memanggil function moveRight() untuk menambah jarak kiri sebesar 10
piksel. Anda juga bisa mengaturnya ke nilai negatif untuk memindahkannya ke sisi kiri.
Contoh
Coba contoh berikut.
Demo Langsung
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>
Keluaran
Animasi Otomatis
Dalam contoh di atas, kita melihat bagaimana sebuah gambar bergerak ke kanan dengan setiap
klik. Kami dapat mengotomatiskan proses ini dengan menggunakan function
JavaScript setTimeout() sebagai berikut −
Di sini kami telah menambahkan lebih banyak method. Jadi mari kita lihat apa yang baru di sini
−
Function moveRight() memanggil function setTimeout() untuk mengatur posisi imgObj .
Kami telah menambahkan function stop() baru untuk menghapus pengatur waktu yang
disetel oleh function setTimeout() dan untuk menyetel objek pada posisi awalnya.
Contoh
Coba kode contoh berikut.
Demo Langsung
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>
<body>
<p>Move your mouse over the image to see the result</p>
JavaScript - Multimedia
Objek navigator JavaScript menyertakan objek anak yang disebut plugins . Objek ini adalah
sebuah array, dengan satu entri untuk setiap plug-in yang dipasang di browser. Objek
navigator.plugins hanya didukung oleh Netscape, Firefox, dan Mozilla saja.
Contoh
Berikut adalah contoh yang menunjukkan cara mencantumkan semua plug-on yang terpasang di
browser Anda −
Demo Langsung
<html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<table border = "1">
<tr>
<th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>
Memeriksa Plug-In
Setiap plug-in memiliki entri dalam array. Setiap entri memiliki properti berikut −
nama − adalah nama plugin.
filename − adalah file yang dapat dieksekusi yang dimuat untuk menginstal plug-in.
description − adalah deskripsi dari plugin, yang disediakan oleh pengembang.
mimeTypes − adalah array dengan satu entri untuk setiap tipe MIME yang didukung oleh
plugin.
Anda dapat menggunakan properti ini dalam skrip untuk mengetahui plug-in yang diinstal, dan
kemudian menggunakan JavaScript, Anda dapat memutar file multimedia yang sesuai. Lihatlah
contoh berikut.
<html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script language = "JavaScript" type = "text/javascript">
media = navigator.mimeTypes["video/quicktime"];
if (media) {
document.write("<embed src = 'quick.mov' height = 100 width = 100>");
} else {
document.write("<img src = 'quick.gif' height = 100 width = 100>");
}
</script>
</body>
</html>
Keluaran
CATATAN − Di sini kita menggunakan HTML <embed> tag untuk menyematkan file
multimedia.
Mengontrol Multimedia
Mari kita ambil satu contoh nyata yang bekerja di hampir semua browser −
Demo Langsung
<html>
<head>
<title>Using Embeded Object</title>
<body>
<embed id = "demo" name = "demo"
src = "http://www.amrood.com/games/kumite.swf"
width = "318" height = "300" play = "false" loop = "false"
pluginspage = "http://www.macromedia.com/go/getflashplayer"
swliveconnect = "true">
JavaScript - Men-debug
Sesekali, pengembang melakukan kesalahan saat membuat kode. Kesalahan dalam program atau
skrip disebut sebagai bug .
Proses menemukan dan memperbaiki bug disebut debugging dan merupakan bagian normal dari
proses pengembangan. Bagian ini mencakup alat dan teknik yang dapat membantu Anda dengan
tugas debug..
Pesan Kesalahan di IE
Cara paling dasar untuk melacak kesalahan adalah dengan mengaktifkan informasi kesalahan di
browser Anda. Secara default, Internet Explorer menampilkan ikon kesalahan di bilah status saat
terjadi kesalahan pada halaman.
Mengklik dua kali ikon ini membawa Anda ke kotak dialog yang menampilkan informasi
tentang kesalahan spesifik yang terjadi.
Karena ikon ini mudah diabaikan, Internet Explorer memberi Anda opsi untuk menampilkan
kotak dialog Kesalahan secara otomatis setiap kali terjadi kesalahan.
Untuk mengaktifkan opsi ini, pilih Alat → Opsi Internet → tab Tingkat Lanjut. dan terakhir
centang opsi kotak "Display a Notification About Every Script Error" seperti yang
ditunjukkan di bawah ini −
if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );
if( debugging )
alert( "Exits swapImage() with swapStatus=" + swapStatus );
Dengan memeriksa konten dan urutan alert () seperti yang muncul, Anda dapat memeriksa
kesehatan program Anda dengan sangat mudah.
Gunakan JavaScript Debugger
Debugger adalah aplikasi yang menempatkan semua aspek eksekusi skrip di bawah kendali
pemrogram. Debugger memberikan kontrol halus atas status skrip melalui antarmuka yang
memungkinkan Anda memeriksa dan menetapkan nilai serta mengontrol aliran eksekusi.
Setelah skrip dimuat ke dalam debugger, skrip dapat dijalankan satu baris pada satu waktu atau
diinstruksikan untuk berhenti pada breakpoint tertentu. Setelah eksekusi dihentikan, pemrogram
dapat memeriksa status skrip dan variabelnya untuk menentukan apakah ada sesuatu yang
salah. Anda juga dapat melihat variabel untuk perubahan nilainya.
Versi terbaru Mozilla JavaScript Debugger (nama kode Venkman) untuk browser Mozilla dan
Netscape dapat diunduh di http://www.hacksrus.com/~ginda/venkman
<body>
<form name = "myform">
<input type = "text" name = "stage" size = "20" />
</form>
<!-- Create Mappings -->
<img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>
Keluaran
Anda dapat merasakan konsep peta dengan menempatkan kursor mouse pada objek gambar.
Properti Navigator
Ada beberapa properti terkait Navigator yang dapat Anda gunakan di halaman Web
Anda. Berikut adalah daftar nama dan deskripsi masing-masing.
2 appVersion
Properti ini adalah string yang berisi versi browser serta informasi berguna lainnya
seperti bahasa dan kompatibilitasnya.
3 bahasa
Properti ini berisi singkatan dua huruf untuk bahasa yang digunakan oleh
browser. Netscape saja.
4 mimTypes[]
Properti ini adalah array yang berisi semua tipe MIME yang didukung oleh
klien. Netscape saja.
5 platform[]
Properti ini adalah string yang berisi platform tempat browser dikompilasi. "Win32"
untuk sistem operasi Windows 32-bit
6 plugin[]
Properti ini adalah array yang berisi semua plugin yang telah diinstal pada
klien. Netscape saja.
7 Agen pengguna[]
Properti ini adalah string yang berisi nama kode dan versi browser. Nilai ini dikirim ke
server asal untuk mengidentifikasi klien.
Method Navigator
Ada beberapa method khusus Navigator. Berikut adalah daftar nama dan deskripsi mereka.
Sr.No Keterangan
.
1 javaEnabled()
Method ini menentukan apakah JavaScript diaktifkan di klien. Jika JavaScript
diaktifkan, method ini mengembalikan nilai true; jika tidak, ia mengembalikan false.
2 plugings.refresh
Method ini membuat plug-in yang baru diinstal tersedia dan mengisi array plugin
dengan semua nama plug-in baru. Netscape saja.
3 preferensi(nama,nilai)
Method ini memungkinkan skrip yang ditandatangani untuk mendapatkan dan mengatur
beberapa preferensi Netscape. Jika parameter kedua dihilangkan, method ini akan
mengembalikan nilai preferensi yang ditentukan; jika tidak, itu menetapkan
nilai. Netscape saja.
4 taintEnabled()
Method ini mengembalikan nilai true jika data tainting diaktifkan; palsu sebaliknya.
Deteksi Peramban
Ada JavaScript sederhana yang dapat digunakan untuk mengetahui nama browser dan kemudian
halaman HTML dapat disajikan kepada pengguna.
Demo Langsung
<html>
<head>
<title>Browser Detection Example</title>
</head>
<body>
<script type = "text/javascript">
<!--
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera) {
document.write("Opera based browser");
// Keep your opera specific URL here.
} else if (gecko) {
document.write("Mozilla based browser");
// Keep your gecko specific URL here.
} else if (ie) {
document.write("IE based browser");
// Keep your IE specific URL here.
} else if (netscape) {
document.write("Netscape based browser");
// Keep your Netscape specific URL here.
} else {
document.write("Unknown browser");
}