Professional Documents
Culture Documents
1. JAVA HOME
JavaScript adalah bahasa scripting THE dari Web.
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.
* HTML / XHTML
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 + +.
* 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
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.
<script> Tag HTML digunakan untuk menyisipkan 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
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.
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>
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>
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.
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>
JavaScript adalah suatu urutan pernyataan yang akan dijalankan oleh browser.
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
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
Blok mulai dengan keriting kiri Braket (, dan berakhir dengan hak keriting Braket).
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.
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.
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>
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>
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>
<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write " Dolly!"
</script>
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.
* 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
Contoh
Sebuah nilai variabel dapat berubah selama eksekusi sebuah naskah. Anda dapat merujuk ke
variabel dengan nama untuk menampilkan atau mengubah nilainya.
Membuat variabel pada JavaScript yang paling sering disebut sebagai "menyatakan" variabel.
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.
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";
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.
y=5;
z=2;
x=y+z;
Operator aritmatika digunakan untuk melakukan aritmatika antara variabel-variabel dan / atau
nilai-nilai.
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;
Setelah pelaksanaan pernyataan di atas, variabel txt3 berisi:
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);
Perbandingan dan Logical operator digunakan untuk menguji benar atau salah.
Operator Perbandingan
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.
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".
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.
* 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
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.
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
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.
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>
</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>
</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>
</body>
</html>
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>.
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.
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>
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.
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.
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>
Loop mengeksekusi blok kode nomor tertentu kali, atau saat kondisi tertentu adalah benar.
Syntax
while (var<=endvalue)
{
code to be executed
}
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 ... 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>
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 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
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>
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
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!".
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:
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:
Di bawah ini adalah contoh dari suatu peristiwa onMouseOver. Kotak peringatan muncul ketika
sebuah event onMouseOver terdeteksi:
Try ..catch statement memungkinkan Anda untuk menguji blok kode untuk kesalahan.
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 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 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.
Syntax
throw(exception)
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>
Dalam JavaScript anda dapat menambahkan karakter khusus ke teks string dengan
menggunakan tanda garis miring terbalik.
The backslash (\) digunakan untuk menyisipkan apostrof, baris baru, harga, dan karakter khusus
lainnya menjadi string teks.
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:
JavaScript sekarang akan output string teks yang tepat: Kita adalah apa yang disebut "Viking"
dari utara.
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
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";
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!");
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
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>
12
Methods
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>
HELLO WORLD!
The String object digunakan untuk memanipulasi yang disimpan sepotong teks.
Style string
Bagaimana gaya string.
Pertandingan () method
Cara menggunakan pertandingan () metode untuk mencari nilai string tertentu dalam sebuah
string dan mengembalikan nilai string jika ditemukan
Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek String, pergi ke lengkap kita referensi obyek String.
String object
Contoh-contoh penggunaannya:
Contoh berikut menggunakan properti panjang dari objek String untuk menemukan panjang
string:
12
Contoh berikut menggunakan toUpperCase () method dari objek String untuk mengkonversi
string ke huruf besar:
Date Object yang digunakan untuk bekerja dengan tanggal dan waktu.
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.
Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek Tanggal, pergi ke Tanggal lengkap kita referensi obyek.
Tanggal objek yang digunakan untuk bekerja dengan tanggal dan waktu.
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):
Dan dalam contoh berikut, kita menetapkan Tanggal benda menjadi 5 hari ke depan:
Catatan: Jika menambahkan lima hari untuk menggeser tanggal bulan atau tahun, perubahan
ditangani secara otomatis oleh objek Tanggal sendiri!
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}
Array Object yang digunakan untuk menyimpan beberapa nilai dalam satu variabel.
Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
Array objek, pergi ke Array lengkap kita referensi obyek.
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
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.
document.write(myCars[0]);
Saab
To modify a value in an existing array, just add a new value to the array with a specified index
number:
myCars[0]="Opel";
Opel
Objek yang Boolean digunakan untuk mengkonversi nilai non-Boolean ke sebuah nilai boolean
(true atau false).
atau referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan objek
Boolean, pergi ke Boolean lengkap kita referensi obyek.
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:
Dan semua baris kode berikut membuat objek Boolean dengan nilai awal yang benar:
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.
Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek Math, pergi ke Math lengkap kita referensi obyek.
Math Object
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.
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));
Contoh berikut menggunakan acak () method dari objek Math untuk kembali nomor acak antara 0
dan 1:
document.write(Math.random());
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));
What is RegExp
Ketika Anda mencari di dalam teks, Anda dapat menggunakan pola untuk menggambarkan apa
yang Anda cari. Regexp IS pola ini.
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
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"
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");
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");
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:
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
When you search in a text, you can use a pattern to describe what you are searching for.
RegExp IS this pattern.
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
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 test() method searches a string for a specified value. Returns true or false
Example
var patt1=new RegExp("e");
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");
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:
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 () dapat mengubah pola pencarian baik, dan menambahkan atau menghapus
parameter kedua.
Example
var patt1=new RegExp("e");
patt1.compile("d");
Karena ada "e" dalam string, tetapi bukan "d", output dari kode di atas akan:
truefalse
Untuk referensi yang lengkap dari semua properti dan metode yang dapat digunakan dengan
objek regexp, pergi ke regexp lengkap kita referensi obyek.
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 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.
Objek Navigator berisi semua informasi tentang browser pengunjung. Kita akan melihat dua sifat
objek Navigator:
Example
<html>
<body>
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
</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>
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
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);
}
}
}
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>
JavaScript dapat digunakan untuk memvalidasi data dalam bentuk HTML sebelum mengirim dari
konten ke server.
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;
}
}
}
<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;}
}
}
<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>
JavaScript 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.
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.
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>
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.
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" />
<p id="desc"></p>
</body>
</html>
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:
Catatan: setTimeout () dan clearTimeout () adalah metode baik DOM HTML objek Window.
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.
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>
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>
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>
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);
John
Metode
objName.methodName()
Catatan: Parameter yang dibutuhkan untuk metode dapat ditularkan di antara tanda kurung.
personObj.sleep();
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";
personObj.eat=eat;
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:
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").
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.
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.
Solusi sempurna untuk profesional yang membutuhkan untuk menyeimbangkan kerja, keluarga,
dan pembinaan karier.
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).
Pernyataan JavaScript.
JavaScript blok.
Satu baris komentar.
Beberapa baris komentar.
Satu baris komentar untuk mencegah eksekusi.
Beberapa baris komentar untuk mencegah eksekusi.
JavaScript Variables
Jika pernyataan
Jika ... lain pernyataan
Link acak
Pernyataan Switch
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
String Object
Date Object
Array Object
Boolean Object
Math Object
Contoh menggunakan JavaScript untuk mengakses dan memanipulasi objek HTML DOM.
Anchor Object
Document Object
Image Object
Location Object
Screen Object
Window Object