// DNS var text = ""; var protokollaTila = -1; var hosts = { "h1": "Tietokone", "h2": "Local_DNS_server", "h3": "Root_DNS_server", "h4": "TLD_DNS_server", "h5": "Authoritative_DNS_server" }; var synArray = new Array("Avataanko yhteys?", "Avataan yhteys, ok?", "OK!"); var getArray = new Array("GET html sivu!", "200 OK tässä sivu! (sivulla 3kpl kuvia)"); var finArray = new Array("Suljetaanpa yhteys", "Suljetaan yhteys", "Okei!", "Ookoo!"); var dnsArray = new Array("www.palvelin.fi IP osoite? ", "Kysy .fi vastaavalta TLD DNS palvelimelta", "Kysy palvelin.fi vastaavalta DNS palvelimelta", " IP on 1.2.3.4"); $(document).ready(function() { alusta(); piirra(); $('a').click(function(event) { var tila = this.id; switch (tila) { case "iterative": switch (protokollaTila) { case -1: text = "title: DNS Protokolla - Iteratiivinen kysely"; $('#recursive').fadeOut(500); $('#iterative').fadeOut(500); $('#iterative').fadeIn(500, function() { $('#iterative').html('Seuraava viesti'); }); text = text.concat("\nNote right of " + hosts["h1"] + ": Käyttäjä kirjoittaa esim. www.palvelin.fi"); protokollaTila += 1; break; case 0: piirra_nuoli("h1", "h2", dnsArray[0]); protokollaTila += 1; break; case 1: piirra_nuoli("h2", "h3", dnsArray[0]); protokollaTila += 1; break; case 2: piirra_nuoli("h3", "h2", dnsArray[1]); protokollaTila += 1; break; case 3: piirra_nuoli("h2", "h4", dnsArray[0]); protokollaTila += 1; break; case 4: piirra_nuoli("h4", "h2", dnsArray[2]); protokollaTila += 1; break; case 5: piirra_nuoli("h2", "h5", dnsArray[0]); protokollaTila += 1; break; case 6: piirra_nuoli("h5", "h2", dnsArray[3]); protokollaTila += 1; break; case 7: piirra_nuoli("h2", "h1", dnsArray[3]); protokollaTila += 1; break; case 8: text = text.concat("\nNote right of " + hosts["h1"] + ": Nyt tietokone voi avata TCP yhteyden..."); protokollaTila = 10; break; case 10: alusta(); break; } break; case "recursive": switch (protokollaTila) { case -1: text = "title: HTTP Protokolla - Rekursiivinen kysely"; $('#iterative').fadeOut(500); $('#recursive').fadeOut(500); $('#recursive').fadeIn(500, function() { $('#recursive').html('Seuraava viesti'); }); text = text.concat("\nNote right of " + hosts["h1"] + ": Käyttäjä kirjoittaa esim. www.palvelin.fi"); protokollaTila += 1; break; case 0: piirra_nuoli("h1", "h2", dnsArray[0]); protokollaTila += 1; break; case 1: piirra_nuoli("h2", "h3", dnsArray[0]); protokollaTila += 1; break; case 2: piirra_nuoli("h3", "h4", dnsArray[0]); protokollaTila += 1; break; case 3: piirra_nuoli("h4", "h5", dnsArray[0]); protokollaTila += 1; break; case 4: piirra_nuoli("h5", "h4", dnsArray[3]); protokollaTila += 1; break; case 5: piirra_nuoli("h4", "h3", dnsArray[3]); protokollaTila += 1; break; case 6: piirra_nuoli("h3", "h2", dnsArray[3]); protokollaTila += 1; break; case 7: piirra_nuoli("h2", "h1", dnsArray[3]); protokollaTila += 1; break; case 8: text = text.concat("\nNote right of " + hosts["h1"] + ": Nyt tietokone voi avata TCP yhteyden..."); protokollaTila = 10; break; case 10: alusta(); break; } break; case "aa": alusta(); break; default: break; } // switch piirra(); }); }); function piirra_nuoli(h1, h2, viesti) { text = text.concat("\n" + hosts[h1] + "->" + hosts[h2] + ": "); text = text.concat(viesti); } function alusta() { text = "title: DNS Protokolla"; protokollaTila = -1; kuvia = 0; $('#iterative').fadeIn(500, function() { $('#iterative').html('Iteratiivinen kysely'); }); $('#recursive').fadeIn(500, function() { $('#recursive').html('Rekursiivinen kysely'); }); } function piirra() { $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' //theme: 'simple' theme: $('.theme').val() }); }
<a id="recursive" href="javascript:void(0);">Rekursiivinen kysely</a> <a id="iterative" href="javascript:void(0);">Iteratiivinen kysely</a> <a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme: <select class="theme" style="margin-left:0.1cm;"> <option value="simple" selected>Simple</option> <option value="hand">Hand drawn</option> </select> <div id="diagram"></div>
a { background-color: #FFFFCC; width: 100px; font-size: 1em; border: 2px solid black; border-radius: 5px; float: top; margin-left: 0.1cm; }