Scribd
Unggah
32 tayangan

Javascript Part 2

Pertemuan ini membahas validasi form dan penggunaan peta Google Maps dalam Javascript. Validasi form digunakan untuk memverifikasi data form sebelum dikirim, sedangkan Google Maps API memungkinkan penggunaan peta interaktif dalam aplikasi web. Tim mengajar membahas konsep DOM dan manipulasi elemen halaman web menggunakan Javascript.

Diunggah oleh

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

Javascript Part 2

Pertemuan ini membahas validasi form dan penggunaan peta Google Maps dalam Javascript. Validasi form digunakan untuk memverifikasi data form sebelum dikirim, sedangkan Google Maps API memungkinkan penggunaan peta interaktif dalam aplikasi web. Tim mengajar membahas konsep DOM dan manipulasi elemen halaman web menggunakan Javascript.

Diunggah oleh

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

Pertemuan 5

Javascript Part 2

Tim Teaching
Yushintia  Pramitarini S S.T.,M.T
Elok Nur Hamdana, S.T.,M.T
Wilda Imama Sabilla, S.Kom., M.Kom

Desain dan Dasar Pemrograman Web


TOPIK

Pengenalan Menampilka
Validasi
konsep n Peta dalam
Form
DOM Google Map
TUJUAN

Menampilka
n peta dalam
Mevalidasi Google Map
Form pada
Memahami Javascript
konsep DOM
PENDAHULUAN
DOCUMENT OBJECT MODEL (DOM)
 Objek dokumen pada halaman HTML merupakan objek tertinggi dari hirarki element yang ada pada HTML dan agar
JavaScript dapat memanipulasi suatu element HTML diperlukanlah API atau Application Programming Interface yang
diberi nama DOM (Document Object Model)

Elemen yang dibuat untuk ditampilkan pada


browser

Dapat dimanipulasi/dibaca/dibuat oleh Javascript

Object Oriented Representation


STRUKTUR DOM DALAM JAVASCRIPT
<!DOCTYPE html>
Document <html lang=“eng”>
<head>
Root element <title>My Title</title>
<html> </head>
<body>
<a href=“/link”>My Link</a>
Element: Element: <h1>My Header</h1>
<head> <body> </body>
</html>
Element: Attribute: Element: Element:
<title> <‘href> <a> <h1>

Text: Text: Text:


“My Title” “My link” “My header”
STRUKTUR DOM DALAM JAVASCRIPT(CONT)

 Struktur pohon seperti pada slide sebelumnya merupakan cara DOM melihat
dokumen HTML. Perhatikan juga bahwa terdapat dua jenis elemen pada
pohon: node (simpul) yang ditampilkan dalam bentuk kotak putih, serta teks yang
ditampilkan dalam bentuk tulisan.
 Setiap elemen HTML adalah merupakan node, dan dapat membungkus elemen
HTML lainnya. Elemen teks, di sisi lain, tidak dapat memiliki elemen lain di
dalamnya.
MANIPULASI DOM

 Sebagai bahasa yang dibuat untuk membuat dokumen HTML menjadi


interaktif, Javascript memiliki kaitan yang erat dengan DOM.
 DOM menyediakan antarmuka untuk manipulasi dokumen, sementara
Javascript menjadi bahasa yang melakukan eksekusi terhadap antarmuka
yang disediakan.
AKSES ELEMEN DOM
 document.getElementById, digunakan untuk mengakses elemen DOM berdasarkan
nilai properti id pada elemen. Hanya akan mengembalikan satu elemen DOM karena
idealnya nilai properti id bersifat unik dalam satu dokumen. Jika terdapat lebih dari
satu elemen dengan id yang sama, maka elemen yang pertama ditemukan akan
dikembalikan.
 document.getElementsByClassName, seperti namanya digunakan untuk memanggil
seluruh elemen DOM dengan nilai properti class yang diberikan. Mengembalikan
objek mirip array, yaitu HTMLCollection dari seluruh elemen DOM yang cocok.
 document.getElementsByName, mengambil elemen berdasarkan nilai properti name.
MengembalikanHTMLCollection seperti getElementsByClassName.
 document.getElementsByTagName, memilih elemen-elemen dengan tag HTML
tertentu. Sama seperti semua fungsi yang mengembalikan banyak elemen DOM,
memberikan nilai berupa HTMLCollection.
AKSES ELEMEN DOM (CONT)

 document.getElementsByTagNameNS, sama seperti getElementsByTagName, hanya


saja fungsi ini melakukan penyaringan tambahan berdasarkan namespace pada
dokumen XHTML. Fungsi ini diimplementasikan berbeda-beda oleh tiap browser
pada saat penulisan (Febuari 2014) dan disarankan untuk jangan digunakan.
 document.querySelector, mencari elemen DOM pertama yang sesuai dengan
aturan selector CSS yang diberikan ke fungsi.
 document.querySelectorAll, sama seperti querySelector, tetapi mengembalikan
semua elemen yang memenuhi aturan (bukan hanya elemen pertama). Fungsi ini
mengembalikan NodeList, bukan HTMLCollection.
CONTOH PENGGUNAAN DOM
VALIDATION FORM

Apa itu validasi form?


• Validasi form adalah proses pengecekan apakah suatu formulir telah diisi dengan benar
sebelum diolah.

Apa yang perlu kita ketahui sebelum melakukan validasi form ?


• HTML
• CSS
• JavaScript
PROSES VALIDASI FORM
 Terdapat dua metode dalam melakukan validasi form :

1. Server Side : Validasi ini lebih aman tetapi


seringkali lebih rumit untuk dikodekan karena
menghapus validasi sisi klien. ini penting ketika peretas
menonaktifkan kinerja situs web. wajib untuk
menambahkan dalam formulir web tetapi bersama dengan
Javascript, validasi sisi server melindungi situs web
Anda.
2. Client Side : Validasi sisi klien (javascript) lebih
mudah dilakukan dan juga lebih cepat (browser tidak
harus terhubung ke server untuk memvalidasi formulir,
sehingga pengguna langsung mengetahui jika mereka
melewatkan bagian yang diperlukan itu!)
PROSES VALIDASI FORM (CONT)

Javascript menyediakan cara untuk memvalidasi data formulir di komputer klien


sebelum mengirimkannya ke server web. validasi formulir umumnya menjalankan dua
fungsi.
 Basic Validation - Pertama-tama, formulir harus dicek untuk memastikan data yang
dimasukkan ke field formulir yang diperlukan. ini hanya perlu mengulang setiap field
dalam formulir dan memeriksa data.
 Data Format Validation - kedua, data yang dimasukkan harus diperiksa form dan
value nya yang benar.
PETA DALAM GOOGLE MAP
 Google Maps API

Google Menyediakan Google Maps API yang memungkinkan kita membangun aplikasi dengan
memanfaatkan Google Maps. Google Maps API (Application Programming Interface) merupakan
sebuah API yang disediakan oleh Google untuk menggunakan peta Google (Google Map) dalam
aplikasi yang kita bangun. Google Maps API memungkinkan kita memodifikasi peta dan informasi
yang ada di dalamnya.
Thanks Next Let’s
code

Anda mungkin juga menyukai