Tutorial JavaScript: Perulangan dan Fungsi

Posted by on
Assalamualaikum Semua


      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang java script langsung saja tanpa banyak basa basi lagi yu urang belajar java script

Perulangan

     Struktur Kontrol Perulangan
     Perulangan merupakan struktur yang memungkinkan untuk menjalankan kode program yang sama beberapa kali dengan menggunakan suatu kondisi tertentu. Perulangan dalam javascript memiliki tiga bentuk, perulangan :

  1. for, 
  2. while ,
  3. do-while.
  • Perulangan For
for ( inisialisasi; kondisi; peubah ) {
baris program 1;
baris program 2;
...}
  • Perulangan While
while ( kondisi ) {

kode program yang ingin dijalankan berkali-kali;
}
  • Perulangan Do-While
do {

kode program yang ingin dijalankan berkali-kali;

} 

while( kondisi );

Kesimpulan
Dari ketiga bentuk perulangan diatas hanya for yang memerlukan pernyataan inisialisasi dan peubah. Inisialisasi disini digunakan sebagai bagian penentuan variabel yang akan digunakan untuk mengendalikan jumlah perulangan yang akan dilakukan. 
Peubah adalah operasi aritmatika yang dapat dilakukan untuk mengubah nilai variabel penentu tersebut. Sedangkan kondisi disini digunakan untuk menentukan kapan suatu blok perulangan dijalankan berdasarkan nilai dari variabel penentu tersebut. 
Cara kerja dari perulangan for tersebut dapat digambarkan dengan menggunakan diagram alur berikut.

Fungsi

  • Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses atau rumus aritmatika tertentu. 
  • Fungsi dalam proses pemanggilannya (eksekusi) ada yang membutuhkan data tertentu agar dapat berjalan. 
  • Data tertentu yang perlu diberikan saat pemanggilan fungsi ini dikenal dengan nama parameter. Setiap fungsi dapat tidak memiliki atau memiliki lebih dari satu parameter.
  • Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari blok fungsi adalah sebagai berikut.
  • Bentuk umum fungsi
function nama_fungsi ( parameter1, parameter2, ...,parameterN ){
kode program sebagai definisi fungsi
return nama_nilai_balik_jika_ada;
}
  • Pemanggilan Fungsi
varHasil = nama_fungsi ( nilai_parameter1, nilai_parameter2,..., nilai_parameterN ) ;
Keterangan : varHasil: variabel yang dapat digunakan untuk menampung nilai balik dari fungsi yang dipanggil bila ada.

Apa Itu Nilai Balik

Nilai balik adalah nilai hasil operasi yang dijalankan didalam fungsi diberikan ke bagian program lainnya untuk diproses lebih lanjut. 
Nilai balik dalam javascript dinyatakan dengan menggunakan kata kunci return. 
Contoh kasusnya dalam program penghitung luas dan volume limas. Dimana dalam perhitungan volume juga terdapat menyertakan perhitungan luas didalamnya. 
Dengan kata lain untuk menghitung volume limas kita harus menghitung luas alasnya terlebih dahulu. Dalam program, proses ini diterjemahkan sebagai berikut.

var panjang = 5;
var lebar = 3;
var tinggi = 4;
var luasAlas;
var volume;

luasAlas = panjang * lebar;
volume = luasAlas * tinggi / 2;


Kesimpulan
Dilihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi 2,
 yaitu fungsi yang memiliki nilai balik dan fungsi yang tidak memiliki nilai balik.

contoh Penggunaan Fungsi Dan Perulangan 

contoh For1.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <script language="JavaScript">
        var person = {fname:"Darren", lname:"Shadiq", age:15};
        var text = "Darren";
        var x;
        for(x in person)
        {
            text += person[x];
        }
        while(x<5);
     
        </script>
    </body>
</html>

contoh For2.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <script language="JavaScript">
            for(x=1; x<=5; x++)
            {
                document.writeln("Inilah perulangan For<br>");
            }
        </script>
    </body>
</html>

hasilnya



Contoh While1.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <script language="JavaScript">
        var x = 0;
        while(x<5)
        {
            document.writeln("Ini Adalah Perulangan While<br>");
            x++;
        }
        </script>
    </body>
</html>

Hasilnya



Contoh Do-While.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <script language="JavaScript">
            var x = 0;
            do
            {
                document.writeln("INI perulangan Do while<br>");
                x++;
            }
            while (x<4)
        </script>
    </body>
</html>

Hasilnya



Contoh BuatPerulangan.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link href="BuatIf.css" rel="stylesheet" type="text/css"></link>
    </head>
    <body>
        <p id="coba">
            <script language="javascript" type="text/javascript">
                for (var i = 0; i < 3; i++)
                {
                    document.write("Halo javascript 1<br>");
                }
                var j = 0;
                while (j<3)
                {
                    document.write("Halo javascript 2<br>");
                    j +=1;
                }
                var k =0;
                do
                {
                    document.write("Halo javascript 3<br>");
                    k++;
                }
                while(k<3)
            </script>
        </p>
    </body>
</html>

Hasilnya



Contoh BuatFungsi.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css"></link>
    </head>
    <body>
        <p id="coba">
            <script language="javascript" type="text/javascript">
                function hitungLuasAlas (p,l)
                {
                    var luas = p *1;
                    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





Contoh BuatFungsi2tanpareturn.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BiatIf.css" type="text/css"></link>
    </head>
    <body>
        <p id="coba">
            <script language="javascript" type="text/javascript">
                function sapa(nama)
                {
                    alert("Halo, namaku"+nama);
                }
                sapa("bintang");

                function sayHalo(){
                    alert("Halo, saya Bulan");
                }
                sayHalo();
            </script>
        </p>
    </body>
</html>

Hasilnya



Contoh BuatFungsichartAt.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="coba">
            <script language = "javascript" type="text/javascript">
                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>
    </body>
</html>

hasilnya



contoh BuatFungsiIndexOf.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="coba">
            <script language="javascript" type="text/javascript">
                var nama = "SMK Negeri 4 Bandung";
                var dimanaKata = nama.indexOf("Bandung");//dimanaKata akan bernilai 13
                document.write("dari fungsi ini, Bandung adalah di urutan ke" + dimanaKata + " dari kalimat SMK Negeri 4 Bandung");
            </script>
        </p>
    </body>
</html>

Hasilnya



BuatIf.css
p{
    color: burlywood;
    text-shadow: 2px gray;
    text-transform: capitalize;
}











Comments

Post a Comment