Jurusan Teknologi Informasi Politeknik Negeri Malang

Jobsheet-3: Javascript
Mata Kuliah Desain dan Pemrograman Web
Pengampu: Tim Ajar Desain dan Pemrograman Web
Februari 2019

Topik
- Pengenalan konsep dasar Javascript
- Tipe Data, Operator, Fungsi di dalam Javascript
- Javascript didalam HTML

Tujuan
Mahasiswa diharapkan dapat:
1. Memahami konsep Javascript
2. Memahami Tipe data, operator dan fungsi di javascript
3. Mahasiswa mampu menjalankan javascript di file HTML

Pendahuluan

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language.
Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya
dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google
Chrome dan Mozilla Firefox. Bahasa pemrograman Client Side berbeda dengan bahasa
pemrograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan
di sisi server.

Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor dan web browser.
JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped dan
berorientasi objek. JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi
antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server.
Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik
tombol submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan
mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum diisi.
Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek apakah
seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun
untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web,
fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

Ada 3 macam cara penulidan tag javascript, yaitu;

1. Menuliskan Tag dengan diawali <script type=”text/javascript” > dan diakhir dengan
</script> atribut yang menginformasikan kepada browser bahwaprogram script yang ada
dalam tag tersebut adalah javascript dalam format text.
2. Menuliskan Tag dengan diawali <script language=”javascript” > dan diakhir dengan
</script> atribut ini digunakan dengan tujuan untuk menentukan versi dari javascript yang
digunakan, sebagai contoh <script language=”javascript1.2”> menyatakan bahwa
javascript yang kita gunakan adalah versi 2.1.
3. Menuliskan Tag dengan diawali <script language=”javascript” type=”text/javascript” >
dan diakhir dengan </script> cara campuran ini yaitu penulisan lama dan penulisan baru
disatukan, dilakukan untuk mengantisipasi pengakses halaman web yang masih
menggunakan browser web yang mendukung javascript, tetapi belum mendukung HTML

Praktikum Bagian 1. Belajar Javascript

Langkah Keterangan
1 Console Javascript dapat kita buka melalui Inspect Element->Console.

2 Jika kamu menggunakan Nodejs, maka cara mengakses console adalah dengan
mengetik perintah node pada Terminal.
 3 Penulisan script Javascript

Praktikum 2 : Memulai Javascript

Langkah Keterangan
1 Buat File baru berana hello_javascript.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Ketikkan kode program dibawah ini
 3 Buka browser lalu ketikkan alamat :localhost/belajarjavascript/hello_javascript.html
4 Amati apa yang muncul pada bwoser
5 Catat hasil pengamatanmu (Soal No.4)

6 Tambahkan heading 1 dan simpan dengan heading_javascript.html

7

8 Amati apa yang muncul pada bwoser

9 Catat hasil pengamatanmu (Soal No.8)

Praktikum 3 : Jendela Dialog

Jendela dialog merupakan jendela yang digunakan untuk berinteraksi dengan pengguna.
Ada tiga macam jendela dialog pada Javascript:
1. Jendela dialog alert();
2. Jendela dialog confirm();
3. Jendela dialog promp();
Langkah Keterangan
1 Buat File baru berana alert_javascript.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Ketikkan kode program dibawah ini

3 Amati apa yang muncul pada bwoser

4 Catat hasil pengamatanmu (Soal No.4)

5 Buat file baru bernama confirm_javascript.html dan simpan dalam direktori

belajarjavascript
6 Ketikkan kode program dibawah ini

7 Amati apa yang muncul pada bwoser

8 Catat hasil pengamatanmu (Soal No.7)
 9 Ketikkan kode program dibawah ini

10 Amati apa yang muncul pada bwoser

11 Catat hasil pengamatanmu (Soal No.10)

Praktikum 3 : Variabel
Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci var
lalu diikuti dengan nama variabel dan nilainya.
Contoh: var title = "Belajar Pemrograman Javascript";
Menampilkan isi Variabel
Untuk menampilkan isi variabel, kita bisa memanfaatkan fungsi-fungsi untuk menampilkan output
seperti:
Fungsi console.log() menampilkan output ke console javascript;
Fungsi document.write() menampilkan output ke dokumen HTML;
dan Fungsi alert() menampilkan output ke jendela dialog.
Langkah Keterangan
1 Buat File baru berana variabel_javascript.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Ketikkan kode program dibawah ini

3 Amati apa yang muncul pada bwoser

4 Catat hasil pengamatanmu (Soal No.3)

Menghapus Variabel
Penghapusan variabel dalam Javscript memang jarang dilakukan. Namun, untuk program
yang membutuhkan ketelitian dalam alokasi memori, penghapusan variabel perlu
dilakukan agar penggunaan memori lebih optimal.
Penghapusan variabel dapat dilakukan dengan katakunci delete.
Contoh:
bookTitle = "Belajar Pemrograman Javascript";
delete bookTitle;
Maka variabel bookTitle akan menghilang dari memori.
Praktikum 4 : FUNGSI

Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri,
maupun di program yang lain.
Fungsi di dalam Javascript adalah sebuah objek. Karena memiliki properti dan juga method.
Langkah Keterangan
1 Buat File baru bernama fungsi_javascript1.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Cara memanggil fungsi didalam kode Javascript biasanya ditulis dengan :

namaFungsi();
3 Ketikkan kode program berikut ini

4 Amati apa yang muncul pada browser

5 Catat hasil pengamatanmu (Soal No.4)

6 Parameter adalah variable yang menyimpan nilai untuk proses di dalam fungsi
Cara memanggil parameter dalam javascript adalah :
 7 Ketikkan kode program berikut ini

8 Amati apa yang muncul pada browser

9 Catat hasil pengamatanmu (Soal No.8)

Praktikum 5: Tipe Data

Tipe data adalah jenis-jenis data yang bisa kita simpan di dalam variabel.
Ada beberapa tipe data dalam pemrograman Javascript:

• String (teks)
• Integer atau Number (bilangan bulat)
 • Float (bilangan Pecahan)
• Boolean
• Object
Javascript adalah bahasa yang bersifat dynamic typing, artinya kita tidak harus menuliskan tipe
data pada saat pembuatan variabel seperti pada bahasa C, C++, Java, dsb. yang bersifat static
typing.
Ada beberapa aturan penulisan variabel dalam Javascript:
• Penamaan variabel tidak boleh menggunakan angka di depannya.
contoh:
// salah
var 123nama = "Polinema";

// benar
var nama123 = "Polinema";
• Penamaan variabel boleh menggunakan awal underscore.
contoh:
var _nama = "Polinema";
• Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua suku
kata.
Contoh:
var fullName = "Polinema";
• Penamaan variabel dianjurkan menggunakan bahasa inggris
Contoh:
var postTitle = "Tutorial Javascript untuk Pemula";

Langkah Keterangan
1 Buat File baru bernama tipedata_javascript1.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Ketikkan kode program berikut ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)

5 Ketikkan program dibawah ini dan simpan dengan nama string_javascript.html

6 Amati apa yang muncul pada browser

7 Catat hasil pengamatanmu (Soal No.6)

8 Ketikkan program dibawah ini dan simpan dengan nama Boolean_javascript.html

9 Amati apa yang muncul pada browser
10 Catat hasil pengamatanmu (Soal No.9)

11 Ketikkan program dibawah ini dan simpan dengan nama array_javascript.html

12 Amati apa yang muncul pada browser

13 Catat hasil pengamatanmu (Soal No.12)
Praktikum 6: Operator

Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel.

Operator dalam pemrograman terbagi dalam 6 jenis:

1. Operator aritmatika;
2. Operator Penugasan (Assignment);
3. Opeartor relasi atau perbandingan;
4. Operator Logika;
5. Operator Bitwise;
6. Operator Ternary;
7. Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti
penjumlahan, pengurangan, pembagian, perkalian, dsb.
8. Operator aritmatika terdiri dari:

Nama Operator Simbol

Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %

Langkah Keterangan
1 Buat File baru bernama operator_javascript1.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Ketikkan program dibawah ini
 3 Amati apa yang muncul pada browser
4 Catat hasil pengamatanmu (Soal No.3)

Praktikum 7: Percabangan
Dapat dikatakan bahwa percabangan dan putaran merupakan salah satu inti metode dalam semua
bahasa pemrograman yang ada di dunia, karena dengan percabangan dan putaran akan dihasilkan
sebuah program yang dinamis, dan bukan program yang linear serta bersifat statik. Karena
JavaScript merupakan salah satu cara dalam melakukan pemrograman web di sisi client, maka
JavaScript juga memiliki kemampuan ini.

Beberapa fungsi percabangan :

• Use if to specify a block of code to be executed, if a specified condition is true

• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed

Percabangan if
Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi
bernilai benar. Coba perhatikan flowchart berikut ini:
“Jika total belanja lebih besar dari Rp 100.000, Maka tampilkan pesan Selamat, Anda dapat
hadiah“

Kalau dibawah Rp 100.000 bagaimana?

Ya pesannya tidak ditampilkan.

Langkah Keterangan
1 Buat File baru bernama if_javascript.html dan simpan dalam direktori belajarjavascript.di
folder localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)
Percabangan if/else
Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan. Pilihan
pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else). Coba
perhatikan flowchart ini:

Ini adalah flowchart untuk mengecek password. Apabila password benar, pesan yang ada
pada blok hijau akan ditampilkan: “Selamat datang bos!” Tapi kalau salah, maka pesan
yang ada di blok merah yang akan ditampilkan: “Password salah, coba lagi!”
Langkah Keterangan
1 Buat File baru bernama ifelse_javascript.html dan simpan dalam direktori belajarjavascript.di
folder localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)

Percabangan switch/case

Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.

Strukturnya seperti ini:

Langkah Keterangan
1 Buat File baru bernama switchcase_javascript.html dan simpan dalam direktori belajarjavascript.di folder
localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)

Percabangan bersarang

Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut
percabangan bersarng atau nested if.
 Langkah Keterangan
1 Buat File baru bernama nestedif_javascript.html dan simpan dalam direktori belajarjavascript.di
folder localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)

Praktikum 7: Perulangan

Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang, berapapun yang kita
mau. Ada lima macam bentuk perulangan di Javascript. Secara umum, perulangan ini dibagi dua.
Yaitu: counted loop dan uncounted loop.
Perbedaanya:
• Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak perulangannya.
• Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia harus
mengulan.
Perulangan yang termasuk dalam Counted Loop:
1. Perulangan For
2. Perulangan Foreach
3. Perulangan Repeat
Perulangan yang termasuk dalam Uncounted Loop:
1. Perulangan While
2. Perulangan Do/While

Perulangan For di Javascript

Perulangan for merupakan perulangan yang termasuk dalam couted loop, karena sudah
jelas berapa kali ia akan mengulang.
Bentuknya seperti ini:

Langkah Keterangan
1 Buat File baru bernama for_javascript.html dan simpan dalam direktori belajarjavascript.di
folder localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)
 Perulangan While di Javascript
Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop.
Perulangan while juga dapat menjadi perulangan yang counted loop dengan memberikan
counter di dalamnya.
Langkah Keterangan
1 Buat File baru bernama while_javascript.html dan simpan dalam direktori belajarjavascript.di
folder localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)

Perulangan Do/While di Javascript

Perulangan do/while sama seperti perulangan while.
Perbedaanya:
Perulangan do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu
mengecek kondisi yang ada di dalam kurung while
Bentuknya seperti ini:
 Langkah Keterangan
1 Buat File baru bernama dowhile_javascript.html dan simpan dalam direktori
belajarjavascript.di folder localhost
2 Ketikkan program dibawah ini

3 Amati apa yang muncul pada browser

4 Catat hasil pengamatanmu (Soal No.3)

Referensi :
1) Jason Beaird, The principles of Beautiful Web Design
2) Rian Ariona, Belajar HTML dan CSS ( Tutorial Fundamental dalam mempelajari HTML
dan CSS)
3) Adi Hadisaputra, HTML dan CSS Fundamental dari Akar menuju Daun John
Duckett,HTML dan CSS design and build websites