Pemrograman Web II

Company
LOGO

JavaScript

Dian Pratiwi,ST MTI

 Company Pengenalan
LOGO

• Apa yang dimaksud dengan Javascript?

• Merupakan sebuah script yang dijalankan
di halaman web (internet)
Chapter 7
• Dikembangkan sejak tahun 1996 oleh
ECMA Organization dengan sebutan
“ECMAScript”, yang kemudian dirubah
menjadi “Javascript” setelah
distandarisasikan pada tahun 1997
• Bagian dari HTML
• Didesain untuk menambah interakftifitas &
logika pada sebuah web HTML
• Dapat dijalankan hampir di semua browser
• Apa kegunaan Javascript?
www.company.com
 Company Kegunaan JavaScript
LOGO

1. Menyediakan para programmer web

sebuah tools programming dengan
sintaks yang sederhana
Chapter 7 2. Untuk merepresentasikan sebuah event
yang dilakukan user dari web client
(HTML)
3. Mampu membaca, menulis, mengubah
element-element HTML
4. Dapat digunakan untuk memvalidasi
suatu data sebelum dikirim ke server
5. Dapat digunakan untuk mendeteksi
browser visitor
6.
www.company.com Dapat digunakan untuk membuat
cookies
 Company Bentuk Penulisan JavaScript
LOGO

1) Inside HTML
Merupakan bentuk penulisan javascript
dimana script berada di dalam satu halaman
dengan web client
Chapter 7

www.company.com
 Company Bentuk Penulisan JavaScript
LOGO

2) Outside HTML
• Merupakan bentuk penulisan javascript
dimana script ditulis dalam bentuk file
terpisah dari halaman web client.
Chapter 7
• File javascript tersebut disimpan dalam
bentuk *.js yang kemudian dipanggil di
web client

www.company.com
 Company Aturan Penulisan JavaScript
LOGO

• Script ditulis menggunakan blok awal “{“ dan

blok akhir “}”
• Tipe data yang berbeda dapat dikonversi secara
otomatis
Chapter 7
• Case Sensitive
• Setiap statement dalam blok diakhiri dengan
tanda “;”
• Jika script dalam satu baris terlalu panjang
dapat disambung ke baris berikutnya dengan
karakter “\”
• Penulisan comment ditandai dengan “//” pada
satu baris
• Comment yang lebih dari 1 baris ditandai
dengan “/*” dan “*/”
• Deklarasi variabel menggunakan : var
www.company.com
 Company Object Event (DOM)
LOGO

• DOM (Document Object Model) merupakan objek standar

yang dapat digunakan untuk mengeksekusi perintah/fungsi-
fungsi JavaScript dalam event HTML maupun XML

Chapter 7

www.company.com
 Company Object Event (DOM)
LOGO

• Beberapa Event Handler dalam object Event yaitu : Onclick,

Ondblclick, Onerror, Onkeydown, Onkeypress, Onkeyup,
Onmousedown, Onmousemove, dll..
• Objek DOM ditandai dengan penamaan “document”
Chapter 7 • Beberapa method pada DOM yang dapat digunakan :
• write(variabel/string)
Menampilkan output (string / karakter / nilai)
• getElementById(id Tag HTML)
Mencari atau mengambil nilai dari elemen HTML berdasarkan
ID
• getElementsByTagName(nama Tag HTML)
Mencari atau mengambil nilai dari elemen HTML berdasarkan
NAME
• getElementsByClassName(nama class Tag HTML)
Mencari atau mengambil nilai dari elemen HTML berdasarkan
www.company.com CLASS
 Company Fungsi Alert
LOGO

• Event HTML : onclick

Chapter 7

www.company.com
 Company Fungsi Alert
LOGO

• Event HTML : ondblclick

Chapter 7

www.company.com
 Company Automatic Conversion
LOGO

• Penerapan object document.write() :

Chapter 7

www.company.com
 Company Operator Aritmatika
LOGO

• Tabel operator aritmatika dasar :

Chapter 7

• Fungsi aritmatika lainnya :

• Math.sqrt(nilai) : menghitung akar
• Math.pow(nilai, pangkat) : menghitung
pemangkatan
• Math.min(nilai1, nilai2,..) : mencari nilai
minimum
www.company.com• Math.max(nilai1, nilai2,..) : mencari nilai
maksimum
 Company Operator Aritmatika
LOGO

• Penerapan object document.write() :

Chapter 7

www.company.com
 Company Fungsi Date dan Time
LOGO

• Penerapan object document.write() :

Chapter 7

www.company.com
 Company Seleksi IF-ELSE
LOGO

Bentuk Umum :
if (kondisi)
{ pernyataan 1; }
else
{ pernyataan 2; }
Chapter 7

www.company.com
 Company Seleksi SWITCH-CASE
LOGO

Bentuk Umum :
switch (variabel)
{
case (nilai_variabel) :
Chapter 7 pernyataan;
break;
case (nilai_variabel):
pernyataan;
break;
....
....
default :
pernyataan;
}

www.company.com
 Company Perulangan DO-WHILE
LOGO

• Bentuk umum :
do
{ pernyataan ;}
while (kondisi)
Chapter 7

www.company.com
 Company Perulangan FOR
LOGO

• Bentuk umum :
for (inisialisasi; kondisi; penambahan/pengurangan)
{
pernyataan;
Chapter 7 }

www.company.com
 Company Array
LOGO

• Array dalam JavaScript :

var nama_variabel = new Array();
variabel_array[indeks] = nilai;

Chapter 7

www.company.com
 Company Fungsi Prompt
LOGO

• Prompt pada JavaScript dapat digunakan untuk

menerima masukan (angka maupun string) dari user
dalam bentuk menu dialog

Chapter 7

www.company.com
 Company Fungsi Confirm
LOGO

• Confirm di dalam JavaScript berfungsi untuk

menerima masukan dari user berupa nilai boolean
(true /false) berbentuk menu dialog

Chapter 7

www.company.com
 Company Objek pada JavaScript
LOGO

• Pada JavaScript, objek dapat digunakan untuk mengakses

properti dan fungsi/method
• Pengaksesan method :
nama_objek.nama_method();
Chapter 7
• Pengaksesan properti :
nama_objek.nama_properti;
nama_objek[nama_properti];
• Pembuatan objek dengan JavaScript selain dengan
menggunakan kata “new”, juga dapat menggunakan objek
literal :
var nama_objek = {nama_properti : nilai, nama_properti :
nilai,..};

www.company.com
 Company Pengaksesan Properti dengan
LOGO
getElementById
• Beberapa properti yang dapat diakses melalui method
getElementById() yaitu :
• innerHTML atau value
Berfungsi untuk mengubah atau mengambil nilai
Chapter 7 dari elemen HTML
• href
Berfungsi untuk mengubah atau mendefinisikan
alamat link dari element HTML
• target
Berfungsi untuk mengubah atau mendefinisikan
target HTML
• Contoh :
var temp =
document.getElementById(“c01”).value;
artinya :
mengambil nilai dari element HTML dengan id =
“c01” dan
www.company.com
menyimpannya di dalam variabel temp.
 Company Pengaksesan Properti
LOGO

• Penerapan getElementById().value :
index.html

Chapter 7

info.js

www.company.com
 Company Pengaksesan Properti
LOGO

• Penerapan getElementById().innerHTML :

Chapter 7

www.company.com
 Company Pengaksesan Properti
LOGO

• Penerapan getElementById().href :

Chapter 7

www.company.com
 Selesai…

www.company.com