Javascript : Introduction

Pemrograman Web - X
Apa Itu Javascript?

 Bahasa skrip yang digunakan untuk menciptakan halaman web yang interaktif
 Web dapat merespon event yang terjadi pada halaman
 Javascript sebagai bahasa pemrograman memiliki konstruksi dasar, seperti variable, tipe data, statemen
if/else, switch, perulangan, fungsi, array dsb.
Java Javascript

int bilangan = 10; var bilangan = 10;

double phi = 3.14; var phi = 3.14;

String teks = “Hello World”; var teks = “Hello World”;

bool benar = true; var benar = true;

[tipe_data] [nama_var] = [nilai] var [nama_var] = [nilai]

Deklarasi & Inisialisasi Variabel

Java Javascript

Integer
Number
Double
String
Char
Boolean
String

Boolean

Tipe Data
Java Javascript

1. Diawali huruf abjad, underscore, atau 1. Diawali huruf abjad, underscore, atau

tanda dollar ($) tanda dollar ($)

2. Diikuti abjad, atau angka 2. Diikuti abjad, atau angka

3. Tidak menggunakan keyword 3. Tidak menggunakan keyword

pemrograman pemrograman

4. Case sensitive 4. Case sensitive

5. Tidak menggunakan spasi 5. Tidak menggunakan spasi

Aturan Penamaan Variabel

Java Javascript
1. Operator aritmatika : + , - , * , / , % 1. Operator aritmatika : + , - , * , / , %

2. Operator penggabungan : + 2. Operator penggabungan : +

3. Operator assignment : =, +=, -=, *=, /=, %= 3. Operator assignment : =, +=, -=, *=, /=, %=

4. Operator perbandingan : ==. !=, <, >, <=, >= 4. Operator perbandingan : ==. !=, <, >, <=, >=

5. Operator logika : &&, | |, ! 5. Operator logika : &&, | |, !

6. Operator increment decrement : ++ dan -- 6. Operator increment decrement : ++ dan --

Operator
Java Javascript
int x = 5, y = 6; var x = 5, y = 6;

if( x == y ) if( x == y )
{ {
System.out.println(“Nilainya sama”); document.write(“Nilainya sama”);
} }
else else
{ {
System.out.println(“Nilainya tidak sama”); document.write(“Nilainya tidak sama”);
} }

Struktur Percabangan
Java Javascript
int x; var x;

for (x = 1; x < 11 ; x++) for (x = 1; x < 11 ; x++)

{ {
System.out.println( x ); document.write( x );
} }

Struktur Perulangan
Java Javascript
function tambah (int x, int y) function tambah (int x, int y)
{ {
return (x + y) return (x + y)
} }

Pemanggilan fungsi: Pemanggilan fungsi:

tambah( 10 , 20 ); tambah( 10 , 20 )

Fungsi
Cara Menulis Kode Javascript

 Ditambahkan di dalam dokumen HTML atau di file terpisah (berekstensi .js)

 Di dalam dokumen HTML, sintaks Javascript ditulis di dalam tag <script>

<script>
alert(“Selamat Datang di Website Kami”);
</script>

 Jika di file terpisah, path dari file ditentukan menggunakan atribut src

<script src=“script.js”> </script>

Variabel

 Digunakan untuk menyimpan nilai atau data

 Variabel memiliki nama, nilai, dan tipe
 Variabel dibuat dengan diawali kata kunci var, diikuti nama variabel
 Aturan penamaan variable :
1. Diawali huruf atau underscore ( _ )
2. Case sensitive
3. Tidak menggunakan reserved keywords, seperti if, else, while, dsb.
Lanjutan

 Nilai diberikan kepada suatu variable menggunakan operator ‘ = ‘

 Contoh penerapan variable yang valid

Variabel yang Valid Variabel yang Tidak Valid

var angka = 100; var 4ngka = 10;
var siswa1 = “Budi”; var nama depan = “Susi”;
var angka_ganjil = 7; var if = true;
Tipe Data

 Macam tipe data pada Javascript: number, string, Boolean

 Tipe number adalah tipe untuk nilai berupa angka bulat maupun decimal
Contoh: var x= 1;
var y= 1.5;
 Tipe string adalah tipe untuk nilai berupa barisan karakter yang diapit oleh kutip tunggal atau ganda
Contoh: var a = ‘ belajar Javascript ’;
var b = “ 1 2 3 4 5 “;
 Tipe Boolean adalah tipe untuk nilai logika benar (TRUE) dan salah (FALSE)
contoh: var benar = true;
var salah = false;
Operator

Macam operator pada Javascript:

 Operator penugasan
 Operator aritmatika
 Operator penyambungan
 Operator inkremen dan dekremen
 Operator perbandingan
 Operator logika
Operator penugasan

 Tanda sama dengan ( = )

 Digunakan untuk menugaskan nilai ke suatu variable
 Contoh: var angka = 10;
Operator Aritmatika

 Tanda +, - , * , / , %
 Digunakan untuk melakukan operasi aritmatika pada nilai / variable numerik
 Fungsi masing-masing operator
Operator Fungsi
+ Operasi penjumlahan
- Operasi pengurangan
* Operasi perkalian
/ Operasi pembagian
% Operasi sisa hasil bagi
Operator Penyambungan

 Tanda plus ( + )
 Digunakan untuk menyambungkan nilai / variable bertipe string
 Contoh: var x = “Belajar” + “Javascript”;
Operator Penyambungan

 Tanda plus ( + )
 Digunakan untuk menyambungkan nilai / variable bertipe string
 Contoh: var x = “Belajar” + “Javascript”;
Operator Inkremen dan Dekremen

 Tanda plus ganda ( ++ ) dan minus ganda ( -- )

 Inkremen (++) digunakan untuk menambah nilai variable sebanyak 1
 Dekremen ( -- ) digunakan untuk mengurangi nilai variable sebanyak 1
 Sering digunakan pada operasi pengulangan (looping)
 Contoh:
var x = 1 , y = 4;
x++; //hasilnya 2
y--; //hasilnya 3
Operator Perbandingan

 Digunakan untuk membandingkan dua nilai

 Menghasilkan nilai TRUE dan FALSE
 Macam operator perbandingan: < , > , <= , >= , == , !=
 Lanjutan
Operator Fungsi Contoh

< • Menghasilkan true jika nilai di kiri lebih kecil dari nilai di kanan var x = 3
• Menghasilkan false jika nilai di kiri lebih besar dari nilai di kanan var y = 5
var z = x < y //true
> • Menghasilkan true jika nilai di kiri lebih besar dari nilai di kanan var x = 3
• Menghasilkan false jika nilai di kiri lebih kecil dari nilai di kanan var y = 5
var z = ( x > y ) //false
<= • Menghasilkan true jika nilai di kiri lebih kecil atau sama dengan nilai di var x = 2
kanan var y = 2
• Menghasilkan false jika nilai di kiri lebih besar dari nilai di kanan var z = ( x <= y ) //true
>= • Menghasilkan true jika nilai di kiri lebih besar atau sama dengan nilai di var x = 4
kanan var y = 2
• Menghasilkan false jika nilai di kiri lebih kecil dari nilai di kanan var z = ( x >= y ) //true
== • Menghasilkan true jika nilai di kiri sama dengan nilai di kanan var x = 10
• Menghasilkan false jika nilai di kiri tidak sama dengan nilai di kanan var y = 8
var z = ( x == y ) //false
!= • Menghasilkan true jika nilai di kiri tidak sama dengan nilai di kanan var x = 10
• Menghasilkan false jika nilai di kiri sama dengan nilai di kanan var y = 8
var z = ( x == y ) //true
Operator Logika

 Digunakan untuk menguji dua nilai logika

 Menghasilkan nilai TRUE dan FALSE
 Macam operator perbandingan : && (AND) , || (OR) , ! (NOT)
 Lanjutan
Operator Fungsi Contoh

&& • Menghasilkan true jika kedua nilai adalah true var x = 3, y = 5;

(AND) • Menghasilkan false jika salah satu atau kedua nilai adalah false var z = ( x < y ) && ( x <= y ) //true
• Menghasilkan true jika salah satu atau kedua nilai adalah true var x = 6
||
• Menghasilkan false jika kedua nilai adalah false var y = 7
(OR)
var z = (x == y) || (x != y) //true
• Membalik nilai logika true menjadi false, dan sebaliknya var x = 2
!
var y = 2
(NOT)
var z = !(x <= y) //false
Kotak Dialog

 Salah satu bentuk interaksi web dengan user adalah melalui kotak dialog
 Dengan Javascript, halaman web dapat menampilkan berbagai macam kotak dialog
 Kotak dialog untuk menampilkan pesan / peringatan dibuat menggunakan sintaks alert()
 Kotak dialog untuk meminta input dari user dibuat menggunakan sintaks prompt()
alert()
prompt()