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)
•SkripdariJavaScript terletakdi dalamdokumenHTML.
<SCRIPT language="Javascript">
letakkanscript andadisini
</SCRIPT>
•Padanavigator versilama, sebelumadanyaJavaScript, tidakmengenaltag tersebutdanakanmelewatkannyauntukdi baca. Untukituperluditambahkantag komentaragar skripnyatidakdibacasebagaiskrip, tetapidi bacasebagaikomentardantidakakandieksekusisebagaiprogram.

</SCRIPT>
•Untukmenuliskomentardalamsatubariskitagunakankarakterdobelslash.
// semuakarakterdi belakang// tidakakandi eksekusi
•Untukmenuliskomentaryang terdiridaribeberapabariskitagunakankarakter/* dan*/
/* Semuabarisantara2 tandatersebuttidakakandi eksekusiolehkompilator*/

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>
</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>PemasukanData</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
</BODY>
</HTML>

9
Variabel
•Variable adalahsuatuobyekyang berisidata data, yang manadapatdi modifikasiselamapengeksekusianprogram.
•Aturanpemberiannamavariabel:
–Namavariabelharusdimulaiolehsatuhuruf(hurufbesarmaupunhurufkecil) atausatukarakter''_''.
–Namavariabelbisaterdiridarihurufhuruf, angkaangkaataukarakter_ dan& (spasikosongtidakdiperbolehkan).
–Namavariabeltidakbolehmemakainamayang digunakandalamreserved program, seperti: abstract, boolean, break, byte, if, implements, import, in, infinity, instanceof, int, interface, dll

Perintah Konversi Tipe Data
<HTML>
<HEAD>
<TITLE>KonversiBilangan</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>OperasiMatematika</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript"> <!-- document.write("20 + 3 = " + (20 + 3) ); document.write("<BR>"); document.write("20 -3 = " + (20 -3) ); document.write("<BR>"); document.write("20 * 3 = " + (20 * 3) ); document.write("<BR>"); document.write("20 / 3 = " + (20 / 3) );

12
<HTML>
<HEAD>
<TITLE>Operator ?</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>
Operator PembandingdanLogika

13
Pernyataan IF
•PernyataanIF tanpaelse(mengeksekusi satu blok instruksi jika kondisi syaratnya terpenuhi)
if (kondisi) {
// blokpernyataanyang dijalankan
// kalaukondisibernilaibenar
} <HTML> <HEAD> <TITLE>Contohif</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML>

14
PernyataanIF..ELSE.. •PernyataanIF denganELSE(lebih dari satu kondisi syarat untuk menjalankan program,) if(kondisi) { // blokpernyataanyang dijalankan// kalaukondisibernilaibenar} else { // blokpernyataanyang dijalankan// kalaukondisibernilaisalah} <HTML> <HEAD> <TITLE>Contohif-else</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML>

15
Pernyataan Switch<HTML> <HEAD> <TITLE>Contohswitch</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML>

16
Proses Berulang : Pernyataan While
•Instruksi while merupakan salah satu cara alternatif untuk menjalankan sekumpulan instruksi
•Bentukpernyataan:
while (kondisi) {
pernyataan
}
•Contoh:
<HTML>
<HEAD>
<TITLE>Contohwhile</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>

17
Proses Berulang : PernyataanDo….While
do {
blokpernyataan
} while (kondisi) ;
•Contoh:
<HTML>
<HEAD>
<TITLE>Contohdo while</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>

18
Proses Berulang : Pernyataan For….
for (inisialisasi; kondisi; penaikan_penurunan) {
pernyataan_pernyataan
}
•Contoh:
<HTML>
<HEAD>
<TITLE>Contohfor</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>

19
Proses Pengulangandalampengulangan
<HTML>
<HEAD>
<TITLE>Contohfor 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.
•MendefinisikanFungsi
function nama(daftar_parameter) {
Pernyataan_1;
pernyataan_n;
}
z= jumlah( 2 , 3 ); NamafungsiargumenNilaibalik<HTML> <HEAD> <TITLE>ContohFungsi</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT>

21
Fungsi yang Dibuat Sendiri
•MemvalidasiMasukanpadaFormulir
<HTML>
<HEAD>
<TITLE>ValidasiMasukan</TITLE>
</HEAD>
<BODY>

<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">
WaktuSekarang:
<INPUT TYPE = "TEXT"
NAME = "teksWaktu"
VALUE = ""
SIZE = "22">
</FORM>

</SCRIPT>
</BODY>
</HTML>

23
Objek Array
•Contoh:
<HTML>
<HEAD>
<TITLE>Propertiprototype</TITLE>
</HEAD>
<BODY>

</SCRIPT>
</BODY>
</HTML>

24
Objek Radio
<HTML>
<HEAD>
<TITLE>MengaksesObjekradio</TITLE>
</HEAD>
<BODY>
Klikpadamusikyang paling Andasukai<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>MengaksesObjekpassword</TITLE>
</HEAD>
<BODY>
<FORM NAME = "formTes"
ACTION = "tesform.htm"
METHOD = "POST">
<PRE>
Password Pengganti: <INPUT TYPE = "PASSWORD"
NAME = "password_1">
Password SekaliLagi: <INPUT TYPE = "PASSWORD"
NAME = "password_2">
</PRE>
<INPUT TYPE = "BUTTON"
NAME= "tombolProses"
VALUE= "Proses"
onClick= "cekPassword()">
</FORM>

</SCRIPT>
</BODY>
</HTML>

Praktikum javascript

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Praktikum javascript (20)

Recently uploaded (20)

Praktikum javascript