Media Belajar Bahasa Pemrograman | by APPKEY

JavascriptTutorial Javascript 11 : Output pada Javascript dan Cara...

Tutorial Javascript 11 : Output pada Javascript dan Cara Menggunakan Fungsinya

-

Pada seri tutorial JavaScript sebelumnya, Codekey telah menjelaskan tentang comments atau komentar yang ada di JavaScript. Kali ini, Codekey akan mengajak Anda untuk mengenal dan menggunakan fungsi Output pada JavaScript.

Tutorial ini akan mengajarkan Anda berbagai cara mengeluarkan data, seperti window.alert (), document.write (), innerHTML, console.log (), dan lainnya.

Meskipun fungsi utama JavaScript adalah mengubah perilaku browser, teknik ouput ini banyak digunakan untuk menampilkan data tertentu. Selain itu, Anda akan mengetahui mengapa ada lebih dari satu metode untuk mencetak dalam JavaScript, di mana dan kapan harus menggunakannya.

Beberapa opsi berguna saat Anda mengalami masalah pada kode Anda. Memahami ini akan membantu Anda men-debug atau menulis ulang skrip Anda dengan lebih nyaman. Jika Anda tertarik, simak terus artikel berikut ini.

JavaScript Output

Output pada JavaScript mendefinisikan cara untuk menampilkan output dari kode tertentu. Output dapat ditampilkan dengan menggunakan empat cara berbeda yang tercantum di bawah ini:

  1. Menulis ke dalam elemen HTML, menggunakan innerHTML.
  2. Menulis ke dalam output HTML menggunakan document.write ().
  3. Menulis ke dalam kotak peringatan, menggunakan window.alert ().
  4. Menulis ke konsol browser, menggunakan console.log ().

Artikel Terkait  Tutorial Javascript 16 : Form Javascript, Cara Membuat Form Validation Menggunakan Javascript

Melakukan Output Data

output-pada-javascript

Ada lebih dari satu cara untuk menampilkan data dalam JavaScript. Kami sekarang akan meninjau tiga metode yang tersedia dan melihat cuplikan kode berikut ini untuk masing-masing metode.

window.alert()

Metode ini digunakan untuk mencetak dalam JavaScript menampilkan data yang diberikan dalam kotak peringatan. Kotak pop-up kecil dengan tombol tutup muncul, dan menghilang setelah tombol diklik. Metode window.alert sangat baik digunakan untuk pesan informative yang pendek dan cepat, yang mana ia dapat ditutup secara instan.

window.alert(7 + 29);

document.write()

Metode document.write() digunakan untuk menulis dokumen HTML. Namun perlu diingat bahwa Anda harus berhati-hati dengan metode output JavaScript ini karena dapat menimpa konten dalam dokumen HTML.

document.write(9 + 21);

Pada contoh di bawah ini, document.write () akan menghapus semua HTML yang ada saat mengklik tombol, saat dokumen HTML dimuat sepenuhnya:

<button type="button" onclick="document.write(9 + 21)">Klik button ini untuk mencetak hasil</button>

consol.log()

Anda harus menggunakan metode console.log () untuk mencetak ke konsol JavaScript. Fungsi log konsol JavaScript terutama digunakan untuk debugging kode karena membuat JavaScript mencetak ouput ke konsol.

console.log(3 + 11);

Untuk membuka konsol browser, klik kanan pada halaman dan pilih Inspect, lalu klik Console.

document.write vs console.log

Metode ini berbeda dalam tujuan dan kasus penggunaannya. Namun, metode console.log lebih relevan dengan pengembangan web modern untuk debugging dan logging. Penggunaan document.write tidak disarankan karena fakta bahwa metode tersebut dapat menimpa semua yang ada di elemen <header> dan <body>.

Artikel Terkait  Tutorial Javascript 14 : Javascript Type Conversion, Bagaimana Cara Mengkonversi Tipe Data pada Javascript ?

Memodifikasi Konten HTML

Ada tiga opsi untuk mengubah konten elemen HTML tertentu: innerHTML, innerText atau textContent. Ketika digunakan untuk tujuan output, fungsinya sangat mirip. Namun, ada perbedaan ketika diterapkan untuk mendapatkan konten HTML. Berikut contoh dan penjelasannya di bawah ini:

<p id="test">contoh kalimat yang berisikan <span>text lain</span>    didalamnya</p>
<button onclick="getInnerText()">Mendapatkan innerText</button>
<button onclick="getInnerHTML()">Mendapatkan innerHTML</button>
<button onclick="getTextContent()">Mendapatkan textContent</button>
<script>
    function getInnerText() {
       alert(document.getElementByID("test").innerText)
    }
    function getInnerHTML() {
       alert(document.getElementByID("test").innerHTML)
    }
    function getTextContent() {
       alert(document.getElementByID("test").textContent)
    }
</script>

Lihat berikut ini ouput apa yang akan diberikan masing-masing properti ini saat mendapatkan konten dari elemen <p> di atas.

– innerText hanya mengembalikan teks tanpa spasi berlebih atau tag <span>:

“This paragraph element has excess spacing and has a span element inside.”

– innerHTML mengembalikan teks dengan semua spasi berlebih dan tag <span>:

”   This paragraph element has excess spacing   and has <span>a span element<span>    inside.”

– textContent mengembalikan teks dengan semua spasi berlebih, tetapi tanpa tag <span>:

”   This paragraph element has excess spacing   and has a span element   inside.”

innerText

Contoh di bawah ini mencari elemen HTML dengan atribut id = “hasil”. Properti innerText mendefinisikan konten elemen HTML, sehingga konten elemen di HTML akan ditimpa oleh JavaScript dengan konten baru.

document.getElementById("hasil").innerText = (9 + 20);

innerHTML

Contoh berikut mencari elemen HTML dengan atribut id = “hasil”. properti innerHTML mendefinisikan konten HTML. Oleh karena itu, konten elemen di HTML akan ditimpa oleh JavaScript dengan konten baru.

document.getElementById("hasil").innerHTML = (1 + 24);

textContent

Contoh terakhir mencari elemen HTML dengan atribut id = “hasil”. Dalam kasus ini, properti textContent mendefinisikan konten dari node tertentu. Akibatnya, konten sebuah elemen di HTML akan digantikan oleh JavaScript dengan konten baru.

document.getElementById("hasil").textContent = (5 + 43);

Demikianlah penjelasan tentang Output JavaScript yang harus Anda ketahui. Beberapa hal yang harus Anda ingat tentang Output JavaScript:

  1. Anda dapat mencetak dalam JavaScript menggunakan beberapa teknik berbeda.
  2. Opsi paling umum yang digunakan saat men-debug adalah metode log konsol JavaScript.

3.Anda harus mempraktikkan semuanya dan belajar menggunakannya dengan tepat untuk men-debug kode Anda dengan lebih baik.

Jika Anda tertarik untuk belajar JavaScript lebih jauh atau belajar bahasa pemrograman lainnya, kami menyarankan Anda untuk membaca dan belajar dari artikel-artikel Codekey.

Situs Codekey menyediakan berbagai pembahasan, tutorial, serta tips dan trik untuk Anda belajar JavaScript dan bahasa pemrograman lainnya seperti Bahasa C dan Python. Jangan lupa untuk terus mendapatkan update artikel terbaru dari situs Codekey.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Dart 18 : Ayo Mulai, Pelajari Cara Install Flutter

Pada seri tutorial Dart kali ini, Codekey akan menampilkan hal yang sedikit berbeda, yaitu tentang aplikasi-aplikasi yang mendukung pemrograman...

Tutorial SQL 9 : Agregasi SQL, Cara Mengolah data Menggunakan Fungsi Ini

Agregasi data adalah cara runtuh, meringkas, atau mengelompokan data. Agregasi adalah hal yang selalu ada di setiap aplikasi untuk...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 8 : Memahami Array Multidimensi PHP

Pada artikel sebelumnya kami telah membahas tentang array PHP serta membahas sedikit tentang array multidimensi PHP. Pada artikel kali...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial SQL 1 : Belajar SQL, Pengenalan untuk Pemula

Pernahkah Anda mendengar istilah SQL sebelumnya? Saat terjun ke dunia IT khususnya coding pemrograman komputer, SQL adalah salah satu...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya