Modul Java Script
Download
Report
Transcript Modul Java Script
Praktikum Java Script
Pengertian
Javascript adalah bahasa yang berbentuk kumpulan skrip
yang pada fungsinya berjalan pada suatu dokumen HTML
Bahasa ini adalah bahasa pemrograman untuk memberikan
kemampuan tambahan terhadap bahasa HTML dengan
mengijinkan pengeksekusian perintah perintah di sisi user,
yang artinya di sisi browser bukan di sisi server web
Javascript juga tidak memerlukan kompilator atau
penterjemah khusus untuk menjalankannya
Kelebihan Javascript
Ukuran file kecil
Script dari javascript memiliki ukuran yang kecil sehingga ketika
web yang memiliki javascript ditampilkan di browser maka
akses tampilannya akan lebih cepat dibandingkan ketika
browser membuka suatu web yang memiliki script java
Mudah untuk dipelajari
Bahasanya tidak serumit java
Terbuka
Javascript tidak terikat oleh hardware maupun software
tertentu bahkan system operasi
Kekurangan Javascript
Script tidak terenkripsi
Karena javascript bersifat client side, maka script yang kita buat di
text editor dan telah dijadikan web di server, ketika user me-request
web dari server tersebut maka sintak javascript akan langsung
ditampilkan di browser.
Kemampuan terbatas
Walaupun javascript mampu membuat bentuk web menjadi interaktif
dan dinamis, namun javascript tidak mampu membuat program
aplikasi sendiri seperti java.
Keterbatasan Objek
Javascript tidak mampu membuat kelas-kelas yang bisa menampung
objek-objek tambahan seperti java karena javascript telah memiliki
objek yang built-in pada sturktur bahasanya.
Deklarasi Umum
<script>
…….
</script>
Agar text editor dapat mengidentifikasikan bahwa sintak
tersebut merupakan sintak javascript yang digunakan
untuk aplikasi di web, maka perlu penambahan sintak di
dalam sintak script yaitu
<SCRIPT language="Javascript">
letakkan script anda disini
</SCRIPT>
Peletaan sintak java script pada dokumen HTML
Script javascript diletakkan di antara <BODY> …. </BODY>
Script javascript diletakkan di antara <HEAD> …. </HEAD>
Peletaan sintak java script pada dokumen HTML
Menggunakan file ekstern
Melalui event tertentu
Komentar
<SCRIPT>
// ini adalah komentar
/* ini adalah
Komentar
Yang panjang */
</SCRIPT>
Menulis pada output html
document.write(“kalimat yang akan di tampilkan”);
Mengakses elemen HTML
//Find the element
x=document.getElementById("demo")
//Change the content
x.innerHTML="Hello JavaScript";
Variable
Variable adalah suatu obyek yang berisi data, yang mana
dapat di modifikasi selama pengeksekusian program.
kriteria berikut ini penulisan variabel :
• Nama variabel harus dimulai oleh satu huruf (huruf besar
maupun huruf kecil) atau satu karakter ''_''.
• Nama variabel bisa terdiri dari huruf huruf, angka angka
atau karakter _ dan & (spasi kosong tidak diperbolehkan).
• Nama variabel tidak boleh sesuai dengan sintak yang ada di
java script
• Nama variabel case sensitive (y dan Y adalah variabel yang
berbeda)
Jenis jenis data dari variabel
Numerik
Berupa bilangan atau angka yang mempunyai sifat matematis (bisa
dijumlah, tambah dsb), misalnya : 17, 8, 1945
Integer : yaitu suatu bilangan bulat tanpa pecahan
Float : yaitu suatu bilangan pecahan atau berpangkat.
o
Kata (kumpulan huruf) : kita sebut string
var a = "Hallo";
var name = “Institut \”Teknologi \” Bandung ”
o
Booleans adalah satu variabel khusus yang berguna untuk
mengevaluasi suatu kondisi tertentu, oleh karenanya boolean
mempunyai dua nilai :
True : diwakili oleh nilai 1
False : diwakili oleh nilai 0
o
variabel dengan jenis null : satu kata khusus (termasuk keyword
juga) untuk menjelaskan bahwa tidak ada data didalamnya.
Mendeklarasikan Variabel
• eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama
variabel dan nilai dari variabel :
var test = “halo” ;
• implisit : dengan menuliskan secara langsung nama dari variabel dan
diikuti nilai dari variabel :
test = “halo “
--------------------------------------------------------------------------------------
<SCRIPT language="Javascript">
<!-var VariabelKu;
var VariabelKu2 = 3;
VariabelKu = “Anissa”;
Var x=true;
Var y=null;
document.write(VariabelKu*VariabelKu2);
// -->
</SCRIPT>
Array
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
Atau
var cars=new Array("Saab","Volvo","BMW");
Atau
var cars=["Saab","Volvo","BMW"];
Pengaksesan
document.write("elemen ke 4 dari tabel adalah "+cars[1]);
Konversi jenis variabel
Meskipun JavaScript memungkinkan pengaturan perubahan jenis variabel
secara transparan, kadang kadang kita perlu juga untuk melakukan konversi
jenis variabel secara paksa. Ada 2 fungsi dasar yang memungkinkan merubah
jenis variabel yang dilewatkan dengan parameter tertentu :
• parseInt()
Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan
parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk
bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan
bulat. Sintaksnya adalah sebagai berikut :
parseInt(string[, basis]);
---------- var a = "123";
var b = "456";
document.write(a+b,"<BR>"); // hasil 123456
document.write(parseInt(a)+parseInt(b),"<BR>"); // hasil 579
Konversi jenis variabel
parseFloat()
dengan parameter tertentu menjadi bilangan desimal,
Sintaks dari fungsi parseFloat adalah sebagai berikut :
--------------------------------------parseFloat(string);
Operator Binary
Operator Penugasan
Operator ini memungkinkan kita untuk menyederhanakan
operasi penambahan nilai dalam satu variabel dan
menyimpan hasilnya di dalam variabel itu sendiri
Operator Unary
Operator ini memungkinkan kita untuk menambahkan
ataupun mengurangi per unit dari satu variabel. Operator
ini sangat berguna dalam struktur pemrograman sistem
Loop, yang membutuhkan penghitung (variabel yang
nilainya naik/turun satu persatu ) .
Operator
Pembanding
Operator Logika (Booleans)
Operator jenis ini memungkinkan kita untuk
memverifikasi apakah beberapa kondisi sudah benar
Operator untuk memanipulasi data string
Operator + yang digunakan untuk variabel jenis String
memungkinkan kita untuk melakukan penggabungan
(concantenate) dua variabel String.
var='a'+'b' adalah sama dengan var='ab'
var1='a'
var=var1+'b' -> var='ab'
Ekspresi perbandingan
(kondisi) ? nilaibenar : nilaisalah
Var Hadiah = (nilai > 90) ? “mobil” :
“sepeda”
Struktur Kondisional
Struktur kondisional adalah instruksi instruksi yang
memungkinkan kita untuk melakukan test apakah satu
kondisi adalah benar atau tidak, dan memungkinkan juga
terjadinya proses interaksi di dalam skrip yang kita buat
if ((kondisi1)&&(kondisi2))
if ((kondisi1)||(kondisi2))
----------------------------if (kondisi syarat1 terpenuhi) {
daftar instruksi atau blok instruksi
}
else {
daftar instruksi/blok instruksi yang lain
}
Loop
struktur instruksi instruksi yang dapat di eksekusi berulang
umang selama kondisi syaratnya belum terpenuhi.
for (penghitung; kondisi loop berhenti; modfikasi
penghitung) {
daftar instruksi instruksi atau blok instruksi
}
Sebagai contoh :
for (i=1; i<6; i++) {
Alert(i)
}
-----------------------while (kondisi syarat terpenuhi) {
daftar instruksi instruksi atau blok instruksi
}
Instruksi continue
Ada hal yang patut di perhatikan juga, ada kalanya kita perlu melakukan lompatan
(jump) terhadap satu atau beberapa nilai tertentu di dalam loop tanpa menghentikan
loop itu sendiri. Sintaks yang digunakan disini adalah continue , dan di letakkan di
dalam loop itu sendiri, pada umumnya kita tambahkan juga struktur kondisional
sebagai syarat supaya sintaks tersebut berjalan lancar.
Contoh :
x=1;
while (x<=10) {
if (x == 7) {
Alert('pembagian oleh 0');
X++;
continue;
}
a = 1/(x-7);
Alert(a);
x++;
}
Instruksi break
Sebaliknya kita juga bisa memaksa loop berhenti sebelum
waktunya dengan alasan yang dikemukan di bagian awal dari
loop. Instruksi Break memungkinkan menghentikan suatu loop
(baik untuk for ataupun while). Pemakaiannya sendiri seperti
instruksi continue, yaitu penambahan struktur kondisional agar
supaya loop berhenti dan tidak berulang ulang looping
Contoh :
for (x=1; x<=10; x++) {
a = x-7;
if (a == 0) {
Alert('pembagian oleh 0');
break;
}
Alert(1/a);
}
Instruksi switch …. case
Instruksi ini memungkinkan kita untuk melakukan test berbagai nilai
dari variabel yang sama. Dengan cara ini kita bisa melakukan testing
terhadap berbagai nilai variabel lebih sederhana daripada memakai
instruksi if.
switch (Variabel) {
case Nilai1:
blok instruksi;
break;
case Nilai2:
blok instruksi;
break;
case NilaiX:
blok instruksi;
break;
default:
blok instruksi;
break;
}
Fungsi
Fungsi adalah subprogram yang memungkinkan kita untuk
menjalankan sekelompok instruksi dengan satu
pemanggilan sederhana nama fungsi tersebut dari satu
atau beberapa bagian di dalam badan suatu program.
Pendefinisian satu fungsi dinamakan deklarasi. Sintaks
pendeklarasian suatu fungsi adalah sebagai berikut :
function Nama_dari_Fungsi(argumen1,
argumen2, ...) {
daftar instruksi atau blok instruksi
}
Pemanggilan fungsi
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!-function Pemanggilan() {
//blok instruksi
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Pemanggilan();" >
…………………………………
</BODY>
</HTML>
Parameter dari fungsi
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!-function Tampilkan1() {
alert('Teks 1');
}
function Tampilkan2() {
alert('Teks 2');
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:;"
onClick="Tampilkan1();">Teks1</A>
<A href="javascript:;"
onClick="Tampilkan2();">Teks2</A>
</BODY>
</HTML>
atau cara kedua berikut akan
memberikan hasil yang sama :
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!-function Tampilkan(Teks) {
alert(Teks);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A href="javascript:;"
onClick="Tampilkan('Teks1');">Teks1</A
>
<A href="javascript:;"
onClick="Tampilkan('Teks2');">Teks2</A
>
</BODY>
</HTML>
Bekerja dengan variabel di dalam fungsi
Variabel yang dideklarasikan secara implisit di dalam fungsi
(tanpa kata kunci var) akan menjadi global, yang artinya
variabel masih bisa di akses sesudah eksekusi dari fungsi.
Variabel yang dideklarasikan secara eksplisit di dalam
fungsi (menggunakan kata kunci var) akan menjadi lokal,
yang artinya hanya dapat diakses dari dalam fungsi, semua
referensi yang memakai variabel ini dari luar fungsi akan
menyebabkan pesan error (variabel tidak dikenal).
Event
1.
2.
3.
4.
5.
6.
7.
Event adalah suatu aksi yang dilakukan oleh pemakai yang memicu
jalannya kode JavaScript anda.sebagian besar event dipicu oleh
pemakai yang memanipulasi halaman web pada program browsernya
Macam-macam event :
Click , event ini terjadi jika pemakai mengklik tombol mouse pada
link atau elemen yang terdapat form.
Focus, event ini terjadi jika pemakai mengklik atau meletakkan
pointer mouse pada elemen form seperti field teks , kotak cek dan
sebagainya.
Blur , event ini terjadi jika pemakai menyingkirkan focus (pointer
mouse) dari elemen form yang sebelumnya diberi focus.
Change , event ini terjadi jika pemakai mengubah input atau
masukan pada elemen form.
MouseOver, terjadi jika pemakai meletakkan mouse di atas sebuah
link .
Select, event ini terjadi jika pemakai memilih teks pada elemen
form , seperti menggeser pointer mouse pada teks sambil
menahan tombol kiri mouse.
Submit, event ini terjadi bila mengklik tombol “submit”
Daftar Event
Event
Keterangan
Abort
(onAbort)
terjadi pada saat user mengagalkan proses download image
Blur (onBlur)
terjadi ketika elemen kehilangan fokus, artinya user melakukan klik
diluar elemen itu,
Change
(onChange)
terjadi pada saat user memodifikasi isi dari data dalam satu field data
Click (onClick)
terjadi pada saat user melakukan klik mouse terhadap satu elemen
yang berhubungan dengan event
Dblclick
(onDblclick)
terjadi pada saat user melakukan klik dua kali pada satu elemen yang
berhubungan event, elemen bisa berupa satu hiperlink atau elemen
dari satu form. Event ini hanya mensupport JavaScript ver 1.2 keatas
Dragdrop
(onDragdrop)
terjadi pada saat user melakukan drag dan drop elemen di dalam
navigator. Hanya mensupport JavaScriptver 1.2 keatas
Error (onError) muncul ketika error pada saat loading halaman. Hanya support
JavaScript ver 1.1 keatas
Daftar Event
Event
Keterangan
Focus (onFocus)
terjadi pada saat user memberikan focus kepada satu elemen
Keydown
(onKeydown)
terjadi pada saat user menekan satu tombol pada keyboardnya. Hanya
mensupport JavaScript ver 1.2 keatas
Keypress
(onKeypress)
terjadi pada saat user menekan dan manahan tombol di keyboardnya
tetap ditekan. Hanya mensupport JavaScript ver 1.2 keatas
Keyup
(onKeyup)
terjadi pada saat user melepaskan tombol pada keyboardnya. Hanya
mensupport JavaScript versi 1.2 keatas
Load (onLoad)
terjadi pada saat navigator user meload/memanggil suatu halaman
Mouseover
(onMouseover)
terjadi pada saat user meletakkan kursor mouse diatas suatu elemen
Mouseout
(onMouseout)
terjadi pada saat kursor mouse meninggalkan posisinya dari atas suatu
elemen
Daftar Event
Event
Keterangan
Reset (onReset)
terjadi pada saat user menghapus data pada suatu form dengan
bantuan satu tombol reset
Resize (onResize)
terjadi pada saat user merubah dimensi ukuran dari jendela
navigator
Select (onSelect)
terjadi pada saat user melakukan proses select terhadap suatu
teks (sebagian atau semuanya) di dalam satu field bertjenis teks
atau textarea
Submit (onSubmit)
terjadi pada saat user melakukan klik terhadap tombol
pengiriman suatu form
Unload (onUnload) terjadi pada saat navigator user meninggalkan halaman yang
sedang diproses (atau di load)
Contoh Event
Object
Object
Membuat obyek
var x = new Array(elemen1[, elemen2, ...]);
var x = new Boolean(parameter);
Nama_dari_obyek = new Date();
Object
Mengakses object properties
objectName.propertyName
Example :
var message="Hello
World!";
var x=message.length;
Mengakses Object Method
objectName.methodName()
var message="Hello
world!";
var x =
message.toUpperCase();
Kotak Dialog
Kotak dialog adalah satu jendela yang tampil di bagian
depan (layer paling atas) menyusul satu event yang di
jalankan, dan memungkinkan kita untuk :
1.
2.
3.
Memberikan peringatan kepada user
Memberikan pilihan yang harus dipilih oleh user
Meminta user untuk mengisi atau melengkapi isian pada
suatu form field.
1.Metoda alert()
Metoda alert() memungkinkan navigator untuk
menampilkan satu kotak dialog yang berisi satu tombol
OK dan teks keterangan (sebagai satu satunya parameter
dari metoda). Pada saat kotak ini muncul, user tidak punya
pilihan lain selain menekan tombol OK.
Sintaksnya adalah sebagai berikut :
alert(nama_dari_variabel);
alert('teks');
alert('teks' + nama_dari_variabel);
Alert
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
alert("Hallo !");
</SCRIPT>
</BODY>
</HTML>
2. Metoda confirm()
,dengan tambahan kita bisa melakukan pilihan OK atau
Cancel. Pada saat kita pilih OK maka metoda ini akan
mengirimkan nilai true dan mengirimkan nilai false jika kita
memilih Cancel
sedangkan sintaksnya sendiri sama seperti metoda alert,
dalam contoh ini sintaksnya adalah :
confirm('Anda Mau Meneruskan Proses
?');
Metoda prompt()
Metoda prompt() agak sedikit lebih canggih dibandingkan
kedua metoda sebelumnya karena dia dilengkapi dengan
satu cara untuk mendapatkan informasi yang diberikan
oleh user. Metoda prompt() terdiri dari 2 komponen, yang
pertama teks untuk pertanyaan dan yang kedua adalah
teks default dari field yang akan diisi informasi oleh user.
prompt('Siapakah Nama Anda ?', 'isi
disini' );
PRAKTIKUM
Tambahkan halaman entry page pada
pertemuan sebelumnya dengan verifikasi
code (captcha) menggunakan javascript
Lanjutan
Lanjutan
SUMBER
http://lecturer.eepis-its.edu/~idris/file/PemrogramanWeb/Teori/day-4.pdf
http://codeproject.com
http://w3schools.com
Modul CCIT Ponorogo 2011