P Web06 JavaScriptModern byAgusSBN PDF

PRAKTIKUM 6
JAVASCRIPT
6.1 Tujuan Istruksional Umum

1. Mahasiswa bisa memahami Konsep Javascript
2. Mahasiswa bisa memahami cara kerja javascript
3. Mahasiswa bisa memahami cara memakai javascript
6.2 Tujuan Instruksional Khusus

1. Mahasiswa bisa menggunakan tanpa dan dengan web server Apache dalam WAMP
atau XAMPP untuk menjalankan dasar-dasar script javascript.
2. Mahasiswa bisa memahami cara menghubungkan antara html dan javascript
3. Mahasiswa dapat menggunakan coding javascript untuk membuat web dapat
berinteraksi.
6.3 DASAR TEORI

6.3.1 Konsep Bahasa Pemrograman
Untuk menguasai bahasa pemrogaman apapun, fahamilah 3 hal berikut ini.
Gb. 8. Tiga hal yang harus dikuasai saat belajar bahasa pemrograman
Praktikum Pemrograman Web Dasar– Politeknik Negeri Banjarmasin– oleh : Agus SBN | 81
6.3.2 Konsep Javascript
Javascript adalah sebuah script yang akan dijalankan atau di eksekusi oleh browser. Konsep
ini sama dengan HTML. Script dari javascript akan di jalankan dari atas ke bawah perbaris oleh
browser. Berbeda dengan HTML dan CSS, javascript adalah bahasa pemrograman. Artinya,
dengan javascript kita dapat memasukkan algoritma ke dalam pemrograman web kita. Kita
bisa membuat aplikasi perhitungan luas lingkaran, volume kubus dan lain-lain. Meski
sebenarnya di awal konsep javascript adalah untuk validasi disisi client.
Satu hal yang harus di fahami mendasar adalah, jika kita bekerja dengan server, maka semua
program javascript akan di download di client, sehingga respon program menjadi sangat
cepat. Namun bahayanya adalah, semua script kita akan dapat di baca oleh user.
Waspadalah…
Gb. 9. Hubungan HTML, CSS dan JS. Yang di tuliskan di JS itu hanya sebagian kecil.
6.3.3 HTML dan Javascript

Ibarat manusia, HTML adalah panca indera, seperti mata, telinga dan mulut. Semua indera
akan merespon sesuai algoritma yang di tuliskan menggunakan javascript. Dari sini jelas
bahwa urusan interface ke user, tetap menggunakan HTML, sedangkan urusan menjalankan
logika dikerjakan oleh javascript.
Contohnya adalah input angka, secara umum HTML akan membuat tampilan input text, nah,
agar hanya angka yang bisa di ketik, maka javascript akan memeriksa setiap perubahan di
input, apakah angka atau bukan. Jika angka lanjutkan, jika bukan abaikan.
6.3.4 Penempatan Javascript
Sebenarnya javascript dapat diletakkan dimanpun dalam bagian HTML. Namun dari sisi user
experience, javascript sebaiknya diletakkan di akhir html. Karena jika diletakkan di awal html,
maka saat pertama loading HTML akan memanggil javascript terlebih dahulu, dan program
benar2 berhenti. Berakibta tidak ada di browser. Jika itu lebih dari 3 detik, user bisa menutup
aplikasi kita dan tidak jadi membukanya.
Script javascript diletakkan diantara perintah <script> </script>.
Selain teknik embeded, inline, javascript lebih banyak ditempatkan terpisah menggunakan
teknik link.
6.3.5 Sejarah
Javascript termasuk bahasa pemrograman yang amat pesat perkembangannya. Buku ini
beberapa kali menghapus perintah-perintah penting dikarenakan perubahan bahasa,
terutama setelah tahun 2016 ke atas.
Di awali oleh Brendan Eich in 1995, dan menjadi ECMA standard tahun 1997. ECMAScript
versions adalah abbreviated dari ES1, ES2, ES3, ES5, dan ES6. Sejak 2016, dinamakan sesuai
tahun (ECMAScript 2016, 2017, 2018, 2019, 2020).
6.3.6 Variabel dan breakpoint

Sebagai bahasa pemrograman, javascript memiliki variabel. Secara sederhana kita bagi dua
saja, angka (number) dan teks (text). Waspadalah hasil input dari HTML yang selalu text,
sehingga untuk meyakinkan perlu dilakukan konversi jika ingin melakukan proses numerik.
Variabel dalam javascript diawali dengan perintah var.
Untuk menampilkan variabel-variabel, kita dapat menggunakan perintah
• document.write()
• window.alert()
• console.log()
6.3.7 Array di JavaScript

Array adalah sebuah nama variabel dengan kumpulan data dengan tipe sama yang memiliki
index. Ada dua tipe array :
1. Indexed (indexnya otomatis berupa angka 0,1,2,3 dst) dan
2. Assosiative (Indexnya berupa variabel bebas).
Harap difahami bahwa array assosative di javascript tidak dapat disamakan dengan array
assosiative di PHP yang dapat menggunakan lambang => .
6.4 LANGKAH PERCOBAAN
6.4.1 Javascript sebagai OUTPUT
6.4.1.1 JS Output ke Konten HTML (innerHTML. alert(), document.write(), console.log())
p 6–1.html à Javascript pertama kali. Menampilkan tanggal jam dengan id dan innerHTML
Catatan, yang dilingkar merah dan kotak, pasangan kedua nama itu harus sama persis.
Hasil: à
Seperti biasa, tugas anda mengetik, ubah nama dan nim sesuai masing-masing dan capture
coding berserta hasilnya. Tambahkan beberap komen sendiri jika diperlukan.
p 6–2.html à Menampilkan waktu dengan perintah alert().
Hasil: à
Jika ada warning mengenai popup,
ijinkan atau Allow…
p 6–3.html à Menampilkan waktu dengan perintah document.write()
Hasil: à
p 6–4.html à Sama2 document.write() , namun hasilnya berbeda. Ceritakanlah perbedaan dengan p6-3.html
p 6–5.html à Menampilkan waktu dengan perintah console.log()
Hasil:
Kali ini menu console dari inspect benar2 dipakai untuk analisa javascript
p 6–6.html à Menampilkan tanggal jam dengan input text, id dan value

Hati-hati, saat mengisi html <input type=text….> jangan gunakan innerHtml, tapi value.
Hasil: à
6.4.1.2 JS Output ke Attribut Values (src)
p 6–7.html à Menampilkan tanggal jam dengan img src, id dan src

Siapkan dua buah file, mintalah ke dosen agar gambar yang ditampilkan sesuai.
Hasil:
Jika button 2d di click, jika button 3d di click
6.4.1.3 JS Output ke CSS (style)
p 6–8.html à ubah style, id dengan style css
Hasil:
Cobalah deskripsikan apa yang tampil di tiap langkah ini berurutann:

1. Pertama di jalankan
2. Click Biru
3. Click Merah
4. Click Kotak
5. Click Biru
6. Click Kotak
7. Click Merah
Apa perbedaan hasil langkah 4 ke 5 (Kotak ke biru) dan
6 ke 7 (kotka ke merah) ?
6.4.2 EVENT . Dari sisi HTML dan Javascript
Berbeda saat kita belajar bahasa C di semester 1 yang urutan programnya selalu dapat dilihat
dengan mudah dari atas kebawah. Program berbasis Desktop dan WEB agak berbeda, karena coding
mana yang dijalankan tidak selalu dari atas ke bawah, melainkan menunggu trigger dari user atau
interupt sistem.
Jika memperhatikan gambar di samping, ada banyak
kemungkinan EVENT, atau sebuah fungsi di javascript dijalan.
Misalkan saja:
§ Jika kursor masuk nama_nada à onClick()
§ Jika isi di nama_nada berubah à onChange()
§ Jika kursor meninggalkan nama_nada à onBlur()
§ Jika Mouse berada di atas nama_nada à MouseOver()
§ Jika Button isi_field di click à onClick()
§ Dan banyak lagi.
Untuk memahami perbedaan event dari sisi HTML dan Javascript dapat dilihat di dua coding
berikut ini.
Atas adalah coding p6-1.html awal javascript dengan coding event di sisi HTML. Dan pen-
trigernya adalah button.
Bawah adalah coding p6-9.html adalah coding dengan event disisi Javascript, meski pen-
triggernya tetap button. Hasil kedua coding ini sama.
p6_1.html coding awal EVENT trigger disisi HTML
p 6–9.html à coding EVENT trigger disisi javascript
Dari kedua ini mana yang ideal, tergantung situasi dan kondisi. Anda perlu riset dan mencari
referensi mana yang terbaik coding di sisi html atau javascript.
Coding, jalankan dan capture p6-8.html.
6.4.3 Javascript sebagai INPUT
6.4.3.1 JS Input dari HTTML Input text (value)

p 6–10.html à Input Text dan menampilkan di html.
Hasil: à
6.4.3.2 JS Input dari HTTML Dropdown

p 6–11.html à Ambil data dari dropdown HTML.
Hasil: à à
6.4.3.3 JS Input dari HTTML Radio
p 6–12.html à Ambil data dari dropdown HTML.
Hasil: à
6.4.3.4 JS Input dari HTTML CheckBox
Hasil: à
6.4.4 Variabel di Javascript
Variabel adalah tempat untuk menyimpan data sementara didalam program. Dalam bahasa C
kita harus mendeklarasikan sebuah variabel terlebih dahulu, misal int, char atau float. Pada Javascript
ini bebas. Kita tinggal tuliskan var angka, dan nilai yang masuk pertama itulah yang akan jadi format
datanya. Bisa bulat, string atau array.
Satu hal yang harus diperhatikan, input dari html selalu text. Sehingga saat perhitungan harus
kita konversi dulu menjadi bilangan.
Perintah var adalah perintah paling awal yang dikenalkan sejak 1005 hingga 2015. Setelah itu
dipecah menjadi dua, let dan const.
Sebagai saran, gunakan
§ var à agar semua browser kuno pun bisa mengenali.
§ let à digunakan sebagai pengganti var yang lebih moderen
§ const à digunakan jika variabel ini akan bernilai tetap (tidak berubah2)
6.4.4.1 Deklarasi dengan var, let dan const

p 6–13.html à Variabel dengan var.
Hasil: à
p 6–14.html à Variabel dengan let.

Ganti semua perintah var di atas menjadi let. Jalankan, apakah hasilnya sama?
p 6–15.html à Variabel dengan const.

Ganti semua perintah let di atas menjadi const. Jalankan, apakah hasilnya sama?
Untuk kasus ini semua masih aman. Bahkan saat tanpa perintah var, let atau const pun masih
aman. Karena memang awalnya maunya coding javascript ini fleksibel. Nanti ada beberapa
kasus agar optimal, kita harus memilih.
6.4.5 DECISSION / Keputusan

Salah satu kecanggihan bahasa pemrograman adalah kemampuanya membuat keputusan.
Javascript adalah salah satu bahasa pemrograman disisi client yang juga dapat melakukan
pengambilan keputusan.
Ada 4 tipe keputusan dasar, if tunggal, if-else, if bertingkat dan switch case.
6.4.5.1 If tunggal
p 6–16.html à Program memastikan input jangan negatif dengan if tunggal.
Hasil: à
a. Jalankan, dan masukkan angka 5, click proses,
Apa yang tampil di layar ?
b. Tekan Refersh, masukkan angka -3, click proses, apa yang muncul di layar?
c. Masukkan angka 10 (tanpa refresh), click proses, apa yang muncul di layar?
d. Apakah guna menekan refresh di browser?
6.4.5.2 If -else
p 6–17.html à Tampilkan error dan merah jika negatif, biru dan angka jika positif
Hasil: à
a. Jalankan, dan masukkan angka 5, click proses, Apa yang tampil di layar ?
b. TANPA Refersh, masukkan angka -3, click proses, apa yang muncul di layar?
c. Masukkan angka 10 (tanpa refresh), click proses, apa yang muncul di layar?
d. Kenapa sekarang dapat jalan tanpa refresh browser ?
6.4.5.3 If -Bertingkat
Untuk pertama kali anda coding tanpa Button. Namun menggunakan onChange(), yang artinya
jika ada perubahan di pulldown, maka akan mentriger fungsi javascript.
p 6–18.html à Tampilkan pulldown, dan tampilkan status pilihan.
Hasil: à
a. Capture semua kemungkinan.

b. Andai terpilih “pilih angka”, apa yang akan muncul di layar?
6.4.5.4 Switch case
Jika lebih dari dua pilihan dengan operator di dalam if adalah tunggal, lebih mudah
menggunakan switch case.
p 6–19.html à Menampilkan nama hari ini Indonesia.
Hasil: à
Apakah tampilan jawaban anda sama atau berbeda dengan teman anda. Mengapa ?
6.4.6 ARRAY
Pertanyaan yang sering ditanyakan adalah, kenapa ada variabel array, untuk apa variabel
array?. Semoga beberapa jawaban ini dapat membantu.
§ Array memungkinkan kita menyimpan lebih dari satu, atau banyak data dengan tipe
yang sama dengan satu nama saja.
§ Kegunaan paling vital dari array adalah saat kita membuat stack, antrian, atau
membuat aplikasi untuk sebuah urutan data.
§ Kegunaan vital berikutnya adalah tampilan layar kita yang kursornya bisa berubah
karena posisi x dan y dari layar (Array 2 d)
§ Array dapat mengoptimasi if bertingkat dengan index dimulai dari 0.
Mari kita buktikan, array dapat menyederhanakan. IF.
6.4.6.1 Array Indexed 1 Dimensi
Perhatikan coding p6-19 diatas yang menggunakan switch case untuk menentukan hari.
Tampak ada 18 baris switch case, bayangkan jika pakai if else, atau switch casenya break diletakkan di
baris terpisah.
Di variabel itu tampak index dimulai dari 0, dan kita dapat menyederhanakannya menjadi
array.
Agar lebih memahami perbedaan variabel array dan biasa, perhatikan contoh perintah
variabel biasa a dan variabel array b.
const a = 10;
const b = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
a
10
Indexes 0 1 2 3 4 5 6
Values Minggu Senin Selasa Rabu Kamis Jumat Sabtu
Variabel a hanya memiliki 1 kotak dan di isi nilai 10. Sedangkan variabel b memiliki 7 kotak
yang diisi nama-nama hari. Index awal selalu dari 0. Dalam kasus indexed, nilai 0 sampai 6 dan
seterusnya hanya ilustrasi. Tidak benar-benar ada di memori komputer.
p 6–20.html à Menampilkan nama hari ini Indonesia dengan array indexed
Hasil: à
Jika anda menjalankan di hari yang sama dengan coding p6-19.html switch case, hasilnya
mestinya sama.
6.4.6.2 Akses Array Indexed 1 Dimensi
p 6–21.html à Menampilkan nama hari ini Indonesia.
Hasil: à
6.4.6.3 Array Asosiatif 1 Dimensi

Ini adalah catatan khusus tentang array di javascrip:
In JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes.
Berikut ini adalah array dengan key yang kita tentukan sendiri. Tidak otomatis dari 0. Misalkan
contoh nama-nama lapangan udara beserta kode nya.
p 6–22.html à Menampilkan nama bandara dengan array assosiatif.
Hasil: à
Perintah baru yang ada di coding ini adalah JSON.stringfy(); Jika anda memaksa menggunakan
x saja seperti sebelumnya, maka yang muncul adalah , ini
menyatakan x adalah array asosiatif yang tidak dapat ditampilkan secara langsung. Harus akses objek
masing-masing.
6.4.7 LOOP
Ada 3 perintah perulangan dasar. Perulangan yang pasti batasnya à For, dan perulangan
yang tidak pasti batasnya while dan do-while. Namun di javascript dan bahasa tingkat tinggi lainnya
ada pengembangan perintah for. Utamanya dalam penanganan array.
6.4.7.1 Perulangan dengan perintah FOR
p 6–23.html à Menampilkan bilangan dua pangkat x dengan menggunakan FOR.
Hasil: à
Perhatikan, daripada dalam satu kali loop cetak kelayar, teknik ini mengumpulkan semua
arraynya dulu menjadi banyak, baru dikirim ke HTML. Perintah
teks += … Sama dengan teks = teks + …
Yang artinya, tambahkan teks dengan dirinya sendiri dulu (atau tambahkan teks dengan nilai
teks sebelumnya), baru ditambahkan dengan nilai yang baru. Konsep ini menjadi efesien karena
Javascipt bisa fokus mengerjakan perulangan dan HTML cukup sekali proses menampilkan data teks
nya.
6.4.7.2 Perulangan dengan perintah WHILE
Seperti yang dijelaskan di awal, javascript berkembang sangat pesat. Ada beberapa perintah
yang resmi mulai ditinggalkan, terhitung mulai tahun lalu 2021, namun masih bisa dipakai. Perintah
itu antara lain:
- Alert() à Popup pesan
- Windows.confirm() à Popup YES NO
- Windows.prompt() à Popup Input String
Tampilan windows.prompt() dan windows.confirm()
p 6–24.html à Menampilkan tulisan nama dan nim selama ditekan OK dengan WHILE.
Hasil: à
NB: JANGAN DICENTANG opsi ¨ Don’t allow localhost to prompt you again
Salah dua alasan alert(), windows.confirm() dan windows.prompt() depricated
adalah ini dan perhatikan icon proses yang terus berputar di atas (bar browser) dan centang
tadi.
6.4.7.3 Perulangan dengan perintah DO-WHILE
p 6–25.html à Menampilkan tulisan nama dan nim selama ditekan OK dengan DO-WHILE.
Hasil: à
Jawab pertanyaan berikut:

Perhatikan baik-baik, proses dari awal menjalankan program while dan do-while. Bagian/
proses apa yang paling membedakan antara while dan do-while ?
6.4.7.4 Lanjutan perintah FOR untuk Array dengan FOR IN. Mengulang sebanyak array/objek
Memodifikasi program array p6-20.html à array indexed
p 6–26.html à Menampilkan isi array indexed dengan FOR-IN.
Hasil: à
Perhatikan baik-baik, proses dari awal menjalankan program while dan do-while. Bagian/
proses apa yang paling membedakan antara while dan do-while ?
Memodifikasi program array assosiatif p6-22.html à object
p 6–27.html à Menampilkan isi obejek dengan FOR-IN.
Hasil: à
6.4.7.5 Lanjutan perintah FOR untuk Array dengan FOR OF. Mengulang sebanyak yang bisa dihitung
p 6–28.html à Menampilkan array indexed dengan FOR-OF.
Hasil: à
Jawab pertanyaan berikut:

Apa saja perbedaan mendasar pada coding for in dan for of
p 6–29.html à Memecah string dengan FOR-OF.
Hasil: à
6.5 TUGAS
1. Buatlah coding untuk menghitung Luas dan Keliling persegi dengan diketahui panjang dan
lebar.
2. Fitur:
a. Ada tombol Hitung untuk menghitung. Tombol ini akan disable selama tidak ada
input yang valid. (Valid jika input panjang dan lebar adalah angka positif, bukan
negatif atau huruf).
b. Ada validasi bahwa input harus positif, dan tidak boleh huruf.
c. Saat pertama di jalankan, kursor langsung ke input paling atas, tergantung desain
anda , panjang atau lebar yang lebih dulu.
d. Ada nama dan nim anda yang jika kursor lewat di atasnya, warnanya berubah dan
tampilannya glowing.
e. Ada tombol about yang kalo di click muncul data diri anda.
f. Percantik dengan CSS
3. Capture coding dan hasilnya:
NB: Semua input HTML berbentuk string, anda harus konversi ke interger dengan perintah
parseInt() atau ke float dengan perintah parseFloat()

P Web06 JavaScriptModern byAgusSBN PDF

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

P Web06 JavaScriptModern byAgusSBN PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM 6

6.1 Tujuan Istruksional Umum

6.2 Tujuan Instruksional Khusus

6.3 DASAR TEORI

6.3.3 HTML dan Javascript

6.3.6 Variabel dan breakpoint

Untuk menampilkan variabel-variabel, kita dapat menggunakan perintah

6.3.7 Array di JavaScript

p 6–2.html à Menampilkan waktu dengan perintah alert().

p 6–5.html à Menampilkan waktu dengan perintah console.log()

p 6–6.html à Menampilkan tanggal jam dengan input text, id dan value

p 6–7.html à Menampilkan tanggal jam dengan img src, id dan src

p 6–8.html à ubah style, id dengan style css

Cobalah deskripsikan apa yang tampil di tiap langkah ini berurutann:

p6_1.html coding awal EVENT trigger disisi HTML

p 6–9.html à coding EVENT trigger disisi javascript

6.4.3 Javascript sebagai INPUT

6.4.3.1 JS Input dari HTTML Input text (value)

6.4.3.2 JS Input dari HTTML Dropdown

6.4.3.4 JS Input dari HTTML CheckBox

6.4.4.1 Deklarasi dengan var, let dan const

p 6–14.html à Variabel dengan let.

p 6–15.html à Variabel dengan const.

6.4.5 DECISSION / Keputusan

p 6–18.html à Tampilkan pulldown, dan tampilkan status pilihan.

a. Capture semua kemungkinan.

p 6–20.html à Menampilkan nama hari ini Indonesia dengan array indexed

6.4.6.3 Array Asosiatif 1 Dimensi

p 6–22.html à Menampilkan nama bandara dengan array assosiatif.

6.4.7.1 Perulangan dengan perintah FOR

p 6–23.html à Menampilkan bilangan dua pangkat x dengan menggunakan FOR.

Tampilan windows.prompt() dan windows.confirm()

Jawab pertanyaan berikut:

p 6–28.html à Menampilkan array indexed dengan FOR-OF.

Jawab pertanyaan berikut:

Anda mungkin juga menyukai