Dasar - Dasar JavaScript (Pertemuan 12)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Sekarang kita akan membahas tentang JavaScript. JavaScript merupakan kumpulan script yang berjalan pada suatu halaman HTML. Ketika menggunakan JavaScript, kita harus memperhatikan besar-kecil huruf tersebut, karena JavaScript hampir mirip dengan bahasa pemrograman Java yang sangat Case Sensitive. Kita mulai saja pembahasan hari ini.

1. Alert
Untuk menggunakan JavaScript didalam file HTML, kita harus menambahkan tag <script language = "javascript">. Apabila kita ingin menampilkan suatu tulisan pada web kita, sebelum kita memasuki web tersebut, sebuah tulisan akan muncul jika kita mengetikan alert ("Text"); didalam tag script. Contohnya seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - Contoh Program Javascript </title>
 </head>
  <body>
   <script language = "javascript">
    alert ("Halo ! ");
   </script>
  </body>
</html>

Hasilnya akan menjadi seperti ini :

2. JavaScript pada Button

Ketika kita ingin mengubah suatu teks menggunakan system on-click, ketika button tersebut di click maka otomatis tulisan tersebut akan berubah tergantung dengan kondisi yang kita masukan. Contohnya seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Ubah Style</title>
  <link rel="stylesheet" type="text/css" href="CSS.css">
 </head>
   <body>
   <h1 id = "id1">
 My Heading 1 </h1>
<button type = "button"
   onclick = "document.getElementById('id1').style.color = 'red' ">
   Click Me! </button>
  </body>
</html>

Warna pertama dari tulisan My Heading 1 ini adalah BlanchedAlmond, setelah kita menekan button Click Me! tersebut maka warna tulisan akan berubah menjadi red. Hasilnya akan menjadi seperti ini :

3. Variables
Kita juga dapat menggunakan operasi hitung matematika dengan menggunakan variable yang telah dideklarasikan sebelumnya, kemudian memasukan nilai tersebut kedalam suatu barisan / paragraf tertentu. Contohnya seperti ini :

<html>
  <head>
   <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Variable on JavaScript </title>
   <link rel="stylesheet" type="text/css" href="CSS.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>

Hasilnya akan menjadi seperti :

Contoh kedua seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Variable on JavaScript 2 </title>
  <link rel="stylesheet" type="text/css" href="CSS.css">
 </head>
  <body>
   <h1>
 JavaScript Variables Contoh 2 </h1>
<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>

Hasilnya akan menjadi seperti ini :

Contoh lainnya seperti ini :

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Variable on JavaScript With Type Data </title>
  <link rel="stylesheet" type="text/css" href="CSS.css">
 </head>
  <body>
   <h1>
 JavaScript Variables 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>

Kita dapat menambahkan comment untuk memberikan penjelasan didalam codingan tersebut. Hasilnya akan menjadi seperti ini :

4.Calculator / Operasi Aritmatika
Kita juga dapat membuat sebuah calculator simple menggunakan JavaScript, disini saya menambahkan beberapa CSS untuk menghias tampilan dari web Calculator tersebut. Kalian dapat melihat hasilnya seperti gambar dibawah ini :

Cukup sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalah dalam pengetikan maupun penjelasan. See you next Guys!.

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Dasar - Dasar JavaScript (Pertemuan 12)

Komentar

Posting Komentar