Scribd
Unggah
11 tayangan29 halaman

SMK DP 1 - JavaScript - Sesi 2

Javascript

Diunggah oleh

rizky ponco
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 PDF, TXT atau baca online di Scribd
11 tayangan29 halaman

SMK DP 1 - JavaScript - Sesi 2

Javascript

Diunggah oleh

rizky ponco
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 29

SKPI WEB PROGRAMMING

JAVA ≠ JAVASCRIPT
------------ SESI 2 ------------
ALGORITMA PERULANGAN

Dalam bahasa pemrograman, pengulangan dapat


digunakan untuk "mengulang" kode yang kita inginkan,
dengan data yang berbeda.

Pengulangan pada Javascript bisa menggunakan


beberapa cara antara lain.

1. For Loop
2. While
3. Do While

FAIZAL RIZA
PERULANGAN FOR LOOP
SMK Dinamika Pembangunan 1 Jakarta

Your Coffee Shop 3


SINTAKS FOOR LOOP
For loop digunakan untuk pengulangan melalui blok kode
beberapa kali.

for(pernyataan1; pernyataan 2; pernyataan 3)


{
//blog kode yang akan dijalankan
}

Penyataan 1 dijalankan (satu kali) sebelum eksekusi blok kode.


Pernyataan 2 mendefinisikan kondisi untuk mengeksekusi blok kode.
Pernyataan 3 dijalankan (setiap saat) setelah blok kode dijalankan.
SINTAKS FOR LOOP

for(i=0;i<5;i++)
{
teks += "Ini adalah nomor" + 1 + "<br>";
}

Berikut ini contoh


✓ Pada contoh di atas, i <!DOCTYPE html> pengulangan dengan output
ditampilkan pada console.
dimulai dari 0, kemudian <html>
pada pernyataan 2 cek <body>
kondisi apakah i kurang dari <div id="data"></div>
5, apabila bernilai true, <script>
for (var i = 0; i < 5; i++)
maka blok kode dijalankan.
{
✓ Pada pernyataan 3, i selalu
console.log("Nilai saat ini " + i);
ditambahkan 1 setiap kali }
usai menjalankan blok kode. </script>
</body>
</html>
SINTAKS FOOR LOOP
Simpan kode di atas misal dengan nama for_js.html, lalu kita bisa
buka console pada browser (biasanya terletak pada menu
Developer tools di browser). Panggil url sesuai lokasi
penyimpanan dan nama filenya.
SINTAKS FOOR LOOP
Namun apabila kita ingin menampilkan output pengulangan
melalui browser, kita bisa mengetikkan kode seperti di bawah ini.

<!DOCTYPE html>
<html>
<body>
<div id="data"></div>
<script>
var text="";
for (var i = 0; i < 5; i++)
{
text +="Nilai saat ini " + i + "<br>";
document.getElementById("data").innerHTML = text;
}
</script>
</body>
</html>
PERULANGAN WHILE LOOP
SMK Dinamika Pembangunan 1 Jakarta

Your Coffee Shop 8


SINTAKS WHILE LOOP
While digunakan untuk pengulangan melalui blok kode selama
kondisi tertentu benar.

while(kondisi)
{
//blok kode yang akan dijalankan
}

Contoh :

while(i<10)
{
teks +="Ini adalah nomor " + i;
i++;
}
SINTAKS WHILE LOOP
Saat kondisi bernilai true atau benar, maka pengulangan akan dijalankan.
Berikut contoh penggunaan while dengan output ditampilkan pada console.

<!DOCTYPE html>
<html>
<body>
<div id="data"></div>
<script>
var j=0;
while(j<5)
{
console.log("While: Nilai saat ini "+j);
j++;
}
</script>
</body>
</html>
SINTAKS WHILE LOOP

for(i=0;i<5;i++)
{
teks += "Ini adalah nomor" + 1 + "<br>";
}

Berikut ini contoh


✓ Pada contoh di atas, i <!DOCTYPE html> pengulangan dengan output
ditampilkan pada console.
dimulai dari 0, kemudian <html>
pada pernyataan 2 cek <body>
kondisi apakah i kurang dari <div id="data"></div>
5, apabila bernilai true, <script>
for (var i = 0; i < 5; i++)
maka blok kode dijalankan.
{
✓ Pada pernyataan 3, i selalu
console.log("Nilai saat ini " + i);
ditambahkan 1 setiap kali }
usai menjalankan blok kode. </script>
</body>
</html>
PERULANGAN DO WHILE LOOP
SMK Dinamika Pembangunan 1 Jakarta

Your Coffee Shop 12


SINTAKS DO WHILE LOOP
Do while loop adalah varian dari while loop. Looping ini akan
mengeksekusi kode satu kali, sebelum memeriksa apakah kondisinya
benar, jika kondisinya benar maka akan mengulang loop.

do
{
//kode yang akan dijalankan
}
while(kondisi);

Contoh :

do
{
teks +="Ini adalah nomor " + i;
i++;
}
while(i<10);
SINTAKS DO WHILE LOOP
Saat kondisi bernilai true atau benar, maka pengulangan akan dijalankan.
Berikut contoh penggunaan while dengan output ditampilkan pada console.

<!DOCTYPE html>
<html>
<body>
<div id="data"></div>
<script>
var k=0;
do
{
console.log("Do While: Nilai saat ini "+k);
k++;
}
while(k<5)
</script>
</body>
</html>
ALGORITMA PENGKONDISIAN

Pernyataan kondisional digunakan untuk melakukan tindakan


yang berbeda berdasarkan pada kondisi yang berbeda. Sangat
sering ketika kita menulis kode, kita ingin melakukan tindakan
yang berbeda untuk keputusan yang berbeda.

Pada javascript kita bisa menggunakan beberapa sintaks di bawah


untuk menjalankan pernyataan kondisional.

1. IF
2. IF … ELSE
3. IF … ELSE IF
4. SWITCH

FAIZAL RIZA
Pengkondisian IF
SMK Dinamika Pembangunan 1 Jakarta

Your Coffee Shop 16


SINTAKS PENGKONDISIAN IF
Gunakan if untuk menentukan blok kode yang akan dieksekusi jika
kondisi yang ditentukan bernilai benar.
if harus diketik dengan huruf kecil, apabila tidak, maka javascript
akan menampilkan pesan error.

SINTAKS
if(kondisi)
{
//kode yang akan dijalankan jika true
}

CONTOH
if(jam < 10)
{ Pada contoh di atas, berarti jika jam
kurang dari 10, maka sambutan diisi
sambutan = "Selamat Pagi!";
dengan Selamat Pagi!.
}
SINTAKS PENGKONDISIAN IF
Kita coba membuat sebuah contoh lagi dengan menampilkan output
melalui console.
Pada contoh ini, akan
menghasilkan output "Lampu
:: CODE
Menyala" karena lampu bernilai
true.
<!DOCTYPE html>
<html>
<body>
<div id="data"></div>
<script>
var lampu = true
true;
if(lampu) Sedangkan ketika kita ubah nilai
{ lampu menjadi false, maka output
console.log("Lampu Menyala"); tidak akan mencetak apapun.
}
</script>
</body>
</html>
Pengkondisian IF…ELSE
SMK Dinamika Pembangunan 1 Jakarta

FAIZAL RIZA 19
SINTAKS PENGKONDISIAN IF … ELSE
Gunakan else untuk menentukan blok kode yang akan dieksekusi jika
kondisi yang ditentukan bernilai salah.

SINTAKS
if(kondisi)
{
//kode yang akan dijalankan jika true
}
else
{
//kode yang akan dijalankan jika false
}

CONTOH
if(jam < 10)
{
sambutan = "Selamat Pagi!"; Pada contoh di atas, berarti jika jam
} kurang dari 10, maka sambutan diisi
else dengan Selamat Pagi!, jika tidak maka
{ sambutan diisi dengan Selamat Malam!.
sambutan = "Selamat Malam!";
}
SINTAKS PENGKONDISIAN IF … ELSE
Kita coba membuat suatu contoh dengan menambahkan else pada
contoh lampu.

:: CODE Pada contoh di atas, akan


menghasilkan output "Lampu
<!DOCTYPE html> Menyala" karena lampu bernilai true.
<html>
<body>
<div id="data"></div>
<script>
var lampu=true;
if(lampu)
{
console.log("Lampu Menyala"); Nah disini perbedaannya. Dengan
} menambahkan else, maka apabila
else kita isi lampu dengan false, kini akan
{ mencetak "Lampu Padam".
console.log("Lampu Padam");
}
</script>
</body>
</html>
Pengkondisian IF…ELSE IF
SMK Dinamika Pembangunan 1 Jakarta

FAIZAL RIZA 22
SINTAKS PENGKONDISIAN IF … ELSE IF

Gunakan else untuk menentukan blok kode yang akan dieksekusi jika
kondisi yang ditentukan bernilai salah.

SINTAKS

if(condition1)
{
//jalankan jika kondisi 1 true
}
else if(condition2)
{
//jalankan jika kondisi 1 false dan kondisi 2 true
}
else
{
//jalankan jika kondisi 1 false dan kondisi 2 false
}
SINTAKS PENGKONDISIAN IF … ELSE IF

CONTOH

if(jam < 10)


{
sambutan = "Selamat Pagi!";
}
else if(jam < 20)
{
sambutan = "Selamat siang!";
}
else
{
sambutan = "Selamat Malam!";
}

Pada contoh di atas, jika jam kurang dari 10, maka sambutan diisi
dengan Selamat Pagi!, jika tidak kurang dari 10 dan jam kurang dari 20
maka sambutan diisi dengan Selamat siang! jika tidak maka sambutan
diisi dengan Selamat Malam!.
SINTAKS PENGKONDISIAN IF … ELSE IF
Kita coba membuat suatu contoh lagi dengan menambahkan else if diantara if dan else.

<!DOCTYPE html>
<html> Output yang dihasilkan akan menyesuaikan
<body> dengan nilai / isi dari lampu, yaitu ketika kita
<div id="data"></div> isi lampu dengan merah, maka akan mencetak
<script> output Lampu Merah, namun jika kita isi
var lampu="merah"; dengan kuning maka akan mencetak output
if(lampu=='merah')
{ Lampu Kuning, jika kita isi dengan hijau maka
console.log("Lampu Merah"); akan mencetak Lampu Hijau, namun jika selain
} pilihan di atas maka akan mencetak output
else if(lampu=='kuning') Lampu Padam.
{
console.log("Lampu Kuning");
}
else if(lampu=='hijau')
{
console.log("Lampu Hijau");
}
else
{
console.log("Lampu Padam");
}
</script>
</body>
</html>
Pengkondisian SWITCH
SMK Dinamika Pembangunan 1 Jakarta

FAIZAL RIZA 26
SINTAKS PENGKONDISIAN SWITCH

Pernyataan switch digunakan untuk melakukan tindakan yang berbeda


berdasarkan pada kondisi yang berbeda. (sama seperti if-else if-else)

SINTAKS CONTOH
switch(expression) switch(x)
{ {
case x : case 0 :
//kode text = "Padam";
break; break;
case y: case 1:
//kode text = "Nyala";
break; break;
default: default:
//kode text= "Data Tidak Ada";
} }
SINTAKS PENGKONDISIAN SWITCH
<!DOCTYPE html>
<html> Kita coba membuat suatu contoh dengan
<body> menggunakan switch, output yang
<div id="data"></div>
<script>
dihasilkan sama seperti kita
var lampu="merah"; menggunakan else if, pada contoh kali ini
switch(lampu) kita juga akan mencetaknya di browser.
{
case "merah" :
console.log("Lampu Merah");
document.getElementById("data").innerHTML="Lampu Merah";
break;
case "kuning":
console.log("Lampu Kuning");
document.getElementById("data").innerHTML="Lampu Kuning";
break;
case "hijau":
console.log("Lampu Hijau");
document.getElementById("data").innerHTML="Lampu Hijau";
break;
default:
text= "Lampu Padam";
}
</script>
</body>
</html>
THANK YOU!

contact us at:

FAIZAL RIZA

[email protected]

08132319933

FAIZAL RIZA 29

Anda mungkin juga menyukai