Scribd
Unggah
12 tayangan33 halaman

Pertemuan 13 - Javascript

Dokumen ini menjelaskan tentang JavaScript, termasuk definisi, sejarah, alasan penggunaan, dan fitur-fitur utama seperti DOM manipulation, event handling, dan AJAX. Selain itu, dokumen ini juga memberikan contoh cara mendeklarasikan JavaScript, peletakannya dalam HTML, penggunaan variabel, operator, struktur kontrol, dan fungsi. Di akhir, terdapat latihan untuk membuat halaman web interaktif menggunakan JavaScript.

Diunggah oleh

Never Zp
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
12 tayangan33 halaman

Pertemuan 13 - Javascript

Dokumen ini menjelaskan tentang JavaScript, termasuk definisi, sejarah, alasan penggunaan, dan fitur-fitur utama seperti DOM manipulation, event handling, dan AJAX. Selain itu, dokumen ini juga memberikan contoh cara mendeklarasikan JavaScript, peletakannya dalam HTML, penggunaan variabel, operator, struktur kontrol, dan fungsi. Di akhir, terdapat latihan untuk membuat halaman web interaktif menggunakan JavaScript.

Diunggah oleh

Never Zp
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 33

JAVASCRIPT

Ressy Dwitias Sari, S.T., M.T.I


PTIK – FT UNJ
2024
Apa Itu JavaScript

Definisi Sejarah
JavaScript adalah Dikembangkan oleh
bahasa Brendan Eich pada
pemrograman yang tahun 1995
digunakan untuk
membuat halaman
web interaktif.
3

Alasan Menggunakan JavaScript


Untuk membuat website menjadi dinamis dan interaktif:
● meletakan teks dinamik di dalam halaman HTML
● memberikan reaksi terhadap suatu event
● membaca dan menuliskan elemen-elemen HTML
● digunakan untuk memvalidasi data
● digunakan untuk mendeteksi browser pengunjung web
● digunakan untuk menyimpan dan menerima informasi di komputer
pengunjung halaman Web
Fitur JavaScript
DOM Event
Handling AJAX
Manipulation
• Definisi: DOM (Document • Definisi: Event handling adalah • Definisi: AJAX memungkinkan
Object Model) adalah proses menangani interaksi pengembang untuk memuat
representasi struktur halaman pengguna dengan halaman data secara asinkron tanpa
web. JavaScript web, seperti klik, input, atau perlu memuat ulang halaman.
memungkinkan pengembang hover. • Contoh: Mengambil data dari
untuk mengakses dan • Contoh: Menambahkan event server dan menampilkan
memanipulasi elemen-elemen listener untuk menangani klik hasilnya di halaman web.
DOM. tombol. • Kode Contoh:
• Contoh: Mengubah teks dalam • Kode Contoh:
elemen <p>, menambahkan
atau menghapus elemen
HTML, dan mengubah atribut
elemen seperti kelas atau ID.
• Kode Contoh:
5

Mendeklarasikan JavaScript
<script type=“txt/javascript">
<!--
Kode-kode JavaScript
// -->
</script>
6

JavaScript Sederhana
JavaScript untuk Tampilan:
menuliskan teks:
<html>
<body>
<script type="text/javascript">
document.write(“JavaScript sederhana!");
</script>
</body>
</html>
7

Peletakan JavaScript
● Di bagian Head
● Di bagian Body
● Di bagian Head dan body
● Di External script
8

Peletakan JavaScript di bagian Head

● Script yang berisi fungsi (function) diletakkan di bagian


head. Hal ini untuk memastikan bahwa script telah
loaded sebelum fungsi dipanggil.
<html>
<head>
<script type=“text/javascript”>
. . .
</script>
</head>
</html>
9

Peletakan JavaScript di bagian Body

● Script yang akan dieksekusi ketika halaman web


ditampilkan diletakkan di dalam bagian body.
<html>
<head>
</head>
<body>
<script type=“text/javascript”>
. . .
</script>
</body>
</html>
10

Peletakan JavaScript di
bagian Head dan bagian Body
● Untuk script yang berjumlah banyak di dalam dokumen HTML, maka
script dapat diletakkan baik di bagian head dan body.
<html>
<head>
<script type=“text/javascript”>
. . .
</script>
</head>
<body>
<script type=“text/javascript”>
. . .
</script>
</body>
</html>
11

Peletakan JavaScript di External script

● Terkadang JavaScript yang sama ingin dijalankan pada halaman-


halaman web yang berbeda-beda. Maka script yang sama tidak
perlu dituliskan untuk setiap halaman, akan tetapi dengan
menuliskan JavaScript di suatu file eksternal.
Di dalam file eskternal tidak boleh terdapat tag <script>
● Contoh cara penggunaan:
<html>
<head>
<script src=“namaFileScript.js">
</script>
</head>
<body>
</body>
</html>
Variabel.js

● Var2.js
13

Contoh file external


14

Komentar
● Komentar 1 baris:
// ini adalah komentar
● Komentar beberapa baris:

/*
Ini juga
Adalah komentar
*/
15

Kotak Dialog
● Alert
● Prompt
● Confirm
16

Alert
● digunakan untuk memperingatkan pengunjung hal-hal
atau dalam kasus tertentu memberikan instruksi.
● Syntax:
window.alert(‘text’)
17

Prompt
● digunakan untuk menampilkan sebuah prompt yang
juga mempunyai kotak isian yang dapat menerima
sesuai informasi dari pengunjung.
● Syntax:
window.prompt(‘text’,’defaultvalue’)
18

Confirm
● Digunakan untuk memperingatkan pengunjung agar
menguji atau menerima sesuatu dengan memilih
tombol OK atau Cancel untuk konfirmasi.
● Syntax:
window.confirm(‘text’)
19

Variabel
● Tipe data:
○ Numeric
○ String
○ Boolean
○ Null
● Aturan penggunaan:
○ Nama variabel adalah case-sensitive (a dan A adalah 2 contoh
variabel yang berbeda)
○ Nama variabel harus dimulai dengan suatu huruf atau oleh karakter
garis bawah (underscore)
● Contoh deklarasi:
nama = ‘eve’;
angka = 17;
20

Contoh penggunaan variabel untuk menghitung luas persegi panjang:

JavaScript:
<html>
variabel
<head><title>..:: Belajar JavaScript ::.. </title>
</head>
<body> Menampilkan informasi
Menghitung Luas Persegi Panjang: <br> Tampilan:
<script language="JavaScript"> Menampilkan isi variabel
<!--
var luas,panjang,lebar,satuan;
satuan = window.prompt('Masukkan satuan (m,cm) :');
panjang = window.prompt('Masukkan panjang persegi panjang :', + '0');
lebar = window.prompt('Masukkan lebar persegi panjang :', + '0');
luas=panjang*lebar;
document.write('Panjang = ' + panjang +' ' + satuan + "<br>");
document.write('Lebar = ' + lebar +' ' + satuan + "<br>");
document.write('Luas = ' + luas +' ' + satuan + "<sup>2<sup>");
//-->
</script>
</body>
</html>
21

Operator
● Operator Aritmatika:
+ - * / % ++ --
● Operator Assignment:
= += -= *= /= %=
● Operator Perbandingan:
== === != > < >= <=
● Operator Logika:
&& || !
22

Struktur Kontrol:
● If…else
● Perulangan For
● Perulangan While
23

If … Else
● Digunakan untuk mengetes apakah suatu kondisi itu
benar (true) atau salah (false).
<html>
<head> <title>Belajar JavaScript</title> </head>
<body>
<script type="text/javascript">
var nilai
nilai = prompt('Silahkan masukkan nilai Anda','');
if(nilai <= 56)
{
window.alert('Sayang sekali. Anda tidak lulus.');
}
else
{
window.alert('Selamat! Anda lulus.');
}
</script>
</body>
</html>
24

Perulangan For
● Digunakan untuk melakukan perulangan jika jumlah
perulangan sudah diketahui sebelumnya

<html>
<head> <title>Belajar JavaScript</title> </head>
<body>
<script type="text/javascript">
// Mengulang angka dari 0 sampai 5
var angka=0;
for (angka=0;angka<=5;angka++)
{
document.write('Angka ' + angka + "<br>");
}
</script>
</body>
</html>
25

Perulangan While
● Digunakan ketika ingin melakukan perulangan selama
kondisi yang ditentukan adalah true.
<html>
<head> <title>Belajar JavaScript</title> </head>
<body>
<script type="text/javascript">
// Mengulang angka dari 0 sampai 5
var angka=0;
while (angka<=5)
{
document.write("Angka " + angka +"<br>");
angka=angka+1;
}
</script>
</body>
</html>
26

Fungsi (Function)
● Fungsi adalah potongan kode JavaScript yang dapat
dideklarasikan pada bagian head dan kemudian dapat dirujuk dari
kode yang dibuat di dalam body.
<html>
<head>
<script type="text/javascript">
function perkalian(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(perkalian(7,5));
</script>
</body>
</html>
27

Event
● Event adalah aksi yang dapat di-trigger oleh fungsi (function)
JavaScript.
● Event biasa dikombinasikan dengan fungsi, dan fungsi tersebut tidak
akan dieksekui sebelum event tersebut terjadi
● Contoh-contoh penggunaan event:
○ Ketika mouse di-klik
○ Ketika menampilkan halaman web atau menampilkan gambar
○ Mouse digerakkan ke suatu posisi tertentu di dalam halaman web
○ Memilih suatu kotak masukan di dalam suatu form HTML
○ Selecting an input box in an HTML form
○ Men-submit suatu form HTML
28

Contoh-contoh Event
● Onclick
Event ini di-trigger ketika mouse di-klik ke suatu obyek
● onload and onUnload
Keduanya di-trigger ketika pengunjung memasuki atau meninggalkan halaman web.
Onload Event biasanya digunakan untuk mengecek tipe dan versi browser pengunjung,
dan menampilkan informasi tersebut.
● onFocus, onBlur and onChange
Dikombinasikan dengan penggunaan fungsi untuk memvalidasi suatu isian form.
● onSubmit
Digunakan untuk memvalidasi seluruh isian form sebelum di-submit
● onMouseOver and onMouseOut
Digunakan untuk membuat tombol yang “teranimasi”
29

Status bar
● Status bar adalah bar yang biasanya berwarna abu-abu di sepanjang
bagian bawah jendela web browser. Status bar menampilkan
informasi seperti beberapa banyak halaman telah di-load dan URL
pada saat suatu link ditunjuk.
● Syntax:
window.status='Teks ini terletak di status bar';

● Fasilitas ini dapat disertakan di dalam event onClick, onMouseOver


atau onMouseOut, sehingga ketika suatu link ditunjuk oleh mouse,
maka status bar akan menampilkan deskripsi link tersebut.
30

Summary
● JavaScript dapat digunakan untuk membuat website menjadi dinamis
dan interaktif.
● JavaScript dapat diletakkan di bagian Head, Body, gabungan Head dan
body, serta di External script.
● Terdapat tiga macam kotak dialog untuk pengunjung situs yang dapat
dibuat dengan menggunakan JavaScript, yaitu: Alert, Prompt dan
Confirm
● Tipe data yang dapat digunakan: Numeric, String, Boolean dan Null
● Jenis-jenis operator: Operator Aritmatika, Operator Assignment, Operator
Perbandingan dan Operator Logika
● Struktur kontrol di dalam JavaScript: If…else, perulangan For dan
perulangan While.
● JavaScript juga dapat dibuat dalam bentuk fungsi (function), yang
nantinya juga dapat digunakan untuk men-trigger (dikombinasikan
dengan) event.
TERIMA
KASIH
Latihan
1. Buatlah halaman seperti berikut:
a. Input berupa : NIM, NAMA, JENIS KELAMIN, AGAMA, STATUS, JURUSAN, KOMENTAR.
(SESUAIKAN OBJEK YANG DIPAKAI) Gambar 1
b. Proses terjadi ditombol KIRIM
c. Output : lihat pada gambar 2
d. Isi dengan NIM, NAMA ANDA

Gambar 1 Gambar 2
Latihan
2. Perusahaan Travel Bintang Abadi memiliki armada dengan tujuan Jakarta, Solo dan
Surabaya. Setiap tujuan memiliki kelas Eksekutif, Bisnis dan Ekonomi.

Diskon 10% diberikan apabila pemesan tiket merupakan anggota Travel Bintang Abadi.
Input : Nama Pemesan, Tujuan, Kelas, Banyak Tiket dan Status Member/Bukan
Output : Harga Tiket, Subtotal, Diskon dan Total Bayar
Tampilan :

Anda mungkin juga menyukai