Toturial Javascript: Memahami Dasar Pemrograman Web Klien, pemrograman javascript

Assalamualaikum Semua

      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang java script langsung saja tanpa banyak basa basi lagi yu urang belajar java script

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

    Sejarah JavaScript
-Javascript diperkenalkan pertama kali oleh Brendan  Eich yang bekerja di Netscape pada tahun 1995. 
-Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2.  Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “Javascript” kepada bahasa tersebut pada tanggal 4 desember 1995. 

-Versi terakhir dari bahasa ini adalah versi 1.8.5 yang dirilis tanggal 22 Maret 2011. 

Javascript 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.  Berikut ini satu tabel yang berisi beberapa perbandingan mendasar antara Java dan Javascript. 

 Perbedaan JavaScript dan Java

Penulisan coding javascript

Javascript  adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, 

Penulisan variabel atau fungsi dengan nama TEST  berbeda dengan variabel dengan nama test. 

Setiap instruksi dapat diakhiri dengan karakter titik koma (;). 

Menggunakan tag <SCRIPT> Kode javascript dalam HTML dituliskan dengan menggunakan tag <script> dengan format sebagai berikut : 

Menggunakan file eksternal : Menuliskan kode program  Javascript  dalam suatu file teks dan kemudian file teks yang berisi kode  Javascript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut : 

dimana lokasi/file.js adalah adalah lokasi dan nama file yang berisi kode Javascript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script. 

Melalui event tertentu : Event adalah sebutan dari satu aksi yang dilakukan oleh user, contohnya seperti klik tombol mouse, pembahasan lebih lanjut ada di materi lainnya. 

Kodenya dapat di tulis sebagai berikut :

dimana eventHandler adalah nama dari event tersebut.  

Variable

Variable adalah suatu obyek yang berisi data data, yang mana dapat dimodifikasi selama eksekusi program. Di Javascript terdapat beberapa kriteria untuk penamaan variabel, seperti ditunjukkan berikut ini.

Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter _ (garis bawah).

Nama variabel bisa terdiri dari kombinasi huruf, angka atau karakter _ dan $ (spasi kosong tidak diperbolehkan).

Nama variabel tidak boleh memakai nama-nama yang termasuk ke dalam kata kunci bahasa Javascript.

Berikut ini merupakan daftar kata kunci yang ada di Javascript.

contoh pemberian nama variable

Nama variabel yang benar

- umur

- namaLengkap

- luas_lingkaran

- jari2

- _7an

- $biaya

Tipe data

Di javascript data yang dapat disimpan dalam suatu variabel dikelompokkan menjadi tiga jenis, yaitu :

 Bilangan/numerik, bulat atau desimal, yang kita sebut sebagai integer juga float

Kata/kalimat (kumpulan huruf/karakter) : kita sebut string

Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk memeriksa suatu kondisi :

 true : jika kondisinya benar false : jika kondisinya salah

Beberapa contoh codingan js

contoh 1

codingan html

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <script language="javascript">
            alert("Hallo !");
        </script>
    </body>
</html>

codingan java

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

hasilnya

contoh 2
codingan html

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </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 dan sesudah diklik

contoh 3
codingan html

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <h1>JavaScript Variable</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

contoh 4
codingan html

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <h1>JavaScript Variable 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

contoh 5
codingan html

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </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 = "Jaohn Doe";
        var Answer = 'Yes I an!';

        //document.getElementById("demo").innerHTML = pi;
        document.getElementById("demo").innerHTML = person;
        //document.getElementById("demo").innerHTML = answer;
       
        </script>
    </body>
</html>

hasilnya

tugas
codingan html

<html>
<head>
<title>M.Aslam.S.R</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td colspan="5">
<input type="text" disabled id="output" value="0">
</td>
</tr>
<tr>
<td><button class="btn" onclick="btn('1')">1</button></td>
<td><button class="btn" onclick="btn('2')">2</button></td>
<td><button class="btn" onclick="btn('3')">3</button></td>
<td><button class="btn opr" onclick="btn_opr(1)">*</button></td>
</tr>
<tr>
<td><button class="btn" onclick="btn('4')">4</button></td>
<td><button class="btn" onclick="btn('5')">5</button></td>
<td><button class="btn" onclick="btn('6')">6</button></td>
<td><button class="btn opr" onclick="btn_opr(2)">/</button></td>
</tr>
<tr>
<td><button class="btn" onclick="btn('7')">7</button></td>
<td><button class="btn" onclick="btn('8')">8</button></td>
<td><button class="btn" onclick="btn('9')">9</button></td>
<td><button class="btn opr" onclick="btn_opr(3)">-</button></td>
</tr>
<tr>
<td><button class="btn" onclick="btn('0')">0</button></td>
<td><button class="btn" onclick="koma()">.</button></td>
<td><button class="btn clr" onclick="clr()">C</button></td>
<td><button class="btn opr" onclick="btn_opr(4)">+</button></td>
</tr>
<tr>
<td colspan="5"><button class="btn hsl" style="width: 100%" onclick="hitung()">=</button></td>
</tr>
</table>
<script type="text/javascript" src="kalkulator.js"></script>
</body>
</html>

codingan css

table {
border : none;
border-collapse: collapse;
}
td{
padding: 5px;
border: none;
}
input[type=text]{
padding: 10px;
width: 410px;
border-style: solid;
text-align: right;
font-size: 16px;
}
input[type=text]:disabled{
background-color: white;
}
.btn {
width: 100px;
height: 40px;
background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}
.opr{
background-color: #555555;
}
.clr{
background-color: #f44336;;
}
.hsl{
background-color: #008CBA;
}

codingan js

var bil1;
var bil2;
var hasil;
var opr;
var opr_seleksi = false;
function btn(angka) {
var display = document.getElementById("output").value; //<membuat variable display//
if (display == "0") {//<ketika input text ber-id output tidak terisi atau nilai nol maka akan di ganti dengan angka//
display = angka;
} else {
display += angka;//<ketika input text ber-id output terisi oleh angka atau nilai tidak samadengan nol maka angka di lanjutkan//
}
document.getElementById("output").value = display;//menampilkan output angka yang sudah  di pencet/ pilih//
}

function clr() {//ketika memencet button maka semua var dan value kembali seperti semula atau dibawah ini//
document.getElementById("output").value = "0";
bil1 = 0;
bil2 = 0;
opr_seleksi = false;
}

function koma() {
var display = document.getElementById("output").value;
if (display.includes(".") == false) {//ketika di dalam input text tidak memiliki koma/. maka akan dimasukan koma/. saat dipencet//
display += ".";
}
document.getElementById("output").value = display;
}

function btn_opr(o) {
opr_seleksi = true; //ketika sudah memencet tombol maka opr_seleksi akan menjadi true sehingga dapat masuk ke opsi if dalam function hitung()//
bil1 = parseFloat(document.getElementById("output").value);//dalam input text output di ambil data dan diubah menjadi float dari sana yang menjadi data bil1//
opr = o;
document.getElementById("output").value = "0";//input text output menjadi nol kembali untuk bisa memasukan nilai ke dua//
}

function hitung() {
if (opr_seleksi == true) {
bil2 = parseFloat(document.getElementById("output").value);//mengubah data menjadi float dari input text output untuk nantinya menjadi hasil//
switch(opr){//dalam button terdapat nilai opr yang nantinya akan menjadi acuan untuk memilih case//
case 1 :
hasil = bil1 * bil2;
document.getElementById("output").value = hasil;
break;
case 2 :
hasil = bil1 / bil2;
document.getElementById("output").value = hasil;
break;
case 3 :
hasil = bil1 - bil2;
document.getElementById("output").value = hasil;
break;
case 4 :
hasil = bil1 + bil2;
document.getElementById("output").value = hasil;
break;
}//ketika sudah selesai semua kembali menjadi default nya namun text dalam input text output tidak hilang//
opr_seleksi = false
hasil = 0;
bil1 = 0;
bil2 = 0;
}
}

hasilnya