CodeGym/Java Course/Modul 3/Interaksi kode JavaScript dengan browser

Interaksi kode JavaScript dengan browser

Level 7, Pelajaran 3
Tersedia

4.1 Objek peramban

Seperti yang sudah Anda ketahui, bahasa JavaScript berfungsi di dalam browser, jadi entah bagaimana perlu berinteraksi dengan browser yang sama ini. Untuk melakukan ini, browser memiliki beberapa objek dan fungsi yang tersedia dari JavaScript.

Yang pertama adalah an object window, yang menjelaskan jendela browser. Atau lebih tepatnya, saya biasa menjelaskan saat browser tanpa tab. Sekarang objek jendela menjelaskan tab browser saat ini di mana halaman dengan skrip dimuat.

Kedua, ini an object documentyang bertanggung jawab atas dokumen yang ditampilkan di tab. Ini mungkin sedikit membingungkan. Untuk kesederhanaan, katakanlah dokumen adalah apa yang ditampilkan kepada pengguna, dan jendela adalah tempat dokumen ini ditampilkan.

Ketiga, inilah an object consoleyang bertanggung jawab atas output ke konsol browser. Ya, browser juga memiliki konsol, terutama digunakan untuk men-debug skrip dan menampilkan pesan kesalahan. Anda biasanya dapat membukanya dengan menekan tombol F12 di browser Anda.

Object window, adalah objek tingkat atas untuk semua objek halaman. Dan meskipun Anda dapat langsung menulis nama objek documentdi consoleskrip Anda, pada kenyataannya, nama window.documentdan window.console.

4.2 Dialog dalam JavaScript

waspada() metode

Ini juga an object windowmemiliki beberapa fungsi yang dapat dilihat oleh skrip halaman. Yang paling umum digunakan adalah alert(). Ini memungkinkan Anda untuk menampilkan kotak dialog dengan pesan kepada pengguna. Skrip kemudian ditangguhkan hingga pengguna mengklik OK.

Contoh:

alert("JavaScript is the best!");

prompt() metode

Ada juga fungsi yang dapat digunakan untuk meminta pengguna memasukkan beberapa nilai - ini adalah prompt().

Contoh:

var age = prompt("Enter Year of Birth");

konfirmasi() metode

Anda dapat menampilkan kotak dialog dengan dua tombol Ok- Canceltanyakan kepada pengguna tentang beberapa tindakan.

Contoh:

var isOK = confirm("Are you ready");

4.3 memuat() acara

Dan satu lagi momen yang bermanfaat dan menarik. Jendela browser memiliki peristiwa yang muncul saat dokumen dimuat sepenuhnya. Anda dapat menentukan kode yang akan dieksekusi setelah dokumen dimuat dan ditampilkan.

Ini dapat dilakukan dengan tiga cara.

Pertama, Anda dapat menyematkan kode JavaScript langsung ke halaman HTML sebagai nilai atribut:

<body onload="alert('document loaded');">
  <img src="big-image.png">
</body>

Kedua, Anda dapat menyematkan kode JavaScript hanya di halaman HTML:

<head>
    <script>
        function load()
        {
            alert('document loaded');
        }
        window.onload = load;
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

Ketiga, kita dapat menulisnya sedikit lebih pendek dengan mendeklarasikan fungsi anonim:

<head>
    <script>
        window.onload = function () {
            alert('document loaded');
        }
    </script>
</head>
<body>
    <img src="big-image.png">
</body>

4.4 acara onclick()

Dan terakhir, event (acara) penting lainnya adalah event OnClick. Yang terjadi pada elemen apa pun yang diklik pengguna. Sama seperti event OnLoaditu dapat diatur dengan cara yang berbeda, jadi kami hanya akan memberikan yang paling sederhana:

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>

Komentar
  • Populer
  • Baru
  • Lama
Anda harus login untuk memberikan komentar
Halaman ini belum memiliki komentar