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.
30 Juli 2010
Pengenalan javascipt ( seri 1 )
Tutorial Javascript Untuk Pemula
Apa itu javascript
Java script adalah sebuah bahasa pemrograman yang dikhususkan untuk dunia web. Javascript telah digunakan dalam ribuan halaman web untuk memperbaiki design,
melakukan validasi form, mengenali browser, membuat cookies dan masih banyak lagi lainnya.
Dan satu hal yang sangat menarikadalah ternyata javascript sangat mudah dipelajari. Kamu akan sangat menikmatinya.
Javascript telah didukung oleh sebagaian web browser yang sangat terkenal seperti IE, Mozilla Firefox, Safari, Google Chrome, Opera dan Netscape.
Beberapa point penting tentang javascript :
· Javascript didesain untuk menjadikan halaman HTML menjadi lebih interaktif
· Javascript adalah sebuah bahasa scripting ( scripting adalah bahasa pemrograman yang ringan )
· Javascript terdiri dari beberapa baris kode yang dapat dieksekusi / dijalankan oleh komputer
· Javascript biasanya ditanamkan secara langsung didalam halaman HTML
· Javascript adalah bahasa yang menggunakan interpreter, artinya script / kode dieksekusi tanpa harus dikompilasi terlebih dahulu. Kode akan diterjemahkan perbaris dari awal hingga akhir oleh komputer.
· Setiap orang dapat mengguanakan javascript tanpa harus membeli lisensi alias gratis.
Apa yang dapat dilakukan dengan javascript ?
Ø Javascript memberikan seorang perancang HTML sebuah alat pemrograman ( programming tool ), seorang yang menulis dalam kode HTML pada umumnya bukanlah seorang programmer, tetapi karena javascript adalah bahasa scripting yang memiliki sintaks yang sangat sederhana! Hampir semua orang dapat menyisipkan sebuah kode kecil dalam halaman HTML yang ia buat.
Ø Javascript dapat meletakkan teks yang dinamis ke dalam halaman HTML, sebuah statement javascript seperti ini : document.write("name") dapat ditulis sebagai variabel teks di dalam halaman HTML, jadi variabel “name” nilainya dapat kita ubah sesuaik keperluan kita.
Ø Javascript dapat memberikan respon terhadap events ( kejadian ), javascript dapat diatur untuk dieksekusi ketika sesuatu terjadi, seperti ketika sebuah halaman selesai dimuat ( loading ) atau ketika pengguna melakukan klik terhadap sebuah element HTML.
Ø Javascript dapat membaca dan menulis element HTML, javascript dapat membaca dan mengubah isi / nilai dari element HTML.
Ø Javascript dapat digunakan untuk melakukan validasi data, jadi validasi dilakukan sebelum data pada sebuah form dikirimkan ke server, ia akan menjaga agar server tidak melakukan pemrosesan yang berlebihan.
Ø Javascript dapat digunakan untuk mengenali browser pengunjung.
Ø Javascript dapat digunakan untuk membuat cookies, dimana javascript dapat menggunakannya untuk menyimpan dan menerima informasi dari komputer yang mengunjungi halaman tersebut.
Langganan:
Postingan (Atom)