Java Script

Agustus 28, 2019

Java Script

PRAKTIKUM 12

Nama : M.Fadlul Hafiizh

Kleas : XI-RPL 2

Yoo selamat datang rekan-rekan, kaliini kita mulai masuk kedalam tahap pembelajaran yang paling asyiikk nihh, yaiu materi mengenai java script. Mungkin banyak dari kalian yang sudah tak asing dengan nama "java script". namun apakah kalian sudah mengetahui seperti apa java script itu?

dan apa sebenarnya fungsi dari si java script ini? pengertian secara singkatnya Javascript adalah bahasa yang berbentuk kumpulan script yang berjalan pada suatu dokumen HTML. Jika saya ambil dari informasi di dalam modul pembelajaran yang diberikan oleh guru saya Javascript itu hanya bergantung kepada browser (navigator) yang memanggil dan menampilkan halaman web yang tidak hanya berisi HTML tapi juga dapat berisi skrip-skrip Javascript. Javascript juga tidak memerlukan penerjemah khusus untuk menjalankannya, karena sudah disediakan sendiri oleh browser yang digunakan. Lain halnya dengan bahasa“Java” yang memerlukan penerjemah khusus untuk menjalankannya di sisi user/klien. Baik agar lebih jelas kita mulai langsung ke contoh-contoh penggunaan java script ini

Hallo

<!DOCTYPE html>
<html>
<head>
 <title>Contoh Program Javascript M.Fadlul Hafiizh XI RPL 2</title>
</head>
<body>
 <script type="text/javascript" language="javascript">
  alert("Hallo !");
 </script>
</body>
</html>

Hasilnya :

Jadi hasilnya web ini seperti memberikan suatu notifikasi pop up (alert)

Hallo Alternative.js

<script language="javascript">
alert("Hallo !");
</script>

Ini hanya file alternatif ber-ekstensi .js file ini bisa dianggil kedalam html dengan <script language="javascript" src="tempat file .js berada">

Mengubah Style

<!DOCTYPE html>
<html>
<head>
 <title>Ubah Style M.Fadlul Hafiizh XI-RPL 2</title>
</head>
<body>
 <h1 id="id1">
My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>

</body>
</html>

Hasilnya :

Sebelum button dipencet:

Sesudah button dipencet:

Variable On Java Script

<!DOCTYPE html>
<html>
<head>
 <title>Variable On Javascript M.Fadlul Hafiizh XI RPL 2</title>
</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 :

Variable On Java Script 2

<!DOCTYPE html>
<html>
<head>
 <title>JavaScript Variables Contoh 2 M.Fadlul Hafiizh XI RPL2</title>
</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 :

Variable On Java Script With Type Data

<!DOCTYPE html>
<html>
<head>
 <title>Variable On JS With Type Data M.Fadlul Hafiizh XI RPL 2</title>
</head>
<body>
 <h1>
Javascript Variables denga 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>

Hasilnya :

Quiz

Dalam quiz yang diberikan kaliini saya diperintahkan untuk membuat 1 page yang didalamnya ada beberapa jenis operasi aritmatika dan harus dibuat se-menarik mungkin. jadi inilah hasil pekerjaan saya :

<!DOCTYPE html>
<html>
<head>
    <title>Quiz 12 M.Fadlul Hafiizh XI-RPL 2</title>
    <link rel="stylesheet" type="text/css" href="quiz12.css">
</head>
<body>
    <!-- pertama saya gunakan metode table agar hasilnya lebih beraturan -->
    <table align="center" cellspacing="5" cellpadding="0" border="0">
<tr>
            <th colspan="2">Operasi Aritmatika</th>
        </tr>
<tr>
            <td>Penjumlahan</td>
            <!-- maksud dari id="tambah" itu fungsinya memberi ciri untuk mencetak output nanti -->
            <td id="tambah">
                <script>
                    // var a merupakan variabel yang didalamnya merupakan angka untuk dioperasikan
                    var a = 12;
                    var b = 8;
                    var hasil = a + b;
                    // dan "document.getElementById(....).innerHTML = ...." itu merupakan perintah yang digunakan untuk mencetak output dengan memanggil id dan variabel yang ingin dicetak setelah melalui proses (rumus)
                    document.getElementById("tambah").innerHTML = "12 + 8 = " + hasil;
                </script>
            </td>
        </tr>
<!-- dan sisanya masi sama dengan penjelasan diatas -->
<tr>
            <td>Pengurangan</td>
            <td id="kurang">
                <script>
                    var a = 9;
                    var b = 2;
                    var hasil = a - b;
                    document.getElementById("kurang").innerHTML = "9 - 2 = " + hasil;
                </script>
            </td>
        </tr>
<tr>
            <td>Perkalian</td>
            <td id="kali">
                <script>
                    var a = 9;
                    var b = 4;
                    var hasil = a * b;
                    document.getElementById("kali").innerHTML = "9 x 4 = " + hasil;
                </script>
            </td>
        </tr>
<tr>
            <td>Pembagian</td>
            <td id="bagi">
                <script>
                    var a = 25;
                    var b = 5;
                    var hasil = a / b;
                    document.getElementById("bagi").innerHTML = "100 / 5 = " + hasil;
                </script>
            </td>
        </tr>
<tr>
            <td>Pencarian Selisih</td>
            <td id="selisih">
                <script>
                    var a = 17;
                    var b = 3;
                    var hasil = a % b;
                    document.getElementById("selisih").innerHTML = "17 % 3 = " + hasil;
                </script>
            </td>
        </tr>
</table>
</body>
</html>

CSS-Nya :

table{
    border: 7px inset lightgreen;
    background-color: grey;
    width: 1024px;
}
td, th{
    font-family: terminal;
    border: 3px dotted red;
    background-color: yellow;
}

Maka jadilah seperti ini :

Yahh itulah gambaran besar mengenai contoh dan fungsi java script yang dapat masing-masing kalian simpulkan seperti apakah kira-kira menurut kalian java script ini. semoga postingan kaliini bermanfaat bagi kalian semua....

Cari Blog Ini

Tutor Gesit

Java Script

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel

If, If/Else, Else, Switch/Case On java script