Cara menggunakan DOCUMET di JavaScript

yaitu informasi yang dihasilkan setelah proses atau tampilan program yang biasanya digunakan untuk menampilkan hasil akhir dari coding yang telah kita buat. Sekarang mari kita mulai membahas tentang 4 cara menampilkan keluarandalam JavaScript

Pada artikel ini kita akan mencoba 4 cara menampilkan keluaran di JavaScript.

Table of Contents Show

1. Menggunakan innerHTML
2. Menggunakan dokumen. menulis()
3. Menggunakan fungsi alert()
4. Menggunakan konsol. catatan()
Menampilkan Hasil JavaScript dengan dokumen. menulis()
Menampilkan Hasil JavaScript dengan innerHTML
Menampilkan Hasil JavaScript dengan alert()
Menampilkan Hasil JavaScript dengan konsol. catatan()
Apa itu dokumen dalam JavaScript?
Apa cara yang benar untuk menggunakan file JavaScript dalam HTML?
Apa fungsi dokumen getElementById?
Bagaimana cara membuat fungsi dalam JavaScript?

Merender di dalam elemen HTML, menggunakan innerHTML
Menampilkan ke dalam HTML, menggunakan dokumen. menulis()
Tampilkan ke dalam kotak peringatan, menggunakan jendela. peringatan()
Tampilkan ke browser konsol, menggunakan konsol. catatan()

Dalam JavaScript salah satu cara untuk menampilkan keluaran adalah dengan menggunakan konsol. catatan(). Jika anda masih bingung apa itu console. log() atau ingin mengetahui JavaScript dasar, Anda dapat membaca terlebih dahulu artikel kami sebelumnya di "Pengantar Javascript untuk Pemula".

1. Menggunakan innerHTML

innerHTML adalah properti yang digunakan untuk mendapatkan atau mengubah konten elemen itu sendiri. Dengan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik dengan menggunakan metode dokumen. getElementById(id).

Contoh

Lihat Pena
Menggunakan InnerHTML oleh Xsis Academy (@xsis_academy)
di CodePen

2. Menggunakan dokumen. menulis()

Biasanya dokumen. write() digunakan untuk pengujian. Ketika kita menggunakan dokumen. write() setelah dokumen HTML dimuat, setelah itu semua HTML yang ada akan hilang atau terhapus.

Contoh

Lihat Pena
menggunakan dokumen. write() oleh Xsis Academy (@xsis_academy)
di CodePen

3. Menggunakan fungsi alert()

Fungsi alert() adalah fungsi untuk menampilkan kotak peringatan. Dengan ini kita dapat menampilkan output di jendela dialog.

Contoh.

Lihat Pena
Menggunakan alert() oleh Xsis Academy (@xsis_academy)
di CodePen

4. Menggunakan konsol. catatan()

Seperti yang kita ketahui kemarin, fungsi konsol. log() adalah fungsi untuk menampilkan teks ke konsol Javascript. Menghibur. log() biasanya digunakan untuk debugging, karena pesan kesalahan JavaScript selalu ditampilkan di konsol.

Contoh.

console.log("Hallo dari console");

Itulah pembahasan kita kali ini, namun jangan khawatir kita akan melanjutkan pembahasan tentang JavaScript pada artikel berikutnya. Anda dapat berlangganan artikel kami agar tidak ketinggalan artikel terbaru kami

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pemrograman javascript dan bahasa pemrograman lainnya, Anda dapat mengunjungi media sosial Xsis Academy untuk informasi lebih lanjut tentang Bootcamp

Melanjutkan tutorial JavaScript di Duniailkom, kali ini kita akan belajar Cara Menampilkan Hasil Program JavaScript. Kami akan membahas tentang pesanan document.write(), innerHTML, alert(), console.log()

Menampilkan Hasil JavaScript dengan dokumen. menulis()

Cara pertama menampilkan hasil kode program JavaScript di web browser adalah dengan perintah document.write(). Berikut adalah contoh penggunaannya

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <script>
    let foo = 1+3+5+7+9;
    document.write(foo);

    document.write("<br>");

    let bar = {a:'16'};
    document.write(bar);
  </script>
</body>
</html>

Perintah document.write()_ akan menampilkan teks yang ditulis dalam tanda kurung (sebagai argumen)

Sejalan 10 saya membuat variabel foo yang akan menampung hasil penambahan 1+3+5+7+9. Variabel ini kemudian ditampilkan dengan perintah

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

0 pada baris 11. Alhasil, angka 25 akan muncul di web browser

Kami akan membahas lebih lanjut tentang variabel dalam tutorial terpisah. Fokus tutorial ini hanya untuk menampilkan hasil saya dengan perintah document.write()

Selanjutnya pada baris 13 terdapat perintah

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

2. Dalam HTML, tag

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

_3 digunakan sebagai ganti baris. Ini hanya untuk membuat penampilan kita lebih rapi

Pada baris 15 giliran bar variabel yang saya isi dengan objek

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

4. Lagi-lagi materi tentang objek akan dibahas pada tutorial tersendiri. Pada saat ditampilkan, hasilnya adalah

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

Inilah salah satu kelemahan jika ingin menampilkan hasil kode program menggunakan perintah document.write(). Jika datanya cukup kompleks, yang muncul adalah tipe data dari variabelnya, bukan nilainya

Menampilkan Hasil JavaScript dengan innerHTML

Cara kedua untuk menampilkan hasil JavaScript adalah dengan mengakses properti innerHTML dari suatu elemen. Untuk kebutuhan ini, kita juga harus meminta bantuan perintah

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

8 untuk mencari di mana hasil ini akan ditampilkan. Berikut adalah contoh kode programnya

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

Sama seperti contoh di document.write()_, saya ingin menampilkan isi dari variabel foo dan bar. Hasil tampilan juga akan sama persis seperti sebelumnya

Di baris 9-10, terdapat 2 tag

dengan atribut

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

0 dan

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

1. Disinilah kita akan meletakkan hasil kode program JavaScript.

Caranya akses kedua elemen dengan perintah

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

8, lalu isikan property innerHTML dengan variabel foo dan bar seperti pada baris 13 dan 16

Penjelasan lebih lanjut terkait cara kerja perintah

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

8 akan kami bahas pada tutorial tersendiri. Singkatnya, perintah ini digunakan untuk mencari elemen HTM berdasarkan nilai atribut id

Menampilkan Hasil JavaScript dengan alert()

Perintah alert()_ telah digunakan beberapa kali, dan merupakan cara paling sederhana untuk menampilkan hasil program JavaScript. alert() akan menampilkan apa pun yang dimasukkan sebagai argumen

Berikut adalah contoh penggunaannya

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

Perintah alert() diakses pada baris 13 dan 16. Pada saat eksekusi, isi variabel foo dan bar akan muncul di jendela peringatan secara bergantian. Setelah mengklik tombol OK dari hasil

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

7, maka akan muncul hasil

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

Walaupun sangat praktis, perintah alert() tetap menampilkan isi variabel bar sebagai

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

Menampilkan Hasil JavaScript dengan konsol. catatan()

Dari ketiga metode yang sudah kita bahas, ada sedikit masalah ketika menampilkan variabel bar yang berisi objek. Ketiganya kurang informatif untuk data JavaScript yang kompleks. Sebagai solusinya, kita dapat mengakses hasil kode JavaScript dengan perintah console.log()

perintah konsol. log akan menampilkan hasil program ke tab console pada menu Web Developer. Cara menggunakan fungsi ini sama dengan alert, Anda hanya perlu memasukkan hasil yang ingin ditampilkan sebagai argumen

Berikut contoh penggunaan perintah console.log() dalam menampilkan hasil program JavaScript

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    console.log(foo);

    let bar = {a:'16'};
    console.log(bar);
  </script>
</body>
</html>

Akibatnya, isi variabel foo dan bar muncul dengan nilai yang ada

Opsinya adalah menggunakan perintah alert() dan konsol. log() tergantung pada kenyamanan kita sebagai programmer. Pada tutorial JavaScript di Duniailkom kali ini saya akan lebih banyak menggunakan console. log() yang lebih informatif dan tampilan hasil program menjadi lebih rapi

Tapi perintah alert() dan console. log() hanya untuk proses pengembangan. Untuk web asli nanti lebih cocok menggunakan perintah document. getElementById() dan innerHTML seperti cara kedua, karena hasilnya langsung terlihat di web browser

Pada tutorial pembelajaran JavaScript berikutnya, kita akan membahas tentang konsep inti dari JavaScript, yaitu. Memahami EmcaScript dan DOM (Document Object Model)

Saat ini di Duniailkom tersedia eBook / Uncover buku JavaScript. Dengan total lebih dari 650 halaman A4, materi dalam buku ini jauh lebih banyak dari tutorial yang ada di website Duniailkom. Penjelasan lebih lanjut bisa ke. Pengungkapan JavaScript – Panduan Pembelajaran JavaScript

Apa itu dokumen dalam JavaScript?

objek DOM di javascript bernama dokumen . Objek ini berisi semua yang kita butuhkan untuk memanipulasi HTML.

Apa cara yang benar untuk menggunakan file JavaScript dalam HTML?

Anda dapat langsung menambahkan JavaScript di HTML dengan menggunakan tag yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis . Kode JS yang dapat ditambahkan. antara tag

Apa fungsi dokumen getElementById?

Pada dasarnya fungsi dari Dokumen . getElementById () adalah mengambil nilai pada input yang ada di HTML tentunya dengan syarat elemen input memiliki ID, karena function getElementById seperti namanya, dia akan mengambil nilai dengan ID.

Bagaimana cara membuat fungsi dalam JavaScript?

untuk membuat fungsi , penulisan harus didahului dengan sintaks " fungsi " lalu lanjutkan dengan nama fungsi yang ingin Anda buat . dan isi fungsi ditulis dalam kurung kurawal buka “{” dan kurung kurawal tutup “}”.