☰

» »

Javascript problemcek

Javascript problemcek

ddeben ::

S pomocjo javascripta morm naredit tole tabelo. Od uporabnika se zahteva vnos višine in širine tabele (enota je celica tabele). Obliko tabele je treba zapisati s css v glavi spletne strani. Zna kdo pomagati, ker nimam ideje kako in kaj?
  • spremenil: ddeben ()

tempoFlow ::

V glavo (head) vpišeš nekaj takšnega:
<head>
<style type="text/css">
.siva {
background-color: grey }
.zelena {
background-color: green }
</style>
<script type="text/javascript">
var sirina = prompt("Vnesi širina","")
var visina = prompt("Vnesi visino","")

<script>
</head>
Potem pa v body napišeš dvojno for zanko, najprej po višini, nato po širini in vsakič izpišeš eno celico tabele z dokument.write in pa izmenično uporabiš stil (class=) zelena in siva. To narediš tako, da ustvariš spremenljivko npr. zelena in ji daš vrednost true. V for zanki preveriš ali je true in nato celico označiš kot zeleno, spremenljivko daš na true. V primeru da je spremenljivka false, pa jo postaviš na true, celica pa je siva.

Zgodovina sprememb…

ddeben ::

Koda zgleda takole, ampak zdej je pa problem tisti css...ne znam nastimati barve slika

Zgodovina sprememb…

  • spremenil: ddeben ()

tempoFlow ::

Obe for zanki si naredil v redu. Sedaj moraš le še pred izpisom posamezne celice preveriti neko preddefinirano spremenljivko npr. zelena, ki ti označuje ali je celica zelene barve ali ne. Narediti je potrebno nekaj takšnega (koda ni nujno, da deluje, saj je nisem zagnal):

<table border="1" cellpadding="1">
<script type="text/javascript">
zelena = false; // prva celica je siva - če hočeš, da je zelena, postavi na true
for (i = 0; i < a; i++) {
document.write('<tr>');
for (j = 0; j < b; j++) {
document.write('<td width=40 height="40" class="');
if (zelena) {
document.write('zelena');
zelena = false }
else {
document.write('siva');
zelena = true }
document.write('">&nbsp;</td>');
}
document.write('</tr>');
}
</script>
</table>

EDIT: preveril javascript in naj bi deloval

Zgodovina sprememb…

ddeben ::

Ja zdaj to dela, samo ne pravilno..zdaj mi stolpce obarva enako. Barve se morajo pa izmenjavati.

tempoFlow ::

Sorry - jaz sem vedno preverjal z lihim številom stolpcev, tam deluje.
Pošiljam popravljen program:
<table border="1" cellpadding="1">
<script type="text/javascript">
zelena = false;
for (i = 0; i < a; i++) {
 document.write('<tr>');
 for (j = 0; j < b; j++) {
  document.write('<td width=40 height="40" class="');
  if (zelena) document.write('zelena');
  else document.write('siva');
  zelena = !zelena;
  document.write('">&nbsp;</td>');
 }
 document.write('</tr>');
 if ((b % 2) == 0) zelena = !zelena;
}
</script>
</table>

ddeben ::

Mi lahko poves na katerem mestu se v notranju for zanki spremeni vrednost zelene na false oz. kako preide na sivo barvo?

kogledom ::

Moraš nujno uporabiti tabelo ? Jaz bi to naredil tako:
<head>
<style type="text/css">
.siva {
  background-color: grey;
}
.zelena {
  background-color: green;
}
#container div {
  float:left;
  width: 40px;
  height: 40px;
  margin: 2px;
}
</style>
<script type="text/javascript">
function tabela(){
var sirina = prompt("Vnesi širina","")
var visina = prompt("Vnesi visino","")
var contDiv = document.getElementById("container");
contDiv.style.width = sirina*44+"px";
var barva1 = false; // prva celica je siva - če hočeš, da je zelena, postavi na true
for (i = 0; i < visina; i++) {
  var barva2 = barva1;
  for (j = 0; j < sirina; j++) {
    var el = document.createElement('div');
    el.innerHTML ="&nbsp";
    barva2 == true ? el.setAttribute("class", "zelena") : el.setAttribute("class", "siva");
    barva2 = !barva2;
    contDiv.appendChild(el);
  }
  barva1 = !barva1;
}
}
</script>
</head>
<body>
<body onload="tabela()">
<div id="container">
</div>
</body>

ddeben ::

Ja, mora biti tabela...

kogledom ::

tisto kar vprašuješ više pa je
zelena = !zelena;
! ti v tem primeru negira boolean, torej iz true v false in obratno.

tempoFlow ::

Spremenljivki zelena se vrednost spremeni za vsako celico. Prav tako pa se spremeni tudi v vsaki vrstici (zato da pride do šahovnice in ne do stolpcev), ampak le če je število stolpcev sodo, kar preveri pogoj if ((b % 2) == 0) zelena = !zelena.

ddeben ::

Se pravi, da ko gre za j=0 skozi, gre skozi prvi if stavek in tisti else ignorira. Ko gre j=1 skozi gre pa avtomatsko na else???

tempoFlow ::

Delovanje algoritma:

a=10, b=5
1. privzeta vrednost zelena = false.
2. i=0, j=0 - if (zelena) ni izpolnjen, zato gre na else in izpiše 'siva'
3. zelena = !zelena obrne vrednost zelena na true
4. if ((b % 2) == 0) pogoj ni izpolnjen (sodo število stolpcev), zato zelena ostane na true
5. Nova iteracija j=1 vrednost zelena = true
6. if (zelena) je izpolnjen, zato izpiše 'zelena'
7. zelena = !zelena obrne vrednost zelena na false

Razlika nastane pri sodem številu stolpcev, kjer je v koraku 4 pogoj izpolnjen in spremenljivko zelena obrne, zato da je barva prvega stolpca vedno drugačna (enkrat zelena, drugič siva), saj drugače dobiš stolpce in ne šahovnice.

ddeben ::

Tisti /tr se vsakic izvede ko izpise eno celico v isti vrsti? Ali samo ko pride stevec j do tiste zgornje meje?

tempoFlow ::

Glej. Imaš dve for zanki eno znotraj druge. Zunanja povečuje i in skrbi za izpis vrstic, notranja povečuja j in skrbi za izpis celic.
Pred začetkom notranje zanke se izpiše začetek nove vrstice <tr>, po koncu pa zaključek vrstice </tr>
Tako, da se tr in /tr izpišeta v vsaki vrstici samo enkrat (na začetku in na koncu) - document.write('</tr>') je namreč za zavitim oklepajem }, ki označuje konec notranje for zanke.

Šment. Takšne razčlenitve algoritma pa nisem naredil že... po mojem od prejšnjega tisočletja :).

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

java zaporedje

Oddelek: Programiranje		211399 (727) roba87
»

[JavaScript] Spreminjanje ozadja

Oddelek: Programiranje		7787 (731) Cvenemir
»

Javascript

Oddelek: Programiranje		61117 (930) amacar
»

Javascript pomoč

Oddelek: Izdelava spletišč		201975 (1531) Lion29
»

JavaScript naloge za faks (ustni izpit)

Oddelek: Šola		182251 (1791) Lumix

Več podobnih tem