# HG changeset patch
# User František Kučera <franta-hg@frantovo.cz>
# Date 1243102563 -7200
# Node ID 26a11fc8e3e4600a24bc86ecbb745847f2fb6c8c
# Parent  6dced8dcb2e685d8c67cd9e3658942a0be92e135
AJAX – zatím jen demo: načítání tabulky ze souboru do výstupního pole.

diff -r 6dced8dcb2e6 -r 26a11fc8e3e4 html/ahoj.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/html/ahoj.html	Sat May 23 20:16:03 2009 +0200
@@ -0,0 +1,85 @@
+<table>
+    <thead>
+        <tr>
+            <td>Sloupeček 1</td>
+            <td>Sloupeček 2</td>
+            <td>Sloupeček 3</td>
+            <td>Sloupeček 4</td>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+    </tbody>
+</table>
+<p>Ahoj. Právě jsi zmáčknul tlačítko :-)</p>
diff -r 6dced8dcb2e6 -r 26a11fc8e3e4 html/hlavni.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/html/hlavni.js	Sat May 23 20:16:03 2009 +0200
@@ -0,0 +1,59 @@
+/**
+ * Aby to fungovalo i v MSIE 6.
+ * @return AJAXový objekt.
+ */
+function getXmlHttpRequestObject() {
+    if (window.XMLHttpRequest) {
+        return new XMLHttpRequest();
+    } else if(window.ActiveXObject) {
+        return new ActiveXObject("Microsoft.XMLHTTP");
+    } else {
+        alert("Váš prohlížeč nepodporuje AJAX. Pořiďte si méně zastaralý prohlížeč, nejlépe Firefox.");
+        return null;
+    }
+}
+
+/** Náš AJAXový objekt. */
+var ajax = getXmlHttpRequestObject();
+
+/**
+ * Zobrazí text na požadovaném místě.
+ * @param text text k zobrazení
+ * @param kde id prvku, do kterého se má text vypsat
+ **/
+function zobraz(text, kde) {
+    document.getElementById(kde).innerHTML = text;
+}
+
+/**
+ * Zobrazí text ve výstupním poli.
+ * @param text text k zobrazení
+ **/
+function zobrazVystup(text) {
+    zobraz(text, 'vystupniPole');
+}
+
+/**
+ * Zobrazí text ve poli pro nápovědu.
+ * @param text text k zobrazení
+ **/
+function zobrazNapovedu(text) {
+    zobraz(text, 'napovedniPole');
+}
+
+/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
+function demo() {
+    if (ajax.readyState == 4 || ajax.readyState == 0) {
+        ajax.open("GET", 'ahoj.html', true);
+        ajax.onreadystatechange = demoVypis;
+        ajax.send(null);
+    }
+    //zobrazNapovedu('Nějaká nápověda k danému příkazu.');
+}
+
+/** Pomocná funkce – postará se o vypsání v pravou chvíli. */
+function demoVypis() {
+    if (ajax.readyState == 4) {
+        zobrazVystup(ajax.responseText);
+    }
+}
diff -r 6dced8dcb2e6 -r 26a11fc8e3e4 html/index.html
--- a/html/index.html	Sat May 23 17:47:39 2009 +0200
+++ b/html/index.html	Sat May 23 20:16:03 2009 +0200
@@ -5,6 +5,7 @@
         <meta http-equiv="content-language" content="cs"/>
         <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
         <link href="styl.css" type="text/css" rel="StyleSheet"/>
+        <script type="text/javaScript" src="hlavni.js"></script>
         <title>SQL: pojďte si hrát!</title>
     </head>
     <body>
@@ -14,7 +15,7 @@
             <div class ="blok" id="napoveda">
                 <h2>Nápověda</h2>
                 <div class="vnitrekBloku">
-                    <p>lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
+                    <p id="napovedniPole">lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
                 </div>
             </div>
 
@@ -26,7 +27,7 @@
                     <div class="vnitrekBloku">
                         <form>
                             <textarea>SELECT * FROM tabulka;</textarea>
-                            <button type="submit">Vykonat SQL!</button>
+                            <button type="button" onclick="javascript:demo();">Vykonat SQL!</button>
                         </form>
                     </div>
                 </div>
@@ -37,7 +38,7 @@
 
                 <div class ="blok" id="vystup">
                     <h2>Výsledek</h2>
-                    <div class="vnitrekBloku">
+                    <div class="vnitrekBloku" id="vystupniPole">
                         <p>
                             lorem ipsum, nějaký text, něco jako latina, ale jiné…
                             lorem ipsum, nějaký text, něco jako latina, ale jiné…
diff -r 6dced8dcb2e6 -r 26a11fc8e3e4 html/styl.css
--- a/html/styl.css	Sat May 23 17:47:39 2009 +0200
+++ b/html/styl.css	Sat May 23 20:16:03 2009 +0200
@@ -1,15 +1,20 @@
+/** Obrázky s odkazem bez rámečku */
 a img {
     border: none;
 }
 
+/** Pozadí stránky a text */
 html {
     background: #42afdc;
     color:black;
 }
+
+/** Bezpatkové písmo */
 body {
     font-family: sans-serif;
 }
 
+/** Prostor pro logo a název programu */
 #zahlavi {
     height: 48px;
 
@@ -39,8 +44,9 @@
 
 #vstup textarea {
     width: 640px;
-    height: 110px;
+    height: 108px;
     padding: 8px;
+    border: 1px solid silver;
 }
 
 #vstup button {
@@ -50,7 +56,8 @@
     background-image: url('grafika/tlacitko.png');
     padding: 2px;
     font-size: 12px;
-    margin-right: 3px;
+    margin-right: 0px;
+    margin-top: 5px;
 }
 
 #vystup .vnitrekBloku {
@@ -62,35 +69,69 @@
     height: 484px;
 }
 
+/** Nadpisy bloků */
 .blok h2 {
-    font-size: medium;
+    font-size: 12px;
     padding: 2px;
+    padding-top: 4px;
     padding-left: 32px;
     margin: 0px;
     color: gray;
+    height: 20px;
 }
 
 #napoveda h2 {
     background-image: url('grafika/blok-nadpis-320.png');
 }
 
+/** Vstupně-výstupní část */
+#io {
+    float: left;
+}
+
 #io h2 {
     background-image: url('grafika/blok-nadpis-680.png');
 }
 
-#io {
-    float: left;
-}
-
+/** Blok vstupu */
 #vstup {
     width: 680px;
 }
 
+/** Blok výstupu */
 #vystup {
     width: 680px;
 }
 
+/** Blok nápovědy */
 #napoveda {
     float: right;
     width: 320px;
-}
\ No newline at end of file
+}
+
+/** Formátování (výstupní) tabulky */
+table {
+    border: 1px solid green;
+    border-collapse:collapse;
+}
+
+td {
+    border: 1px solid black;
+    padding: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+td.cislo {
+    text-align: right;
+}
+
+thead {
+    background: silver;
+    font-weight:bold;
+}
+
+thead td a {
+    color: black;
+    text-decoration: none;
+}