#14 Intermediate Web | Web Programming Tutorial ~ Angga Gemilang Blog

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

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:

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

Angga Gemilang Blog

Kamis, 20 September 2018

#14 Intermediate Web | Web Programming Tutorial

Assalamualaikum wr, wb

Contoh 1

HTML :

CSS :

Contoh 2

HTML :

CSS :

Contoh 3

HTML :

CSS :

Contoh 1 :

HTML :

CSS :

Contoh 2 :

HTML :

CSS :

Contoh 1

HTML :

CSS :

Contoh 2

HTML :

CSS :

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

0 komentar:

Posting Komentar

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message

Translate

Translator's Flag

SMK Negeri 4 Bandung

Pesan Dari Admin

About