Bab 3

BAB 3
JAVASCRIPT
Tujuan Pembelajaran
1. Mahasiswa terampil menggunakan javascript dalam mengembangkan aplikasi berbasis
web pada sis front-end.
2. Mahasiswa memiliki pengetahuan tentang javascript dan client side script
3. Mahasiswa memiliki jiwa enterpreneurship
Pengantar
Secara mendasar, internet yang ada sekarang hanya menampilkan static pages. Dalam internet
terdapat link yang berfungsi sebagai penghubung antar static pages tersebut. JavaScript diciptakan
sebagai sebuah solusi yang memungkinkan halaman website menjadi dinamis dan dapat memberikan
interaksi dengan pengguna. JavaScript merupakan bahasa pemrograman berbasis teks yang beroperasi
di sisi pengguna. Secara umum JavaScript dijalankan pada browser. JavaScript pertama kali dikenal
sebagai LiveScript yang dikembangkan oleh NetScape pada tahun 1995 sebelum kemudian namanya
berubah menjadi JavaScript seperti yang kita kenal saat ini.
ECMA-262 Speciftcation mendefinisikan karakteristik standar dari JavaScript sebagai berikut :

 JavaScript merupakan bahasa pemrograman yang ringan.
 JavaScript diciptakan untuk menghasilkan network-centric application.
 JavaScript terintegrasi dengan Java dan HTML.
 Bersifat terbuka dan cross-platform.UML (Unified Modelling Language) adalah notasi yang
diperoleh dari hasil penyatuan
3.1 Client Side Javascript

Client-side JavaScript merupakan bentuk yang sangat sering ditemui dari sebuah JavaScript. Sebuah
kode JavaScript dapat dimasukkan ke dalam sebuah dokumen web HTML untuk kemudian akan
dijalankan oleh browser. Ini menunjukkan bahwa sebuah halaman website bisa tidak dalam bentuk
static pages saja akan tetapi dapat disertakan pula aplikasi yang mampu berinteraksi langsung dengan
manusia, dapat mengendalikan browser, dan menampilkan dokumen web HTML dalam format yang
dinamis.
JavaScript sebagai bahasa pemrograman berbasis teks menawarkan beberapa keunggulan,
diantaranya :
 Interaksi dengan server yang sedikit: JavaScript memungkinkan pengguna bahwa informasi yang
mereka masukkan dalam sebuah form di browser dapat divalidasi terlebih dahulu sebelum
diteruskan ke server. Hal ini dapat menghemat lalu lintas data ke server dan sebaliknya yang
menyebabkan sedikitnya waktu akses ke sisi server.
 Interaksi balik langsung ke sisi pengguna: Pengguna tidak harus menunggu sebuah halaman
website di muat ulang kembali untuk dapat melihat kesalahan yang dilakukan ketika memasukkan
informasi di halaman website.
 Interaksi yang lebih intens: Pengembang website dapat membuat tampilan halam-an website yang
mampu bereaksi ketika pengguna menunjuk suatu objek di halaman website dengan mouse atau
tombol di keyboard.
 Tampilan yang lebih menarik: Pengembang dapat menggunakan JavaScript untuk menyertakan
fitur-fitur tertentu seperti drag and drop dan slider agar tampilan website menjadi lebih kaya dan
menarik.
JavaScript bukan merupakan bahasa yang sudah dikatakan lengkap karena dalam JavaScript juga
terdapat beberapa keterbatasan fitur diantaranya :
 Client-side JavaScript tidak memungkinkan adanya pembacaan atau penulisan berkas. Hal ini
ditetapkan sebagai sebuah keterbatasan karena alasan keamanan.
 JavaScript tidak dapat digunakan dalam aplikasi jaringan dikarenakan JavaScript tidak
mendukung untuk keperluan itu.
 JavaScript tidak memiliki fitur multithreading atau multiprocessor di dalamnya.
Sekali lagi, JavaScript merupakan bahasa pemrograman dengan fungsi untuk membuat sebuah
halaman web berbasis HTML yang bersifat statis menjadi dinamis dengan berbagai interaksi di
dalamnya
3.2 Dasar – Dasar Javascript

3.2.1 Syntax JavaScript
JavaScript dapat di implementasikan dengan menuliskan perintah JavaScript yang ditempatkan
diantara tag HTML <script> ... </script> dalam halaman web. Tag <script> pada JavaScript akan
memberikan perintah kepada browser untuk memulai menjalankan semua perintah yang ada di dalam
tag <script> tersebut. Berikut merupakan bentuk sederhana dari sebuah syntax JavaScript.
<script >
Tuliskan perintah Java Script anda disini
</ script >
<!DOCTYPE html>
<html>
<body>
<h2>Contoh Javascript</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Polimdo.";
</script>
</body>
</html>
3.2.2 Variabel dan Array pada JavaScript

Bagian fundamental dari bahasa pemrograman adalah berapa banyak jenis data yang di dukung oleh
bahasa pemrograman itu sendiri. JavaScript dapat berjalan dengan tiga jenis tipe data primitif yakni:
 Numbers, contoh 123, 120.50 dsb.
 Strings atau teks, contoh “Ini adalah teks” dsb.
 Boolean, contoh true or false.
JavaScript juga mendefinisikan dua jensi tipe data lainnya yakni null dan undefined. Masing - masing
dari tipe data tersebut hanya mendefinisikan suatu nilai tunggal. JavaScript juga mendukung tipe data
komposit yakni object.
Seperti halnya bahasa pemrograman lainnya, JavaScript juga memiliki variabel. Variabel dapat
dimaksudkan sebagai sebuah wadah. Dalam variabel dapat dimasukkan sebuah data dan kemudian
dapat dipanggil dengan memberi nama pada wadah tersebut.
Variabel dalam JavaScript harus di deklarasikan terlebih dahulu. Variabel dideklarasikan dengan kata
kunci var seperti pada contoh baris program berikut.
<!DOCTYPE html>
<html>
<body>
<h2>Contoh JavaScript </h2>

<p>Pada contoh ini , x, y, dan z adalah variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
3.2.3 Array
Array pada JavaScript memungkinkan anda untuk dapat menyimpan beberapa nilai dalam satu buah
variabel. Array menyimpan beberapa nilai dengan tipe data yang sama dalam satu variabel. Array
pada umumnya digunakan untuk menyimpan sekumpulan set data, tapi seringkali array
direpresentasikan sebagai kumpulan variabel dengan tipe data yang sama. Berikut adalah syntax dasar
untuk membuat array.
<!DOCTYPE html>
<html>
var buah = new Array ( " apel " , " jeruk " , "mangga" ) ;
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Avanza", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
Setiap anggota dari sebuah array memiliki nomer unik mereka masing-masing. Anggota dari array
</html>
dapat diakses dengan menyertakan nama array yang akan diakses dilanjutkan dengan menyertakan
nomer elemen array yang akan diakses. Secara umum, array diakses dengan menggunakan cara loop
untuk mengakses anggota array. Pada subbab selanjutnya akan dijelaskan mengenai loop atau
perulangan untuk mengakses array.
Berikut ialah contoh kode program untuk mengakses array secara satu persatu dalam satu kali kerja
dan menampilkan isinya langsung pada layar.
<!DOCTYPE html>
<html>
<body>
<p>Aksess member array menggunakan FOR Loop</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
3.2.4 Perulangan pada JavaScript

JavaScript mendukung beberapa bentuk perulangan seperti while, do...while, for loop, dan for...in.
Setiap tipe dari loop tersebut memiliki masing-masing kelebihan dalam kondisi tertentu. Sebagai
contoh, perulangan for menyajikan kegunaan dalam menyajikan kapan sebuah perulangan harus
dimulai dan diakhiri.
 While Loop
Bentuk perulangan yang paling sederhana ialah while loop. Kegunaan dari while loop adalah untuk
mengeksekusi baris perintah atau kode program secara berulang selama sebuah kondisi dinyatakan
bernilai benar atau true. Ketika sebuah kondisi atau ekspresi bernilai salah atau false, perulangan akan
berakhir.
Pada Gambar 3.1 dijelaskan mengenai alur logika dari while loop
Gambar 3.1 Flowchart While Loop
Berikut adalah baris kode yang mengimplementasikan While Loop
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>Bialngan yang tampil adalah : " + i;
i++;
}
</script>
</body>
</html>
 Do…..While Loop
Do while loop memiliki fungsi yang hampir sama dengan while loop, hanya saja pada while loop
pengecekan kondisi dilakukan pada akhir perulangan. Ini berarti perulangan akan selalu dilakukan
selama setidaknya satu kali, walaupun kondisi perulangan tersebut bernilai salah atau false. Gambar
3.2 menyajikan alur logika dari do while loop.
Gambar 3.2 Flowchart Do….Wile Loop
Contoh penggunaan Do….While loop adalah seperti berikut :
<script>
var text = ""
var i = 0;
do {
text += "<br>Bilangan yang tampil : " + i;
i++;
}
while (i < 10);
</script>
 For Loop
For loop adalah bentuk perulangan yang paling sederhana. Dalam for loop terdapat 3 bagian penting
yaitu:
o Loop initialization, ketika kita menetapkan nilai awal dari permulaan perulangan yang dibuat.
loop initialization dimulai ketika perulangan belum terjadi.
o Test statement, dimana dimulainya pengujian apakah kondisi yang ada bernilai benar atau tidak.
Jika kondisi bernilai benar atau true, maka baris kode yang ada di dalam perulangan akan
dieksekusi
o Iteration statement, kondisi dimana seorang programmer dapat menambah atau meng- urangi
perhitungan dari perulangan tersebut.
Ketiga bagian tersebut dapat dituliskan dalam satu baris kode program dengan pemisah berupa titik
koma. Gambar 3.3 menyajikan alur logika dari for loop.
Gambar 3.3 Flowchart For Loop
Berikut syntax dari for loop pada JavaScript

<!DOCTYPE html>
<html>
<body>
<p>Aksess member array menggunakan FOR Loop</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
</script>
</body>
</html>
3.2.5 Fungsi pada JavaScript
Fungsi adalah sekumpulan baris perintah yang dapat digunakan berulang-ulang dan dapat dipanggil
kembali dimanapun dari program. Fungsi memungkinkan terjadinya proses pengetikan kode program
yang dilakukan berulang-ulang yang dapat menghabiskan waktu. Fungsi juga dapat mempermudah
programmer membagi sebuah program menjadi beberapa bentuk fungsi yang lebih kecil dan mudah
untuk diatur.
Seperti bahasa pemrograman lainnya, JavaScript juga mendukung semua fitur yang memungkinkan
untuk dapat menulis program secara modular dengan fungsi. Contohnya seperti fungsi alert() dan
write(). JavaScript juga memungkinkan kita untuk dapat membuat fungsi versi anda sendiri. Kali ini
akan dibahas bagaimana cara membuat dan menerapkan fungsi yang anda buat sendiri.
Berikut ialah syntax dasar dari sebuah fungsi dan contoh penggunaannya.
Nama_fungsi (parameter1, parameter2, parameter3)

{
Kode untuk dieksekusi
}
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Contoh fungsi matematik dan cara pemanggilannya</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Luaran dari fungsi ini adalah sebagai berikut :
Gambar 3.4 Luaran Program
3.2.6 Kondisi pada JavaScript

JavaScript mendukung bentuk kondisional yang dapat dipergunakan untuk mengambil berbagai
macam tindakan yang diperlukan berdasarkan kondisi tertentu. Berikut akan dijelaskan bagaimana
aturan kondisional If..else dapat bekerja. Alur logika dari bentuk kondisional If..else dapat dilihat
pada Gambar 3.5
Gambar 3.5 Flowchart if … else
JavaScript mendukung beberapa bentuk dari if..else yakni:

 if statement; bentuk kondisional dasar yang memungkinkan JavaSCript untuk dapat membuat
keputusan dan menjalankan perintah kondisional tertentu. Dalam bentuk kondisional if, ketika
nilai dari ekspresi disetujui atau bernilai benar, perintah di dalam blok if akan dijalankan.
Sebaliknya jika nilai dari ekspresi salah, maka tidak akan ada perintah yang akan dijalankan.
Sebagian besar penggunaan kondisional seperti if akan melibatkan operator perbandingan dalam
pengambilan keputusan.
 if...else statement; If else statement adalah bentuk lain dari kondisional if yang memungkinkan
JavaScript untuk mengeksekusi perintah secara lebih terkontrol.
 if...else if... statement; Bentuk if...else if... statement adalah bentuk lanjutan dari if...else yang
memungkinkan JavaScript untuk membuat keputusan yang tepat berdasarkan beberapa kondisi
sekaligus.
 Switch Case statement; terdapat satu bentuk kondisional yang mulai diperkenalkan sejak
JavaScript versi 1.2 yakni bentuk kondisional switch-case. Switch-case memungkinkan
pengembangan lebih lanjut dari bentuk kondisional if... else if...
Alur logika dari bentuk kondisional switch case dapat dilihat pada Gambar 3.6
Gambar 3.6 Flowchart switch
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var day;
3.2.7 Events pada JavaScript
JavaScript sebagai bahasa pemrograman menawarkan bentuk interaksi website dinamis dengan
memperlihatkan timbal balik dari website kepada penggunanya. Interaksi yang terjadi tersebut pada
JavaScript dijalankan melalui apa yang disebut dengan events.
Ketika pengguna melakukan akses terhadap website yang dituju, ini dikatakan sebuah event.
Begitupun saat pengguna melakukan klik terhadap button yang ada pada website, hal ini juga
dikategorikan sebagai event. Contoh lain seperti Menekan sembarang tombol, menutup halaman
website, melakukan pengaturan besar kecilnya halaman website dll.
Programmer dapat menggunakan semua event tersebut untuk menjalankan kode program JavaScript
dalam bentuk respon interaktif, dimana dapat mempengaruhi kegiatan seperti penggunaan button
untuk menutup halaman website, menampilkan pesan kepada pengguna terkait kegiatan tertentu,
melakukan respon validasi data, dan berbagai macam bentuk respon virtual lainnya.
Berikut adalah beberapa tipe event yang sering digunakan:
 Onclick Event
Merupakan event yang paling sering digunakan dimana event ini muncul ketika pengguna dari
website melakukan klik menggunakan tombol kiri dari mouse. Pada event onclick ini programmer
dapat menyisipkan respon JavaScript seperti validasi, warning dll.
Berikut ialah contoh kode program yang dapat dicoba untuk mempelajari bagaimana onclick event
bekerja
<!DOCTYPE html>
<html>
<body>
<p>Klik tombol untuk menampilkan tanggal.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Gambar 3.7 Luaran Onclick Event
 Onsubmit Event
Merupakan event yang muncul ketika pengguna dari website melakukan perintah submit dalam
pengisian sebuah form. Pada onsubmit terdapat fungsi validate() yang ditempatkan sebelum
memasukkan data ke dalam webserver. Jika fungsi validate() bernilai benar atau true, form yang telah
diisi kemudian akan di submit ke webserver. Sebaliknya, form tidak dapat masuk ke webserver.
Berikut ialah contoh kode program yang dapat dicoba untuk mempelajari bagaimana onsubmit event
bekerja
<!DOCTYPE html>
<html>
<body>
<p>Saat Form disubmit , sebuah fungsi akan ditrigger</p>
<form action="/action_page.php" onsubmit="myFunction()">

Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form telah disubmit");
}
</script>
</body>
</html>
Gambar 3.8 Luaran OnSubmit Event
 Onmouseover dan onmouseout Event

Dua event berikut akan membantu programmer untuk memberikan efek terhadap gambar maupun
teks. onmouseover akan bekerja ketika pengguna mengarahkan kursor mouse mereka ke elemen
apapun yang ada di dalam sebuah website. onmouseout akan bekerja ketika pengguna tidak sedang
mengarahkan atau menggerakkan mouse menjauhi elemen yang ada pada website.
Berikut ialah contoh kode program yang dapat dicoba untuk mempelajari bagaimana onmouseover
dan onmouseout event bekerja.
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"

style="background-
color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
RINGKASAN
 JavaScript merupakan bahasa pemrograman berbasis teks yang beroperasi di sisi pengguna dan
secara umum JavaScript dijalankan pada browser.
 Keunggulan dari javascript meliputi interaksi dengan server yang sedikit, Interaksi balik
langsung ke sisi pengguna, Interaksi yang lebih intens dan memiliki tampilan yang lebih
menarik.
 Tipe data yang didukung javasrcipt meliputi tipe data primitif (numbers, string dan boolean),
tipe data null dan undefined, dan tipe data objek.
 Array adalah kumpulan variabel dengan tipe data yang sama dengan syntax dasar sebagai
berikut : var nama_array = new Array (value1,value2,…)
 JavaScript mendukung beberapa bentuk perulangan seperti while, do...while, for loop, dan
for...in.
 Tiga bagian penting dari For Loop meliputi loop initialization, test statement dan Iteration
statement.
 Fungsi adalah sekumpulan baris perintah yang dapat digunakan berulang-ulang dan dapat
dipanggil kembali dimanapun dari program dengan sintak dasar adalah :
Nama_fungsi (parameter1, parameter2, parameter3)
{
Kode untuk dieksekusi
}
 Events memungkinkan terjadinya interaksi dinamis dalam satu website
LATIHAN SOAL
1. Jelaskan karekteristik standart dari javascript menurut ECMA-262 ?

2. Jelaskan keunggulan dari javascript sebagai salah satu dari client side script !
3. Jelaskan output dan makna dari listing code berikut ini :
4. Buatlah kode javascript untuk mencetak “polimdo 1” “polimdo 2” …5 !
5. Buatlah javascript sintaks berupa fungsi yang mengembalikan hasil kali dari dua parameternya
TES FORMATIF
1. Diberikan variabel array var mhs = ["Joni", "Toni", "Doni"] . Buatlah javascript sintaks untuk
mengakses nama mahasiswa yang pertama !
2. Buatlah javascript program yang memungkinkan user mendapatkan informasi tanggal hari ini
dengan menekan tombol !
3. Jelaskan karekteristik dari javascript !
4. Buatlah javascript program untuk mengkonversi farenheit ke celcius !

Bab 3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab 3

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 3

ECMA-262 Speciftcation mendefinisikan karakteristik standar dari JavaScript sebagai berikut :

3.1 Client Side Javascript

3.2 Dasar – Dasar Javascript

3.2.2 Variabel dan Array pada JavaScript

<h2>Contoh JavaScript </h2>

3.2.4 Perulangan pada JavaScript

Contoh penggunaan Do….While loop adalah seperti berikut :

Gambar 3.3 Flowchart For Loop

Berikut syntax dari for loop pada JavaScript

Nama_fungsi (parameter1, parameter2, parameter3)

Gambar 3.4 Luaran Program

3.2.6 Kondisi pada JavaScript

JavaScript mendukung beberapa bentuk dari if..else yakni:

Gambar 3.6 Flowchart switch

<p>Saat Form disubmit , sebuah fungsi akan ditrigger</p>

<form action="/action_page.php" onsubmit="myFunction()">

Gambar 3.8 Luaran OnSubmit Event

 Onmouseover dan onmouseout Event

<div onmouseover="mOver(this)" onmouseout="mOut(this)"

 Events memungkinkan terjadinya interaksi dinamis dalam satu website

1. Jelaskan karekteristik standart dari javascript menurut ECMA-262 ?

Anda mungkin juga menyukai