Variabel adalah sebuah tempat yang digunakan untuk menyimpan informasi atau data kita. Sebuah variabel nilainya dapat berubah – ubah di dalam script. kita dapat merujuk kepada nama dari variabel tersebut untuk sekedar melihat nilainya atau untuk mengubahnya.
Aturan dalam pemberian nama sebuah variabel :
1.varibel dalam javascript bersifat case-sensitive artinya varibel nama berbeda dengan variabel naMa
2.harus diawali dengan huruf atau underscore, conoth : nama,_nama, umur2, usia_kita dan lain – lain
Mendeklarasikan variabel
kita dapat membuat variabel baru dengan pernyataan var atau tidak :
var nama = “ahmad”; dapat juga dideklarasikan secara langsung nama = “ahmad”;
pada pernyataan diatas selain mendeklarasikan variabel kita juga telah memberinya sebuah nilai dengan menggunakan tkita “ = “, kita juga dapat mendeklarasikan variabel tanpa memberinya nilai seperti var nama;
Mengenal variabel global dan variabel local
1.Variabel global adalah variabel yang dikenal dan dapat diakses diseluruh halaman, untuk mendeklarasikan sebagai variabel global, maka kita harus mendeklarasikannya diluar fungsi
2.Variabel local adalah variabel yang dikenal dan dapat diakses hanya didalam fungsi dimana ia dideklarasikan
Perhatikan contoh dibawah ini, khususnya file fungsi2.js
Contoh penggunaan variabel global dan local
File contoh4.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="fungsi2.js"></script>
<body>
<h4><center>Mengenal variabel global dan variabel local </center></h4>
<script>
document.write("memberi nilai panjang (var global) dengan nilai 20 ==> set_panjang(20)<br>");
set_panjang(20);
document.write("memberi nilai lebar (var global) dengan nilai 10 ==> set_panjang(10)<br>");
set_lebar(10);
document.write("menghitung luas dengan menggunakan variabel panjang dan lebar yang dideklarasikan ulang tanpa nilai"+"<br> sehingga menjadi variabel local<br>");
hasil = cari_luas();
document.write(hasil+"<br>");
document.write("menghitung luas dengan menggunakan variabel global yang telah diset dengan perintah set_panjang(20) dan set_lebar(10)<br>");
hasil_asli = cari_luas2();
document.write(hasil_asli+"<br>");
</script>
</body>
</html>
file fungsi2.js
//variabel global
var luas;
var panjang;
var lebar;
function set_panjang(x){
panjang = x;
}
function set_lebar(y){
lebar = y;
}
function cari_luas(){
//menggunakan variabel local
var panjang;
var lebar;
//luas merupakan variabel global
luas = panjang * lebar;
return luas;
}
function cari_luas2(){
//menggunakan variabel global
luas = panjang * lebar;
return luas;
}
10 Agustus 2010
Variabel dalam javascript
Variabel adalah sebuah tempat yang digunakan untuk menyimpan informasi atau data kita. Sebuah variabel nilainya dapat berubah – ubah di dalam script. kita dapat merujuk kepada nama dari variabel tersebut untuk sekedar melihat nilainya atau untuk mengubahnya.
Aturan dalam pemberian nama sebuah variabel :
1.varibel dalam javascript bersifat case-sensitive artinya varibel nama berbeda dengan variabel naMa
2.harus diawali dengan huruf atau underscore, conoth : nama,_nama, umur2, usia_kita dan lain – lain
Mendeklarasikan variabel
kita dapat membuat variabel baru dengan pernyataan var atau tidak :
var nama = “ahmad”; dapat juga dideklarasikan secara langsung nama = “ahmad”;
pada pernyataan diatas selain mendeklarasikan variabel kita juga telah memberinya sebuah nilai dengan menggunakan tkita “ = “, kita juga dapat mendeklarasikan variabel tanpa memberinya nilai seperti var nama;
Mengenal variabel global dan variabel local
1.Variabel global adalah variabel yang dikenal dan dapat diakses diseluruh halaman, untuk mendeklarasikan sebagai variabel global, maka kita harus mendeklarasikannya diluar fungsi
2.Variabel local adalah variabel yang dikenal dan dapat diakses hanya didalam fungsi dimana ia dideklarasikan
Perhatikan contoh dibawah ini, khususnya file fungsi2.js
Contoh penggunaan variabel global dan local
File contoh4.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="fungsi2.js"></script>
<body>
<h4><center>Mengenal variabel global dan variabel local </center></h4>
<script>
document.write("memberi nilai panjang (var global) dengan nilai 20 ==> set_panjang(20)<br>");
set_panjang(20);
document.write("memberi nilai lebar (var global) dengan nilai 10 ==> set_panjang(10)<br>");
set_lebar(10);
document.write("menghitung luas dengan menggunakan variabel panjang dan lebar yang dideklarasikan ulang tanpa nilai"+"<br> sehingga menjadi variabel local<br>");
hasil = cari_luas();
document.write(hasil+"<br>");
document.write("menghitung luas dengan menggunakan variabel global yang telah diset dengan perintah set_panjang(20) dan set_lebar(10)<br>");
hasil_asli = cari_luas2();
document.write(hasil_asli+"<br>");
</script>
</body>
</html>
file fungsi2.js
//variabel global
var luas;
var panjang;
var lebar;
function set_panjang(x){
panjang = x;
}
function set_lebar(y){
lebar = y;
}
function cari_luas(){
//menggunakan variabel local
var panjang;
var lebar;
//luas merupakan variabel global
luas = panjang * lebar;
return luas;
}
function cari_luas2(){
//menggunakan variabel global
luas = panjang * lebar;
return luas;
}
Aturan dalam pemberian nama sebuah variabel :
1.varibel dalam javascript bersifat case-sensitive artinya varibel nama berbeda dengan variabel naMa
2.harus diawali dengan huruf atau underscore, conoth : nama,_nama, umur2, usia_kita dan lain – lain
Mendeklarasikan variabel
kita dapat membuat variabel baru dengan pernyataan var atau tidak :
var nama = “ahmad”; dapat juga dideklarasikan secara langsung nama = “ahmad”;
pada pernyataan diatas selain mendeklarasikan variabel kita juga telah memberinya sebuah nilai dengan menggunakan tkita “ = “, kita juga dapat mendeklarasikan variabel tanpa memberinya nilai seperti var nama;
Mengenal variabel global dan variabel local
1.Variabel global adalah variabel yang dikenal dan dapat diakses diseluruh halaman, untuk mendeklarasikan sebagai variabel global, maka kita harus mendeklarasikannya diluar fungsi
2.Variabel local adalah variabel yang dikenal dan dapat diakses hanya didalam fungsi dimana ia dideklarasikan
Perhatikan contoh dibawah ini, khususnya file fungsi2.js
Contoh penggunaan variabel global dan local
File contoh4.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="fungsi2.js"></script>
<body>
<h4><center>Mengenal variabel global dan variabel local </center></h4>
<script>
document.write("memberi nilai panjang (var global) dengan nilai 20 ==> set_panjang(20)<br>");
set_panjang(20);
document.write("memberi nilai lebar (var global) dengan nilai 10 ==> set_panjang(10)<br>");
set_lebar(10);
document.write("menghitung luas dengan menggunakan variabel panjang dan lebar yang dideklarasikan ulang tanpa nilai"+"<br> sehingga menjadi variabel local<br>");
hasil = cari_luas();
document.write(hasil+"<br>");
document.write("menghitung luas dengan menggunakan variabel global yang telah diset dengan perintah set_panjang(20) dan set_lebar(10)<br>");
hasil_asli = cari_luas2();
document.write(hasil_asli+"<br>");
</script>
</body>
</html>
file fungsi2.js
//variabel global
var luas;
var panjang;
var lebar;
function set_panjang(x){
panjang = x;
}
function set_lebar(y){
lebar = y;
}
function cari_luas(){
//menggunakan variabel local
var panjang;
var lebar;
//luas merupakan variabel global
luas = panjang * lebar;
return luas;
}
function cari_luas2(){
//menggunakan variabel global
luas = panjang * lebar;
return luas;
}
9 Agustus 2010
Menggunakan file javascript external
Kita dapat meletakkan kode javascript kita dalam file tersendiri ( terpisah dari file html ), sehingga kita dapat menggunakannya berulang kali pada beberapa file html yang lain. Biasanya file external tersebut berisi kumpulan dari fungsi – fungsi yang akan dibutuhkan. Beberapa hal yang perlu diperhatikan adalah :
1.cara pemanggilan file external javascript adalah <script src=”file_external.js”></script> biasanya ditulis didalam tag <head>
2.file external javascript harus berextensi .js
3.dalam file external javascript tidak diperlukan lagi tag <script>
contoh penulisannya adalah
Kedua file fungsi.js dan contoh3.html adalah hasil pemisahan dari file contoh1.html
File fungsi.js
function tampilkan_nama(id_element){
//deklarasi variabel kumpulan_nama sebagai array
var kumpulan_nama= Array("Ahmad","Afandi","Dedi","Auliya","Habib","Darmaji","Aini","Inayah","ida","Kurniawan","Huda");
var waktu = new Date(); /*membuat objek Date() digunakan untuk mengambil nilai waktu sekarang */
var detik = waktu.getSeconds(); /*method getSeconds() untuk mengambil nilai detik saat ini */
var index = detik % kumpulan_nama.length; /* menghasilkan sisa bagi antara variabel detik dan panjang array kumpulan_nama */
var nama_yang_tampil = kumpulan_nama[index]; /* menentukan nama yang akan
ditampilkan berdasarkan nilai index */
var obj = document.getElementById(id_element); /* mengambil element HTML yang memiliki id = id_element */
obj.innerHTML = nama_yang_tampil; //mengganti nilai dari element HTML
}
File contoh3.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="fungsi.js"></script>
</head>
<body>
<h1>Bismillahirrohmaanirrohiim</h1>
<h3>Tulisan dibawah ini ditulis dengan menggunakan javascript</h3>
<q>Ini adalah sedikit contoh dari kemampuan javascript</q><br />
<b><i>Letakkan mouse kita diatas element yang berwarna ungu dan perhatikan apa yang terjadi</i></b>
<div id="nama_saya" style="background-color:#dd23ff; width:100px; height:20px;font-weight:bold;font-style:italic;"
onmouseover="javascript:alert('ini adalah respon dari sebuah event\n'+'nama saya adalah : '+ this.innerHTML)"></div>
<script>
setInterval("tampilkan_nama('nama_saya')",1000);
</script>
</body>
</html>
Lihat Demo
1.cara pemanggilan file external javascript adalah <script src=”file_external.js”></script> biasanya ditulis didalam tag <head>
2.file external javascript harus berextensi .js
3.dalam file external javascript tidak diperlukan lagi tag <script>
contoh penulisannya adalah
Kedua file fungsi.js dan contoh3.html adalah hasil pemisahan dari file contoh1.html
File fungsi.js
function tampilkan_nama(id_element){
//deklarasi variabel kumpulan_nama sebagai array
var kumpulan_nama= Array("Ahmad","Afandi","Dedi","Auliya","Habib","Darmaji","Aini","Inayah","ida","Kurniawan","Huda");
var waktu = new Date(); /*membuat objek Date() digunakan untuk mengambil nilai waktu sekarang */
var detik = waktu.getSeconds(); /*method getSeconds() untuk mengambil nilai detik saat ini */
var index = detik % kumpulan_nama.length; /* menghasilkan sisa bagi antara variabel detik dan panjang array kumpulan_nama */
var nama_yang_tampil = kumpulan_nama[index]; /* menentukan nama yang akan
ditampilkan berdasarkan nilai index */
var obj = document.getElementById(id_element); /* mengambil element HTML yang memiliki id = id_element */
obj.innerHTML = nama_yang_tampil; //mengganti nilai dari element HTML
}
File contoh3.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.18" />
<script type="text/javascript" src="fungsi.js"></script>
</head>
<body>
<h1>Bismillahirrohmaanirrohiim</h1>
<h3>Tulisan dibawah ini ditulis dengan menggunakan javascript</h3>
<q>Ini adalah sedikit contoh dari kemampuan javascript</q><br />
<b><i>Letakkan mouse kita diatas element yang berwarna ungu dan perhatikan apa yang terjadi</i></b>
<div id="nama_saya" style="background-color:#dd23ff; width:100px; height:20px;font-weight:bold;font-style:italic;"
onmouseover="javascript:alert('ini adalah respon dari sebuah event\n'+'nama saya adalah : '+ this.innerHTML)"></div>
<script>
setInterval("tampilkan_nama('nama_saya')",1000);
</script>
</body>
</html>
Lihat Demo
5 Agustus 2010
Bagaimana Menangani Browser Lama
Javascript telah didukung oleh hampir seluruh browser modern, namun jika pengunjung web kita menggunakan browser yang versi lama ada kemungkinan browser tersebut tidak mendukung javascript, oleh karena itu agar browser lama tersebut tidak salah dalam mengartikan kode javascript yang kita tulis maka ada baiknya kita melakukan hal berikut ini :
“ tulis kode javascript didalam tag komentar html “
contoh penulisannya :
<script type=”text/javascript”>
<!-- ==> ini tag pembuka komentar untuk html
document.write(“ini tidak akan tampil bila browser tidak mendukung javascript”);
//--> ==> ini tag penutup komentar untuk html
</script>
dengan menggunakan cara diatas, bila browser tidak mendukung javascript maka kode javascript tersebut akan dianggap sebagai komentar dan tidak akan ditampilkan di halaman web kita. Tanda // sebelum akhir tag komentar html dituliskan agar kode --> tidak dieksekusi oleh browser yang mendukung javascript.
“ tulis kode javascript didalam tag komentar html “
contoh penulisannya :
<script type=”text/javascript”>
<!-- ==> ini tag pembuka komentar untuk html
document.write(“ini tidak akan tampil bila browser tidak mendukung javascript”);
//--> ==> ini tag penutup komentar untuk html
</script>
dengan menggunakan cara diatas, bila browser tidak mendukung javascript maka kode javascript tersebut akan dianggap sebagai komentar dan tidak akan ditampilkan di halaman web kita. Tanda // sebelum akhir tag komentar html dituliskan agar kode --> tidak dieksekusi oleh browser yang mendukung javascript.
Menyisipkan kode javascript di HTML
Untuk menyisipkan kode javascript ke dalam HTML, kita dapat meletakkannya didalam tag <head> atau tag <body>. Berikut ini sebuah contoh sederhana cara penyisipan kode javascript ke dalam kode html.
<html>
<head>
<title>Hanya sebuah contoh</title>
<script type="text/javascript">
document.write("ini ditulis didalam tag <head>");
</script>
</head>
<body>
<br />
<script type="text/javascript">
document.write("ini ditulis didalam tag <body>");
</script>
</body>
</html>
akan menghasilkan output :
ini ditulis didalam tag <head>
ini ditulis didalam tag <body>
dari kode diatas beberapa hal yang perlu diperhatikan adalah :
1.kode javascript selalu ditulis didalam tag <script></script>
2.seperti halnya dalam C++ dan java, statemen harus sebaiknya dengan titik koma ( ; ).
setelah melihat contoh diatas, mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag <head> atau <body>. Kita dapat meletakkan kode javascript didalam tag <head> bila kita membuat fungsi yang akan dipanggil di tag <body>. Sedangkan kita dapat menuliskan kode javascript di dalam tag <body> ketika kita akan memanggil fungsi yang telah kita definisikan di dalam tag <head> atau dari file external javascript.
<html>
<head>
<title>Hanya sebuah contoh</title>
<script type="text/javascript">
document.write("ini ditulis didalam tag <head>");
</script>
</head>
<body>
<br />
<script type="text/javascript">
document.write("ini ditulis didalam tag <body>");
</script>
</body>
</html>
akan menghasilkan output :
ini ditulis didalam tag <head>
ini ditulis didalam tag <body>
dari kode diatas beberapa hal yang perlu diperhatikan adalah :
1.kode javascript selalu ditulis didalam tag <script></script>
2.seperti halnya dalam C++ dan java, statemen harus sebaiknya dengan titik koma ( ; ).
setelah melihat contoh diatas, mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag <head> atau <body>. Kita dapat meletakkan kode javascript didalam tag <head> bila kita membuat fungsi yang akan dipanggil di tag <body>. Sedangkan kita dapat menuliskan kode javascript di dalam tag <body> ketika kita akan memanggil fungsi yang telah kita definisikan di dalam tag <head> atau dari file external javascript.
Langganan:
Postingan (Atom)