1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/html/ahoj.html	Sat May 23 20:16:03 2009 +0200
     1.3 @@ -0,0 +1,85 @@
     1.4 +<table>
     1.5 +    <thead>
     1.6 +        <tr>
     1.7 +            <td>Sloupeček 1</td>
     1.8 +            <td>Sloupeček 2</td>
     1.9 +            <td>Sloupeček 3</td>
    1.10 +            <td>Sloupeček 4</td>
    1.11 +        </tr>
    1.12 +    </thead>
    1.13 +    <tbody>
    1.14 +        <tr>
    1.15 +            <td>Hodnota 1</td>
    1.16 +            <td>Hodnota 2</td>
    1.17 +            <td>Hodnota 3</td>
    1.18 +            <td class="cislo">1234,56</td>
    1.19 +        </tr>
    1.20 +        <tr>
    1.21 +            <td>Hodnota 1</td>
    1.22 +            <td>Hodnota 2</td>
    1.23 +            <td>Hodnota 3</td>
    1.24 +            <td class="cislo">1234,56</td>
    1.25 +        </tr>
    1.26 +        <tr>
    1.27 +            <td>Hodnota 1</td>
    1.28 +            <td>Hodnota 2</td>
    1.29 +            <td>Hodnota 3</td>
    1.30 +            <td class="cislo">1234,56</td>
    1.31 +        </tr>
    1.32 +        <tr>
    1.33 +            <td>Hodnota 1</td>
    1.34 +            <td>Hodnota 2</td>
    1.35 +            <td>Hodnota 3</td>
    1.36 +            <td class="cislo">1234,56</td>
    1.37 +        </tr>
    1.38 +        <tr>
    1.39 +            <td>Hodnota 1</td>
    1.40 +            <td>Hodnota 2</td>
    1.41 +            <td>Hodnota 3</td>
    1.42 +            <td class="cislo">1234,56</td>
    1.43 +        </tr>
    1.44 +        <tr>
    1.45 +            <td>Hodnota 1</td>
    1.46 +            <td>Hodnota 2</td>
    1.47 +            <td>Hodnota 3</td>
    1.48 +            <td class="cislo">1234,56</td>
    1.49 +        </tr>
    1.50 +        <tr>
    1.51 +            <td>Hodnota 1</td>
    1.52 +            <td>Hodnota 2</td>
    1.53 +            <td>Hodnota 3</td>
    1.54 +            <td class="cislo">1234,56</td>
    1.55 +        </tr>
    1.56 +        <tr>
    1.57 +            <td>Hodnota 1</td>
    1.58 +            <td>Hodnota 2</td>
    1.59 +            <td>Hodnota 3</td>
    1.60 +            <td class="cislo">1234,56</td>
    1.61 +        </tr>
    1.62 +        <tr>
    1.63 +            <td>Hodnota 1</td>
    1.64 +            <td>Hodnota 2</td>
    1.65 +            <td>Hodnota 3</td>
    1.66 +            <td class="cislo">1234,56</td>
    1.67 +        </tr>
    1.68 +        <tr>
    1.69 +            <td>Hodnota 1</td>
    1.70 +            <td>Hodnota 2</td>
    1.71 +            <td>Hodnota 3</td>
    1.72 +            <td class="cislo">1234,56</td>
    1.73 +        </tr>
    1.74 +        <tr>
    1.75 +            <td>Hodnota 1</td>
    1.76 +            <td>Hodnota 2</td>
    1.77 +            <td>Hodnota 3</td>
    1.78 +            <td class="cislo">1234,56</td>
    1.79 +        </tr>
    1.80 +        <tr>
    1.81 +            <td>Hodnota 1</td>
    1.82 +            <td>Hodnota 2</td>
    1.83 +            <td>Hodnota 3</td>
    1.84 +            <td class="cislo">1234,56</td>
    1.85 +        </tr>
    1.86 +    </tbody>
    1.87 +</table>
    1.88 +<p>Ahoj. Právě jsi zmáčknul tlačítko :-)</p>

     2.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     2.2 +++ b/html/hlavni.js	Sat May 23 20:16:03 2009 +0200
     2.3 @@ -0,0 +1,59 @@
     2.4 +/**
     2.5 + * Aby to fungovalo i v MSIE 6.
     2.6 + * @return AJAXový objekt.
     2.7 + */
     2.8 +function getXmlHttpRequestObject() {
     2.9 +    if (window.XMLHttpRequest) {
    2.10 +        return new XMLHttpRequest();
    2.11 +    } else if(window.ActiveXObject) {
    2.12 +        return new ActiveXObject("Microsoft.XMLHTTP");
    2.13 +    } else {
    2.14 +        alert("Váš prohlížeč nepodporuje AJAX. Pořiďte si méně zastaralý prohlížeč, nejlépe Firefox.");
    2.15 +        return null;
    2.16 +    }
    2.17 +}
    2.18 +
    2.19 +/** Náš AJAXový objekt. */
    2.20 +var ajax = getXmlHttpRequestObject();
    2.21 +
    2.22 +/**
    2.23 + * Zobrazí text na požadovaném místě.
    2.24 + * @param text text k zobrazení
    2.25 + * @param kde id prvku, do kterého se má text vypsat
    2.26 + **/
    2.27 +function zobraz(text, kde) {
    2.28 +    document.getElementById(kde).innerHTML = text;
    2.29 +}
    2.30 +
    2.31 +/**
    2.32 + * Zobrazí text ve výstupním poli.
    2.33 + * @param text text k zobrazení
    2.34 + **/
    2.35 +function zobrazVystup(text) {
    2.36 +    zobraz(text, 'vystupniPole');
    2.37 +}
    2.38 +
    2.39 +/**
    2.40 + * Zobrazí text ve poli pro nápovědu.
    2.41 + * @param text text k zobrazení
    2.42 + **/
    2.43 +function zobrazNapovedu(text) {
    2.44 +    zobraz(text, 'napovedniPole');
    2.45 +}
    2.46 +
    2.47 +/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
    2.48 +function demo() {
    2.49 +    if (ajax.readyState == 4 || ajax.readyState == 0) {
    2.50 +        ajax.open("GET", 'ahoj.html', true);
    2.51 +        ajax.onreadystatechange = demoVypis;
    2.52 +        ajax.send(null);
    2.53 +    }
    2.54 +    //zobrazNapovedu('Nějaká nápověda k danému příkazu.');
    2.55 +}
    2.56 +
    2.57 +/** Pomocná funkce – postará se o vypsání v pravou chvíli. */
    2.58 +function demoVypis() {
    2.59 +    if (ajax.readyState == 4) {
    2.60 +        zobrazVystup(ajax.responseText);
    2.61 +    }
    2.62 +}

     3.1 --- a/html/index.html	Sat May 23 17:47:39 2009 +0200
     3.2 +++ b/html/index.html	Sat May 23 20:16:03 2009 +0200
     3.3 @@ -5,6 +5,7 @@
     3.4          <meta http-equiv="content-language" content="cs"/>
     3.5          <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     3.6          <link href="styl.css" type="text/css" rel="StyleSheet"/>
     3.7 +        <script type="text/javaScript" src="hlavni.js"></script>
     3.8          <title>SQL: pojďte si hrát!</title>
     3.9      </head>
    3.10      <body>
    3.11 @@ -14,7 +15,7 @@
    3.12              <div class ="blok" id="napoveda">
    3.13                  <h2>Nápověda</h2>
    3.14                  <div class="vnitrekBloku">
    3.15 -                    <p>lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
    3.16 +                    <p id="napovedniPole">lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
    3.17                  </div>
    3.18              </div>
    3.19  
    3.20 @@ -26,7 +27,7 @@
    3.21                      <div class="vnitrekBloku">
    3.22                          <form>
    3.23                              <textarea>SELECT * FROM tabulka;</textarea>
    3.24 -                            <button type="submit">Vykonat SQL!</button>
    3.25 +                            <button type="button" onclick="javascript:demo();">Vykonat SQL!</button>
    3.26                          </form>
    3.27                      </div>
    3.28                  </div>
    3.29 @@ -37,7 +38,7 @@
    3.30  
    3.31                  <div class ="blok" id="vystup">
    3.32                      <h2>Výsledek</h2>
    3.33 -                    <div class="vnitrekBloku">
    3.34 +                    <div class="vnitrekBloku" id="vystupniPole">
    3.35                          <p>
    3.36                              lorem ipsum, nějaký text, něco jako latina, ale jiné…
    3.37                              lorem ipsum, nějaký text, něco jako latina, ale jiné…

     4.1 --- a/html/styl.css	Sat May 23 17:47:39 2009 +0200
     4.2 +++ b/html/styl.css	Sat May 23 20:16:03 2009 +0200
     4.3 @@ -1,15 +1,20 @@
     4.4 +/** Obrázky s odkazem bez rámečku */
     4.5  a img {
     4.6      border: none;
     4.7  }
     4.8  
     4.9 +/** Pozadí stránky a text */
    4.10  html {
    4.11      background: #42afdc;
    4.12      color:black;
    4.13  }
    4.14 +
    4.15 +/** Bezpatkové písmo */
    4.16  body {
    4.17      font-family: sans-serif;
    4.18  }
    4.19  
    4.20 +/** Prostor pro logo a název programu */
    4.21  #zahlavi {
    4.22      height: 48px;
    4.23  
    4.24 @@ -39,8 +44,9 @@
    4.25  
    4.26  #vstup textarea {
    4.27      width: 640px;
    4.28 -    height: 110px;
    4.29 +    height: 108px;
    4.30      padding: 8px;
    4.31 +    border: 1px solid silver;
    4.32  }
    4.33  
    4.34  #vstup button {
    4.35 @@ -50,7 +56,8 @@
    4.36      background-image: url('grafika/tlacitko.png');
    4.37      padding: 2px;
    4.38      font-size: 12px;
    4.39 -    margin-right: 3px;
    4.40 +    margin-right: 0px;
    4.41 +    margin-top: 5px;
    4.42  }
    4.43  
    4.44  #vystup .vnitrekBloku {
    4.45 @@ -62,35 +69,69 @@
    4.46      height: 484px;
    4.47  }
    4.48  
    4.49 +/** Nadpisy bloků */
    4.50  .blok h2 {
    4.51 -    font-size: medium;
    4.52 +    font-size: 12px;
    4.53      padding: 2px;
    4.54 +    padding-top: 4px;
    4.55      padding-left: 32px;
    4.56      margin: 0px;
    4.57      color: gray;
    4.58 +    height: 20px;
    4.59  }
    4.60  
    4.61  #napoveda h2 {
    4.62      background-image: url('grafika/blok-nadpis-320.png');
    4.63  }
    4.64  
    4.65 +/** Vstupně-výstupní část */
    4.66 +#io {
    4.67 +    float: left;
    4.68 +}
    4.69 +
    4.70  #io h2 {
    4.71      background-image: url('grafika/blok-nadpis-680.png');
    4.72  }
    4.73  
    4.74 -#io {
    4.75 -    float: left;
    4.76 -}
    4.77 -
    4.78 +/** Blok vstupu */
    4.79  #vstup {
    4.80      width: 680px;
    4.81  }
    4.82  
    4.83 +/** Blok výstupu */
    4.84  #vystup {
    4.85      width: 680px;
    4.86  }
    4.87  
    4.88 +/** Blok nápovědy */
    4.89  #napoveda {
    4.90      float: right;
    4.91      width: 320px;
    4.92 -}
    4.93 \ No newline at end of file
    4.94 +}
    4.95 +
    4.96 +/** Formátování (výstupní) tabulky */
    4.97 +table {
    4.98 +    border: 1px solid green;
    4.99 +    border-collapse:collapse;
   4.100 +}
   4.101 +
   4.102 +td {
   4.103 +    border: 1px solid black;
   4.104 +    padding: 4px;
   4.105 +    padding-left: 8px;
   4.106 +    padding-right: 8px;
   4.107 +}
   4.108 +
   4.109 +td.cislo {
   4.110 +    text-align: right;
   4.111 +}
   4.112 +
   4.113 +thead {
   4.114 +    background: silver;
   4.115 +    font-weight:bold;
   4.116 +}
   4.117 +
   4.118 +thead td a {
   4.119 +    color: black;
   4.120 +    text-decoration: none;
   4.121 +}