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 4 : Mengenal Berbagai Macam Tipe Data di Javascript

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 12 : Tips Cara Penulisan Syntax pada Javascript 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 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 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

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 Javascript 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

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 HTML/CSS 3 : Pengenalan Elemen Dasar di HTML

HTML adalah bahasa Markup yang terdiri dari elemen dan tag. Artikel ini akan memberi penjelasan kepada Anda tentang elemen-elemen...

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

Tutorial HTML/CSS 1 : Pengenalan HTML untuk Pemula

Jika Anda seorang pemula dalam dunia coding dan ingin mengetahui atau belajar HTML dasar, maka artikel ini akan cocok...

Tutorial Javascript 9 : Cepat dan Mudah Cara Mengurutkan Data Array di Javascript

Pada artikel sebelumnya Anda mungkin telah membaca dan mempelajari tentang Array di JavaScript. Pada artikel kali ini, kami akan...

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...

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