Dasar website 2

on relative akan tetap pada posisi defaultnya.

index.html

Style.css

Hasilnya

Gambar 7.4 Positon relative dengan CSS

c) FIXED

Setiap elemen HTML dengan pengaturan posisi tetap akan memiliki pesan berulang. tanpa

perubahan apa pun, meskipun tajuk situs web bergulir. terdiri dari penyesuaian kiri, kanan, atas, dan

bawah tetap.

index.html

style.css

Gambar 7.5 Hasil Positon fixed dengan CSS pada posisi atas

Gambar 7.6 Hasil Positon fixed dengan CSS pada posisi sesudah di scrall ke bawah

d) ABSOLUTE

Elemen HTML yang menggunakan pemosisian absolut akan tumpang tindih dengan elemen

HTML lainnya. Posisi yaitu satu-satunya properti posisi CSS yang paling berguna. Metode terbaik

yaitu membuat menu drop-down menggunakan HTML dan CSS.

Index.html

Style.css

Hasilnya seperti berikut

Gambar 7.7 Positon absolute dengan CSS

7.3 TEKNIK FLOAT DENGAN CSS

Kebutuhan akan teknik floating dalam desain web yaitu salah satu Teknik yang sering di gunakan

dalam CSS. Pelampung digunakan untuk memutar elemen berorientasi horizontal. Ada empat

kemungkinan nilai yang dapat digunakan untuk pelampung properti: left, right, inherit dan none.

Contoh yang paling sering menggunakan pelampung yaitu saat mencoba membuat spanduk

untuk situs web yang memiliki konten yang dikunci di sidebar. Berikut yaitu contoh cara

menggunakan properti float CSS.

index.html

Letakan file html, css dan gambar di dalam 1 folder

Gambar 7.8 letak html css dan gambar

style.css

Hasilnya

Gambar 7.9 Teknik float dengan CSS

Perhatikan contoh di bawah ini. Untuk membuat gambar diturunkan ke kiri dan teks

membungkus gambar, kita menerapkan float:left ke elemen gambar. Untuk informasi lebih lanjut,

Anda dapat menggunakan properti CSS float:right dan inherit untuk melihat bagaimana berbagai nilai

properti float berbeda satu sama lain.

7.4 DESAIN TABEL DENGAN CSS

Pada saat pelajaran sebelumnya tentang pembuatan tabel HTML, banyak dari kita percaya

bahwa tampilan dari tabel HTML standar sangat berbeda warna. karena tata letak tabel HTML standar

memiliki tata letak yang bias saja. Oleh karena itu, penjelasan tentang cara membuat tabel HTML

menggunakan CSS akan diberikan dalam pelajaran belajar CSS.

Dalam pelajaran ini, saya akan membahas petunjuk langkah demi langkah untuk mendesain

tabel. Hal pertama yang kami buat yaitu kerangka tabel.

index.html

Dan jika menggunakan browser maka hasilnya akan seperti pada kalimat ini.

Gambar 7.10 design tabel tanpa CSS

Seperti yan di tunjukan diatas. Nampak hasilnya masih standar. Hal ini dapt di buat agar lebih

menarik tentang desain tabel. buat file CSS dan sambungkan secara permanen ke file HTML yang

sesuai. tutorial sebelumnya tentang mempelajari HTML sambil mengintegrasikan CSS dan HTML dapat

ditemukan di sini. Bisa di lihat pada line ke 5 pada file index.html

Kemudian sesudah itu silahkan berikan nama class table1 pada tag table pada line 11 dibawah

ini. Untuk tag h3 pada line 9 itu optional saja, bisa di tambahkan dan juga bisa di hiraukan. Untuk line

di bawah nya tidak ada perubahan sama sekali. Hasilnya akan seperti gambar di bawah ini.

Kemudian buat style.css nya di bawah ini

Cermati juga selector nya. .table1, th, td artinya semua selector yang di tunjuk semuanya akan

di rubah seperti pada line 8. Berbeda dengan cara pemanggilan tag di dalam tag atau tag di dalam class

dimana tidak menggunakan symbol tanda koma. Dan jika index.html di buka pada aplikasi web browser

maka akan seperti ini

Gambar 7.11 proses design tabel dengan CSS

Harap perhatikan gambar di atas. Meja di sini sekarang jauh lebih ramai. Di tabel elemen, kami

menyediakan font yang dapat digunakan oleh penulis. karena kita akan mengubah font supaya terlihat

lebih cerah dan hidup. Pada tutorial sebelumnya, saya telah menjelaskan cara mengubah jenis huruf.

Silakan baca panduan CSS tentang cara mengubah font. Kemudian ganti nomor kode font dengan kode

#232323. Dan konsep yang paling penting yaitu border-collapse:collapse. Ini memiliki fungsi

membuat grafik grafik tabel lebih mudah dibaca.

Kemudian, untuk elemen table head dan table body, kami menggunakan kode warna #999

untuk peringatan tabel. Selain itu, tambahkan padding di bagian bawah dengan lebar sekitar 8 px dan

tinggi 20 px.

Sekarang coba modifikasi style.css menjadi seperti di bawah ini, bisa juga di tambahkan dengan

sesuka anda.

Dan hasilnya seperti di bawah ini

Gambar 7.12 hasil akhir design tabel dengan CSS

Silahkan amati selector nya, kemudian anda coba ganti value nya dan coba amati

perubahannya. Pada bagian hasil ketika di tampilkan ke baris no 2 dan 4 ketika di tunjuk kursor akan

berubah warna, namun pada baris 1,3 dan 5 warna baground tidak akan berubah karena bisa di lihat

pada style.css selector pada line 20 – 22

nth-child digunakan untuk memilih elemen sesuai dengan aturan perilaku anak (anak). Ada tag

pembuka dan penutup untuk setiap elemen. Contoh tag pembuka yaitu "<div>", dan contoh tag

penutup yaitu "</div>", yang dilambangkan dengan garis miring “/". Akibatnya, setiap elemen yang

ada berada di dalam batas elemen lain (dalam tag pembuka dan penutup) bisa disebut anak atau bayi

dari unsur yang ada di sekitarnya. Namun tidak semua unsur memiliki tag penutup. anak ke-n ditulis

dengan kode seperti::anak ke-n(X): X = bisa ditulis dengan angka, kata kunci, atau rumus.

BAB 8

ANIMASI GAMBAR & MEMBUAT TEMPLATE WEB

TUJUAN :

a. Mahasiswa Mampu Memberikan Animasi atau Efek pada Gambar

b. Mahasiswa Mampu Membuat Template Web

c. Mahasiswa Mampu Membuat Tampilan Web Responsive

Overview :

Tampilan sangat mempengaruhi dari kenyamanan para pengunjung web, semakin bagus

tampilan dan efek yang di berikan, memberikan kesan berbeda dalam menyajikan sebuah web. Hal

ini dapat membuat para pengunjung merasa di sajikan hal yang berbeda dalam membuka web

ini . Efek gambar yang di pelajari disini seperti membuat efek blur, transisi dan zoom in maupun

zoom out.

Sebagai seorang web programing, wajib untuk dapat membuat suatu tampilan atau template

dari sebuah website. Pada BAB ini juga akan di bahas cara membuat template web yang cukup menarik

dari HTML di hias dengan CSS dan sedikit mengambil dari javascript.

8.1 MEMBERIKAN EFEK PADA GAMBAR DENGAN CSS

Beberapa arahan CSS tersedia untuk mendapatkan efek zoom yang baik pada gambar saat

diarahkan, meskipun digabungkan dengan berbagai rotasi, penskalaan, pengaburan, dan elemen

lainnya. Ada beberapa animasi di banyak situs Web saat ini. Misalnya, animasi sederhana yang

memperbesar gambar saat melayang di dalam bingkai

CSS sangat membantu untuk menyempurnakan tampilan konten website, seperti dengan

menambahkan warna, box shadow, padding, margin, align, dan elemen lainnya. Modul ini akan

menjelaskan cara membuat animasi gambar melayang tanpa menggunakan JavaScript. Tanpa

menggunakan JavaScript dan hanya sedikit menggunakan CSS. Silahkan baca informasi di bawah ini

secara perlahan.

File HTML

index.html

Dokumen HTML diatas hanya menampilkan gambar dengan tag img. Pada line 5 disana di

gunakan untuk memanggil dokumen css yang akn kita gunakan untuk memberikan efek

transisi zoom, transisi dan sejenisnya. Dan jika dokumen CSS belum diisikan maka tampilan

index.html akan seperti di bawah ini

Gambar 8.1 menginputkan gambar dengan HTML

Silahkan Anda coba satu per satu mengisikan dokumen css seperti di bawah ini

a) Basic Zoom (basic.css)

Gambar 8.2 Zoom image dengan CSS

Basic.css

b) Quick zoom-in (quick.css)

Gambar 8.3 Quick zoom-n image dengan CSS

100

quick.css

c) Point-zoom (point.css)

Gambar 8.4 point-zoom image dengan CSS

Point.css

101

d) Zoom dan Rotasi (rotasi.css)

Gambar 8.5 Zoom dan Rotasi image dengan CSS

rotasi.css

e) Slow Motion (slow.css)

Gambar 8.6 slow motion image dengan CSS

102

Slow.css

f) Brighten and Zoom-in (brighten.css)

Gambar 8.7 brighten and zoom-in image dengan CSS

Brighten.css

103

g) Blur-out with Zooming-in (blur.css)

Gambar 8.8 Blur-out with Zooming-in image dengan CSS

Blur.css

h) Colorize with zooming-in (color.css)

Gambar 8.9 Colorize with zooming-in image dengan CSS

104

Color.css

8.2 MEMBUAT TEMPLATE WEB

Pada turorial sub poin ini akan di bahas cara pembuatan template dengan menggunakan

HTML, CCS dan di tambah java script sedikit untuk icon – icon nya. Hasil akhir akhir yang nantinya

terselesaikan yaitu seperti ini

Gambar 8.10 Contoh template web

Silahkan ikuti tahapan di bawah ini

105

Index.html

Satu-satunya atribut global HTML yang dapat diterapkan ke elemen HTML apa pun yaitu

atribut lang, dan atribut ini sangat membantu karena aksesibilitasnya (aksesibilitas). Elemen HTML

yang memungkinkan deklarasi diterapkan ke semua konten halaman tertentu yaitu yang paling

sering digunakan. Misalnya, deklarasi html lang="en"> memberi tahu browser bahwa semua konten di

bagian yang diterjemahkan yaitu dalam bahasa Inggris.

Nilai Atribut ltr yaitu kata kunci kiri-ke-kanan yang akan membuat teks membentang dari

atas ke bawah web browser. RTL, di sisi lain, yaitu singkatan dari kanan ke kiri yang akan mencetak

teks dari atas ke bawah.

Data tentang data yaitu meta tag, dan itu tidak ditujukan untuk pengguna melainkan untuk

browser web atau "program robot" seperti mesin pencari (search engine). ? Menurut definisi resmi,

charset yaitu kumpulan 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 yaitu 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 yaitu 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" yaitu 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 yaitu 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 :

sesudah 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

sesudah 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 ini 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 ini 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 ini se suka

hati Anda menggunakan css, contoh :

Anda bisa menggunakan

selector Tag / ID maupun

Class

112

sesudah 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 sesudah 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 yaitu 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 yaitu 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

yaitu 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 yaitu 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 yaitu bahasa pemrograman yang

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

yaitu 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 ini 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, sesudah 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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 yaitu PHP, HTML, CSS, dan Javascript. Elemen pertama

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

pun lebih menarik dan menarik.

JS yaitu 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 yaitu 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

sesudah 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() yaitu 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 yaitu 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 yaitu 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() yaitu 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() yaitu 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 yaitu 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 yaitu metode alert(). Fungsi penting dari alert() yaitu

salah satu yang akan meningkatkan komunikasi. Dialog yaitu 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

sesudah 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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

sesudah 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 yaitu 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 yaitu 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

ini .

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

yaitu 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 yaitu 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 yaitu penggabungan, bukan tanda tambah.

Contoh:

Maka hasilnya :

144

Kenapa bukan 12? Karena kedua angka yang dimaksud yaitu 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 yaitu 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 yaitu 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 yaitu : Bagaimana

hubungan operator penugasan dan operator aritmatika? Operator aritmatika hanya melakukan

operasi yang melibatkan matematika, sedangkan operator penugasan melakukan operasi

matematika dan pengisian.

Berikut yaitu 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 == yaitu 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 yaitu 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 yaitu sebagai berikut:

(Perhatikan biner, angka 0 dan 1) sesudah 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 yaitu operatornya sekarang. Operator ternary yaitu 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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 yaitu 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 sesudah 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 yaitu 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", yaitu 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 ini akan

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

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 yaitu modul perl yang jelas dan sudah memiliki banyak perulangannya.

Uncounted Loop yaitu 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 yaitu 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 sesudah 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 yaitu 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 ini 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 yaitu >

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 yaitu 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 yaitu 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

yaitu 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 ini 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, sesudah 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 yaitu membuat header situs web yang dinamis. Ini dapat dilakukan

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

Model. Dengan demikian, dokumen HTML yang dimodelkan sesudah 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 yaitu 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 ini

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. sesudah 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 yaitu 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 yaitu

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

ini 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 yaitu 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 yaitu "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> yaitu indeks dari data dalam array yang akan dimusnahkan;

- <total> yaitu jumlah data yang akan dikumpulkan dari indeks ini 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() yaitu untuk mengekstrak data dari array. Parameter wajib untuk metode

filter() yaitu 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 yaitu 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" yaitu 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 yaitu 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 yaitu fungsi peringatan.

Core JavaScript yaitu 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 yaitu membuat header situs web yang

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

dari Document Object Model. Dengan demikian, dokumen HTML yang dimodelkan sesudah 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 yaitu untuk memodelkan dokumen

HTML. Dokumen yaitu 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 yaitu 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

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

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

193

di atas. sesudah 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

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 ini , rentang waktu (interval) yaitu 1000 menit atau satu hari. Namun,

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

Hasil:

195

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

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 :

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

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 ini 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 ini

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 yaitu sebuah gambar yang

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

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

Perbedaan Transisi dan Keyframe

Sekarang kita coba untuk membuat animasi keyframe ini .

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

2) Animasi Text

Index.html

Style.css

212

Main.js

Hasilnya

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.

15.1 PENGANTAR WEB ONLINE

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

maka web ini 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 ini 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

15.2 MENGONLINEKAN WEB

000webhost yaitu 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

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

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

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

bagian bawah kiri

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.

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

tadi.

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. sesudah membuka pesan nya, silahkan klok Verifikasi Email dan tunggu sampai selesai

218

7. sesudah 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 ini di

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

219

8. Kemudian pilih lainnya yang paling bawah

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.

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

12. Akan di tampilkan halaman seperti berikut ini

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

15. Klik select file

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

17. Klik Upload

18. Seluruh file telah terupload

19. sesudah 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

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

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

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 ini

(pada tahap ke 3 tutorial ini)

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

melihat web anda secara online

24.

Dasar website 2

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Advertisement

Dasar website 2

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form