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. Show
Table of Contents
Table of Contents
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 OutputOutput pada JavaScript mendefinisikan cara untuk menampilkan output dari kode tertentu. Output dapat ditampilkan dengan menggunakan empat cara berbeda yang tercantum di bawah ini:
Melakukan Output Data 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>. Memodifikasi Konten HTMLAda 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.” innerTextContoh 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);innerHTMLContoh 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);textContentContoh 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:
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 Console log Javascript untuk apa?Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript. Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console. Selain console.log() , terdapat juga beberapa fungsi untuk debugging seperti console. Apa perintah yang digunakan untuk menampilkan output ke dalam console Javascript?3. console.log() Fungsi console.log() digunakan untuk menampilkan output didalam console. Cara ini biasanya digunakan hanya untuk pengujian atau debugging agar programmer dapat mengetahui hasil output apakah sudah benar atau masih salah. Bagaimana cara membuat fungsi di javascript?Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code.. function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... . <html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>. Di manakah tempat yang benar untuk memasukkan javascript?Elemen Script atau Tag <script> pada Html digunakan untuk menampung Script pada sisi client, artinya Anda bisa menulis dan memasukkan kode javascript didalam Tag <script> tersebut. Apa itu document write pada javascript?Menggunakan Fungsi document.write() Objek document adalah objek yang mewakili dokumen HTML di dalam Javascript. Dalam objek document , terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML. Selain fungsi write() , objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML. Bagaimana cara membuat fungsi di javascript?Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code.. function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... . <html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>. Apa itu Javascript dan fungsinya?Bicara teknis, JavaScript atau kita singkat menjadi JS merupakan bahasa pemrograman jenis interpreter, sehingga kamu tidak memerlukan compiler untuk menjalankannya. JavaScript memiliki fitur-fitur seperti berorientasi objek, client-side, high-level programming, dan loosely typed. Apa itu Event di JS?Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web. Apa fungsi dari document getElementById?getElementById() fungsi untuk memilih elemen berdasarkan atribut id .
Apa fungsi DOM pada JavaScript?Document Object Model atau disingkat DOM adalah sebuah programming interface (API) untuk web dokumen. DOM merepresentasikan struktur dan konten dari dokumen web dalam bentuk node dan object supaya kita dapat mengubah struktur, style, dan konten dari dokumen tersebut.
Bagaimana cara membuat fungsi di JavaScript?Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code.. function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... . <html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>. Apa itu elemen DOM?DOM atau Document Object Model adalah antarmuka yang tidak berpihak kepada platform dan bahasa tertentu yang membuat program dan script dapat mengakses dokumen HTML secara dinamis dan mengupdate struktur, konten, dan style dokumen.
|
Cara menggunakan DOUMENT pada JavaScript
Pos Terkait
Copyright © 2024 toptenid.com Inc.
