CodeGym/Kurso sa Java/Modyul 3/Pakikipag-ugnayan ng JavaScript code sa browser

Pakikipag-ugnayan ng JavaScript code sa browser

Available

4.1 Mga bagay sa browser

Tulad ng alam mo na, gumagana ang wikang JavaScript sa loob ng browser, kaya kailangan nitong makipag-ugnayan sa parehong browser na ito. Upang gawin ito, ang browser ay may ilang mga bagay at function na magagamit mula sa JavaScript.

Ang una ay an object window, na naglalarawan sa window ng browser. O sa halip, ginamit ko upang ilarawan kapag ang mga browser ay walang mga tab. Ngayon ang window object ay naglalarawan sa kasalukuyang tab ng browser kung saan na-load ang page na may script.

Pangalawa, ito an object documentang may pananagutan para sa dokumentong ipinapakita sa tab. Ito ay maaaring medyo nakakalito. Para sa pagiging simple, sabihin nating ang dokumento ay kung ano ang ipinapakita sa user, at ang window ay kung saan ipinapakita ang dokumentong ito.

Pangatlo, ito an object consoleang responsable para sa output sa browser console. Oo, mayroon ding console ang mga browser, pangunahing ginagamit ito para sa pag-debug ng script at pagpapakita ng mga mensahe ng error. Karaniwan mong mabubuksan ito sa pamamagitan ng pagpindot sa F12 button sa iyong browser.

Object window, ay ang top-level na object para sa lahat ng page object. At kahit na maaari mong direktang isulat ang mga pangalan ng object documentsa consoleiyong script, sa katunayan, ang kanilang mga pangalan window.documentat window.console.

4.2 Mga diyalogo sa JavaScript

alert() na pamamaraan

Mayroon din itong an object windowilang mga function na makikita sa script ng pahina. Ang pinakakaraniwang ginagamit ay ang alert(). Pinapayagan ka nitong magpakita ng dialog box na may mensahe sa user. Pagkatapos ay sinuspinde ang script hanggang sa mag-click ang user ng OK.

Halimbawa:

alert("JavaScript is the best!");

prompt() na pamamaraan

Mayroon ding isang function kung saan maaari mong hilingin sa gumagamit na magpasok ng ilang halaga - ito ay prompt().

Halimbawa:

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

confirm() na paraan

Maaari kang magpakita ng dialog box na may dalawang button Ok- Canceltanungin ang user tungkol sa ilang aksyon.

Halimbawa:

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

4.3 onload() na kaganapan

At isa pang kapaki-pakinabang at kawili-wiling sandali. Ang window ng browser ay may isang kaganapan na gumagana kapag ang dokumento ay ganap na na-load. Maaari mong tukuyin ang code na isasagawa pagkatapos ma-load at maipakita ang dokumento.

Magagawa ito sa tatlong paraan.

Una, maaari mong direktang i-embed ang JavaScript code sa isang HTML page bilang isang attribute value:

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

Pangalawa, maaari mong i-embed ang JavaScript code sa isang HTML na pahina:

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

Pangatlo, maaari nating isulat ito nang medyo mas maikli sa pamamagitan ng pagdedeklara ng isang hindi kilalang function:

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

4.4 onclick() na kaganapan

At sa wakas, isa pang mahalagang kaganapan (kaganapan) ay event OnClick. Na nangyayari sa anumang elemento na na-click ng user. Tulad ng event OnLoadmaaari itong itakda sa iba't ibang paraan, kaya ang pinakasimpleng paraan lang ang ibibigay namin:

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

Mga komento
  • Sikat
  • Bago
  • Luma
Dapat kang naka-sign in upang mag-iwan ng komento
Wala pang komento ang page na ito