PEMROGRAMAN BERBASIS WEB

PENGENALAN JAVASCRIPT

M. ADNAN NUR, S.KOM., MT.

PENGENALAN JAVASCRIPT
▪ Javascript merupakan bahasa script yang umumnya dijalankan pada
browser (client side scripting) dan memberikan fitur tambahan pada
halaman web dalam menangani event dari setiap object (window,
document, form, button, input dan object lainnya)
▪ Pada pemrograman web, Javascript bergantung pada browser dan tidak
memerlukan kompilator atau interpreter khusus untuk menjalankannya
(interpreter javascript sudah ada dalam browser)
▪ Perintah javascript bersifat case sensitif dan dapat dituliskan pada editor
biasa (notepad, sublime text dll)
▪ Perintah javascript dapat digabungkan dengan perintah HTML (*.html)
atau berdiri sendiri (*.js)
PENGENALAN JAVASCRIPT
▪ Javascript melihat elemen halaman web pada browser (navigator) sebagai
sebuah object dimana :
o Object diklasifikasikan secara hirarki
o Dapat diasosiasikan dengan event atau property

▪ Posisi root dari object browser adalah window namun dapat tidak
dituliskan

▪ Dalam object window, ada satu object yang ditampilkan dalam bentuk
sebuah halaman yang disebut dengan document
AKSES ELEMENT
▪ Akses Element melalui attribute ID
document.getElementById(‘ID’)
▪ Akses Element melalui attribute NAME
document.getElementsByName(‘NAME’)[urutan/index]
▪ Akses Element melalui attribute Tag NAME
document.getElementsByName(‘Tag NAME’)[urutan/index]
▪ Akses Element melalui attribute Class
document.getElementsByClassName(‘NAME’)[urutan/index]
▪ Akses Element melalui Query Selector
document.querySelectorAll(‘SELECTOR’)[urutan/index]
▪ Akses Element melalui HTML Object
document.forms[index].elements[index]
PENULISAN JAVASCRIPT
▪ Perintah Javascript ditempatkan pada file HTML dengan menggunakan tag
<script>…</script> atau
<script type=‘text/javascript’>…</script>

Praktikum :

Hasil :
fungsi document.write(“”); digunakan
untuk menampilkan text pada halaman web
PENULISAN JAVASCRIPT
▪ Perintah Javascript ditempatkan pada file terpisah dan memanggilnya
menggunakan tag <script src=“lokasi file js”>…</script> atau
<script src=“lokasi file js” type=‘text/javascript’>…</script>

Praktikum :
Nama File ‘script.js’

File HTML

Hasil :
fungsi document.getElementById(“”); digunakan
untuk mendapatkan elemen web berdasarkan attribut IDnya
(id=“kampus”) dan selanjutnya mengisi attribut value dari
elemen tersebut dengan teks “STMIK Handayani Makassar”
PENULISAN JAVASCRIPT
▪ Perintah Javascript ditempatkan pada event elemen HTML

Praktikum :

Perintah javascript dimasukkan pada

event onclick button

Hasil :
fungsi document.getElementsByName(“”);
digunakan untuk mendapatkan elemen web
berdasarkan attribut Namenya (name=“kampus”).
Berbeda dengan getElementById yang mana attribut
ID benilai unik, untuk getElementsByName harus
mengikutkan index dari elemen karena nilai attribut
name dapat dimiliki oleh lebih dari satu elemen.
Pada contoh ini, terdapat 3 tag Input dengan
name=“kampus”, untuk mendapatkan elementnya
maka di tambahkan index [0], [1] dan [2] sesuai
urutannya dalam HTML
VARIABLE DALAM JAVASCRIPT
▪ Eksplisit, pendeklarasian variabel menggunakan keyword var atau let.
Perbedaan var dan let terletak pada scopenya, var berlaku secara global. Jadi
sebaiknya menggunakan let.
Contoh :
var jur=“Teknik Informatika”;
let kodeJur = “TI”;
• Implisit, Pendeklarasian variabel tidak harus dilakukan. Untuk contoh di atas
dapat langsung dituliskan
jur = “Teknik Informatika”;
kodeJur = “TI”;

Namun, deklarasi secara implisit akan error ketika mode ketat diaktifkan
menggunakan ‘use strict’
use strict memerintahkan javascript untuk menterjemahkan kode dalam
keadaan ketat sehingga semua variable yang digunakan harus dideklarasikan
secara eksplisit
Praktikum :
Menggunakan var

Menggunakan let

Fungsi alert(); digunakan untuk menampilkan dialog pesan.

Terdapat perbedaan hasil dari penggunaan var dan let pada contoh diatas. Untuk var, pesan yang muncul
STMIK, Handayani, Handayani sedangkan let menampilkan pesan STMIK, Handayani, STMIK. Hal ini
dikarenakan variable yang dideklarasikan menggunakan let dalam scope if {} dianggap berbeda dengan
variable yang dideklarasikan diluar if {}.
KONSTANTA DALAM JAVASCRIPT
▪ Pendeklarasian Konstanta menggunakan keyword conts
Contoh :
const pi = 3.14;

KOMENTAR DALAM JAVASCRIPT

▪ Sama seperti bahasa pemrograman lainnya, javascript juga menyediakan fasilitas
untuk menuliskan komentar menggunakan // untuk satu baris atau /* .. */
untuk lebih dari satu baris
Contoh :
// Contoh Komentar
atau
/* contoh
komentar */
TIPE DATA DALAM JAVASCRIPT
Javascript tidak mempunyai type data secara eksplisit atau tidak ada
pendelakrasian type data secara langsung.
Tetapi secara implisit javascript mempunyai 4 tipe data primitive antara lain :
▪ Numerik, Contoh:
let a = 2323; //bilangan bulat
let x = 234.6; //bilangan pecahan
▪ String, Contoh:
let x = “belajar”;
let y = “javascript”;
▪ Boolean, bernilai true atau false, Contoh :
let x = (y>90);
▪ Null, variabel yang tidak diinisialisasi, Contoh:
let x; // x bernilai null
OPERATOR DALAM JAVASCRIPT
▪ Aritmetika, Ada 2 macam operator aritmetika dalam javascript yaitu operator
tunggal dan operator biner.

Operator Tunggal / Biner Keterangan

+ Biner Penjumlahan

- Biner Pengurangan

* Biner Perkalian

/ Biner Pembagian

% Biner Modulus

- Tunggal Negasi

++ Tunggal Penambahan Dengan Satu

-- Tunggal Pengurangan Dengan Satu

▪ Operator Pemberian Nilai, digunakan untuk memberi nilai ke suatu
operan/variable atau mengubah nilai suatu operan/variable

Operator Keterangan Contoh Ekuivalen

= Sama dengan a = b

+= Ditambah dengan a += b a = a + b

-= Dikurangi dengan a -= b a = a – b

*= Dikalikan dengan a *= b a = a * b

/= Dibagikan dengan a /= b a = a / b

%= Modulus dengan a %= b a = a % b

&= Bit AND dengan a &= b a = a & b

|= Bit OR dengan a |= b a = a | b
▪ Operator Pembanding, digunakan untuk membandingkan dua buah
operan/nilai/variable. Operan yang diberikan operator ini dapat bertipe string,
numerik, maupun ekspresi lain.

Operator Keterangan

== Sama dengan

!= Tidak Sama Dengan

> Lebih Besar

< Lebih Kecil

>= Lebih Besar Atau Sama Dengan

<= Lebih Kecil Atau Sama Dengan

▪ Operator Logika, Operator ini digunakaan untuk mengoperasikan
operan/nilai/variable yang bertipe boolean.

Operator Keterangan

&& Operator Logika AND

|| Operator Logika OR

! Operator Logika NOT

▪ Operator String, Selain operator pembanding, operan/nilai/variable bertipe string
pada JavaScript juga mengenal satu operator lagi yang dinamakan penggabungan.
Operator ini digunakan untuk menggabungkan beberapa string menjadi sebuah
string yang lebih panjang menggunakan simbol +
contoh:
let hasil = “STMIK” + “ ” + “Handayani”;
Konversi Tipe Data
▪ parseInt(), digunakan untuk mengubah variabel menjadi bilangan bulat.
perintahnya :
let var_int = parseInt(var_string);
contoh :
let x = parseInt(“20”); // x bertipe data bilangan bulat

▪ parseFloat(), digunakan untuk mengubah variabel menjadi bilangan pecahan.

Perintahnya :
var var_float = parseFloat(var_string);
contoh :
var x = parseFloat(“20.75”); // x bertipe data bilangan pecahan
Praktikum :

Hasil :

Nilai yang diperoleh dari document.getElementById(‘jari’).value bertipe String sehingga untuk

melakukan operasi aritmetika harus dilakukan konversi ke numerik terlebih dahulu menggunakan parseInt.
Property innerHTML digunakan untuk memasukkan teks atau perintah HTML ke dalam elemen web
LANJUT KE MATERI BERIKUTNYA