Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang Loop & Fungsi serta Objek & UI pada JavaScript. Mari kita bahas!
A. Struktur Kontrol Perulangan
Struktur kontrol
pengulangan adalah berupa pernyataan yang mengijinkan kita untuk mengeksekusi
blok code berulang-ulang sesuai dengan jumlah tertentu yang diinginkan. Ada
tiga macam jenis dari struktur kontrol pengulangan yaitu while, do, dan for.
Pemograman For Do
While
1. For
<html>
<head>
<title>For, by Fadli Mahesa</title>
</head>
<style type="text/css">
h2 {
background-color: Black;
color: white;
padding: 10%;
}
p {
background-color: white;
color: black;
padding: 2%;
}
body {
background: #121212;
}
</style>
<body>
<h2>Pengulangan For pada Javascript</h2>
<p id="for"></p>
<script language="javascript" type="text/javascript">
alert ("Silahkan masukan angka");
var n = prompt ("Masukan Nilai n");
n = parseInt (n);
var text = "";
var i;
for (i = 1; i < n; i++) {
text += "Mengulang angka sebelum Nilai n : " + i + "<br>";
}
document.getElementById("for").innerHTML = text;
</script>
</body>
</html>2. For In
<html>
<head>
<title>For In, by Fadli Mahesa</title>
</head>
<style type="text/css">
h2 {
padding: 2%;
color: white;
}
p {
background-color: white;
padding: 1%;
}
body {
background-color: black;
}
</style>
<body>
<h2>Pengulangan For pada Javascript</h2>
<p>pernyataan for in mengulang melalui properti pada objek</p>
<p id="forInLoop"></p>
<script language="javascript" type="text/javascript">
var txt = "";
var orang = {fname: "Fadli", lname: "Mahesa", usia: 17};
var x;
for (x in orang) {
txt += orang[x] + " ";
}
document.getElementById("forInLoop").innerHTML = txt;
</script>
</body>
</html>3. While
<html>
<head>
<title>While, by Fadli Mahesa</title>
</head>
<style type="text/css">
h2 {
padding: 2%;
background-color: #121212;
color: white;
text-align: center;
}
p {
padding: 2%;
color: #121212;
text-align: center;
}
</style>
<body>
<h2>Pengulangan While pada Array</h2>
<p id="ulangwhile"></p>
<script language="javascript" type="text/javascript">
var siswa = ["Rafi", "Adrian", "Fadli", "Shaffa", "Ilham"];
var i = 0;
var text = "";
while (siswa[i]) {
text += siswa[i] + "<br>";
i++;
}
document.getElementById("ulangwhile").innerHTML = text;
</script>
</body>
</html>4. Do While
<html>
<head>
<title>Do While, by Fadli Mahesa</title>
</head>
<style type="text/css">
h2 {
background-color: white;
padding: 5%;
margin: -10px -10px 12px -10px;
}
p {
background-color: white;
padding: 2%;
}
body {
background-color: black;
}
</style>
<body>
<h2>Pengulangan Do While</h2>
<p id="dowhile"></p>
<script language="javascript" type="text/javascript">
var siswa = ["Rafi", "Adrian", "Fadli", "Shaffa", "Ilham"];
var i = 1;
var text = "";
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10)
document.getElementById("dowhile").innerHTML = text;
</script>
</body>
</html>B. Fungsi
1.
Fungsi dalam pemrograman merupakan suatu
mekanisme yang digunakan untuk mengelompokkan program dalam menyelesaikan suatu
kasus, proses atau rumus aritmatika tertentu.
2.
Fungsi dalam proses pemanggilannya (eksekusi)
ada yang membutuhkan data tertentu agar dapat berjalan.
3.
Data tertentu yang perlu diberikan saat
pemanggilan fungsi ini dikenal dengan nama parameter. Setiap fungsi dapat tidak
memiliki atau memiliki lebih dari satu parameter.
4.
Aturan penamaan fungsi mengikuti aturan penamaan
variabel.
Pemrograman Fungsi
1. Fungsi
<html>
<head>
<title>Fungsi, by Fadli Mahesa</title>
</head>
<body>
<p id="Fungsi"></p>
<script language="javascript" type="text/javascript">
function hitungLuasAlas (p, l){
var luas = p * l;
return luas;
}
function hitungVolume (la, t){
var volume = la * t;
return volume;
}
var panjang = 5;
var lebar = 9;
var tinggi = 7;
var luasAlas;
var volume;
luasAlas = hitungLuasAlas (panjang, lebar);
volume = hitungVolume (luasAlas, tinggi);
alert ("Ini adalah luas alas ==> "+luasAlas);
alert ("Ini adalah volume ==> "+volume);
</script>
</body>
</html>2. Fungsi Tanpa Return
<html>
<head>
<title>Fungsi Tanpa Return, by Fadli Mahesa</title>
</head>
<body>
<p id="cobaaja">
<script language="javascript" type="text/javascript">
function sapa (nama) {
alert ("Haloo, namaku " + nama);
}
sapa ("Bintang");
function sayHalo() {
alert ("Haloo, aku Bulan");
}
sayHalo();
</script>
</p>
</body>
</html>3. Fungsi CharAt
<html>
<head>
<title>Fungsi CharAt, by Fadli Mahesa</title>
</head>
<body>
<p id="cobaaja2">
<script language="javascript" type="text/javascript">
var nama = "Fitri";
var posisiKarakter = 0;
var k = nama.charAt(posisiKarakter);
document.write("karakter pada urutan ke-2, dari kata Fitri, adalah " +k+ " (dimulai dari 0)");
</script>
</p>
</body>
</html>4. Fungsi IndexOf
<html>
<head>
<title>Fungsi IndexOf, by Fadli Mahesa</title>
</head>
<body>
<p id="cobaaja2">
<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 ada urutan ke " +dimanaKata+ " dari kalimat SMK Negeri 4 Bandung");
</script>
</p>
</body>
</html>C. Pemrograman Berorientasi Objek dan
Interaksi User pada Javascript
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.
Pemrograman PBO &
UI
1. Interface TextBox to Alert
<html>
<head>
<title>Interface dengan JS, by Fadli Mahesa</title>
</head>
<style type="text/css">
input {
background-color: moccasin;
font-family: Comic Sans MS;
}
h3 {
color: mistyrose;
font-family: Comic Sans MS;
}
body {
background-color: orchid;
}
</style>
<body>
<p id="cobaaja3">
<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>2. Fungsi PBO
<html>
<head>
<title>Buat Fungsi PBO, by Fadli Mahesa</title>
</head>
<body>
<p id="cobaaja3">
<script language="javascript" type="text/javascript">
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;
}
}
var x = new SegiEmpat ();
x.panjang = 5;
x.lebar = 9 ;
alert("Luas adalah "+x.hitungLuas()+"cm");
alert("dan Keliling adalah "+x.hitungKeliling()+"cm");
</script>
</p>
</body>
</html>3. Interface TextBox & Button to Alert
<html>
<head>
<title>Interface(2) dengan JS, by Fadli Mahesa</title>
</head>
<body>
<p id="cobaaja3">
<input type="text" id="iniNilai" />
<input type="button" id="btnInputNilai" value="Input Nilai" onclick="inputNilai();" />
<script language="javascript" type="text/javascript">
function inputNilai(){
var objNilai = document.getElementById('iniNilai');
var j = objNilai.value;
alert("Nilainya adalah " + j);
}
</script>
</p>
</body>
</html>4. Interface TextBox & Button to Alert to Array
<html>
<head>
<title>Interface(3) dengan JS, by Fadli Mahesa</title>
</head>
<style type="text/css">
input{
background-color: moccasin;
font-family: Comic Sans MS;
}
body{
background-color: mistyrose;
}
</style>
<body>
<p id="cobaaja3">
<input type="text" name="iniNilai" />
<input type="text" name="iniNilai" />
<input type="button" id="btnInputNilai" value="Input Nilai" onclick="inputNilai();" />
<script language="javascript" type="text/javascript">
function inputNilai(){
var objNilai1 = document.getElementsByName('iniNilai')[0];
var objNilai2 = document.getElementsByName('iniNilai')[1];
var j = objNilai1.value;
var k = objNilai2.value;
alert("Nilai pertama adalah " + j);
alert("Nilai kedua adalah " + k);
}
</script>
</p>
</body>
</html>5.
Interface getElementsByTagName
<html>
<head>
<title>Interface(4) dengan JS, by Fadli Mahesa</title>
<link rel="stylesheet" href="interface.css" type="text/css">
</head>
<body>
<p id="cobaaja3">
<input type="text" name="iniNilai" />
<input type="button" id="btnInputNilai" value="Input Nilai" onclick="inputNilai();" />
<input type="text" id="hasil" />
<script language="javascript" type="text/javascript">
function inputNilai(){
var obj1 = document.getElementsByTagName('iniNilai')[0];
var obj2 = document.getElementsByTagName('iniNilai')[1];
var obj3 = document.getElementsByTagName('iniNilai')[2];
var objhasil = document.getElementById('hasil');
objhasil.innerHTML = obj1.value;
}
</script>
</p>
</body>
</html>/;
0 komentar: