Každý webdesignér by měl znát základy JavaScriptu, už jen proto, aby věděl, co lze na web umístit, zejména na první stránku.
Nabízíme základní školení. Krátké video o tom, co je JavaScript.
JavaScript
Javascript poskytuje webovým designérům mnoho příjemných nových možností pro uživatele webových stránek. Od nástupu javascriptu se weby staly zajímavějšími, poskytují lepší informace, sbírají od svých uživatelů tzv. zpětnou vazbu, nezbytnou v podnikání pro zlepšení nabídky nebo kvality nabízeného produktu. Javascript umožňuje uživateli přizpůsobit stránku jeho podmínkám.
Definice
Definice tohoto programovacího jazyka je . Programovací jazyk je sada příkazů pro počítač, aby na obrazovce zobrazil to, co chceme, aby bylo na obrazovce. Počítač není jen internet a webové stránky. Jsou to také moderní stroje a řídicí systémy, například pohyb, řízený počítačem. Zde se také používá Javascript.
Kódy kurzů, stránka Bener
Vyberte fragment na začátku dokumentu, stiskněte klávesu Shift a umístěte kurzor na konec dokumentu.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style> <!------^^^^^^^^^^^^^^^^^od-6-do-96-kod-css^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--------------------------------------------------->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><!------------externí skript z knihovny jquery------>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img-3.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img-1.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img-2.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!-----------------------------------------------od ted script slide------------------------------------------------------------------------>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script> <!--od-122-do-158-kod-js-->
<!-----------------------------------------------od ted script cookie---------------------------------------------------->
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
$(document).ready(function() {
var message = 'Používáme cookies, abychom vám usnadnili používání našich webových stránek a pro statistické účely. Pokud tyto soubory nezablokujete, souhlasíte s jejich používáním a uložením do paměti zařízení. Pamatujte, že soubory cookie můžete spravovat sami změnou nastavení prohlížeče.';
var message2 = 'ROZUMÍM, TOTO OKNO ZNOVU NEZOBRAZUJI.';
var div = '<div class="cookie-alert" style="position:relative;top:0;width:100%;text-align:center;background-color:#000000;color:#FFFFFF;opacity:0.8;font-size:13px;font-weight:bold;font-family:tahoma;padding-top:20px;padding-bottom:10px;"><div style="width:800px;margin:0 auto;">'+message+'<br /><br /><span style="color:red;cursor:pointer;" class="cookie-alert2">'+message2+'</span></div></div>';
var ciastko = getCookie('cookie-alert');
if(ciastko != 1) {
$('body').prepend(div);
}
$('.cookie-alert2').click(function() {
$('.cookie-alert').slideUp('slow');
setCookie('cookie-alert', 1, 365);
});
});
</script>
</body>Kódy kurzů, stránka Ahoj
<!DOCTYPE HTML>
<html lang="cz">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<title>Ahoj</title>
<script>
alert("Ahoj, je mi skvěle.")
</script> <!---------------------------------První skript---------------->
</head>
</body>
</html>Kódy kurzů, stránka Hodina
Vyberte fragment na začátku dokumentu, stiskněte klávesu Shift a umístěte kurzor na konec dokumentu.
<!DOCTYPE HTML>
<html lang="cz">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<title>DataTime</title>
<script type="text/javascript">
function odpocitavani()
{<!----funkce zvana odpocitavani, vlastni jmeno, muze byt cokoliv, napr. vlak nebo lod, nepouzivejte zadne narodni znaky, slovo musi byt v radku nr 29-provest takovou funkci a 33-kdy funkci spustit--->
var sloveso = new Date();<!--var-promenne, protoze se zmzi hodnota, new DATE-jmeno mnoziny informaci, sloupec v operacni pameti pocitace, obsahujici informaci o case, ktery se meni.-->
var rok = sloveso.getFullYear(); <!--zobrazit promennou rok, informace jsou ve sloupci sloveso-->
var mesic = sloveso.getMonth()+1; <!--zobrazit promennou mesic, informace jsou ve sloupci sloveso,+1 bo Americane pocitaji od 0 a Evropane od 1-->
var den = sloveso.getDate(); <!--zobrazit promennou den, informace jsou ve sloupci sloveso-->
var hodina = sloveso.getHours(); <!--zobrazit promennou hodina, informace jsou ve sloupci sloveso-->
var sekunda = sloveso.getSeconds(); <!--zobrazit promennou sekunda, informace jsou ve sloupci sloveso-->
var minuta = sloveso.getMinutes(); <!--zobrazit promennou minuta, informace jsou ve sloupci sloveso-->
if (sekunda<10) sekunda = "0"+sekunda; <!--Je-li (if) napr. sekunda mensi nez <10, pak +0 je nula v cislech 01,02,03 ...->
if (minuta<10) minuta = "0"+minuta; <!--Je-li (if) napr. minuta mensi nez <10, pak +0 je nula v cislech 01,02,03 ...->
if (hodina<10) hodina = "0"+hodina; <!--Je-li (if) napr. hodina mensi nez <10, pak +0 je nula v cislech 01,02,03 ...->
document.getElementById("czasy").innerHTML =
den+"/"+mesic+"/"+rok+" | "+hodina+":"+minuta+":"+sekunda;<!--prikaz - zobrazi v div-czasy informace ziskane z vyee popsane funkce-->
setTimeout("odpocitavani()",1000);<!--prikaz ke spusteni funkci odpocitavani,takze sekunda, 1000 milisekund, radek 8-->
}
</script>
<!--Navrhuji shrnout, co jsme udÄ_lali: v operaÄ_nĂ pamÄ_ti poÄ_ĂtaÄ_e novĂ˝ sloupec Datum. PomocĂ funkce var (promÄ_nnĂĄ) jsme zĂskali informaci o tom, jakĂ˝ je dnes Ä_as - Ĺ_ĂĄdky 12, 13, 14 a 16, 19, 22 a Ĺ_ekli jsme poÄ_ĂtaÄ_i, aby tyto informace zobrazil v <div czasy> , Ĺ_ĂĄdky 25-28 . Ä_Ăsla Ĺ_ĂĄdkĹŻ zĂĄvisĂ na velikosti obrazovky, mohou se liÄ_it.--->
</head>
<body onload="odpocitavani();"><!--Informace o tom, kdy spustit funkci dpocitavani-->
<div id="czasy"></div>
</body>
</html>
Kódy kurzů, stránka Hodiny
Vyberte fragment na začátku dokumentu, stiskněte klávesu Shift a umístěte kurzor na konec dokumentu.
<!DOCTYPE HTML>
<html lang="cz">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<title>DataTime</title>
<script type="text/javascript">
function odpocitavani()
{<!----funkce zvana odpocitavani, vlastni jmeno, muze byt cokoliv, napr. vlak nebo lod, nepouzivejte zadne narodni znaky, slovo musi byt v radku nr 29-provest takovou funkci a 33-kdy funkci spustit--->
var sloveso = new Date();<!--var-promenne, protoze se zmzi hodnota, new DATE-jmeno mnoziny informaci, sloupec v operacni pameti pocitace, obsahujici informaci o case, ktery se meni.-->
var den = sloveso.getDate(); <!--zobrazit promennou den, informace jsou ve sloupci sloveso-->
var mesic = sloveso.getMonth()+1; <!--zobrazit promennou mesic, informace jsou ve sloupci sloveso,+1 bo Americane pocitaji od 0 a Evropane od 1-->
var rok = sloveso.getFullYear(); <!--zobrazit promennou rok, informace jsou ve sloupci sloveso-->
var hodina = sloveso.getHours(); <!--zobrazit promennou hodina, informace jsou ve sloupci sloveso-->
if (hodina<10) hodina = "0"+hodina; <!--Je-li (if) napr. hodina mensi nez <10, pak +0 je nula v cislech 01,02,03 ...->
var minuta = sloveso.getMinutes(); <!--zobrazit promennou minuta, informace jsou ve sloupci sloveso-->
if (minuta<10) minuta = "0"+minuta; <!--Je-li (if) napr. minuta mensi nez <10, pak +0 je nula v cislech 01,02,03 ...->
var sekunda = sloveso.getSeconds(); <!--zobrazit promennou sekunda, informace jsou ve sloupci sloveso-->
if (sekunda<10) sekunda = "0"+sekunda; <!--Je-li (if) napr. sekunda mensi nez <10, pak +0 je nula v cislech 01,02,03 ...->
document.getElementById("czasy").innerHTML =
den+"/"+mesic+"/"+rok+" | "+hodina+":"+minuta+":"+sekunda;<!--prikaz - zobrazi v div-czasy informace ziskane z vyee popsane funkce-->
setTimeout("odpocitavani()",1000);<!--prikaz ke spusteni funkci odpocitavani,takze sekunda, 1000 milisekund, radek 8-->
}
</script>
<!--Navrhuji shrnout, co jsme udělali: v operační paměti počítače nový sloupec Datum. Pomocí funkce var (proměnná) jsme získali informaci o tom, jaký je dnes čas - řádky 12, 13, 14 a 16, 19, 22 a řekli jsme počítači, aby tyto informace zobrazil v <div czasy> , řádky 25-28 . Čísla řádků závisí na velikosti obrazovky, mohou se lišit.--->
</head>
<body onload="odpocitavani();"><!--Informace o tom, kdy spustit funkci dpocitavani-->
<div id="czasy"></div>
</body>
</html>
Tréninkové soubory jsou výše.