Tutorial Javascript Dasar 1

Gambar 139. Banyak sekali yang dapat dilakukan dengan Javascript dalam sebuah pengembangan web. Tutorial Javascript Dasar 1 ini berisi beberapa contoh apa yang dapat dilakukan JavaScript. JavaScript Dapat Mengubah Konten HTML. | Lots to do with Javascript within a w

Tentang Javascript dan Contoh-contohnya

Mohon sebelum anda baca tutorial ini, baca terlebih dahulu tutorial sebelumnya tentang:

Banyak sekali yang dapat dilakukan dengan Javascript dalam sebuah pengembangan web. Tutorial Javascript Dasar 1 ini berisi beberapa contoh apa yang dapat dilakukan JavaScript.

JavaScript Dapat Mengubah Konten HTML.

Salah satu dari banyak metode JavaScript HTML adalah getElementById (). Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "Belajar") dan mengubah isi elemen (innerHTML) untuk "Selamat Belajar".

Setiap contoh yag ada Silahkan tempel pada editor HTML-CSS atau simpan dengan ekstensi .html lalu jalankan:

<!DOCTYPE html> <html> <body> <h1>Tutorial Javascript Dasar 1</h1> <p id="Belajar">JavaScript dapat mengubah konten HTML.</p> <button type="button" onclick="document.getElementById('Belajar').innerHTML = 'Selamat Belajar Javascript!'">Klik Saya!</button> </body> </html>

JavaScript Dapat Merubah HTML Attributes

Contoh ini mengubah gambar HTML dengan mengubah src (source) atribut dari sebuah img tag:

<!DOCTYPE html> <html> <body> <h1>Tutorial Javascript Dasar 1</h1> <p>JavaScript dapat mengubah attributes HTML.</p> <p>Dalam hal ini JavaScript mengubah src (source) atribut dari suatu gambar.</p> <button onclick="document.getElementById('myImage').src='https://multibisnisindo.com/po-content/uploads/pic_bulbon.gif'">Nyalakan Lampu</button> <img id="myImage" src="https://multibisnisindo.com/po-content/uploads/pic_bulboff.gif" style="width:100px"> <button onclick="document.getElementById('myImage').src='https://multibisnisindo.com/po-content/uploads/pic_bulboff.gif'">Mematikan lampu</button> </body> </html>

JavaScript Dapat Mengubah Gaya HTML (CSS)

Mengubah gaya elemen HTML, adalah varian dari mengubah atribut HTML:

<!DOCTYPE html> <html> <body> <h1>Tutorial Javascript Dasar 1</h1> <p id="Belajar">JavaScript dapat mengubah gaya elemen HTML.</p> <button type="button" onclick="document.getElementById('Belajar').style.fontSize='35px'">Klik Saya!</button> </body> </html>

JavaScript Bisa Sembunyikan HTML Elements

Menyembunyikan elemen HTML dapat dilakukan dengan mengubah gaya tampilan:

<!DOCTYPE html> <html> <body> <h1>Tutorial Javascript Dasar 1</h1> <p id="demo">JavaScript dapat menyembunyikan elemen HTML.</p> <button type="button" onclick="document.getElementById('demo').style.display='none'">Klik Saya!</button> </body> </html>

JavaScript Bisa Tampilkan Elemen HTML

Menampilkan elemen HTML yang tersembunyi juga bisa dilakukan dengan mengubah gaya tampilan:

<!DOCTYPE html> <html> <body> <h1>Tutorial Javascript Dasar 1</h1> <p>JavaScript dapat menunjukkan elemen HTML yang tersembunyi.</p> <p id="Belajar" style="display:none">Hallo Kawan, selamat belajar!</p> <button type="button" onclick="document.getElementById('Belajar').style.display='block'">Klik Saya!</button> </body> </html>

Contoh-contoh diatas merupakan dasar atau pendahuluan Javascript, pada tutorial selanjutnya kita akan buat contoh-contoh Javascript berdasarkan cara referensinya.

Status Akun Iklan 11 Juni 2024

Saya sampaikan bahwa status akun iklan sudah saya cek dan saya kelola. Sehingga pagi ini siap untuk di jalankan.

Abaikan notifikasi/tanda yang ada; Dibatasi anggaran, merah, kuning, apapun itu mohon di abaikan. Saya sudah pertimbangkan dan sesuaikan di masing-masing akun. Pagi ini, pukul 04.45 WIB saya baru selesai periksa dan setting semua akun. Sehingga tidak ada lagi yang perlu di tanyakan. Silahkan jalankan iklan.

Layanan Perancang Website Company Profile Di Jamin Muncul Di Pencarian

Layanan Perancang Website Batuceper Di Jamin Terdaftar Google

Jasa Perancang Website Katalog Produk Dapat Di Lihat Di Mesin Pencari Google

Cara Membuat Tombol Kontak WhatsApp Melayang Muncul Pada Setiap Halaman Di Berbagai Platform Website

Cara Mengatasi Error Wordpress Akibat Gagal Update Tanpa Kehilangan Konten Website

Theme Divi Pro Hanya 50 Ribu Untuk 10 Orang Tercepat

Tutorial Javascript Dasar 1