Assalamualaikum Semua
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.
Hasilnya
Contoh FungsiPBO2.html
Hasilnya
Contoh BuatInterfaceElementsByTagName.html
Hasilnya
Contoh BuatInterfaceTextBoxandButtontoAlert.html
Hailnya
Contoh BuatInterfaceTextBoxandButtontoAlert2.html
Hasilnya
Contoh BuatInterfaceTextBoxandButtontoAlerttoArray.html
Hasilnya
Contoh BuatInterfaceTextBoxtoAlert.html
Hasilnya
BuatIf.css
interface.css
p#coba{
font-size: 17px;
text-transform: capitalize;
color: chocolate;
}
input#btnAmbilNilai{
color: black;
background: palevioletred;
border: 2px outset black;
font-family: Calibri, Times, serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input#btnAmbilNilai{
color: black;
background: pink;
border: 3px outset black;
font-family: cambria, Times, serif;
font-size: 14px;
font-weight: bold;
}
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
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.
PBO: Pemrograman Berbasis Prototipe
Javascript menggunakan PBO dengan model pemrograman berbasis prototipe. Model ini tidak mengenal kelas, yang ada adalah obyek. Obyek dalam model ini dapat dimodifikasi secara runtime seperti penambahan variabel (properti) ataupun metode (fungsi/prosedur). Model ini juga dikenal dengan istilah pemrograman PBO tanpa kelas, berorientasi prototipe atau berbasis instan.
Obyek Utama (Bawaan)
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.
Obyek Buatan
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
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.
Berikut ini merupakan daftar atribut yang dapat digunakan untuk mengolah interaksi user
Pengaksesan Obyek Pada Halaman Web
contoh nya
Contoh FungsiPBO.html
Contoh FungsiPBO.html
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
<input type="text" id="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
function ambilNilai()
{
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
alert("nilainya adalah " +n);
}
</script>
</body>
</html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
<input type="text" id="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
function ambilNilai()
{
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
alert("nilainya adalah " +n);
}
</script>
</body>
</html>
Hasilnya
Contoh FungsiPBO2.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">
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 penggunaannya
var a = new segiEmpat();
a.panjang = 4;
a.lebar = 3;
alert("Luas adalah "+a.hitungLuas()+" cm");
alert("dan keliling adalah "+a.hitungKeliling()+" cm");
</script>
</p>
</body>
</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">
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 penggunaannya
var a = new segiEmpat();
a.panjang = 4;
a.lebar = 3;
alert("Luas adalah "+a.hitungLuas()+" cm");
alert("dan keliling adalah "+a.hitungKeliling()+" cm");
</script>
</p>
</body>
</html>
Hasilnya
Contoh BuatInterfaceElementsByTagName.html
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" name="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<input type="text" name="nilai">
<script language="javascript" type="text/javascript">
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>
</html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" name="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<input type="text" name="nilai">
<script language="javascript" type="text/javascript">
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>
</html>
Hasilnya
Contoh BuatInterfaceTextBoxandButtontoAlert.html
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" id="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
function ambilNilai()
{
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
alert("nilainya adalah " +n);
}
</script>
</p>
</body>
</html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" id="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
function ambilNilai()
{
var objNilai = document.getElementById('nilai');
var n = objNilai.value;
alert("nilainya adalah " +n);
}
</script>
</p>
</body>
</html>
Hailnya
Contoh BuatInterfaceTextBoxandButtontoAlert2.html
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" name="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
function ambilNilai()
{
var objNilai = document.getElementsByName('nilai')[0];
var n = objNilai.value;
alert("nilainya adalah " +n);
}
</script>
</p>
</body>
</html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" name="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
function ambilNilai()
{
var objNilai = document.getElementsByName('nilai')[0];
var n = objNilai.value;
alert("nilainya adalah " +n);
}
</script>
</p>
</body>
</html>
Hasilnya
Contoh BuatInterfaceTextBoxandButtontoAlerttoArray.html
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" name="nilai">
<input type="text" name="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
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>
</body>
</html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<input type="text" name="nilai">
<input type="text" name="nilai">
<input type="button" id="btnAmbilNilai" value="Ambil nilai" onclick="ambilNilai();">
<script language="javascript" type="text/javascript">
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>
</body>
</html>
Hasilnya
Contoh BuatInterfaceTextBoxtoAlert.html
<!DOCTYPE html>
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<script language="javascript" type="text/javascript">
function sayHalo(){
var nm= document.getElementById('nama').value;
alert("Halo, " +nm);
}
</script>
<label >Tulis disini</label>
<input type="text" id="nama" onchange="sayHalo();">
</p>
</body>
</html>
<html>
<head>
<title>
M.Aslam.S.R
</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="coba">
<script language="javascript" type="text/javascript">
function sayHalo(){
var nm= document.getElementById('nama').value;
alert("Halo, " +nm);
}
</script>
<label >Tulis disini</label>
<input type="text" id="nama" onchange="sayHalo();">
</p>
</body>
</html>
Hasilnya
BuatIf.css
p{
color: burlywood;
text-shadow: 2px gray;
text-transform: capitalize;
}
input.button{
color: black;
background: palevioletred;
border: 2px outset black;
font-family: Calibri, Times, serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input.button:hover{
color: black;
background: pink;
border: 3px outset black;
font-family: cambria, Times, serif;
font-size: 14px;
font-weight: bold;
}
color: burlywood;
text-shadow: 2px gray;
text-transform: capitalize;
}
input.button{
color: black;
background: palevioletred;
border: 2px outset black;
font-family: Calibri, Times, serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input.button:hover{
color: black;
background: pink;
border: 3px outset black;
font-family: cambria, Times, serif;
font-size: 14px;
font-weight: bold;
}
interface.css
p#coba{
font-size: 17px;
text-transform: capitalize;
color: chocolate;
}
input#btnAmbilNilai{
color: black;
background: palevioletred;
border: 2px outset black;
font-family: Calibri, Times, serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
input#btnAmbilNilai{
color: black;
background: pink;
border: 3px outset black;
font-family: cambria, Times, serif;
font-size: 14px;
font-weight: bold;
}
Comments
Post a Comment