ARIYADI ART: September 2018

Home / Archived For September 2018

Pengulangan dan Fungsi dalam JavaScript - Praktikum 15

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan tutorial dari postingan sebelumnya yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Pengulangan dan Fungsi dalam JavaScript. Pengulangan ini sama seperti pengulangan yang ada dalam bahasa pemrograman lainnya ada 3 yaitu for, while, do-while. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :

Perulangan For

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - For In</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>

Nah, ini merupakan contoh pengulangan for. Pengulangan For ini dapat digabungkan dengan while. Struktur Umum Pengulangan For yaitu :
for ( inisialisasi; kondisi; peubah ) {
baris program 1;
baris program 2;
…
}

Codingan pengulangan for ini memang sengaja tidak dipanggil, untuk pemanggilannya ada di codingan berikutnya.

Perulangan For 2

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Pengulangan For</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <script language="JavaScript">
  for(var x=1; x<=5; x++){
   document.writeln("Inilah perulangan For<br>")
  }
 </script>
</body>
</html>

Nah, dalam Codingan diatas inisialisasi x=1, kondisi x<=5, dan x++ maksudnya Kode Program akan diulang apabila x<= 5 (nilai x awalnya 1) dan setiap terjadi perulangan maka x akan bertambah 1. Kode program yang diulang yaitu untuk menampilkan kalimat dengan perintah document.writeln.

Perulangan While

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Perulangan While</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <script language="JavaScript">
  var x = 0;
  while(x < 5){
   document.writeln("Ini adalah Perualangan While <br>");
    x++;
  }
 </script>
</body>
</html>

Nah, ini merupakan contoh codingan perulangan while. Struktur Umum While ini yaitu :

while ( kondisi ) {

kode program yang ingin dijalankan berkali-kali;

}

Jadi dalam while ini kita inisialisasi dahulu variabel untuk perulangan, lalu kondisinya dalam while(kondisi), dan perubahan variabelnya ada di akhir (sebelum while ditutup). Kode program yang diulang yaitu untuk menampilkan kalimat juga.

Perulangan Do-While

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Perulangan Do While</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <script language="JavaScript">
  var x = 0;
  do{
   document.writeln("Ini perulangan Do While <br>");
   x++;
  }while(x < 4);
 </script>
</body>
</html>

Nah, ini merupakan contoh codingan perulangan do-while. Struktur Umum Do-While ini yaitu :

do {

kode program yang ingin dijalankan berkali-kali;

} while( kondisi );

Jadi dalam do-while ini kita inisialisasi dahulu variabel untuk perulangan, lalu kondisinya dalam while(kondisi) hanya saja setelah struktur do selesai, dan perubahan variabelnya ada di akhir (sebelum do ditutup). Kode program yang diulang yaitu untuk menampilkan kalimat juga. Bedanya do-while ini akan mengeksekusi setidaknya 1 kali walaupun kondisi salah.

Gabungan Perulangan

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Pengulangan</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   for(var i = 0; i < 3; i++){
    document.write("Hallo JavaScript 1<br>");
   }

   var j = 0;
   while(j < 3){
    document.write("Hallo JavaScript 2<br>");
    j = j+1;
   }

   var k = 0;
   do{
    document.write("Hallo JavaScript 3<br>");
    k++;
   }while(k<3);
  </script>
 </p>
</body>
</html>

Nah, Codingan diatas merupakan contoh penggunaan semua tipe perulangan yang masih dengan kode program untuk menampilkan kalimat.

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 tertentuagar 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.

Fungsi juga dibagi menjadi 2 Ada yang memiliki nilai balik ada juga yang tidak memiliki 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 return.

Fungsi untuk Perhitungan

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   function hitungLuasAlas (panjang, lebar){
    var luasAlas = panjang * lebar;
    return luasAlas;
   }
   function hitungVolume (la, t){
    var volume = luasAlas * tinggi / 2;
    return volume;
   }
   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>

Nah, ini merupakan contoh penggunaan fungsi dalam JavaScript. Dimana Function ini akan dapat dijalankan apabila dipanggil. Dalam hal ini yaitu untuk menghitung Luas Alas dan Volume dari sebuah Bangun Ruang. Cara deklarasinya yaitu dengan function. Fungsi yang digunakan ini menggunakan return karena program perhitungan yang harus terdapat hasil.

Fungsi Tanpa Return

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <p id="coba">
<script language="JavaScript" type="text/javascript">
   function sapa(nama){
    alert("Hallo, Namaku " + nama);
   }
   sapa("Bintang");

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

Jika ini, merupakan penggunaan fungsi yang tanpa memerlukan return karena kode program tidak membutuhkan hasil untuk dikembalikan yaitu hanya untuk menampilkan text.

Fungsi CharAt

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.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>

Nah, Codingan ini yaitu untuk menentukan posisi karakter dalam sebuah kalimat. Perhitungan Posisinya sama dengan index array yaitu dimulai dengan 0.

Fungsi Index

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Buat Fungsi</title>
 <link rel="stylesheet" href="style.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 ada diurutan ke-" + dimanaKata + " dari kalimat SMK Negeri 4 Bandung");
  </script>
 </p>
</body>
</html>

Nah, ini merupakan contoh penggunaan indexOf(kata) yang gunanya sama seperti codingan sebelumnya yaitu untuk menentukan index hanya saja disini kita menggunakan kata sebagai keywordnya.
Dari semua codingan saya memakai 1 file css untuk styling sederhana yaitu :

body{
 background-color: cyan;
 font: verdana;
 font-size: 20px;
 color: purple;
 text-align: center;
}
p{
 color: salmon;
 font : Serif;
 text-align: center;
 font-size: 20px;
}

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.

😃Selamat Bercoding

Pada September 27, 2018 Komentar

Struktur Kontrol Percabangan dalam JavaScript - Praktikum 14

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan tutorial dari postingan sebelumnya yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Struktur Kontrol Percabangan dalam JavaScript. Struktur Kontrol Percabangan ini biasanya diesebut dengan pengkondisian yaitu sama seperti bahasa pemrograman lainnya ada 4 yaitu IF, IF ELSE, ELSE, SWITCH CASE. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :

IF1

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Kondisi If</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<p id="cobaan">
<script language="javascript" type="text/javascript">
			var umur;
			umur = prompt("Masukkan Umur Anda");
			umur = parseInt(umur);
			if (umur < 17){
				alert("Kamu belum dapat mengikuti pemilu");
			}
			alert("Kamu dapat mengikuti pemilu");
		</script>
	</p>
</body>
</html>

Jika diklik OK

Nah, Codingan ini merupakan contoh pertama dalam Pengkondisian menggunakan IF, struktur umum IF yaitu :
if(Kondisi){
Kode program yang akan dijalankan apabila kondisi benar
}
Disini juga kita menggunakan prompt yang gunanya untuk mengambil inputan dari user dan bisa menambahkan kalimat petunjuknya.

IF2

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Kondisi If 2</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<p id="coba">
<script language="javascript" type="text/javascript">
			var olahraga;
			olahraga = prompt("Masukkan Olahraga yang kamu sukai? terjun payung atau sepeda gunung?");
			if (olahraga == "terjun payung" || olahraga == "sepeda gunung");{
				alert("Kamu menyukai olahraga ekstrim");
			}
		</script>
	</p>
</body>
</html>

Jika diklik OK

Nah, ini contoh If yang kedua, dalam menentukan kondisi if maka kita bisa menggunakan lebih dari 1 syarat seperti diatas dengan menggunakan simbol "||" yang artinya atau. bisa juga &&(dan). Disini juga kita menggunakan prompt dan alert.

IF3

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Demo If</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<p>
Akan muncul tulisan "Good Day!" jika waktu kurang dari 18:00</p>
<p id="demo">
Good Evening!</p>
<script language="javascript" type="text/javascript">
		if (new Date().getHours() < 18){
			document.getElementById("demo").innerHTML = "Good Day!";
		}
	</script>
</body>
</html>

Nah, ini adalah codingan IF yang ketiga dan menggunakan pengkondisian waktu.(Karena saat saya Screenshoot sebelum jam 18.00 maka yang muncul Good Day!).

IF + ELSE

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - IF + ELSE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<p id="demo">
<b>IF</b> akan memunculkan tulisan "Selamat Pagi!"</p>
<p>
Jika pada opsi IF tidak ada maka akan pindah ke <b>ELSE</b> memunculkan "Hello World" <br> kata yang muncul adalah :</p>
<script>
		var	d = new Date()
		var time = d.getHours()

		if (time < 9){
			document.write("Selamat pagi !");
		}else{
			document.write("Hello World");
		}
	</script>
</body>
</html>

Nah, Ini juga sama menggunakan pengkondisian waktu bedanya, ini menggunakan else. Nah struktur umumnya :
if(Kondisi){
Kode program yang akan dijalankan apabila kondisi benar
}
else{
Kode program yang akan dijalankan apabila kondisi tidak benar
}

IF + ELSE IF + ELSE

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - IF + ELSE IF + ELSE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<p id="cobaan">
Penggunaan <b>ELSE IF</b> bertujuan untuk mengganti <b>IF</b> dalam jumlah banyak</p>
<script>
		var	d = new Date()
		var time = d.getHours()

		if (time < 9){
			document.write("Selamat pagi !");
		}
		else if (time >= 12 && time < 3){
			document.write("Hari yang panas");
		}
		else{
			document.write("Hello World!")
		}
	</script>
</body>
</html>

Nah, sama seperti codingan sebelumnya masih dengan pengkondisian waktu dan sekarang kita menggunakan else if maksudnya disini kita dapat menggunakan beberapa kondisi. Struktur umumnya
if(Kondisi){
Kode program yang akan dijalankan apabila kondisi benar
}
else if(Kondisi){
Kode program yang akan dijalankan apabila kondisi pertama tidak benar dan kondisi selanjutnya benar.
}
else{
Kode program yang akan dijalankan apabila kondisi tidak benar
}

Switch Case 1

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - SWITCH CASE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<script language="javascript">
		var	pilihan = prompt("Pilihan untuk cek pulsa\n1. Informasi Pulsa Anda\n2. Informasi masa aktif dan masa tenggang anda");
			pilihan = parseInt(pilihan);
			switch(pilihan){
				case 1 : alert("Jumlah pulsa anda adalah sembilan ratus ribu rupiah");
						 break;
				case 2 : alert("Masa aktif kartu anda hingga 7 Agustus 2019");
						 break;		
				default : alert("Pilihlah sesuai Nomor yang ada");
						  break; 
			}
	</script>
</body>
</html>

Jika diklik OK

Nah, Switch case pun sama yaitu untuk pengkondisian. Ini salah satu implementasinya yaitu program yang mirip pengecekan pulsa.

Switch Case 2

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Latihan SWITCH CASE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<script language="javascript">
		alert("MENU MASAKAN PADANG\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\n\nKlik ok untuk melanjutkan");
		var	pilihan = prompt("1. Rendang................Rp.14.000\n2. Ikan Balado............Rp.13.000\n3. Dendeng Balado.........Rp.17.000\n4. Soto padang............Rp.15.000\n5. Gulai paku.............Rp.20.000");
			pilihan = parseInt(pilihan);
			switch(pilihan){
				case 1 : alert("Menu yang anda pilih : Rendang................Rp.14.000");
						 break;
				case 2 : alert("Menu yang anda pilih : Ikan Balado............Rp.13.000");
						 break;		
				case 3 : alert("Menu yang anda pilih : Dendeng Balado.........Rp.17.000");
						 break;	
				case 4 : alert("Menu yang anda pilih : Soto padang............Rp.15.000");
						 break;	
				case 5 : alert("Menu yang anda pilih : Gulai paku.............Rp.20.000");
						 break;	
				default : alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
						  break; 
			}
	</script>
</body>
</html>

Ini merupakan Program Pemesanan Makanan yang menggunakan Switch Case. Struktur umumya
switch(namavar){
case 1 : kode program apabila value variabel bernilai 1
case 2 : kode program apabila value variabel bernilai 2
...
default : kode program untuk kondisi default/tidak diatur
}
Berikut ini merupakan contoh hasil Program Perhitungan Luas Bangun Datar

😃Selamat Bercoding

Pada September 23, 2018 Komentar

Tutorial Array pada JavaScript - Praktikum 13

Technology

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan tutorial dari postingan kemarin yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Pembuatan Array dalam JavaScript. Array itu sendiri merupakan struktur data yang memungkinkan dalam 1 variabel dapat berisi beberapa data. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :
Array 1

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Array</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil salah satu Indexnya</h3>
<p id="coba">
<script>
			var siswaXTKJ1 =["Adi", "Adnan", "Arvi", "Devina", "Lukman", "Pahmi"];
			document.getElementById("coba").innerHTML = siswaXTKJ1[4];
		</script>
	</p>
</body>
</html>

Nah, Penulisan Array yaitu dengan tanda kurung --> var namavariable ["isi1","isi2"]. Dalam Array tentunya kita harus mengetahui index, index ini yaitu untuk memanggil isi dari array yang kita buat. Uniknya index dimulai dari angak 0(ex : kita punya sebuah array yang isinya ada 5 maka untuk menampilkan isi yang ke-1 dan ke-5 maka memakai index 0 dan 4). Dalam memanggil isi Array kita menggukan id juga. Codingan diatas menggunakan Array Monodimensiyaitu Array yang setiap indexnya mempunyai satu isian/nilai.

Array 2

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Array 2</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil salah satu Indexnya</h3>
<p id="coba2">
<script>
			var siswa= new Array("Wicky", "Subi", "Rajab","Renaldi"); document.getElementById("coba2").innerHTML = siswa[2];
		</script>
	</p>
</body>
</html>

Nah, Codingan diatas sama seperti codingan sebelumnya, yaitu membuat Array yang isiannya berupa nama - nama (String). Codingan diatas menggunakan Array Monodimensi. Kata new dalam Codingan berarti akan membuat Array Baru.

Array Objek

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Array Adalah OBJEK</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil salah satu Indexnya</h3>
<p id="objek">
<script>
			var person = {firstName:"Mochamad", lastName:"Faisal", age:15}; document.getElementById("objek").innerHTML = person["firstName"];
		</script>
	</p>
</body>
</html>

Nah, Codingan diatas merupakan contoh penggunaan Array Asosiatif yaitu kita dapat mengganti index yang defaultnya berupa angka menjadi kata yang kita inginkan. Namun dicodingan ini tetap menampilkan hanya satu isi Array.

Akses data Array

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - BuatArray</title>
	<link rel="stylesheet" href="BuatArray.css" type="text/css">
</head>
<body>
	<h3>
Hasil dari Pembuatan Array dan Memanggil Beberapa Indexnya</h3>
<p id="coba">
<script>
			var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra", "Monyet", "Kelinci", "Lutung","Kuda"]; 
			document.write( "Di bonbin ada " + arrayHewan[0]+" dan "+arrayHewan[8] +", " + arrayHewan[6]+ " dan teman-temannya"); 
		</script>
	</p>
</body>
</html>

Nah, Codingan diatas merupakan contoh implementasi Pengaksesan data dalam sebuah Array(Disini Array monodimensi). document.write dalam codingan ini sama fungsinya dengan cout dalam bahasa pemrograman C++ atau println dalam bahasa pemrograman Java.
Semua Codingan diatas saya menggunakan 1 file css untuk styling.

body{
	background: url('Bg.jpg');
	color: purple;
	font-size: 20px;
	text-align: center;

}
h3{
	color: #24325D;
	font-family: Verdana, Monoscape;
	text-align: center;
	text-shadow: 2px 2px 2px dodgerblue;
}

😃Selamat Bercoding

Pada September 19, 2018 Komentar

Tutorial JavaScript Dasar - Praktikum 12

Technology

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan Tutorial awal mengenai JavaScript. Apa itu JavaScript ??Javascript adalah bahasa yang berbentuk kumpulan skrip yang berjalan pada suatu dokumen HTML. Sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. JavaSript ini juga Case Sensitive. Nah, disini kita akan membahas Dasar - dasar dalam Pengcodingan JavaScript. Langsung saja berikut Codingan dan contohnya :

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Contoh Program JavaScript</title>
</head>
<body background="gambar/Logo.jpg">
 <script language="javascript">
  alert("Hallo !");
 </script>
</body>
</html>

Nah jika menggunakan JavaScript external penulisannya : alert("Hallo Aip Ariyadi !")

Jika diklik OK maka akan muncul :

Nah cara penulisan JavaScript dalam HTML yaitu seperti contoh diatas diapit oleh tag script. alert berfungsi untuk menampilkan teks secara pop-up.

UbahStyle.html

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - My Heading 1</title>
 <style>
  h1{
   text-align: center;
   font-family: Verdana, Arial, Monoscape;
   color: #24325D;
  }
  body{
   background-color : cyan;
  }
 </style>
</head>
<body>
 <h1 id="id1">
Ubah Warna</h1>
<center>
 <button type="button" onclick="document.getElementById('id1').style.color ='red'">Click Me!</button>
 </center>
</body>
</html>

Jika diklik button Click Me! maka

Nah, onclick diatas maksudnya yaitu jika button di klik maka id1 akan rubah warnanya menjadi merah. JavaScript ini sering dipadukan dengan penggunaann id di HTML.

Variabel dalam JavaScript

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - JavaScript Variables</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <h1>
JavaScript Variables</h1>
<p>
pada contoh ini x, y, & z adalah variable</p>
<p id="demo">
</p>
<script>
  var x = 5;
  var y = 6;
  var z = x + y;
  document.getElementById("demo").innerHTML = z;
 </script>
</body>
</html>

Nah, codingan diatas merupakan contoh operasi aritmatika dalam JavaScript dan hanya menampilkan variable z(hasil).

Variable dalam JavaScript 2

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - JavaScript Variables contoh 2</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <h1>
JavaScript Variables contoh 2</h1>
<p>
pada contoh ini x, y, & z adalah variable</p>
<p id="demo">
</p>
<script>
  var price1 = 5;
  var price2 = 6;
  var total = price1 + price2;
  document.getElementById("demo").innerHTML = "Totalnya adalah: " + total;
  document.getElementById("demo").innerHTML = "Totalnya adalah: " + total;
 </script>
</body>
</html>

Ini juga sama operasi pertambahan dalam JavaScript yang dipadukan dengan HTML.

JavaScript dengan tipe data

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - JS Variables dengan Tipe data</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <h1>
JavaScript Variables dengan Tipe Data</h1>
<p>
Deklarasi Strings harus disertai tanda kutip</p>
<p>
Deklarasi angka tidak perlu disertai kutip</p>
<p>
Cobalah dengan tanda komentar //</p>
<p id="demo">
</p>
<script>
  var pi = 3.14;
  var person = "John Doe";
  var answer = 'Yes I am!';
  //document.getElementById("demo").innerHTML = pi;   tidak akan muncul
  document.getElementById("demo").innerHTML = person;
  //document.getElementById("demo").innerHTML = answer;   tidak akan muncul
 </script>
</body>
</html>

Nah, dalam JavaScript untuk menambahkan komentar maka cukup dengan menambhakan slash2x (//).
3 Codingan diatas saya gunakan 1 file css yaitu :

body{
 background-color: cyan;
}
h1{
 color: #24325D;
 font-family: monospace, verdana;
 text-align: center;
 padding-top: 30px;
}
p{
 color: salmon;
 font : Serif;
 text-align: center;
 font-size: 20px;
}

Berikut ini merupakan Contoh Tampilan Website tentang Operasi Aritmatika menggunakan HTML, CSS, dan JavaScript :

😃Selamat Bercoding

Pada September 16, 2018 Komentar

Formating Tampilan Form dengan HTML & CSS - Praktikum 11

Technology

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Penggunaan CSS dalam tag - tag HTML yang sudah kita gunakan sebelumnya. Nah, untuk sekarang saya akan sharing pemformatan tampilan Form dengan menggunakan CSS. Langsung saja berikut Codingan dan contohnya :

ExtCSSonForm1
<!DOCTYPE html>
<html>
<head>
<title>Aip Ariyadi - XI RPL 3 - Pengaturan Pada Form Text Area</title>
<link rel="stylesheet" href="cssOnForm1.css" type="text/css">
</head>
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="50">Nama</td>
<td width="175">
<textarea name="textarea" cols="50"> </textarea>
</td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175">
<textarea name="textarea" cols="50" rows="14"></textarea>
</td>
</tr>
</table>
</form>
</body>

</html>

Nah, jika pada saat Tutorial sebelumnya kita belajar Formating Multimedia, sekarang kita akan membahas tentang Form. Dan property - property CSS yang digunakanpun masih sama seperti sebelumya. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.

ExtCSSonForm2

<!DOCTYPE html>

<html>

<head>

<title>Aip Ariyadi - XI RPL 3 - Pengaturan Pada Form Text Area</title>

</head>

<body>

<tr>

</td>

</tr>

<tr>

<td width="50">Pesan</td>

</td>

</tr>

</table>

</form>

</body>

</html>

Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.

ExtCSSonForm3

Nah, ini juga tentang tag button, hanya saja ini akan menggunakan hover. Apa itu Hover? Secara sederhana hover akan berfungsi jika cursor mendekati button yang memakai hover, maka button itu akan berubah stylenya sesuai dengan yang sudah diatur. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.

ExtcssonRadioButton

Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.

Quiz - Formulir Pendaftaran Calon Peserta

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Formulir Pendaftaran Peserta</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <form action="" method="post" name="form1">
 <fieldset id="field">
   <legend id="legend">Formulir Pendaftaran Calon Peserta</legend>
  <table>
<tr>
    <td>Nama</td>
    <td>
     <input type="text" name="nama">
    </td>
   </tr>
<tr>
    <td>No. Induk Penduduk</td>
    <td>
     <input type="text" name="nip">
    </td>
   </tr>
<tr>
    <td>Kelamin</td>
    <td id="jkel1">
     <input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria
    </td>
    <td id="jkel2">
     <input type="radio" name="radiobutton" value="radiobutton" class="rb1">Wanita 
    </td>
   </tr>
<tr>
    <td>TTL</td>
    <td>
     <input type="text" name="ttl">
    </td>
   </tr>
<tr>
    <td>Agama</td>
    <td>
     <select id="agama">
      <option value="Islam">Islam</option>
      <option value="Kristen Protestan">Kristen Protestan</option>
      <option value="Kristen Katolik">Kristen Katolik</option>
      <option value="Hindu">Hindu</option>
      <option value="Budha">Budha</option>
     </select>
    </td>
   </tr>
<tr>
    <td>Status</td>
    <td>
     <select id="status">
      <option value="Kawin">Kawin</option>
      <option value="Belum Kawin">Belum Kawin</option>
     </select>
    </td>
   </tr>
<tr>
    <td>
     <input type="submit" class="button" name="submit" value="Browse">
     <input type="submit" class="button" name="submit2" value="Simpan">
    </td>
   </tr>
</table>
</fieldset>
</form>
</body>
</html>

Nah, ini contoh tampilan sebuah formulir pendaftaran. Tag Fieldset dan Legend digunakkan untuk membuat tulisan ditengah tengah border sebuah tabel. Dalam CSS anda juga bisa memanggil tag dengan cara input[type="submit"]. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.

Tugas

<!DOCTYPE html>
<html>
<head>
 <title>Latihan</title>
 <link rel="stylesheet" href="Assets/style.css">
</head>
<body>
 <div id="bag1">
  <div class="navbar">
   <div class="bag-kiri">
    <h1>
Ariyadi Art</h1>
</div>
<div class="bag-kanan">
    <ul>
<li><a href="">HOME</a></li>
<li><a href="">PROFILE</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div class="photo">
   <div class="inner-photo">
    <img src="Assets/1.jpg" alt="error" width="100%" height="100%">
   </div>
</div>
</div>
<div id="bag2">
  <div class="textandpicture">
   <h1>
Ariyadi Art</h1>
<h3>
Sebuah Blog dimana dalam blog tersebut terdapat berbagai tutorial baik tutorial Editing ataupun tutorial bahasa pemrograman seperti C++, HTML, CSS. URL Blog tersebut yaitu <i>aipariyadi.blogspot.co.id</i>. Blog ini dibangun sejak tahun 2016.</h3>
<div class="img">
    <img src="Assets/2.jpg" alt="error">
    <img src="Assets/2.jpg" alt="error">
   </div>
</div>
</div>
<div id="bag3">
  <div class="gambar">
   <img src="Assets/img/8.jpg" alt="" width="100%" height="100%">
  </div>
<div class="footer">
   <div class="inner-footer">
    <div class="kiri">
     <h1>
Ariyadi Art</h1>
<p>
Gagasan pertama blog ini dibangun yaitu dikarenakan tugas sekolah pemilik blog tersebut. Sampai saat ini(Saat ini dibuat tanggal 5 September 2018) sekiranya sudah ada 115 Postingan dengan jumlah penayangan mencapai 67.231 dilihat.</p>
</div>
<div class="tengah">
     <h2>
Who ?</h2>
<ul>
<li><a href="">AIP ARIYADI</a></li>
<li><a href="">XI RPL 3</a></li>
<li><a href="">SMK NEGERI 4 BANDUNG</a></li>
</ul>
</div>
<div class="kanan">
     <h2>
Contact</h2>
<ul>
<li><a href=""><i class=""></i>aipariyadi@gmail.com</a></li>
<li><a href=""><i class=""></i>+62 857 xxx xxx</a></li>
<li><a href=""><i class=""></i>Ariyadi Art |  Bandung, Jawa Barat, Indonesia</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

* {
 margin: 0;
 padding: 0;
}
body {
 font-family: Verdana;
}
#bag1 .navbar {
    position: fixed;
    background-color: white;
    width: 100%;
}
#bag1 .navbar .bag-kiri {
    float: left;
    width: 40%;
}
#bag1 .navbar .bag-kiri h1 {
    padding: 16px 64px;
    color: #24325D;
}
#bag1 .navbar .bag-kanan {
    float: left;
    width: 60%;
}
#bag1 .navbar .bag-kanan ul li {
    list-style-type: none;
    float: left;
    padding: 16px 32px;
}
#bag1 .navbar .bag-kanan ul li a {
    text-decoration: none;
    color: #4C4C6C;
}
#bag1 .navbar .bag-kanan ul li:hover {
    background-color: #24325D;
}

#bag1 .photo {
    width: 100%;
    height: 585px;
    float: left;
    background-color: #f2f2f2; 
    padding-top: 50px;
}
#bag1 .photo .inner-photo {
    width: 95%;
    height: 100%;
    margin: auto;
}

#bag2 {
    width: 100%;
    height: 150px;
    float: left;
}
#bag2 .textandpicture, #bag2 .feature {
    width: 80%;
    height: 50%;
    margin: auto;
}
#bag2 .textandpicture h1, #bag2 .textandpicture h3 {
    text-align: center;
}
#bag2 .textandpicture h1 {
    padding-top: 70px;
    color: #24325D;
}
#bag2 .textandpicture h3 {
    padding-top: 20px;
    padding-bottom: 70px;
    color: #4C4C6C;
}
#bag2 .textandpicture .img {
    width: 100%;
    height: 40%;
}
#bag2 .textandpicture .img img {
    width: 47.5%;
    height: auto;
    float: left;
}
#bag3 {
    width: 100%;
    height: 600px;
    margin-top: 10px;
    float: left;
}
#bag3 .gambar {
    width: 100%;
    height: 600px;
}
#bag3 .footer {
    width: 100%;
    height: 400px;
    float: left;
    background-color: #24325D;
}
#bag3 .footer .inner-footer {
    width: 80%;
    height: 70%;
    margin: 60px auto;
}
#bag3 .footer .inner-footer .kiri, #bag3 .footer .inner-footer .tengah, #bag3 .footer .inner-footer .kanan {
    width: 31%;
    height: 100%;
    float: left;
    color: white;
}
#bag3 .footer .inner-footer .kiri p, #bag3 .footer .inner-footer .tengah ul, #bag3 .footer .inner-footer .kanan ul {
    padding-top: 30px;
    color: #8A8D94;
}
#bag3 .footer .inner-footer .tengah, #bag3 .footer .inner-footer .kanan {
    margin-left: 3%;
}
#bag3 .footer .inner-footer .tengah ul li, #bag3 .footer .inner-footer .kanan ul li {
    list-style-type: none;
    padding: 10px 0px;
    border-bottom: 1px solid #2C2D2E;
}
#bag3 .footer .inner-footer .tengah ul li a, #bag3 .footer .inner-footer .kanan ul li a {
    text-decoration: none;
    color: #8A8D94;
}

Nah, ini merupakan contoh tampilan web yang hanya dibuat oleh HTML dan CSS. Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan. Jadi jika anda lupa anda bisa lihat dipostingan - postingan saya sebelumnya.

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.