Tutorial Javascript Dasar Perintah dan Perulangan

November 04, 2019 Posting Komentar

Assalamualaikum wr.wb

Pada kesempatan kali ini kita akan belajar tentang pembuatan alert, membuat perulangan pada javascript dan membuat perhitungan dengan javascript. bagi teman-teman yang belum tau apa itu javascript silahkan teman-teman kunjungi halaman berikut Tutorial Javascript: Pengertian dan Fungsi Javascript

Disini kita mempunyai kewajiban untuk mengamalkan ilmu karena jika ilmu tidak diamalkan seperti halnya pohon yang tidak berbuah atau dapat dikatakan ilmu itu akan sia-sia

Mengenal Program Javascript

Jika teman-teman sudah pernah belajar bahasa pemrograman seperti C, Pascal atau Visual Basic mungkin tidak akan terlalu sulit untuk mempelajari bahasa pemrograman Java Script ini. Penulisan beberapa perintah dalam JavaScipt adalah case sensitive, jadi penulisan kode harus diperhatikan. Untuk latihan pertama kali buatlah kode JavaScript sederhana dibawah ini.

Pada navigator versi lama yang tidak mendukung JavaScript, penggunaan kode
JavaScript akan merusak dokumen HTML yang sudah dibuat dengan bagusnya.
Agar hal itu tidak terjadi, maka perlu kita tambahkan teg komentar 
agar kode tidak akan dieksekusi sebagai program akan tetapi hanya komentar.

Untuk Contoh program javascritpnya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<script type="text/javascript">
document.write("My First Javascript !<br>");
document.write("Selamat Berjuang")
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_text.html lalu jalankan pada web browser.
Hasil Jadi :

Mendeklarasikan Variabel

Variabel adalah suatu nilai yang isinya dapat berubah-rubah. Pendeklarasian variabel dengan menggunakan kata kunci var. JavaScript dapat mendaklarasikan suatu variabel secara otomatis. Namun, kebiasaan mendeklarasikan suatu variabel akan sangat bermanfaat apabila kita akan melakukan pendefinisian fungsi.

Untuk Contoh program javascritpnya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Pendeklarasian Variabel</title>
</head>
<body>
<script type="text/javascript">
var string = "Javascript";
var bilangan = 101;
var boolean = true;
document.write("<pre>");
document.write("Variabel string berisi :"+string+"<br>");
document.write("Variabel bilangan berisi :"+bilangan+"<br>");
document.write("Variabel boolean berisi :"+boolean);
document.write("</pre>");
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_variabel.html lalu jalankan pada web browser.
Hasil Jadi :

Operator Matematika

Operator merupakan simbol yang memungkinkan kita untuk memanipulasi suatu variabel.
Contoh penggunaan program operator matematika.
JavaScript pastinya memiliki operator-operator untuk dapat mendukung operasi matematika. Setidaknya terdapar tujuh operator matematika pada JavaScript, yaitu:

Addition (+)
Subtraction (-)
Multplication (*)
Division (/)
Remainder (%)
Increment (++)
Decrement (- -)

<!DOCTYPE html>
<html>
<head>
<title>Operator Matematika</title>
</head>
<body>
<script type="text/javascript">
var a = 7;
var b = 2;
var x = 4;
var y = 2;
document.write("<pre>");
document.write("7 + 2 ="+(a+b)+"<br>");
document.write("7 - 2 ="+(a-b)+"<br>");
document.write("7 * 2 ="+(a*b)+"<br>");
document.write("7 / 2 ="+(a/b)+"<br>");
document.write("7 % 2 ="+(a%b)+"<br>");
x++;
document.write("x = 4<br>");
document.write("x++ ="+x+"<br>");
y--;
document.write("y = 2<br>");
document.write("y-- ="+y+"<br>");
document.write("</pre>");
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_math.html lalu jalankan pada web browser.
Hasil Jadi :

Menangani Pemasukan Data

Prompt merupakan jendela yang digunakan untuk mendapatkan informasi dari user.
Untuk contoh programnya silahkan teman-teman coba script dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Pemasukan data dengan Prompt</title>
</head>
<body>
<script type="text/javascript">
var nama=prompt("Masukan nama Anda !"," ");
document.write("Selamat datang"+nama);
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_prompt.html lalu jalankan pada web browser.
Hasil Jadi :

Maka nanti akan tampil Nama anda pada halaman website saat mengisikan kolom dan menekan tombol ok.

Baca Juga

Mengenal Jendela Peringatan

Jendela peringatan (alert) merupakan jendela yang muncul dibagian depan yang
berfungsi untuk menyampaikan pesan
Untuk contoh kedua Silahkan teman-teman coba script dibawah ini

<!DOCTYPE html>
<html>
<head>
<title>Pemasukan data dengan Prompt</title>
</head>
<body>
<script type="text/javascript">
var nama=prompt("Masukan nama Anda !"," ");
document.write("Selamat datang"+nama);
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_prompt.html lalu jalankan pada web browser.

Mengenal Jendela Konfirmasi

Confirm sama halnya dengan alert namun pada confirm terdapat tombol cancel
sedangkan alert tidak.
Untuk contoh programnya silahkan teman-teman coba script dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Jendela Peringatan</title>
</head>
<body>
<script type="text/javascript">
var jawaban = window.confirm("Apakah anda ingin meneruskan ?");
document.write("Jawaban anda :"+ jawaban);
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_confirm.html lalu jalankan pada web browser.
Hasil Jadi :

Pernyataan Kontrol

Untuk Contoh penggunaan if else pada javascript silahkan teman-teman coba script dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Kontrol if</title>
</head>
<body>
<script type="text/javascript">
var ipk = window.prompt("Masukan IPK anda ?","");
if (ipk>2.75){
document.write("Jumlah IPK"+ ipk +" sudah memenuhi syarat kelulusan");
}else{
document.write("Jumlah IPK: "+ipk+"belum memenuhi syarat kelulusan");
}
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_if_else.html lalu jalankan pada web browser.
Hasil Jadi :

Ketika teman-teman memasukan memasukan angka lebih dari 2.75 maka akan menampilkan Jumlah IPK sudah memenuhi persyaratan, namun jika teman-teman mengisi dengan angka yang lebih kecil dari 2.75 maka akan menampilkan Jumlah IPK belum memenuhi persyaratan.

Selain menggunakan if kita juga bisa menggunakan switch untuk melakukan pemilihan,
seperti kode untuk pemilihan berikut.

<!DOCTYPE html>
<html>
<head>
<title>Kontrol Switch</title>
</head>
<body>
<script type="text/javascript">
var a_m = window.prompt("Angka mutu [1-4] Matakuliah Basis Data ?","0");
var h_m = "X";
switch(parseInt(a_m)){
case 0: h_m="E";
break;
case 1: h_m="D";
break;
case 2: h_m="C";
break;
case 3: h_m="B";
break;
case 4: h_m="A";
break;
default:
h_m="Tidak dikenal !"
}
document.write("Angka Mutu "+ a_m +" = Huruf Mutu "+ h_m);
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_swicth.html lalu jalankan pada web browser.
Hasil Jadi :

Maka akan menampilkan huruf sesuai dengan apa yang kita buat pada programnya, teman teman dapat meng customnya sesuai dengan yang teman-teman inginkan.

Selanjutnya kita akan mencoba bagaiman penggunaan while pada javascript, untuk scriptnya silahkan perhatikan pembahasan dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Kontrol While</title>
</head>
<body>
<script type="text/javascript">
var i = 0;
while(i<=5)
{
document.write(i+". Javascript<br>");
i++;
}
</script>
</body>
</html>

Silahkan teman-teman simpan file tersebut dengan nama js_while.html lalu jalankan pada web browser.
Hasil Jadi :

Pada perintah while ini akan menampilkan banyak nya data yang telah kita buat pada programnya jika kita menuliskan angka 100 maka akan menampilkan sebanyak 100 kali.

Selain menggunakan Control while kita juga dapat menggunakan kontrol do while untuk contoh programnya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Kontrol While</title>
</head>
<body>
<script type="text/javascript">
var i = 0;
do{
document.write(i+". Javascript<br>");
i++;
}while(i<=5)
</script>
</body>
</html>

Untuk Tutorial Javascript Dasar Perintah dan Perulangan Kali ini saya cukupkan, silahkan teman-teman ikuti terus totorial selanjutnya.
Semoga bermanfaat. Salam Sukses