CodeGym/Kursus Java/Modul 3/Interaksi kod JavaScript dengan penyemak imbas

Interaksi kod JavaScript dengan penyemak imbas

Tahap, pelajaran
Tersedia

4.1 Objek pelayar

Seperti yang anda sedia maklum, bahasa JavaScript berfungsi di dalam penyemak imbas, jadi ia entah bagaimana perlu berinteraksi dengan pelayar yang sama ini. Untuk melakukan ini, penyemak imbas mempunyai beberapa objek dan fungsi yang tersedia daripada JavaScript.

Yang pertama ialah an object window, yang menerangkan tetingkap penyemak imbas. Atau sebaliknya, saya pernah menerangkan apabila penyemak imbas tidak mempunyai tab. Sekarang objek tetingkap menerangkan tab penyemak imbas semasa di mana halaman dengan skrip dimuatkan.

Kedua, ini adalah an object documentorang yang bertanggungjawab untuk dokumen yang dipaparkan dalam tab. Ini mungkin sedikit mengelirukan. Untuk kesederhanaan, katakan bahawa dokumen ialah apa yang dipaparkan kepada pengguna, dan tetingkap ialah tempat dokumen ini dipaparkan.

Ketiga, ini adalah an object consoleyang bertanggungjawab untuk output ke konsol penyemak imbas. Ya, pelayar juga mempunyai konsol, ia digunakan terutamanya untuk menyahpepijat skrip dan memaparkan mesej ralat. Anda biasanya boleh membukanya dengan menekan butang F12 dalam pelayar anda.

Object window, ialah objek peringkat atas untuk semua objek halaman. Dan walaupun anda boleh terus menulis nama objek documentdalam consoleskrip anda, sebenarnya, nama window.documentdan window.console.

4.2 Dialog dalam JavaScript

kaedah alert().

Ia juga an object windowmempunyai beberapa fungsi yang boleh dilihat oleh skrip halaman. Yang paling biasa digunakan ialah alert(). Ia membolehkan anda memaparkan kotak dialog dengan mesej kepada pengguna. Skrip kemudiannya digantung sehingga pengguna mengklik OK.

Contoh:

alert("JavaScript is the best!");

kaedah prompt().

Terdapat juga fungsi yang anda boleh meminta pengguna untuk memasukkan beberapa nilai - ini adalah prompt().

Contoh:

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

kaedah confirm().

Anda boleh memaparkan kotak dialog dengan dua butang Ok- Canceltanya pengguna tentang beberapa tindakan.

Contoh:

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

4.3 onload() acara

Dan satu lagi momen yang berguna dan menarik. Tetingkap penyemak imbas mempunyai peristiwa yang menyala apabila dokumen dimuatkan sepenuhnya. Anda boleh menentukan kod untuk dilaksanakan selepas dokumen dimuatkan dan dipaparkan.

Ini boleh dilakukan dalam tiga cara.

Pertama, anda boleh membenamkan kod JavaScript terus ke halaman HTML sebagai nilai atribut:

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

Kedua, anda boleh membenamkan kod JavaScript hanya dalam halaman HTML:

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

Ketiga, kita boleh menulisnya sedikit lebih pendek dengan mengisytiharkan fungsi tanpa nama:

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

4.4 acara onclick().

Dan akhirnya, satu lagi peristiwa penting (peristiwa) ialah event OnClick. Yang berlaku pada mana-mana elemen yang diklik oleh pengguna. Sama seperti event OnLoadia boleh ditetapkan dalam cara yang berbeza, jadi kami hanya akan memberikan yang paling mudah:

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

Komen
  • Popular
  • Baru
  • Tua
Anda mesti log masuk untuk meninggalkan ulasan
Halaman ini tidak mempunyai sebarang ulasan lagi