JavaScript Tekstis

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:
Head sektsioon

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

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:

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

// Rotating Object
// copyright Stephen Chapman, 11th March 2006
// you may copy this script provided that you retain the copyright notice
var speed = 150;
var obj = pX = pY = pos = RR = null; function pageWidth() {return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;} function pageHeight() {return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;} function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement && document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;} function iRotate() {obj = document.getElementById('rotate');obj.style.position = 'absolute'; obj.style.visibility = 'visible'; sRotate(); rotate();} function sRotate() {pX = (pageWidth() - obj.offsetWidth) / 2;  pY = (pageHeight() - obj.offsetHeight) /20; RR = (pageHeight() - (pY * 2) - obj.offsetHeight) / 25; pos=1; } function rotate()  {if (pos > 80) pos = 1; var nX = pX + (Math.cos(pos * (Math.PI/40)) * RR); var nY = pY + (Math.sin(pos * (Math.PI/40)) * RR); obj.style.left = Math.round(nX+posLeft()) + 'px'; obj.style.top = Math.round(nY+posTop()) + 'px'; pX = nX; pY = nY; pos++; setTimeout ('rotate()',speed); return;} window.onload = iRotate; window.onresize = sRotate;

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]-->

JavaScript Tekstis

External (välimine) JavaScript

Liikuv pilt javascript'i abil

Menüü

Objektid

Arendused

Kasulikud Lingid