Scribd
Unggah
6 tayangan

SMK DP 1 - JavaScript - Sesi 3

Diunggah oleh

rizky ponco
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
6 tayangan

SMK DP 1 - JavaScript - Sesi 3

Diunggah oleh

rizky ponco
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 25

SKPI WEB PROGRAMMING

JAVA ≠ JAVASCRIPT
------------ SESI 3 ------------
MENGENAL FUNGSI
PADA JAVASCRIPT

FAIZAL RIZA 2 2
PEMBUATAN FUNGSI

Fungsi JavaScript adalah blok kode yang dirancang


untuk melakukan tugas tertentu. Fungsi JavaScript
dijalankan ketika "sesuatu" memanggilnya.

ATURAN MEMBUAT FUNGSI


1. Fungsi JavaScript didefinisikan dengan keyword "function", lalu diikuti
oleh nama fungsi, lalu diikuti oleh tanda kurung ( ).
2. Nama fungsi dapat berisi huruf, angka, underscore (_), dan tanda dolar
($ : aturan yang sama dengan variabel).
3. Tanda kurung termasuk nama parameter dipisahkan oleh koma,
contohnya seperti (parameter1, parameter2, ...)
4. Kode yang akan dieksekusi ditempatkan di dalam kurung kurawal: { }

FAIZAL RIZA
FUNGSI DENGAN RETURN

SINTAKS UMUM
function name(parameter1, parameter2, parameter3)
{
code to be executed
}

FUNGSI DENGAN RETURN


function kalikanAngka(a, b)
{
return a*b; //Function mengembalikan hasil kali antara a dan b
}

FAIZAL RIZA
FUNGSI DENGAN RETURN
“ Sebuah fungsi JavaScript akan selalu mengembalikan
"return" meskipun kita tidak menentukan isi dari return tersebut. “
CONTOH Pada contoh di samping, kita
membuat fungsi dengan nama
<!DOCTYPE html> fungsi kalikanAngka dengan
<html> parameter angka1 dan angka2.
<body> Untuk menampilkan output dari
<div id="data"></div> pemanggilan fungsi tersebut, kita
bisa menggunakan console.log lalu
<script>
panggil fungsi disertai dengan
function kalikanAngka(angka1, angka2)
mengirim angka1 dan angka2.
{
return angka1*angka2;
console.log(kalikanAngka(5,20));
}
console.log(kalikanAngka(5,20));
</script>
</body>
</html>
FUNGSI DENGAN RETURN
Bila ingin menampilkan outputnya di halaman browser, kita bisa
menggunakan kode di bawah ini.
<!DOCTYPE html>
<html>
<body>
<div id="data"></div>
<script>
function kalikanAngka(angka1, angka2)
{
return angka1*angka2;
}
document.getElementById('data').innerHTML= "Hasil Perkalian = " +
kalikanAngka(5, 20);
</script>
</body>
</html>
VARIABEL LOKAL PADA FUNGSI
SMK Dinamika Pembangunan 1 Jakarta

FAIZAL RIZA 7
VARIABEL LOKAL PADA FUNGSI
Variabel yang dideklarasikan dalam fungsi JavaScript, menjadi
variabel lokal (hanya di fungsi tersebut). Variabel lokal hanya dapat
diakses dari dalam fungsi.

//Kode disini tidak bisa menggunakan variabel namaMobil


function fungsiMobil()
{
var namaMobil = "Avanza";
//Kode disini dapat menggunakan variabel namaMobil
}
//Kode disini tidak bisa menggunakan variabel namaMobil
VARIABEL LOKAL PADA FUNGSI
CONTOH
<!DOCTYPE html>
<html>
<body>
<div id="data"></div>
<div id="data2"></div>
<script>
fungsiMobil();
function fungsiMobil()
{
Outputnya ketika kita
var namaMobil = "Avanza";
gunakan namaMobil di
document.getElementById('data').innerHTML=
dalam fungsi maka akan
'Pemanggilan di dalam fungsi '+namaMobil;
tercetak sedangkan ketika
}
kita gunakan di luar fungsi
document.getElementById('data2').innerHTML=
maka tidak dikenali.
'Pemanggilan di luar fungsi '+namaMobil;
</script>
</body>
</html>
KUPAS TUNTAS ARRAY
PADA JAVASCRIPT

FAIZAL RIZA 10 10
PENGERTIAN ARRAY
Array merupakan variabel khusus yang dapat menampung lebih dari
satu data pada suatu waktu.

Contohnya kita mempunyai daftar item buah-buahan seperti pisang,


pepaya, durian dan apel, kita bisa menyimpan semua item tersebut
dalam satu variabel, misalnya variabel buah.

Contoh lainnya kita mempunyai daftar item merk mobil seperti Avanza,
Agya dan Ayla kita bisa menyimpan daftar item tersebut dalam satu
variabel mobil.

CONTOH

var buah = ["pisang", "pepaya", "durian", "apel"];

var mobil = ["Avanza", "Agya", "Ayla"];


MENGGUNAKAN ARRAY PADA JAVASCRIPT
SMK Dinamika Pembangunan 1 Jakarta

FAIZAL RIZA 12
CARA INISIASI ARRAY
Untuk membuat array pada JavaScript, kita bisa menggunakan
sintaks di bawah ini.

var nama_array = [item1, item2, item3, ....];

ATAU

var nama_array = new Array(item1, item2, item3, ....);

Contoh :

var mobil = ["Avanza", "Agya", "Ayla"];

var mobil = new Array("Avanza", "Agya","Ayla")


MENGAKSES DATA ARRAY (1)
Untuk mengakses data yang ada di dalam array kita bisa
menggunakan sintaks di bawah ini.

Untuk menampilkan di console :

console.log(nama_array[key]);

Untuk menampilkan di browser :

document.getElementById('divid').innerHTML=nama_array[key];

“ key merupakan kunci dari elemen array, elemn array pertama memiliki
kunci 0, elemen array kedua memiliki kunci 1 begitu seterusnya “
MENGUBAH DATA ARRAY
Selain dapat mengakses data, kita juga bisa mengubah data array.
Sintaksnya seagai berikut :

nama_array[key]="newItem";

Contoh :

var mobil = ["Avanza", "Agya", "Ayla"];

Ubah elemen array pertama (key=0) dengan Fortuner :

Mobil[0]= "Fortuner" ;

console.log(mobil[0]);
MENGHITUNG JUMLAH DATA ARRAY

Kita juga dapat menghitung jumlah array, hal ini sangat berguna ketika
kita mempunyai banyak elemen array yang tidak memungkinkan untuk
dihitung secara manual. Sintaksnya sebagai berikut :

nama_array.length;

Contoh :

var mobil = ["Avanza", "Agya", "Ayla"];

Menampilkan jumlah data Array:

console.log(mobil.length);
MENGAKSES DATA ARRAY DENGAN array.length

Sebelumnya kita sudah membahas cara mengakses data dengan key


yang sudah ditentukan, kali ini kita akan membahas cara mengakses
elemen terakhir dalam array. Hal ini merupakan aplikasi dari
pembahasan tentang menghitung jumlah elemen array sebelumnya.

Untuk mengakses elemen terakir pada array, kita tinggal memangil key
elemen terakhir (berasal dari jumlah elemen array) dikurangi 1 (karena
elemen pertama dimulai dari 0)

var mobil = ["Avanza", "Agya", "Ayla"];


var mobilPertama = mobil[0];//Output : "Avanza"
var mobilTerakhir = mobil[mobil.length - 1]; // output : "Ayla"
MENGAKSES DATA ARRAY DENGAN array.length

Untuk mencobanya kita bisa menyimak kode sebagai berikut.


<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<div id="dividx"></div>
<script>
var mobil = ["Avanza", "Agya", "Ayla","Fortuner","BMW", "Kijang"];
var mobilPertama = mobil[0];
var mobilTerakhir = mobil[mobil.length -1];
console.log("Mobil Pertama adalah "+mobilPertama);
console.log("Mobil Terakhir adalah "+mobilTerakhir);
document.getElementById('divid').innerHTML="Mobil Pertama adalah
"+mobilPertama;
document.getElementById('dividx').innerHTML="Mobil Terakhir adalah
"+mobilTerakhir;
</script>
</body>
</html>
MENGUBAH ARRAY TO STRING

Untuk mencobanya kita bisa menyimak kode sebagai berikut.

<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<script>
var mobil = ["Avanza", "Agya", "Ayla"];
var buah = ["pisang", "pepaya", "rambutan"];
console.log("Saya telah memiliki banyak mobil antara lain
"+mobil.toString());
document.getElementById('divid').innerHTML="Saya suka buah-buahan
"+buah.toString();
</script>
</body>
</html>
MENGUBAH ARRAY MENJADI String (.join)

Untuk mencobanya kita bisa menyimak kode sebagai berikut.

<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<script>
var mobil = ["Avanza", "Agya", "Ayla"];
var buah = ["pisang", "pepaya", "rambutan"];
console.log("Saya telah memiliki banyak mobil antara lain
"+mobil.join(" * "));
document.getElementById('divid').innerHTML="Saya suka buah-buahan
"+buah.join(" dan ");
</script>
</body>
</html>
MENGELUARKAN DATA DARI Array (.pop)

Untuk mencobanya kita bisa menyimak kode sebagai berikut.

<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<script>
var mobil = ["Avanza", "Agya", "Ayla"];
mobil.pop();
document.getElementById("divid").innerHTML = mobil;
</script>
</body>
</html>
MEMASUKKAN DATA KE Array (.push)

Untuk mencobanya kita bisa menyimak kode sebagai berikut.

<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<script>
var mobil = ["Avanza", "Agya", "Ayla"];
mobil.push("Fortuner");
console.log("Saya telah memiliki banyak mobil antara lain
"+mobil.join(" * "));
</script>
</body>
</html>
MENGGABUNGKAN DUA Array (.concat)

Untuk mencobanya kita bisa menyimak kode sebagai berikut.

<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<script>
var mobilMahal = ["Fortuner", "Lamborghini"];
var mobilBudget = ["Avanza", "Agya", "Ayla"];
var mobil=mobilBudget.concat(mobilMahal);
document.getElementById("divid").innerHTML = mobil;
</script>
</body>
</html>
MENGGABUNGKAN TIGA Array (.concat)

Untuk mencobanya kita bisa menyimak kode sebagai berikut.

<!DOCTYPE html>
<html>
<body>
<div id="divid"></div>
<script>
var mobilMahal = ["FOrtuner", "Lamborghini"];
var mobilBudget = ["Avanza", "Agya", "Ayla"];
var motor = ["Verza", "CB 150R", "MegaPro"]
var kendaraanBermotor = mobilBudget.concat(mobilMahal,motor);
document.getElementById("divid").innerHTML = kendaraanBermotor;
</script>
</body>
</html>
THANK YOU!

contact us at:

FAIZAL RIZA

[email protected]

08132319933

FAIZAL RIZA 25

Anda mungkin juga menyukai