Assalamualaikum temen temen...
Hai balik lagi bersama mimin ya gengs kali ini kita akan membahas tentang pengulanagan dan fungsi di javascript, yuah cekidooot...
> For
> While
> Do while
> All in one
> All in one
> Fungsi
Pengulangan itu apa sih? Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama
beberapa
kali dengan
menggunakan
suatu
kondisi
tertentu.
Oke baiklah daripada lama lama banyak basa basi kita langsung sadja ke pembahasan yang pertama yaitu
1. Pengulangan For
Penulisan:
for (kondisi_awal, kondisi_akhir, increment)//baris program yang akan diulang
Agar lebih paham mimin kasih contoh deh ini dia:
<!DOCTYPE html>
<html>
<head>
<title>For in</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan for in pada js</p>
<p id="coba"></p>
<script>
var txt = "";
var person = { fname: "Annisa", lname: "Rahayu", age: 16 };
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("coba").innerHTML = txt;
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</body>
</div>
</center>
</html>
<html>
<head>
<title>For in</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan for in pada js</p>
<p id="coba"></p>
<script>
var txt = "";
var person = { fname: "Annisa", lname: "Rahayu", age: 16 };
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("coba").innerHTML = txt;
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</body>
</div>
</center>
</html>
Ini contoh ke 2, biar kalian lebih paham lagi ya
<!DOCTYPE html>
<html>
<head>
<title>Perulangan for</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan for pada js</p>
<p id="coba">
<script>
for (x = 1; x <= 5; x++) {
document.write("Inilah contoh perulangan For <br>");
}
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</body>
</center>
</div>
</html>
<html>
<head>
<title>Perulangan for</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan for pada js</p>
<p id="coba">
<script>
for (x = 1; x <= 5; x++) {
document.write("Inilah contoh perulangan For <br>");
}
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</body>
</center>
</div>
</html>
Hasilnya akan jadi:
Pada baris pertama program, mimin mendeklarasikan variabel x dengan perintah var x. Variabel x ini adalah counter, atau penghitung untuk proses perulangan.
Baris for (x = 1; x <= 5; x++), berarti: lakukan perulangan for, dimulai dari x = 1, lalukan perulangan selama x<=5, dan naikkan nilai x sebanyak 1 angka pada tiap perulangan (x=x+1).
2. Pengulangan while
Pengulangan While biasanya digunakan untuk melakukan pengulangan suatu variabel berdasarkan suatu kondisi, dengan pemeriksaan kondisi yang dilakukan di awal pengulangan.
Pengulangan akan dilakukan selama hasil pemeriksaan kondisi adalah benar. Jika hasil kondisi salah, maka perintah yang akan diulang tidak akan dikerjakan dan langsung mengerjakan perintah yang selanjutnya.
Penulisannya:
Nah biar kalian makin paham mimin akan kasih contohnya ya, ini diaPengulangan akan dilakukan selama hasil pemeriksaan kondisi adalah benar. Jika hasil kondisi salah, maka perintah yang akan diulang tidak akan dikerjakan dan langsung mengerjakan perintah yang selanjutnya.
Penulisannya:
while (kondisi){//kode programcounter}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan while pada js</p>
<p id="coba">
<script>
var x = 0;
while (x < 5) {
document.writeln("Ini adalah pengulangan while <br>");
x++;
}
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</div>
</center>
</body>
</html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan while pada js</p>
<p id="coba">
<script>
var x = 0;
while (x < 5) {
document.writeln("Ini adalah pengulangan while <br>");
x++;
}
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</div>
</center>
</body>
</html>
Hasilnya akan menjadi:
3. Pengulangan Do while
Struktur perulangan DO WHILE sebenarnya adalah bentuk lain dari perulangan WHILE. Perbedaan keduanya terletak pada posisi pengecekan kondisi. Apabila dalam perulangan WHILE kondisi di cek pada awal perulangan, pada perulangan DO WHILE, kondisi perulangan di cek pada akhir perulangan.
Kita langsung lihat saja contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Perulangan do while</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan do while pada js</p>
<p id="coba">
<script language="JavaScript">
var x = 0;
do {
document.writeln("Ini perulangan Do while <br>");
x++;
}
while (x < 4)
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</div>
</center>
</body>
</html>
<html>
<head>
<title>Perulangan do while</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p>Ini adalah contoh penggunaan do while pada js</p>
<p id="coba">
<script language="JavaScript">
var x = 0;
do {
document.writeln("Ini perulangan Do while <br>");
x++;
}
while (x < 4)
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</div>
</center>
</body>
</html>
Hasilnya akan menjadi:
4. All in one
Ini adalah contoh gabungan dari For, While, Do while
<!DOCTYPE html>
<html>
<head>
<title>Buat pengulangan</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p id="coba">
<script>
for (var i = 0; i < 2; i++) {
document.write("Ini penggunaan for <br>");
}
var j = 0;
while (j < 2) {
document.write("Ini penggunaan while <br>");
j += 1;
}
var k = 0;
do {
document.write("ini penggunaan do while <br>");
k++;
} while (k < 2);
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</div>
</center>
</body>
</html>
<html>
<head>
<title>Buat pengulangan</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Pengulangan di Javascript</h2>
<p id="coba">
<script>
for (var i = 0; i < 2; i++) {
document.write("Ini penggunaan for <br>");
}
var j = 0;
while (j < 2) {
document.write("Ini penggunaan while <br>");
j += 1;
}
var k = 0;
do {
document.write("ini penggunaan do while <br>");
k++;
} while (k < 2);
</script>
<p id="cr">By: Annisarhy||XI RPL 1</p>
</p>
</div>
</center>
</body>
</html>
Hasilnya akan menjadi:
5. 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.
Ini dia contoh pertama:
<!DOCTYPE html>
<html>
<head>
<title>Fungsi</title>
<link rel="stylesheet" href="">
</head>
<body>
<p id="coba">
<script>
function hitungLuasAlas(p, l){
var luas = p*l;
return luas;
}
function hitungVolume (la, t){
var vol = la*t/2;
return vol;
}
var panjang = 5;
var lebar = 3;
var tinggi = 4;
var luasAlas;
var volume;
luasAlas = hitungLuasAlas(panjang, lebar);
volume = hitungVolume(luasAlas, tinggi);
alert("Ini adalah luas alas =>"+luasAlas);
alert("Ini adalah volume =>"+volume);
</script>
</p>
</body>
</html>
<html>
<head>
<title>Fungsi</title>
<link rel="stylesheet" href="">
</head>
<body>
<p id="coba">
<script>
function hitungLuasAlas(p, l){
var luas = p*l;
return luas;
}
function hitungVolume (la, t){
var vol = la*t/2;
return vol;
}
var panjang = 5;
var lebar = 3;
var tinggi = 4;
var luasAlas;
var volume;
luasAlas = hitungLuasAlas(panjang, lebar);
volume = hitungVolume(luasAlas, tinggi);
alert("Ini adalah luas alas =>"+luasAlas);
alert("Ini adalah volume =>"+volume);
</script>
</p>
</body>
</html>
Hasilnya akan menjadi:
Ini dia contoh ke 2:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<p id="coba">
<script>
function sapa (nama){
alert("Hallo, namaku " + nama);
}
sapa ("bintang");
function sayHallo(){
alert("Hallo, saya Bulan");
}
sayHallo();
</script>
</p>
</body>
</html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<p id="coba">
<script>
function sapa (nama){
alert("Hallo, namaku " + nama);
}
sapa ("bintang");
function sayHallo(){
alert("Hallo, saya Bulan");
}
sayHallo();
</script>
</p>
</body>
</html>
Ini dia hasilnya
Ini dia contoh ke 3:
<!DOCTYPE html>
<html>
<head>
<title>Buat fungsi</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Fungsi di Javascript</h2>
<p>Ini adalah contoh penggunaan fungsi char</p>
<p id="coba">
<script>
var nama = "Amelia";
var posisiKarakter = 2;
var k = nama.charAt(posisiKarakter);
document.write("karakter pada urutan ke 2, dari kata Amelia, adalah " + k + "(dimulai dari 0)");
</script>
</p>
</div>
</center>
</body>
</html>
<html>
<head>
<title>Buat fungsi</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Fungsi di Javascript</h2>
<p>Ini adalah contoh penggunaan fungsi char</p>
<p id="coba">
<script>
var nama = "Amelia";
var posisiKarakter = 2;
var k = nama.charAt(posisiKarakter);
document.write("karakter pada urutan ke 2, dari kata Amelia, adalah " + k + "(dimulai dari 0)");
</script>
</p>
</div>
</center>
</body>
</html>
Ini dia hasilnya:
Ini dia contoh ke 4:
<!DOCTYPE html>
<html>
<head>
<title>Buat fungsi</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Fungsi di Javascript</h2>
<p>Ini adalah contoh penggunaan fungsi index</p>
<p id="coba">
<script>
var nama = "SMK Negeri 4 Bandung";
var dimanaKata = nama.indexOf("Bandung"); //dimana Kata akan bernilai 13
document.write("dari fungsi ini, Bandung ada di urutan ke " + dimanaKata + " dari kalimat SMK Negeri 4 Bandung");
</script>
</p>
</div>
</center>
</body>
</html>
<html>
<head>
<title>Buat fungsi</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<center>
<div id="border">
<h2>Fungsi di Javascript</h2>
<p>Ini adalah contoh penggunaan fungsi index</p>
<p id="coba">
<script>
var nama = "SMK Negeri 4 Bandung";
var dimanaKata = nama.indexOf("Bandung"); //dimana Kata akan bernilai 13
document.write("dari fungsi ini, Bandung ada di urutan ke " + dimanaKata + " dari kalimat SMK Negeri 4 Bandung");
</script>
</p>
</div>
</center>
</body>
</html>
Hasilnya akan menjadi:
Ouh iya mimin hampir lupa ini dia css nya:
body{
background-color: #2CB3DF;
font-family: Tw Cen MT;
font-size: 25px;
}
* {
box-sizing: border-box;
}
#border{
width: 530px;
padding: 10px;
border: 2px solid black;
border-radius: 20px;
text-align: center;
background: #1A1A1A ;
color: white;
}
#coba{
width: 500px;
padding: 10px;
border: 2px solid black;
border-radius: 20px;
background: white;
text-align: center;
color: black;
transition: transform .2s;
}
#coba:hover{
transform: scale(1.5);
}
#cr{
width: 500px;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
background: white;
text-align: center;
color: black;
transition: transform .2s;
}
#cr:hover{
transform: scale(1.5);
}
background-color: #2CB3DF;
font-family: Tw Cen MT;
font-size: 25px;
}
* {
box-sizing: border-box;
}
#border{
width: 530px;
padding: 10px;
border: 2px solid black;
border-radius: 20px;
text-align: center;
background: #1A1A1A ;
color: white;
}
#coba{
width: 500px;
padding: 10px;
border: 2px solid black;
border-radius: 20px;
background: white;
text-align: center;
color: black;
transition: transform .2s;
}
#coba:hover{
transform: scale(1.5);
}
#cr{
width: 500px;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
background: white;
text-align: center;
color: black;
transition: transform .2s;
}
#cr:hover{
transform: scale(1.5);
}
Mungkin itu saja yang bisa mimin bahas di pertemuan kali ini kurang lebihnya mohon maaf.. ya gengs, sampai jumpa di lain waktu yaa
0 Komentar