Úvod od JavaScriptu – 5.díl

V dnešním závěrečném dílu se už nebudem zabývat základy JavaScriptu. Chtěl bych spíšte poukázat na možnosti využití s AJAXem i pomocí jQUERY. Jeden příklad jsem už použil v minulém dílu – LightBox. Použití už hotových řešení není vůbec složitá věc a dokáže nám oživit a zmodernizovat web. Všechny tutoriály k jednotlivým řešením jsou psány většinou v angličtině, takže budete potřebovat znát dva jazyky: JavaScript a Angličtinu. Základům JavaScriptu se naučíte v tomto tutoriálu a s angličtinou Vám pomůže třeba strejda Google :).


www.jquery.com

Zde najdete opravdu velké množství hotových řešení i s návodem na použití. Stačí si jedno vybrat, stáhnout jquery.js a soubor také .js přímo od té aplikace. Tyto, většinou pouze dva soubory, načtete v hlavičce webu. Dále použijete spouštěcí kód aplikace tam, kde potřebujete. Není v tom žádná věda, občas je potřeba naimportovat ještě CSS soubor aplikace.

Dělící kalkulačka pomocí AJAXu

Dále Vám ukáži zdrojový kód kalkulátoru, který umí pouze dělit. Můžete si ho po pochopení ještě rozšířit na všechny čtyři základní početní operace. Bude ještě zapotřebí základní znalost PHP.

Nejdříve se podíváme na soubor kalkulator.php:

<?php
 $nDelenec = $_REQUEST["dc"];
 $nDelitel = $_REQUEST["dl"];

 print "Dělenec: ".$nDelenec."<br/>";
 print "Dělitel: ".$nDelitel."<br/>";
 print "=============================<br/>";
 print "Podíl: ".($nDelenec / $nDelitel);
?>

Zde zcela základní operace. Dostaneme dvě čísla (dělence a dělitele) přes $_REQUEST ty vydělíme a pomocí print to vypíšeme na obrazovku.

Výpis souboru kalkulator.html:

<html>
<head>
<meta http-equiv="content-type" content="text/html;
 charset=windows-1250">

<title>AJAX kalkulátor umožňující dělení </title>
 <script language = "javascript">

 var xHttp;

 function Kalkulator(dataSource)
 {
 xHttp = VytvorXMLHttp();
 xHttp.open("GET", dataSource);
 xHttp.onreadystatechange = function()
 {
 if (xHttp.readyState == 4 && xHttp.status == 200)
 {
 var oznam = document.getElementById("oznam");
 oznam.innerHTML = xHttp.responseText;
 }
 }
 xHttp.send(null);
 }

 function DekodujParametr(udalost)
 {
 var dc = document.getElementById("txDelenec");
 var dl = document.getElementById("txDelitel");
 var oznam = document.getElementById("oznam");
 oznam.innerHTML = "<div></div>";
 Kalkulator ("kalkulator.php?dc=" + dc.value + "&dl=" + dl.value);
 }

 function VytvorXMLHttp()
 {
 var xmlHttp= false;

 if (window.ActiveXObject)
 {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
 else if (window.XMLHttpRequest)
 {xmlHttp = new XMLHttpRequest();}
 return xmlHttp;
 }

 </script>
 </head>
 <body>
 <h1>AJAX kalkulátor</h1>
 Zadejte dělenec a dělitel:<br/>
 <input type="text" id = "txDelenec" value = "1"
 onkeyup = "DekodujParametr(event)"/>
 <br/>:<br/>
 <input type="text" id = "txDelitel" value = "1"
 onkeyup = "DekodujParametr(event)"/>
 <div id = "oznam"><div>
 </body>
</html>

Je to pouze ukázkový příklad, takže ho nebudu nějak blíže rozebírat. Po každé změně textového pole se vyvolá událost, která zavolá soubor kalkulator.php se dvěma parametry (dělencem a dělitelem). To, co php soubor vrátí, zapíše do div tagu s id oznam. Ještě chci dodat, že to není v ohledu na funkčnost kde jaký výtvor, protože v něm není například ošetřeno dělení nulou nebo zadání jiného znaku než čísla, ale pro ukázku to stačí…

Tímto končím pátý a zároveň závěrečný díl tutoriálu základů JavaScriptu. Chtěl jsem to vzít trochu z jiné stránky – snažil jsem se Vám na příkladech vysvětlit základy JS a to bez nějaké větší teorie. Doufám, že jste si alespoň něco z těchto pěti dílů odnesli a použijete dále v rozvoji svých znalostí nebo práci na webu.

Good luck! ;)

O Antonín Crha

Jsem studentem Masarykovy Univerzity - Fakulta Informatiky. Zabývám se především tvorbou webových prezentací pomocí PHP, XHTML, CSS, MySQL, JS, AJAX a základní SEO optimalizace. Dále mi také není cizí JAVA, C, počítačové sítě a oprava PC. Jinak rád hraji fotbal, stolní tenis a ještě radši jsem s přáteli v nějaké hospůdce :)...