JavaScript
co je to JavaScript?
JavaScript je nový skriptový jazyk. Jeho skripty mohou být vloženy přímo do Vašich HTML stránek. Pomocí tohoto jazyka budete schopni reagovat na uživatelem iniciované akce ( například vstup z formuláře). To se děje bez jakéhokoli síťového přenosu. Tedy když uľžvatel něco napíše do formuláře, není nutné, aby byl tento formulář posílán serveru, zkontrolován a poslán zase zpět. Vstup je ověřen přímo klientovskou aplikací. Samozřejmě můžete vymyslet program, který běží přímo na klientovi - v současné době je na Internetu plno různých druhů kalkulátorů. Stačí, podíváte-li se do časti o JavaScript .Ačkoli JavaScript připomíná Javu, neni to to stejné. Java je programovací jazyk, který je komplexnější než JavaScript. Javascript byl vymyslen jako lehce srozumitelný jazyk. Programátoři v JavaScriptu toho o programování nemusí vědět mnoho. Proto nejsou všechny prvky Javy implementovány do JavaScriptu.
spouštění skriptu v jazyce JavaSkript
JavaScript můžete používat od verze Netscape 2.0 beta3.
Nyní bych Vám chtěl ukázat několik malých skriptů a tak se můžete naučit, jak implementovat Vaše skripty do HTML stránek a jaké možnosti má tento nový jazyk. Začneme s velmi malým skriptem, který pouze zapisuje text do html dokumentu.
<html>
<head>
My first JavaScript!
</head>
<body>
<br>
This is a normal HTML document.
<br>
<script language="LiveScript">
document.write("This is JavaScript!")
</script>
<br> Back in HTML again.
</body>
</html>Jestliže používáte prohlížeč podporující JavaScript budete mít možnost vidět JavaScript v akci a to tak že se Vám zobrazí mezi větami "This is a normal HTML document" a "Back in HTML again" hláška This is Javascript!. Jestliže Váš prohlížeč nepodporuje JavaScript, hláška se vám samozřejmě nezobrazí.
This is a normal HTML document.
Back in HTML again.Tento dokument sice není velmi užitečný. Totéž můžete napsat v HTML snadněji a rychleji, ale tento příklad má ukázat, jak používat značky <script>. Můžete je používat ve svém dokumentu, kde budete chtít.
funkce Alert
Nyní začneme pracovat s funkcemi. Není těžké to pochopit, ale věřte mi, je to mnohem více užitečné!! Funkce je nejlépe deklarovat mezi značkami <head> Vaší HTML stránky. Funkce jsou volány uživatelem iniciovanou událostí. Proto je rozumné definice funkcí ukládat mezi značkami <head>. Tyto definice jsou nahrány ještě před tím, než má uživatel jakoukoli šanci iniciovat událost. Skripty v jazyce JavaScript je lépe ukládat mezi komentáře, aby se je starší browsery, které nepodporuji JavaScript, nepokoušely interpretovat.
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("Ahoj!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Stiskni me" onclick="pushbutton()"> </form>
</body>
</html>a takhle vypadá skript v reálu:
Tento skript vytvoří tlačítko s nápisem Stiskni mě. Jestliže bude toto tlačítko stisknuto, objeví se okno s nápisem Ahoj. V tomto skriptu se nahraje výše uvedená funkce do paměti. Potom je pomocí normální značky <form> (HTML) vytvořeno tlačítko. Ale uvnitř značky <input> je text onClick. Tento text říká prohlížeči, co má udělat, jestliže se objeví událost stisku tlačítka. Funkce 'pushbutton()' je deklarována v hlavičce. Až bude stisknuto tlačítko, tak se tato funkce vyvolá. V tomto skriptu je ale ještě něco - metoda alert. Tato metoda je deklarována samotným jazykem JavaScript, stačí ji pouze zavolat. V jazyce JavaScript je mnoho metod předdeklarovaných. Jejich kompletní přehled můžete najít u firmy Netscape. Myslím, že v blízké budoucnosti se tento seznam mírně prodlouží ... ale i tak lze s jazykem JavaScript provádět mimořádné kousky.
čtení dat z formuláře
Nyní Vám ukážu ,jak můžeme číst něco, co vloží uživatel do formuláře.
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Hi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>takhle vypadá výsledný skript:
Please enter your name:Opět máme nějaké nové prvky v tomto skriptu. Za prvé jsou ve skriptu komentáře. Tímto způsobem můžete skrýt skript před starými browsery, které nepodporují Javascript. Ale pozor, musíte zachovat uvedené pořadí! Počátek komentáře musí být hned za první značkou <script>. Konec komentáře je hned za poslední značkou </script>. V tomto html dokumentu máte formulářovy prvek, který umoľní uživateli vložit jeho jméno. Text 'OnBlur' ve značce <input> říká klientovi, kterou funkci musí zavolat, když bude něco vloženo do formuláře. Funkce 'getname(str)' bude zavolána když 'opustíte' tento formulářový prvek nebo stisknete klávesu 'enter'. Tato funkce vezme řetězec, který jste napsali ve funkci 'getname(this.value)'. 'This.value' znamená hodnotu, kterou uľivatel vloľil do formuláře.
implementace f-ce datumu poslední úpravy
Následující věc je velmi užitečná. Implementujeme do načeho skriptu funkci, která vytiskne do html dokumentu datum posledních úprav. Již nebudete muset psát datum ručně do dokumentu, tato funkce to udělá za Vás. Jednoduše napíšeme malý skript. Tento skript automaticky změní datum po Vašich úpravách.
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
vložení datumu a času
Nyní bych Vám chtěl ukázat příklad použití času a data. Již jste měli možnost vidět vlastnost lastModified. Nyní vložíme do našeho dokumentu aktuální čas. Tato metoda používá data a času na Vašem počítači, proto máte-li nastaven čas na 17. května 1983, vrátí se Vám samozřejmě špatné datum.
<script language="LiveScript">
<!-- Hiding
today = new Date()
document.write("The time now is: ",today.getHours(),":",today.getMinutes())
document.write("
The date is: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>výsledek naší práce bude vypadat takto:
Prvně si musíte vytvořit datovou proměnnou. To je uděláno v řádku today=new Date() . Jestliže nespecifikujeme jistý čas a datum, prohlíľeč použije lokální čas a vloží ho do proměnné today. Všimněte si, že nemusíme nikde deklarovat proměnnou today. To je rozdíl mezi Javou a podobnými programovacými jazyky, kde musíte specifikovat typ proměnne než ji poprvé použijete. Už jsme vytvořili datový objekt, který uchovává lokální čas a datum. Nyní můžeme jednoduše vypsat její obsah do dokumentu. Pozor, musíte napsat today před každou metodu get.... Jinak by prohlížeč nevěděl, na jaký objekt se dotazujete. Metoda getMonth vrací číslo mezi 0 a 11 - 0 pro leden až 11 pro prosinec. Proto musíme přičíst číslo 1, abychom dostali správný měsíc.
vyskakování oken
Vytváření oken je jedna z největších možností JavaScriptu. Můžete vytvořit nové okno a nahrát do něj nový HTML - dokument. Ukážu Vám, jak otevřít nové okno a jak do něj zapisovat.
<head>
<script language="LiveScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>JS</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>funguje to?</B></h1></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>Jako vždy můžete vidět tlačítko, které volá funkci. Funkce WinOpen() vytvoří nové okno voláním metody open. První uvozovky obsahují URL stránky - sem můžete vložit URL Vašeho dokumentu. Jestliže tyto necháte prázdné, můľete do nové stránky vytvořit HTML dokument. Další uvozovky specifikují jméno nového okna. Sem můžete napsat cokoli. Poslední uvozovky specifikují vlastnosti okna. Vlastnosti jsou :
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width= pixels
height= pixels
příklady:
zobrazení aktuálního času a datumu
odpočet zbývajících dnů ke svátku, narozeninám ...