Scribd
Unggah
6 tayangan

Pertemuan 4v2 - JavaScript 1

Dokumen ini membahas konsep dasar pemrograman berorientasi objek dalam JavaScript, termasuk pengenalan bahasa, perbandingan dengan Java, dan penggunaan tag <SCRIPT>. Selain itu, dijelaskan tentang properti, metode, event handling, variabel, dan tipe data dalam JavaScript. Tujuan dari pembelajaran ini adalah agar mahasiswa dapat memahami dan menerapkan konsep-konsep tersebut dalam pengembangan aplikasi web.

Diunggah oleh

aryawar004
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
6 tayangan

Pertemuan 4v2 - JavaScript 1

Dokumen ini membahas konsep dasar pemrograman berorientasi objek dalam JavaScript, termasuk pengenalan bahasa, perbandingan dengan Java, dan penggunaan tag <SCRIPT>. Selain itu, dijelaskan tentang properti, metode, event handling, variabel, dan tipe data dalam JavaScript. Tujuan dari pembelajaran ini adalah agar mahasiswa dapat memahami dan menerapkan konsep-konsep tersebut dalam pengembangan aplikasi web.

Diunggah oleh

aryawar004
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 38

OOPL OBJECT PARAMETER EVENT HANDLING

Jav
as
cri
pt
1

PERTEMUAN 4
Nova Agustina, M.Kom.

Tools :
KONTRAK
KULIAH

PRESENSI
UTS UAS TUGAS QUIZ ABSEN
UTS
25% 30% 20% 10% ?%
15%
1 0 0
TUJUAN

Mahasiswa dapat
menerangkan konsep
OOPL, Object, fungsi,
parameter,event handling
pada JavaScript
LAYOUT
PENGENALAN JS

JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses pada sisi
klien, sehingga kemampuan dokumen HTML menjadi lebih luas. JavaScript memungkinkan
untuk memvalidasi masukan-masukan pada formulir sebelum dikirim ke server. JavaScript
dapat mengimplementasi permainan interaktif

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi
skrip skrip dari Javascript yang terselip di dalam dokumen HTML. Javascript tidak memerlukan
kompilator atau penterjemah khusus untuk menjalankannya
JAVA vs JS

JavaScript Java
Bahasa yang diinterpretasikan langsung oleh Bahasa yang setengah terkompilasi dan
browser memerlikan Java Virtual Machine untuk
menterjemahkannya
Kode terintegrasi dengan HTML Kode (applet) terpisah dari dokumen HTML.
Dipanggil pada saat membuka dokumen
HTML
Bahasa dengan karakteristik yang terbatas Bahasa dengan karakteristik yang luas
(pendekatan jenis variable)
Hubungan dinamis, referensi dari objek Hubungan statis, objek harus ada pada saat
diverifikasi pada saat loading program loading (dikompilasi)

Kode program bias di akses Kode Program tersembunyi


JAVA vs JS

• JavaScript sendiri merupakan bahasa yang mudah dipahami, karena memiliki kemiripan
dengan konsep bahasa pemrograman visual, maupun Java ataupun C.
• JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel
dan fungsi yang menggunakan huruf besar dan huruf kecil.
• Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan karakter
titik koma (;).
TAG SCRIPT

Tag <SCRIPT> diletakkan diantara bagian kepala dari dokumen HTML, yaitu bagian antara
tag <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (atau disebut juga event)
diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY> dan
</BODY>.

Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa yang digunakan
dan versinya, contohnya “JavaScript“, “JavaScript1.1“,“JavaScript1.2“ untuk bahasa
JavaScript
PRAKTIKUM
File EKSTERN

Menggunakan file ekstern


Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang
berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3
keatas).
<SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>
dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript, jika
perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di
dalam tag Script.
Java Script Sebagai Bahasa
Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai

suatu obyek , yang artinya adalah elemen :

• Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa

mengetahui dimana letak/lokasi obyek itu sebenernya.

• Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)


Java Script Sebagai Bahasa
Berorientasi Objek
Ilustrasi :
Kebun
 Pohon
• Dahan
o Daun
o Sarang Burung
 Panjang = 20
 Warna = kuning
 Tinggi = 4
• Batang
• Akar
 Sangkar Ternak
• Ayam
• Bebek
Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut :
Kebun.Pohon.Dahan.Sarang Burung
Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon, maka perintahnya :
Kebun.Pohon.Dahan.Sarang Burung.warna=hijau
PROPERTI

Properti adalah atribut dari sebuah objek.


• Penulisannya (dipisahkan dengan tanda “.”) :
nama_objek . nama_properti
• Properti dapat diberi nilai, penulisannya :
objek . properti = nilai
PROPERTI

Contoh :
<HTML>
<HEAD>
<TITLE>Properti defaultStatus</TITLE>
</HEAD> Nama Properti
<BODY>
<H1>Tes defaultStatus</H1> Nilai
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.defaultStatus = "Selamat belajar JavaScript“ ;
//-->
</SCRIPT>
</BODY>
</HTML> Nama Objek
METODE

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu
tindakan terhadap objek. Penulisannya (dipisahkan dengan tanda “.”) : nama_objek .
nama_metode(“parameter”)
PRAKTIKUM

Document :
Objek
Write : Metode

(“selamat
Mencova
Javascript”)
merupakan
sebuah
parameter
EVENT HANDLER

Melalui event tertentu


Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya
seperti klik tombol mouse.
<tag eventHandler="kode Javascript yang akan dimasukkan">
dimana eventHandler adalah nama dari event tersebut.
EVENT HANDLER

Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan manakala


pemakai melakukan suatu tindakan/kejadian, misalnya mengklik tombol mouse atau
ketika menutup jendela browser.

Penulisannya :nama_kejadian = “kumpulan kode”

Kumpulan kode dapat berisi sejumlah pernyataan. Antar pernyataan dipisahkan titik-
koma.
EVENT HANDLER

Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan manakala


pemakai melakukan suatu tindakan/kejadian, misalnya mengklik tombol mouse atau
ketika menutup jendela browser.

Penulisannya :nama_kejadian = “kumpulan kode”

Kumpulan kode dapat berisi sejumlah pernyataan. Antar pernyataan dipisahkan titik-
koma.
PRAKTIKUM
PEMASUKAN DATA

JavaScript memiliki mekanisme yang memungkinkan pemakai disuguhi jendela untuk

memasukkan sederetan masukan setelah pemakai mengklik tombol OK, maka kode

dalam JavaScript akan melakukan serangkaian proses.


PRAKTIKUM
CONTOH JS UNTUK
WARNING & CONFIRM
VARIABLE

Variable adalah suatu obyek yang berisi data data, yang mana dapat di modifikasi
selama pengeksekusian program.
Aturan pemberian nama variabel :
• Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu
karakter ''_''.
• Nama variabel bisa terdiri dari huruf huruf, angka angka atau karakter _ dan & (spasi
kosong tidak diperbolehkan).
• Nama variabel tidak boleh memakai nama yang digunakan dalam reserved program,
seperti : abstract, boolean, break, byte, if, implements, import, in, infinity, instanceof, int,
interface, dll
VARIABLE

eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel

dan nilai dari variabel : var test = “halo”

implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari

variabel : test = “halo”


PRAKTIKUM
VARIABLE GLOBAL

Jika dideklarasikan dibagian awal dari skrip program, yang artinya sebelum

pendeklarasian semua fungsi, maka semua fungsi di dalam program bisa mengakses

variabel ini, dan variabel ini menjadi variabel global.


PRAKTIKUM
VARIABLE LOKAL

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi

tertentu, maka variabel itu hanya bisa di akses dari dalam fungsi tersebut, dan

artinya variabel ini tidak berguna bagi fungsi fungsi yang lain, dan kita sebut variabel

ini menjadi variabel lokal


PRAKTIKUM
TIPE DATA

Bilangan bulat atau desimal


Integer(bilangan bulat), basis-nya :
basis desimal : integer di tuliskan dalam urutan unit bilangan (dari 0 sampai dengan 9), permulaan
bilangan tidak boleh dimulai oleh angka 0
basis heksadesimal : dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan
huruf dari A sampai dengan F (atau a sampai dengan f), permulaan bilangan dimulai oleh 0x atau 0X
basis oktal : dituliskan dalam urutan unit angka dari 0 sampai dengan 7, permulaan bilangan dimulai
dengan angka 0
TIPE DATA

Bilangan bulat atau desimal


Float (bilangan desimal): bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan
dengan tanda koma.
bilangan bulat desimal : 895
bilangan dengan tanda koma : 895,12
bilangan pembagian : 27/11
bilangan eksponensial : bilangan dengan tanda koma , kemudian diikuti oleh huruf e(atau E),
kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau -, pangkat postitif
atau negatif), contoh :
var a = 2.75e-2;
var b = 35.8E+10;
var c = .25e-2;
TIPE DATA

String, adalah kumpulan dari karakter, kita deklarasikan variabel string menggunakan tanda (') atau (").
Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan bagian dari karakter yang
tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator "mengalami
kebingungan" dalam membedakan antara string dan skripnya sendiri, karakter spesial ini menggunakan
simbol antislash (\), beberapa contoh karakter spesial tersebut :
\n : kembali ke baris awal
\r : menekan tombol ENTER
\t : tab
\" : tanda petik ganda
\' : tanda petik tunggal
\\ : karakter antislash
TIPE DATA

Booleans, adalah satu variabel khusus yang berguna untuk mengevalua si suatu
kondisi tertentu, oleh karenanya boolean mempunyai dua nilai :
True : diwakili oleh nilai 1
False : diwakili oleh nilai 0
TIPE DATA

Mengubah bentuk string menjadi bentuk bilangan bulat : parseInt()

Mengkonversi bentuk string menjadi bilangan real : parseFloat()


PRAKTIKUM TIPE DATA
REFERENSI

JAVASCRIPT EVENT : https://www.w3schools.com/jsref/dom_obj_event.asp


TERIMAKASIH

Anda mungkin juga menyukai