You are on page 1of 60

JAVA SCRIPT

1. JAVA HOME
JavaScript adalah bahasa scripting THE dari Web.

JavaScript digunakan di jutaan halaman web untuk menambah fungsionalitas, memvalidasi


bentuk, mendeteksi browser, dan banyak lagi.

CONTOH
<html>
<body>

<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>

</body>
</html>

2. Java Introduce

JavaScript adalah bahasa scripting paling populer di internet, dan bekerja di semua browser
utama, seperti Internet Explorer, Firefox, Chrome, Opera, dan Safari.

sebelum Anda melanjutkan, Anda harus memiliki pemahaman dasar berikut:

* HTML / XHTML

Apa itu JavaScript?

* JavaScript didesain untuk menambah interaktivitas ke halaman HTML


* JavaScript adalah bahasa scripting
* Sebuah bahasa scripting adalah bahasa pemrograman yang ringan
* JavaScript biasanya embedded langsung ke dalam halaman HTML
* JavaScript adalah bahasa ditafsirkan (berarti bahwa script yang mengeksekusi tanpa
pendahuluan kompilasi)
* Setiap orang dapat menggunakan JavaScript tanpa membeli lisensi

Apakah Java dan JavaScript sama?

NO!

Java dan JavaScript adalah dua bahasa yang sama sekali berbeda baik dalam konsep dan
desain!

Java (dikembangkan oleh Sun Microsystems) adalah yang kuat dan jauh lebih kompleks bahasa
pemrograman - dalam kategori yang sama dengan C dan C + +.

Apa yang dapat JavaScript lakukan?

* JavaScript memberikan desainer HTML alat pemrograman - penulis HTML biasanya bukan
programmer, tapi JavaScript adalah bahasa scripting dengan sintaks yang sangat sederhana!
Hampir setiap orang dapat meletakkan kecil "potongan" kode ke dalam halaman HTML
* JavaScript dapat memasukkan teks dinamis ke dalam halaman HTML - Sebuah JavaScript
pernyataan seperti ini: document.write ( "<h1>" + nama + "</ h1>") dapat menuliskan sebuah
teks variabel ke dalam halaman HTML
* JavaScript dapat bereaksi terhadap events - A JavaScript dapat diatur untuk mengeksekusi
ketika sesuatu terjadi, seperti ketika sebuah halaman telah selesai dimuat atau ketika pengguna
mengklik pada sebuah elemen HTML
* JavaScript dapat membaca dan menulis elemen HTML - Sebuah JavaScript dapat membaca
dan mengubah isi elemen HTML
* JavaScript dapat digunakan untuk memvalidasi data - A JavaScript dapat digunakan untuk
memvalidasi data formulir sebelum diserahkan ke server. Ini menghemat server dari pemrosesan
tambahan
* JavaScript dapat digunakan untuk mendeteksi browser pengunjung - Sebuah JavaScript
dapat digunakan untuk mendeteksi browser pengunjung, dan - tergantung pada browser - load
halaman lain yang khusus dirancang untuk browser
* JavaScript dapat digunakan untuk membuat cookies - A JavaScript dapat digunakan untuk
menyimpan dan mengambil informasi di komputer pengunjung

The Real Name is ECMAScript

JavaScript nama resmi ECMAScript.

ECMAScript dikembangkan dan dikelola oleh organisasi ECMA.

ECMA-262 adalah standar JavaScript resmi.

Bahasa ini diciptakan oleh Brendan Eich at Netscape (dengan Navigator 2.0), dan telah muncul
di semua browser Netscape dan Microsoft sejak tahun 1996.

Pengembangan ECMA-262 dimulai pada 1996, dan edisi pertama diadopsi oleh Majelis Umum
ECMA pada bulan Juni 1997.

Standar ini disetujui sebagai ISO internasional (ISO / IEC 16262) standar pada tahun 1998.

Pengembangan standar masih berlangsung.

3. Java Script How To

<script> Tag HTML digunakan untuk menyisipkan JavaScript ke dalam halaman HTML.

Masukkan JavaScript ke dalam halaman HTML

Contoh di bawah ini menunjukkan bagaimana menggunakan JavaSript untuk menulis teks pada
halaman web:

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

Contoh di bawah ini menunjukkan bagaimana cara menambahkan tag HTML ke JavaScript:
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>

Contoh Dijelaskan

Untuk menyisipkan JavaScript ke dalam halaman HTML, kita menggunakan tag <script>. Di
dalam tag <script> kita menggunakan jenis atribut untuk mendefinisikan bahasa scripting.

Jadi, <script type="text/javascript"> dan </ script> memberitahu tempat dimulai dan berakhir
JavaScript:

<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

dia perintah document.write JavaScript merupakan standar output perintah untuk menulis ke
halaman.

Dengan memasukkan perintah document.write antara <script> dan </ script> tag, browser akan
mengenalinya sebagai perintah JavaScript dan mengeksekusi kode baris. Dalam hal ini browser
akan menulis Hello World! ke halaman:

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

Catatan: Jika kita tidak memasuki <script> tag, browser akan memperlakukan document.write
( "Hello World!") Perintah sebagai teks murni, dan hanya menulis seluruh baris pada halaman.
Mencobanya sendiri

Bagaimana Menangani Wikipedia Browser

Browser yang tidak mendukung JavaScript, JavaScript sebagai akan menampilkan konten
halaman.

Untuk mencegah mereka dari melakukan hal ini, dan sebagai bagian dari standar JavaScript,
HTML tag comment harus digunakan untuk "menyembunyikan" JavaScript.

Hanya menambahkan tag komentar HTML <! - Sebelum pernyataan pertama JavaScript, dan
seorang -> (akhir komentar) setelah pernyataan JavaScript terakhir, seperti ini:

<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>

Dua garis miring maju di akhir baris komentar (/ /) adalah komentar JavaScript simbol. Hal ini
untuk mencegah dari menjalankan JavaScript -> tag.

4. Java Script Where To

JavaScripts dalam bagian tubuh akan dilaksanakan SAAT halaman load.

JavaScripts di bagian kepala akan dijalankan ketika menelepon.

Dimana Letakkan JavaScript

JavaScripts dalam halaman akan dilaksanakan segera ketika halaman load ke browser. Ini tidak
selalu apa yang kita inginkan. Kadang-kadang kita ingin mengeksekusi sebuah script ketika
halaman load, lain kali bila pengguna memicu suatu peristiwa.

Skrip di <head>

Skrip yang akan dijalankan ketika mereka dipanggil, atau ketika sebuah peristiwa dipicu, pergilah
di bagian kepala.

Jika Anda menempatkan script di bagian kepala, Anda akan memastikan bahwa script tersebut
dimuat sebelum ada yang menggunakannya.

<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
</body>
</html>

Skrip di <body>

Skrip yang akan dijalankan ketika halaman load pergi di bagian tubuh.

Jika Anda menempatkan script bagian dalam tubuh, itu menghasilkan konten halaman.

<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>
</html>

Skrip di <head> dan <body>

Anda dapat menempatkan jumlah tidak terbatas skrip dalam dokumen Anda, sehingga Anda
dapat memiliki skrip baik di tubuh dan bagian kepala.

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Menggunakan External JavaScript

Jika Anda ingin menjalankan JavaScript yang sama pada beberapa halaman, tanpa harus
menulis naskah yang sama pada setiap halaman, Anda dapat menulis JavaScript dalam sebuah
file eksternal.

Simpan file JavaScript eksternal dengan. Js ekstensi file.

Catatan: skrip eksternal tidak dapat berisi tag <script>!

Untuk menggunakan skrip eksternal, arahkan ke. Js file dalam "src" attribute dari tag <script>:

<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

5. Java Script Statemants

JavaScript adalah suatu urutan pernyataan yang akan dijalankan oleh browser.

JavaScript is Case Sensitive

Tidak seperti HTML, JavaScript kasus sensitif - karena itu melihat dari dekat kapitalisasi Anda
ketika Anda menulis pernyataan JavaScript, membuat atau memanggil variabel, objek dan fungsi.

JavaScript Statements

Sebuah pernyataan JavaScript adalah perintah untuk browser. Tujuan dari perintah ini adalah
untuk memberitahu browser apa yang harus dilakukan.

Pernyataan JavaScript ini menginformasikan kepada browser untuk menulis "Hello Dolly" ke
halaman web:
document.write("Hello Dolly");

Hal yang biasa untuk menambahkan tanda titik koma di akhir setiap pernyataan dieksekusi.
Kebanyakan orang berpikir bahwa ini adalah praktek pemrograman yang baik, dan yang paling
sering Anda akan melihat ini dalam JavaScript contoh di web.

Titik koma adalah opsional (menurut standar JavaScript), dan browser seharusnya menafsirkan
akhir baris sebagai akhir pernyataan. Karena ini, Anda akan sering melihat contoh tanpa titik
koma di akhir.

Catatan: Menggunakan titik koma memungkinkan untuk menulis banyak pernyataan dalam satu
baris.

Kode JavaScript

Kode JavaScript (atau hanya JavaScript) adalah serangkaian pernyataan JavaScript.

Setiap pernyataan yang dijalankan oleh browser dalam urutan yang tertulis.

Contoh ini akan menulis sebuah heading dan dua paragraf ke sebuah halaman web:

<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Blocks

JavaScript pernyataan dapat dikelompokkan bersama dalam blok.

Blok mulai dengan keriting kiri Braket (, dan berakhir dengan hak keriting Braket).

Tujuan dari blok adalah membuat pernyataan urutan melaksanakan bersama.

Contoh ini akan menulis sebuah heading dan dua paragraf ke sebuah halaman web:

<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>

Contoh di atas ini tidak terlalu berguna. Itu hanya menunjukkan penggunaan blok. Biasanya
digunakan untuk blok grup pernyataan bersama dalam suatu fungsi atau dalam kondisi (di mana
sekelompok pernyataan harus dieksekusi jika kondisi terpenuhi).

Anda akan belajar lebih banyak tentang fungsi dan kondisi di bab-bab selanjutnya.

6. Java Script Commants

Komentar JavaScript dapat digunakan untuk membuat kode lebih mudah dibaca.

JavaScript Komentar
Komentar dapat ditambahkan untuk menjelaskan JavaScript, atau untuk membuat kode lebih
mudah dibaca.

Satu baris komentar dimulai dengan / /.

Contoh berikut ini menggunakan satu baris komentar untuk menjelaskan kode:

<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Multi-Line Komentar

Multi baris komentar dimulai dengan / * dan diakhiri dengan * /.

Contoh berikut ini menggunakan garis multi komentar untuk menjelaskan kode:

<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

Menggunakan Komentar Untuk Mencegah Eksekusi

Pada contoh berikut komentar digunakan untuk mencegah eksekusi kode dari satu baris (dapat
cocok untuk debugging):

<script type="text/javascript">
//document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

Pada contoh berikut komentar digunakan untuk mencegah eksekusi sebuah blok kode (dapat
cocok untuk debugging):

<script type="text/javascript">
/*
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
*/
</script>

Menggunakan Komentar di End of a Line


Pada contoh berikut komentar yang diletakkan di akhir baris kode:

<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write " Dolly!"
</script>

7. Java Script Variabel

Variabel adalah "wadah" untuk menyimpan informasi.

Do You Remember Aljabar Dari Sekolah?

Apakah Anda ingat aljabar dari sekolah? x = 5, y = 6, z = x + y

Apakah Anda ingat bahwa sebuah surat (seperti x) dapat digunakan untuk menyimpan nilai
(seperti 5), dan bahwa Anda bisa menggunakan informasi di atas untuk menghitung nilai z
menjadi 11?

Surat-surat ini disebut variabel, dan variabel dapat digunakan untuk menyimpan nilai (x = 5) atau
ungkapan (z = x + y).

Variabel JavaScript

Seperti aljabar, variabel JavaScript digunakan untuk menyimpan nilai atau ekspresi.

Sebuah variabel dapat memiliki nama pendek, seperti x, atau nama yang lebih deskriptif, seperti
carname.

Aturan untuk JavaScript nama variabel:

* Nama-nama variabel adalah case sensitif (y dan Y adalah dua variabel yang berbeda)
* Nama-nama variabel harus dimulai dengan huruf atau karakter garis bawah

Catatan: Karena JavaScript case-sensitif, nama variabel adalah case-sensitive.

Contoh

Sebuah nilai variabel dapat berubah selama eksekusi sebuah naskah. Anda dapat merujuk ke
variabel dengan nama untuk menampilkan atau mengubah nilainya.

Deklarasi (Menciptakan) Variabel JavaScript

Membuat variabel pada JavaScript yang paling sering disebut sebagai "menyatakan" variabel.

Anda dapat mendeklarasikan variabel JavaScript dengan pernyataan var:

var x;
var carname;

Setelah deklarasi yang ditunjukkan di atas, variabel kosong (mereka tidak memiliki nilai nilai).

Namun, Anda juga dapat menetapkan nilai ke variabel ketika Anda menyatakan mereka:

var x=5;
var carname="Volvo";
Setelah pelaksanaan pernyataan di atas, variabel x akan memegang nilai 5, dan akan terus
carname nilai Volvo.

Catatan: Bila Anda menetapkan nilai teks ke variabel, gunakan tanda kutip di nilai.

Menetapkan Nilai ke Variabel JavaScript dipercayai memiliki

Jika Anda memberikan nilai pada variabel yang belum dideklarasikan, variabel akan secara
otomatis dinyatakan.

Pernyataan-pernyataan ini:

x=5;
carname="Volvo";

var x=5;
var carname="Volvo";

Variabel JavaScript Redeclaring

Jika Anda JavaScript redeclare variabel tersebut, maka tidak akan kehilangan nilai aslinya.

var x=5;
var x;

Setelah pelaksanaan pernyataan di atas, variabel x akan masih memiliki nilai 5. Nilai x tidak
diatur ulang (atau dihapus) ketika Anda redeclare itu.

JavaScript Arithmetic

Seperti aljabar, Anda dapat melakukan operasi aritmatika dengan variabel JavaScript:

y=x-5;
z=y+5;

Anda akan mempelajari lebih lanjut tentang operator yang dapat digunakan pada bab selanjutnya
dari tutorial ini.

8. Java Script Operator

= Digunakan untuk menetapkan nilai.

+ Adalah digunakan untuk menambah nilai.

Tugas operator = digunakan untuk memberikan nilai pada variabel JavaScript.

Aritmetik operator + digunakan untuk menambah nilai-nilai bersama.

y=5;
z=2;
x=y+z;

Nilai x, setelah pelaksanaan pernyataan di atas adalah 7.


JavaScript Arithmetic Operator

Operator aritmatika digunakan untuk melakukan aritmatika antara variabel-variabel dan / atau
nilai-nilai.

Mengingat bahwa y = 5, tabel di bawah ini menjelaskan operator aritmetik:

Operator Description Example Result


+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4

JavaScript Assignment Operator

Assignment operator digunakan untuk memberikan nilai pada variabel JavaScript.

Mengingat bahwa x = 10 dan y = 5, tabel di bawah ini menjelaskan operator penugasan:

Operator Example Same As Result


= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

The + operator Digunakan pada Strings

Operator + juga dapat digunakan untuk menambahkan variabel string atau nilai-nilai teks
bersama-sama.

Untuk menambahkan dua atau lebih string variabel bersama, gunakan operator +.

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

Setelah pelaksanaan pernyataan di atas, variabel txt3 berisi "Sungguh hari verynice".

Untuk menambahkan spasi di antara dua senar, menyisipkan spasi ke salah satu string:

txt1="What a very ";


txt2="nice day";
txt3=txt1+txt2;

atau menyisipkan spasi ke dalam ekspresi:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
Setelah pelaksanaan pernyataan di atas, variabel txt3 berisi:

"Apa yang sangat nice day"

Menambahkan Strings dan Bilangan

Peraturannya adalah: Jika anda menambahkan sebuah nomor dan sebuah string, hasilnya akan
menjadi string!

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

9. JavaScript Comparison and Logical Operators (JavaScript Perbandingan dan Logical


Operator)

Perbandingan dan Logical operator digunakan untuk menguji benar atau salah.

Operator Perbandingan

Perbandingan operator digunakan dalam pernyataan-pernyataan logis untuk menentukan


kesetaraan atau perbedaan antara variabel-variabel atau nilai.

Mengingat bahwa x = 5, tabel di bawah ini menjelaskan operator perbandingan:

Operator Description Example


== is equal to x==8 is false
=== is exactly equal to (value and type) x===5 is true
x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true

Bagaimana alat ini dapat Digunakan

Perbandingan operator dapat digunakan dalam pernyataan bersyarat untuk membandingkan


nilai-nilai dan mengambil tindakan tergantung pada hasil:

if (age<18) document.write("Too young");

Anda akan belajar lebih banyak tentang penggunaan pernyataan bersyarat dalam bab
selanjutnya dari tutorial ini.
Logical Operator

Operator logika digunakan untuk menentukan logika antara variabel-variabel atau nilai.

Mengingat bahwa x = 6 dan y = 3, tabel di bawah ini menjelaskan operator logis:

Operator Description Example


&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true

Operator kondisional

JavaScript juga berisi sebuah operator kondisional yang memberikan nilai ke variabel didasarkan
pada beberapa kondisi.

Sintaks
variablename=(condition)?value1:value2

Example
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

Jika variabel pengunjung memiliki nilai "Pres", maka variabel tersebut akan diarahkan ucapan
nilai "Dear Presiden" lain akan ditugaskan "Ya".

10. JavaScript If...Else Statements

Pernyataan bersyarat digunakan untuk melakukan tindakan yang berbeda yang didasarkan pada
kondisi yang berbeda.

Conditional Statements

Sangat sering bila Anda menulis kode, Anda ingin melakukan tindakan yang berbeda untuk
keputusan yang berbeda. Anda dapat menggunakan pernyataan kondisional dalam kode Anda
untuk melakukan hal ini.

Dalam JavaScript kita memiliki pernyataan kondisional berikut:

* Jika pernyataan - menggunakan pernyataan ini untuk menjalankan beberapa kode hanya
jika kondisi yang ditentukan benar
* Jika ... lain pernyataan - menggunakan pernyataan ini untuk mengeksekusi beberapa kode
jika kondisi benar dan kode lain jika kondisi salah
* Jika ... else if .... pernyataan lain - menggunakan pernyataan ini untuk memilih salah satu
dari banyak blok kode yang akan dieksekusi
* Beralih pernyataan - menggunakan pernyataan ini untuk memilih salah satu dari banyak blok
kode yang akan dieksekusi

Jika Statement

Gunakan jika pernyataan untuk mengeksekusi beberapa kode hanya jika kondisi yang ditentukan
benar.

Syntax
if (condition)
{
code to be executed if condition is true
}

Perhatikan bahwa jika ditulis dalam huruf kecil. Menggunakan huruf besar (IF) akan
menghasilkan kesalahan JavaScript!

<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10

var d=new Date();


var time=d.getHours();

if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

Perhatikan bahwa tidak ada .. lain .. sintaks ini. Anda memberitahu browser untuk mengeksekusi
beberapa kode hanya jika kondisi tertentu adalah benar.

If...else Statement

Gunakan jika pernyataan .... lain untuk mengeksekusi beberapa kode jika kondisi benar dan kode
lain jika kondisi tidak benar.

Sintaks
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example
<script type="text/javascript">
//If the time is less than 10, you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date();


var time = d.getHours();

if (time < 10)


{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
If...else if...else Statement

Gunakan if .... else if ... lain pernyataan untuk memilih salah satu dari beberapa blok kode yang
akan dieksekusi.

Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and condition2 are not true
}

Example
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>

11. Switch

Pernyataan bersyarat digunakan untuk melakukan tindakan yang berbeda yang didasarkan pada
kondisi yang berbeda

Switch JavaScript Pernyataan

Gunakan pernyataan switch untuk memilih salah satu dari banyak blok kode yang akan
dieksekusi.

Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

Ini adalah cara kerjanya: Pertama kita memiliki satu ekspresi n (paling sering sebuah variabel),
yang dievaluasi sekali. Nilai dari ekspresi ini kemudian dibandingkan dengan nilai-nilai untuk
setiap kasus dalam struktur. Jika ada kesesuaian, blok kode yang terkait dengan kasus itu
dijalankan. Gunakan istirahat untuk mencegah kode dari berlari ke kasus berikutnya secara
otomatis.

Example
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date();


theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>

12. JavaScript Popup Boxes

JavaScript memiliki tiga macam kotak popup: Alert box, Confirm box, dan Prompt box

Alert Box

Kotak peringatan yang sering digunakan jika Anda ingin memastikan informasi yang datang
melalui kepada pengguna.

Ketika kotak peringatan muncul, pengguna juga harus klik "OK" untuk melanjutkan.

Syntax
alert("sometext");

Example
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body>
</html>

Konfirmasi Box

Sebuah kotak konfirmasi sering digunakan jika Anda ingin pengguna untuk memverifikasi atau
menerima sesuatu.

Ketika muncul kotak konfirmasi, pengguna harus mengklik "OK" atau "Batal" untuk melanjutkan.

Jika pengguna mengklik "OK", kotak returns true. Jika pengguna mengklik "Batal", kotak returns
false.

Syntax
confirm("sometext");

Example
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show confirm box" />

</body>
</html>

Prompt Box

Sebuah kotak prompt sering digunakan jika Anda ingin user untuk input nilai sebelum memasuki
sebuah halaman.

Ketika sebuah kotak prompt muncul, pengguna harus mengklik "OK" atau "Batal" untuk
melanjutkan setelah memasukkan nilai sebuah input.

Jika pengguna mengklik "OK" kotak mengembalikan nilai input. Jika pengguna mengklik "Batal"
kotak kembali null.

Syntax
prompt("sometext","defaultvalue");

Example
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_prompt()" value="Show prompt box" />

</body>
</html>

13. JavaScript Functions

Fungsi JavaScript

Untuk menjaga browser dari mengeksekusi sebuah script ketika halaman load, Anda dapat
menempatkan script Anda ke dalam suatu fungsi.

Sebuah fungsi berisi kode yang akan dijalankan oleh sebuah peristiwa atau oleh panggilan ke
fungsi.

Anda dapat memanggil fungsi dari mana saja di dalam suatu halaman (atau bahkan dari halaman
lain jika fungsi tertanam dalam eksternal. Js file).

Fungsi dapat didefinisikan baik dalam <head> dan <badan> bagian dari sebuah dokumen.
Namun, untuk memastikan bahwa fungsi dibaca / dibuka oleh browser sebelum itu disebut, bisa
bijaksana untuk menempatkan fungsi dalam bagian <kepala>.

Bagaimana Menetapkan Fungsi

Syntax
function functionname(var1,var2,...,varX)
{
some code
}
Parameter var1, var2, dan sebagainya adalah nilai-nilai variabel atau masuk ke fungsi. Para (dan
yang) mendefinisikan awal dan akhir fungsi.

Catatan: Fungsi tanpa parameter harus menyertakan tanda kurung () setelah nama fungsi.

Catatan: Jangan lupa tentang pentingnya modal dalam JavaScript! Fungsi kata harus ditulis
dalam huruf kecil, jika tidak terjadi kesalahan JavaScript! Juga ingat bahwa Anda harus
memanggil fungsi dengan modal yang sama seperti dalam nama fungsi.

JavaScript Function Example

Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>

Jika baris: alert ( "Hello world!!") Dalam contoh di atas tidak pernah meletakkan dalam fungsi, itu
telah dilaksanakan segera setelah jalur ini dimuat. Sekarang, skrip ini tidak dilakukan sebelum
pengguna hits tombol input. Fungsi displaymessage () akan dijalankan jika tombol input diklik.

Anda akan belajar lebih banyak tentang aktivitas JavaScript di Acara JS bab.

Pernyataan kembali

Pernyataan return digunakan untuk menentukan nilai yang dikembalikan dari fungsi.

Jadi, fungsi yang akan mengembalikan nilai harus menggunakan pernyataan kembali.

Contoh di bawah ini mengembalikan produk dari dua bilangan (a dan b):

Example
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3));
</script>

</body>
</html>

Lifetime Variabel JavaScript

Jika Anda mendeklarasikan sebuah variabel dalam sebuah fungsi, variabel hanya dapat diakses
di dalam fungsi. Ketika Anda keluar dari fungsi, variabel ini hancur. Variabel ini disebut variabel
lokal. Anda dapat memiliki variabel lokal dengan nama yang sama dalam fungsi yang berbeda,
karena masing-masing hanya diakui oleh fungsi yang dinyatakan.

Jika Anda mendeklarasikan sebuah variabel di luar fungsi, semua fungsi pada halaman Anda
dapat mengaksesnya. Masa hidup variabel-variabel ini dimulai ketika mereka dinyatakan, dan
berakhir saat halaman ditutup.

14. JavaScript For Loop

Loop mengeksekusi blok kode nomor tertentu kali, atau saat kondisi tertentu adalah benar.

JavaScript Loops

Sering bila Anda menulis kode, Anda ingin blok kode yang sama untuk menjalankan berkali-kali
berturut-turut. Alih-alih hampir sama menambahkan beberapa baris di script kita dapat
menggunakan loop untuk melakukan tugas seperti ini.

Dalam JavaScript, ada dua jenis loop yang berbeda:

* Untuk - loop melalui blok kode nomor tertentu kali


* Sementara - loop melalui suatu blok kode selama kondisi tertentu adalah benar

The for Loop

Untuk loop yang digunakan ketika Anda tahu sebelumnya berapa kali script harus dijalankan.

Syntax
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

Contoh

Contoh di bawah ini mendefinisikan sebuah loop yang dimulai dengan i = 0. Loop akan terus
berjalan selama i adalah kurang dari, atau sama dengan 5. i akan bertambah 1 setiap kali loop
berjalan.

Catatan: Parameter kenaikan juga bisa negatif, dan <= dapat membandingkan pernyataan
apapun.

Example
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

The while loop

Sementara loop akan dijelaskan dalam bab berikutnya.

15. JavaScript While Loop

Loop mengeksekusi blok kode nomor tertentu kali, atau saat kondisi tertentu adalah benar.

The while Loop


Sementara loop loop melalui blok kode selama kondisi tertentu adalah benar.

Syntax
while (var<=endvalue)
{
code to be executed
}

Catatan: <= bisa membandingkan pernyataan apapun.


Contoh

Contoh di bawah ini mendefinisikan sebuah loop yang dimulai dengan i = 0. Loop akan terus
berjalan selama i adalah kurang dari, atau sama dengan 5. i akan bertambah 1 setiap kali loop
berjalan:

Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

The do...while Loop

The do ... sementara loop adalah varian dari loop sementara. Loop ini akan menjalankan blok
kode SEKALI, dan kemudian akan mengulang loop selama kondisi tertentu adalah benar.

Syntax
do
{
code to be executed
}
while (var<=endvalue);

Contoh

Contoh di bawah ini menggunakan do ... sementara loop. The lakukan ... sementara loop akan
selalu dijalankan minimal sekali, bahkan jika kondisi ini palsu, karena pernyataan dijalankan
sebelum kondisi diuji:

Example
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>

16. JavaScript Break and Continue Statements

The break Statement


Pernyataan break akan mematahkan loop dan terus mengeksekusi kode berikut setelah loop (jika
ada).

Example
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

The continue Statement


Pernyataan yang terus akan mematahkan loop arus dan melanjutkan nilai berikutnya.
Example
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

17. JavaScript For...In Statement

the for ... dalam pernyataan loop melalui elemen-elemen dari sebuah array atau melalui sifat-sifat
suatu objek.

Syntax
for (variable in object)
{
code to be executed
}

Catatan: kode dalam tubuh untuk ... di loop dijalankan sekali untuk setiap elemen / properti.

Catatan: Variabel argumen dapat berupa nama variabel, elemen array, atau sebuah properti dari
suatu objek.
Contoh

Gunakan untuk ... dalam pernyataan untuk loop melalui array:

Example
<html>
<body>

<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>

18. JavaScript Events

Dengan menggunakan JavaScript, kita memiliki kemampuan untuk membuat halaman web
dinamis. Peristiwa adalah tindakan-tindakan yang dapat dideteksi oleh JavaScript.

Setiap elemen pada halaman web memiliki peristiwa-peristiwa tertentu yang dapat memicu
JavaScript. Sebagai contoh, kita dapat menggunakan event onClick elemen sebuah tombol untuk
mengindikasikan bahwa fungsi akan berjalan ketika pengguna mengklik pada tombol. Kita
mendefinisikan peristiwa dalam tag HTML.

Contoh peristiwa:

* A mouse klik
* Sebuah halaman web atau gambar loading
* Mousing atas hot spot pada halaman web
* Memilih field input dalam bentuk HTML
* Menyerahkan formulir HTML
* A keystroke

Catatan: Acara biasanya digunakan dalam kombinasi dengan fungsi, dan fungsi tidak akan
dijalankan sebelum peristiwa terjadi!

Untuk referensi yang lengkap tentang peristiwa-peristiwa diakui oleh JavaScript, pergi ke
JavaScript lengkap kami

onLoad and onUnload

The onLoad dan peristiwa onUnload dipicu ketika user memasuki atau meninggalkan halaman.

The aktivitas onLoad sering digunakan untuk memeriksa pengunjung jenis browser dan versi
browser, dan beban yang tepat versi halaman web berdasarkan informasi.

Baik peristiwa onUnload onLoad dan juga sering digunakan untuk menangani cookie yang harus
di set ketika pengguna memasuki atau meninggalkan halaman. Sebagai contoh, Anda bisa
memiliki popup menanyakan nama pengguna pada kedatangan pertamanya ke halaman Anda.
Nama ini kemudian disimpan dalam cookie. Lain kali pengunjung tiba di halaman Anda, Anda
bisa memiliki popup lain mengatakan sesuatu seperti: "Selamat datang John Doe!".

onFocus, onBlur and onChange

The onFocus, onChange peristiwa onBlur dan sering digunakan dalam kombinasi dengan kolom
formulir validasi.

Bawah ini adalah contoh bagaimana menggunakan event onChange. The checkEmail () fungsi
akan dipanggil setiap kali pengguna mengubah isi dari lapangan:

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

Acara yang onSubmit digunakan untuk memvalidasi SEMUA kolom formulir sebelum
mengirimkan itu.
Bawah ini adalah contoh bagaimana menggunakan event onSubmit. The checkForm () fungsi
akan dipanggil saat pengguna mengklik tombol kirim dalam bentuk. Jika nilai-nilai lapangan tidak
diterima, yang menyerahkan harus dibatalkan. Fungsi checkForm () mengembalikan entah benar
atau salah. Mengembalikan nilai true jika formulir akan diserahkan, jika tidak menyerahkan akan
dibatalkan:

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver and onMouseOut

onMouseOver dan onmouseout sering digunakan untuk membuat "animasi" tombol.

Di bawah ini adalah contoh dari suatu peristiwa onMouseOver. Kotak peringatan muncul ketika
sebuah event onMouseOver terdeteksi:

<a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver


event');return false"><img src="w3s.gif" alt="W3Schools" /></a>

19. JavaScript Try...Catch Statement

Try ..catch statement memungkinkan Anda untuk menguji blok kode untuk kesalahan.

JavaScript - Catching Errors

Halaman Web saat browsing di internet, kita semua telah melihat kotak peringatan JavaScript
memberitahu kita ada runtime error dan menanyakan "Apakah Anda ingin debug?". Pesan error
seperti ini mungkin berguna bagi para pengembang tetapi tidak bagi pengguna. Ketika pengguna
melihat kesalahan, mereka sering meninggalkan halaman Web.

Bab ini akan mengajarkan anda bagaimana untuk menangkap dan menangani pesan error
JavaScript, sehingga Anda tidak kehilangan audiens Anda

The try...catch Statement

The try...catch Statement memungkinkan Anda untuk menguji blok kode untuk kesalahan. Coba
blok yang berisi kode untuk dijalankan, dan menangkap blok berisi kode untuk dijalankan jika
kesalahan terjadi.

Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}

perhatikan bahwa try ... catch ditulis dalam huruf kecil. Menggunakan huruf besar akan
menghasilkan kesalahan JavaScript!

Contoh 1

Contoh di bawah ini seharusnya waspada "Welcome guest!" ketika tombol diklik. Namun, ada
kesalahan ketik pada pesan () function. alert () adalah salah eja sebagai adddlert (). Sebuah
JavaScript kesalahan terjadi. Blok yang menangkap menangkap kesalahan dan menjalankan
kode kustom untuk menanganinya. Kode menampilkan pesan kesalahan kustom
menginformasikan kepada user apa yang terjadi:

Example
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

Contoh 2

Contoh berikut menggunakan kotak konfirmasi untuk menampilkan pesan khusus memberitahu
pengguna mereka dapat mengklik OK untuk melanjutkan melihat halaman atau klik Batal untuk
pergi ke halaman muka. Jika metode mengkonfirmasi returns false, pengguna mengklik Batal,
dan kode mengarahkan ulang pengguna. Jika metode mengkonfirmasi returns true, kode tidak
apa-apa:

Example
<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.w3schools.com/";
}
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

The throw Statement

The throw statement can be used together with the try...catch statement, to create an exception
for the error. Learn about the throw statement in the next chapter.

20. JavaScript Throw Statement

The throw statement memungkinkan Anda untuk membuat pengecualian

The Throw Statement

Pernyataan lemparan memungkinkan Anda untuk membuat pengecualian. Jika Anda


menggunakan pernyataan ini bersama-sama dengan mencoba ... menangkap pernyataan, Anda
dapat mengontrol aliran program dan akurat menghasilkan pesan kesalahan.

Syntax
throw(exception)

Pengecualian dapat berupa string, integer, Boolean atau suatu objek.

Perhatikan bahwa membuang ditulis dalam huruf kecil. Menggunakan huruf besar akan
menghasilkan kesalahan JavaScript!
Contoh

Contoh di bawah ini menentukan nilai dari sebuah variabel yang disebut x. Jika nilai x lebih tinggi
dari 10, lebih rendah dari 0, atau tidak angka, kita akan melempar kesalahan. Kesalahan ini
kemudian ditangkap oleh argumen dan menangkap pesan kesalahan yang tepat ditampilkan:

Example
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{
if(x>10)
{
throw "Err1";
}
else if(x<0)
{
throw "Err2";
}
else if(isNaN(x))
{
throw "Err3";
}
}
catch(er)
{
if(er=="Err1")
{
alert("Error! The value is too high");
}
if(er=="Err2")
{
alert("Error! The value is too low");
}
if(er=="Err3")
{
alert("Error! The value is not a number");
}
}
</script>
</body>
</html>

21. JavaScript Special Characters

Dalam JavaScript anda dapat menambahkan karakter khusus ke teks string dengan
menggunakan tanda garis miring terbalik.

Insert Special Characters

The backslash (\) digunakan untuk menyisipkan apostrof, baris baru, harga, dan karakter khusus
lainnya menjadi string teks.

Lihat kode JavaScript berikut:

var txt="We are the so-called "Vikings" from the north.";


document.write(txt);

Dalam JavaScript, suatu string dimulai dan berhenti dengan baik tunggal atau tanda kutip ganda.
Ini berarti bahwa string di atas akan cincang untuk: Kita adalah apa yang disebut

Untuk mengatasi masalah ini, Anda harus menempatkan backslash (\) sebelum masing-masing
dua kutipan dalam "Viking". Ini bergantian setiap ganda kutipan ke dalam sebuah string literal:

var txt="We are the so-called \"Vikings\" from the north.";


document.write(txt);

JavaScript sekarang akan output string teks yang tepat: Kita adalah apa yang disebut "Viking"
dari utara.

Berikut adalah contoh lain:


document.write ("You \& I are singing!");
Contoh di atas akan menghasilkan output sebagai berikut:
You & I are singing!

Tabel berikut berisi karakter khusus lainnya yang dapat ditambahkan ke sebuah string teks
dengan tanda backslash:

Code Outputs
\' single quote
\" double quote
\& ampersand
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed

22. JavaScript Guidelines


Beberapa hal penting lainnya untuk mengetahui kapan scripting dengan JavaScript.

JavaScript is Case Sensitive

Sebuah fungsi bernama "myfunction" adalah tidak sama dengan "myFunction" dan sebuah
variabel bernama "myVar" adalah tidak sama dengan "myvar".

JavaScript kasus sensitif - karena itu melihat dari dekat kapitalisasi Anda ketika Anda membuat
atau panggilan variabel, objek dan fungsi.

White Space

JavaScript mengabaikan spasi tambahan. Anda dapat menambahkan spasi ke skrip untuk
membuatnya lebih mudah dibaca. Baris berikut adalah sama:

name="Hege";
name = "Hege";

Break up a Code Line

Anda dapat mematahkan sebuah baris kode dalam string teks dengan garis miring terbalik.
Contoh di bawah ini akan ditampilkan dengan benar:

document.write("Hello \
World!");

Namun, Anda tidak bisa memecahkan sebuah baris kode seperti ini:

document.write \
("Hello World!");

23. JavaScript Objects Introduction

JavaScript adalah sebuah Object Oriented Programming (OOP) bahasa.

Sebuah bahasa OOP memungkinkan Anda untuk menentukan benda Anda sendiri dan membuat
sendiri jenis variabel.

Object Oriented Programming


JavaScript adalah sebuah Object Oriented Programming (OOP) bahasa. Sebuah bahasa OOP
memungkinkan Anda untuk menentukan benda Anda sendiri dan membuat sendiri jenis variabel.

Namun, menciptakan benda Anda sendiri akan dijelaskan kemudian, di bagian JavaScript
Lanjutan. Kita akan mulai dengan melihat built-in JavaScript objek, dan bagaimana mereka
digunakan. Halaman berikutnya akan menjelaskan setiap built-in JavaScript objek secara rinci.

Perhatikan bahwa objek hanyalah sebuah jenis data khusus. Sebuah objek memiliki properti dan
metode.

Properties

Properties adalah nilai-nilai yang berhubungan dengan objek.

Pada contoh berikut ini kita menggunakan properti panjang dari objek String untuk
mengembalikan jumlah karakter dalam sebuah string:

<script type="text/javascript">
var txt="Hello World!";
document.write(txt.length);
</script>

Output dari kode di atas akan:

12

Methods

Metode adalah tindakan yang dapat dilakukan pada objek.

Pada contoh berikut ini kita menggunakan toUpperCase () method dari objek String untuk
menampilkan teks dalam huruf besar:

<script type="text/javascript">
var str="Hello world!";
document.write(str.toUpperCase());
</script>

Output dari kode di atas akan:

HELLO WORLD!

24. JavaScript String Object

The String object digunakan untuk memanipulasi yang disimpan sepotong teks.

Mengembalikan panjang string


Cara menggunakan properti panjang untuk mencari panjang string.

Style string
Bagaimana gaya string.

The indexOf () method


Cara menggunakan indexOf () method untuk mengembalikan posisi kejadian pertama dari nilai
string tertentu dalam sebuah string.

Pertandingan () method
Cara menggunakan pertandingan () metode untuk mencari nilai string tertentu dalam sebuah
string dan mengembalikan nilai string jika ditemukan

Ganti karakter dalam string - menggantikannya ()


Cara menggunakan menggantikan () method untuk mengganti beberapa karakter dengan
karakter lain dalam sebuah string.

Complete String Object Reference

Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek String, pergi ke lengkap kita referensi obyek String.

Referensi berisi penjelasan singkat dan contoh-contoh penggunaannya untuk masing-masing


properti dan metode!

String object

Objek String digunakan untuk memanipulasi yang disimpan sepotong teks.

Contoh-contoh penggunaannya:

Contoh berikut menggunakan properti panjang dari objek String untuk menemukan panjang
string:

var txt="Hello world!";


document.write(txt.length);

Kode di atas akan menghasilkan output sebagai berikut:

12

Contoh berikut menggunakan toUpperCase () method dari objek String untuk mengkonversi
string ke huruf besar:

var txt="Hello world!";


document.write(txt.toUpperCase());

Kode di atas akan menghasilkan output sebagai berikut:


HELLO WORLD!

25. JavaScript Date Object

Date Object yang digunakan untuk bekerja dengan tanggal dan waktu.

Kembali hari ini tanggal dan waktu


Cara menggunakan Tanggal () method untuk mendapatkan tanggal hari ini.

getTime ()
Gunakan getTime () untuk menghitung tahun sejak 1970.

setFullYear ()
Bagaimana menggunakan setFullYear () untuk menetapkan tanggal tertentu.
toUTCString ()
Bagaimana menggunakan toUTCString () untuk mengubah tanggal hari ini (menurut UTC) ke
string.

getDay ()
Gunakan getDay () dan sebuah array untuk menulis hari kerja, dan bukan hanya sebuah nomor.

Menampilkan jam
Bagaimana menampilkan jam di halaman web Anda.

Complete Date Object Reference

Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek Tanggal, pergi ke Tanggal lengkap kita referensi obyek.

Referensi berisi penjelasan singkat dan contoh-contoh penggunaannya untuk masing-masing


properti dan metode!

Create a Date Object

Tanggal objek yang digunakan untuk bekerja dengan tanggal dan waktu.

Kode berikut membuat objek disebut myDate Tanggal:

var myDate=new Date()

Catatan: Tanggal objek akan secara otomatis terus tanggal dan waktu sebagai nilai awal!

Set Dates

We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date();


myDate.setFullYear(2010,0,14);

Dan dalam contoh berikut, kita menetapkan Tanggal benda menjadi 5 hari ke depan:

var myDate=new Date();


myDate.setDate(myDate.getDate()+5);

Catatan: Jika menambahkan lima hari untuk menggeser tanggal bulan atau tahun, perubahan
ditangani secara otomatis oleh objek Tanggal sendiri!

Compare Two Dates

Tanggal objek juga digunakan untuk membandingkan dua tanggal.

Contoh berikut membandingkan tanggal hari ini dengan 14 Januari 2010:

var myDate=new Date();


myDate.setFullYear(2010,0,14);
var today = new Date();

if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}

26. JavaScript Array Object

Array Object yang digunakan untuk menyimpan beberapa nilai dalam satu variabel.

Buat sebuah array


Buat sebuah array, memberikan nilai pada itu, dan menulis nilai-nilai ke output.

Untuk ... Dalam Pernyataan


Cara menggunakan untuk ... di pernyataan untuk loop melalui elemen-elemen array.

Gabung dua array - concat ()


Cara menggunakan concat () method untuk bergabung dua array.

Masukkan elemen array menjadi sebuah string - gabung ()


Cara menggunakan join () metode untuk memasukkan semua elemen array menjadi sebuah
string.

Literal array - sort ()


Cara menggunakan sort () method untuk mengurutkan array literal.

Numeric array - sort ()


Cara menggunakan sort () method untuk mengurutkan array numerik.

Complete Array Object Reference

Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
Array objek, pergi ke Array lengkap kita referensi obyek.

Referensi berisi penjelasan singkat dan contoh-contoh penggunaannya untuk masing-masing


properti dan metode!

What is an Array?

Array adalah variabel khusus, yang dapat menyimpan lebih dari satu nilai, pada suatu waktu.

Jika Anda memiliki daftar item (daftar nama-nama mobil, misalnya), menyimpan mobil di variabel
tunggal bisa terlihat seperti ini

cars1="Saab";
cars2="Volvo";
cars3="BMW";

Namun, bagaimana jika Anda ingin loop melalui mobil dan menemukan satu tertentu? Dan
bagaimana jika kau tidak 3 mobil, tapi 300?
Solusi terbaik di sini adalah dengan menggunakan sebuah array!

Sebuah array dapat menampung semua nilai variabel Anda di bawah satu nama. Dan Anda
dapat mengakses nilai dengan mengacu pada nama array.

Setiap elemen dalam array memiliki ID sendiri sehingga dapat dengan mudah diakses.

Create an Array

Kode berikut membuat sebuah objek Array disebut myCars:

var myCars=new Array();

Ada dua cara untuk menambahkan nilai-nilai ke array (Anda dapat menambahkan sebanyak
mungkin nilai-nilai yang Anda butuhkan untuk menetapkan sebagai banyak variabel yang Anda
butuhkan) .

1:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

Anda dapat pula mem-pass sebuah argumen integer untuk mengendalikan ukuran array:
var myCars=new Array(3);
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2:
var myCars=new Array("Saab","Volvo","BMW");

Catatan: Jika Anda menetapkan nomor atau benar / salah nilai-nilai dalam array maka jenis
variabel akan numerik atau Boolean bukan string.

Access an Array

Anda dapat merujuk pada elemen tertentu dalam array dengan mengacu pada nama dari array
dan nomor indeks. Angka indeks dimulai pada 0.

Baris kode berikut:

document.write(myCars[0]);

akan menghasilkan output sebagai berikut:

Saab

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index
number:

myCars[0]="Opel";

Now, the following code line:


document.write(myCars[0]);

akan menghasilkan output sebagai berikut:

Opel

27. JavaScript Boolean Object

Objek yang Boolean digunakan untuk mengkonversi nilai non-Boolean ke sebuah nilai boolean
(true atau false).

Complete Boolean Object Reference

atau referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan objek
Boolean, pergi ke Boolean lengkap kita referensi obyek.

Referensi berisi penjelasan singkat dan contoh-contoh penggunaannya untuk masing-masing


properti dan metode!

Create a Boolean Object

Boolean objek yang mewakili dua nilai: "benar" atau "palsu".

Kode berikut membuat objek Boolean disebut myBoolean:

var myBoolean=new Boolean();

Catatan: Jika objek Boolean tidak memiliki nilai awal atau jika itu adalah 0, -0, null, "", false,
undefined, atau NaN, objek diatur ke false. Kalau itu benar (bahkan dengan string "palsu")!

Semua baris kode berikut membuat objek Boolean dengan nilai awal false:

var myBoolean=new Boolean();


var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

Dan semua baris kode berikut membuat objek Boolean dengan nilai awal yang benar:

var myBoolean=new Boolean(true);


var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");

28. JavaScript Math Object

he Math object allows you to perform mathematical tasks.

bulat ()
Bagaimana menggunakan bulat ().

acak ()
Bagaimana menggunakan acak () untuk mengembalikan nomor acak antara 0 dan 1.

max ()
Bagaimana menggunakan max () untuk mengembalikan nomor dengan nilai tertinggi dari dua
nomor tertentu.

min ()
Bagaimana menggunakan min () untuk mengembalikan nomor dengan nilai terendah dua nomor
tertentu.

Complete Math Object Reference

Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek Math, pergi ke Math lengkap kita referensi obyek.

Referensi berisi penjelasan singkat dan contoh-contoh penggunaannya untuk masing-masing


properti dan metode!

Math Object

Math objek memungkinkan Anda untuk melakukan tugas-tugas matematika.

Objek Math meliputi beberapa konstanta matematika dan metode.

Syntax for using properties/methods of Math:


var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);

Catatan: Math bukan konstruktor. Semua properti dan metode Matematika dapat disebut dengan
menggunakan Matematika sebagai objek tanpa menciptakan itu.

Mathematical Constants

JavaScript menyediakan delapan matematis konstanta yang dapat diakses dari objek Math. Ini
adalah: E, PI, akar kuadrat dari 2, akar kuadrat dari 1 / 2, log natural dari 2, log natural dari 10,
dasar-2 log dari E, dan basis-10 log E.

Anda mungkin referensi konstanta ini dari JavaScript seperti ini:

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Mathematical Methods

Selain konstanta matematika yang dapat diakses dari objek Math ada juga beberapa metode
yang tersedia.

Contoh berikut menggunakan bulat () method dari objek Math untuk melengkapi nomor ke integer
terdekat:
document.write(Math.round(4.7));

Kode di atas akan menghasilkan output sebagai berikut:


5

Contoh berikut menggunakan acak () method dari objek Math untuk kembali nomor acak antara 0
dan 1:

document.write(Math.random());

Kode di atas dapat menghasilkan output sebagai berikut:


0.54609912968258

Contoh berikut menggunakan lantai () dan random () metode dari objek Math untuk kembali
nomor acak antara 0 dan 10:

document.write(Math.floor(Math.random()*11));

Kode di atas dapat menghasilkan output sebagai berikut:


8

29. JavaScript RegExp Object

The RegExp object is used to specify what to search for in a text

What is RegExp

Regexp, adalah singkatan dari kalimat biasa.

Ketika Anda mencari di dalam teks, Anda dapat menggunakan pola untuk menggambarkan apa
yang Anda cari. Regexp IS pola ini.

Pola sederhana dapat menjadi satu karakter.

Pola yang lebih rumit terdiri dari beberapa karakter, dan dapat digunakan untuk pengolahan,
format memeriksa, substitusi dan banyak lagi.

Anda dapat menentukan di mana dalam string untuk mencari, apa jenis karakter untuk mencari,
dan banyak lagi.

Defining RegExp

The regexp objek yang digunakan untuk menyimpan pola pencarian.

Kita mendefinisikan sebuah objek regexp dengan kata kunci yang baru. Baris kode berikut
mendefinisikan sebuah objek regexp disebut patt1 dengan pola "e":
var patt1=new RegExp("e");

Bila Anda menggunakan obyek regexp ini untuk mencari dalam sebuah string, Anda akan
menemukan huruf "e"

Methods of the RegExp Object

The regexp Objek memiliki 3 metode: test (), exec (), dan kompilasi ().
test ()

Tes () metode pencarian string untuk nilai tertentu. Mengembalikan nilai true atau false

Example
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

Karena ada "e" dalam string, output dari kode di atas akan:
true

exec()

The exec () metode pencarian string untuk nilai tertentu. Mengembalikan teks yang ditemukan
nilai. Jika tidak cocok yang ditemukan, maka kembali null
Example 1
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

Karena ada "e" dalam string, output dari kode di atas akan:
e

Anda dapat menambahkan parameter kedua ke objek regexp, untuk menentukan pencarian
Anda. Sebagai contoh, jika anda ingin mencari semua kejadian dari sebuah karakter, Anda dapat
menggunakan "g" Parameter ( "global").

Untuk daftar lengkap tentang bagaimana memodifikasi pencarian Anda, kunjungi referensi obyek
regexp lengkap.

Bila menggunakan huruf "g" parameter, exec () method bekerja seperti ini:

* Mencari terjadinya pertama "e", dan toko posisinya


* Jika Anda menjalankan exec () lagi, hal itu dimulai pada posisi yang tersimpan, dan
menemukan terjadinya berikutnya "e", dan toko posisinya

Example 2
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

Karena ada enam "e" huruf dalam string, output dari kode di atas akan:.
eeeeeenull

JavaScript RegExp Object


« Previous Next Chapter »

The RegExp object is used to specify what to search for in a text


What is RegExp

RegExp, is short for regular expression.

When you search in a text, you can use a pattern to describe what you are searching for.
RegExp IS this pattern.

A simple pattern can be a single character.

A more complicated pattern consists of more characters, and can be used for parsing,
format checking, substitution and more.

You can specify where in the string to search, what type of characters to search for, and
more.
Defining RegExp

The RegExp object is used to store the search pattern.

We define a RegExp object with the new keyword. The following code line defines a
RegExp object called patt1 with the pattern "e":
var patt1=new RegExp("e");

When you use this RegExp object to search in a string, you will find the letter "e".
Methods of the RegExp Object

The RegExp Object has 3 methods: test(), exec(), and compile().


test()

The test() method searches a string for a specified value. Returns true or false
Example
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:
true

Try it yourself

exec()

The exec() method searches a string for a specified value. Returns the text of the found
value. If no match is found, it returns null
Example 1
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

Since there is an "e" in the string, the output of the code above will be:
e

Try it yourself

You can add a second parameter to the RegExp object, to specify your search. For
example; if you want to find all occurrences of a character, you can use the "g" parameter
("global").
For a complete list of how to modify your search, visit our complete RegExp object
reference.

When using the "g" parameter, the exec() method works like this:

* Finds the first occurence of "e", and stores its position


* If you run exec() again, it starts at the stored position, and finds the next occurence of
"e", and stores its position

Example 2
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

Since there is six "e" letters in the string, the output of the code above will be:
eeeeeenull

Try it yourself

compile()

Kompilasi () Metode ini digunakan untuk mengubah regexp.

kompilasi () dapat mengubah pola pencarian baik, dan menambahkan atau menghapus
parameter kedua.

Example
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

Karena ada "e" dalam string, tetapi bukan "d", output dari kode di atas akan:

truefalse

Complete RegExp Object Reference

Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek regexp, pergi ke regexp lengkap kita referensi obyek.

Referensi berisi penjelasan singkat dan contoh-contoh penggunaannya untuk masing-masing


properti dan metode termasuk objek string.

31. JavaScript Browser Detection

Objek Navigator berisi informasi tentang browser pengunjung ...


Browser Detection

Hampir semua hal dalam tutorial ini bekerja pada semua JavaScript-enabled browser. Namun,
ada beberapa hal yang tidak berfungsi pada browser tertentu - terutama pada browser lama.

Jadi, kadang-kadang dapat sangat berguna untuk mendeteksi browser pengunjung, dan
kemudian menyajikan informasi yang sesuai.

Cara terbaik untuk melakukannya adalah dengan membuat halaman web Anda cukup cerdas
untuk melihat salah satu cara untuk beberapa browser dan cara lain untuk browser lainnya.

Objek Navigator dapat digunakan untuk tujuan ini.

Objek Navigator berisi informasi tentang nama browser pengunjung, versi, dan banyak lagi.

Catatan Catatan: Tidak ada standar umum yang berlaku untuk objek navigator, tapi semua
browser utama mendukungnya.

The Navigator Object

Objek Navigator berisi semua informasi tentang browser pengunjung. Kita akan melihat dua sifat
objek Navigator:

* AppName - memegang nama browser


* AppVersion - berlaku, antara lain, versi browser

Example
<html>
<body>

<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);

document.write("Browser name: "+ browser);


document.write("<br />");
document.write("Browser version: "+ version);
</script>

</body>
</html>

Variabel "browser" pada contoh di atas memegang nama browser, yaitu "Netscape" atau
"Microsoft Internet Explorer".

The appVersion properti dalam contoh di atas mengembalikan sebuah string yang berisi
informasi lebih dari sekadar nomor versi, tetapi untuk sekarang kita hanya tertarik pada nomer
versi. Untuk menarik nomor versi dari string kita menggunakan fungsi bernama parseFloat (),
yang menarik hal pertama yang terlihat seperti angka desimal dari string dan mengembalikannya.

PENTING! Nomor versi SALAH di IE 5.0 atau nanti! Microsoft memulai appVersion string dengan
nomor 4.0. di IE 5.0 dan IE 6.0! Mengapa mereka melakukan itu??? Namun, JavaScript sama di
IE6, IE4 dan IE5, sehingga untuk kebanyakan skrip itu ok.
Contoh di bawah ini menampilkan peringatan yang berbeda, tergantung pada browser
pengunjung:

Example
<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer")
&& (version>=4))
{
alert("Your browser is good enough!");
}
else
{
alert("It's time to upgrade your browser!");
}
}
</script>
</head>

<body onload="detectBrowser()">
</body>
</html>

32. JavaScript Cookies

Cookie sering digunakan untuk mengidentifikasi pengguna.

What is a Cookie?

Cookie adalah sebuah variabel yang disimpan pada komputer pengunjung. Setiap kali komputer
yang sama meminta halaman dengan browser, ia akan mengirimkan cookie juga. Dengan
JavaScript, Anda berdua dapat membuat dan mengambil nilai cookie.

Contoh cookie:

* Nama cookie - Untuk pertama kali pengunjung datang ke halaman web anda, dia harus
mengisi dirinya / namanya. Nama ini kemudian disimpan dalam cookie. Lain kali pengunjung
Anda tiba di halaman, dia bisa mendapatkan pesan selamat datang seperti "Selamat datang John
Doe!" Nama ini diambil dari cookie yang disimpan
* Password cookie - Untuk pertama kali pengunjung datang ke halaman web anda, dia harus
mengisi password. Sandi ini kemudian disimpan dalam cookie. Lain kali pengunjung tiba di
halaman Anda, maka sandi tersebut diambil dari cookie
* Tanggal cookie - Untuk pertama kali pengunjung datang ke halaman web anda, tanggal hari
ini yang disimpan dalam cookie. Lain kali pengunjung Anda tiba di halaman, dia bisa
mendapatkan pesan seperti "kunjungan terakhir Anda adalah pada hari Selasa 11 Agustus
2005!" Tanggal diambil dari cookie yang disimpan

Create and Store a Cookie

Dalam contoh ini kita akan membuat sebuah cookie yang menyimpan nama pengunjung.
Pertama kali pengunjung datang ke halaman web, ia akan diminta untuk mengisi dalam dirinya /
namanya. Nama ini kemudian disimpan dalam cookie. Waktu berikutnya pengunjung tiba di
halaman yang sama, ia atau dia akan mendapatkan pesan selamat datang.

Pertama, kita menciptakan sebuah fungsi yang menyimpan nama pengunjung dalam sebuah
cookie variabel:

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

Parameter dari fungsi di atas terus nama cookie, nilai cookie, dan jumlah hari sampai cookie itu
kedaluwarsa.

Pada fungsi di atas pertama kita mengubah jumlah hari untuk tanggal yang valid, maka kita
menambahkan jumlah hari sampai cookie harus berakhir. Setelah itu kita simpan nama cookie,
nilai cookie, dan tanggal kedaluwarsa di objek document.cookie.

Kemudian, kita menciptakan fungsi lain yang memeriksa apakah cookie telah ditetapkan:

function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

Fungsi pertama di atas akan memeriksa apakah ada cookie yang disimpan pada semua di objek
document.cookie. Jika objek document.cookie memegang beberapa kue, kemudian periksa untuk
melihat apakah kita cookie disimpan spesifik. Jika cookie kami ditemukan, maka mengembalikan
nilai, jika tidak - kembali string kosong.

Terakhir, kita membuat fungsi yang menampilkan pesan selamat datang jika ada cookie yang
dibuat, dan jika cookie tidak diatur akan menampilkan kotak prompt, meminta nama user:

function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}

Semua bersama sekarang:

Example
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function checkCookie()
{
username=getCookie('username');
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
if (username!=null && username!="")
{
setCookie('username',username,365);
}
}
}
</script>
</head>

<body onload="checkCookie()">
</body>
</html>

Contoh di atas menjalankan checkCookie () fungsi ketika halaman load.

33. JavaScript Form Validation

JavaScript Form Validation

JavaScript dapat digunakan untuk memvalidasi data dalam bentuk HTML sebelum mengirim dari
konten ke server.

Formulir data yang biasanya diperiksa oleh JavaScript dapat berupa:

* Memiliki pengguna meninggalkan bidang kosong yang diperlukan?


* Memiliki pengguna yang valid memasukkan alamat e-mail?
* Memiliki pengguna memasukkan tanggal yang valid?
* Memiliki pengguna memasukkan teks dalam bidang numerik?

Required Fields

Fungsi di bawah ini akan memeriksa apakah bidang yang diperlukan telah ditinggalkan kosong.
Jika bidang yang dibutuhkan kosong, kotak peringatan peringatan pesan dan fungsi returns false.
Jika nilai yang dimasukkan, fungsi mengembalikan nilai true (berarti bahwa data yang OK):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}

Seluruh script, dengan bentuk HTML bisa terlihat seperti ini:

<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false;}
}
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

E-mail Validation

Fungsi di bawah ini akan memeriksa apakah konten memiliki sintaks umum dari sebuah email.

Ini berarti bahwa data input harus mengandung setidaknya satu simbol @ dan titik (.). Juga, tidak
boleh @ karakter pertama dari alamat email, dan titik terakhir harus setidaknya satu karakter
setelah tanda @:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}

Seluruh script, dengan bentuk HTML bisa terlihat seperti ini:

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false;}
}
}
</script>
</head>

<body>
<form action="submit.htm" onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>

</html>

35. JavaScript Animation

Dengan JavaScript kita dapat membuat gambar animasi.

JavaScript Animasi

Adalah mungkin untuk menggunakan JavaScript untuk membuat gambar animasi.

Caranya adalah dengan membiarkan JavaScript perubahan antara gambar yang berbeda pada
berbagai aktivitas.

Pada contoh berikut ini kita akan menambahkan sebuah gambar yang harus bertindak sebagai
tombol link pada halaman web. Kami kemudian akan menambahkan sebuah event onMouseOver
dan event onmouseout yang akan menjalankan dua fungsi JavaScript yang akan mengubah
antara gambar.

The HTML Code

Kode HTML terlihat seperti ini:


<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>

Perhatikan bahwa kita telah memberikan gambar sebuah id, untuk memungkinkan JavaScript
untuk mengatasinya nanti.
Acara yang onMouseOver menginformasikan kepada browser bahwa sekali mouse berguling
gambar, browser harus melaksanakan fungsi yang akan menggantikan gambar dengan gambar
lain.

Acara yang onmouseout menginformasikan kepada browser bahwa setelah mouse berguling
menjauh dari citra, fungsi JavaScript yang lain harus dieksekusi. Fungsi ini akan memasukkan
gambar asli lagi.

The JavaScript Code

Perubahan antara gambar dilakukan dengan JavaScript berikut:


<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>

Gunaka mouse di atas fungsi () menyebabkan image bergeser ke "b_blue.gif".

Fungsi mouseOut () menyebabkan image bergeser ke "b_pink.gif".

The Entire Code

Example
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>
</head>

<body>
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>

36. JavaScript Image Maps

Gambar-gambar peta dengan daerah diklik.

HTML Image Maps


Dari HTML tutorial kita telah mengetahui bahwa gambar-gambar peta dengan daerah diklik.
Biasanya, setiap daerah memiliki hyperlink terkait. Mengklik pada salah satu daerah membawa
Anda ke link terkait. Lihat foto HTML sederhana kita-peta.

Adding some JavaScript

Kita dapat menambahkan event (yang dapat memanggil JavaScript) ke <area> tag di dalam peta
gambar. <area> Tag yang mendukung onClick, onDblClick, onMouseDown, onMouseUp,
onMouseOver, onMouseMove, onmouseout, onKeyPress, onKeyDown, onKeyUp, onFocus, dan
onBlur peristiwa.

Berikut foto HTML-peta contoh, dengan beberapa JavaScript ditambahkan:

Example
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>

<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter
are by far the largest objects in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"


onMouseOver="writeText('The planet Mercury is very difficult to study
from the Earth because it is always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"


onMouseOver="writeText('Until the 1960s, Venus was often considered a
twin sister to the Earth because Venus is the nearest planet to us, and
because the two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>

<p id="desc"></p>

</body>
</html>

37. JavaScript Timing Events

JavaScript dapat dieksekusi dalam waktu-interval.


Ini disebut waktu peristiwa.

JavaScript Timing Events

Dengan JavaScript, adalah mungkin untuk menjalankan beberapa kode setelah interval waktu
tertentu. Ini disebut waktu peristiwa.

Ini sangat mudah ke waktu peristiwa dalam JavaScript. Dua metode utama yang digunakan
adalah:

* SetTimeout () - mengeksekusi kode beberapa waktu di masa depan


* ClearTimeout () - membatalkan setTimeout ()

Catatan: setTimeout () dan clearTimeout () adalah metode baik DOM HTML objek Window.

The setTimeout() Method


syntax
var t=setTimeout("javascript statement",milliseconds);

The setTimeout () method mengembalikan nilai - Dalam pernyataan di atas, nilai yang disimpan
dalam variabel yang disebut t. Jika Anda ingin membatalkan setTimeout (), Anda dapat merujuk
ke sana menggunakan nama variabel.

Parameter pertama dari setTimeout () adalah sebuah string yang berisi pernyataan JavaScript.
Pernyataan ini bisa menjadi pernyataan seperti "alert ('5 detik! ')" Atau panggilan ke salah satu
fungsi, seperti "alertMsg ()".

Parameter kedua menunjukkan jumlah milidetik dari sekarang Anda ingin mengeksekusi
parameter pertama.

Catatan: Terdapat 1000 milidetik dalam satu detik.


Contoh

Ketika tombol diklik pada contoh di bawah ini, sebuah kotak peringatan akan ditampilkan setelah
5 detik.

Example
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()" />
</form>
</body>
</html>

Contoh - Infinite Loop


Untuk mendapatkan timer untuk bekerja di loop tak terbatas, kita harus menulis fungsi yang
memanggil dirinya sendiri.

Pada contoh di bawah ini, ketika sebuah tombol diklik, lapangan input akan mulai menghitung
(selama-lamanya), dimulai dari 0.

Perhatikan bahwa kita juga memiliki fungsi yang memeriksa apakah timer sudah berjalan, untuk
menghindari pembuatan timer tambahan, jika tombol ditekan lebih dari sekali:

Example
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>

The clearTimeout() Method


Syntax
clearTimeout(setTimeout_variable)

Contoh

Contoh di bawah ini adalah sama dengan "Infinite Loop" contoh di atas. Satu-satunya perbedaan
adalah bahwa kita sekarang menambahkan "Berhenti Count!" tombol yang menghentikan waktu:

Example
Example
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>

39. JavaScript Create Your Own Objects

JavaScript Objects

Sebelumnya dalam tutorial ini kita telah melihat bahwa JavaScript memiliki beberapa built-in
objek, seperti String, Tanggal, Array, dan banyak lagi. Selain built-in ini objek, Anda juga dapat
membuat Anda sendiri.

Sebuah objek hanya jenis data khusus, dengan koleksi properti dan metode.

Mari kita mengilustrasikan dengan sebuah contoh: Seseorang adalah obyek. Properties adalah
nilai-nilai yang berhubungan dengan objek. Orang-orang 'properti cantumkan nama, tinggi, berat
badan, usia, warna kulit, warna mata, dan lain-lain Semua orang memiliki sifat ini, tetapi nilai-nilai
dari properti-properti tersebut akan berbeda dari orang ke orang. Objek juga memiliki metode.
Metode adalah tindakan yang dapat dilakukan pada objek. Orang-orang 'metode dapat makan (),
tidur (), bekerja (), main (), dll
Properties
The syntax for accessing a property of an object is:
objName.propName

Anda dapat menambahkan properti untuk sebuah benda dengan hanya memberi nilai.
Asumsikan bahwa personObj sudah ada - Anda dapat memberikannya properti bernama nama
depan, nama belakang, usia, dan eyecolor sebagai berikut:

personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";

document.write(personObj.firstname);

Kode di atas akan menghasilkan output sebagai berikut:

John

Metode

Sebuah objek dapat juga berisi metode.

Anda dapat memanggil metode dengan sintaks berikut:

objName.methodName()

Catatan: Parameter yang dibutuhkan untuk metode dapat ditularkan di antara tanda kurung.

Untuk memanggil metode yang disebut tidur () untuk personObj:

personObj.sleep();

Creating Your Own Objects

Ada berbagai cara untuk membuat objek baru:

1. Buat contoh langsung dari sebuah objek

Kode berikut membuat sebuah instance dari sebuah objek dan menambahkan empat properti
untuk itu:

personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";

Menambahkan sebuah metode ke personObj juga sederhana. Kode berikut menambahkan


metode yang disebut makan () ke personObj:

personObj.eat=eat;

2. Buat sebuah template dari sebuah objek


Template mendefinisikan struktur suatu objek:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

Perhatikan bahwa template adalah sebuah fungsi. Di dalam fungsi yang Anda butuhkan untuk
menetapkan hal-hal this.propertyName. Alasan untuk semua yang "ini" barang adalah bahwa
Anda akan memiliki lebih dari satu orang pada satu waktu (yang orang yang Anda sedang
berhadapan dengan harus jelas). Itulah yang "ini" adalah: turunan dari objek di tangan.

Setelah Anda memiliki template, Anda dapat membuat instance baru dari objek, seperti ini:

myFather=new person("John","Doe",50,"blue"); myMother=new


person("Sally","Rally",48,"green");

Anda juga dapat menambahkan beberapa metode untuk orang objek. Hal ini juga dilakukan di
dalam template:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.newlastname=newlastname;
}

Perhatikan bahwa fungsi metode hanya melekat pada objek. Kemudian kita harus menulis
newlastname () function:

function newlastname(new_lastname)
{
this.lastname=new_lastname;
}

The newlastname () fungsi orang tersebut mendefinisikan nama belakang baru dan memberikan
itu kepada orang. JavaScript orang tahu yang sedang Anda bicarakan dengan menggunakan
"ini.". Jadi, sekarang Anda dapat menulis: myMother.newlastname ( "Doe").

39. You Have Learned JavaScript, Now What?

Ringkasan JavaScript

Tutorial ini mengajarkan anda bagaimana menambahkan JavaScript untuk halaman HTML Anda,
untuk membuat situs web anda lebih dinamis dan interaktif.

Anda telah belajar bagaimana untuk membuat tanggapan atas peristiwa, memvalidasi bentuk dan
bagaimana membuat skrip yang berbeda berjalan dalam menanggapi skenario yang berbeda.

Anda juga telah belajar bagaimana untuk membuat dan menggunakan objek, dan bagaimana
menggunakan JavaScript built-in obyek.

Untuk informasi lebih lanjut tentang JavaScript, silahkan lihat JavaScript contoh dan referensi
JavaScript.

Now You Know JavaScript, What's Next?

Langkah selanjutnya adalah belajar tentang DOM HTML dan DHTML.

Jika Anda ingin belajar tentang server-side scripting, langkah berikutnya adalah untuk belajar
ASP.

HTML DOM

HTML DOM mendefinisikan sebuah cara standar untuk mengakses dan memanipulasi dokumen
HTML.

HTML DOM adalah platform dan bahasa yang independen dan dapat digunakan oleh bahasa
pemrograman seperti Java, JavaScript, dan VBScript.

Jika Anda ingin mempelajari lebih lanjut tentang DOM, silahkan kunjungi tutorial HTML DOM.

DHTML

DHTML merupakan kombinasi dari HTML, CSS, dan JavaScript. DHTML digunakan untuk
membuat dinamis dan interaktif situs Web.

W3C pernah berkata: "Dynamic HTML adalah istilah yang digunakan oleh beberapa vendor untuk
menggambarkan kombinasi dari HTML, style sheet dan skrip yang memungkinkan dokumen agar
animasi."

Jika Anda ingin belajar lebih banyak tentang DHTML, silahkan kunjungi tutorial DHTML.

ASP

Sementara skrip dalam file HTML dijalankan pada client (di browser), script dalam file ASP
dijalankan di server.

Dengan ASP secara dinamis, Anda dapat mengedit, merubah atau menambahkan konten
halaman Web, menanggapi data yang diajukan dari form HTML, akses data atau database dan
mengembalikan hasil ke browser, menyesuaikan halaman Web untuk membuatnya lebih
bermanfaat untuk pengguna individual .

Karena file ASP dikembalikan sebagai HTML, mereka dapat dilihat pada browser.

Jika Anda ingin mempelajari lebih lanjut tentang ASP, silahkan kunjungi tutorial ASP.

W3Schools 'Online Certification Program

Solusi sempurna untuk profesional yang membutuhkan untuk menyeimbangkan kerja, keluarga,
dan pembinaan karier.

Lebih dari 4.000 sertifikat yang telah diterbitkan!

Sertifikat dokumen HTML pengetahuan Anda tentang HTML, XHTML, dan CSS.
Dokumen Sertifikat JavaScript pengetahuan Anda tentang JavaScript dan HTML DOM.

Dokumen Sertifikat XML pengetahuan Anda tentang XML, XML DOM dan XSLT.

Dokumen Sertifikat ASP pengetahuan Anda tentang ASP, SQL, dan ADO.

Dokumen Sertifikat PHP pengetahuan Anda tentang PHP dan SQL (MySQL).

40. JavaScript Examples

Basic JavaScript Examples

Menulis teks dengan JavaScript


Menulis tag HTML dengan JavaScript
JavaScript dalam bagian body
JavaScript di bagian kepala
JavaScript eksternal

JavaScript Statements, Comments and Blocks

Pernyataan JavaScript.
JavaScript blok.
Satu baris komentar.
Beberapa baris komentar.
Satu baris komentar untuk mencegah eksekusi.
Beberapa baris komentar untuk mencegah eksekusi.

JavaScript Variables

Mendeklarasikan variabel, menetapkan nilai, dan menampilkan itu

JavaScript Conditional If ... Else

Jika pernyataan
Jika ... lain pernyataan
Link acak
Pernyataan Switch

JavaScript Popup Boxes

Alert box
Alert kotak dengan jeda baris
Kotak Konfirmasi
Pembisik

JavaScript Functions

Memanggil fungsi
Fungsi dengan argumen
Fungsi dengan argumen 2
Fungsi yang mengembalikan nilai
Fungsi dengan argumen, yang mengembalikan sebuah nilai

JavaScript Loops
Untuk loop
Looping melalui header HTML
Sementara loop
Do While loop
Break loop
Istirahat dan melanjutkan loop
Gunakan untuk ... di pernyataan untuk loop melalui elemen-elemen array

JavaScript Error Handling

... Yang mencoba menangkap pernyataan


... Yang mencoba menangkap pernyataan dengan sebuah kotak konfirmasi
The onError event

Advanced JavaScript Examples

Mendeteksi browser pengunjung dan versi browser


Lebih lanjut tentang browser pengunjung
Semua rincian tentang browser pengunjung
Waspada pengguna, tergantung pada browser
Buat kue welcome
Tombol animasi
Gambar peta dengan menambahkan JavaScript
Sederhana waktu
Lain waktu sederhana
Waktu peristiwa dalam loop tak terbatas
Waktu peristiwa dalam loop tak terbatas - dengan tombol Stop
Sebuah jam dibuat dengan waktu acara
Buat contoh langsung dari sebuah objek
Buat template untuk sebuah objek

41. JavaScript Objects Examples

Contoh menggunakan built-in JavaScript objek.

String Object

Mengembalikan panjang string


Style string
Mengembalikan posisi kejadian pertama sebuah teks dalam sebuah string - indexOf ()
Mencari teks di dalam string dan mengembalikan teks jika ditemukan - match ()
Ganti karakter dalam string - menggantikannya ()

Lebih String contoh objek di referensi JavaScript.

Date Object

Gunakan Tanggal () untuk kembali hari ini tanggal dan waktu


Gunakan getTime () untuk menghitung tahun sejak 1970
Gunakan setFullYear () untuk menetapkan tanggal tertentu
Gunakan toUTCString () untuk mengubah tanggal hari ini (menurut UTC) ke string
Gunakan getDay () dan sebuah array untuk menulis hari kerja, dan bukan hanya sejumlah
Menampilkan jam
Lebih Tanggal objek contoh di referensi JavaScript.

Array Object

Buat sebuah array


Gunakan untuk ... di pernyataan untuk loop melalui elemen-elemen array
Gabung dua array - concat ()
Masukkan elemen array menjadi sebuah string - gabung ()
Literal array - sort ()
Numeric array - sort ()

Lebih Array contoh objek di referensi JavaScript.

Boolean Object

Periksa nilai Boolean

Lebih objek Boolean contoh di referensi JavaScript.

Math Object

Gunakan bulat () untuk mengumpulkan sejumlah


Gunakan acak () untuk mengembalikan nomor acak antara 0 dan 1
Gunakan max () untuk mengembalikan nomor dengan nilai tertinggi dari dua nomor tertentu
Menggunakan min () untuk mengembalikan nomor dengan nilai terendah dari dua nomor tertentu
Convert Celsius ke Fahrenheit

Objek Matematika lagi contoh-contoh di referensi JavaScript.

42. JavaScript HTML DOM Examples

Contoh menggunakan JavaScript untuk mengakses dan memanipulasi objek HTML DOM.

Anchor Object

Ubah teks, URL, dan atribut target dari link


Menggunakan fokus () dan kabur ()
Tambahkan Accesskey ke link

Document Object

Menulis teks ke output


Menulis teks dengan format untuk output
Kembali judul sebuah dokumen
Mengembalikan dokumen URL
Kembali pengarah dokumen
Mengembalikan nama domain server dokumen
Gunakan getElementById ()
Gunakan getElementsByName ()
Buka dokumen baru, tentukan tipe MIME dan menambahkan beberapa teks
Mengembalikan jumlah jangkar dalam dokumen
Mengembalikan innerHTML jangkar pertama dalam sebuah dokumen
Menghitung jumlah bentuk-bentuk dalam dokumen
Mengakses item dalam koleksi
Menghitung jumlah gambar dalam sebuah dokumen
Event Object

Which mouse button was clicked?


What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which element was clicked?
Which event type occurred?

Form and Form Input Objects

Melihat dan mengubah URL tindakan bentuk


Melihat metode yang akan digunakan bila mengirim data formulir
Waspada id, jenis, dan nilai dari sebuah objek Button menonaktifkan tombol +
Periksa dan hapus centang kotak centang
Kotak centang dalam bentuk
Checkbox - Jika pengguna mengklik pada kotak centang, isi kolom teks dikonversi ke huruf
besar.
Radio button
Reset bentuk
Kirim formulir
Validasi Form
Tetapkan fokus ke field input ketika halaman load
Pilih isi sebuah field input
Daftar dropdown dalam bentuk
Daftar dropdown lain
Sebuah menu dropdown
Langsung ke lapangan berikutnya ketika MaxLength lapangan saat ini sudah tercapai
Tambahkan accessKeys untuk membentuk bidang

Frame, Frameset, and IFrame Objects

Resizable dan tidak resizable frame


Bingkai dengan dan tanpa scrollbars
Mengubah sumber / URL dari dua bingkai
Keluar dari bingkai
Update dua iframes

Image Object

Mengubah tinggi dan lebar dari suatu gambar


Ubah src dari suatu gambar

Location Object

Kirim klien ke lokasi yang baru / URL


Reload halaman
Keluar dari bingkai
Jangkar array - Contoh ini membuka dua jendela. Jendela pertama berisi empat tombol dan
jendela kedua mendefinisikan empat jangkar 0-3. Ketika tombol diklik pada jendela pertama,
yang onclick event handler pergi ke jangkar yang ditentukan dalam jendela kedua.
Navigator Object

Kirim klien ke lokasi yang baru / URL


Reload halaman
Keluar dari bingkai
Jangkar array - Contoh ini membuka dua jendela. Jendela pertama berisi empat tombol dan
jendela kedua mendefinisikan empat jangkar 0-3. Ketika tombol diklik pada jendela pertama,
yang onclick event handler pergi ke jangkar yang ditentukan dalam jendela kedua.

Option and Select Objects

Menonaktifkan dan mengaktifkan dropdown list


Dapatkan id dari formulir yang berisi daftar dropdown
Dapatkan jumlah pilihan dalam dropdown list
Mengubah daftar dropdown ke daftar multiline
Memilih beberapa pilihan dalam daftar dropdown
Alert opsi yang dipilih dalam sebuah daftar dropdown
Alert indeks opsi yang dipilih dalam sebuah daftar dropdown
Mengubah teks pilihan yang dipilih
Hapus pilihan dari daftar dropdown

Screen Object

Mendeteksi rincian tentang klien layar

Table, TableHeader, TableRow, TableData Objects

Mengubah lebar tabel perbatasan


Ubah cellpadding dan cellspacing dari meja
Tentukan frame dari sebuah tabel
Tentukan aturan untuk tabel
InnerHTML dari deretan
InnerHTML sel
Buat keterangan untuk meja
Hapus baris dalam tabel
Tambahkan baris ke sebuah meja
Sel Tambahkan ke sebuah baris tabel
Align isi sel dalam baris tabel
Align vertikal isi sel dalam baris tabel
Align isi sel dalam satu sel
Align vertikal isi sel dalam satu sel
Mengubah isi sebuah sel tabel
Ubah colspan dari sebuah baris tabel

Window Object

Menampilkan kotak peringatan


Alert kotak dengan garis-break
Menampilkan kotak konfirmasi
Menampilkan kotak prompt
Buka jendela baru ketika mengklik tombol
Buka jendela baru dan mengontrol tampilan
Buka beberapa jendela dengan satu klik
Kirim klien ke lokasi yang baru / URL
Reload halaman
Menulis beberapa teks dalam bar status jendela
Cetak halaman
Keluar dari bingkai
Resize jendela
Ubah ukuran jendela ke ukuran tertentu
Gulir jendela
Gulir jendela ke posisi tertentu
Sederhana waktu
Lain waktu sederhana
Waktu peristiwa dalam loop tak terbatas
Waktu peristiwa dalam loop tak terbatas - dengan tombol Stop
Sebuah jam dibuat dengan waktu acara
Buat pop-up

You might also like