Website design 3

 

lan instruksi yang digunakan untuk mengubah bit-bit dalam HTML menjadi 

karakter. Oleh karena itu, charset UTF-8 dalam dokumen ini memberikan instruksi kepada browser 

web tentang cara merender karakter dalam dokumen HTML sebagai UTF-8. Saat ini, satu-satunya set 

karakter yang digunakan adalah ASCII (charset="us-ascii"), meskipun set karakter ini dibatasi paling 

banyak 128 karakter. Kemudian ubah ASCII menjadi karakter ANSI atau cetak dengan charset ISO-8859-

1. Karakter ANSI dapat mencakup hingga 256 karakter dan sering digunakan dalam HTML versi 2.0 

hingga 4.01. Permasalahan yang diberikan pada karakter ASCII atau ANSI tidak menyertakan karakter 

non-latin, seperti huruf Arab, China, Jepang, dll, sehingga untuk keperluan ini dikembangkanlah set 

 106 

 

 

 

untuk masing-masing bahasa, seperti big5 untuk Akibatnya, hal ini menimbulkan perbedaan pada set 

karakter tergantung bahasa yang akan digunakan untuk menulis kode HTML. Ini adalah sesuatu yang 

dapat diprogram menggunakan sintaks HTML, tetapi akan lebih praktis jika semua karakter disertakan 

dalam satu set. Sejak awal pengembangan XHTML, istilah "Unicode Transformation Format-8" (UTF-8) 

telah digunakan untuk merujuk pada kumpulan karakter yang mewakili sekitar 10.000 karakter lebih 

banyak daripada yang sekarang digunakan di dunia dan telah menjadi karakter standar. ditetapkan 

untuk seluruh dunia. 

"Font Awesome" adalah kumpulan ikon yang dibuat dengan harga yang sama dan 

memanfaatkan sistem "Font Icon", yang memungkinkan pengguna mengubah warna dan ukuran font 

tanpa harus mempelajari CSS, dan membuat ikon lebih kecil dan lebih bulat daripada Ikon Gambar. 

 

Style.css

 

 107 

 

 

 

 

Istilah "pemilih universal" mengacu pada pemilih yang digunakan untuk memilih setiap elemen di 

dalam lingkup saat ini. 

 108 

 

 

 

 

Oleh karena itu, setiap elemen akan memiliki batas padat, lebar 1px, berwarna abu-abu di 

sekelilingnya. 

Pemilih universal dapat digunakan untuk mengatur ulang CSS. Mengapa kita perlu mengatur ulang? 

Ada beberapa elemen ramah browser CSS dalam kode sumber HTML, seperti padding dan margin pada 

elemen saat ini. Tujuan reset adalah untuk menghapus padding dan margin saat ini. Reset Contoh CSS: 

 

Karenanya, tidak ada elemen yang memiliki padding atau margin.  

 109 

 

 

 

BAB 9 

MENGISI KOTEN  & MEMBUAT HALAMAN RESPONSIVE 

 

TUJUAN : 

a. Mahasiswa Dapat Mengisi Konten dari Template yang Sudah di Buat sebelumnya 

b. Mahasiswa Mampu Membuat Tautan Link berdasarkan Name Section 

c. Mahasiswa Mampu Membuat Halaman Web Menjadi Responsive 

 

Overview : 

Setelah anda membuat template web pada BAB sebelumnya, pada BAB kali ini berfokus dalam 

pengisian konten web beserta membuat link berdasarkan name ID. Untuk hyperlink name ID sudah 

pernah diajarkan juga pada buku ini, silahkan anda pelajari lagi pada BAB ke 3 sub poin hyperlink. 

 Saat ini, sebagian besar pengguna internet mengakses situs web melalui perangkat seluler. 

Akibatnya, setiap aplikasi situs web harus menjunjung tinggi prinsip akuntabilitas (tata letak responsif). 

Istilah "tata letak responsif" mengacu pada teknik untuk membuat halaman web yang menggunakan 

teks fleksibel, gambar fleksibel, dan file media fleksibel dalam lembar gaya. Aplikasi web yang 

menggunakan tata letak responsif mendapat manfaat dari fakta bahwa informasi yang ditampilkan di 

situs web dapat dibaca dan dipahami oleh pengunjung tanpa kesulitan dan dapat diakses tanpa 

penundaan dari perangkat seluler apa pun. 

 

  

 110 

 

 

 

9.1 MENGISI KONTEN 

Setelah template HTML dan CSS tahapan sebelumnya telah selesai, silahkan Anda isikan 

konten pada masing – masing menubar pada bagian section. Kemudian silahkan Anda atur sendiri 

mengenai tampilan misalkan font-size, padding, margin, dan lain – lain sedemikian rupa sehingga 

tampilan halaman sangat bagus dan nyaman untuk di lihat.  

Dalam pembuatan web tidak hanya isi konten saja yang di perhatikan, pewarnaan, tata letak, 

gaya atau style atau bentuk huruf juga juga harus di perhatikan. Karena style yang bagus akan 

membuat user atau pengujung menjadi nyaman untuk membuka web tersebut lebih lama. Bahkan 

style yang bagus juga membuat user tertarik untuk melihat isi kontennya. 

Dalam pengisian konten silahkan Anda masukkan kedalam section dan berikan ID pada setiap 

section tersebut untuk di gunakan proses pemanggilan pada side-bar nya. Berikut ini contoh dalam 

membuat section Beranda yang hasilnya seperti di bawah ini. 

 

Gambar 9.1 Halaman Beranda 

 

Selanjutnya atur file index.html seperti di bawah ini 

 

Section untuk  

Tampilan Beranda 

 111 

 

 

 

Dalam penganggilan <a haref=”#..”> menggunkan ID dari section. Anda juga bisa menghubungkan file 

HTML lain dengan tag dan atribut <a href >. Atur gaya tampilan section id beranda tersebut se suka 

hati Anda menggunakan css, contoh : 

 

 

Anda bisa menggunakan  

selector Tag / ID maupun  

Class 

 112 

 

 

 

 

 

Setelah membuat tahapan di atas, silahkan anda buat juga section untuk halaman lain. Saya 

contohkan disini membuat section untuk about yang nanti bisa di panggil lewat sidebar About dan juga 

Tompol seklengkapnya pada halaman Beranda. Silahkan buat section lagi (untuk halaman about) di 

bawah section halaman beranda. 

index.html 

 

 

 113 

 

 

 

 

 

Kemudian setelah ini silahkan atur gaya css sesuai dengan kehendak anda pada bagian style.css 

nya, contoh gaya css seperti dibawah ini 

 

Style.css 

 

 

Hasilnya dapat dilihat pada halaman berikutnya 

Style untuk about  

Dan tabel 

 114 

 

 

 

 

Gambar 9.2 Halaman About 

 

Silahkan Anda lanjutkan sendiri untuk pembuatan section untuk menampilkan halaman yang 

lainnya beserta atur gaya CSS nya sesuai kehendak Anda. 

 

9.2 MEMBUAT HALAMAN MENJADI RESPONSIVE 

Desain responsif web membuat beranda situs web Anda tampak bagus dari segala sudut. Desain 

responsif web hanya menggunakan HTML dan CSS. Situs web dapat dilihat di berbagai perangkat, 

termasuk desktop, tablet, dan ponsel. Apa pun perangkatnya, situs web Anda akan terlihat bagus dan 

mudah digunakan. 

Situs web tidak dapat memperbarui informasi secara otomatis agar sesuai dengan perangkat yang 

lebih kecil; sebagai gantinya, konten harus disesuaikan agar cocok dengan perangkat mana pun yang 

digunakan. 

       

Desktop    Tablet  Telepon  

Gambar 9.3 tampilan Halaman web di berbagai perangkat 

 

 115 

 

 

 

Ini disebut sebagai desain web responsif saat menggunakan CSS dan HTML untuk menyesuaikan 

ukuran, bentuk, warna, font, atau atribut konten lainnya sehingga tampak sesuai di mana pun 

ditempatkan. 

 

1. Ubahlah sidebar menjadi terihat saat halaman pertama kali di buka dengan cara mengubah 

value left : -250px; menjadi left : 0px; ini akan membuat sidebar akan selalu terlihat. 

   

2. Atur posisi saat web di buka dengan menggunakan layar lebar seperti monitor PC atau laptop 

yang lebih dari 1300px. 

 

@media di gunakan untuk merubah tampilan browser agar tampilan website bisa menjadi 

responsive.  @media dapat berisi min-width dan max-width. 

3. Atur tampilan saat web di buka dengan menggunakan handphoe atau layar di bawah 500px; 

 

 116 

 

 

 

 

 

 

Untuk syntac diatas ini sebenarnya sama dengan syntac yang ada pada atasnya saat kita belajar 

mengisi konten. Bedanya hanya terletak pada value nya saja karena kita akan mengatur 

tampilan menjadi lebih kecil. 

 

Ketika di buka dengan layar lebar : 

 

Gambar 9.4 responsive dengan layar komputer 

 117 

 

 

 

Ketika di buka dengan layar kecil : 

- Sidebar akan terhidden dan di tampilkan tombol menu secara otomatis 

 

Gambar 9.5 responsive dengan layar smartphone sidebar tersembunyi 

 

- Saat menu di klik , sidebar akan tampil dengan ukuran yang lebih kecil 

 

Gambar 9.6 responsive dengan layar smartphone sidebar terbuka 

 

- Saat layar di buat sedikit besar. Bandingkan ukuran menubar gambar di atas dengan 

gambar di bawah ini 

 

Gambar 9.7 responsive dengan layar tablet 

 118 

 

 

 

BAB 10 

JAVA SCRIPT DAN ATURAN DASAR 

 

TUJUAN : 

a. Mahasiswa Memahami Pengertian JavaScript 

b. Mahasiswa Memahami Sejarah JavaSript 

c. Mahasiswa Memahami  Istilah yang Ada Pada Javascript 

d. Mahasiswa Mampu Membuat Dokument JavaScript 

e. Mahasiswa Mampu Membuat Tampilan Output Pada JavaScript 

 

Overview : 

JavaScript adalah bahasa pemrograman yang paling banyak digunakan oleh programmer situs 

web atau pengembang situs web. Ada kemungkinan bahwa meskipun Anda sudah familiar dengan 

gaya ini, Anda tidak menyadari maknanya. Berbeda dengan orang yang cuek, Anda yang sudah 

memrogramkan dunia pemrograman dan kode kemungkinan besar akan memahaminya dengan 

mudah. 

Jika Anda adalah satu-satunya orang di dunia yang tertarik mempelajari JavaScript, Anda 

dapat membaca lebih lanjut tentangnya di bagian bawah halaman ini. Kali ini, kita akan membahas 

setiap aspek JavaScript menggunakan bahasa yang bahkan orang awam pun dapat dengan mudah 

memahaminya, meminimalkan penggunaan istilah penuh jargon. Sekarang saya telah mengatakan 

itu, silakan baca penjelasan yang lebih panjang di bawah ini. 

  

 119 

 

 

 

10.1 INTRODUCTION 

a) PENGERTIAN DARI JAVASCRIPT 

Apa sebenarnya javascript seperti yang telah disebutkan di paragraf sebelumnya? Javascript 

adalah salah satu dari sedikit bahasa pemrograman internet yang dapat membuat situs web Anda lebih 

menarik dan layak huni. Kesalahan eksekusi Javascript terjadi di jendela browser pengguna atau 

tempat lain selain server, yang berbeda dari PHP. 

Tampilan Javascript berbeda dari HTML dan CSS. CSS dan HTML masing-masing digunakan 

untuk mengubah format konten tabular. oleh karena itu desain keseluruhannya sangat berbeda. Ada 

beberapa contoh orang yang menggunakan HTML, CSS, dan javascript secara bersamaan, termasuk 

konstruksi rumah, dekorasi interior, dan lampu serta pintu-pintu. 

Akibatnya, HTML digambarkan sebagai sebuah blok bangunan yang dapat digunakan untuk 

merenungkan segala sesuatu, bahkan tempat-tempat dengan alamat tetap seperti tembok, pintu, 

atap, dan lain-lain. Sebaliknya, CSS adalah alat dekorasi rumah yang dapat mengubah tampilan 

wallpaper, karpet, dan hal-hal lain di rumah Anda. Javascript berguna untuk hal-hal yang perlu 

responsif dan menghidupkan, seperti menyalakan lampu atau membuat pintu. 

Javascript membuat situs web lebih responsif karena, meski tidak ada masalah, isinya masih 

akan berubah secara signifikan. Anda dapat menemukan nomor rumah Anda. Tidak adanya lampu atau 

pintu mungkin tidak menjadi masalah, tetapi rumah besar mungkin menjadi redup dan mulai 

mengeluarkan sedikit kelembapan. Juga, kehadiran javascript membuat situs web agak tidak menarik. 

Bahasa ini termasuk yang paling mudah dipelajari para segelintir. Beberapa website populer 

yang sekarang tersedia menggunakan bahasa Netscape. Menggunakan Javascript memungkinkan 

Anda mengirim elemen ke halaman web yang diinginkan. 

Selain kompatibel dengan berbagai platform dan browser web, JavaScript cukup serbaguna. 

Penggunaan memorinya sangat kecil, ringan, dan cepat dibandingkan dengan bahasa pengkodean 

lainnya. Namun, javascript tidak seaman bahasa pemrograman lainnya.Anda dapat melanjutkan 

membaca paragraf berikutnya untuk kejelasan dan detail lebih lanjut. 

 

b) SEJARAH  

Seperti yang telah disebutkan sebelumnya, Javascript adalah bahasa pemrograman yang 

dikembangkan oleh Netscape. Proses desain membutuhkan waktu sepanjang hari. Nama Javascript 

adalah Mocha, yang dibuat oleh Mona, Live Script, dan kemudian Javascript. 

Hanya komunitas Netscape yang menggunakan Javascript versi asli, September 1995, dan 

fungsinya telah diperbarui. Namun seiring berjalannya waktu, Javascript terus berkembang hingga bisa 

berfungsi seperti sekarang. 

Pada tahun 1996, JavaScript sebagian besar disebut sebagai ECMAScript. Situasi ini dimulai 

pada tahun 1998. ECMAScript 2 dan ECMAScript 3 dibuat masing-masing pada tahun 1998 dan 1999. 

ECMAScript terus berkembang hingga akhirnya berevolusi menjadi JavaScript yang digunakan saat ini. 

Hampir 92 persen situs web pada tahun 2016 menggunakan Javascript. Mungkin jumlahnya akan lebih 

tinggi dari saat ini. Bolehkah saya mau? 

Rupanya, selama dua tahun ke depan, javascript berkembang sebagai satu-satunya bahasa 

pemrograman yang paling populer dan penting. Jika Anda sering menggunakan internet, Anda 

mungkin tahu apa itu javascript, familiar dengan namanya, atau lebih kabur dan belum pernah melihat 

sintaksnya.  

 120 

 

 

 

 

c) CARA KERJA DAN FUNGSI JAVASCRIPT 

Untuk lebih memahami siapa kami sebagai sebuah tim, kami akan meninjau fungsi dan metode 

kerja Javascript. HTML, CSS, PHP, dan bahasa pengkodean lainnya akan sering diperiksa oleh server 

sebelum dikirim ke pengguna. Lebih tepatnya, ketika Anda membuat situs web menggunakan HTML, 

CSS, PHP, dan bahasa lainnya, bahasa situs web tersebut akan diterjemahkan secara otomatis dan 

diperiksa oleh server web setiap kali pengunjung meminta akses ke sana. 

Server web akan segera mulai menghapus cookie yang ada, setelah itu mereka akan ditinjau 

dengan cermat oleh pengunjung situs web sebelum dikirim ke mereka, memungkinkan mereka untuk 

mendapatkan data dan informasi lainnya dari situs yang baru dikunjungi. Metode kerja ini berbeda 

dengan metode kerja yang digunakan oleh Javasript. 

Cara kerja dari javascript adalah bahwa pengguna situs web akan dikirim ke file dengan 

ekstensi evil.js atau ke halaman yang telah disematkan secara permanen. Oleh karena itu, 

dimungkinkan untuk menyebutnya sebagai bahasa klien. Lain kali klien mengunjungi situs web, skrip 

yang disebutkan di atas akan aktif di titik akhir klien. Aksara yang sama juga digunakan pada dimakat 

yang sedang digunakan. Oleh karena itu, masalahnya bukan terletak pada server web melainkan pada 

masing-masing klien atau pengunjung situs web. 

Namun, tersedia browser yang menawarkan opsi bagi pengguna untuk menentukan apakah 

mereka ingin mengaktifkan atau tidak. Beberapa fitur tidak akan berfungsi atau, lebih buruk lagi, tidak 

akan tersedia jika hal ini tidak terjadi. Dan Anda sebagai awam mungkin bisa memahami hal ini. Jika 

Anda sering menggunakan internet, mungkin ada situs web yang meminta Anda untuk mengaktifkan 

fungsi javascriptnya. Itulah satu-satunya hal yang disorot dalam paragraf ini. Namun, ada browser web 

yang menawarkan opsi aktif yang tidak ada. 

 

d) KELEBIHAN JAVASCRIPT 

JavaScript adalah satu-satunya bahasa pemrograman dengan banyak kekurangan. Jika 

dibandingkan dengan bahasa pemrograman bahasa lain, keterampilan lain lebih mudah dipelajari. 

Penanganan dan koreksi kesalahan juga lebih mudah. Selain itu, Anda tidak memerlukan kompiler 

karena browser web dapat mengartikannya menggunakan HTML. 

Javascript juga dapat diaktifkan pada halaman web atau peristiwa yang ditargetkan, seperti 

selama klik atau gerakan mouse. File Javascript juga dapat digunakan di berbagai platform dan browser 

web, menjadikannya cukup populer dan penggunaannya hampir universal. Selain itu, Javascript dapat 

digunakan untuk memvalidasi informasi saat ini, membuatnya kurang diinginkan untuk memasukkan 

data secara manual. 

Dibandingkan dengan bahasa pemrograman lain, Javascript lebih ringkas, lebih cepat, dan 

lebih efisien saat membandingkan penggunaan memori. Alasan yang disebutkan di atas hanya 

menjadikan Javascript sebagai bahasa pemrograman yang kurang disukai. Setiap tindakan memiliki 

beberapa risiko, bahkan menggunakan javascript. 

 

e) KEKURANGAN JAVASCRIPT 

Jenis ketidakpastian lainnya adalah adanya risiko ledakan yang tinggi. Seperti yang sudah kita 

ketahui, Javascript sangat populer. Kemungkinan hal ini akan mendorong peretas, penipu, atau aktor 

jahat lainnya untuk menyerang dan mencari potensi kelemahan dalam sistem. 

 121 

 

 

 

Situasi saat ini baru-baru ini menarik perhatian organisasi Javascript, tetapi juga membawa 

risiko yang signifikan, sehingga yang menggunakannya harus waspada. Selain itu, Javascript dapat 

digunakan untuk mengaktifkan kode komputer khusus pengguna. Setiap kali mereka 

menggunakannya, pengguna harus berhati-hati. 

Masalah lain yang tidak terkait dengan popularitas masalah ini adalah keamanan browser. 

Meskipun sebagian besar browser web mendukung javascript, masih ada beberapa yang tidak dan 

tidak dapat digunakan dalam konteks saat ini. Ini biasanya melibatkan seseorang mematikan browser 

web mereka. Jika dinyatakan, apakah ada tanda-tanda masalah? Karena baik pemilik situs web 

maupun pengunjung tidak dapat memaksimalkan konten mereka, inilah satu-satunya alasan. 

 

f) PERBEDAAN JAVASCRIPT DENGAN BAHASA PEMROGRAMAN LAINNYA 

Bahasa yang akan dibahas bersama adalah PHP, HTML, CSS, dan Javascript. Elemen pertama 

adalah Javascript, atau JS mungkin disertakan. Fungsi dasar JavaScript adalah membuat situs web apa 

pun lebih menarik dan menarik. 

JS adalah bahasa pemrograman yang diaktifkan oleh browser pengguna, berbeda dengan 

bahasa pemrograman lain yang diaktifkan oleh server. Pengembang umumnya tidak perlu melanjutkan 

prosedur asli untuk menyediakan fungsionalitas yang diperlukan karena JS biasanya beralih ke posisi 

bawahan organisasi lain. 

Anda mungkin sudah mengetahui bahwa HTML, juga dikenal sebagai Hyper Text Markup 

Language, sering digunakan di situs web dan berfungsi sebagai titik awal untuk berbagai bagian situs 

web. Setiap orang yang memiliki situs web mungkin merasa canggung menggunakan tag HTML "img" 

untuk gambar, "p" untuk paragraf, dan beberapa simbol lainnya. 

Sebaliknya, CSS, juga dikenal sebagai Cascading Style Sheets, sering digunakan untuk 

mengubah gaya dan format konten. Dalam HTML, setiap elemen harus dimasukkan secara manual, 

namun dalam CSS, hal ini tidak diperlukan untuk menampilkan konten apa pun. Anda tidak diharuskan 

untuk memahami berungkali tampilan elemen. 

PHP sering disebut sebagai "sisi server" karena sebagian besar pemrosesan datanya terjadi di 

server, tidak seperti JavaScript, yang diluncurkan dari komputer klien atau biasanya disebut sebagai 

"sisi klien Bahasa pemrograman PHP sering disertakan dalam WordPress dan sistem manajemen 

lainnya. PHP sering digunakan dalam pengembangan back end karena menawarkan toples terbaik 

untuk memfasilitasi proses transfer informasi. 

 

10.2 CARA MEMBUAT JAVASCRIPT DI WEBSITE 

Javascript adalah bahasa pemrograman yang sederhana untuk dipelajari dan 

pengembangannya sederhana. Tidak diragukan lagi, menggunakan tag "skrip" diperlukan untuk 

menyematkan string skrip Java di halaman. Javascript juga digunakan dengan benar di header situs 

web Anda. Tetapi Anda juga dapat memilih untuk tidak menggunakannya di lain waktu atau dengan 

elemen lain. Kode dalam JS juga dapat dieksekusi sebagai file terpisah. 

Saat ini, Javascript tidak hanya digunakan untuk aplikasi sisi klien (browser). Selain itu, 

Javascript digunakan di server, konsol, program desktop, aplikasi seluler, jaringan IoT, game, dan 

platform lainnya. Ini membuat Javascript lebih populer dan bahasa yang paling sering digunakan 

pengguna Github. 

 

  

 122 

 

 

 

a) MENGENAL CONSOLE 

Konsole merupakan bagian untuk menampilkan pesan error jika kita melakukan kesalahan dalam 

menuliskan syntac javascript. Untuk memampilkan halaman ini Anda dapat membuka browser 

kemudian klik kanan – Inspect elemet – Console 

 

Gambar 10.1 Console pada browser 

 

Didalam console ini kita jug adapt menulis fungsi atau code javascript dan hasilnya langsung bisa di 

tampilkan pada browser. Coba kita tulis kode seperti di bawah ini pada console : 

  console.log("Hi apa kabar!"); 

  alert("Saya sedang belajar javascript"); 

 

Gambar 10.2 hasil dari perintah console 

 

 123 

 

 

 

Setelah penginstalan konsol Javascript, berikut ini yang mungkin Anda harapkan: 

➢ Konsol dapat digunakan untuk memodifikasi kode atau fungsi Javascript;  

➢ Konsol dapat digunakan untuk melihat kesalahan saat men-debug program. 

 

a) MEMBUAT PROGRAM JAVASCRIPT  

Mulai editor teks, lalu buat file dengan nama index.html dengan kode berikut: 

 

maka akan terlihat seperti ini: 

 

 

Gambar 10.3 hasil dari program javascript 

 

Kenapa console.log("Saya belajar Javascript"); tidak di tampilkan? 

 

Karena faktanya console.log() atau fungsi terkait akan mengirimkan pesan ke konsol Java 

script. Sebagai alternatif, karena fungsi document.write() adalah untuk menulis ke dokumen HTML, 

informasinya akan ditampilkan pada saat itu. 

Mulai sekarang, mulailah mengetik javascript konsol. Jadi, kita akan melihat sebuah pesan. 

"Saya belajar Javascript": 

 124 

 

 

 

 

  Gambar 10.4 perintah console 

 

Selain document.write() dan console.write() ada kode lain untuk menampilkan output pada javascript. 

Namun sebelum membahas lebih dalam, kita pelajari dulu mengenai Menulis Java Script di HTML 

 

b) CARA MENULIS KODE JAVASCRIPT DI HTML 

Pada contoh di bawah ini, kami telah memasukkan kode JavaScript menggunakan teknologi 

embedding HTML (ditempel). Meskipun semua telah dikatakan, masih ada beberapa hal yang 

memerlukan perhatian kita : 

a. Embed (kode HTML untuk Javascript diuji terus menerus. Konteks: saat ini) 

b. Inline (Kode JavaScript tertanam dalam atribut HTML.) 

c. Eksternal (File HTML dan kode Javascript kompatibel.) 

 

1) Penulisan Kode Javascript Embed 

Dalam hal ini, kode Javascript tertanam dalam HTML dengan menggunakan elemen "<script>." 

Tag ini dapat ditulis dalam tag “<head>” dan “<body>”. 

 125 

 

 

 

 

Meskipun dapat di tulis pada bagian <head> ataupun <body>, Namun demikian, banyak orang 

menyarankan untuk menempatkannya di body> karena akan membuat website memuat lebih 

cepat. 

 

2) Penulisan Kode Javascript Inline 

Dengan metode ini, kami akan menyematkan kode JavaScript dalam atribut HTML. Metode ini 

sering digunakan untuk mengaktifkan fungsi utama acara saat ini. 

Saat ditautkan, diklik, misalnya. 

 

Atau bisa juga seperti : 

 

Hasilnya : 

  

Gambar 10.5 inline javascript 

 

Keterangan : 

- Pada contoh pertama di atas, kode javascript dituliskan pada event atribut. Satu-satunya 

atribut event yang ada dalam HTML adalah onclick. Oleh karena itu, kode JavaScript dapat 

ditulis dalam event atribut. 

- Pada HTML, atribut event ditulis terlebih dahulu dengan huruf on, seperti Atribut HTML yang 

dikenal sebagai onclick digunakan untuk event clicks.  Silakan baca contoh di bagian bawah 

penjelasan ini. 

 126 

 

 

 

- Pada contoh di bawah ini, aktifkan fungsi alert(). Fungsi ini adalah salah satu untuk 

menyajikan dialog. Kemudian, dengan menggunakan Javascript, kami menambahkan fungsi 

alert() ke atribut href. Atribut href biasanya digunakan untuk menentukan tautan atau alamat 

URL. Karena kami ingin menyematkan kode JavaScript di sini, kami akan mengonversi alamat 

tautan menjadi javascript dan kemudian menerapkan fungsionalitas yang dimaksud. 

 

Contoh atribut event HTML onkeyup 

 

Dalam contoh ini, kami menggunakan event keyup yang mendukung onkeyup. Kejadian ini 

terjadi saat kami menekan tombol pada keyboard. Sederhananya, ketika kita mengklik elemen 

"textarea", kode JavaScript yang ada di sana akan dieksekusi. 

Kode Javascript ini digunakan untuk menampilkan berbagai karakter dinamis. 

Hasil: 

 

        Gambar 10.6 jumlah karakter dengan javascript 

 

Tabel 10.1 Event system dalam javascript 

 

 

  

 127 

 

 

 

Tabel 10.2 Event pengguna beserta keterangan 

 

 

 

 128 

 

 

 

 

 

3) Penulisan Kode Javascript Eksternal 

Dalam metode ini, kami akan menyertakan kode JavaScript dalam file HTML yang diformat dengan 

ketat. Karena lebih mudah mengelola kode proyek dengan metode ini, cara ini biasanya digunakan 

untuk proyek-proyek besar. 

Buat file html dan file js dalam 1 folder atau menyesuaikan folder 

 

Gambar 10.7 penulisan javascript Eksternal 

Isi file kode.js 

 

Isi file eksternal.html 

 

Untuk menyisipkan file javascript, gunakan tag <script> … </script> 

Hasilnya : 

 

Gambar 10.8 alert javascript 

 

 129 

 

 

 

Selain itu kita juga dapat menyisipkan javascript yanga da di internet dengan memberikan 

alamat URL lengkapnya seperti : 

 

 

c) MENAMPILKAN OUTPUT PADA JAVASCRIPT 

Keluaran Istilah "keluaran" mengacu pada perangkat lunak yang biasanya digunakan untuk 

memberikan hasil akhir. Output sering disampaikan dalam bentuk teks dengan kemampuan cetak (). 

Ada dua cara untuk menampilkan keluaran di Javascript : 

4.1 Menggunakan fungsi Console.log() 

Fungsi console.log() adalah berfungsi untuk mengirim teks ke konsol Javascript. 

Konteks penggunaan: 

 

Hasilnya dapat dilihat pada halaman berikutnya : 

 

Gambar 10.9 console.log 

 

Console.log() biasanya digunakan untuk debugging. Karena setiap pernyataan Javascript selalu 

muncul di Console. Ada beberapa fungsi debug yang tersedia selain console.log(), termasuk 

console.debug(), console.info(), console.error(), console.dir(), dan lainnya. 

 

 

Gambar 10.10 atribut console 

 

  

 130 

 

 

 

4.2 Menggunakan Fungsi Alert() 

Fungsi alert() adalah untuk menampilkan kotak dialog. Fungsi terletak di objek jendela secara 

default. Teks komprehensif seperti itu dapat ditulis: 

 

Bisa juga di tulis seperti : 

 

Contoh : 

 

Hasilnya  

 

Gambar 10.11 alert dengan javascript 

 

Pesan alert diatas di masukkan ke dalam function sayHello(). Function akan kita pelajari pada BAB 

berikutnya. 

 

4.3 Menggunakan Fungsi document.write() 

Istilah "objek dokumen" mengacu pada objek Javascript yang menampilkan konten HTML. Ada 

fungsi write() pada objek dokumen yang dapat digunakan untuk mengirimkan konten ke dokumen 

HTML. 

Contoh: 

 131 

 

 

 

 

Hasilnya 

 

    Gambar 10.12 document.write JS 

 

Seiring dengan fungsi write(), dokumen objek juga menyediakan banyak alat lain untuk 

memanipulasi dokumen HTML. 

 

4.4 Menggunakan innerHTML 

innerHTML adalah properti elemen HTML (objek) yang berisi string HTML. Dengan menggunakan 

innerHTML, kami dapat mengirim data ke elemen yang lebih spesifik. 

Contoh: 

 

Hasilnya 

 132 

 

 

 

 

 Gambar 10.13 innerHTML JS 

 

4.5 Menampilkan Dengan Dialog 

Memanfaatkan fungsi peringatan adalah metode alert(). Fungsi penting dari alert() adalah 

salah satu yang akan meningkatkan komunikasi. Dialog adalah jenis jendela yang paling umum 

digunakan untuk berkomunikasi dengan pengguna. Ada tiga kotak dialog berbeda dalam 

Javascript: 

➢ alert(); 

➢ confirm(); 

➢ promp(); 

 

Ketiga dialog ini memiliki perilaku dan kegunaan yang berbeda-beda. 

➢  Jendela dialog alert(); 

Dialog alert() biasanya digunakan untuk menampilkan teks atau informasi peringatan yang 

mendesak. Fungsi Alert() aktif di objek window. Seseorang dapat menggunakannya dengan 

cara yang dijelaskan dalam artikel ini: 

 

Atau seperti ini: 

 

Karena jendela memiliki fokus global, kita bebas mengabaikannya. Dialog alert() tidak akan 

menampilkan nilai saat ini saat perintah dijalankan. 

 

 133 

 

 

 

 

Dialog alert() hanya membutuhkan satu parameter, yaitu teks yang akan ditampilkan pada 

dialog. Kami menyediakan teks dalam contoh di bawah ini. Salam dan selamat datang di 

pelajaran Javascript. 

Pertanyaan: Bagaimana saya bisa menyertakan kotak dialog alert() ke dalam acara yang 

sesuai, katakan saja dengan lantang saat tombol diklik? 

Kita dapat melakukannya dengan menambahkan fungsionalitas dialog ke event listener. 

Dengan HTML, Anda dapat menambahkan fungsi alert() ke atribut onClick sehingga akan 

ditampilkan saat elemen diklik. 

 

Contoh: 

 

 

➢ Jendela dialog confirm(); 

Kotak dialog confirm() digunakan untuk mendapatkan konfirmasi sebelum melakukan 

tindakan yang relevan. 

Misalnya: Saat kita sedang mendiskusikan sesuatu, penting untuk melakukan percakapan 

untuk menegaskan (). Jadi tindakan yang dimaksud cukup berwawasan luas. Kotak dialog 

konfirmasi memiliki fungsi konfirmasi (). 

Contoh: 

 

 134 

 

 

 

Jika Anda memilih tombol OK di kotak dialog confirm(), hasilnya akan benar; jika Anda 

memilih tombol Batal, hasilnya akan salah. Kita dapat menyematkan kalimat ini ke dalam 

variabel yang akan dievaluasi. 

Contoh: 

 

 

Jika di klik cancel akan menampilkan 

 

Jika di klik OK akan menampilkan website https://stekom.ac.id/  

➢ Jendela dialog prompt(); 

Dialog prompt() memiliki fungsi menerima input pengguna. Masukan dari pengguna akan 

digunakan untuk menghasilkan string di kotak dialog prompt(). 

Contoh: 

 135 

 

 

 

 

 

Setelah di klik OK 

 

Dialog prompt() memiliki beberapa parameter wajib yang harus ditentukan: 

• Teks yang akan dimasukkan ke dalam formulir;  

• kolom input default. 

Pada contoh di atas, kami memberikan nilai default sebagai string dengan karakter garis 

bawah " ". 

 

 

  

 136 

 

 

 

BAB 11 

VARIABEL, TIPE DATA & OPERATOR 

 

TUJUAN : 

a. Mahasiswa Mampu Memahami dan Membuat serta Menampilkan Data dengan Variabel 

b. Mahasiswa Memahami Tipe Data di JavaSript 

c. Mahasiswa Memahami  dan Meng Implementasikan Operator di java script  

 

Overview : 

Penulisan suatu value yang berkelanjutan dan panjang, dapat di permudah dengan sebuah 

variable.jadi pada dasarnya variable ini adalah suatu tempat atau wadah kosong yang di beri nama 

dan dapat menampung value bertipe data apa saja. Ada persyaratan dalam membuat sebuah variable 

yang akan di bahas pada bab ini. 

Javascript adalah bahasa dengan penekanan kuat pada pengetikan dinamis, oleh karena itu 

tidak seperti bahasa dengan penekanan kuat pada pengetikan statis seperti C, C++, Java, dan 

sebagainya, di mana tipe data harus ditentukan pada saat pembuatan variabel, tidak memerlukan ini. 

(harus mendeklarasikan tipe data). Namun demikian kita harus mengetahui type data apa saja yang 

ada di javascript. 

 Operator di gunakan untuk melakukan pemrosesan data dari pemberian nilai variable, 

perbandingan, aritmatika dan logika. 

 

  

 137 

 

 

 

11.1 VARIABEL  

Variabel adalah nama yang berisi nilai numerik. Variabel dapat dibuat dengan berbagai jenis 

nilai numerik, termasuk teks (teks), angka (angka), objek, array, dan lain-lain. Kita dapat menyimpulkan 

bahwa variabel ini berfungsi sebagai cara untuk menunjukkan sesuatu. 

 

                              

          Variabel   Variabel berisi buah        variable berisi angka 

 

Gambar 11.1 Ilustrasi Variabel 

 

1) Cara Membuat Variabel 

Cara khas untuk membuat variabel dalam javascript adalah dengan menggunakan kata kunci var 

diikuti dengan nama dan definisi variabel. 

Contoh: 

 

 

Pada contoh di bawah ini, kita membuat sebuah variabel bernama judul dengan teks "Pelajari 

Javascript" sebagai nilainya. 

Contoh lagi: 

 

Perhatikan! 

Dalam contoh di atas, kami menggunakan kapital atau desimal signifikan untuk mewakili nama 

variabel yang terdiri dari dua subskrip. Mengapa Anda tidak menggunakan garis bawah? Dalam 

Javascript, camelCase digunakan di seluruh kode sebagai namespace. Penggunaan kotak ular atau 

jenis garis bawah ini diperbolehkan saat ini : 

 

Ini tidak akan menimbulkan masalah karena perangkat lunak masih berjalan. Meskipun demikian, 

sebagian besar pemrogram Javascript menggunakan camelCase. 

Perlu diingat, selain menggunakan kata kunci var, Anda juga dapat membuat variabel 

menggunakan kata kunci let atau tanpa awalan lainnya.. 

 

 138 

 

 

 

Apa tujuan penggunaan var, let, dan tanpa awalan? 

Kesamaan antara pengguna dan jangkauannya jelas. Di masa mendatang, variabel yang dihapus 

akan diterjemahkan. 

Selanjutnya, "Apa yang akan terjadi jika nilai variabel tidak disetel?" 

Akibatnya, nilai variabel tidak ditentukan (belum ditentukan). 

Contoh: 

 

Maka variable x akan bernilai undefined. 

 

2) Aturan Membuat Variabel 

➢ Penamaan variabel tidak boleh menggunakan angka di depannya. 

 

 

➢ Penamaan variabel boleh menggunakan awal underscore. 

 

➢ Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua suku kata. 

 

 

3) Menampilkan Isi Variabel 

Untuk menampilkan variabel isi, Anda dapat menggunakan banyak fungsi untuk menghasilkan 

keluaran seperti: 

➢ Fungsi console.log()  digunakan untuk mencetak javascript dalam console ; 

➢ Fungsi document.write() digunakan untuk mencetak ke dokumen HTML; 

➢ dan Fungsi alert() digunakan untuk mencetak ke jendela dialog. 

 139 

 

 

 

 

Hasilnya : 

 

Gambar 11.2 Menampilkan Alert 

 

Setelah di klik OK 

 

Gambar 11.3 Menampilkan Variabel 

 

Arti tambah (+) pada contoh di atas berarti menyambung, bukan mengalikan. 

 

  

 140 

 

 

 

4) Mengisi Ulang Variabel 

Variabel dianggap dapat diubah karena memungkinkan manipulasi data di sekitarnya (berubah). 

Contoh: 

 

Mengapa kita tidak menggunakan kata kunci var saat mengatur variabel ulang nilai? 

Karena kata "var" diperlukan saat membuat variabel saja, Sebaliknya, kita cenderung menulis 

seperti yang terlihat di atas saat ingin makan telur. Setiap kali kita menggunakan kata "var", itu 

berarti kita membuat variabel baru daripada mengubah yang sudah ada. 

11.2 TIPE DATA 

Data menurut jenisnya adalah variasi data yang dapat dicocokkan dalam suatu variabel. Ada banyak 

jenis data dalam program Javascript: 

• String (teks) 

• Integer atau Number (bilangan bulat) 

• Float (bilangan Pecahan) 

• Boolean 

• Object 

Javascript adalah bahasa dengan penekanan kuat pada pengetikan dinamis, oleh karena itu tidak 

seperti bahasa dengan penekanan kuat pada pengetikan statis seperti C, C++, Java, dan sebagainya, di 

mana tipe data harus ditentukan pada saat pembuatan variabel, tidak memerlukan ini. (harus 

mendeklarasikan tipe data). 

Contoh: 

 

Javascript akan secara otomatis mengidentifikasi jenis data yang kami berikan untuk variabel 

tersebut. 

Penjelasan Variabel contoh diatas sebagai berikut: 

• name memiliki tipe data String; 

• age memiliki data integer; 

• single memiliki data boolean. 

 

Hal ini juga dapat dibuktikan dengan menggunakan jenis kata kunci typeof. 

Contoh: 

 

Hasilnya pada console: 

 141 

 

 

 

 

Gambar 11.4 Menampilkan tipe data dengan console 

 

Bagaimana lagi kita bisa belajar tentang tipe data selain dengan menggunakan typeof? Dengan 

menggunakan metode eksekusi, kita dapat memahaminya. 

Contoh: 

 

 

11.3 OPERATOR 

Operator merupakan konsep kunci yang perlu dipahami dalam suatu program tertentu. Karena 

fakta bahwa kami akan sering menggunakannya untuk melakukan berbagai operasi di dalam zona 

berbahaya lunak. Apa operatornya? 

Misalkan ada variabel seperti ini 

 

Bagaimana cara menjumlahkan a dan b ? kita dapat menggunakan tanda plus (+).  

  

Hasil penjumlahan akan disimpan pada variable c. Itulah salah satu contoh dari operator. Operator 

adalah simbol yang digunakan untuk melakukan operasi pada satu nilai dan variabel. 

Operator program pemrograman enam jenis: 

➢ Operator aritmatika; 

➢ Operator Asignment (Penugasan); 

➢ Opeartor Perbandingan (relasi); 

➢ Operator Logika; 

➢ Operator Bitwise; 

 142 

 

 

 

➢ Operator Ternary; 

Sebenarnya disetiap Bahasa pemrograman apapun, operator wajib ada.  

 

a) OPERATOR ARITMATIKA 

Operator matematika adalah orang yang melakukan operasi matematika misalnya 

pengurangan, penjumlahan, pembagian, perkalian, dll. Operator dalam matematika terdiri dari: 

 

Contoh : 

 

Hasilnya : 

 

             Gambar 11.5 Operator Aritmatika 

 

Contoh lain yang di cetak lengkap dengan document.write 

 

 143 

 

 

 

 

 

Hasilnya : 

 

Agmbar 11.6 mencetak operator dengan document write 

 

Penggunaan tanda petik ` … ` berfungsi untuk mencetak seluruh syntac javascript. Sedangkan 

penggunaan tanda ${..} di gunakan untuk mengambil value dari variable yang ada di dalam 

kurung {}. Atau sebenarnya bisa di tulis dengan cara  

 

 

Penggabungan Teks 

Dalam Javascript, jika Anda melakukan operasi pada suatu jenis data string atau tex dengan 

menggunakan tanda tambah (+), yang terjadi adalah penggabungan, bukan tanda tambah. 

Contoh: 

 

Maka hasilnya : 

 144 

 

 

 

 

Kenapa bukan 12? Karena kedua angka yang dimaksud adalah tipe data string. Perlu diingat 

bahwa dia duduk dengan pensil. Silahkan coba syntac dibawah ini melalui console dan amati 

hasilnya: 

 

         Gambar 11.7 Penggabungan Teks 

 

b) OPERATOR PENUGASAN 

Operator penugasan adalah operator yang digunakan untuk memberi perintah pada variabel. 

Bias selalu digunakan untuk membuat variabel.  

Contoh: 

 

Variabel a memberikan instruksi untuk menambahkan angka 19. 

Operator penugasan terdiri dari:

 

Operator penugasan mirip dengan operator dalam matematika. Saya juga menggunakannya 

untuk operasi matematika. 

Contoh: 

 145 

 

 

 

 

Hasil:  

Variabel jumlahView akan bertambah satu. 

Maksudnya dari JumlahView += 1 adalah sebagai berikut : 

 

Singkatnya: 

Isi variabel "jumlahView" dengan peningkatan lebar dari nilai sebelumnya menggunakan sudut 

1++ dan — dapat digunakan untuk mengidentifikasi operator dengan armada besar dan 

fluktuatif yang ditetapkan untuk beroperasi sebagai satu kesatuan. 

Contoh: 

 

 

Sehingga nilai variabel a akan menjadi 3. Oleh karena itu, pertanyaannya adalah: Bagaimana 

hubungan operator penugasan dan operator aritmatika? Operator aritmatika hanya melakukan 

operasi yang melibatkan matematika, sedangkan operator penugasan melakukan operasi 

matematika dan pengisian. 

Berikut adalah contoh operatornya:

 

 146 

 

 

 

 

Hasilnya : 

 

Gambar 11.8 Operator Penugasan 

 

c) OPERATOR RELASI / PERBANDINGAN 

Operatur relasi ini digunakan untuk membandingkan dua bilangan dikenal sebagai operator 

perbanding atau relasi. Operator untuk perbandingan akan mengembalikan nilai boolean benar 

atau salah. 

Operator untuk koneksi terdiri dari:

 

Contoh : 

 

 

 147 

 

 

 

 

Hasilnya : 

 

Gambar 11.9 Operator Relasi 

 

Satu-satunya hal yang akan berubah saat menggunakan simbol == adalah hanya akan 

membandingkan nilainya saja. Sebaliknya, penggunaan === selain nilai, dia juga akan 

dibandingkan dengan jenis tipe data. Contoh : 

 

Mengapa Nilai B tidak benar? "4" (string) dan 4 (integer) Tipe dataanya berbeda. 

 

d) OPERATOR LOGIKA 

Untuk operasi yang melibatkan dua nilai boolean, logika operator digunakan. Operator ini 

terbuat dari : 

 148 

 

 

 

 

Contoh : 

 

Hasilnya : 

 

Gambar 11.10 Operator Logika 

 

e) OPERATOR BITWISE 

Nama operator yang digunakan untuk operasi berbasis bit adalah operator bitwise (biner). 

Operator ini terdiri dari: 

 149 

 

 

 

 

Operator ini bekerja dengan tipe data berikut: int, long, short, char, dan byte. Operator ini 

akan berpindah dari bit ke bit. Sebagai contoh, kita memiliki variabel a = 60 dan b = 13. Jika 

dibuat dalam bentuk biner, hasilnya adalah sebagai berikut: 

 

(Perhatikan biner, angka 0 dan 1) Setelah itu, operasi bitwise dilakukan. 

 

Konsensus pada dasarnya sama dengan Operator Logika. Dengan kata lain, Bitwise digunakan 

untuk mata uang. 

Agar lebih jelas, baca berikut ini: 

 150 

 

 

 

 

 

Hasilnya : 

 

Gambar 11.11 Operator Bitwise 

 

f) OPERATOR TERNARY 

Ternary adalah operatornya sekarang. Operator ternary adalah contoh operator dengan tiga 

asal bagian yang berbeda. Operator -- operator sebelumnya hanya memiliki dua kantong, yaitu 

kantong kanan dan kiri. Operator biner digunakan di sini. Ada bagian tengah, kiri dan kanan 

untuk operator trinary secara terpisah. 

 151 

 

 

 

 

Operator ternary dalam Javascript biasanya digunakan untuk membuat pernyataan if/else. 

Tanda tanya dan titik dua merupakan simbol operator untuk ternaries (?:). Bentuk dengan cara 

ini : 

 

Ketahuilah bahwa Anda dapat menyatakan suatu <kondisi> dengan ekspresi yang menunjukkan 

benar atau salah. Jika kondisi benar maka dipilih “benar”, begitu pula jika kondisi salah maka 

dipilih “salah”. Operator ini unik, karena memunculkan pertanyaan. 

 

Gambar 11.12 Operator Ternary 

 

Pada contoh di atas, “Kamu suka aku” mengacu pada pertanyaan atau kondisi yang akan 

diperiksa. Jika rahangnya kencang, katakan itu. Mirip dengan itu, tidak akan. Lebih jelasnya, saya 

akan mengatakan bahwa Anda harus melanjutkan. 

 

Hasilnya 

 

Gambar 11.3 Pernyataan Operator Ternary 

 

Jika di klik cancel  

 152 

 

 

 

 

Gambar 11.4 Pernyataan Operator Ternary dipilih cancel 

Dan jika di klik ok 

 

Gambar 11.4 Pernyataan Operator Ternary dipilih OK 

 

 

 

  

 153 

 

 

 

BAB 12 

PERCABANGAN & PERULANGAN 

 

TUJUAN : 

a. Mahasiswa Mampu Memahami dan Mengimplementasikan Percabangan dengan 

JavaScript 

b. Mahasiswa Mampu Memahami dan Mengimplementasikan Perulangan dengan JavaScript 

 

Overview : 

Pada sub Bab ini akan di bahas percabangan dan perulangan. Percabangan adalah metode 

yang digunakan untuk menyampaikan pesan ketika kondisi target program ditemui. Jumlah kondisi 

mungkin satu, dua, atau lebih. Dengan menggunakan percabangan ini, para programmer dapat 

mengendalikan maupun mengontrol arah coding dengan mudah sesuai dengan logika. 

Sedangkan perulangan merupakan Perulangan adalah jenis kontrol program yang berguna 

untuk memastikan skrip ditulis dengan benar, terutama untuk program yang menggunakan proses 

berulang-ulang. Frasa ini sering digambarkan sebagai pengulangan atau perulangan. Jadi dengan 

menggunakan perulangan, dapat menghemat space memori maupun memperingkas penulisan coding 

yang berulang – ulang. 

 

  

 154 

 

 

 

12.1 PERCABANGAN 

Apa itu percabangan dan mengapa disebut percabangan? Buat yang belum pernah belajar tentang 

algoritme dan flowchart, mungkin ini istilah yang baru pertama kali kamu dengar. Isilah ini sebenarnya 

untuk menggambarkan program alur yang bercabang. Pada flowchart, logika "jika...maka" ditampilkan 

dalam bentuk cabang. 

 

Gambar 12.1 Percabangan 

 

Ini disebut sebagai cabangan. Struktur ini selain di sebut sebagai percabangan juga disebut 

dengan Kontrol  decision, flow, struktur kondisi, structure if, dan sebagainya. Percabangan akan dapat 

membuat perangkat lunak responsif dan memberikan data sesuai dengan kondisi yang kami tentukan. 

Ada enam jenis cabang dalam Javascript yang perlu dipahami. 

 

a) Percabangan if 

Merupakan jenis percabangan yang hanya memiliki satu blok pilihan bila keadaan sudah stabil. 

Pertimbangkan diagram alur berikut: 

 

Gambar 12.1 Percabangan IF 

 

 155 

 

 

 

Flowchart di bawah ini dapat dibaca seperti ini: "Jika seluruh pembelian Anda melebihi Rp 100.000, 

maka ucapkan "Selamat", dan Anda berhak mendapatkan hadiah." Bagaimana jika saya memiliki 

100.000 rupiah? 

Sehingga pesan tidak tersampaikan. 

Contoh dalam program Javascript: 

 

Hasilnya : 

Jika kurang dari 100000 

 

Gambar 12.3 Contoh 1 Input Percabangan IF 

 

 

Gambar 12.4 Contoh 1 Output Percabangan IF 

 

Jika lebih dari 100.000 

 

 156 

 

 

 

Gambar 12.5 Contoh 2 Input Percabangan IF 

 

   Gambar 12.6 Contoh 2 Output Percabangan IF 

 

Perhatikan : 

 

Ini disebut sebagai blok. Blok program ditulis dalam Javascript, yang diawali dengan kalimat “Buka 

Kurung Kurawal” dan diakhiri dengan kalimat “Tutup Kurung Kurawal”. Jika hanya ada satu 

ekspres atau frase dalam satu blok, mungkin tidak perlu mencetak lengan kemeja. 

 

Jika hanya ada satu baris ekspresi atau kalimat dalam satu blok, tanda kurung boleh tidak di tulis. 

 

b) PERCABANGAN IF – ELSE 

If/else percabangan adalah contoh percabangan dengan dua blok masukan. Pilihan pertama 

untuk kondisi yang parah, dan Pilihan kedua untuk kondisi yang ringan (selain itu). Perhatikan 

flowchart berikut: 

 

Gambar 12.7 Percabangan IF – Else 

 

 157 

 

 

 

Ini adalah diagram alur untuk pembuatan kata sandi. Jika kata sandi benar, pesan "Selamat 

Datang Bos!" akan ditampilkan pada blok pesan tersembunyi." Tetapi jika Anda login, Anda akan 

mendengar pesan berikut: "Password, salah, coba lagi!" Kemudian, karena itu bukan bagian dari 

percabangan blok if/else , pesan yang saat ini berada di blok abu-abu akan dilaporkan kembali. 

Perhatikan busur panah, setiap blok harus bergerak ke tengah. 

 

Gambar 12. 8 Penegasan Percabangan If – else 

 

Silahkan simak program dibawah ini ! 

 

Hasilnya 

Jika diisi password salah 

  

Gambar 12.9 Contoh if-else dengan value salah 

 

Jika diisi dengan password yang benar 

 158 

 

 

 

  

Gambar 12.10 Contoh if-else dengan value benar 

 

c) PERCABANGAN IF – ELSE – IF 

If/else/if adalah jenis klausa yang memiliki lebih dari dua blok klausa. Lihat diagram alur di bawah 

ini: 

 

Gambar 12.11 Percabangan If – Else - If 

Perhatikan blok yang memiliki sinyal peringatan. Ini adalah blok untuk klausa if-else-if. Sejumlah 

blok yang Anda inginkan dapat ditambahkan. 

Contoh : 

 159 

 

 

 

 

Hasilnya : 

      

Gambar 12.12 Contoh Percabangan If – Else – If 

 

Karena hanya ada satu baris perintah dalam program di atas, kami tidak menggunakan kurung 

kurawal untuk membuat blok kode if/else/if. Yaitu, grade = …. 

Jika kita menggunakan kurung kurawal, maka program diatas akan terlihat seperti ini :

 

 160 

 

 

 

 

 

d) PERCABANGAN SWITH – CASE 

Klausa switch/case adalah jenis alternatif dari klausa if/else/if.. Strukturnya seperti ini: 

 

Kami dapat membuat kasus (case) yang diinginkan di kotak saklar. Pada <value>, Anda dapat 

membandingkan nilai saat ini dengan nilai masa depan variabel. Setiap kasus harus dimulai 

dengan jeda. Selama pihak yang gagal masih memimpin, tidak perlu membuka segel. Istirahat 

diperlukan agar program tetap fokus pada kasus berikutnya setelah kasus selesai. 

Contoh: 

 

 161 

 

 

 

 

Haslinya : 

 

Gambar 12.13 Contoh switch Case 

 

Selain itu, sakelar atau kasing dapat dibuat dengan cara yang sama: 

 

1. Berikan nilai sebenarnya ke sakelar sehingga program dapat memasuki blok sakelar. 

2. Kemudian, di dalam blok sakelar, buat kondisi dengan menggunakan casing. 

Hasilnya akan sama seperti dalam kasus pernyataan if/else/if. 

 

e) PERCABANGAN DENGAN OPERATOR TERNARY 

Percabangan if/else adalah bentuk lain dari percabangan yang menggunakan operator ternary. 

Bentuk singkatnya dari if/else bisa dibilang. 

Contoh: 

 162 

 

 

 

 

Fungsi toUpperCase() berfungsi untuk mengonversi teks yang dimasukkan menjadi huruf kapital 

semua. 

 

Gambar 12.14 Contoh Operator Ternary Benar 

 

 

Gambar 12.15 Contoh Operator Ternary Salah 

 

Opertor ternary berperan sebagai percabangan if/else: 

 

Jika kondisi yang berada di kurung seperti—(jwb.toUpperCase() == "IYA")— memiliki nilai true, 

maka jawaban variable akan sama dengan ‘Benar’. 

Namun jika bernilai false, maka jawaban variable akan bernilai ‘Salah’. 

 

f) PERCABANGAN BERSARANG (NESTED) 

Selain itu, di dalam setiap cabang cabang, Anda dapat membuat blok cabang cabang. Ini disebut 

sebagai nested if atau bersarang. 

Contoh: 

 163 

 

 

 

 

 

Hasilnya : 

 

 

Gambar 12.16 Contoh Operator Bersarang Benar 

 

 

Jika salah 

 

 

Gambar 12.17 Contoh Operator Bersarang Salah 

 164 

 

 

 

 

Namun demikian dalam menyusun syntac seperti diatas sebenarny ada cara lain (tidak 

menggunakan perulangan bersarang), namun menggunakan operator logika “&&” seperti : 

 

 

12.2 PERULANGAN 

Perulangan, atau kadang-kadang disebut sebagai "looping", adalah proses yang dilakukan 

secara diam-diam di latar belakang batas yang sudah dipahami. Menggunakan proses perulangan 

dapat membuat penulisan kode komputer menjadi lebih efektif. Jika di minta untuk mencetak tulisan 

secara berulang “Universitas Stekom” di website sebanyak 10 kali, mungkin ada yang akan membuat 

dengan perintah : 

 

Memang tidak salah dengan menggunakan teknik seperti diatas, namun demikian hal tersebut akan 

membuat syntac menjadi panjang, apalagi jika disuruh mencetak sebanyak 1000 kali. Hal tersebut 

dapat diatasi dengan teknik Perulangan. 

Tidak peduli seberapa banyak Anda tahu, perulangan akan membantu Anda menggunakan 

kode berulang-ulang. Ada tiga jenis ulang dalam Javascript. Biasanya, perulangan ini terbagi menjadi 

dua. Loop yang tidak dapat dihitung dan dapat dihitung. 

Perbedaanya: 

Counted Loop adalah modul perl yang jelas dan sudah memiliki banyak perulangannya.  

Uncounted Loop adalah permutasi yang membuat tidak jelas seberapa sering pengguna harus 

mengulangnya. 

Perulangan yang merupakan Counted Loop: 

➢ Perulangan For 

➢ Perulangan Foreach 

➢ Perulangan Repeat 

 

Perulangan yang merupakan Uncoundted Loop: 

➢ Perulangan While 

➢ Perulangan Do/WHile 

 

  

 165 

 

 

 

1) PERULANGAN FOR 

Perulangan untuk adalah perulangan yang sering dijumpai dalam lingkaran tertutup karena sudah 

jelas seberapa sering akan terjadi. 

 

Gambar 12.18 Perulangan 

 

Contoh codingnya : 

 

Penting untuk mengetahui kondisi yang ada pada pakaian setelah kata for. 

Kondisi ini akan berarti: 

➢ Hitungan berawal dari angka 0 (i=0); 

➢ Sampai angka berapa hitungannya? Sampai I < 10; 

➢ Kemudian setiap perulangannya i akan ditambah dengan +1 (i++); 

 

Fungsi variabel I dalam perulangan for adalah menghitung nilai hitungan. 

Dan masing-masing memiliki perulangan. saya selalu diam. Karena kita sudah membahasnya di 

bagian i++. 

hasil keluaran: 

 166 

 

 

 

 

Gambar 12.18 Contoh Perulangan 

 

Perlu diketahui juga nama variable tidak harus “i”, anda bisa mengganti dengan nama lain, 

contoh : 

  

Nama variable menggunakan “counter” dan syntac tersebut memulai perulangan dari nol lalu di 

setiap perulangan nilai variable counter akan di tambah 3 (counter+3). 

Hasilnya : 

 167 

 

 

 

 

Gambar 12. 19 Contoh Perulangan +3 

 

Apa jadinya jika counter perulangannya dari akanga terbesar ke terkecil? Hal ini biasanya 

dilakukan saat mencoba menghitung mundur. Caranya isi harga pembukaan loket dengan harga 

pasaran. Misalnya akan dimulai dari 10 dan turun menjadi 0. Pada counter, kita mulai 

menghitung dengan 10. Ketika kondisi perbandingan berubah, kita menghasilkan counter > 0. 

Artinya perulangan akan dilakukan selama nilai counter lebih besar dari 0. Selanjutnya, di setiap 

perulangan, idi dengan cara mengubah pencacah menjadi nilai (-1) atau (counter--). Contoh :  

 168 

 

 

 

 

Hasilnya : 

 

Gambar 12.20 Contoh Perulangan Decrement 

 

Mengapa tidak berakhir pada nol (nol)? Menurut kondisi yang kita gunakan, pencacah adalah > 

0. Jika pencacah disetel ke nol, asumsi akan salah. Namun, jika kita menggunakan operator yang 

lebih dekat hubungannya dengan (>=), maka syaratnya akan terpenuhi jika pencacahnya nol. 

 

2) PERULANGAN WHILE 

Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted loop. 

Perulangan sekaligus dapat menjadi perulangan yang terhitung loop dengan memberikan 

counter di dalamnya. 

 

Gambar 12.21 Perulangan While 

 

 169 

 

 

 

Misalnya  

 

Syntac diatas akan mencetak hello word pada console sebanyak banyaknya tanpa henti (ini 

disebut sebagai invinite loop / perulangan tanpa batas). Bagaimana kita memberikan batas ? 

pertama dengan cara confirm user 

 

Gambar 12.22 Perulangan dengan Confirm 

 

Cara kedua dengan mengunakan program 

 

Gambar 12.23 Perulangan denganProgrman 

 

Increment = Penambahan 

Decrement = Pengurangan 

 

Gambar 12.24 Perulangan dengan In/Decrement 

 

Contoh program : 

 

 170 

 

 

 

 

Atau bisa juga di tulis dengan  

 

Hasilnya  

 

Gambar 12.25 Contoh Program perulangan confirm 

 

Jika Anda mengklik OK, pesan akan menampilkan confirm itu lagi sambil menghitung jumlah 

counter nya (berapak kali di klik OK), namun jika di klik cancel maka akan menampilkan hitungan 

perulangan  

 

Gambar 12.26 Contoh Program perulangan confirm OK 

 

Silahkan perhatikan : 

 

Selama variabelnya benar, akan ada bahaya. Kemudian kami menggunakan fungsi confirm() untuk 

menampilkan dialog konfirmasi. Selama kita memilih "Ok" di popup konfirmasi, nilai variabel 

 171 

 

 

 

ulangi akan tetap benar. Namun, jika Anda memilih Cancel, nilai variabelnya akan salah. Ketika 

status ulang variabel salah, perulangan akan diamati. 

 

3) PERULANGAN DO – WHILE 

Mirip dengan perulangan sementara, perulangan dilakukan. Hal yang sama berlaku: Do/while 

akan melakukan perulangan sekali lagi sebelum memeriksa kondisi di dalam suit while. 

Bentuk dengan cara ini: 

 

Jadi perbedaan nya : 

“Perulangan do/while akan mengecek kondisi di belakang (sesudah mengulang), sedangkan 

while akan mencek kondisi di depan atau awal (sbelum mengulang)”. 

 

Contoh : 

 

Hasil jika di bandingkan dengan perulangan while jika sama – sama di klik cancel 

Do while 

 

Gambar 12.27 Perulangan do while 

 

  

 172 

 

 

 

While 

 

Gambar 12.28 Perulangan while 

 

4) PERULANGAN FOREACH 

Biasanya, perilangan foreach digunakan untuk memindai item dalam array. Loop ini adalah loop 

terhitung karena jumlah loop akan dikurangi dengan panjang dari array. Ada dua cara 

menggunakan foreach perulangan di Javascript: 

- Gunakan “for” dengan operator “in” 

- Gunakan “method forEach()” 

 

Contoh: 

 

Berikut beberapa contoh ekspresi "foreach" tanpa operator “in”:  

 

Dengan menggunakan operator seperti ini, perilangan yang sekarang bisa dibuat lebih kuat: 

 

Kedua syntac diatas menjadi seperti ini : 

 

Gambar 12.29 Perulangan foreach 

 

Pendekatan kedua untuk membuat perulangan masing-masing adalah dengan menggunakan 

fungsi forEach() dari sebuah array. 

Contoh : 

 173 

 

 

 

 

Parameter fungsi callback dari metode forEach(). Terbukti, Anda dapat menggunakan fungsi 

panah seperti ini: 

 

Hasilnya  

 

Gambar 12.30 contoh perulangan foreach 

 

  

 174 

 

 

 

5) PERULANGAN DENGAN METODE REPEAT() 

Perulangan dengen metode atau fungsi repeat() termasuk dalam loop penghitungan 

perulangan. Fungsi ini khusus digunakan untuk mengedit satu tulisan (string). Bisa dikatakan: Ini 

adalah single dari perulangan for. 

Contoh: 

Dalam hal kami mempekerjakan perulangan untuk: 

 

Jika gunakan metode repeat maka akan seperti  

 

Hasilnya 

 

Gambar 12.31 Perulangan repeat 

 

PAHAMI ! 

Contoh program perulangan lain (Perulangan Bersarang) 

Kita bisa membuat perulangan di blok perulangan. Ini disebut sebagai loop bersarang, loop sarangi, 

atau loop di dalam loop. 

Mari, silakan baca yang berikut ini: 

 

Hasilnya  

 175 

 

 

 

 

Gambar 12.32 contoh 2 perulangan bersarang 

 

Dalam perulangan tersebut di atas, kami menggunakan dua perulangan untuk. Perulangan pertama 

menggunakan Variabel I sebagai Counter, sedangkan Perulangan kedua menggunakan Variabel J 

sebagai Counter. 

 

Dengan kata lain: 

 

Hasilnya : 

 176 

 

 

 

 

Gambar 12.33 contoh 3 pernytaan perulangan bersarang 

 

Seberapa kali anda melakukan perulangan dengan klik OK, setelah anda klik cancel maka akan di 

tmpilkan jumlah perulangan namun berupa tanda bintang 

 

Gambar 12.34 contoh 3 hasil perulangan bersarang 

 

Catatatn : “Bila perulangan lebih banyak, maka komputer akan lebih lama memprosesnya. Tentu ini 

akan membuat website atau aplikasi kita berjalan lambat. Untuk itu, gunakan perulangan dengan 

bijak”. 

  

 177 

 

 

 

BAB 13 

STRUKTUR DATA ARRAY & DOM 

 

TUJUAN : 

a. Mahasiswa Mampu Memahami dan Mengimplementasikan Struktur Data Array di 

JavaScript 

b. Mahasiswa Mampu Memahami dan Mengimplementasikan Program JavaScript dengan 

Menggunakan DOM 

 

Overview : 

Menyimpan beberapa value dalam satu variable bisa di lakukan dengan teknik data Array. 

Pada sub bab ini nanti akan di bahas cara menyimpan value lebih dari satu ke dalam satu variable. 

Serta juga akan di bahas cara menampilkan data urut berdasarkan index dan mengupdate atau 

menghapus value pada index ke sekian. 

Pada paragraf ini juga akan dibahas DOM (Document Object Model). Tugas pertama dan 

terpenting Javascript di web adalah membuat header situs web yang dinamis. Ini dapat dilakukan 

dengan Javascript menggunakan DOM. Singkatan DOM adalah singkatan dari Document Object 

Model. Dengan demikian, dokumen HTML yang dimodelkan setelah objek. 

  

 178 

 

 

 

13.1 STRUKTUR DATA ARRAY 

Metode atau proses yang digunakan untuk menyimpan data dalam memori komputer disebut 

struktur data. Satu-satunya struktur data yang sering digunakan dalam program adalah array. Saat kita 

membuat aplikasi online yang akan menampilkan banyak data seperti contoh di bawah ini 

 

Cara menampilkan data dengan teknis diatas boleh saja dilakukan, namun cara tersebut 

kurang efektif. Misalkan nanti ada 100 data atau produk yang akan di tampilkan maka kita harus 

membuat variable sebanyak 100x dan juga mencetak document.write sebanyak 100x. ada cara lain 

agar penulisan coding lebih sederhana, yaitu dengan menggunakan array. 

Struktur data yang dikenal sebagai array digunakan untuk mengelompokkan semua data di 

satu lokasi. Setiap elemen data dalam Array memiliki indeks, sehingga memudahkan kita untuk 

memahaminya.

 

Gambar 13.1 Ilustrasi Data Array 

 

Indeks array terus berkembang dari angka nol (0). Batas atas array akan didorong oleh banyaknya data 

yang disertakan di dalamnya. 

 

a) Cara Membuat Array pada Javascript 

Dalam pemrogrman javascript, array ini dapat dbuat dengan symbol kurung siku […] 

Misal: 

 

Oleh karena itu berbagai item akan memiliki bermacam-macam pilihan. Setelah memasukkan data ke 

dalam array, setiap titik data kemudian direpresentasikan dengan tanda koma (,). 

Contoh: 

 

Javascript memilika sifat dynamic typing yang memungkinkan kita dapat menampung atau mencampur 

type data apapun di dalam array. 

Contoh : 

 

 179 

 

 

 

 

b) Cara Mengambil Data dari Array 

Array akan menambahkan semua data dan memberinya nomor indeks sehingga mudah diakses. 

Indeks array secara konsisten menyusut dari node 0. Pertimbangkan bahwa kita memiliki array yang 

mirip dengan ini: 

 

Bagaimana cara kita mengambil nilai "Mie Ayam"? 

Jawabannya seperti ini: 

 

Perlu diingat index dimulai dari angka 0. 

Contoh : 

 

Hasilnya  

 

Gambar 13.2 Contoh Menampilkan Index Array 

 

Mencetak isi Array dengan perulangan 

Disaat kita akan menampilkan seluruh isi data yang ada di array, bisa menggunakan teknik seperti  

 

Namun demikian, jika data yang akan di tampilkan jumlahnya 100 data maka synctak akan menjadi 

panjang sekali. Maka dari itu dapat menggunakan teknik seperti contoh  

 180 

 

 

 

 

Hasilnya  

 

Gambar 13.3 Contoh menampilkan data array dengan perulangan for 

 

Perhatian! 

Gunakan properti length untuk membuat array panjang pada contoh di atas. Ada 4 data dalam produk 

array, sehingga panjang properti menjadi 4. Kemudian gunakan properti ini untuk mengurangi jumlah 

pengulangan di lapangan. 

 

Kemudian, di dalam blok untuk, kami mengevaluasi produk menggunakan indeks yang sesuai dengan 

variabel i. 

Contoh cara lain menampilkan data array dengan forEach 

 181 

 

 

 

 

Hasilnya : 

 

Gambar 13.4 Contoh menampilkan data array dengan perulangan foreach 

 

c) Cara Menambahkan Data ke Dalam Array 

Ada dua metode yang dapat digunakan untuk menambahkan data ke array: 

- Mengisi menggunakan indeks,  

- Mengisi menggunakan metode push (). 

 

Contoh Mengisi dengan database 

Sebagai contoh, ini adalah array yang kita miliki: 

 

Ada tiga data dalam array dengan indeks: 

0 = Apel,  

1 = Jeruk,  

2 = Manggis. 

Jika Anda ingin menambahkan lebih banyak data ke indeks ke-3, Anda dapat melakukannya dengan 

menggunakan sintaks berikut: 

 182 

 

 

 

 

Sekarng array buah akan berisi 4 data. 

Contoh dalam program : 

 

  Gambar 13.5 menambahkan data array  

 

 

"Semangka" berhasil dimasukkan ke dalam array buah. Satu-satunya kelemahan metode ini adalah 

Anda perlu mengetahui jumlah titik data atau ukuran array sebelum Anda dapat menambahkan lebih 

banyak. 

Jika kita memasukkan angka yang benar untuk indeks sembarangan, maka data yang ada di indeks 

tersebut akan dihapus. 

 

        Gambar 13.6 mengupdate data array 

 

Terdapat teknik lain agar programmer tidak perlu mengetahui berapa jumlah data didalam array nya. 

Disini dapat menggunakan method push(). Method push() ini akan menambahkan data kedalam ekor 

array atau pada bagian belakang sendiri. 

Contoh : 

 183 

 

 

 

 

Hasilnya 

 

Gambar 13.7 menambahkan data array paling belakang 

 

Kita juga bisa menambahkan beberapa data sekaligus dengan cara seperti ini: 

 

 

d) Cara Menghapus Array 

Mirip dengan menambahkan data ke array, penghapusan data dapat dilakukan dengan salah satu dari 

dua cara. 

- Gunakan delete;  

- Gunakan method pop (). 

Contoh menggunakan delete 

 

 

Gambar 13.8 menghapus data array  

 

Dengan tombol hapus, Anda dapat menghapus nomor indeks tertentu dari data. Sebaliknya, 

pop() akan mengembalikan data dari belakang. Jika terjadi penghapusan, dia akan memasukkan ruang 

kosong ke dalam array. Akibatnya, sangat tidak mungkin Akerna Array akan terus memiliki Panjang 4. 

Metode pop() digunakan dalam pemanggilan metode kedua untuk membalik metode push(). 

Array yang ada di bagian bawah metode pop() akan dihancurkan. Dalam Javascript, array dapat 

digunakan sebagai tumpukan (tumpukan) yang memiliki simbol LILO (Last in Last out). 

 184 

 

 

 

 

Gambar 13.9 ilustrasi menambahkan dan mengurangi data array  

Contoh  

 

Gambar 13.10 contoh menambahkan dan menghapus data array  

 

Jika kita menggunakan fungsi pop() lebih dari tiga kali, array hanya akan menyertakan data [apel]. Data 

awal dalam array adalah empat. Metode pop() akan menghapus nilai yang tidak valid atau hilang dari 

array. 

 

e) Menghapus Data dari Depan 

Dengan menggunakan metode shift, Anda juga bisa mendapatkan data dari masa lalu (). 

Contoh: 

 

Maka data yang terhapus adalah "Mawar". 

 

 185 

 

 

 

f) Menghapus Data pada Indeks Tertentu 

Jika Anda ingin memasukkan data ke dalam tinta saat ini, Anda harus menggunakan fungsi atau metode 

penyambungan (). Ada dua parameter yang diperlukan untuk fungsi ini: 

 

 

Keterangan: 

- <indeks> adalah indeks dari data dalam array yang akan dimusnahkan; 

- <total> adalah jumlah data yang akan dikumpulkan dari indeks tersebut di atas. 

Untuk hanya memproses satu bagian data pada satu waktu, merupakan praktik standar untuk 

mengganti seluruh angka dengan 1. 

Contoh: 

 

Pada console : 

 

Gambar 13.11 menghapus data array paling depan 

 

Pada contoh di atas, jika kita tidak menentukan data “<total>" yang akan hilang, maka semua data dari 

indeks "pilih" juga akan hilang. 

 

g) Mengubah isi Array 

Mengubah isi array dapat dilakukan dengan cara berikut 

 

Maka "Kotlin" akan diganti dengan "C++". 

Percobaan pada console: 

 186 

 

 

 

 

Gambar 13.12 contoh mengganti  data array 

 

h) Method-mothod Array 

Selain metode atau fungsi yang sudah kita bahas, ada beberapa metode dalam array yang perlu kita 

pahami. 

 

  

 187 

 

 

 

1) Method filter() 

Fungsi metode filter() adalah untuk mengekstrak data dari array. Parameter wajib untuk metode 

filter() adalah fungsi panggilan balik, sama seperti untuk metode forEach(). 

Contoh: 

 

Hasilnya : 

 

Gambar 13.13 method filter array 

 

Pada contoh di atas, kami menyediakan fungsi panah sebagai fungsi callback yang akan melakukan 

pensinyalan terkait array. Karena itu, Anda dapat membuat sesuatu yang jauh lebih rumit dari ini:

 

 

2) Method includes() 

Tujuan dari metode ini adalah untuk menentukan apakah sepotong data ada dalam array atau 

tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di 

dalam array. 

Contoh: 

 

 188 

 

 

 

Hasilnya : 

 

Gambar 13.14 method includes array 

 

3) Method sort() 

Method sort() Berfungsi untuk memasukkan data ke dalam array. 

Contoh: 

 

Hasilnya  

 

Gambar 13.15 method sort array 

 

13.2 DOM (Document Object Model) 

Belajar JavaScript pada intinya terdiri dari dua bidang utama, yaitu JavaScript Inti (juga dikenal 

sebagai Core JavaScript) dan API yang disediakan oleh web browser (yang dikenal dengan istilah DOM, 

singkatan dari Document Object Model). 

"Bahasa Pemograman JavaScript" adalah nama resmi untuk Core JavaScript, juga dikenal 

sebagai JavaScript inti. Pada bagian Core JavaScript inilah kita akan belajar tentang aturan 

 189 

 

 

 

pemograman yang umumnya dipelajari seperti cara mendefinisikan variabel, perbedaan tipe data, cara 

membuat array, cara menulis struktur IF, dan cara membuat objek. 

Bab Inti JavaScript membahas tata bahasa atau "bahasa" JavaScript. Tidak akan terlalu sulit 

untuk memahami aturan penyisipan JavaScript jika Anda pernah menggunakan bahasa pemrograman 

seperti C++ atau PHP. Perbedaan JavaScript dengan bahasa pemrograman lainnya adalah JavaScript 

lebih fokus pada objek. Namun, JavaScript "tidak mengharuskan" menggunakan objek. Ucapkan "tidak 

harus" karena Anda dapat membuat beberapa program menggunakan kode yang berfungsi sempurna 

tanpa menggunakan objek. Berikut ini adalah fungsi peringatan. 

Core JavaScript adalah implementasi lain dari JavaScript yang tidak kompatibel dengan 

"lingkungannya"—browser web. Sampai saat ini, JavaScript hanya dikenal sebagai bahasa skrip sisi 

klien yang digunakan di browser web. Namun demikian, perkembangan JavaScript saat ini 

menghambat penggunaannya di server (salah satunya dengan menggunakan node.js). 

 

a) PENGERTIAN DOM 

Tugas pertama dan terpenting Javascript di web adalah membuat header situs web yang 

dinamis. Ini dapat dilakukan dengan Javascript menggunakan DOM. Singkatan DOM adalah singkatan 

dari Document Object Model. Dengan demikian, dokumen HTML yang dimodelkan setelah objek. 

Objek dari dokumen ini menawarkan berbagai fungsi dan atribut/data yang dapat kita gunakan 

untuk membuat program Javascript. Disebutkan bahwa API (Application Programming Interface). 

 

Gambar 13.16 Ilustrasi DOM (sumber : petanikode.com) 

 

- DOM bukan hanya untuk dokumen HTML. Selain itu, DOM dapat digunakan untuk 

membuat dokumen dalam format XML dan SVG. 

- DOM tidak hanya didukung oleh Javascript; itu juga didukung oleh bahasa pemrograman 

lain. 

 

1) Bagaimana Menggunakan DOM ? 

Seperti yang sudah kita ketahui, tujuan dari DOM adalah untuk memodelkan dokumen 

HTML. Dokumen adalah nama objek DOM Javascript. Objek ini berisi semua informasi yang 

 190 

 

 

 

diperlukan untuk membuat HTML. Jika kita memilih untuk membuka dokumen dalam 

Javascript di konsol, maka kode HTML akan ditampilkan. 

 

Pada dokumen objek terdapat atribut dan fungsi yang dapat digunakan dalam 

mengelola dokumen HTML. Seperti misalnya fungsi dokumen, tulis (). 

Fungsi ini dapat digunakan dalam menambahkan konten ke dokumen HTML. 

Misalnya, Anda dapat mengetikkan kode berikut ke editor Javascript atau editor teks. 

 

 

hasilnya : 

 

Gambar 13.17 menggunakan DOM 

 

  

 191 

 

 

 

b) DOM SELECTOR / MENGAKSES ELEMENT HTML 

Objek ini adalah contoh dari dokumen HTML. Objek ini memiliki semua fungsi dan atribut 

elemen HTML dan dapat ditampilkan dalam format pohon berikut: 

 

Gambar 13.18 Objek DOM 

 

Fitur objek model JavaScript menyediakan semua alat yang diperlukan untuk membuat HTML dinamis: 

- JavaScript memiliki kemampuan untuk memodifikasi setiap elemen HTML di halaman 

- JavaScript dapat memodifikasi setiap atribut dalam dokumen HTML. 

- JavaScript memiliki kemampuan untuk Mengubah semua aturan CSS dalam dokumen 

- Menghapus elemen dan atribut HTML yang ada 

- Menambah elemen dan atribut HTML baru  

- Bertentangan dengan semua kebijakan HTML yang ada dalam dokumen  

- Membuat acara HTML baru dalam dokumen 

 

Ada beberapa fungsi yang dapat digunakan jika Anda ingin mendapatkan elemen saat ini: 

- getElementById() berfungsi untuk memilih elemen berdasarkan id atribut. 

- Fungsi getElementByName() digunakan untuk mencari elemen berdasarkan nama 

atribut. 

- getElementByClassName() memiliki fungsi menemukan elemen berdasarkan atribut 

kelas. 

- getElementByTagName() digunakan untuk mengidentifikasi orang berdasarkan nama 

tag mereka. 

- getElementByTagNameNS() memiliki fungsi menemukan elemen berdasarkan nama tag. 

- querySelector() memiliki fungsi memilih elemen berdasarkan input. 

- fungsi querySelectorAll() untuk memilih elemen berdasarkan input. 

- Dan Lain Lain. 

 

Penggunaan fungsi yang disebutkan di atas untuk mengakses elemen yang ditargetkan sangat 

umum. 

Contoh: 

Katakanlah kita memiliki kode HTML seperti ini: 

 192 

 

 

 

 

Jadi, untuk menemukan elemen yang dimaksud di Javascript, gunakan fungsi getElementByI() 

sebagai berikut: 

 

Variabel instruksional akan menjadi sebuah objek bagi DOM dari elemen yang dpilih. 

contoh lebih lengkap: 

 

Index.html 

 

Hasilnya 

 

Gambar 13.19 Contoh Program DOM 

 

Seperti yang ditunjukkan pada contoh di atas, kami menggunakan seseorang dengan 

fungsionalitas dokumen. getElementById(). Kemudian buat objek untuk elemen yang disebutkan 

 193 

 

 

 

di atas. Setelah itu, Anda dapat melakukan apa pun yang Anda inginkan, seperti mengedit teks 

dan gaya CSS. 

Pertanyaan selanjutnya: Apa yang akan terjadi jika ada lebih dari satu elemen yang dipilih? 

Idealnya, Anda harus memilih elemen berdasarkan nama tag atau atribut khusus lainnya. 

Jawabannya: Elemen yang masuk akan menjadi array. Karena kami memiliki berbagai elemen. 

Baris ini akan menyertakan objek DOM yang terdiri dari anggota populasi yang relevan. 

 

Contohnya: 

 

Pada contoh di atas, kita memiliki tiga paragraf lengkap dengan paragraf yang menamai siswa. 

Kemudian kita akan mencoba mengakses paragraf selanjutnya menggunakan Javascript 

menggunakan fungsi atau method getElementByClassName(). 

Hasilnya kemudian dilaporkan ke konsol Javascript. 

Sebagai hasilnya, 

 194 

 

 

 

  

Gambar 13.20 Contoh 2 Program DOM 

 

Akan ada tiga objek DOM dari paragraf yang terkandung dalam array yang akan berisi paragraf 

variabel. 

Kami akan bereksperimen dengan mengubah peringatan tekton dari paragraf pertama. 

Paragraf pertama akan berakhir pada indeks posisi ke-0 di dalam array. 

Lihat tip konsol Javascript berikut: 

 

Kami menggunakan fungsi setInterval() dan setTimeOut() untuk menentukan durasi animasi. 

Dalam kode tersebut, rentang waktu (interval) adalah 1000 menit atau satu hari. Namun, 

dibutuhkan 500 milidetik atau 0,5 hari untuk mengubah peringatan menjadi ancaman nyata. 

Hasil: 

 195 

 

 

 

 

Gambar 13.21 COntoh 3 Program DOM 

 

c) MEMBUAT ELEMEN DENGAN DOM API 

Selain itu, DOM menyediakan fungsi untuk membuat elemen HTML. Fungsi pertama disebut 

createElement (). 

Contoh: 

 

Maka, akan tercipta elemen <p> baru. Tapi, itu tidak akan dipublikasikan di situs web. 

Kenapa tidak dilaporkan? Karena kita belum menambahkannya ke badan dokumen. Untuk 

melampirkannya ke badan dokumen, Anda dapat menggunakan fungsi add (). 

Contoh: 

 

Hasilnya 

: 

 196 

 

 

 

 

   Gambar 13.22 Contoh Membuat Elemen dengan DOM API 

 

d) MENGHAPUS ELEMEN DENGAN DOM API 

Jika sekarang Anda menggunakan fungsi append() untuk menambahkan elemen, maka Anda 

harus menggunakan fungsi hapus untuk menghapus elemen dari daftar (). 

Berikut ini contohnya: 

 

 

hasilnya : 

 197 

 

 

 

 

Gambar 13.23 Contoh Menghapus Elemen dengan DOM API 

 

Elemen berhasil diunduh dari situs web, tetapi masih ada di memori. Catatan : Anda bisa 

mencoba menghapus perintah pada JS  line 17 :    Hapus.remove(); maka pesan h2 akan di 

tampilkan. 

 

e) CONTOH PROGRAM YANG MEMANFAATKAN DOM 

Kami tahu cara mengakses elemen menggunakan DOM, dan kami juga memahami cara 

memperkuat dan menciutkan elemen. Jika pembicara tampak goyah, jalankan program contoh 

berikut: 

  

 198 

 

 

 

Index.html 

 

Hasilnya : 

 

Gambar 13.24 Contoh Progam Yang memanfaatkan DOM 

  

 199 

 

 

 

f) DOKUMEN DOM 

Menemukan Elemen HTML 

 

Mengubah Elemen HTML 

 

Anda bisa melihat dokumen DOM yang lebih lengkap di situs w3school pada : 

https://www.w3schools.com/js/js_htmldom_document.asp 

 

  

 200 

 

 

 

BAB 14 

MEMBUAT ANIMASI SEDERHANA  

DENGAN CSS 

 

TUJUAN : 

a. Mahasiswa Mampu Memahami Animasi dengan CSS dan JavaScript 

b. Mahasiswa Dapat Membuat Animasi dengan CSS dan JavaScript 

 

Overview : 

Tampilan sangat mempengaruhi kenyamanan dari seorang pengunjung website. 

Menambahkan animasi yang tidak berlebihan juga mampu memberikan kesan hidup di tampilan 

website kita. Pada BAB ini akan di ajarkan membuat animasi frame, keyframe serta animasi membuat 

tulisan dengan menggunakan CSS dan Javascript. 

 

  

 201 

 

 

 

14.1 MEMBUAT ANIMASI TRANSISI 

Pada sub poin ini akan di ajarkan cara membuat efek transisi dengan menggunakan CSS dan javascript 

dimana dalam selector javascriptnya menggunakan teknik DOM. Ikuti langkah – langkah di bawah ini 

a) TRANSISI DENGAN CSS 

1) Buat dokumen HTML seperti di bawah ini dan koneksikan ke CSS 

index.html 

 

 

Style.css 

 

Hasilnya  

 

          Gambar 14.1 Animasi Transisi 

 

2) Berikan atribut hover dan active pada id kotak 

 

 202 

 

 

 

Lihatkan hasilnya 

 

Gambar 14.2 Hasil Animasi Transisi Warna 

 

3) Perubahan warna sangat begitu cepat. Kita dapat menambahkan efek transisi seperti berikut 

ini pada style #kotak 

 

4) Silahkan lihat perubaahannya. Ada beberapa property transisi selain yang di contohkan di 

atas. Contoh property lain anda dapat lihat di bawah ini dan silahkan bereksperimen 

mencoba nya. 

CSS Properti yang dapat dianimasikan : 

 

 203 

 

 

 

Contoh ketika mencoba property lain anda tidak perlu menulis ulang property dalam 

css. Cukup Anda tambahkan value property yang akan anda coba di belakang value 

background-color dengan di pisahkan dengan tanda koma  

 

- Pada value transition-delay (panah kuing) hanya di tulis 1 value. Hal tersebut dapat di 

lakukan jika kita menghendaki property background-color dengan width memiliki nilai 

atau value yang sama. 

- Pada bagian hover dan active jangan lupa di berikan proprety width dengan valuenya 

(panah putih). 

- Anda juga dapat menulis syntac seperti di bawah ini agar lebih ringkas 

 

- Value property di pisahkan dengan spasi, namun antar property pisahkan dengan koma. 

Silahkan lihat perubahnnya, aka nada efek transisi perubahan warna dan bentuk. 

5) Perubahan width dengan value input text. Silahkan hapus property transisi width yang ada 

pada id kotak sehingga menjadi seperti  

 204 

 

 

 

 

 

6) Pada index.html berikan input text dengan type number 

 

Lihat hasilnya, silahkan isi input text tersebut 

 

Gambar 14.3 Transisi dengan Value angka 

 

 205 

 

 

 

b) TRANSISI DENGAN JAVASCRIPT 

1) Atur index.html seperti di bawah ini 

 

2) CSS disini hanya untuk mengatur height width dan warna baground saja 

 

3) File main.js 

- Dan berikan perintah pada js nya. Caranya sama sepeti css tadi= property durasi timing 

delay 

 

 

Timing function selain ease dan linier ada juga yang lain : steps(3)  menggunakan berapa 

langkah 

 

 

 

- Kita juga bisa menambahkan perintah disaat transisi berakhir menggunakan keyword 

transitionend 

 206 

 

 

 

 

Jadi ketika transisi selesai, akan menampilkan dialog alert “Transisi Telah Selesai…” 

 

- Selain enggunakan alert kita jga bisa gunaan untuk hal lain. Contohnya ketika transisi 

berakhir dia akan kembali ke ukuran semula 

 

- Atau anda bisa mengarahkan ke halaman web 

 

 

c) ANIMASI KEYFRAME 

Keyframe dalam animasi atau film menurut Wikipedia adalah sebuah gambar yang 

mendefinisikan titik permulaan dan akhir dari transisi apapun. Gambar tersebut disebut "frame" 

karena posisi mereka pada waktu diukur di frame pada sebuah strip film. 

Perbedaan Transisi dan Keyframe 

 

Gambar 14.4 Animasi Keyframe 

  

 207 

 

 

 

Sekarang kita coba untuk membuat animasi keyframe tersebut. 

1) Buatlah file html seperti berikut 

 

2) Buat animasi keyframe dengan css 

 

Selain contoh diatas masih terdapat property animasi lain seperti  

 

NO PROPERTY KETERANGAN 

1 animation-timing-function: ease; Perubahan atau jalannya animasi. Value ease 

dan linier  

2 animation-iteration-count: 1; akan mengulang berapa x. 1 atau 2 atau 3 dst, 

atau infinite (mengulang terus) 

3 animation-direction: normal; ini arah animasi. Reverse terbalik. Alternate 

bolak- balik. Alternate-reverse bolak balik 

dimulai dari kanan 

4 animation-play-state: running; Memulai atau menghentikan animasi. running 

berjalan, paused berhenti 

5 animation-delay: 0s; waktu tunggu sebelum animasi berjalan 

6 animation-fill-mode: none;  Akhir dari animasi. None animasi kembali ke 

posisi awal, forwards animasi berakhir di posisi 

akhir(count set 1) 

Dalam penulisan property dapat juga disingkat seperti dibawah ini 

 208 

 

 

 

 

Namun bberapa value tidak perlu di tulis semua. tulis yang di butuhkan saja (buang yg 

settingan default) sehingga 

 

3) Tambahkan titik koordinat X dan Y 

 

4) Anda juga dapat membuat animasi lebih dari satu. 

 

  

 209 

 

 

 

5) Dapat juga di tambahkan perubahan warna 

 

 

d) Contoh lain 

1) Show hiden password 

Index.html 

 

Style.css 

 

 210 

 

 

 

 

Main.js 

 

Hasilnya 

 

Gambar 14.5 Animasi show hidden password 

 211 

 

 

 

 

 

Gambar 14.5 Animasi show hidden password 

 

2) Animasi Text 

Index.html 

 

Style.css 

 

 212 

 

 

 

 

Main.js 

 

Hasilnya  

 

 

Gambar 14.6 Animasi Menulis Teks 

 213 

 

 

 

 

 

Gambar 14.6 Animasi Menulis Teks 

 

  

 214 

 

 

 

BAB 15 

MEMBUAT ANIMASI SEDERHANA  

DENGAN CSS 

 

TUJUAN : 

a. Mahasiswa Mampu Memahami Cara Mengonlinekan Website 

b. Mahasiswa Dapat Mengonlinekan Website yang sudah di Buatnya 

 

Overview : 

Pada BAB ini akan di ajarkan cara mengonlinekan website secara gratis. Semua mahasiswa di 

wajibkan mengonlinekan web masing – masing Karena nanti dalam penilaian UAS, mahasiswa harus 

mengirimkan link web online nya ke pada Dosen. 

  

 215 

 

 

 

15.1 PENGANTAR WEB ONLINE 

 

Jika Anda membuat sebuah blog dengan menggunakan Wordpress.com atau Blogger.com, 

maka web tersebut akan langsung Online. Namun jika Anda membuat web dengan pemrograman 

HTML, atau PHP dan sejenisnya yang menggunkan bahasa pemprograman, maka Anda harus meng 

Onlinekan web tersebut secara manual. Pada bab ini akan di bahas cara meng online kan web HTML 

secara gratis. Namun sebelumnya Anda harus mengenal terlebih dahulu istilah Hosting dan Domain. 

Hosting berfungsi sebagai sarana untuk menyimpan semua file website agar dapat diakses 

secara online. Setiap file, termasuk tema, plugin, teks, media, kode HTML dan CSS, dan bahkan draf 

konten, dihosting. Sebaliknya, domain Anda berfungsi sebagai alamat situs web Anda sehingga 

pengguna dapat dengan mudah mengaksesnya menggunakan browser. Misalnya, ketika seseorang 

ingin mengakses website Niagahoster, mereka hanya perlu mengetikkan www.niagahoster.co.id di 

browser mereka sebelum website Niagahoster dimuat. Domain tidak harus selalu berakhiran .COM. 

Anda memiliki opsi untuk memilih salah satu dari banyak ekstensi domain yang tersedia. Diawali 

dengan .CO.ID,.WEB.ID,.NET,.INFO,.ONLINE,.SITE,.WEBSITE, dan diakhiri dengan .XYZ 

 

Gambar 15.1 Analogi Hosting dan Domain (sumber Niagahoster) 

 

15.2 MENGONLINEKAN WEB 

000webhost adalah layanan hosting gratis dan mudah digunakan. Anda tidak perlu lagi 

menghabiskan uang untuk web hosting, apalagi Anda baru memulai website. Selain itu, menyiapkan 

situs web dengan 000webhost tidaklah sulit; pemula bahkan dapat melakukannya secara efektif. 

Penggunaan sistem antarmuka yang mudah digunakan menyebabkan seluruh proses instalasi berjalan 

dengan cepat. Mari, ayo pergi bersama. 

1. Silahkan Anda mendaftar 000webhost terlebih dahulu, kunjungi link di 

https://id.000webhost.com/ klik daftar 

 216 

 

 

 

 

Gambar 15.2 halaman utama 000webhost 

 

2. Maka Anda akan di arahkan ke halaman sperti ini. Anda sebenarnya bisa login menggunakan 

FB atau Google langsung. Namun disini yang saya ajarkan adalah mendaftar manual saja 

meskipun nantinya juga akan menggunakan email. Silahkan klik pada bagian Daftar pada 

bagian bawah kiri 

 

Gambar 15.3 Halaman login 000webhost 

 

3. Anda akan dikirim ke gedung yang mirip dengan yang ada di bawah., silahkan isikan email Anda 

yang masih aktif dan buatlah password untuk akun 000webhostnya kemudian klik Daftar. Note 

: Kata sandi harus tepat satu angka, satu huruf besar dan kecil, dan tepat delapan karakter, 

atau lebih. 

 217 

 

 

 

 

Gambar 15.4 Halaman Register 000webhost 

 

 

4. Stelahk klik daftar maka webhost akan mengirim pesan verifikasi ke email yang Anda daftarkan 

tadi.  

 

Gambar 15.5 Pendaftaran selesai 

 

5. Silahkan masuk ke Email Anda untuk melakukan verifikasinya. Klik pesan dari 000webhost.  

 

 

Note : Jika tidak terdapat pesan ini di kotak masuk, Silahkan anda coba cari di folder spam 

 

6. Setelah membuka pesan nya, silahkan klok Verifikasi Email dan tunggu sampai selesai 

 218 

 

 

 

 

Gambar 15.6 Verifikasi Email 

 

 

Gambar 15. Verifikasi Berhasil 

 

7. Setelah verifikasi selesai, Anda akan dibawa ke gedung yang ditunjukkan pada paragraf di 

bawah ini. Anda juga dapat mencari di goolge dengan kata kunci login 000webhost atau anda 

dapat mengunjungi langsung link hasi pencarian tersebut di 

https://id.000webhost.com/members/website/list silahkan klik LET’S CREAT SOME MAGIC 

 219 

 

 

 

 

Gambar 15.8 Halaman webhost setelah di verifikasi email 

 

8. Kemudian pilih lainnya yang paling bawah 

 

Gambar 15.9 Menu lainnya 

 

9. Isikan nama website yang Anda kehendaki, disini saya contohkan nama website saya 

appstoredendy. Dan silahkan ganti password nya agar lebih mudah di ingat. Ini berbeda 

dengan password akun 000webhost yang ada di tahap sebelumnya. kemudian klik kirim. 

 220 

 

 

 

  

Gambar 15.10 penamaan projek 

 

10. Jika nama website tersedia maka pendaftran akan berhasil. Namun jika gagal ada kemungkinan 

nama tidak tersedia karena nama sudah di gunakan orang lain / menggunakan kata hubung / 

menggunakan karakterter yang tidak di dukung. Silahkan Anda ganti dengan nama lain atau di 

tambahi kata lain tanpa tanda hubung.  

11. Jika sudah berhasil akan di tampilkan halaman seperti berikut ini dan silahkan klik Upload Your 

Site 

 

Gambar 15.11 Pemilihan Jenis Projek 

 

  

 221 

 

 

 

12. Akan di tampilkan halaman seperti berikut ini 

 

Gambar 15.12 Halaman file 000webhost 

 

13. Disitulah nanti file – file HTML, CSS, image JS dan lain – lain mengenaik website Anda akan 

disimpan (didalam folder publick_html). 

14. Silahkan klik upload file pada bagian kanan atas 

 

Gambar 15.13 Upload File di 000webhost 

 

15. Klik select file 

 

Gambar 15.14 Browse File 

 

  

 222 

 

 

 

16. Pilih semua file yang berhubungan dengan web Anda kemudian klik Open 

 

Gambar 15.15 Pilih File yang akan di upload 

 

17. Klik Upload 

 

      Gambar 15.16 Daftar file yang akan di upload 

 

  

 223 

 

 

 

18. Seluruh file telah terupload 

 

Gambar 15.17 File setelah berhasil di upload 

 

19. Setelah itu anda masukkan seluruh file yang terupload tadi ke dalam folder Public_html. 

Centang smua file dan pilih move dan change folder target, pilih public_html dan ok 

 

Gambar 15.18 Pindah File 

 

  

Gambar 15.19 Pilih Tujuan Folder 

 224 

 

 

 

 

Gambar 15.20 Tombol Simpan Memindahkan File 

 

20. Jika anda belum mengupload file HTML atau belum memasukkan file HTML ke folder 

public_html maka halaman web anda akan seperti di bawah ini 

 

Gambar 15.21 Halaman Depan Web Sebelum 

 

21. Setelah seluruh file di pindah ke public_html maka web anda sudah tampil online 

 

Gambar 15.22 Halaman Depan Web Sesudah 

 225 

 

 

 

 

22. Dilain hari anda dapat setting atau membuka kembali web anda dengan mengunjungi 

https://id.000webhost.com/login-cpanel?from=panel atau cari di web browser dengan kata 

kunci login 000webhost isikan email dan paswrod ketika  mendaftarkan akun webhost tersebut 

(pada tahap ke 3 tutorial ini) 

 

Gambar 15.23 Halaman Login webhost 

 

23. Anda akan diarahkan ke halaman berikut ini. Disini anda bisa mengelola web anda dan juga 

melihat web anda secara online 

 

 

Gambar 15.24 Halaman Setelah Login 

 

  

 226 

 

 

 

24. Halaman kelola 

 

Gambar 15.25 Halaman Kelola Web