praktikum javascript

JAVASCRIPT

BY:

YUNIA IKAWATI

BAB 3

PRAKTIKUM PEMROGRAMAN WEB

TOPIK

• Pengenalan JavaScript

• Menggunakan JavaScript

• Variabel JavaScript

• Operator JavaScript

• Function JavaScript

3

Bentuk skrip dari Javascript dan

Membuat Komentar (Skrip tidak Tereksekusi)• Skrip dari JavaScript terletak di dalam dokumen HTML.

<SCRIPT language="Javascript">

letakkan script anda disini</SCRIPT>

• Pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan

akan melewatkannya untuk di baca. Untuk itu perlu ditambahkan tag komentar agar skripnya

tidak dibaca sebagai skrip, tetapi di baca sebagai komentar dan tidak akan dieksekusi

sebagai program.

<SCRIPT language="Javascript">  </SCRIPT>

• Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash. // semua karakter di belakang // tidak akan di eksekusi

• Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */ /* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */

4

Meletakkan JavaScript dalam dokumen HTML

• Menggunakan tag <SCRIPT>– Tag <SCRIPT> diletakkan didalam dokumen HTML. Pemanggilan fungsi JavaScript

(atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>.

– Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan dan versinya, contohnya “JavaScript“, “JavaScript1.1“,“JavaScript1.2“ untuk bahasa JavaScript

– Contoh :

<HTML>

<HEAD> <TITLE>Contoh Program Javascript</TITLE></HEAD> <BODY> <SCRIPT language="Javascript">  </SCRIPT> </BODY> </HTML>

5

Meletakkan JavaScript dalam dokumen HTML

• Menggunakan file ekstern

– Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).

<SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.

• Melalui event tertentu– Event adalah sebutan dari satu action yang dilakukan

oleh user, contohnya seperti klik tombol mouse.<tag eventHandler="kode Javascript yang akan

dimasukkan">

dimana eventHandler adalah nama dari event tersebut.

Perintah “Event Handler”<html>

<head>

<title>Membuka kotak dialog pada saat melalukan klik mouse di satu link</title>

</head>

<body>

<a href="javascript:;" onClick="window.alert(‘\’teks anda\’’);">

klik disini !</a>

</body>

</html>

Perintah Event dengan

memodifikasi image kursor<html>

<head>

<title>Memodifikasi image pada saat kursor mouse bergerak diatas image tersebut</title>

</head>

<body>

<a href="javascript:;" onMouseOver="document.img_1.src='lari.gif';"

onMouseOut="document.img_1.src='pelangi.jpg';">

<img name="img_1" src="pelangi.jpg">

</a>

</body>

</html>

Penginputan Data

menggunakan ‘Prompt’ <HTML>

<HEAD>

<TITLE>Pemasukan Data</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">



</SCRIPT>

</BODY>

</HTML>

9

Variabel

• Variable adalah suatu obyek yang berisi data

data, yang mana dapat di modifikasi selama

pengeksekusian program.

• Aturan pemberian nama 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 memakai nama yang digunakan

dalam reserved program, seperti : abstract, boolean, break, byte,

if, implements, import, in, infinity, instanceof, int, interface, dll

Perintah Konversi Tipe Data<HTML>

<HEAD>

<TITLE>Konversi Bilangan</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Operator Matematikadocument.write("<BR>");

document.write("20 % 3 = " + (20

% 3) );

document.write("<BR>");

//-->

</SCRIPT>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Operasi Matematika</TITLE>

</HEAD>

<BODY>


<!--

document.write("20 + 3 = " + (20 + 3) );


document.write("20 - 3 = " + (20 - 3) );


document.write("20 * 3 = " + (20 * 3) );


document.write("20 / 3 = " + (20 / 3) );

12

<HTML>

<HEAD>

<TITLE>Operator ?</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Operator Pembanding dan Logika

13

Pernyataan IF• Pernyataan IF tanpa else (mengeksekusi satu

blok instruksi jika kondisi syaratnya terpenuhi)

if (kondisi) {

// blok pernyataan yang dijalankan

// kalau kondisi bernilai benar

}

<HTML>

<HEAD>

<TITLE>Contoh if</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

14

Pernyataan IF..ELSE..• Pernyataan IF dengan ELSE (lebih dari satu

kondisi syarat untuk menjalankan program,)

if (kondisi) {

// blok pernyataan yang dijalankan

// kalau kondisi bernilai benar

} else {

// blok pernyataan yang dijalankan// kalau kondisi bernilai salah

}

<HTML>

<HEAD>

<TITLE>Contoh if-else</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE =

"JavaScript">



</SCRIPT>

</BODY>

</HTML>

15

Pernyataan Switch<HTML>

<HEAD>

<TITLE>Contoh switch</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

16

Proses Berulang : Pernyataan While

• Instruksi while merupakan salah satu cara alternatif untuk menjalankan sekumpulan instruksi

• Bentuk pernyataan :

while (kondisi) {

pernyataan

}

• Contoh :<HTML>

<HEAD>

<TITLE>Contoh while</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

17

Proses Berulang : Pernyataan

Do….While• Bentuk pernyataan :

do {

blok pernyataan

} while (kondisi) ;

• Contoh :<HTML>

<HEAD>

<TITLE>Contoh do while</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

18

Proses Berulang : Pernyataan For….

• Bentuk pernyataan :for (inisialisasi; kondisi; penaikan_penurunan) {

pernyataan_pernyataan}

• Contoh :

<HTML><HEAD><TITLE>Contoh for</TITLE></HEAD><BODY><SCRIPT LANGUAGE = "JavaScript"></SCRIPT></BODY></HTML>

19

Proses Pengulangan dalam pengulangan<HTML>

<HEAD>

<TITLE>Contoh for Berkalang</TITLE>

</HEAD>

<BODY>

<PRE>




</SCRIPT>

</PRE>

</BODY>

</HTML>

20

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.

• Mendefinisikan Fungsi

function nama(daftar_parameter) {

Pernyataan_1;

pernyataan_n;

}

z = jumlah ( 2 , 3 );

Nama

fungsi

argumenNilai balik

<HTML>

<HEAD>

<TITLE>Contoh Fungsi</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

21

Fungsi yang Dibuat Sendiri

• Memvalidasi Masukan pada Formulir<HTML>

<HEAD>

<TITLE>Validasi

Masukan</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE =

"JavaScript">



<FORM NAME = "formku">

<PRE>

Nama : <INPUT TYPE = "TEXT"

NAME = "nama"><BR>

<INPUT TYPE =

"BUTTON" VALUE = "Kirim"

onClick =

"cekNama(this.form)"><BR>

</PRE>

</FORM>

</BODY>

</HTML>

22

Fungsi yang Dibuat Sendiri

• Menampilkan Jam<HTML>

<HEAD>

<TITLE>Jam</TITLE>

</HEAD>

<BODY>

<FORM NAME = "formWaktu">

Waktu Sekarang :

<INPUT TYPE = "TEXT"

NAME = "teksWaktu"

VALUE = ""

SIZE = "22">

</FORM>

<SCRIPT LANGUAGE =

"JavaScript">



</SCRIPT>

</BODY>

</HTML>

23

Objek Array

• Contoh :<HTML>

<HEAD>

<TITLE>Properti prototype</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

24

Objek Radio<HTML>

<HEAD>

<TITLE>Mengakses Objek radio</TITLE>

</HEAD>

<BODY>

Klik pada musik yang paling Anda sukai<BR>

<FORM NAME = "formTes"

METHOD = "GET">

<INPUT TYPE = "RADIO"

NAME = "radioMusik"

VALUE = "Jazz"

onClick = "info()">Jazz<BR>


NAME = "radioMusik"

VALUE = "Keroncong"

onClick = "info()">Keroncong<BR>


NAME = "radioMusik"

VALUE = "Dangdut"

onClick = "info()">Dangdut<BR>


NAME = "radioMusik"

VALUE = "Lainnya"

onClick = "info()">Lainnya<BR>

<HR>

Info:

<INPUT TYPE = "TEXT"

NAME = "fieldMusik"

SIZE = "40">

</FORM>




</SCRIPT>

</BODY>

</HTML>

25

Objek Password<HTML>

<HEAD>

<TITLE>Mengakses Objek password</TITLE>

</HEAD>

<BODY>

<FORM NAME = "formTes"

ACTION = "tesform.htm"

METHOD = "POST">

<PRE>

Password Pengganti : <INPUT TYPE =

"PASSWORD"

NAME = "password_1">

Password Sekali Lagi: <INPUT TYPE =

"PASSWORD"

NAME = "password_2">

</PRE>

<INPUT TYPE = "BUTTON"

NAME = "tombolProses"

VALUE = "Proses"

onClick = "cekPassword()">

</FORM>




</SCRIPT>

</BODY>

</HTML>

praktikum javascript

Education