JavaScript Switch

CSS Switch lausung on põhimõtteliselt "if..else" lausungi täiendatud variant. Selle lausungi abil on kergem koodi kirjutada.

Näide

Switch lausung
Selles näites demonstreeritakse kuidas kirjutada switch lausungit.

JavaScript Switch Lausung

Switch lausungit kasutatakse siis kui soovitakse käivitada ühte mitmest koodide blokist.

Süntaks

   switch(n)
{
case 1:
  käivitub koodi-blokk 1
  break;    
case 2:
  käivitub koodi-blokk 2
  break;
default:
  kood käivitub kui n on
  erinev juhtumist 1 ja 2
}

Näide

  <script type="text/javascript">
//Siin saad erinevaid tervitusi
//sõltuvalt nädalapäevast. Pane tähele, et Pühapäev on =0,
//Esmaspäev=1, Teisipäev=2, jne.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
  document.write("Lõpuks ometi Reede");
  break;
case 6:
  document.write("Lahe Laupäev");
  break;
case 0:
  document.write("Paistes Pühapäev");
  break;
default:
  document.write("Vaatame mis uus nädal toob!");
}
  </script>

Pane tähele: Eralda iga sündmus "break" märgiga. Vastasel juhul käivitub järgmine sündmus automaatselt.

Vesivärvi palett

Nagu tead saab kolme põhivärvi (punane, sinine, roheline) abil luua miljoneid erinevaid värvitoone.Siin on üks JavaScripti abil loodud värvipalett. Klikkides erinevatele värvidele saame koheselt vastavate värvide segamise tulemuse. Segamise ala puhastamiseks, vajuta "Puhasta" nuppu.

Esimese astme värvid

Segamise ala

Teise astme 

värvid

Eks see ole lihtsalt veel üks JavaScript'i vidin. Praktiline kasu võiks olla sellest siis kui kodus remonti tehes üritad värve segada. Saad sellise skripti abil tulemust kohe näha.
Kui soovid siis saad selle skripti omale. Kopeeri kõigepealt allpool olev kood ja säilita nimega paint.js.

// Paint Colour Mixer
// copyright Stephen Chapman, 13th April 2006
// you may copy this code but please keep the copyright notice as well
var baseC = '256,256,256'; var redC = '-2,-8,-8'; var blueC = '-8,-8,-2'; var yellowC =

'0,0,-8'; var orangeC = '1,1,0'; var greenC = '-4,0,-3'; var purpleC = '1,0,1'; var blackC =

'-3,-4,-1'; var redV = blueV = yellowV = 0;
function limit(val) {if (val > 32) val = 32; if (val < 0) val = 0; return val;}
function change(r,y,b) {redV = limit(redV + r);  yellowV = limit(yellowV + y);  blueV =

limit(blueV + b); var shade = new mathArray(baseC);var tot = redV + blueV + yellowV; if (tot >

0) {var redA = new mathArray(redC);redA.multiply(redV*redV/tot);shade.add(redA);var blueA = new

mathArray(blueC);blueA.multiply(blueV*blueV/tot);shade.add(blueA);var yellowA = new

mathArray(yellowC);yellowA.multiply(yellowV*yellowV/tot);shade.add(yellowA);var orangeA = new

mathArray(orangeC);orangeA.multiply((redV * yellowV) /32);shade.add(orangeA);var greenA = new

mathArray(greenC);greenA.multiply((blueV * yellowV) /32);shade.add(greenA);var purpleA = new

mathArray(purpleC);purpleA.multiply((blueV * redV) /32);shade.add(purpleA);var blackA = new

mathArray(blackC);blackA.multiply((blueV * redV * yellowV)

/1024);shade.add(blackA);}shade.max(255);shade.min(0);shade.intg();document.getElementById('patc

h').style.backgroundColor = 'rgb(' + shade.value[0] + ',' + shade.value[1] + ',' +

shade.value[2] + ')';}

Nüüd kirjuta oma dokumendi "head" sektsiooni:

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

Järgmiseks kopeeri allpool olev kood ja säilita nimega paint.css

.l {float:left;}
.cl {clear:left;}
.cb {clear:both;}
.r {float:right;}
.s {width:25px;height:25px;}
.m {width:50px;height:25px;}
#paintchart {width:300px;margin:0 auto;font-size:12px;}
#patch {width:170px;height:164px;border:1px solid #ccc;float:right;}
#rd1 {background-color:rgb(248,224,224);}
#rd2 {background-color:rgb(240,192,192);}
#rd3 {background-color:rgb(224,128,128);}
#rd4 {background-color:rgb(192,0,0);}
#or1 {background-color:rgb(252,240,224);}
#or2 {background-color:rgb(250,226,192);}
#or3 {background-color:rgb(248,200,128);}
#or4 {background-color:rgb(255,160,0);}
#ye1 {background-color:rgb(255,255,224);}
#ye2 {background-color:rgb(255,255,192);}
#ye3 {background-color:rgb(255,255,128);}
#ye4 {background-color:rgb(255,255,0);}
#gr1 {background-color:rgb(238,240,234);}
#gr2 {background-color:rgb(216,224,210);}
#gr3 {background-color:rgb(160,192,152);}
#gr4 {background-color:rgb(0,128,0);}
#bl1 {background-color:rgb(224,224,248);}
#bl2 {background-color:rgb(192,192,240);}
#bl3 {background-color:rgb(128,128,224);}
#bl4 {background-color:rgb(0,0,192);}
#pu1 {background-color:rgb(236,224,236);}
#pu2 {background-color:rgb(200,160,200);}
#pu3 {background-color:rgb(184,128,184);}
#pu4 {background-color:rgb(128,0,128);}

Lõpuks lisa Html element sinna kus sa soovid, et värvipalett ilmuks. Värvipaleti kood on selline:

<div id="paintchart"><div class="l"><b>Esimese astme värvid</b></div><div

class="r"><b>Segamise ala</b></div><div style="clear:both"></div><div id="patch"

onclick="change(-32,-32,-32);"></div><div id="rd1" class="s l"

onclick="change(4,0,0)"></div><div id="rd2" class="s l" onclick="change(8,0,0)"></div><div

id="rd3" class="s l" onclick="change(16,0,0)"></div><div id="rd4" class="m l"

onclick="change(32,0,0)"></div><div class="cl"><div id="ye1" class="s l"

onclick="change(0,4,0)"></div><div id="ye2" class="s l" onclick="change(0,8,0)"></div><div

id="ye3" class="s l" onclick="change(0,16,0)"></div><div id="ye4" class="m l"

onclick="change(0,32,0)"></div><div class="cl"></div><div id="bl1" class="s l"

onclick="change(0,0,4)"></div><div id="bl2" class="s l" onclick="change(0,0,8)"></div><div

id="bl3" class="s l" onclick="change(0,0,16)"></div><div id="bl4" class="m l"

onclick="change(0,0,32)"></div><div  class="cl"></div><div class="l"><b>Teise astme

värvid</b></div></div><div id="or1" class="cl s l" onclick="change(4,4,0)"></div><div

id="or2" class="s l" onclick="change(8,8,0)"></div><div id="or3" class="s l"

onclick="change(16,16,0)"></div><div id="or4" class="m l" onclick="change(32,32,0)"></div><div

class="cl"></div><div id="gr1" class="s l" onclick="change(0,4,4)"></div><div id="gr2" class="s

l"onclick="change(0,8,8)"></div><div id="gr3" class="s l" onclick="change(0,16,16)"></div><div

id="gr4" class="m l" onclick="change(0,32,32)"></div><div class="cl"></div><div id="pu1"

class="s l" onclick="change(4,0,4)"></div><div id="pu2" class="s l"

onclick="change(8,0,8)"></div><div id="pu3" class="s l"  onclick="change(16,0,16)"></div><div

id="pu4" class="m l" onclick="change(32,0,32)"></div><div class="cb"></div><div

class="r"><form><input type="button" value="Puhasta" onclick="change(-32,-32,-32);"

/></form></div></div>

Koodi autor on Stephen Chapman

JavaScript Switch

JavaScript Switch Lausung

Vesivärvi palett

Menüü

Objektid

Arendused

Kasulikud Lingid