JavaScript String Objekt
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:
11
Kokku-lahtikäivad menüüd
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:
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>

