Scribd
Unggah
8 tayangan12 halaman

JavaScript Introduction

Diunggah oleh

galaxyamiruddin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
8 tayangan12 halaman

JavaScript Introduction

Diunggah oleh

galaxyamiruddin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

Materi “JavaScript Can Change HTML Content” menjelaskan bahwa

JavaScript dapat mengubah konten HTML secara dinamis, tanpa harus


memuat ulang halaman web. Ini sangat berguna untuk membuat halaman
yang interaktif dan responsif terhadap aksi pengguna.

Inti dari materi ini adalah penggunaan JavaScript untuk mengakses


elemen-elemen HTML dan memodifikasi konten di dalamnya. Hal ini
biasanya dilakukan dengan menggunakan DOM (Document Object Model),
yang memungkinkan JavaScript untuk berinteraksi dengan elemen-elemen
di halaman web.

Contoh sederhana cara JavaScript mengubah konten HTML:

<!DOCTYPE html>

<html>

<body>

<h1 id=”judul”>Judul Awal</h1>

<button type=”button” onclick=”ubahKonten()”>Klik untuk Mengubah


Judul</button>

<script>

Function ubahKonten() {

Document.getElementById(“judul”).innerHTML = “Judul Berubah!”;

</script>

</body>

</html>

Penjelasan:

1. HTML: Terdapat elemen <h1> dengan ID “judul” yang berisi teks


“Judul Awal”.
2. JavaScript: Fungsi ubahKonten() menggunakan
document.getElementById(“judul”) untuk mengakses elemen
dengan ID “judul”, kemudian mengubah teks di dalamnya
menggunakan innerHTML.

Ketika pengguna mengklik tombol, fungsi ubahKonten() akan dipanggil


dan teks pada elemen <h1> akan berubah menjadi “Judul Berubah!”.

Poin penting dari materi ini:

1. Manipulasi DOM: JavaScript dapat mengakses dan mengubah


elemen HTML menggunakan metode seperti getElementById(),
innerHTML, dll.
2. Interaksi Dinamis: Konten dapat diubah berdasarkan interaksi
pengguna, seperti mengklik tombol atau berinteraksi dengan form.
3. Penggunaan Event: Event seperti onclick dapat digunakan untuk
memicu fungsi JavaScript yang akan mengubah konten.

‐----‐-------------------

Materi “JavaScript Can Change HTML Attribute Values” menjelaskan


bahwa JavaScript dapat digunakan untuk mengubah nilai atribut pada
elemen-elemen HTML. Atribut HTML adalah bagian dari tag yang
memberikan informasi tambahan tentang elemen tersebut, misalnya
atribut src pada elemen <img> atau atribut href pada elemen <a>.

JavaScript memungkinkan Anda untuk mengubah atribut ini secara


dinamis, tanpa harus memuat ulang halaman. Hal ini sangat berguna
untuk membuat halaman yang lebih interaktif dan responsif.

Contoh sederhana:

<!DOCTYPE html>

<html>

<body>

<img id=”gambarSaya” src=”gambar1.jpg” alt=”Gambar Pertama”


width=”300” height=”200”>

<button type=”button” onclick=”ubahGambar()”>Ubah


Gambar</button>
<script>

Function ubahGambar() {

Document.getElementById(“gambarSaya”).src = “gambar2.jpg”;

</script>

</body>

</html>

Penjelasan:

1. HTML: Elemen <img> memiliki atribut src, yang menentukan


sumber gambar (dalam contoh ini, “gambar1.jpg”), serta atribut alt,
width, dan height.
2. JavaScript: Fungsi ubahGambar() menggunakan
document.getElementById(“gambarSaya”) untuk mengakses
elemen gambar dengan ID “gambarSaya”, lalu mengubah nilai
atribut src dari “gambar1.jpg” menjadi “gambar2.jpg”.
3. Interaksi: Saat pengguna mengklik tombol, gambar di halaman akan
berubah karena atribut src diubah oleh JavaScript.

Poin penting dari materi ini:

1. Manipulasi Atribut: JavaScript dapat mengakses dan mengubah


atribut HTML menggunakan metode seperti getElementById() diikuti
dengan nama atribut (misalnya, .src, .alt, dll.).
2. Interaksi Dinamis: Atribut elemen HTML dapat diubah berdasarkan
interaksi pengguna, seperti klik tombol atau tindakan lain.
3. Metode Lain: Selain .src, ada banyak atribut lain yang dapat
dimodifikasi, seperti href untuk link, value untuk elemen form, atau
style untuk mengubah tampilan CSS elemen.

Dengan kemampuan ini, Anda dapat membuat halaman web yang lebih
dinamis dan memberikan pengalaman yang lebih baik bagi pengguna.
Materi “JavaScript Can Change HTML Styles (CSS)” dari W3Schools
menjelaskan bahwa JavaScript dapat digunakan untuk mengubah gaya
(CSS) elemen HTML secara dinamis. Ini memungkinkan pengembang
untuk mengontrol tampilan elemen di halaman web berdasarkan tindakan
pengguna, seperti klik, hover, atau input lainnya.

Mengubah Gaya dengan JavaScript

Untuk mengubah gaya elemen HTML menggunakan JavaScript, Anda


dapat menggunakan properti style dari elemen tersebut. Setiap properti
CSS yang ingin Anda ubah dapat diakses menggunakan sintaks ini:

Document.getElementById(“idElemen”).style.propertyCSS = “nilai”;

Document.getElementById(“idElemen”): Digunakan untuk menemukan


elemen berdasarkan ID-nya.

Style: Digunakan untuk mengakses atau mengubah gaya CSS elemen


tersebut.

propertyCSS: Merujuk pada properti CSS yang ingin diubah, seperti color,
fontSize, backgroundColor, dll.

Contoh Penggunaan:

<!DOCTYPE html>

<html>

<body>

<h1 id=”judul”>Judul Ini Akan Berubah Warnanya</h1>

<button onclick=”ubahGaya()”>Ubah Gaya</button>

<script>

Function ubahGaya() {

Document.getElementById(“judul”).style.color = “blue”;
Document.getElementById(“judul”).style.fontSize = “30px”;

Document.getElementById(“judul”).style.backgroundColor =
“lightgray”;

</script>

</body>

</html>

Penjelasan Contoh:

Elemen <h1> memiliki ID “judul”.

Fungsi ubahGaya() mengubah beberapa properti CSS dari elemen <h1>


tersebut:

Color: Mengubah warna teks menjadi biru.

fontSize: Mengubah ukuran teks menjadi 30 piksel.

backgroundColor: Mengubah latar belakang menjadi abu-abu terang.

Ketika pengguna mengklik tombol, gaya dari elemen <h1> akan berubah
sesuai dengan perintah JavaScript.

Poin Penting:

1. Properti CSS dalam JavaScript: Nama properti CSS yang biasanya


ditulis dalam format kebab-case (contoh: background-color) diubah
menjadi camelCase (contoh: backgroundColor) dalam JavaScript.
2. Perubahan Gaya Dinamis: Perubahan gaya ini terjadi secara
dinamis, artinya gaya tersebut berubah secara langsung di browser
tanpa memerlukan pemuatan ulang halaman.
3. Manipulasi Visual Elemen: Anda bisa mengubah berbagai properti
visual elemen, seperti ukuran teks, warna latar belakang, margin,
padding, dan lainnya, untuk menciptakan halaman web yang lebih
interaktif dan responsif.

Beberapa Properti CSS yang Dapat Diubah dengan JavaScript:

Color: Mengubah warna teks.

fontSize: Mengubah ukuran teks.

backgroundColor: Mengubah warna latar belakang elemen.


Display: Mengontrol apakah elemen tampil atau tidak (none, block, inline).

Visibility: Mengontrol visibilitas elemen (visible, hidden).

Width, height: Mengubah ukuran elemen.

Dengan memanfaatkan JavaScript untuk mengubah gaya CSS, Anda dapat


membuat tampilan yang lebih dinamis dan menyesuaikan halaman web
sesuai dengan interaksi pengguna.

Materi “JavaScript Can Hide HTML Elements” dari W3Schools menjelaskan


bahwa JavaScript dapat digunakan untuk menyembunyikan elemen HTML
di halaman web. Hal ini dilakukan dengan mengubah gaya CSS elemen
menggunakan properti display atau visibility. Dengan cara ini, elemen
dapat dihilangkan dari tampilan tanpa menghapusnya dari struktur HTML.

Cara Menyembunyikan Elemen dengan JavaScript

Untuk menyembunyikan elemen HTML, Anda dapat mengubah properti


display atau visibility dari elemen tersebut menggunakan JavaScript.

1. Display:

Jika display diatur ke nilai none, elemen tersebut akan disembunyikan,


dan tata letak elemen di sekitarnya akan berubah seolah-olah elemen
tersebut tidak ada.

Sintaks:

Document.getElementById(“idElemen”).style.display = “none”;

2. Visibility:

Jika visibility diatur ke hidden, elemen tersebut akan disembunyikan,


tetapi ruang yang ditempati elemen tetap ada di halaman.

Sintaks:

Document.getElementById(“idElemen”).style.visibility = “hidden”;

Contoh Penggunaan display:

<!DOCTYPE html>

<html>

<body>
<p id=”paragraf”>Ini adalah paragraf yang akan disembunyikan.</p>

<button onclick=”sembunyikan()”>Sembunyikan Paragraf</button>

<script>

Function sembunyikan() {

Document.getElementById(“paragraf”).style.display = “none”;

</script>

</body>

</html>

Penjelasan:

Elemen <p> dengan ID “paragraf” akan disembunyikan ketika tombol


diklik. Fungsi sembunyikan() menggunakan
document.getElementById(“paragraf”).style.display = “none” untuk
menyembunyikan elemen tersebut dari halaman.

Contoh Penggunaan visibility:

<!DOCTYPE html>

<html>

<body>

<p id=”paragraf2”>Ini adalah paragraf yang akan disembunyikan dengan


visibility.</p>

<button onclick=”sembunyikanDenganVisibility()”>Sembunyikan
Paragraf</button>
<script>

Function sembunyikanDenganVisibility() {

Document.getElementById(“paragraf2”).style.visibility = “hidden”;

</script>

</body>

</html>

Penjelasan:

Elemen <p> dengan ID “paragraf2” akan disembunyikan menggunakan


visibility: hidden ketika tombol diklik. Ruang yang ditempati elemen tetap
ada, tetapi elemen tersebut tidak terlihat.

Perbedaan Antara display: none dan visibility: hidden:

Display: none: Elemen dihilangkan sepenuhnya dari tata letak halaman.


Elemen tidak lagi mempengaruhi layout di sekitarnya.

Visibility: hidden: Elemen disembunyikan, tetapi tata letak elemen lain


tidak berubah. Ruang yang ditempati elemen tetap ada di halaman.

Poin Penting:

1. Mengontrol Tampilan Elemen: Dengan menggunakan JavaScript,


Anda dapat secara dinamis menyembunyikan atau menampilkan
elemen di halaman berdasarkan interaksi pengguna.
2. Interaksi dengan Pengguna: Menyembunyikan elemen bisa berguna
untuk membuat antarmuka pengguna yang lebih interaktif, seperti
menampilkan atau menyembunyikan bagian tertentu dari halaman
berdasarkan tindakan pengguna.
3. Event Handling: Fungsi untuk menyembunyikan elemen sering
dipicu oleh event seperti klik tombol, hover, atau perubahan input.

Dengan menggunakan JavaScript untuk menyembunyikan elemen HTML,


Anda dapat membuat halaman web yang lebih dinamis dan responsif
terhadap kebutuhan pengguna.
Materi “JavaScript Can Show HTML Elements” dari W3Schools menjelaskan
bagaimana JavaScript dapat digunakan untuk menampilkan elemen HTML
yang sebelumnya disembunyikan. Ini sering digunakan bersamaan
dengan metode untuk menyembunyikan elemen, seperti mengubah
properti CSS display atau visibility dari elemen tersebut.

Cara Menampilkan Elemen dengan JavaScript

Untuk menampilkan elemen HTML yang sebelumnya disembunyikan, Anda


dapat mengubah properti display atau visibility elemen tersebut
menggunakan JavaScript.

1. Display:

Jika elemen disembunyikan dengan display: none, Anda dapat


menampilkannya kembali dengan mengatur display ke nilai seperti
“block”, “inline”, atau nilai lain yang sesuai.

Sintaks:

Document.getElementById(“idElemen”).style.display = “block”;

2. Visibility:

Jika elemen disembunyikan dengan visibility: hidden, Anda bisa


menampilkannya kembali dengan mengubah propertinya menjadi
visibility: visible.

Sintaks:

Document.getElementById(“idElemen”).style.visibility = “visible”;

Contoh Penggunaan display untuk Menampilkan Elemen:

<!DOCTYPE html>

<html>

<body>

<p id=”paragraf” style=”display:none;”>Ini adalah paragraf yang


disembunyikan.</p>

<button onclick=”tampilkan()”>Tampilkan Paragraf</button>


<script>

Function tampilkan() {

Document.getElementById(“paragraf”).style.display = “block”;

</script>

</body>

</html>

Penjelasan:

Paragraf diatur dengan style=”display:none;”, sehingga tidak ditampilkan


ketika halaman dimuat.

Fungsi tampilkan() mengubah properti display elemen <p> menjadi


“block”, yang membuat paragraf muncul kembali saat tombol diklik.

Contoh Penggunaan visibility untuk Menampilkan Elemen:

<!DOCTYPE html>

<html>

<body>

<p id=”paragraf2” style=”visibility:hidden;”>Ini adalah paragraf yang


disembunyikan dengan visibility.</p>

<button onclick=”tampilkanDenganVisibility()”>Tampilkan
Paragraf</button>

<script>

Function tampilkanDenganVisibility() {

Document.getElementById(“paragraf2”).style.visibility = “visible”;

</script>
</body>

</html>

Penjelasan:

Paragraf disembunyikan menggunakan style=”visibility:hidden;”, sehingga


elemen tersebut tidak terlihat tetapi ruangnya tetap ada.

Fungsi tampilkanDenganVisibility() mengubah visibility menjadi “visible”,


sehingga paragraf muncul kembali di halaman tanpa mengubah tata
letak.

Perbedaan Antara display dan visibility:

Display: none: Menghilangkan elemen sepenuhnya dari tata letak


halaman. Saat ditampilkan kembali dengan display: block, elemen akan
muncul kembali dalam tata letak halaman.

Visibility: hidden: Menyembunyikan elemen tetapi tetap menyisakan ruang


di tata letak. Saat ditampilkan dengan visibility: visible, elemen akan
terlihat kembali tanpa mempengaruhi tata letak.

Poin Penting:

1. Mengubah Tampilan Elemen: JavaScript memungkinkan Anda


menampilkan elemen HTML yang sebelumnya disembunyikan
secara dinamis, berdasarkan interaksi pengguna.
2. Penggunaan Event: Menampilkan elemen biasanya dikaitkan dengan
event seperti klik tombol, hover, atau perubahan input.
3. Interaksi Dinamis: Dengan menampilkan atau menyembunyikan
elemen secara dinamis, Anda dapat membuat antarmuka yang lebih
interaktif dan responsif.

Menggunakan JavaScript untuk menampilkan elemen HTML dapat


memberikan pengalaman yang lebih fleksibel dan dinamis kepada
pengguna saat berinteraksi dengan halaman web.

Anda mungkin juga menyukai