Tutorial JavaScript Dasar - Praktikum 12

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 :

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.