|
HTML, PHP, CSS a JS snadno a rychle - dokončeníJakub Raida - Software - 02. 06. 2007 - 6252 přečtení Tento článek má úplným začátečníkům, kteří zatím neznají žádnou syntaxi žádného programovacího jazyka zpřístupnit snadno a jednoduše tvorbu webu s HTML, CSS, PHP a JavaScriptem. Obsahuje také základy matematické a programátorské logiky. Díl 2 / 2
Dokončení z 1. části Jenže my si chceme udělat diskuzi, čili budeme data někam ukládat a na stránce zobrazovat. Ukládat je budeme zcela jednoduše do obyčejného textového souboru – například txt nebo inc. Náš soubor se tedy bude jmenovat diskuze.inc. Vytvoříme jej a prázdný nahrajeme do stejné složky, ve které je soubor index.php. Jméno souboru a cesta k němu je také proměnnou, která má hodnotu ve tvaru ('diskuze.inc','a') – a znamená otevřít pro doplňování (čili zápis bez smazání toho, co už je zapsáno) a otevírá se magickým slůvkem fopen. Zapisuje se potom do něj příkazem fwrite, za nímž následuje (jméno proměnné souboru, co se má zapsat);. Soubor se uzavírá příkazem fclose. K příspěvkům si ještě můžeme přidat časový údaj, ten získáme přiřazením do proměnné $datum = StrFTime("%d. %m. %H:%M:%S", Time()); - nebudu zatím vysvětlovat, oč se zde jedná, jen řeknu, že procenta určují formát v němž se čas zobrazí (dny tečka měsíce tečka hodiny dvojtečka minuty dvojtečka vteřiny) a Time() je funkce, kterou nemusíme deklarovat, protože je již automaticky deklarována (co to je deklarace funkce si povíme později u JavaScriptu, rozdíl v tom není takřka žádný). No, a zbývá nám poslední věc a to sice zobrazit někde na stránce obsah souboru diskuze.inc – to se provádí příkazem include, který jakoby na dané místo vloží celý obsah souboru, na nějž odkazuje. Výsledek bude tedy vypadat nějak takto:
<html> <head><title>Diskuze</title></head> <body>
<? $zprava = $_POST['zprava']; $celek="<br />".$zprava."<br /><br />"; $strongs="<strong>"; $stronge="</strong>"; $soubor = fopen ('diskuze.inc','a'); $datum = StrFTime("%d. %m. %H:%M:%S", Time()); fwrite ($soubor, $strongs.$datum.$stronge.$celek); fclose ($soubor); ?>
<p> Zde se zobrazí příspěvky to diskuze:<br /> <? include "diskuze.inc"; ?> </p>
<form action="index.php" method="post"> Sem pište příspěvky:<br /> <input size="30" type="text" name="zprava"> <input type="submit" value="Odeslat" > </form>
</body> </html>
Toť vše. Jak je jednoduché mít jednoduchou diskuzi, že? Samozřejmě si vše vyzdobíte styly. Pro začátek by to stačilo. Nyní se podíváme na JavaScript.
12. JavaScript JavaScript píšeme také přímo do kódu a to sice mezi tagy <script> a </script>. JavaScript je jeden z nejjednodušších programovacích jazyků vůbec (snad až na Brainfuck J). Čili, co s ním? JS umí stejně jako PHP psát HTML značky a text, má rovněž stejný problém s uvozovkami. Výše uvedený PHP kód bude v JS vypadat takto:
<html> <head><title>Kovbojský JavaScript</title></head> <body>
<font>Důležitý citát, který hnul občanskou válkou v USA: </font>
<script> document.write („Já jsem kovboj, kdo je víc?“); </script>
</body> </html>
A je v něm možné obdobně formátovat:
<script> document.write („<strong style=\“color: brown;\“>Já jsem kovboj, kdo je víc?</strong>“); </script>
Pozor však: zatímco v echu jsme se mohli rozepsat i s entery, v příkazu document.write musí být všechen text na jednom řádku. Jednotlivé řetězce a proměnné nespojujeme již tečkou, ale jen plusem – takto:
<script> blbost_1 = 5; hrusky_navic = 6; blbost_2 = „hrušek.“; document.write („Na stromě je“+blbost_1+hrusky_navic+blbost_2); </script>
Jak vidíte, práce s proměnnými je podobná jako u PHP, jen nemusíme používat znak $. Chceme-li se ujistit, že budeme sčítat a ne spojovat řetězce (čili 5+5 bude 10 a ne 55), uděláme z proměnné číslo a to nejjednodušeji vynásobením jedničkou:
cislo = cislo * 1;
Vstup můžeme dělat opět přes formulářové prvky, ale také například přes messageboxy, čili taková vyskakovací okna. Nebudu krok pro kroku vše vysvětlovat, po zkušenostech s PHP již pro vás jistě nebude JS žádnou záhadou. Jednoduchý příklad na vyskakovací okna:
x=window.prompt("Číslo, prosím:",""); y=parseInt(x)+5; document.write("Číslo je "); document.write(y);
Za příkazem window.prompt píšeme před čárku to, co bude napsané na textovým polem a za čárku, co bude v textovém poli (a uživatel si to smaže a přepíše). Funkce ParseInt je dalším způsobem, jak udělat z řetězce zaručené celé číslo. Vypisovat nemusíme jen proměnné nebo text, ale také obsah různých HTML tagů na stránce – takto:
document.write(document.forms[0].elements[0].value);
Číslo v hranaté závorce značí číslo prvku. Čili osmý prvek z druhého formuláře bude forms[2].elements[8]. Tagy můžeme skrze JavaScript obdobným způsobem také měnit:
document.getElementById(IdTagu).innerHTML = "";
Tentokrát jsme nepoužili číslo, ale Id. Id je to samé jako class, ale nepíšeme class ale id. innerHTML nahradíme parametrem, který chceme měnit. Velkou výhodou JS je také to, že jej můžeme psát přímo do parametrů tagu: uvodíme je parametrem, který nám bude říkat, při jaké akci se JS spustí – například OnClick, tedy po klepnutí myši. Nyní už jste tedy schopni udělat text, který se bude ukazovat a skrývat, podle toho, jak bude uživatel klikat na odkazy:
<a onclick="document.getElementById('mujtag').style.display='block'" href="#">Ukázat </a> <a onclick="document.getElementById('mujtag').style.display='none'" href="#">Skrýt</a> <div id="mujtag" style="display: none; font-size: x-small;">Drsní kovbojové používají místo prezervativu živé chřestýše.</div>
Určitě jste si všimli, že v href u odkazů je křížek # – ten znamená odkaz na stejnou stránku na které jsme, čili refresh. Nyní si řekneme, co to jsou funkce, jak se deklarují a vyvolávají.
12. 1. Funkce Funkce je část kódu, kterou si jakoby napíšeme někde bokem a můžeme ji kdykoliv chceme vyvolat. Deklaruje (tedy píše bokem, neboli definuje) se takto:
NázevFunkce() { Zde jsou všechny úkony, které provede při spuštění }
Funkci kdykoliv vyvoláme příkazem NázevFunkce(); kdekoliv v kódu JavaScriptu. Funkce můžeme deklarovat i do hlavičky – mezi tagy <head> a </head>. Tak, a teď se podíváme na poslední věc a to je logika, neboli také větvení.
12. 2. Logika obecně Logika je část matematiky, zabývající se výroky. Výrok je nějaké tvrzení, které může být buď pravdivé, nebo nepravdivé (1 nebo 0; P nebo N). Výroky můžeme spojovat výrokovými operátory, čímž z nich děláme jeden velký výrok. Jestli je velký výrok pravdivý či ne, rozhodneme právě podle použitého operátoru:
Konjunkce (česky A) – jestli jsou všechny výroky spojené konjunkcí pravdivé, je výrok pravdivý Disjunkce (česky NEBO) – jestli je alespoň jeden výrok ze všech spojených disjunkcí pravdivý, je celý výrok také pravdivý Ostrá disjunkce (česky BUĎ TO NEBO TO) – jestli je právě jeden (přesně jeden) výrok pravdivý, je celý výrok pravdivý Implikace (česky KDYŽ … POTOM) – jestli je první výrok pravdivý a druhý ne, potom je celkově výrok nepravdivý, ve všech ostatních případech pravdivý je Ekvivalence (česky ZÁROVEŇ) – jsou-li všechny výroky pravdivé nebo všechny nepravdivé, potom je výsledek pravdivý
12. 3. Logika v programování Je spoustu různých větvících příkazů, nicméně já vám nyní uvedu jen úplný základ a to sice klasické když, nebo-li if. Používá se takto:
if (výroky a operátory) { Co se stane, je-li celá závorka pravdivá. } else { Co se stane, není-li pravdivá. }
V jednotlivých výrocích používáme matematických operátorů jako == (rovná se), != (nerovná se), > (větší), < (menší), >= (větší disjunkce rovno), <= (menší disjunkce rovno) a mezi výroky používáme logické operátory && (konjunkce) a || (disjunkce). Ostatní logické operátory nebudete zřejmě zatím potřebovat. Nuže, to je prozatím ohledně JavaScriptu vše, co v začátcích budete potřebovat.
Ke všem znalostem použitým zde jsem přišel téměř výhradně metodou pokus/omyl. Pro ohodnocení článku musíte být registrovaným čtenářem [Akt. známka: 0 / Počet hlasů: 0]  Upozornit emailem  Vytisknout článek
Komentáře na Facebooku: Komentáře na Postřehu:
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
