Jump to content

Javascript

Ata

Door Ata
in Computer Talk

 Share

Recommended Posts

Ata Drugs dealer

Ata

Geplaatst:
  • Auteur
Geplaatst:

Nog een vraagje. Heb nu met m´n klasgenoten het systeem in elkaar geknutseld. In chrome werkt hij, firefox en IE niet, maar dat is inprincipe geen probleem, alleen de totaal prijs lukt ons niet. Misschien een tip? Dit is de code nu. 

<!DOCTYPE>
<html>
<head>
<style>
.leeg {background: #FFFFFF; border: 1px solid #FFFFFF;}
span {width:50px;border:1px solid #ccc}
.klasse_1 {background:#DE0804;}
.klasse_2 {background:#FF9933;}
.klasse_3 {background:#4D94FF;}
.klasse_gereserveerd {background:#000000;}
button  {width:30px;height:30px;border:1 solid #000000;margin:0.5px;padding:0px}
input {width: 100px; height: 30px; border: 0px; padding: 2px;}
</style>
<script>
var zaal =
[
[0],
[0,0,0,3,3,3,3,3,3,3,3,0,0],
[0,0,3,3,3,3,3,3,3,3,3,3,0],
[0,0,3,3,3,3,3,3,3,3,3,3,0],
[0,3,3,3,3,3,2,2,3,3,3,3,3],
[0,3,3,3,3,2,2,2,2,3,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,2,2,1,1,2,2,3,3,3],
[0,3,3,3,3,2,2,2,2,3,3,3,3],
[0,3,3,3,3,3,2,2,3,3,3,3,3],
[0,0,3,3,3,3,3,3,3,3,3,3,0],
[0,0,0,3,3,3,3,3,3,3,3,0,0],
[0,0,0,3,3,3,3,3,3,3,3,0,0]
];
function lees_Storage()
{
if(sessionStorage.length)
{
 var reeks = [];
 for(var i = 0 ; i < sessionStorage.length ; i++ )
 {
  reeks[i] = sessionStorage.key(i);
 }
}
else
{
}
}
function plaats_stoelen()
{
 var plaats;
 for(var rn = 1 ; rn < zaal.length ; rn++)
 {
   for(var sn = 1 ; sn < zaal[rn].length ; sn++ )
{
 switch(zaal[rn][sn])
 {
   case 0 : plaats = maak_leegte();break;
   case 1 : plaats = maak_stoel(1,rn,sn);break;
   case 2 : plaats = maak_stoel(2,rn,sn);break;
   case 3 : plaats = maak_stoel(3,rn,sn);break;
 }
 document.getElementById("DIV_zaal").appendChild(plaats);
}
document.getElementById("DIV_zaal").appendChild(document.createElement("br"));
 }
}
function maak_leegte()
{
 var plaats = document.createElement("button");
 plaats.type = "button";
 plaats.setAttribute("class","leeg");
 return plaats;
}
function is_gereserveerd(stoel)
{
var id = stoel.id;
gevonden = false;
var i = 0;
while(!gevonden && (i < sessionStorage.length) )
{
 if (id == sessionStorage.key(i))
 {
  gevonden = true;
 }
 i++;
}
return gevonden;
}
function geef_prijs(pk)
{
 var prijs;
 switch(pk)
 {
   case 1 : prijs = 13.00;break;
   case 2 : prijs = 11.00;break;
   case 3 : prijs =  7.50;break;
 }
 return prijs;
}

function maak_stoel(prijsklasse,rn,sn)
{
var stoel = document.createElement("button");
stoel.type = "button";
stoel.value = prijsklasse;
stoel.title = geef_prijs(prijsklasse);
var stoelprijs = stoel.title.toString();
stoel.id = "rij " + rn + "<BR>" + "stoel " + sn + "<BR> €" + stoelprijs;
stoel.addEventListener("click",reserveer,false);

var klasse;
if(is_gereserveerd(stoel))
{
 klasse = "klasse_gereserveerd";
}
else
{

 klasse = "klasse_" + prijsklasse;
}
stoel.setAttribute("class",klasse);
return stoel;
}
function reserveer(e)
{
var stoel = e.srcElement;
var som;
   stoel.style.background = "#000000";
stoelnummer = stoel.id;
sessionStorage.setItem(stoelnummer,"bezet");
som = som + parseInt(stoel.title);
document.getElementById("FORM_zaal").submit();
}
function wissen()
{
alert("alle gegevens wissen");
sessionStorage.clear();
document.getElementById("FORM_zaal").submit();
}
function lees_reserveringen()
{
if(sessionStorage.length)
{
 var lengte = sessionStorage.length;
 var reeks = [];
 for(var i = 0 ; i < lengte ; i++)
 {
  reeks[i] = sessionStorage.key(i);
 }
 var html = "";
 for(var i = 0 ; i < lengte ; i++)
 {
  var r = sessionStorage.getItem(reeks[i]);
  html +=
 reeks[i] + "<BR>" + "<BR>";
 }
 document.getElementById("stoel_nummer").innerHTML = html;
}
else
{
document.getElementById("stoel_nummer").innerHTML = "geen reserveringen";
}
}


function start()
{
lees_Storage();
plaats_stoelen();
document.getElementById("BTN_wissen").addEventListener("click",wissen,false);
lees_reserveringen();
var check_pagina = setInterval(function(){lees_reserveringen()},100);
}
window.addEventListener("load",start,false);
</script>
</head>
<body>
<form id="FORM_zaal">
<div id="DIV_zaal"></div>
<button id="BTN_wissen">wissen</button>
<div id='div_data_betalen' style='border: 1px solid black;'>
 <div id='stoel_nummer' style='border: 1px solid black;'></div>
 <div id='div_prijs' style='border: 1px solid black;'></div>
</div>
<div id='test'></div>
</form>
</body>
</html>

Link to comment
Delen op andere websites
  • Reacties 30
  • Created
  • Laatste reactie

Top Posters In This Topic

  • Ata

    14

  • .Timothy

    11

  • Jochems

    3

  • Sublime

    2

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

.Timothy Legendary Godfather

.Timothy

Geplaatst:
Geplaatst:

Zal zo even booten in Windows, maar even een paar opmerkingen: zodra je je waagt aan scripten of programmeren, is het zeker aangeraden om een goede uitlijning te hanteren. Iedere keer dat een je een statementblok of tag opent, dien je wat witruimte in te springen (2-4 spaties of een tab is gebruikelijk).

Bijvoorbeeld in Javascript of PHP:

if(true === true) {
 // hier je code, ingesprongen
}

//rest van je code

En in HTML, XML, et cetera:

<tag1>
 <!-- Ook hier alles ingesprongen -->
 <tag2>tekst</tag2> <!-- Dit kan op 1 regel -->
 tekst
</tag1>

Dat zorgt ervoor dat je code een stuk beter te lezen is, wat het zoeken naar fouten aanzienlijk vermakkelijkt ;) Zal zo even naar je probleem zoeken.

Link to comment
Delen op andere websites
.Timothy Legendary Godfather

.Timothy

Geplaatst:
Geplaatst:

Heb even een vernieuwde versie geüpload:

http://timzhome.mageti.nl/dump/ata.html

Wijzigingen

  • Document type was niet gedefinieerd: er stond slechts
    <DOCTYPE>


    Ik heb er maar even HTML5 van gemaakt, ook al voldoet je code er niet aan.

  • In plaats van event listeners heb ik de functieaanroepen nu direct aan de HTML-elementen gekoppeld door middel van onclick="functie();". Aangezien de stoelen gegenereerd worden, heb ik het met een vervelend trucje even rechtgezet. Het moet nu ook in Internet Explorer en Firefox werken.
  • Het euroteken (€) heb ik even veranderd in de HTML-entiteit €;. Het teken werd anders niet altijd mooi weergegeven.

Kun je 's zeggen wat er precies fout gaat bij de totaalprijs? In je huidige bestand doen jullie nergens zulke berekeningen namelijk :puh: Wat je kunt doen is bij de start een variabele definiëren en dus initialiseren op 0, die je vervolgens ophoogt bij iedere aanroep van reserveer().

Succes!

Link to comment
Delen op andere websites
Ata Drugs dealer

Ata

Geplaatst:
  • Auteur
Geplaatst:

Is uiteindelijk goed gelukt, bedankt nog voor je hulp hiermee. Zoals je waarschijnlijk wel begreep was dit een groepsopdracht, en deze is door iemand anders grotendeels uitgevoerd. Ik ben nog redelijk noob wat betreft javascript, vandaar nog een vraagje. Ik moet een jaar kalender maken met behulp van loops. Echter weet ik niet waar ik moet beginnen.. Kan genoeg codes vinden op internet, maar dit is allemaal van de huidige maand. Ik moet m'n jaar kalender automatisch laten genereren. Had het eerst gewoon in tabelvorm gedaan, en elke maand apart ingevuld. Echter was dit niet goed, en moet ik met behulp van de loops het hele jaar zelf laten generen. Kun je me hiermee een stukje op weg helpen? :puh:

Link to comment
Delen op andere websites
.Timothy Legendary Godfather

.Timothy

Geplaatst:
Geplaatst:

Haha, okay. Hier kan je mijn uitwerking van je tafelprobleem terugvinden, overigens. :puh:

Wat betreft je vraag over die kalenders, wat ben je precies van plan? Wil je ook dat deze zich opnieuw genereert wanneer er op een knop wordt gedrukt, waarmee je het volgende jaar selecteert? (zoals je misschien wel kent uit die leuke pop-upjes, zoals bij onze zoekfunctie). Wil je een volledige jaarkalender, of wil je deze per maand genereren? Zo maar wat vragen, wat wel handig is om duidelijk te hebben.

In ieder geval, als je zo'n opdracht krijgt, is het van te voren altijd handig wat je nodig hebt: inventarisatie is altijd nuttig, want wanneer je on-the-fly gaat scripten en testen, sla je soms belangrijke denkstappen over en kunnen er zo foutjes in je code sluipen. Zelf doe ik het wel vrij vaak, maar in het begin (bij iedere nieuwe taal die je leert) is het gewoon handig om te kijken wat je nodig hebt.

Enfin, wat denk jij dus dat er nodig is?

  1. Je moet een kalender genereren. Dat gaat inderdaad met loops, want een maandkalender heeft een specifiek aantal dagen, die je stuk voor stuk wilt printen.
  2. De vraag is dan hoeveel dagen, en dat wordt dan meteen je eerste functie die je gaat maken: kijk hoeveel dagen die maand heeft. Dit kan je via een object van de Date-class (Google maar even naar javascript calculate month day count o.i.d.) of door het zelf te berekenen. Tip: er zijn hoogstens drie checks nodig om te kijken hoeveel dagen een maand nodig heeft.
  3. Kijk ook even naar het aantal dagen uit de vorige maand, want je maand start niet per definitie op maandag (of zondag). Genereer misschien een x aantal dagen van de vorige maand.
  4. Ga nu je eigen maand genereren, en ga naar een nieuwe regel wanneer je week 7 dagen heeft (door een extra variabele in je loops op te nemen).
  5. Genereer nog even een x aantal dagen van de volgende maand, zodat je week 7 dagen heeft.

Je code zal er dan ongeveer zo uit zien (dit is pseudocode):

function generateMonth(month, year)
   // Initialisatie van variabelen die je nodig hebt
   prevMonthDays < dagen van vorige maand
   currmonthDays < dagen van huidige maand
   nextMonthDays < dagen van volgende maand
   currDayOfWeek < huidige dag (maandag t/m zondag)
   prevDays < dagen van de vorige maand die je moet genereren
   dayCount < 0

   for i = 0 to prevDays do
       // Genereer hier de dagen die nog voor de huidige maand komen
       // Tip: gebruik de informatie van de variabele die ik hierboven noem
       // Tip: houd met dayCount bij of je een hele week hebt gegenereerd, en ga in dat geval naar een nieuwe regel

   for i = 0 to currMonthDays do
       // Genereer nu alle dagen van deze maand
       // Tip: houd opnieuw met dayCount bij of je een hele week hebt gegenereerd, en ga in dat geval naar een nieuwe regel

   for i = dayCount to 0 do
       // Tel nu af en genereer de rest van de dagen. Haal deze uit de volgende maand, zodat je opnieuw een volle week genereert.

Dat zijn volgens mij alle stappen die je moet doorlopen, wil je een kalender genereren. ;) Ik heb helaas vanavond weinig tijd, en morgen ben ik ook druk, dus ik hoop op z'n vroegst morgenavond of vrijdag wat meer info te kunnen geven, als je dat wilt.

Link to comment
Delen op andere websites
Ata Drugs dealer

Ata

Geplaatst:
  • Auteur
Geplaatst:

Voor je eerste vraag, hij hoeft zich niet opnieuw te generen bij een volgend jaar. Is mooi meegenomen, niet verplicht. Het moet uiteindelijk een jaar kalender worden, dit wil ik doen met behulp van pijltjes ( Januari, klik je op > ga je naar Februari, enz), dus inderdaad per maand creeren. Heb verder nog geen vragen, zal in het weekend even naar je stukje kijken en in verdiepen want zit in tentamen weekje. Bedankt weer in ieder geval! :engel:

Link to comment
Delen op andere websites
.Timothy Legendary Godfather

.Timothy

Geplaatst:
Geplaatst:

Heb 'm hier nu werkend na een paar uurtjes aanklooien (ben meer bekend met jQuery dan Javascript, eerlijk gezegd), en als je 'm per jaar wilt genereren i.p.v. per maand, hoef je niks aan te passen (dat is, wanneer je 't op dezelfde manier als ik doet). :puh:

Ben benieuwd naar 't resultaat, dus laat gerust horen wat je ervan gemaakt hebt. Dan plaats ik mijn code ook binnenkort ^^

Link to comment
Delen op andere websites
Ata Drugs dealer

Ata

Geplaatst:
  • Auteur
Geplaatst:

Had uiteindelijk geen tijd meer om aan m'n opdracht verder te gaan, heb er nu pas tijd voor. :(

Snap je pseudocode nog niet helemaal eerlijk gezegd.. Bijv. bij de eerste, de dagen generen die nog voor de huidige maand komen. Hiervoor heb je "prevMonthDays" nodig lijkt me. Laten we als vb. februari 2013 nemen, komen er nog 31 dagen voor de huidige maand. Hoe genereer ik dit dan? Klinkt misschien dom, maar ben echt nog een beginner in javascript. :puh:

Link to comment
Delen op andere websites
Ata Drugs dealer

Ata

Geplaatst:
  • Auteur
Geplaatst: (bewerkt)

Nee weet ik. Alleen er staat genereer hier de dagen die voor de huidige maand komen. Als februari de huidige is, komt januari ervoor. Dit zijn 31 dagen bedoelde ik. :puh: Ziet er bij jou wel netjes uit! Alleen lukt het mij niet om de dagen van vorige / huidige / volgende maand te genereren. Geen idee hoe ...

---

Na do, krijg je dan document.write(), wat zet je dan tussen de ()? en wat moet er bij "while"?

Bewerkt: door Ata
Link to comment
Delen op andere websites
.Timothy Legendary Godfather

.Timothy

Geplaatst:
Geplaatst:

Dat is pseudocode, oftewel code die expres niet op standaard Javascript lijkt. Dat is puur een richtlijn die de denkstappen nogmaals weergeeft, en niet bedoeld is om te werken of om rechtstreeks op voort te borduren. Ik snap je vraag m.b.t. document.write() dan ook niet echt :puh:

Wat betreft het genereren van de dagen van de vorige maand: je moet inderdaad een variabele introduceren die het aantal dagen van de vorige maand vertegenwoordigt, want dan kun je weten welke nummers de laatste x dagen hebben. Daarnaast moet je weten op welke dagen die vallen, vandaar dat ik de variabele prevDays gebruikte. Ik ben erachter gekomen dat Javascript je ook direct dat getal kan doorsturen, door de huidige dag te berekenen (kijk daarvoor even naar de Date-class). Als je namelijk weet op welke dag de eerste dag van de maand valt, weet je immers ook hoeveel dagen daarvoor komen, en weet je dus ook hoe lang je eerste for-lus moet lopen.

Link to comment
Delen op andere websites
.Timothy Legendary Godfather

.Timothy

Geplaatst:
Geplaatst:

Sorry, ik wil je ook niet de hele opdracht voorschotelen :puh: Ik heb je in ieder geval een denk- en zoekrichting gegeven, probeer dat vast te houden. In principe zou je het met deze stappen moeten kunnen bedenken en uitwerken. Als dat niet het geval is, laat vanavond of morgen even zien wat je dan hebt, misschien dat ik dan zie waar je de mist in gaat.

Link to comment
Delen op andere websites

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

Gast
Op dit onderwerp reageren...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Naar onderwerpenlijst

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...