JavaScript String Objekt

CSS String objekt võimaldab manipuleerida teatud teksti osadega.

Näited:

  Vastus rea pikkusest
Selles näites demonstreeritakse kuidas kasutada "lenght" omadust selleks, et saada tulemuseks, rea pikkus numbri kujul.

  Stringi stiil
Selles näites demonstreeritakse kuidas kujundada stringi.

  match() meetod
Selles näites demonstreeritakse kuidas match() meetod otsib määratud väärtuse stringis.

  Asendamine
Selles näites demonstreeritakse kuidas stringis asendada üks märk teisega.

Siin on nimestik kõigist string objektide omadustest ja meetoditest koos kirjelduste ja näidetega.
  String objektide nimestik

String Objekt

String objekt võimaldab manipuleerida teatud teksti osadega.

Allpool olevas näites kasutatakse "lenght" omadust selleks, et objekt tagastaks teate selle kohta, mitmest karakterist koosneb rida:

  <script type="text/javascript">
    var txt="Tere jälle!";
document.write(txt.length);
  </script>

Tulemus peaks olema selline:

Kokku-lahtikäivad menüüd

+ Lingid 1-3

Link 1 Link 2 Link 3

+ Lingid 4-7

Link 4 Link 5 Link 6 Link 7

+ Lingid 8-11

Link 8 Link 9 Link 10 Link 11

Navigatsioon on oluline osa veebidisainis. Mõnikord võib navigatsiooni-menüü võtta veebilehel liiga palju ruumi. Sellisel juhul on hea menüü n.ö. kokku pakkida kuni veebilehe külastajal seda jälle vaja läheb.

Sellise menüü tegemiseks kopeeri kõigepealt allpool olev kood ja salvesta nimega clmenu.js:

Kuna näitena toodud menüü koosneb JavaScript'ist ja CSS'ist siis kirjuta veebidokumendi head sektsiooni:

<script src="clmenu.js"
          type="text/javascript"></script>
          <link href="clmenu.css"
          type="text/css" rel="stylesheet"/>

Järgmiseks kopeeri menüü CSS kood ja salvesta see nimega clmenu.css:

Vaatame seda koodi veidi lähemalt ja uurime mida mingi koodi osa teeb.

mc - on kogu menüü kokku-lahti pakkija. Antud näites on tema atribuutideks: 120px laiust, 5px margin asukohaga paremas (align-right) servas. Loomulikult saad atribuutide väärtusi muuta oma soovi järgi.

mH - määrab menüü pealkirjad mis on veebilehel alati nähtavad. Soovitan jätta cursor:pointer; atribuudi alles, siis saab külastaja aru, et vastav koht on lingitav.
Samuti border-top:1px atribuut teeb menüü kergemini loetavaks.

mL - muudab menüü osad kokku-lahti käivateks. display:none atribuut on vajalik selleks, et kõik menüüd oleksid kokkupakitud kui veebileht esimest korda avaneb. bottom margin muudab alam-menüünde omavahelist kaugust ja kaugust dokumendi kehast (body).

mO - määrab iga menüü omadused. Antud juhul display:block on vajalik selleks, et lingid kuvatakse üksteise järel. Vastasel juhul paigutuksid lingid ühte ritta. left margin nihutab alam-linke pealinkide suhtes.

Kõige lõpuks lisame veebidokumenti Html koodi:

<div class="mC">
<div class="mH"
onclick="toggleMenu('menu1')">+ Lingid 1-3</div>
<div id="menu1" class="mL">
<a class="mO" href="#">Link 1</a>
<a class="mO" href="#">Link 2</a>
<a class="mO" href="#">Link 3</a>
</div>
<div class="mH"
onclick="toggleMenu('menu2')">+ Lingid 4-7</div>

<div id="menu2" class="mL">
<a class="mO" href="#">Link 4</a>
<a class="mO" href="#">Link 5</a>
<a class="mO" href="#">Link 6</a>
<a class="mO" href="#">Link 7</a>
</div>
<div class="mH"
onclick="toggleMenu('menu3')">+ Lingid 8-11</div>
<div id="menu3" class="mL">
<a class="mO" href="#">Link 8</a>
<a class="mO" href="#">Link 9</a>
<a class="mO" href="#">Link 10</a>
<a class="mO" href="#">Link 11</a>
</div>
</div>

Liug-menüü

Siin on veel üks menüü näide. Liug-menüü avaneb ja sulgub nagu sahtel, võtab vähe ruumi ja liigub veebilehe kerimisel kaasa.
Selle menüü tegemiseks, kopeeri allpool olev Javascript'i kood ja salvesta see nimega slideh.js:

var speed = 6;
var aDOM = 0, ieDOM = 0, nsDOM = 0;
var stdDOM = document.getElementById;
if (stdDOM) aDOM = 1;
else {
   ieDOM = document.all;
   if (ieDOM) aDOM = 1;
   else {
      var nsDOM = ((navigator.appName.indexOf('Netscape') != - 1) &&

(parseInt(navigator.appVersion) == 4));
      if (nsDOM) aDOM = 1;
      }
   }
function xDOM(objectId, wS) {
   if (stdDOM) return wS ? document.getElementById(objectId).style :

document.body.clientWidth : null;
   }
function pageHeight() {
   return window.innerHeight != null ? window.innerHeight : document.body != null ?

document.body.clientHeight : null;
   }
function posLeft() {
   return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :

document.documentElement.scrollLeft ? document.documentElement.scrollLeft :

document.body.scrollLeft ? document.body.scrollLeft : 0;
   }
function posTop() {
   return typeof window.pageYOffset != 'undefined' ? window.pageYOffset :

document.documentElement.scrollTop ? document.documentElement.scrollTop :

Järgmiseks, kopeeri allpool olev CSS kood ja salvesta see nimega slide.css:

Selleks, et need koodid käivituksid, kirjuta oma veebidokumendi head sektsiooni:

<script type="text/javascript" src="slideh.js"></script>
<link rel="stylesheet"href="slide.css" 

type="text/css"/>

Lõpuks kirjuta allpool olev HTML kood oma veebidokumendi kehasse, kohe body märgise järele

See osa Html koodist jäta muutmata.

<div id="smenu"><div id="sleft">

Siia paiguta lingid nii nagu ise soovid.

<a href="#">1: Link</a><br />
<a href="#">2: Link</a><br />
<a href="#">3: Link</a><br />
<a href="#">4: Link</a><br />
<a href="#">5: Link</a><br />

See osa Html koodist jäta muutmata.

</div><div id="sright">
<a href="#" onclick="return slide();return false;">
M<br />E<br />N<br />Ü<br/>Ü
</a></div></div>

JavaScript String Objekt

String Objekt

Kokku-lahtikäivad menüüd

Liug-menüü

Menüü

Objektid

Arendused

Kasulikud Lingid