Changeset 5:71c6de7f0a38

Show
Ignore:
Timestamp:
05/24/09 00:24:48 (16 years ago)
Author:
František Kučera <franta-hg@…>
Branch:
default
Message:

Licence (žádná), historie SQL příkazů, drobnosti v CSS.

Location:
html
Files:
3 added
3 modified
2 moved

Legend:

Unmodified
Added
Removed

  • html/historie.html

    r4 r5  
    1 <table> 
    2     <thead> 
    3         <tr> 
    4             <td>Sloupeček 1</td> 
    5             <td>Sloupeček 2</td> 
    6             <td>Sloupeček 3</td> 
    7             <td>Sloupeček 4</td> 
    8         </tr> 
    9     </thead> 
    10     <tbody> 
    11         <tr> 
    12             <td>Hodnota 1</td> 
    13             <td>Hodnota 2</td> 
    14             <td>Hodnota 3</td> 
    15             <td class="cislo">1234,56</td> 
    16         </tr> 
    17         <tr> 
    18             <td>Hodnota 1</td> 
    19             <td>Hodnota 2</td> 
    20             <td>Hodnota 3</td> 
    21             <td class="cislo">1234,56</td> 
    22         </tr> 
    23         <tr> 
    24             <td>Hodnota 1</td> 
    25             <td>Hodnota 2</td> 
    26             <td>Hodnota 3</td> 
    27             <td class="cislo">1234,56</td> 
    28         </tr> 
    29         <tr> 
    30             <td>Hodnota 1</td> 
    31             <td>Hodnota 2</td> 
    32             <td>Hodnota 3</td> 
    33             <td class="cislo">1234,56</td> 
    34         </tr> 
    35         <tr> 
    36             <td>Hodnota 1</td> 
    37             <td>Hodnota 2</td> 
    38             <td>Hodnota 3</td> 
    39             <td class="cislo">1234,56</td> 
    40         </tr> 
    41         <tr> 
    42             <td>Hodnota 1</td> 
    43             <td>Hodnota 2</td> 
    44             <td>Hodnota 3</td> 
    45             <td class="cislo">1234,56</td> 
    46         </tr> 
    47         <tr> 
    48             <td>Hodnota 1</td> 
    49             <td>Hodnota 2</td> 
    50             <td>Hodnota 3</td> 
    51             <td class="cislo">1234,56</td> 
    52         </tr> 
    53         <tr> 
    54             <td>Hodnota 1</td> 
    55             <td>Hodnota 2</td> 
    56             <td>Hodnota 3</td> 
    57             <td class="cislo">1234,56</td> 
    58         </tr> 
    59         <tr> 
    60             <td>Hodnota 1</td> 
    61             <td>Hodnota 2</td> 
    62             <td>Hodnota 3</td> 
    63             <td class="cislo">1234,56</td> 
    64         </tr> 
    65         <tr> 
    66             <td>Hodnota 1</td> 
    67             <td>Hodnota 2</td> 
    68             <td>Hodnota 3</td> 
    69             <td class="cislo">1234,56</td> 
    70         </tr> 
    71         <tr> 
    72             <td>Hodnota 1</td> 
    73             <td>Hodnota 2</td> 
    74             <td>Hodnota 3</td> 
    75             <td class="cislo">1234,56</td> 
    76         </tr> 
    77         <tr> 
    78             <td>Hodnota 1</td> 
    79             <td>Hodnota 2</td> 
    80             <td>Hodnota 3</td> 
    81             <td class="cislo">1234,56</td> 
    82         </tr> 
    83     </tbody> 
    84 </table> 
    85 <p class="vysledekOK">Ahoj. Právě jsi zmáčknul tlačítko :-)</p> 
    86 <p class="vysledekVarovani">Tohle se zobrazí při varování.</p> 
    87 <p class="vysledekChyba">A tohle, když se něco nepovede.</p> 
    88 <p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p> 
     1<div> 
     2    <table> 
     3        <thead title="Chceš setřídit výsledek podle nějakého sloupce? Co takhle ORDER BY sloupec."> 
     4            <tr> 
     5                <td>Kdy</td> 
     6                <td>SQL příkaz</td> 
     7            </tr> 
     8        </thead> 
     9        <tbody> 
     10            <tr> 
     11                <td>2008-05-24 16:00:08</td> 
     12                <td>SELECT * FROM tabulka WHERE id = 123;</td> 
     13            </tr> 
     14            <tr> 
     15                <td>2008-05-24 15:55:10</td> 
     16                <td>SELECT * FROM tabulka WHERE id = 123 ORDER BY datum DESC;</td> 
     17            </tr> 
     18            <tr> 
     19                <td>2008-05-24 15:51:28</td> 
     20                <td>SELECT * <br/>FROM tabulka <br/>JOIN druha_tabulka USING (email) <br/>WHERE id = 8;</td> 
     21            </tr> 
     22        </tbody> 
     23    </table> 
     24    <p class="vysledekOK">Toto je historie provedených SQL příkazů.</p> 
     25    <p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p> 
     26</div> 

  • html/hlavni.js

    r4 r5  
    4949 
    5050/** 
     51 * Zobrazí text ve vstupním poli. 
     52 * Požijeme pro načtení SQL příkazu z historie. 
     53 * @param text text k zobrazení 
     54 **/ 
     55function zobrazVstup(text) { 
     56    zobraz(text, vstupniPole); 
     57} 
     58 
     59/** 
    5160 * Zobrazí text ve poli pro nápovědu. 
    5261 * @param text text k zobrazení 
    … …  
    5766 
    5867/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */ 
    59 function demo() { 
     68function ajaxVykonatSQL() { 
    6069    if (ajax.readyState == 4 || ajax.readyState == 0) { 
    6170        ajax.open("GET", 'ahoj.html', true); 
    62         ajax.onreadystatechange = demoVypis; 
     71        ajax.onreadystatechange = vykonatSQLVypis; 
    6372        ajax.send(null); 
    6473    } 
    … …  
    6877 
    6978/** Pomocná funkce – postará se o vypsání v pravou chvíli. */ 
    70 function demoVypis() { 
     79function vykonatSQLVypis() { 
    7180    if (ajax.readyState == 4) { 
    7281        zobrazVystup(ajax.responseText); 
    7382    } 
    7483} 
     84 
     85 
     86/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */ 
     87function ajaxZobrazitHistorii() { 
     88    if (ajax.readyState == 4 || ajax.readyState == 0) { 
     89        ajax.open("GET", 'historie.html', true); 
     90        ajax.onreadystatechange = zobrazitHistoriiVypis; 
     91        ajax.send(null); 
     92    } 
     93} 
     94 
     95/** Pomocná funkce – postará se o vypsání v pravou chvíli. */ 
     96function zobrazitHistoriiVypis() { 
     97    if (ajax.readyState == 4) { 
     98        zobrazVystup(ajax.responseText); 
     99    } 
     100} 

  • html/index.html

    r4 r5  
    77        <link href="styl.css" type="text/css" rel="StyleSheet"/> 
    88        <script type="text/javaScript" src="hlavni.js"></script> 
    9         <title>SQL: pojďte si hrát!</title> 
     9        <title>SQL: tenhle jazyk tě bude bavit!</title> 
    1010    </head> 
    1111    <body> 
    12         <div id="zahlavi"><h1>SQL: pojďte si hrát!</h1></div> 
     12        <div id="zahlavi"><h1>SQL: tenhle jazyk tě bude bavit!</h1></div> 
    1313 
    1414        <div id="bloky"> 
    … …  
    2828                        <form> 
    2929                            <textarea id="vstupniPole">SELECT * FROM tabulka;</textarea> 
    30                             <button type="button" onclick="javascript:demo();">&nbsp;</button> 
     30                            <button class="zobrazitHistorii" 
     31                                    name="zobrazitHistorii" 
     32                                    title="Vypíše historii SQL příkazů." 
     33                                    type="button" 
     34                                    onclick="javascript:ajaxZobrazitHistorii();">&nbsp;</button> 
     35                            <button class="vykonatSQL" 
     36                                    name="vykonatSQL" 
     37                                    title="Vykoná zadaný SQL příkaz." 
     38                                    type="button" 
     39                                    onclick="javascript:ajaxVykonatSQL();">&nbsp;</button> 
    3140                        </form> 
    3241                    </div> 
    … …  
    8089    </body> 
    8190</html> 
    82  
    83  

  • html/styl.css

    r4 r5  
    1313body { 
    1414    font-family: sans-serif; 
     15    font-size: 12px; 
    1516} 
    1617 
    … …  
    5758 
    5859#vstup button { 
    59     width: 146px; 
    6060    height: 20px; 
    6161    border: none; 
    62     background-image: url('grafika/tlacitko-sql.png'); 
    6362    margin-right: 0px; 
    6463    margin-top: 5px; 
    6564    padding: 0px; 
    6665    cursor: pointer; 
     66    background-repeat: no-repeat; 
     67} 
     68 
     69#vstup button.zobrazitHistorii { 
     70    background-image: url('grafika/historie.png'); 
     71    background-color: transparent; 
     72    background-position: center; 
     73    width: 20px; 
     74} 
     75 
     76#vstup button.vykonatSQL { 
     77    background-image: url('grafika/tlacitko-sql.png'); 
     78    width: 146px; 
    6779} 
    6880 
    … …  
    120132    border: 1px solid green; 
    121133    border-collapse:collapse; 
     134    background-color: white; 
     135    margin: 3px; 
    122136} 
    123137 
    … …  
    127141    padding-left: 8px; 
    128142    padding-right: 8px; 
     143    vertical-align: top; 
    129144} 
    130145 
    … …  
    134149 
    135150thead { 
    136     background: silver; 
     151    background: gray; 
    137152    font-weight:bold; 
     153    background-image: url('grafika/tabulka-zahlavi.png'); 
     154    background-repeat: repeat-x; 
     155    height: 28px; 
    138156} 
    139157 
    … …  
    141159    color: black; 
    142160    text-decoration: none; 
     161} 
     162 
     163thead td { 
     164    vertical-align: middle; 
    143165} 
    144166 

  • html/vysledek.html

    r4 r5  
    1 <table> 
    2     <thead> 
    3         <tr> 
    4             <td>Sloupeček 1</td> 
    5             <td>Sloupeček 2</td> 
    6             <td>Sloupeček 3</td> 
    7             <td>Sloupeček 4</td> 
    8         </tr> 
    9     </thead> 
    10     <tbody> 
    11         <tr> 
    12             <td>Hodnota 1</td> 
    13             <td>Hodnota 2</td> 
    14             <td>Hodnota 3</td> 
    15             <td class="cislo">1234,56</td> 
    16         </tr> 
    17         <tr> 
    18             <td>Hodnota 1</td> 
    19             <td>Hodnota 2</td> 
    20             <td>Hodnota 3</td> 
    21             <td class="cislo">1234,56</td> 
    22         </tr> 
    23         <tr> 
    24             <td>Hodnota 1</td> 
    25             <td>Hodnota 2</td> 
    26             <td>Hodnota 3</td> 
    27             <td class="cislo">1234,56</td> 
    28         </tr> 
    29         <tr> 
    30             <td>Hodnota 1</td> 
    31             <td>Hodnota 2</td> 
    32             <td>Hodnota 3</td> 
    33             <td class="cislo">1234,56</td> 
    34         </tr> 
    35         <tr> 
    36             <td>Hodnota 1</td> 
    37             <td>Hodnota 2</td> 
    38             <td>Hodnota 3</td> 
    39             <td class="cislo">1234,56</td> 
    40         </tr> 
    41         <tr> 
    42             <td>Hodnota 1</td> 
    43             <td>Hodnota 2</td> 
    44             <td>Hodnota 3</td> 
    45             <td class="cislo">1234,56</td> 
    46         </tr> 
    47         <tr> 
    48             <td>Hodnota 1</td> 
    49             <td>Hodnota 2</td> 
    50             <td>Hodnota 3</td> 
    51             <td class="cislo">1234,56</td> 
    52         </tr> 
    53         <tr> 
    54             <td>Hodnota 1</td> 
    55             <td>Hodnota 2</td> 
    56             <td>Hodnota 3</td> 
    57             <td class="cislo">1234,56</td> 
    58         </tr> 
    59         <tr> 
    60             <td>Hodnota 1</td> 
    61             <td>Hodnota 2</td> 
    62             <td>Hodnota 3</td> 
    63             <td class="cislo">1234,56</td> 
    64         </tr> 
    65         <tr> 
    66             <td>Hodnota 1</td> 
    67             <td>Hodnota 2</td> 
    68             <td>Hodnota 3</td> 
    69             <td class="cislo">1234,56</td> 
    70         </tr> 
    71         <tr> 
    72             <td>Hodnota 1</td> 
    73             <td>Hodnota 2</td> 
    74             <td>Hodnota 3</td> 
    75             <td class="cislo">1234,56</td> 
    76         </tr> 
    77         <tr> 
    78             <td>Hodnota 1</td> 
    79             <td>Hodnota 2</td> 
    80             <td>Hodnota 3</td> 
    81             <td class="cislo">1234,56</td> 
    82         </tr> 
    83     </tbody> 
    84 </table> 
    85 <p class="vysledekOK">Ahoj. Právě jsi zmáčknul tlačítko :-)</p> 
    86 <p class="vysledekVarovani">Tohle se zobrazí při varování.</p> 
    87 <p class="vysledekChyba">A tohle, když se něco nepovede.</p> 
    88 <p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p> 
     1<div> 
     2    <table> 
     3        <thead title="Chceš setřídit výsledek podle nějakého sloupce? Co takhle ORDER BY sloupec."> 
     4            <tr> 
     5                <td>Sloupeček 1</td> 
     6                <td>Sloupeček 2</td> 
     7                <td>Sloupeček 3</td> 
     8                <td>Sloupeček 4</td> 
     9            </tr> 
     10        </thead> 
     11        <tbody> 
     12            <tr> 
     13                <td>Hodnota 1</td> 
     14                <td>Hodnota 2</td> 
     15                <td>Hodnota 3</td> 
     16                <td class="cislo">1234,56</td> 
     17            </tr> 
     18            <tr> 
     19                <td>Hodnota 1</td> 
     20                <td>Hodnota 2</td> 
     21                <td>Hodnota 3</td> 
     22                <td class="cislo">1234,56</td> 
     23            </tr> 
     24            <tr> 
     25                <td>Hodnota 1</td> 
     26                <td>Hodnota 2</td> 
     27                <td>Hodnota 3</td> 
     28                <td class="cislo">1234,56</td> 
     29            </tr> 
     30            <tr> 
     31                <td>Hodnota 1</td> 
     32                <td>Hodnota 2</td> 
     33                <td>Hodnota 3</td> 
     34                <td class="cislo">1234,56</td> 
     35            </tr> 
     36            <tr> 
     37                <td>Hodnota 1</td> 
     38                <td>Hodnota 2</td> 
     39                <td>Hodnota 3</td> 
     40                <td class="cislo">1234,56</td> 
     41            </tr> 
     42            <tr> 
     43                <td>Hodnota 1</td> 
     44                <td>Hodnota 2</td> 
     45                <td>Hodnota 3</td> 
     46                <td class="cislo">1234,56</td> 
     47            </tr> 
     48            <tr> 
     49                <td>Hodnota 1</td> 
     50                <td>Hodnota 2</td> 
     51                <td>Hodnota 3</td> 
     52                <td class="cislo">1234,56</td> 
     53            </tr> 
     54            <tr> 
     55                <td>Hodnota 1</td> 
     56                <td>Hodnota 2</td> 
     57                <td>Hodnota 3</td> 
     58                <td class="cislo">1234,56</td> 
     59            </tr> 
     60            <tr> 
     61                <td>Hodnota 1</td> 
     62                <td>Hodnota 2</td> 
     63                <td>Hodnota 3</td> 
     64                <td class="cislo">1234,56</td> 
     65            </tr> 
     66            <tr> 
     67                <td>Hodnota 1</td> 
     68                <td>Hodnota 2</td> 
     69                <td>Hodnota 3</td> 
     70                <td class="cislo">1234,56</td> 
     71            </tr> 
     72            <tr> 
     73                <td>Hodnota 1</td> 
     74                <td>Hodnota 2</td> 
     75                <td>Hodnota 3</td> 
     76                <td class="cislo">1234,56</td> 
     77            </tr> 
     78            <tr> 
     79                <td>Hodnota 1</td> 
     80                <td>Hodnota 2</td> 
     81                <td>Hodnota 3</td> 
     82                <td class="cislo">1234,56</td> 
     83            </tr> 
     84        </tbody> 
     85    </table> 
     86    <p class="vysledekOK">Ahoj. Právě jsi zmáčknul tlačítko „Vykonat SQL“ :-)</p> 
     87    <p class="vysledekVarovani">Tohle se zobrazí při varování.</p> 
     88    <p class="vysledekChyba">A tohle, když se něco nepovede.</p> 
     89    <p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p> 
     90</div>