PBO dan UI di JS

pt-homina.blogspot.com
by pt-homina.blogspot.com Kamis, September 27, 2018

Assalamualaikum temen temen...

    Hello geng kembali lagi dengan mimin, semoga kalian sehat sehat aja ya gengs, oke daripada banyak berbasa-basi kita ke pembahasan kali ini yuk cekidoot..
> Pemrograman Berorientasi Objek
> Pemrograman Berbasis Prototype 
> Interaksi User

Oke langsung saja ke pembahasan pertama yaitu

1. Pemrograman berorientasi objek

    Pemrograman berorientasi obyek adalah sebuah paradigma dalam pemrograman yang mengelompokkan fungsi, prosedur, variabel ataupun konstanta terkait dalam satu kesatuan (kelas) seperti obyek dalam dunia nyata. 
    Obyek sendiri merupakan wujud dari kelas, secara umum dikenal dengan nama instan. Teknik-teknik dalam pemrograman ini merupakan pengembangan dari teknik sebelumnya seperti modularitas, polimorfisme, dan enkapsulasi. Saat ini ada banyak bahasa pemrograman yang telah mendukung pemrograman berorientasi obyek ini, seperti C++, C#, Java, Javascript, PHP, Python, Ruby, dan Objective C. 

2. Pemrograman Berbasis Prototype 

    Javascript memiliki banyak obyek bawaan seperti Math, Array, String dan Object. Setiap obyek dalam Javascript adalah instan dari obyek Object, sehingga memiliki semua properti dan metode yang ada.
    Javascript merupakan bahasa PBO yang menggunakan kata kunci function untuk mendefinisikan suatu kelas. Oleh karena itu, pembuatan kelas sama dengan pembuatan fungsi dalam Javascript. Berikut ini merupakan format yang dapat digunakan untuk mendefinisikan kelas pada javascript.

Untuk lebih jelas nya kita lihat contohnya yuks:

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="ini.css">
</head>

<body>
    <center>
        <p id="coba">Masukan nilai
            <input type="text" id="nilai" />
            <input type="button" id="tombol" value="Klik aja" onclick="ambilNilai(); ">
            <script>
            function ambilNilai() {
                var objNilai = document.getElementById('nilai');
                var n = objNilai.value;
                alert("nilainya adalah " + n);
            }
            </script>
        </p>
    </center>
</body>

</html>

Hasilnya gengs:

Contoh ke 2:
<!DOCTYPE html>
<html>
<head>
<title>Fungsi PBO</title>
<link rel="stylesheet" href="">
</head>
<body>
<p id="coba">
<script>
function SegiEmpat(){}
function SegiEmpat(){
this.panjang = 0;
this.lebar = 0;
this.hitungLuas = function(){
var luas = this.panjang * this.lebar;
return luas;
}
this.hitungKeliling = function(){
var kel = 2 * (this.panjang + this.lebar);
return kel;
}
}
//contoh
var s = new SegiEmpat();
s.panjang = 4;
s.lebar = 3;
alert("Luas adalah " + s.hitungLuas() + " cm");
alert("dan keliling adalah " + s.hitungKeliling() + " cm")
</script>
</p>
</body>
</html>

Hasilnya:

3. Interaksi User

•Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan.
•Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event.
•Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan
halaman web. 
Agar kalian lebih mengerti mimin kasih contoh programnya deh

Contoh pertama:
<!DOCTYPE html>
<html>
<head>
<title>Interface</title>
<link rel="stylesheet" href="ini.css">
</head>
<body>
<center>
<p id="coba">
<script>
function sayHallo(){
var nama = document.getElementById("nama").value;
alert("Halo, "+nama);
}
</script>
<label>Tulis disini<br></label>
<input type="text" id="nama" onchange="sayHallo(); ">
</p>
</body>
</center>
</html>

Hasilnya:


Contoh kedua:
<!DOCTYPE html>
<html>
<head>
<title>Interface dengan JS</title>
<link rel="stylesheet" href="ini.css">
</head>
<body>
<center>
<p id="coba">Masukan nilai
<input type="text" id="nilai">
<input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
<script>
function ambilNilai (){
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
alert("Nilainya adalah "+ n);
}
</script>
</p>
</center>
</body>
</html>

Hasilnya gengs:

Contoh ketiga
<!DOCTYPE html>
<html>
<head>
<title>Interface dengan JS</title>
<link rel="stylesheet" href="ini.css">
</head>
<body>
<center>
<p id="coba"> Masukan nilai
<input type="text" name="nilai">
<input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
<script>
function ambilNilai (){
var objNilai = document.getElementsByName('nilai')[0];
var n = objNilai.value;
alert("Nilainya adalah "+ n);
}
</script>
</p>
</center>
</body>
</html>

Hasilnya gengs:


Contoh keempat
<!DOCTYPE html>
<html>
<head>
<title>Interface dengan JS</title>
<link rel="stylesheet" href="ini.css">
</head>
<body>
<center>
<p id="coba">Nilai pertama
<input type="text" name="nilai">
<br>
Nilai kedua
<input type="text" name="nilai">
<br>
<input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
<script>
function ambilNilai (){
var obj1 = document.getElementsByName('nilai')[0];
var obj2 = document.getElementsByName('nilai')[1];
var n1 = obj1.value;
var n2 = obj2.value;
alert("Nilai pertama adalah  "+ n1);
alert("Nilai kedua adalah  "+ n2);
}
</script>
</p>
</center>
</body>
</html>

Hasilnya gengs:

Contoh kelima
<!DOCTYPE html>
<html>

<head>
    <title>Interface dengan JS</title>
    <link rel="stylesheet" href="ini.css">
</head>

<body>
    <center>
        <p id="coba">
            Masukan nilai
            <br>
            <input type="text" name="nilai">
            <br>
            <input type="button" id="tombol" value="Yuk Klik" onclick="ambilNilai();">
            <br> Masukan nilai
            <br>
            <input type="text" name="hasil">
            <script>
            function ambilNilai() {
                var obj1 = document.getElementsByTagName('input')[0];
                var obj2 = document.getElementsByTagName('input')[1];
                var obj3 = document.getElementsByTagName('input')[2];
                var s1 = obj1.value;
                var s2 = obj2.value;
                obj3.value = s1+s2;
            }
            </script>
        </p>
</body>
</center>

</html>

Hasilnya ya guys:

Ini dia css nya jangan sampai lupa :
body{
    background-image: url(bahan/roket.jpg);
background-color: #2CB3DF;
font-family: Tw Cen MT;
font-size: 35px;
}
* {
box-sizing: border-box;
}

#coba{
width: 300px;
    padding: 10px;   
    border: 2px solid black;
    border-radius: 20px;
    background: white;
    text-align: center;
    color: black;
    transition: transform .2s;
    background: #1A1A1A ;
    color: white;
}
#coba:hover{
transform: scale(1.5);
}
#nilai{
    border-radius: 10px;
    padding: 5px 5px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid green;
}
#tombol{
    background-color: green;
    color: white;
    padding: 5px 5px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    border-radius: 10px;
}

Mungkin itu saja yang bisa mimin bahas di pertemuan kali ini, Mohon maaf bila banyak typo karena mimin hanya manusia biasa bukan robot

Wassalamualaikum...

0 Komentar