BAHASA PEMROGRAMAN JAVA SCRIPT

BAHASA PEMROGRAMAN JAVA SCRIPT

Javascript adalah bahasa pemrograman yang digunakan untuk memberikan fungsionalitas dalam suatu dokumen HTML agar dapat memberikan pengalaman lebih bagi pengguna Karena pada masa awal perkembangan web, aplikasi hanya dapat menampilkan data atau informasi tanpa menunjang interaksi lebih dengan penggunanya. Javascript hadir untuk memberikan sebuah solusi web yang dinamik dan responsif terhadap pengguna.

Javascript dapat kita buat dalam dokumen HTML, oleh karena itu setidaknya kalian sudah memahami dasar-dasar html. Bentuk umum dari javascript sebagai berikut:

Setiap perintah yang berada di antara tag <script>… </script> akan dianggap sebagai kode javascript yang akan dieksekusi oleh intrepeter.
belajar javascript pertama-tama buatlah sebuah file dengan nama hello.html melalui aplikasi teks editor yang kalian miliki bisa berupa notepad, notepad++ atau sesuai saran saya menggunakan visual studio code.

<!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>

Kode javascript dapat disisipkan pada setiap bagian dalam dokumen HTML (Embed). karena bagian <body> adalah bagian yang di tampilkan untuk penguna maka sebaiknya kita menempatkan kode javascript di bagian <body>. Namun jika kita ingin menempatkan di bagian <head> kita perlu mengelompokan ke dalam sebuah fungsi, Perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
<script>
function Hello(){
document.write("Hello Wordl")
}
</script>
</head>
<body>
<script>
Hello();
</script>
</body>
</html>

Dapat kita lihat dari contoh di atas kita membuat sebuah fungsi dengan nama Hello() yang berada di dalam tag <head>, lalu kemudian kita panggil dari bagian <body> dengan memanggil fungsi Hello(). Hasil output sama dengan contoh pertama.

Kode Javascript Eksternal
Selain penempatan kode javascript di setiap bagian dokumen HTML, kita juga bisa membuat script eksternal yang nantinya kita tautkan ke dokumen html kita di bagian <head>.
Contoh:
Buat sebuah file dengan nama hello.js file tersebut memiliki ekstensi js yang merupakan ekstension dari javascript. function Hello(){
document.write("Hello Wordl")
}
Kemudian pada file hello.html pada bagian head kita tambahkan sintak javascript eksternal. <!DOCTYPE html>
<html>
<head>
<title>Program Hello World Dengan Javascript</title>
<script src="hello.js"></script>
</head>
<body>
<script>
Hello();
</script>
</body>
</html>
Saat kita menyertakan file js eksternal menggunakan atribut src yang nilainya berisi file js yang akan kita sertakan.
Ketika file hello.html dijalankan di browser maka fungsi Hello() akan di eksekusi yang sumbernya berasal dari file hello.js
Menemukan Kesalahan (Error) Javascript
Saat kita membuat sebuah kode javascript maka kode tersebut akan dijalankan di browser, ketika terdapat kesalahan penulisan kode program maka kebanyakan kasus browser tidak dapat menunjukan letak kesalahan (error) pada program. Oleh sebab itu kita perlu melakukan proses debuging.
Debug adalah proses untuk menemukan kesalahan (error) dari suatu program. untuk menemukan pesan kesalahan kita harus masuk ke mode console yang ada di browser.
Untuk browser Mozzila masuk pada menu pengembangan web – Konsole web atau dengan menekan tombol Ctrl+Shift+K.

Opeartor Aritmatika pada Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Aritmatika</title>
</head>
<body>
<b>
<script>
var a = 25;
var b = 5;
var c = 0;
// pengurangan
c = a - b;
document.write(`${a} - ${b} = ${c}<br/>`);
// Perkalian
c = a * b;
document.write(`${a} * ${b} = ${c}<br/>`);
// pemangkatan
c = a ** b;
document.write(`${a} ** ${b} = ${c}<br/>`);
// Pembagian
c = a / b;
document.write(`${a} / ${b} = ${c}<br/>`);
// Modulo
c = a % b;
document.write(`${a} % ${b} = ${c}<br/>`);
</script>
</b>
</body>
</html>

Hasil outputnya

Opeartor Perbandingan pada Javascript

<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Perbandingan</title>
</head>
<body>
<script>
var a = 20;
var b = 19;
// sama dengan
var hasil = a == b;
document.write(`${a} == ${b} = ${hasil}<br/>`);
// lebih besar
var hasil = a > b;
document.write(`${a} > ${b} = ${hasil}<br/>`);
// lebih besar samadengan
var hasil = a >= b;
document.write(`${a} >= ${b} = ${hasil}<br/>`);
// lebih kecil
var hasil = a < b;
document.write(`${a} < ${b} = ${hasil}<br/>`);
// lebih kecil samadengan
var hasil = a <= b;
document.write(`${a} <= ${b} = ${hasil}<br/>`);
// tidak samadengan
var hasil = a ! = b;
document.write(`${a} != ${b} = ${hasil}<br/>`);
</script>
</body>
</html>

Hasil outputnya

Opeartor Logika pada Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Logika</title>
</head>
<body>
<script>
var a = 20;
var b = 19;
var benar = a > b;
var salah = a < b;
// operator && (and)
var hasil = benar && salah;
document.write(`${benar} && ${salah} = ${hasil}<br/>`);
// operator || (or)
var hasil = benar || salah;
document.write(`${benar} || ${salah} = ${hasil}<br/>`);
// operator ! (not)
var hasil = !benar
document.write(`!${benar} = ${hasil}<br/>`);
</script>
</body>
</html>

Hasil outputnya

Opeartor Ternary / If ..Else pada Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Ternary / If ...Else</title>
</head>
<body>
<script>
var pertanyaan = confirm("Apakah kamu berumur diatas 18 tahun?")
var hasil = pertanyaan ? "Selamat datang" : "Kamu tidak boleh di sini";
document.write(hasil);
</script>
</body>
</html>

Hasil outputnya

Percabangan if

Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if</title>
</head>
<body>
<script>
var totalBelanja = prompt("Total belanja?", 0);
if(totalBelanja > 100000){
document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
document.write("<p>Terimakasih sudah berbelanja di toko kami</p>");
</script>
</body>
</html>
Hasil outputnya

Percabangan if/else
Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan.
Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).

<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var password = prompt("Password:");
if(password == "kopi"){
document.write("<h2>Selamat datang bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");
</script>
</body>
</html>

Hasil outputnya

Aturan Penulisan
Ada beberpa aturan penulisan sintak didalam javascript:
Case Sensitive
Penulisan kode program dalam javascript bersifat case sensitive artinya bahwa penggunaan huruf besar atau huruf kecil di bedakan. Sifat ini berlaku untuk penulisan sintak, fungsi built-in, variabel, tipe data yang semuanya sudah menjadi standar penulisan dalam intrepeter javascript.
Komentar
Suatu program akan sangat baik jika terdapat keterangan dari setiap kode program yang dibuat. Sehinga ketika kita atau orang lain melihat program yang dibuat dapat dengan mudah memahami karena dokumentasi yang baik. Salah satunya dengan penulisan komentar.
Dalam javascript komentar dinyatakan dengan tanda // setalah perintah program atau menggunakan /* … */ jika komentar lebih dari satu baris.
Komentar-komentar ini tidak akan di eksekusi oleh intrepeter saat program di jalankan.
Tipe Data
Javascript memiliki beberapa tipe data dasar yaitu Numerik
String
Boolean
Tanggal
Objek
RegExp
null dan undefined
Numerik
Tipe data numerik di peruntukan untuk data bilangan bulat (integer) maupun pecahan (float).
Contoh bilangan bulat: 5
30
100
Contoh bilangan pecahan: 1.5
0.6
10.9
Tanda titik untuk memisahkan antara bilangan desimal dengan pecahannya.
1. String
Tipe data string di peruntukan untuk nilai berupa sekumpulan karakter (huruf,tanda baca,angka) yang di apit menggunakan kutip atau tanda petik.
Contoh String: "Kelas Programmer"
atau 'Kelas Programmer' Penggunan kedua tanda petik baik single maupun double dianggap legal dalam javascript.

2. Boolean
Tipe boolean hanya memiliki dua nilai yaitu true dan false. Tipe ini biasanya digunakan pada operator logika.

3. Date
Date merupakan tipe data khusus untuk menatakan waktu baik itu tanggal maupun jam. Contoh misalnya 24/04/2024 atau 08:30:00.

4. Objek
Tipe data objek adalah tipe data yang mendefinisikan objek. Kita akan belajar secara khusus untuk tipe ini.

5. RegExp
Tipe data RegExp digunakan untuk mendefinisikan suatu pola atau reguler expression.

6. Null dan Undefined

Tipe data null digunakan untuk mendefinisikan data yang belum terisi (kosong), sedangkan untuk tipe undefined untuk mendefinisikan data yang belum didefinisikan.

7. Variabel
Variabel adalah sebuah wadah atau tempat untuk menampung suatu nilai. Setiap variabel yang digunakan perlu di deklarasikan terlebih dahulu. Bentuk umum deklarasi variabel di javascript seperti berikut: var nama_variabel
Untuk membuat variabel tuliskan kata kunci var sebelum nama variabel.
Aturan Penulisan Variabel Nama variabel bersifat case sensitive artinya huruf besar kecil di bedakan.
nama variabel perlu di awali dengan huruf atau karakter underscore (_).
Penulisan nama variabel tidak boleh menggunakan kata kunci yang ada di dalam javascript misalnya for, while, if, var dan lainnya.
Variabel tidak boleh mengandung tanda baca seperti titik, koma dan lainnya atau tidak bisa juga menggunakan simbol operator seperti +,-,/,% dan lainnya.
Contoh Penulisan Variabel //Penulisan variabel yang benar
var nama
var jurusan
var nilai
var jenis_kelamin
//Penulisan variabel yang salah
var nama+
var 8jurusan
var .nilai
var jenis kelamin
Jenis-jenis variabel
Variabel dapat dibedakan menjadi 2 yaitu:
1. Variabel tunggal
Variabel tunggal adalah variabel yang hanya dapat menyimpan atau menampung satu nilai saja dalam satu tempat. Contoh misalnya kita membuat variabel var nama maka variabel tersebut hanya mampu menipan sebuah nilai nama.

2. Variabel Jamak
Variabel jamak atau bisa di sebut array (larik) adalah variabel yang terdiri dari satu nama, namun dapat menyimpan banyak nilai, setiap nilai disebut elemen array dan memiliki indeks yang dimulai dari 0. Pembahasan detail tentang array akan kita bahas pada postingan lain.

Perintah Keluaran (Output)
Perintah output digunakan untuk memberikan pesan kepada pengguna berupa teks string atau disertai dengan informasi data dari suatu variabel.

Perintah document.write
Perintah document.write digunakan untuk menampilkan data/informasi di halaman website.
Bentuk umum: document.write (variabel)
atau kita bisa kombinasi dengan sebuah string document.write ("teks" + variabel)
Contoh: <!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
nama="MUHAMMAD FAIZ"
usia=17
document.write("Nama : "+nama+"<br>"+"Usia : "+usia)
</script>
</body>
</html>
Hasil output Nama : MUHAMMAD FAIZ
Usia : 17

Pada contoh di atas saya membuat variabel nama dengan nilai MUHAMMAD FAIZ dan usia dengan nilai 17. untuk menampilkan isi dari kedua variabel tersebut kita menggunakan perintah document.write() disertai dengan karakter string sebagai keterangan. Untuk menghubungkan teks string dengan variabel kita gunakan operator +. Dalam penggunaan perintah document.write() output yang dihasilkan berada dalam satu baris, untuk menangani ini kita bisa menyisipkan tag <br> untuk membuat baris baru.
alert
Perintah output berikutnya adalah alert yang mana berfungsi untuk menampilkan data/informasi dalam bentuk pop up.
Contoh: <!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
nama="MUHAMMAD FAIZ"
usia=17
alert("Nama : "+nama+"\n"+"Usia : "+usia)
</script>
</body>
</html>

Penggunaan perintah alert lebih di khususkan untuk memberikan sebuah informasi pemberitahuan ke pengguna.
Perintah Masukan (Input)
Terdapat 2 perintah masukan (input) yaitu menggunakan prompt dan Confirm.
Prompt
Perintah yang digunakan di dalam javascript untuk menerima inputan dari keyboard adalah prompt. Bentuk umumnya seperti berikut: variabel = prompt ("Pesan Masukan")
Contoh: <!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
nama=prompt("Masukan nama :")
document.write(nama)
</script>
</body>
</html>
Ketika program di atas dijalankan di browser maka akan ada jendela dialog yang dapat menerima inputan dari keyboard. Pada contoh di atas saya memasukan nama dengan nilai Setiawan. Nilai ini akan di simpan atau di tampung pada variabel nama kemudian dengan perintah document.write kita menampilkan isi dari variabel nama. Sehingga ketika mengklik tombol Oke maka nilai nama di tampilkan di halaman browser.

Output Program

Confirm
Perintah masukan selanjutnya di dalam javascript adalah confirm. Fungsinya untuk memberikan suatu informasi ke pengguna melalui jendela dialog dengan tombol Ok dan cancel.
Perintah ini akan menghasilkan tipe boolean, jika pengguna mengklik tombol Ok maka akan menghasilkan nilai benar (true) sementara jika memilih cancel maka menghasilkan nilai salah (false).
Bentuk umum: confirm ("Pesan konfirmasi")
Contoh:

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<title>Perintah Dasar javascript</title>
</head>
<body>
<script>
konfirmasi=confirm("Konfirmasi Pesanan")
document.writeln(konfirmasi)
</script>
</body>
</html>

Ketika tombol Oke di klik maka akan menghasilkan nilai true sementara jika memilih batal akan mengahsilkan nilai false.
Perintah confirm biasa digunakan saat pengguna ingin submit form, melakukan tindakan login/logout atau kegiatan lainnya yang memerlukan konfirmasi dari pengguna.

Pelaksanaan Praktikum
Membuat Aplikasi Login

Langkah 1 : Membuat file dengan nama : login.html
<html>
<head>
<title>Login Ke Aplikasi SMK AL FALAH</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<center><font color="black"font face="tahoma"font size="6"><b>
PONDOK PESANTREN MIFTAHUL FALAH AL HASANI</b><br/></font>
<b><font size="4"font face="tahoma">
SEKOLAH MENENGAH KEJURUAN (SMK) AL FALAH KRATON
</b></font>
<br><b>
NSS : 32.2.05.19.06.037 NPSN : 69757359</b><br>
Jl.Pesantren Desa Selotambak Kraton Kabupaten Pasuruan - Jawa Timur <br/>
<br>
</center>
<div id="containerr">
<div id="contentt">
<div id="loginBox">
<p> </p>
<p class="info" align="left"></p>
<p><span class="style1">
<p><span class="style1"><font size="3"font face="arial">Username :
smk_alfalah<br>Password : 123</font></span></p>
<p><span class="style1"><font size="4"font face="arial">Administrator<br>SMK AL
FALAH KRATON</font></span></p>
<form action="index.html" method="get" id="myForm" onsubmit=" return validasi()">
<p></p>
<font size="2"font face="arial">
         
Username : <input type="text" name="username" placeholder="Masukkan
username"><br><br>
         
Password : <input type="password" name="password" placeholder="Masukkan
password"><br> <br>
  
<input class="login" type="submit" name="submit" value="Login">
  
<input type="reset" value="Reset">
</font>
<br><br><br>
<center>
<font color="black"font size="2"font face="arial">
Copyright © Designed By : smkalfalahkraton.sch.id
</font>
</center>
</form>
<div class="close" />
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function validasi(){
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
if( username == "smk_alfalah" && password == "123"){
return true;
}
else if(username =="" || password ==""){
alert("Masukan username dan password Anda");
return false;
}
else{
alert("Username atau password yang Anda masukan SALAH");
return false;
}
}
</script>
</center>
</body>
</html>

Simpan dengan nama : login.html

Gambar Halaman form login

Langkah 2 : Membuat file dengan nama : index.html
<html>
<head>
<title>SMK AL FALAH BISA</title>
</head>
<body bgcolor="blue">
</font>
<br><br><br><br>
<center>
<font color="yellow"font size="5"font face="arial"><b>
SELAMAT ANDA BERHASIL LOGIN KE APLIKASI SMK AL FALAH KRATON
</b>
</font>
<br><br><br>
<font color="white"font size="2"font face="arial">
Copyright © Designed By : smkalfalahkraton.sch.id
</font>
</center>
</body>
</html>

Simpan dengan nama : index.html
Maka selanjutnya kita jalankan program login maka akan menuju ke halaman Aplikasi index.html

DEMO PROGRAM : APLIKASI LOGIN

Gambar Halaman Index

MEMBUAT APLIKASI KALKULATOR JAVA SCRIPT
Buat File HTML Ketik script di bawah ini beri nama “kalkulator.html”
<html>
<head>
<title>SMK AL FALAH KRATON</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="black">
<br><br><br>
<center><font color="white"font size="5"font face="arial">KALKULATOR <br>SMK AL FALAH KRATON
</font>
<br><br>
<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>
</center>
</body>
</html>
Buat file operator function ketik script di bawah ini beri nama “kalkulator.js”
var bil1;
var bil2;
var hasil;
var opr;
var opr_seleksi = false;
function btn(angka) {
var display = document.getElementById("output").value;
if (display == "0") {
display = angka;
} else {
display += angka;
}
document.getElementById("output").value = display;
}
function clr() {
document.getElementById("output").value = "0";
bil1 = 0;
bil2 = 0;
opr_seleksi = false;
}
function koma() {
var display = document.getElementById("output").value;
if (display.includes(".") == false) {
display += ".";
}
document.getElementById("output").value = display;
}
function btn_opr(o) {
opr_seleksi = true;
bil1 = parseFloat(document.getElementById("output").value);
opr = o;
document.getElementById("output").value = "0";
}
function hitung() {
if (opr_seleksi == true) {
bil2 = parseFloat(document.getElementById("output").value);
switch(opr){
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;
}
opr_seleksi = false
hasil = 0;
bil1 = 0;
bil2 = 0;
}
}

Buat file css ketik script di bawah ini beri nama “style.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;
}

Gambar Halaman Kalkulator

DEMO PROGRAM : APLIKASI KALKULATOR

Perulangan di dalam pemrograman sangat berguna. misalnya jika kita ingin menampilkan string secara berulang-ulang.
Script Perulangan For
<html>
<body bgcolor="#0066FF">
<head>
<title>Perulangan For</title>
</head>
<center>
<font size="4"color="white"face="arial">
<script>
for(let i = 0; i < 10; i++){
document.write("<p>Perulangan ke - " + i + "</p>")
}
</script>
</font>
</center>
</body>
</html>
Hasil output Program

Script Perulangan_foreach
<html>
<body bgcolor="#0066FF">
<head>
<title>Perulangan Foreach</title>
</head>
<center>
<font size="4"color="white"face="arial">
<script>
// kita punya array seperti berikut
var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari
// dengan menggunakan method foreach
days.forEach(function(day){
document.write("<p>" + day + "</p>");
});
</script>
</font>
</center>
</body>
</html>
Hasil output Program

Script Aplikasi Gaji Guru
<HTML>
<HEAD>
<TITLE> GAJI GURU SMK AL FALAH</TITLE>
</HEAD>
<BODY bgcolor="">
<center><font color="black"font face="tahoma"font size="5"><b>
PONDOK PESANTREN MIFTAHUL FALAH AL HASANI</b><br/></font>
<b><font size="4"font face="tahoma">
SEKOLAH MENENGAH KEJURUAN (SMK) AL FALAH KRATON
</b></font>
<br><b>
NSS : 32.2.05.19.06.037 NPSN : 69757359</b><br>
Jl.Pesantren Desa Selotambak Kraton Kabupaten Pasuruan - Jawa Timur <br/>
<img src="../ALFALAH-KRATON/foto/logotanpabg.png"width="70"height="70" class="img-fluid" alt="">
</center>
<font face="tahoma">
<SCRIPT LANGUAGE="JavaScript">
function hgapok(gol,masa_kerja)
{
return gp[masa_kerja][gol];
}
function htj(st,ja)
{
var tjk,tja;
if (st==3 ||st==1)tjk=0.1*gapok;
if (ja<=3)
tja=0.05*ja*gapok;
else
tja=0.05*3*gapok;
return tja+tjk;
}
function hgt(gp,tj)
{
return gp+tj;
}
function cetak(gp,tj,gt)
{
document.frm.gaji_pokok.value=gp;
document.frm.tunjangan.value=tj;
document.frm.gaji_total.value=gt;
}
function cek(form)
{
var sts,k,g,janak;
with (frm)
{
g=gol.value;
k=eval(mk.value-1);
janak=ja.value;
sts=st.value;
gapok=hgapok(g,k);
tj=htj(sts,janak);
gatot=hgt(gapok,tj);
cetak(gapok,tj,gatot);
return false;
}
}
var tj,gapok,gatot;
var gp=new Array();
gp[0]=new Array(3000000,3250000,3500000);
gp[1]=new Array(3500000,3750000,4000000);
gp[2]=new Array(4000000,4250000,4500000);
gp[3]=new Array(4500000,4750000,5000000);
</SCRIPT>`
<table align="center" border cellpadding="5" cellspacing="2"
RULES="GROUPS" >
<br><br><br>
<form name="frm">
<tr>
<td align="center" colspan="3"style="background-color: #F5F5F5;"><b>APLIKASI GAJI GURU SMK AL FALAH KRATON</b></td>
<COLGROUP SPAN=3>
</tr>
<tr>
<td width="200">    Nama Guru </td>
<td width="200">
<SELECT NAME="st">
<option>Pilih Nama Guru</option>
<OPTION VALUE="1">Bukhori Spd.I.MPd</OPTION>
<OPTION VALUE="1">M.Munir,S.Kom</OPTION>
<OPTION VALUE="1">M.Taufik, S.Kom</OPTION>
<OPTION VALUE="1">Novian Setiaji S.Pd</OPTION>
<OPTION VALUE="1">LINDA KUSUMA WARDANI S.Pd</OPTION>
<OPTION VALUE="1">FITRIYAH S.Pd</OPTION>
</SELECT>
<td>
</tr>
<tr>
<td>    Jabatan </td>
<td>
<SELECT NAME="gol">
<option>Pilih Jabatan</option>
<OPTION value="0">Tata Usaha</OPTION>
<OPTION value="1">Guru Mapel</OPTION>
<OPTION value="2">Kepala Sekolah</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td>    Masa Kerja</td>
<td>
<SELECT NAME="mk">
<option>Masa Kerja</option>
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
</SELECT>
</td>
</tr>
<tr>
<td><label for="ja">    Jumlah Anak</label></td>
<td><input type="text"value="2" name="ja"size="2" disabled>
</td>
</tr>
<COLGROUP SPAN>
<tr>
<td align="" colspan="4">
         
         
         
         
         
  
<input type="button" name="Proses"value="Hitung"onClick='cek(this)'>
<input type="Reset" value="Batal"></td>
</tr>
<COLGROUP SPAN>
<tr>
<td>    Gaji Pokok</td>
<td>Rp <input type="text" name="gaji_pokok" size="12"readonly></td>
</tr>
<tr>
<td>    Tunjangan Keluarga</td>
<td>Rp <input type="text" name="tunjangan" size="10"readonly></td>
</tr>
<tr>
<td>    Gaji Total</td>
<td>Rp <input type="text" name="gaji_total" size="15"readonly></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</font>
</BODY>
</HTML>

Simpan dengan nama : aplikasi_gaji.html

Output program

Selanjutnya kita jalankan pilih

Nama Guru : Bukhori Spd.I.MPd

Jabatan : Kepala Sekolah

Masa Kerja : 4 Tahun

Jumlah Anak otomatis : 2 Maksimal

kemudian tekan tombol Hitung maka hasilnya seperti gambar di bawah ini.

Kita coba sekali lagi inputkan

Nama Guru : M.Taufik, S.Kom

Jabatan : Guru Mapel

Masa Kerja : 3 Tahun

Jumlah Anak otomatis : 2 Maksimal

kemudian tekan tombol Hitung maka hasilnya seperti gambar di bawah ini

DEMO PROGRAM : APLIKASI GAJI GURU

Script Aplikasi Menampilkan Status Guru
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar JavaScript di SMK AL FALAH KRATON</title>
<script>
function tampilkan(){
var nama_guru=document.getElementById("form1").select1.value;
var p_kontainer=document.getElementById("container");
if (nama_guru=="bukhori")
{
p_kontainer.innerHTML="Bukhori, Spd.I.Mpd<br>Kepala Sekolah SMK AL FALAH
KRATON";
}
else if (nama_guru=="taufik")
{
p_kontainer.innerHTML="M.Taufik, S.Kom <br>Guru Produktif";
}
else if (nama_guru=="munir")
{
p_kontainer.innerHTML="M.Munir, S.Kom <br>Guru Produktif";
}
else if (nama_guru=="rudi")
{
p_kontainer.innerHTML="Rudi Mahardianto S.Kom <br>Guru Produktif";
}
else if (nama_guru=="andri")
{
p_kontainer.innerHTML="Andri Febryanto, S.Pd <br>Guru Matematika";
}
else if (nama_guru=="linda")
{
p_kontainer.innerHTML="Linda Kusuma WS, S.Pd<br>Guru Bahasa Inggris";
}
}
</script>
</head>
<body>
<h2>DAFTAR GURU DI SMK AL FALAH KRATON</h2>
<form id="form1" name="form1" onsubmit="return false">
<label for="select1">Pilih Nama Guru: </label><br><br>
<select id="select1" name="select1">
<option value="">Pilih Nama Guru</option>
<option value="bukhori">Bukhori, Spd.I.Mpd</option>
<option value="taufik">M.Taufik, S.Kom</option>
<option value="munir">M.Munir, S.Kom</option>
<option value="rudi">Rudi Mahardianto, S.Kom</option>
<option value="andri">Andri Febryanto, S.Pd</option>
<option value="linda">Linda Kusuma WS, S.Pd</option>
</select>
<br><br>
         
     
<input type="submit" value="Tampilkan" onclick="tampilkan()">
</form>
<p id="container"></p>

</body>

</html>
Output Program

Selanjutnya Pilih Nama Guru

Selanjutnya tekan tombol Tampilkan

DEMO PROGRAM : MENAMPILKAN BIODATA GURU

Script Aplikasi Menampilkan Data Siswa
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SISWA SMK AL FALAH KRATON</title>
</head>
<body>
<center><font color="black"font face="tahoma"font size="5"><b>
PONDOK PESANTREN MIFTAHUL FALAH AL HASANI</b><br/></font>
<b><font size="4"font face="tahoma">
SEKOLAH MENENGAH KEJURUAN (SMK) AL FALAH KRATON
</b></font>
<br><b>
NSS : 32.2.05.19.06.037 NPSN : 69757359</b><br>
Jl.Pesantren Desa Selotambak Kraton Kabupaten Pasuruan - Jawa Timur <br/>
<img src="../ALFALAH-KRATON/foto/logotanpabg.png"width="70"height="70" class="img-fluid" alt="">
</center>
<script>

function tampilkan(){
var nama_siswa=document.getElementById("form1").select1.value;
var p_kontainer=document.getElementById("container");
if (nama_siswa=="tkj_a")
{
p_kontainer.innerHTML="         1. ABDUL KHAMID FAQEHUDDIN<br>         2. ABDUL KARIM<br>         3. AHMAD IBROHIM<br>         4. AHMAD SYAHRUL<br>         5. AINUN NADIF <br>         6. AKHMAD GUNTUR SYAIFULLOH<br>         7. AKHMAD RIFA'I <br>         8. BAGUS NU'MAN ZUHDI<br>          9. FIRMAN ADI PRASETYO<br>         10. HOIRUL<br>         11. IDROTUL FATKHA<br>         12. M. BAGUS TRIYONO<br>         13. M. FAIZIN<br>         14. M. HASANI<br>         15. M. IKSAN<br>         16. M. NAZRUL ALIFIANSYAH<br>         17. AHFUD RIZAL<br>         18. MAULANA RIZKY<br>         19. MISBAHUS SURUR<br>         20. MOCH. SAIFUL RIZAL<br>         21. MOCH. YAZID AL BUSTOMI<br>         22. MOCH. YUDI<br>         23. MOCHAMMAD LABIK MAULANA<br>         24. MUCHAMMAD TORIQ MUHIBBIN<br>         25. MUHAIMIN <br>         26. MUHAMMAD FAJRI RAIFAN RAHMAN<br>         27. MUHAMMAD ILZAM FEBRIANSYAH<br>         28. MUHAMMAD NAZRIEL RIZKY FIRANSYAH <br>         29. MUHAMMAD SOBIRIN<br>         30. NOR KHOLIS<br>         31. NUR FAIS ZAINUDIN<br>         32. NUR HIDAYATULLOH<br>         33. RIYADUL AMIN<br>         34. RIYAN HIDAYAT<br>         35. RODIF AL IHSAN HERMANTO<br>         36. SAFRON<br>         37. SAMSUL ARIPIN<br>         38. TOBIBUL UMAM";
}
else if (nama_siswa=="tkj_b")
{
p_kontainer.innerHTML="         1. AFIYAH <br>         2. AVILA HARNA SARI<br>         3. AYU INDAH SARI <br>         4. DELVIA AVEGA<br>         5. EVI AMELIA<br>         6. FATIMATUZ ZAHRO<br>         7. FATIMATUZ ZAHROH<br>         8. HIKMATUL ILMIYAH<br>         9. IKRIMAH<br>         10. INDAH MARSELA<br>         11. LAILA AFIYAH<br>         12. LIA<br>         13. MAJADIAH<br>         14. MARIATUL QIBTIYA<br>         15. MUNI HATUS SA'DIYAH<br>          16. NADIFATUT TOYYIBA<br>         17. NAILATUS SAADAH<br>         18. NAZIRA PUTRI AMELIA<br>         19. NIA SILVIATUR RAMADHANI<br>         20. PUTRI AMELIA<br>         21. RUHANIYAH<br>         22. SEKAR MELATI<br>         23. SITI MABRURO<br>         24. SITI SUCI LESTARI<br>         25. SOLIHATUL ILMIYAH<br>         26. SUKRIATUN NISAK<br>         27. UMI KULSUM<br>         28. VITA ANNUR MUKMALA<br>         29. ZAKIYYATUL FAKHIROH<br>         30. SABILATUL JANNAH<br>         31. INTAN NUR AINI<br>         32. NABILA ROSDIANA DEWI";
}
else if (nama_siswa=="tbsm")
{
p_kontainer.innerHTML="         1. ABDUL QODIR<br>         2. ABDUR ROHIM<br>         3. ACH. KHOIRUL UMAM<br>         4. ADI FIRMANSAH<br>         5. AGUSTIN<br>         6. AHMAD DHANI<br>         7. AHMAD TUFFAH<br>         8. AIDIL FITRI<br>         9. AKBAR ALFARIZI<br>         10. BUDIUR ROHMAN<br>         11. DEVIT JANUARY HIN DJUNAIDI<br>         12. EBIT IBADIR ROHMAN<br>         13. EKA BARON<br>         14. FAIZUR ROHMAN<br>         15. FARIQUL ANWAR<br>         16. FATHUR RIZAL<br>         17. M. AZAR RADITTIA<br>         18. M. AZIZ          19. M. MUSTOFA<br>         20. M. RODITUL JALALUDIN<br>         21. M. SAIFULLOH<br>         22. MOCH. SOFYAN HADI<br>         23. MOH. MISBAHUL MUNIR<br>         24. MUHAMAD FAJAR AL MUBAROK<br>         25. MUHAMMAD RODI<br>         26. RAHMAT SAIBATUL IMAN<br>         26. RIZKY MUBAROK<br>         27. SABIQUL MUTTAQIN<br>         28. SYAHRUL ROMADHON<br>         29. YUSUF ALIMUDDINf";

}
}
</script>
</head>
<body>
<h2><b>       DAFTAR SISWA SMK AL FALAH KRATON<br>                  TAHUN PELAJARAN 2023/2024</b></h2>
<form id="form1" name="form1" onsubmit="return false">
<label for="select1"></label><br>
         <select id="select1" name="select1">
<option value="">Pilih Nama Jurusan </option>
<option value="tkj_a">Kelas X/TKJ.A</option>
<option value="tkj_b">Kelas X/TKJ.B</option>
<option value="tbsm">Kelas X/TBSM</option>
</select>
  
<input type="submit" value="TAMPILKAN" onclick="tampilkan()">
</form>
<p id="container"></p>
</body>
</html>

Simpan dengan nama : menampilkan_data_siswa.html

DEMO PROGRAM : MENAMPILKAN DATA SISWA

SMK AL FALAH KRATON

MODUL INFORMATIKA

BAHASA PEMROGRAMAN JAVA SCRIPT

0 Komentar

LATIHAN ASESMEN INFORMATIKA

MODUL INFORMATIKA Kelas X

SMK AL FALAH KRATON

MODUL INFORMATIKA

BAHASA PEMROGRAMAN JAVA SCRIPT

Anda mungkin menyukai postingan ini

0 Komentar

LATIHAN ASESMEN INFORMATIKA

MODUL INFORMATIKA Kelas X