-
server-side vs. client-side
- nasazení
- server-side, poskytující čisté HTML
- oživení webových stránek u klienta (funkce navíc, web funguje i bez JS)
- zásadní funkce (web lze bez JS použít s obtížemi)
- aplikace je plně napsaná v client-side JS
- objektově-orientovaný jazyk s dynamickým typováním
- syntaxe podobná Javě
- základem je asociativní pole
- funkce je objekt, lze ji přiřazovat
Vložení do HTML
<head>
<script type="text/javascript" language="javascript" src="soubor.js">
</script>
<script type="text/javascript" language="javascript">
// JS kód
</script>
...
</head>
JQuery
- knihovna usnadňující jednoduché akce na HTML stránce
-
stáhněte si minifikovanou verzi
- vložte ji do HTML stránky
- základ je
$('něco') kde něco je selektor jako v CSS pomocí kterého
lze vybrat kterých prvků se akce týká
Příklad: načítání stránky
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dlouhá stránka</title>
<script type="text/javascript" language="javascript"
src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(window).on("load", function() {
$('.loading').fadeOut(2000);
});
</script>
<style type="text/css">
.loading {
position: fixed; z-index: 1000;
left: 50%; top: 50%;
padding: 1ex; border: 1px solid black;
}
</style>
</head>
<body>
<p class="loading">Stránka se načítá...</p>
<h1>Nadpis</h1>
<p>Obsah stránky</p>
<p>Obsah stránky</p>
<p>...</p>
</body>
</html>
Příklad: automatický obsah
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stránka s obsahem</title>
<script type="text/javascript" language="javascript"
src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('H2').each(function(index, title) {
$("#toc").append("<li>" + $(title).text() + "</li>");
});
});
</script>
</head>
<body>
<ul id="toc" style="color:blue">
</ul>
<h1>Hlavní nadpis</h1>
<p>Lorem Ipsum...</p>
<h2>První sekce</h2>
<p>Lorem Ipsum...</p>
<h2>Druhá sekce</h2>
<p>Lorem Ipsum...</p>
</body>
</html>
Příklad: kvadratická rovnice
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Řešení kvadratické rovnice</title>
<script type="text/javascript" language="javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="kvadrrov.js"></script>
<style type="text/css">
.rovnice INPUT {
width: 3em;
}
</style>
</head>
<body>
<h1>Řešení kvadratické rovnice</h1>
<p class="rovnice">
<input type="text" name="a" id="a" value="1" />
<i>x</i><sup>2</sup> +
<input type="text" name="b" id="b" value="2" />
<i>x</i> +
<input type="text" name="c" id="c" value="1" />
= 0
</p>
<p>
<input type="button" id="pocitej" value="Spočítat" />
</p>
<p>Řešení: <span id="reseni" /></p>
<p id="chyba"></p>
</body>
</html>
function neniCislo(x) {
return x == "" || isNaN(x);
}
function spocitej() {
$("#chyba").text("");
$("#reseni").text("");
var a = $("#a").val().trim();
var b = $("#b").val().trim();
var c = $("#c").val().trim();
if (neniCislo(a) || neniCislo(b) || neniCislo(c)) {
$("#chyba").text("Koeficienty musí být čísla.");
return;
}
var eps = 0.0001;
var diskr = b*b - 4*a*c;
if (diskr < -eps) {
$("#reseni").text("rovnice nemá řešení v oboru reálných čísel.");
} else if (diskr > eps) {
var x1 = (- b + Math.sqrt(diskr)) / (2*a);
var x2 = (- b - Math.sqrt(diskr)) / (2*a);
$("#reseni").html("x<sub>1</sub> = " + x1 + " " + "x<sub>2</sub> = " + x2);
} else {
var x12 = -b / (2*a);
$("#reseni").html("x<sub>1,2</sub> = " + x12);
}
}
$(document).ready(function(){
$("#pocitej").click(spocitej);
$(".rovnice INPUT").change(spocitej);
$(".rovnice INPUT").keypress(spocitej);
$(".rovnice INPUT").keydown(spocitej);
$(".rovnice INPUT").keyup(spocitej);
$("#pocitej").click();
});
Další příklady
- rozšiřte automatický obsah o odkazy na příslušné sekce
- za všechny nadpisy přidejte odkaz na začátek stránky
Hodnocený příklad
- vytvořte převodník mezi stupni Celsia a Farhneita
- dvě vstupní pole
- změna v jednom z nich přepočítá druhé
- (tj. výsledek se zobrazí v druhém
INPUTu)
- řešení přidejte jako novou stránku do
hugo-miniweb projektu
