Media Belajar Bahasa Pemrograman | by APPKEY

Javascript Tutorial Javascript 11 : Cara Menggunakan Fungsi Output pada...

Tutorial Javascript 11 : Cara Menggunakan Fungsi Output pada Javascript

-

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 12 : Tips Cara Penulisan Syntax pada Javascript dengan Mudah

Melakukan Output Data

javascript-11

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 20 : Cara Menggunakan Javascript Substring dengan Mudah

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 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 Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial Python 9 : Cara membuat perulangan (Looping) pada 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 PHP 8 : Memahami Array Multidimensi di PHP | Kapan dan Bagaimana Menggunakannya?

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

Tutorial Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 8 : Panduan Lengkap Cara Membuat Array di Javascript

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

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

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

Tutorial PHP 9 : Belajar Menggunakan Sort Array Berdasarkan Key dan Value

Array PHP sangat berguna untuk para developer untuk menyimpan data pada variabel. Anda dapat mengelompokkannya dengan membuat kategori tertentu...

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