Angga Gemilang

Nama Saya Angga Gemilang~~~
Kelas X-RPL 1

Saya adalah siswa di kelas X (10) - RPL 1 di SMK Negeri 4 Bandung.
SMK Negeri 4 Bandung

Saya Bersekolah di SMK Negeri 4 Bandung yaang beralamat di Jalan Kliningan No.6, Turangga, Lengkong, Turangga, Lengkong, Kota Bandung, Jawa Barat 40264
Blogger

Sublime better than CMS

Kamis, 27 September 2018

#16 Intermediate Web | Web Programming Tutorial

September 27, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, Pada postingan kali ini kita sudah memasuki materi javacscript dengan metode pemrograman berbasis objek yang bisa kita plejari pada pemrograman java dan juga interaksi user, mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 3 bab yang akan kita pelajari, yaitu:

Penjelasan Pemrograman Berbasis Objek
Penjelasan Pemrograman Berbasis Prototype
Penjelasan Interaksi User

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pemrograman Berbasis Objek
Penjelasannya...

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.

Pemrograman Berbasis Prototype
Penjelasannya...

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.

Berikut Merupakan contoh - contoh PBP

CSS : (index.css)

body{
 background: salmon;
 font-family: arial;
 position: absolute;
 top: 35%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-transform: uppercase;
 font-weight: bold;
 color: #fff;
 text-shadow: 0 2px 3px #000;
 letter-spacing: 5px;
 font-size: 35pt;
 text-align: center;
}

input#getNilai
{
 width: 200px;
}

input[type="text"]
{
 width: 350px;
 transition: .5s;
 height: 50px;
 border: none;
 background: none;
 border-bottom: 3px solid grey;
 font-size: 25pt;
 padding: 0px 30px;
 color: #fff;
}

input[type="text"]:focus
{
 border-bottom: 3px solid #fff; 
}

input[type="button"]
{
 border: none;
 margin-top: 15px;
 width: 160px;
 height: 60px;
 background: none;
 cursor: pointer;
 font-weight: bold;
 color: #fff;
 border-radius: 20px;
 font-size: 20pt;
 transition: .5s;
 text-transform: uppercase;
}

input[type="button"]:hover
{
 box-shadow: 0 5px 10px rgba(0,0,0,.5);
}

input#tombolakhir
{
 background: #fff;
 color: #000;
 margin-top: 23px;
 margin-bottom: 20px;
}

input#tombolakhir:hover
{
 background: salmon;
 color: #fff;
}

Contoh 1 :

<html>
 <head>
 <title>Buat Fungsi PBO</title>
 </head>
  <link rel="stylesheet" href="index.css" type="text/css">
 <body>
  <pre>Angga Gemilang</pre>
  <input type="text" id="nilai">
  <input type="button" id="getNilai" value="AmbilNilai" onclick="getNilai()">

  <script type="text/javascript">
   function getNilai() {
    var objValue = document.getElementById('nilai').value;
    alert("Nilainya adalah : " + objValue);
   }
  </script>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 1 :

Contoh 2 :

<html>
 <head>
 <title>Buat Fungsi PBO</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>Angga Gemilang</pre>
  <input type="button" value="CLICKME!" onclick="Pakai()" class="Lonely">
   <script 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;
     }
    }

    function Pakai(){
     var s = new SegiEmpat();
     s.panjang = 4;
     s.lebar = 3;
     alert("Luas : " + s.hitungLuas()+" cm2");
     alert("Keliling : " + s.hitungKeliling() +" cm");
    }
   </script>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 2 :

Interaksi User
Penjelasannya...

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 merupakan atribut yang dapat digunakan pada interaksi user :

Atribut Event	Penjelasan
onclick ondblclick	Event ini terjadi saat user melakukan klik sekali atau dua kali dalam satu elemen HTML. Elemen HTML yang umum dimiliki atribut ini : button, document, checkbox, link, radio, select, submit, reset.
onmousedown	Event ini terjadi saat user melakukan klik pada satu elemen HTML. Elemen terkait : button, document, link, layer
onmousemove	Event ini terjadi saat user menggerakan mouse diatas elemen HTML
onmouseover	Event ini terjadi saat user menggerakan mouse ke atas elemen HTML. Elemen terkait: button, documnet, link, layer.
onmouseout	Event ini terjadi jika user menggerakan mouse keluar elemen HTML. Elemen Terkait : button, document, link, layer
onmouseup	Event ini terjadi saat user melepaskan klik pada elemen HTML. Elemen terkait : button, document, link, layer
onmousedown	Event ini terjadi saat user sedang menekan tombol keyboard pada elemen HTML. Elemen terkait : document, image, link, input, textarea
onkeypress	Event ini terjadi saat user menekan tombol keyboard pada elemen HTML. Elemen terkait : document, image, link, input, textarea
onkeyup	Event ini terjadi saat user melepas penekanan tombol keyboard pada elemen HTML.
onload	Event ini terjadi pada dokumen atau frame telah ditampilkan oleh browser. Elemen terkait : document, image, layer, window
onresize	Event ini terjadi saat ukuran dari dokumen berubah. Elemen terkait : document, image, layer, window
onscroll	Event ini terjadi saat user melakukan scrolling pada dokumen. Elemen terkait : document, window
onunload	Event ini terjadi saat user menutup dokumen. Elemen terkait : document, window
onblur	Event ini terjadi saat fokus pada elemen tersebut dipindahkan ke elemen lainnya. Elemen Terkait : button, checkbox, file upload, layer, password, radio, reset, select, submit, text, textarea, window
onchange	Event ini terjadi saat nilai elemen form berubah. Elemen terkait : file upload, select, submit, text, textarea
onfocus	Event ini terjadi saat elemen tersebut difokuskan oleh user. Elemen terkait : button, checkbox, file upload, layer, password, radio, reset, select, submit, text, textarea, window
onreset	Event ini terjadi saat form di reset ke kondisi sebelum diisi. Elemen terkait : form
onselect	Event ini terjadi saat user memiliki sebagian teks pada elemen. Elemen terkait : text, textarea
onsubmit	Event ini terjadi saat form akan dikirim ke aplikasi browser. Elemen terkait : form

Berikut merupakan contoh program interaksi user pada javascript :

Contoh 1 :

<html>
 <head>
 <title>Interface Dengan JS</title>
 </head>
  <link rel="stylesheet" href="BuatEvent.css" type="text/css">
 <body>
  <pre>Angga Gemilang</pre>
  <p id="coba">
  <script 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>

Hasil Dari Pengerjaan Contoh 1 :

Contoh 2 :

<!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>

Hasil Dari Pengerjaan Contoh 2 :

Contoh 3 :

<!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>

Hasil Dari Pengerjaan Contoh 3 :

Contoh 4 :

<!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>

Hasil Dari Pengerjaan Contoh 4 :

Contoh 5 :

<!DOCTYPE html>
<html>
<head>
    <title>Interface dengan JS</title>
    <link rel="stylesheet" href="index.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>
</center>
 <body>
<html>

Hasil Dari Pengerjaan Contoh 5 :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #15 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Sabtu, 22 September 2018

#15 Intermediate Web | Web Programming Tutorial

September 22, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, Pada postingan kali ini kita sudah memasuki materi Pengulangan alias Looping pada javascript. Tidak berbeda dengan looping pada bahasa pemrograman lain, mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 4 bab yang akan kita pelajari, yaitu:

Pengertian & Varian Pengulangan
Pengertian Fungsi
Contoh Fungsi
Penggunaan Percabangan

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pengertian & Varian Pengulangan
Penjelasannya...

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

Perulangan For
Perulangan While
Perulangan Do-While

Struktur Dasar Perulangan For

for (inisialisasi ; kondisi ; peubah){

// Kode program yang akan dijalankan

}

Struktur Dasar Perulangan While

while(kondisi){

//kode program yang ingin dijalankan berkali - kali

}

Struktur Dasar Perulangan Do While

do{

//Kode program yang inginn dijalankan berkali - kali

}while(kondisi);

Kesimpulan

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

Untuk setiap kasus perulangan dapaat diterapkan dengan menggunakan ketiga bentuk ini. Kita dapat membuat perulangan untuk menampilan pesan "Halo World" hingga 3 kali dengan menggunakan ketiga perulangan tersebut.

Pengetian Fungsi
Penjelasannya...

Fungsi dalam pemrograman merpakan suatu mekanisme yang digunakan untukmengelompokkan program dalm menyelesaukan suatu kasu, 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 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 :

Fungsi sendiri mempunyai struktur dasar seperti berikut :

if function nama_fungsi (parameter 1, parameter 2, ...){

//Kode program sebagai definis fungsi
return //Nama nilai balik jika ada

}

Keterangan

Parameter Merupakan syarat yang diperlukan oleh fungsi tersebut untuk dapat berjalan. Suatu fungsi juga dapat tidak memiliki Parameter, artuinya dapat dijalankan tanpa syarat.

Nilai hasil atau nilai balik operasi dari fungsi. Suatu fungsi dapat juga tidak memiliki nilai balik , maka jika tidak memiliki pernyataan return dapat ditiadakan

Pemanggilan Fungsi di javascript

varHasil = nama_fungsi (nilai_parameter1, nilai_parameter2, nilai_parameter3, nilai_parameter4, nilai_parameter n, ...);

Keterangan

varHasil adalah variabel yag dapat digunakan untu kmenampung nilai balik dari fungsi yang dipanggil bila ada

Pengertian Nilai Balik

Nilai balik adalah nilai hasil operasi yang dijalankan didalam dungsi dibagikan 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. Didama didalam 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.

Contoh Fungsi
Penjelasannya...

Struktur switch adalah sebuah stuktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut. Contoh programnya:

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

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

Penggunaan Perulangan
Penjelasannya...

Pada bab terakhir ini, saya akan menampilkan beberapa penggunaan dari perulangan yang dapat pakai. Seperti yang sudah dijelaskan tadi. Bahwa perulangan pada javascript ni dibagi menjadi tiga jenis yaitu for, while, dan do while. Mari kita mulai...

Namun sebelum ini, inilah file CSS yang saya pakai :

CSS

body{
 background: salmon;
 font-family: arial;
 text-transform: uppercase;
 font-weight: bold;
 color: #fff;
 text-shadow: 0 2px 3px #000;
 letter-spacing: 5px;
 font-size: 35pt;
 text-align: center;
}

Penggunaan For in

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <p id="nama">
 <script type="text/javascript">
  var txt;
  var person = {Dpn: "Angga", Blkg : "Gemilang", umur: "16"};
  var x;
  for(x in person){
   txt += person[x] + "  ";
  }
  document.getElementById("nama").innerHTML = txt;
 </script>
</body>
</html>

Hasil Dari Pengerjaan For in :

Penggunaan Perulangan For

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <script type="text/javascript">
  for(x = 1; x<=5; x++)
  {
   document.writeln("Inilah perulangan for<br>");
  }
 </script>
</body>
</html>

Hasil Dari Pengerjaan Perulangan for :

Penggunaan Perulangan While

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <script type="text/javascript">
  var x = 0;
  while(x < 5)
  {
   document.writeln("ini adalah perulangan while <br>");
   x++;
  }
 </script>
</body>
</html>

Hasil Dari Pengerjaan Perulantgan While

Penggunaan Perulangan Do While

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <script type="text/javascript">
  var x = 0;
  do{
   document.writeln("ini adalah perulangan do while<br>");
   x++;
  }
  while (x < 4);
 </script>
</body>
</html>

Hasil Dari Pengerjaan Perulangan Do While

Buat Perulangan.html

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <script type="text/javascript">
  for(var i = 0; i < 3; i++)
  {
   document.writeln("Halo javascript 1<br>");

   var j = 0;
   while (j < 3)
   {
    document.writeln("Halo javascript 2<br>");
    j += 1;
   }

   var k = 0;
   do{
    document.writeln("Halo javascript 3");
    k++;
   } while ( k < 3);
  }
 </script>
</body>
</html>

Hasil Dari Pengerjaan Buat Perulangan:

Buat Fungsi

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <p id="coba">
  <script type="text/javascript">
   function hitungLuasAlas (p, l){
    var luas = p * l;
    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>
</body>
</html>

Hasil Dari Pengerjaan Buat Fungsi:

Buat Fungsi Tanpa Return

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <p id="coba">
  <script type="text/javascript">
   function sapa(nama){
    alert("Halo, Namaku " + nama);
   }
   sapa("Angga");

   function sayHalo(){
    alert("Halo Juga, Nama Saya Ade");
   }
   sayHalo();
  </script>
</body>
</html>

Hasil Dari Pengerjaan Buat Fungsi Tanpa Return:

Buat Fungsi charAt

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <p id="coba">
 <script type="text/javascript">
  var nama = "Angga Gemilang";
  var posisiKarakter = 6;
  var k = nama.charAt(posisiKarakter);
  document.writeln("Karakter pada ututan kedua, dari kata Angga Gemilang adalah " +k+ " (dimulai dari 0)");
 </script>
</body>
</html>

Hasil Dari Pengerjaan Buat Fungsi charAt:

Buat Fungsi indexOf

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
 <script type="text/javascript">
  var nama = "SMKN 4 Bandung";
  var dimanaKata = nama.indexOf("Bandung"); 
  // dimanaKata akan bernilai 13
  document.write("dari fungsi ini, Bandung ada di urutan ke " + dimanaKata + " dari kalimat SMKN 4 Bandung");
 </script>
</body>
</html>

Hasil Dari Pengerjaan indexOf:

Wassalamualaikum wr, wb

Kamis, 20 September 2018

#14 Intermediate Web | Web Programming Tutorial

September 20, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi berada di level beginner? karena mulai sekarang kita akan mulai untuk memasuki materi Javascript. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 5 bab yang akan kita pelajari, yaitu:

Percabangan If
Percabangan Else
Percabangan If Else
Percabangan Switch Case
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Percabangan If
Penjelasannya...

Struktur IF adalah stuktur kode pemrograman ‘conditional’ yang akan membuat percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2 percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’ tidak terpenuhi.

Percabangan if ini mempunyai struktur dasar seperti berikut :

if (kondisi) {

//kode program yang akan dijalankan jika kondisi terpenuhi

}

Contoh 1

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Umur</title>
 <link rel="stylesheet" href="index.css">
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
  <script>
   function klik(){

   var umur;
   umur = prompt("Masukan umur anda");
   umur = parseInt(umur);
   if (umur < 17) {
    alert("Kamu belum dapat mengikuti pemilu");
   }
   alert("Kamu dapat mengikuti pemilu");
  }
  </script>
 </p>
</body>
</html>

CSS :

input.button1
  {
   position: absolute;
   left: 50%;
   top: 33%;
   transform: translate(-50%, -50%);
   padding: 10px 40px;
   cursor: pointer;
   transition: .5s;
   border: none;
   display: flex;
   text-transform: uppercase;
   border-radius: 20px;
   box-shadow: none;
  }
  input.button1:hover
  {
   background: salmon;
   color: #fff;
   box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Contoh percabangan If 1 :

Contoh 2

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Hobi</title>
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
  <script>
   function klik(){
   var olahraga;
   olaraga = prompt("Masukan olahraga yang kamu sukai? Climbing atau Downhill");
   if (olahraga == "Climbing" || olahraga == "Downhill");
   {
    alert("Kamu menyukai olahraga ekstream");
   }
   }
  </script>
 </p>
</body>
</html>

CSS :

input.button1
  {
   position: absolute;
   left: 50%;
   top: 33%;
   transform: translate(-50%, -50%);
   padding: 10px 40px;
   cursor: pointer;
   transition: .5s;
   border: none;
   display: flex;
   text-transform: uppercase;
   border-radius: 20px;
   box-shadow: none;
  }
  input.button1:hover
  {
   background: salmon;
   color: #fff;
   box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Contoh percabangan If 2 :

Contoh 3

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Hobi</title>
</head>
<body>
<div class="keseluruhan"> 
 <div class="kotak">
 <p id="coba">Akan muncul tulisan "Good day !"<br> Jika waktu kurang dari 18.00</p>
 </div> 
 <p id="sore">Good Evening!</p>
 <script>
  sore.style.marginLeft = "115px";
  sore.style.fontSize = "30pt";
  if (new Date().getHours() < 18)
  {
   document.getElementById("demo").innerHTML = "Good day !";
  }
   document.getElementById("demo").style.color = "blue";
 </script>
</div>
</body>
</html>

CSS :

 <style type="text/css">
  body
  {
   background: linear-gradient(-255deg, salmon, white);
  }
  .keseluruhan
  {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .kotak
  {
   padding: 10px 50px;
   width: 100%;
   height: 20%;
   border-radius: 30px;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   font-family: arial;
   font-size: 20pt;
  }
  .kotak h3
  {
   font-family: arial;
   text-transform: uppercase;
  }
 </style>

Hasil Dari Pengerjaan Contoh percabangan If 3 :

Percabangan Else
Penjelasannya...

Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi, yakni dengan menambahkan perintah ELSE. Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah.

Percabangan else ini mempunyai struktur dasar seperti berikut :

if (kondisi) {

//kode program jika kondisi true

}

else {

//kode program jika kondisi false

}

Contoh 1 :

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Hobi</title>
</head>
<body>
<div class="keseluruhan"> 
 <div class="kotak">
 <p id="coba">Akan muncul tulisan "Good day !"<br> Jika waktu kurang dari 18.00</p>
 </div> 
 <p id="sore">Good Evening!</p>
 <script>
  sore.style.marginLeft = "115px";
  sore.style.fontSize = "30pt";
  if (new Date().getHours() < 18)
  {
   document.getElementById("demo").innerHTML = "Good day !";
  }
   document.getElementById("demo").style.color = "blue";
 </script>
</div>
</body>
</html>

CSS :

<style type="text/css">
  body
  {
   background: linear-gradient(-255deg, salmon, white);
  }
  .keseluruhan
  {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .kotak
  {
   padding: 10px 50px;
   width: 100%;
   height: 20%;
   border-radius: 30px;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   font-family: arial;
   font-size: 20pt;
  }
  .kotak h3
  {
   font-family: arial;
   text-transform: uppercase;
  }
 </style>

Hasil Dari Pengerjaan Percabangan If Else 1:

Contoh 2 :

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>If Else 3</title>
</head>
<body>
<div class="keseluruhan"> 
 <div class="kotak">
 <p id="cobaan">Kurang dari jam <b>9.00</b> muncul <b>"Selamat pagi"</b> <br>Jam <b>12-3</b> muncul <b>"Hari yang panas"</b> <br>Selebihnya akan muncul <b>"Hai dunia"</b> </p>
 <fieldset>
 <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("Hai dunia !");
  }
 </script>
</fieldset>
</div>
</body>
</html>

CSS :

<style type="text/css"> <style type="text/css">
  body
  {
   background: linear-gradient(-255deg, salmon, white);
  }
  .keseluruhan
  {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .kotak
  {
   padding: 40px 50px;
   width: 100%;
   height: 20%;
   border-radius: 30px;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   font-family: arial;
   font-size: 20pt;
  }
  .kotak h3
  {
   font-family: arial;
   text-transform: uppercase;
  }
 </style>
 </style>

Hasil Dari Pengerjaan Percabangan If Else 2:

Switch Case
Penjelasannya...

Contoh 1

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Switch case 1</title>
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
 <script>
  function klik(){

  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 Rp 5000,00;");
    break;

   case 2 : alert("Masa aktif kartu anda hingga 20 September 2019");
    break;

   default:
    alert("Pilihlah sesuai nomer yang ada");
    break;
  }
 }
 </script>
</p>
</body>
</html>

CSS :

input.button1
  {
    position: absolute;
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
    padding: 10px 40px;
    cursor: pointer;
    transition: .5s;
    border: none;
    display: flex;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: none;
  }
  input.button1:hover
  {
    background: salmon;
    color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Switch Case 1

Contoh 2

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Switch Case 2</title>
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
 <script>
  function klik(){

  alert("MADANG KUY\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\nKlik ok untuk melanjutkan")
  var pilihan = prompt("1. Rendang................Rp10.000\n2. Ikan Gurame............Rp15.000\n3. Dendeng Crispi.........RP12.000\n4. Soto Padang............Rp15.000\n5. Gulai Sapi.............Rp17.000");

  pilihan = parseInt(pilihan);

  switch(pilihan) {
   case 1 : alert("Menu yang anda pilih : Rendang Rp10.000");
    break;

   case 2 : alert("Menu yang anda pilih : Ikan Gurame Rp15.000");
    break;

   case 3 : alert("Menu yang anda pilih : Dendeng Crispi RP12.000");
    break;

   case 4 : alert("Menu yang anda pilih : Soto Padang Rp15.000");
    break;

   case 5 : alert("Menu yang anda pilih : Gulai Sapi Rp17.000");
    break;

   default:
    alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
    break;
  }
 }
 </script>
</p>
</body>
</html>

CSS :

input.button1
  {
    position: absolute;
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
    padding: 10px 40px;
    cursor: pointer;
    transition: .5s;
    border: none;
    display: flex;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: none;
  }
  input.button1:hover
  {
    background: salmon;
    color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Switch Case 2

Quiz
Penjelasannya...

Pada bab keempat ini, menjelaskan tentang pembuatan sebuah form dengan menggunakan input text dan submit. hanya menggunakan sedikit style yakni untuk megganti warna background, padding dan margin button, dll. overall merupakan default html

untuk file CSSnya kita inputkan href file yang bernama "extCSSonbutton.css" pada tag <link> yang disediakan.

Hasil Dari Pengerjaan ExtCSSonButton :

"Quiz Part Will Be updated Soon...!"

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #3 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Sabtu, 15 September 2018

#13 web Intermediate | Web Programming Tutorial

September 15, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi bereada di level begginer? karena mulai sekrang kita akan mulai untuk memasuki materi CSS. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Untuk penjelasannya, saya akan menjelaskan materi tentang CSS dari paling dasar, Yang pada postingan ini saya akan menjelaskan seluk beluk tentang css multimeda. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 4 bab yang akan kita pelajari, yaitu:

Pengertian Array
Jenis - Jenis Array
Cara Penulisan Array
Contoh Penggunaan Array

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pengetian Array
Penjelasannya...

Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dan lain sebagainya.

Array di dalam javascript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. "tidak terurut" Kita bisa mengisi hanya index 0, 5, dan 10 saja di dalam array.

Jenis - Jenis Array
Penjelasannya...

Array Multidimensi

Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.

Perhatian :
Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.

Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi. Berikut ilustrasinya.

Array Asosiatif

Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif. Berikut adalah ilustrasinya

Cara Penulisan Array
Penjelasannya...

Sebuah object array dideklarasikan di JavaScript dengan beberapa cara berikut :

Dengan penggunaan keyword new Array(), dengan contoh sebagai berikut :
var objArr = new Array();

Dengan penggunaan keyword new Array(jumlahindex), dengan contoh sebagai berikut :
var objArr = new Array(3);

Dengan penggunaan keyword new Array(item1, item2, ...), dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = new Array("Sumatera", "Jawa", 100);

Dengan penggunaan literal [item1, item2, item3, ...], dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = [10, "Sarah", "Meliani", true];

Contoh Penggunaan Array
Penjelasannya...

Langsung saja saya mulai dengan contoh - contoh penggunaan dari array, walaupun masih basic, tapi yaudahlah. lumayan buat belajar...

Contoh Pertama

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah elemen array ke 2</h3>
 </div>
 <p id="coba2">
  <script>
   var siswa = new Array ("Wicky","Subi","Rajab","Renaldi");
   document.getElementById("coba2").innerHTML = siswa[2];
   coba2.style.color = "#000";
   coba2.style.fontWeight = "bold";
   coba2.style.fontFamily = "arial";
   coba2.style.fontSize = "30px"; 
   coba2.style.textTransform = "uppercase"; 
   coba2.style.marginLeft = "100px";
   coba2.style.textAlign = "center";
 </script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh kedua

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
 <div class="kotak">
 <h3>Ini adalah contoh penggunaan array objek nama depan</h3>
 </div>
 <p id="objek">
  <script>
   var person ={firstName:"Mochammad", lastName:"Faisal", age:15};
   document.getElementById("objek").innerHTML = person["firstName"];
   objek.style.color = "#000";
   objek.style.fontWeight = "bold";
   objek.style.fontFamily = "arial";
   objek.style.fontSize = "30px"; 
   objek.style.textTransform = "uppercase"; 
   objek.style.marginLeft = "100px";
   objek.style.textAlign = "center";
  </script>
 </p>
 </div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh Ketiga

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah contoh penggunaan array objek nama depan</h3>
</div>
<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>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh Keempat

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah elemen array ke 2</h3>
 </div>
 <p id="coba2">
 <script>
   var siswaXRPL1=["Adi","Adnan","Arvi","Devina","Lukman","Pahmi"];
   document.getElementById("coba2").innerHTML = siswaXRPL1[4];
     coba2.style.color = "#000";
   coba2.style.fontWeight = "bold";
   coba2.style.fontFamily = "arial";
   coba2.style.fontSize = "30px"; 
   coba2.style.textTransform = "uppercase"; 
   coba2.style.marginLeft = "100px";
   coba2.style.textAlign = "center";
  </script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #13 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Jumat, 14 September 2018

#12 Intermediate Web | Web Programming Tutorial

September 14, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Sejarah dan Pengertian Javascript
Perbedaan JS dan Java
Penulisan code di JS
Variabel dan Tipe Data
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Sejarah dan Pengertian Javascript
Penjelasannya...

Sejarah awal mula javascript dimulai pada tahun 1994, pada saat itu perkembangan internet dan website sedang mengalami perkembangan yang sangat pesat, dan pembuatan website pada saat itu umumnya menggunakan bahasa pemrograman PERL. Pemrograman PERL termasuk kedalam bahasa pemrograman Server Side, dimana semua proses hanya bisa dilakukan di web server.

Karena pada saat itu rata-rata koneksi internet yang terbatas, dan setiap instruksi dari user harus dikirim terlebih dahulu kepada web server, kemudian baru ditampilkan lagi ke dalam web browser. Hal tersebut dipandang kurang efesien, karena cukup memakan waktu.

Hingga pada tahun 1995, Seorang programmer Netscape yang bernama Brendan Eich, mulai mengembangkan sebuah bahasa pemrograman script yang bernama Mocha. Pada saat itu Netscape merupakan sebuah perusahaan software yang ternama yang mengembangkan web browser Netscape Navigator.

Bahasa pemrograman Mocha pada saat itu bisa digunakan dalam 2 sisi, yaitu disisi client (Client Side) dan Server (Server Side). Perkembangan selanjutnya nama Mocha dirubah menjadi Livescript dan Liveware, dimana Livescript merupakan bahasa pemrograman untuk Client Side, sedangkan Liverware untuk Server Side. Ketika bahasa pemrograman tersebut akan dirilis bersamaan dengan web browser Netscape Navigator 2. Netscape melakukan sebuah kerjasama dengan Sun Microsystems untuk melakukan kerjasama dalam pengembangan Livescript. Kemudian Netscape merubah nama Livescript menjadi Javascript 1.0.

Lalu apasih JS?

Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.

Perbedaan JS dan Java
Penjelasannya...

Perbdeaan Antara Javascript dan Java

Javascript biasanya dalam penggunaanya digabungkan dengan HTML, tujuannya adalah memperkaya HTML supaya bisa lebih interaktif, oleh karena itu java script sangat tergantung dengan browser yang digunakan. Jika browser tidak mengijikan(disable) untuk menggunakan javascript makan aplikasi yang menggunakan javascript tidak maksimal, bahkan bisa saja error. Java adalah bahasa pemogramam berorientasi object(OOP) dimana aplikasi yang dibuat bisa langsung di eksekusi, tentu saja dengan melakukan compiler terlebih dahulu. Bahasa java mirip dengan .Net nya Microsoft, namun java bersifat terbuka, berbeda dengan .Net yang penggunaanya membutuhkan lisensi.

JavaSript hanya merupakan bahasa scripting, sedangkan Java bahasa pemrograman yang multifungsi dan platform independent. Java bisa digunakan untuk membuat aplikasi desktop dan juga server (SDK dan EE) ada juga untuk pemrograman mobile (ME), sedangkan JavaSript berbasis client side hanya bisa dijalakan dengan browser dan dieksekusi di komputer klien. Selain itu Java juga bisa digunakan untuk membuat aplikasi desktop yang dijalankan di Browser dengan menggunakan Applet, sedangkan JavaScript hanya bisa berjalan bila dikombinasikan dengan HTML.

JavaScript adalah suatu script (text) yg dibaca oleh browser, kemudian diterjemahkan menjadi sekumpulan perintah. Kemudian perintah itu dijalankan di browser. JavaScript (umumnya) disisipkan dlm HTML. Java adalah suatu program yg dihasilkan (dicompile) di server, kemudian dijalankan di browser (kalo dia Java Applet) atau dijalankan di server (kalo dia Java Server Pages). Baru hasilnya ditampilkan di browser. Program Java harus diambil dari server.

Perbedaan utama antara Jaca Script dengan Java adalah cara suatu program dieksekusi. Dengan java sendiri penggunakaannya bisa lebih luas, JME –> untuk pengembangan aplikasi pada handphone, JDK –> pengembangan aplikasi pada desktop dan JEE –> untuk pengembangan aplikasi yang besar (enterprise)

Penulisan Code JS di HTML
Penjelasannya...

Tag <script>

untuk isi dari tag scriptnya sendiri merupakan dibawah ini :

alert("Hello ini penerapan javascript by Angga Ganteng...");

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
</head>
<body>
	<script type="text/javascript">
		alert("Ini merupakan contoh penerapan javascript by Angga Ganteng");
	</script>
</body>
</html>

Hasil Dari Pengerjaan Javascript1

File Eksternal

untuk file JSnya kita inputkan href file yang bernama "index.js" pada tag <script> yang disediakan.

<script type="text/javascript" src="index.js"></script>

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
</head>
<body>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>

Hasil Dari Pengerjaan Javascript2

Attribute Event

Cara yang ketiga ini sering digunakan untuk memanggil fungsi pada event terentu. Misalnya ketika suatu elemen diklik, maka jalankan fungsi Javascript. Contohnya:

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<script type="text/javascript">
		alert("Bu maaf saya baru bisa ngumpulin karena saya sakit 1 minggu...");
	</script>
	<div class="tulisan">
 	<h1 id="id1">Tulisan ini akan berubah warna</h1>
 	</div>
 	<button type="button" class="button1" onclick="document.getElementById('id1').style.color = 'salmon'">Change!!</button>
 	<button type="button" class="button2" ondblclick="document.getElementById('id1').style.color = '#000'">Change It back</button>
</body>
</html>

CSS :

.tulisan
 	{
 		width: 130%;
 		margin-left: -10%;
 	}

 	h1
 	{
 		margin-left: 30px;
 		font-family: arial;
 		text-transform: uppercase;
 	}
 	body
 	{
 		position: absolute;
 		top: 43%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
 	.button1
 	{
 		padding: 10px 40px;
 		cursor: pointer;
 		transition: .5s;
 		border: none;
 		display: flex;
 		text-transform: uppercase;
 		margin-left: 90px;
 		border-radius: 20px;
 		box-shadow: 0 5px 10px rgba(0,0,0,.5);
 	}
 	.button1:hover
 	{
 		background: salmon;
 		color: #fff;
 		box-shadow: none;
 	}
 	.button2
 	{
 		padding: 5px 40px;
 		cursor: pointer;
 		transition: .5s;
 		border: none;
 		position: absolute;
 		top: 85%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-transform: uppercase;
 		margin-left: 140px;
 		border-radius: 20px;
 		box-shadow: 0 5px 10px rgba(0,0,0,.5);
 	}
 	.button2:hover
 	{
 		background: salmon;
 		color: #fff;
 		box-shadow: none; 		
 	}

Hasil Dari Pengerjaan Attribute Event

Variabel dan Tipe Data
Penjelasannya...

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.

Kalian mungkin sudah mempelajari berbagai macam tipe data di bahasa pemrograman lain, seperti C++, java, dan lain sebagainya. Nah, di javascript juga kita menggunakan tipe data - tipe data yang biasa kita gunakan. Sedangkan untuk yang belum mengetahui tentang tipe data. Pengertian dari tipe data itu sendiri adalah suatu memori pada komputer yang digunakan untuk menyimpan. Menyimpan apa? yaitu menyimpan jenis nilai dari suatu variabel.

Contoh Penggunaan dari variabel dan tipe data itu aendiri :

Variabel On javascript 1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angga Gemilang</title>
</head>
<body>
<h1>Javascript Variable</h1>
<p>pada contoh ini x,y, & z adalah variable</p>
<p id="demo"></p>

<script type="text/javascript">
 var x = 5;
 var y = 6;
 var z = x + y;
document.getElementById('demo').innerHTML = z;
</script>

</body>
</html>

Hasil Dari Pengerjaan Variable on javascrip 1

Variable on javascript 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angga Gemilang</title>
</head>
<body>
<h1>Javascript Variable</h1>
<p>pada contoh ini x,y, & z adalah variable</p>
<p id="demo"></p>
<script type="text/javascript">
 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>

Hasil Dari Pengerjaan Javascript2

Variable On Javascript With data Type:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angga Gemilang</title>
</head>
<body>
<h1>Javascript Variable dengan tipe data</h1>
<p>deklarasi string 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;
 document.getElementById('demo').innerHTML = person;
 //document.getElementById('demo').innerHTML = answer;
</script>
</body>
</html>

Hasil Dari Pengerjaan ExtCSSonButton :

Quiz
Penjelasannya...

Nah, pada bab ketujuh alias bab terakhir ini, menjelaskan tentang pembuatan sebuah form yang saya buat sendiri, lumayan modern, colorful dan menarik. form ini dibuat dengan menggunakan tag <fieldset> dan tag <legend> yang digunakan untuk membuat border dengan sedikit tambahan fitur jika dibandingkan dengan border biasa.

untuk file CSSnya kita inputkan href file yang bernama "cssonform2.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="quiz.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div class="separator">	
	<fieldset>
		<legend>Formulir Pendaftaran Calon Peserta</legend>
			<form method="get" class="form1" name="form1">
				<table align="center">
					<tr>
						<td><label>Nama</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="Nama"></td>
					</tr>

					<tr>
						<td><label>No. Induk Penduduk</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="No. Induk Penduduk"></td>
					</tr>

					<tr>
						<td><label>Kelamin</label></td>
						<td><span style="font-size: 20pt;">:    </span><label class="container" class="lbl">Laki - Laki
 								<input type="radio" checked="checked" name="radio">
  								<span class="checkmark"></span>
							</label>
							<label class="container" class="lbl">Perempuan
  								<input type="radio" name="radio">
  								<span class="checkmark"></span>
							</label></td>
					</tr>

					<tr>
						<td><label class="ttl">Tempat Tanggal Lahir</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="ttl" class="Ttl"></td>
					</tr>

					<tr>
						<td><label>Agama</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Agama</option>
								<option>Islam</option>
								<option>Kristen</option>
								<option>Buddha</option>
								<option>Hindu</option>
								<option>Konghucu</option>
							</select></td>
					</tr>

					<tr>
						<td><label>Status</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Status</option>
								<option>Kawin</option>
								<option>Jomblo</option>
							</select></td>
					</tr>
				</table>
				<table align="center"> 
					<tr>
						<td><input type="submit" name="Browse" value="Browse" class="sbmt1"></td>
						<td><input type="submit" name="Submit" value="Submit" class="sbmt2"></td>
					</tr>
				</table>
		</form>
	</fieldset>
</div>
</body>
</html>

CSS :

		body
		{
			background: #33bcdc;
		}
		.separator
		{
			width: 60%;
			height: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid #33bcdc;
		}
		fieldset
		{
			border-top: 3px dashed green;
			border-bottom: 2px dashed blue; 
			border-left: 3px dashed blue;
			background: #fff;
			box-shadow: 0 10px 30px rgba(0,0,0,.8); 
			border-radius: 10px;
			border-right: 2px dashed green;
		}
		legend
		{
			padding: 15px 25px;
			font-weight: bold;
			font-family: arial;
			background: #046f88;
			font-size: 13pt;
			text-transform: uppercase;
			color: #fff;
			border-radius: 10px;
		}
		table{
			width: 100%;
		}
		input[type="text"]
		{
			border: 2px solid green;
			width: 60%;
			padding: 3px 10px;
			border: none;
			border-bottom: 2px solid #ababab;
			height: 25px;
			font-size: 20pt;
			background: #fff;
			transition: .5s;
		}	
		input[type="text"]:focus
		{
			border-bottom: 2px solid #000;
		}
		label
		{
			font-size: 18pt;
			text-transform: uppercase;
		}
		table tr td
		{
			padding: 15px;
		}
		table tr td:first-child
		{			
			padding-left: 15%;
			width: 50%;
		}
		table tr td:last-child
		{
			width: 50%;
		}
		input[type="submit"]
		{
			margin-left: 20%;
			padding: 5px 10px;
			text-align: center;
			align-items: center;
			align-content: center;

		}
		.container {
   			position: relative;
    		        padding-left: 35px;
    		        margin-bottom: 12px;
    		        cursor: pointer;
    		        font-size: 22px;
    		        user-select: none;
		}
		.container input {
    		        position: absolute;
    		        opacity: 0;
    		        cursor: pointer;
		}
		.checkmark {
    		        position: absolute;
	    	        top: 0;
    		        left: 0;
  			height: 25px;
   	 		width: 25px;
    		        background-color: #eee;
    		        border-radius: 50%;
		}
		.container:hover input ~ .checkmark {
    		        background-color: #ccc;
		}
		.container input:checked ~ .checkmark {
    		        background-color: #2196F3;
		}
		.checkmark:after {
    		        content: "";
    		        position: absolute;
    		        display: none;
		}
		.container input:checked ~ .checkmark:after {
    		        display: block;
		}
		.container .checkmark:after {
 			top: 9px;
			left: 9px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: white;
		}
		select
		{
			border: 2px solid #5299d3;
			background: #5299d3;
			cursor: pointer;
			font-size: 12pt;
			color: #fff;
			width: 30%;
			text-transform: uppercase;
			padding: 10px 20px;
		}
		option
		{
			background: #90bee3;
			color: #000;
		}
		input[type="submit"]
		{
			padding: 10px 15px;
			background: #046f88;
			cursor: pointer;
			color: #fff;
			font-weight: bold;
			border-radius: 10px;
			transition: .5s;
			text-transform: uppercase;
			font-size: 13pt;
			margin-top: 3%;
		}
		input.sbmt1
		{
			margin-left: 70%;
		}
		input.sbmt2
		{
			margin-left: 2%;
			margin-top: 14px;
		}
		input[type="submit"]:hover
		{
			background: #5299d3;
			color: #000;
		}

Hasil Dari Pengerjaan Quiz :

"Quiz Part Will Be Updated Soon...!"

Wassalamualaikum wr, wb