Scribd
Unggah
39 tayangan11 halaman

W151700011 - Web 1: Pemrograma N

Dokumen tersebut membahas tentang dasar-dasar pemrograman Javascript dan variabel dasar. Terdapat penjelasan tentang penggunaan tag <SCRIPT> dan perintah dasar Javascript seperti document.write() untuk menampilkan teks. Dibahas pula tentang konsep variabel dalam Javascript dan cara mendefinisikan serta menggunakan variabel."

Diunggah oleh

Maulana Fajar
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
39 tayangan11 halaman

W151700011 - Web 1: Pemrograma N

Dokumen tersebut membahas tentang dasar-dasar pemrograman Javascript dan variabel dasar. Terdapat penjelasan tentang penggunaan tag <SCRIPT> dan perintah dasar Javascript seperti document.write() untuk menampilkan teks. Dibahas pula tentang konsep variabel dalam Javascript dan cara mendefinisikan serta menggunakan variabel."

Diunggah oleh

Maulana Fajar
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

2

MODUL PERKULIAHAN

W151700011 –
PEMROGRAMA
N WEB 1
Struktur Javascript

Abstrak Sub-CPMK (lihat di RPS)

Dasar-dasar javascript dan Mahasiswa mampu melaksanakan


variabel dasar pengkodean dan pengerjaan tugas
menggunakan javascript

Pembahasan

Fakultas Program Studi Tatap Muka Disusun Oleh

05
Wawan Gunawan, S.Kom., M.T.
Ilmu Komputer Teknik Informatika
Javascript adalah bahasa pemrograman yang berjalan di sisi klien (klien web / browser,
misal: Internet Explorer). Teknologi Javascript dibuat dengan tujuan agar dapat
memperingan kerja server serta menambah sifat dinamis dan interaktivitas dari sebuah
situs HTML. Penggunaan Javascript terutama untuk hal-hal yang tidak bersifat penting
atau kritis, seperti pemeriksaan format input, animasi teks, efek kursor mouse, dan
aplikasi-aplikasi ringan seperti kalkulator maupun games.

Teknologi Javascript pertama kali diperkenalkan oleh Netscape sejak Netscape 2.0 yang
dapat menjalankan Javascript versi 1.0, kemudian Netscape 3.0 menggunakan Javascript
versi 1.1 dan Netscape 4 ke atas menggunakan Javascript versi 1.2. Sedangkan untuk
Internet Explorer melakukan implementasi script dengan menggunakan standar tersendiri
yaitu VBscript serta Jscript yang kompatibel dengan Javascript, sehingga Javascript dapat
berjalan pada IE tetapi VBscript tidak dapat berjalan di Netscape.

Penulisan Javascript pada HTML menggunakan tag <SCRIPT>...</SCRIPT> yang dapat


ditempatkan pada area <HEAD> ataupun <BODY>. Penempatan tag <SCRIPT> pada
area HEAD> dimaksudkan agar Javascript dijalankan terlebih dahulu sebelum
menampilkan halaman HTML, tetapi ada beberapa Javascript yang menggunakan elemen
HTML justru harus ditulis pada area <BODY>.
Penulisan tag <SCRIPT> untuk Javascript adalah sebagai berikut:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
Script nya di sini
//-->
</script>
</body>
</html>

Atribut "LANGUAGE" dipergunakan untuk memberitahukan bahwa bahasa script yang


dipergunakan adalah Javascript dan bukanlah VBscript, sedangkan untuk menunjukkan
versi dari Javascript dapat dipergunakan, mis: Javascript1.1 atau Javascript1.2, kalau
Javascript saja diasumsikan menggunakan Javascript versi 1.0. Sedangkan tanda
<!-- .... //--> dipergunakan untuk mencegah apabila ada browser yang tidak support tidak
akan menampilkan kode Javascript tersebut sebagai kesalahan / error.

2021 Pemrograman Web 1


2 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Perintah Javascript untuk menampilkan suatu teks atau tulisan pada layar browser dapat
mempergunakan document.write atau document.writeln, seperti contoh di bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
document.write("Hallo Javascript!");
//-->
</script>
</body>
</html>

Maka akan dihasilkan seperti gambar di bawah ini

Perintah document.write juga dapat menampilkan seluruh tag-tag HTML termasuk tag
untuk
efek tulisan, seperti kode program di bawah ini:
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
document.writeln("<b>Hallo Javascript!</b><br>");
document.writeln("<font color='blue'>Hallo</font>");
//-->
</script>
</body>
</html>
Akan tampak seperti gambar di bawah ini

2021 Pemrograman Web 1


3 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Bahkan dapat juga untuk membuat tabel seperti script di bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
document.writeln("<table border='1'>");
document.writeln("<tr>");
document.writeln("<td>1,1</td><td>1,2</td>");
document.writeln("</tr>");
document.writeln("<tr>");
document.writeln("<td>2,1</td><td>2,2</td>");
document.writeln("</tr>");
document.writeln("</table>");
//-->
</script>
</body>
</html>

Dengan tampilan seperti gambar di bawah ini

Pada dunia pemrograman salah satu konsep terpenting adalah VARIABEL, sama halnya
pada bahasa pemrograman yang lain Javascript juga memerlukan penggunaan
VARIABEL. Yang dimaksud dengan VARIABEL adalah sebuah penampung data dimana

2021 Pemrograman Web 1


4 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
sewaktu-waktu isinya dapat diubah, ditambah, dikurangi, dan sebagainya. Bayangkan
sebuah VARIABEL seperti halnya sebuah keranjang dimana keranjang tersebut dapat
diisi dengan segala hal, kemudian bisa juga keranjang tersebut sudah ada isinya dan
kemudian ditambahkan isinya atau dikurangi isinya, bahkan dikosongkan kembali seperti
semula.

Isi VARIABEL pada Javascript dibedakan menjadi 2 yaitu angka atau kalimat. Isi variabel
yang berupa angka seringkali disebut NUMERIK dan isi variabel yang berupa kalimat
seringkali disebut STRING. Untuk membuat variabel dalam Javascript sangat mudah,
yaitu hanya sebutkan saja nama variabel yang akan digunakan kemudian isi dengan nilai
yang dikehendaki, dengan perintah "var", seperti tampak pada script di bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
var Nilai;
var Nama1, Nama2;
var Jumlah = 100;

Nilai = 20;
Nama1 = "Wawan";
Nama2 = "Gunawan";
document.writeln(Nilai + "<br>");
document.writeln(Nama1 + "<br>");
document.writeln(Nama2 + "<br>");
document.writeln(Jumlah + "<br>");
//-->
</script>
</body>
</html>

Akan tampak seperti gambar di bawah ini

Perhatikan bahwa pada setiap baris perintah diakhiri dengan tanda ";" sebaiknya tanda ";"
diberikan pada setiap akhir baris kode program, hal ini disebabkan karena standar

2021 Pemrograman Web 1


5 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Javascript yang berlaku sehingga lebih kompatibel dengan semua jenis browser yang
ada.

Dari contoh di atas dapat dilihat bahwa variabel Nilai dan Jumlah berisi data Numerik
sedangkan variabel Nama1 dan Nama2 berisi data String. Untuk menampilkan isi dari
masing-masing variabel dipergunakan perintah document.writeln dan diisi dengan
nama variabel yang hendak ditampilkan.
Nilai pada variabel dapat dikenai proses perhitungan matematis, seperti penambahan,
pengurangan, pembagian maupun perkalian. Sehingga dengan kemampuan seperti itu
maka dapat dibuat rumus-rumus matematis yang menggunakan variabel tersebut seperti
tampak pada script di bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
var Panjang, Lebar, Luas;

Panjang = 20;
Lebar = 50;

Luas = Panjang * Lebar;


document.writeln("Hasilnya " + Panjang +"*"+ Lebar +"="+
Luas);

//-->
</script>
</body>
</html>

Dengan tampilan seperti di bawah ini

2021 Pemrograman Web 1


6 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Coba ubahlah kode di atas untuk nilai Panjang dan Lebar, kemudian simpan dan lakukan
Refresh pada Browser untuk melihat hasil yang ditampilkan. Proses matematis hanya
dapat berfungsi apabila isi data dari variabel tersebut adalah Numerik sedangkan untuk
jenis data String hanya dapat menggunakan proses penambahan saja, seperti terlihat di
bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
var Lengkap, Status, Nama, Gelar;

Status = "Bpk.";
Nama = "Wawan Gunawan";
Gelar = " S.Kom., M.T.";

Lengkap = Status + Nama + Gelar;


document.writeln("Nama " + Lengkap);

//-->
</script>
</body>
</html>

Maka akan dihasilkan tampilan seperti di bawah ini

Coba ubahlah kode di atas untuk nilai Status, Nama ataupun Gelar, kemudian simpan
dan lakukan Refresh pada Browser untuk melihat hasil yang ditampilkan. Nilai data yang
bersifat String selalu ditandai dengan tanda petik pembuka dan penutup seperti: "Jl.
Jambu 20", sehingga apabila nilai data Numerik diberi tanda petik pembuka dan penutup
akan diperlakukan sebagai String, seperti tampak di bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">

2021 Pemrograman Web 1


7 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
<!--
var Nilai1, Nilai2, Jumlah;

Nilai1 = "10";
Nilai2 = "20";
Jumlah = Nilai1 + Nilai2;

document.writeln(Jumlah);

//-->
</script>
</body>
</html>

Maka akan dihasilkan seperti pada gambar di bawah ini

Perhatikan bahwa hasil dari Jumlah tidak sesuai dengan yang diinginkan, hal ini
disebabkan
karena Nilai1 dan Nilai2 merupakan data String dan bukan data Numerik. Coba ubahlah
nilai
variabel Nilai1 dan Nilai2, perhatikan lagi perubahan yang terjadi pada nilai yang disimpan
di
variabel Jumlah.
Selain dapat menampilkan pada halaman browser, Javascript dapat juga menampilkan
pesan pada kotak dialog tersendiri dengan mempergunakan perintah alert, seperti di
bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
alert("Hallo UMB");
//-->
</script>
</body>
</html>
Dengan tampilan akan seperti pada gambar di bawah ini

2021 Pemrograman Web 1


8 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Selain dapat menampilkan teks atau pesan dengan menggunakan kotak dialog,
Javascript juga dapat meminta input atau masukan dari user dengan menggunakan kotak
dialog. Perintah yang dipergunakan untuk meminta masukan dari user adalah prompt,
seperti di bawah ini:

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<script language="javascript">
<!--
var nama;

nama = prompt("Isi nama Anda", "");


document.write("Hasil isian nama Anda adalah: "+nama);
//-->
</script>
</body>
</html>

Maka hasil yang akan ditampilkan seperti di bawah ini

Ketika isian kita isikan maka akan dihasilkan seperti gambar di bawah ini

2021 Pemrograman Web 1


9 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Tugas Latihan:
a. Ubahlah kode program Javascript untuk perhitungan Luas, dengan menggunakan
kotak dialog untuk memasukkan nilai Panjang dan Lebar, serta menggunakan
kotak dialog untuk menampilkan hasil perhitungan Luas.
b. Buatlah kode program Javascript yang pada saat dijalankan akan menanyakan
Nama Barang, Harga Barang, dan Jumlah Barang untuk 3 barang yang berbeda
dan akan menampilkan hasil penjumlahan dari total harga yang harus dibayar dari
ke-3 barang tersebut
c. Program akan menanyakan Nama Barang, Harga Barang dan Jumlah Barang.
Hasil perhitungan akan menampilkan dalam bentuk table.

2021 Pemrograman Web 1


10 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Daftar Pustaka
Bahra. 2005. Analisis dan Desain Sistem Informasi. Tangerang: Graha Ilmu.

Hermawan, Benny . 2005. Menguasai Java 2 & Object Oriented Programming.


Yogyakarta: Andi Yogyakarta.

Hakim, Rachmad dan Sutarto . 2009. Konsep Pemrograman Java dan Penerapannya
untuk Membuat Software Aplikasi. Jakarta: Elex Media Komputindo.

Jogiyanto. 2005. Analisis & Disain Sistem Informasi: Pendekatan Terstruktur Teori dan
Praktek Aplikasi Bisnis. Yogyakarta: Andi Yogyakarta.

2021 Pemrograman Web 1


11 Wawan Gunawan, S.Kom., M.T.
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/

Anda mungkin juga menyukai