Cara menggunakan JAVASCROPT pada JavaScript

Question

Output adalah sebuah tampilan program yang biasanya digunakan untuk memperlihatkan hasil akhir.

Table of Contents Show

1. Menggunakan Fungsi console.log()
2. Menggunakan Fungsi alert()
3. Menggunakan Fungsi document.write()
4. Menggunakan innerHTML
Akhir Kata…
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?
Bagaimana cara kerja JavaScript?
JavaScript bisa digunakan untuk apa saja?
Manakah script yang digunakan untuk memanggil file JavaScript?

Output biasanya ditampilkan dalam bentuk teks dengan fungsi print().

Ada 4 cara menampilkan output pada Javascript:

Menggunakan Fungsi console.log();
Menggunakan Fungsi alert();
Menggunakan Fungsi document.write();
Menggunakan innerHTML.

Apa perbedaan dari keempat cara tersebut?

1. Menggunakan Fungsi console.log()

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript.

Contoh penggunaan:

console.log("Hello World!");

Hasilnya:

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.debug(), console.info(), console.error(), console.dir(), dsb.

Fungsi-fungsi console ini juga berlaku pada console Nodejs.

2. Menggunakan Fungsi alert()

Fungsi alert() adalah fungsi untuk menampilkan jendela dialog. Fungsi sebenarnya berada pada objek window.

Secara lengkap bisa ditulis seperti ini:

window.alert("Hello World!");

Bisa juga ditulis alert() saja seperti ini:

Fungsi alert(), hanya bisa digunakan di dalam browser saja. Sedangkan pada Nodejs fungsi ini tidak ada.

Contoh penggunaan fungsi alert():

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        alert("Selamat datang di tutorial belajar Javascript");

        function sayHello(){
            alert("Hello!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Klik Aku!</button>
</body>
</html>

Hasilnya:

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

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
    <script>
        document.write("<h2>Hello World!</h2>");
        document.write("<hr>");
        document.write("<p>Saya sedang belajar Javascript</p>");
        document.write("di <b>petanikode.com</b>")
    </script>
</head>
<body>

</body>
</html>

Hasilnya:

Selain fungsi write(), objek document juga menyediakan berbagai macam fungsi untuk manipulasi dokumen HTML.

4. Menggunakan innerHTML

innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML.

Dengan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Belajar Javascript</title>
</head>
<body>

    <h2>Tutorial Javascript untuk Pemula</h2>
    <div id="hasil-output"></div>


    <script>
        // membuat objek elemen
        var hasil = document.getElementById("hasil-output");

        // menampilkan output ke elemen hasil
        hasil.innerHTML = "<p>Aku suka Javascript</p>";
    </script>

</body>
</html>

Hasilnya:

Akhir Kata…

Bagaimana?

Sudah paham ‘kan perbedaan dari keempat fungsi tersebut. Kalau kita ringkas akan seperti ini:

Fungsi console.log() untuk menampilkan output ke console Javascript;
Fungsi alert() untuk menampilkan output ke jendela dialog;
Fungsi document.write() untuk menulis output ke dokumen HTML;
Atribut innerHTML untuk menampilkan output ke elemen HTML yang lebih spesifik.

Fungsi yang manakah yang sering kamu gunakan?

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Cara membuat JavaScript di HTML secara langsung Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>

Bagaimana cara kerja JavaScript?

Cara Kerja JavaScript pada Website JavaScript di-embed langsung ke halaman web atau direferensikan melalui file .js terpisah. Saat pengunjung membuka halaman web, browser akan menjalankan skrip beserta kode HTML dan CSS untuk membuat halaman fungsional yang disajikan melalui tab browser.

JavaScript bisa digunakan untuk apa saja?

Javascript bisa digunakan untuk membuat fitur beragam seperti drag, drop komponen yang semuanya bisa bermanfaat untuk meningkatkan tampilan (interface) dan pengalaman menggunakan web. Selain itu, programmer juga bisa memperluas fungsi halaman web dengan menulis snippet Javascript untuk add-on pihak ketiga, contohnya ...

Manakah script yang digunakan untuk memanggil file JavaScript?

Kode JavaScript di input menggunakan tag <script>. Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.