Modul 8 Fungsi Pada Javascript

Modul Praktikum Pemrograman WEB Teknik Komputer ||76
Modul 8
Fungsi Pada JavaScript
A. Judul
Fungsi Pada JavaScript
B. Tujuan
1. Mengenal Fungsi dasar java script Html.
2. Mahasiswa mampu memahami dan membuat Fungsi dasar javascript dalam dokumen
html menggunakan text editor dan menampilkannya lewat browser.
3. Membuat file javascript extensi html sederhana menggunakan text editor dan
menampilkan pada browser..
C. Alat dan Bahan
1. Laptop / PC
2. Notepad / Notepad++ / Text editor lainnya
3. Web browser (Firefox, Google Chrome, Internet Explorer atau yang lainnya)
D. Langkah Kerja
1. Bukalah notepad atau program text editor yang lain.
2. Ketikkan script doukumen html :Simpan (File|Save As), dengan nama
nama_modul8.html dan file.js (file harus disimpan dengan format .html dan .js)
3. Bukalah dokumen yang anda buat tadi dengan cara klik kanan Open with (pilih salah
satu web browser yang tersedia di komputer/PC Anda
4. Analisis dan jelaskan script Tugas Mandiri.
E. Teori Dasar dan Praktikum
1. Fungsi Pada Javascript
Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil
fungsi tersebut. Fungsi merupakan bagian subprogram yang melaksanakan suatu
tugas tertentu ketika diperlukan. Fungsi ini dapat dipanggil dengan cara menuliskan
nama fungsinya saja, dan disertai dengan parameter apabila ada. Jadi parameter
dalam suatu fungsi bersifat opsional.
Ada 4 cara yang bisa kita lakukan untuk membaut fungsi di Javascript: menggunakan
cara biasa, menggunakan ekspresi, menggunakan tanda panah (=>), dan
menggunakan constructor.
a. Menggunakan Cara Biasa
function namaFungsi(){
console.log("Hello World!");
}
b. Menggunakan Ekspresi
var namaFungsi = function(){
}
Kita menggunakan variabel, lalu diisi dengan fungsi. Fungsi ini sebenarnya
adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.

c. Menggunakan Tanda Panah (=>)
Kode Javascript masa kini, karena lebih sederhana. Sebenarnya hampir sama
dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah
(=>) sebagai ganti function. Pembuatan fungsi dengan cara ini disebut arrow
function.
var namaFungsi = () => {
}
// atau seperti ini (jika isi fungsi hanya satu baris):

var namaFungsi = () => console.log("Hello World!");
d. Membuat Fungsi dengan Kostruktor

Cara ini rentang mengalami gangguan untuk engine javascript karena body
fungsinya dibuat dengan String.
var namaFungsi = new Function('console.log("Hello World!");');
2. Cara Memanggil Fungsi

a. Memanggil Fungsi
Setelah mengetahui cara membuat fungsi, lalu bagaimana cara memanggilnya?
Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama
fungsinya seperti ini: namaFungsi();
// membuat fungsi
function sayHello(){
}
// memanggil fungsi
sayHello() // maka akan menghasilkan -> Hello World!
Untuk memanggil Fungsi bisa memanggil fungsi melalui atribut event pada
HTML.
<!DOCTYPE html>
<html>
<head>
<script>
// membuat fungsi
var saywelcome = () => alert("Selamat datang di mata kuliah pemrograman
WEB");
</script>
</head>
<body>

<a href="#" onclick="saywelcome()">Klik Aku!</a>
</body>
</html>

Output :
Analisis :
b. Fungsi Parameter
Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi.
<html>
<head>
<title>Belajar JavaScript Dasar</title>
</head>
<body>
<p></p>
<script>
function text2(paramText){
var text = "Belajar JavaScript " + paramText;
return text;
}
var isiText = text2("Mata Kuliah Pemrograman WEB");
document.getElementsByTagName("p")[0].innerHTML = isiText;
</script>
</body>
</html>
Output :
Analisis :

Contoh kode diatas terdapat sebuah function yang memiliki parameter dan
return pada garis merah. Saat memanggil function tersebut juga memerlukan
parameter pada baris hijau. Didalam function text2 terdapat sebuah variabel
yang dioper saat memanggil function tersebut. Karena saat memanggil function
tersebut berisi berisi parameter Mata Kuliah Pemrograman WEB
Mata Kuliah Pemrograman WEB

Artinya Script di atas juga mempunyai Fungsi yang Mengembalikan Nilai. Hasil
pengolahan nilai di dalam fungsi dapat digunakan untuk proses berikutnya,
sehingga fungsi harus mengembalikan nilai. Pengembalian nilai pada fungsi
menggunakan kata kunci return kemudian diikuti dengan nilai atau variabel
yang akan dikembalikan.
c. Contoh Sederhana Menggunakan Fungsi.

Terlebih dahulu buatlah Program ini berisi Crete, Read, Update, dan Delete data
barang yang tersimpan dalam sebuah array. Silahkan buat dua file baru:
Fungsi.js dan index.html
File index.html adalah file yang menampilkan halaman web. Sedangkan file
fungsi.js adalah programnya. Berikut ini isi file fungsi.js dan index.html:
var dataBarang = [
"Penggaris",
"Buku",
"Pulpen"
];
function showBarang(){
var listBarang = document.getElementById("list-barang");
// clear list barang
listBarang.innerHTML = "";
// cetak semua barang
for(let i = 0; i < dataBarang.length; i++){
var btnEdit = "<a href='#' onclick='editBarang("+i+")'>Edit</a>";
var btnHapus = "<a href='#'
onclick='deleteBarang("+i+")'>Hapus</a>";
listBarang.innerHTML += "<li>" + dataBarang[i] + " ["+btnEdit + " | "+
btnHapus +"]</li>";
}
}
function addBarang(){
var input = document.querySelector("input[name=barang]");
dataBarang.push(input.value);
showBarang();
}
function editBarang(id){
var newBarang = prompt("Nama baru", dataBarang[id]);
dataBarang[id] = newBarang;

showBarang();
}
function deleteBarang(id){
dataBarang.splice(id, 1);
showBarang();
}
showBarang();
Berikut ini isi file index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Fungsi di Javascript</title>
</head>
<body>
<fieldset>
<legend>Input Form</legend>
<input type="text" name="barang" placeholder="input nama barang..."
/>
<input type="button" onclick="addBarang()" value="Tambah" />
</fieldset>
<div>
<ul id="list-barang">
</ul>
</div>
<script src="fungsi.js"></script>
</body>
</html>
Output :

Analisis :
F. Tugas Mandiri
1. Buatlah satu aplikasi web untuk mengkonversi suhu dengan menggunakan fungsi
2. Buatlah satu aplikasi web untuk menampilkan besar diskon dari pembelian
barang. Inputan berupa : harga barang dan besar diskon.
3. Buatlah minimal 3 hitungan menggunakan java script menggunakan rumus
bangun ruang.

Modul 8 Fungsi Pada Javascript

Diunggah oleh

Informasi Dokumen

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

Modul 8 Fungsi Pada Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Praktikum Pemrograman WEB Teknik Komputer ||76

Modul Praktikum Pemrograman WEB Teknik Komputer ||77

// atau seperti ini (jika isi fungsi hanya satu baris):

d. Membuat Fungsi dengan Kostruktor

var namaFungsi = new Function('console.log("Hello World!");');

2. Cara Memanggil Fungsi

Modul Praktikum Pemrograman WEB Teknik Komputer ||78

Modul Praktikum Pemrograman WEB Teknik Komputer ||79

Mata Kuliah Pemrograman WEB

c. Contoh Sederhana Menggunakan Fungsi.

Modul Praktikum Pemrograman WEB Teknik Komputer ||80

Berikut ini isi file index.html:

Modul Praktikum Pemrograman WEB Teknik Komputer ||81

Modul Praktikum Pemrograman WEB Teknik Komputer ||82

Anda mungkin juga menyukai