Site hosted by Angelfire.com: Build your free website today!

JavaScript Tekstis

JvaScript

JavaScript'i võib kirjutada nii "head" kui ka "body" sektsiooni.

Sellel lehel on üks helesinine pall mis liigub ringiratast. Selline efekt on saavutatud samuti JavaScript'i abil. Kuidas pilti niimoodi liikuma, sellest tuleb lehekülje lõpus juttu.

Näited:
 red_dot.gif Head sektsioon

Script, mis sisaldab mingit funktsiooni, kirjutatakse dokumendi "head" sektsiooni selleks, et külastaja saaks selle ise käivitada.

 red_dot.gif Body sektsioon

Script on paigutatud "body" sektsiooni.

Selleks, et külastaja saaks ise JavaScript'i käivitada, tuleb kood kirjutada Html dokumendi "head" sektsiooni.

JS koodi kirjutamiseks kasutatakse <script> märgist:

      <html>
    <head>
  <script type="text/javascript">
....
  </script>
    </head>
      </html>

Selleks, et JavaScript käivituks lehekülje alla-laadimisel, tuleb see kirjutada Html dokumendi "body" sektsiooni. "body" sektsioonis, muudab script vastavalt kodeeringule, dokumendi sisu.

       <html>
     <head>
     </head>
    <body>
  <script type="text/javascript">
....
  </script>
    </body>
      </html>

Scripte võib lisad dokumenti ükskõik kui palju. Samuti võib kirjutada scripte nii "head" kui ka "body" sektsiooni korraga.

        <html>
      <head>
  <script type="text/javascript">
....
  </script>
    </head>
  <body>
  <script type="text/javascript">
....
  </script>
  </body>
       </html>

External (välimine) JavaScript

Kui on vaja, et sama JavaScript töötaks mitmel veebilehel korraga siis ei pea igale lehele seda koodi kirjutama. Selle asemel saab kasutada välimist (external) JavaScript'i faili. Falile tuleb lisada laiend .js.

Pane tähele: external script'i fail, ei tohi sisaldada <script> märgist!

External script'i kasutades anname dokumendis viite "src" atribuudi abil, <script> märgise juures:

      <html>
    <head>
  <script src="minuscript.js">
  </script>
    </head>
     <body>
     </body>
      </html>

Näide:

 red_dot.gif Välimine (external) JavaScript

Liikuv pilt javascript'i abil

Veebilehe kujundamise juurde kuuluvad mitmesugused efektid milliseid saab käivitada Javasctipt'i abil. Efektid ise pole veebidisaini kõige olulisemad komponendid kuid neid osavalt kasutades on võimalik külastajat vaatama meelitada või siis millelegi tähelepanu juhtida.
Oletame, et soovid mingisugust pilti panna oma veebilehel liikuma. Kõigepealt tuleb valida sobiv pilt ja see oma kontole üleslaadida. Parema tulemuse saab siis kui pildil puudub taust (transparent). Vastasel juhul jääb pilt koos oma vaikimisi taustaga ning tulemus on kohmakas.
Kopeeri allpool olev kood ja säilita see nimega rotate.js

Dokumendi "head" sektsiooni kirjuta alljärgnev kood:

<script type="text/javascript" src="rotate.js">

Edasi tuleb valitud objekt määratleda. Selleks kirjutame dokumendi "body" sektsiooni:

<div id="rotate" style="visibility:hidden">
<img src="pilt.gif" height="60" width="60" border="0"
style="opacity:0.4;
filter:alpha(opacity=40)"
onmouseover="this.style.
opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.
opacity=0.4;this.filters.alpha.opacity=40" />
</div> 

Koht kuhu kood kirjutada pole oluline. Pildi mõõdud tuleb loomulikult sinul endal kirjutada, samuti pildi src asukoht.
Selleks, et pilt vaatajat liiga ei häiriks olen siin kasutanud "onmouseover" ja "opacity" elemente. Nende elementide väärtusi saad ise muuta. Ja ongi valmis.

Pane tähele: IE ei kuva "transparent" pilte korralikult. Selleks kopeeri allpool olev kood oma dokumendi "head" sektsiooni.

<!--[if lte IE 6,7,8]>
<script type="text/javascript" 
src="http://pmsc.free.fr/J/06817221012.js">
</script><![endif]-->