Návrh a tvorba WWW stránek 1/29 Javascript • skripty provádí prohlížeč - klient • dynamicky generovaný obsah stránek, efekty, interakce • nejrozšířenější klientský skriptovací jazyk (VBScript a další) • nesouvisí s jazykem Java • XHTML + Javascript (+ PHP)= "skriptování stránek" Javascript - jazyk • interpretováný – nemusí se kompilovat • objektový – využívá standardní i uživatelsky definované objekty • závislý na prohlížeči – problematická podpora • case-sensitive – záleží na velikosti písmen • syntaxí podobný jazyku C
30
Embed
Javascript · 2007. 12. 3. · Javascript v XHTML • v případěXHTML interpretuje prohlížečznačky, v případě javascriptu již vykonávají program • možnosti, jak vložit
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Návrh a tvorba WWW stránek 1/29
Javascript• skripty provádí prohlížeč - klient• dynamicky generovaný obsah stránek, efekty, interakce• nejrozšířenější klientský skriptovací jazyk (VBScript a další)• nesouvisí s jazykem Java• XHTML + Javascript (+ PHP)= "skriptování stránek"
Javascript - jazyk• interpretováný – nemusí se kompilovat• objektový – využívá standardní i uživatelsky definované objekty• závislý na prohlížeči – problematická podpora• case-sensitive – záleží na velikosti písmen• syntaxí podobný jazyku C
Návrh a tvorba WWW stránek 2/29
Omezení jazyka• uživatel může javascript zakázat• funguje pouze ve spojení s prohlížečem• neumí pracovat se soubory – bezpečnost, běží na klientu• neumí ukládat data (pouze cookies)• neumí kreslení, komunikace v síti• svázaný s www stránkou, nelze vytvořit samostatnou aplikaci
Co je dobré znát předem• XHTML• formuláře v XHTML a jejich obsluhu• možnosti prohlížečů a jejich verzí• způsob přenosu dokumentu XHTML po Internetu
Návrh a tvorba WWW stránek 3/29
Javascript v XHTML• v případě XHTML interpretuje prohlížeč značky, v případě
javascriptu již vykonávají program
• možnosti, jak vložit javascript do XHTML dokumentu:
1. vnitřní deklarace – skript je přímo součástí XHTML2. vnější (externí) deklarace – v samostatném souboru3. řádková deklarace – na místě atributů ve značkách XHTML
• všechny uvedené způsoby lze libovolně kombinovat
Návrh a tvorba WWW stránek 4/29
Vnitřní deklarace javascriptu• mezi značky <script> a </script>• skript je přímo součástí XHTML dokumentu• v hlavičce i v těle dokumentu• většinou v hlavičce deklarace funkcí, objektů a proměnných • prohlížeč skript zpracovává okamžitě• povinný atribut type="text/javascript" - definice MIME• nepovinné atributy language, src
Základní syntaxe javascriptu• oddělování příkazů středníkem – někdy lze vynechat• velikost písmen (proměná ≠ Proměnná) – case-sensitive• použití apostrofů a uvozovek – mají stejný význam
while (podmínka)• for – cyklus s daným počtem opakování
for (počáteční hodnota; podmínka; navýšení) { příkazy;
}
Návrh a tvorba WWW stránek 11/29
Funkce• deklarace funkce – většinou v hlavičce dokumentu
function jmenoFunkce([parametry]) {
příkazy;[return hodnota];
};
• volání funkce v těle dokumentujmenoFunkce([hodnota, hodnota]);
• volání funkce na základě události v těle XHTML dokumentu<img onmouseover="alert('AHOJ')" />
• volání funkce, která vrací hodnotuproměnná = jmenoFunkce([parametry]);
• deklarace lokální proměnné za klíčovým slovem var
Návrh a tvorba WWW stránek 12/29
Volání parametrů odkazem a hodnotou (1/3)• pokud je parametr funkce volán hodnotou, veškeré operace ve funkci jsou pouze lokální - nezmění jeho hodnotu mimo funkci
• volání odkazem použijeme v případě, že chceme aby funkce volaný parametr změnila a tyto změny se projevily i mimo funkci
• u jednoho parametru toto zajistíme klíčovým slovem return
• v javascriptu jsou obecně jednoduché datové typy (čísla, řetězce, logické proměnné) předávány hodnotou, složité datové typy (objekty, pole) jsou předávány odkazem
Návrh a tvorba WWW stránek 13/29
Volání parametrů odkazem a hodnotou (2/3)Příklad:
function Vypis(Cislo,Retezec,Objekt) {var S='Cislo: '+Cislo+'\nŘetězec: '+Retezec+'\nObjekt.jazyk: '+Objekt.jazyk;
Cislo++;Retezec+='-Přidáno-';Objekt.jazyk='PHP';}var Cislo=10; // deklaracevar Retezec='TEXT';var Objekt = new Object();Objekt.jazyk='čeština';Vypis(Cislo,Retezec,Objekt); // kontrolni vypisNastav(Cislo,Retezec,Objekt); // zmena hodnotVypis(Cislo,Retezec,Objekt); // vypis po zmene
Návrh a tvorba WWW stránek 14/29
Volání parametrů odkazem a hodnotou (3/3)Výsledek:
Číslo:10Řetězec: TEXTObjekt.jazyk: čeština
Číslo: 10Řetězec: TEXTObjekt.jazyk: PHP
Návrh a tvorba WWW stránek 15/29
Objektový model javascriptu• objektovost javascriptu znamená, že všechny vlastnosti a příkazy jsou uspořádány podle nějakého systému • je třeba se naučit, jak se které prvky zapisují• tečková notace (objekt.podobjekt.metoda())• metoda – sama o sobě je příkazem, který něco dělá• vlastnost – nic nedělá, ale má hodnotu, dá se číst nebo zapisovat• podobjekt – může mít další metody, podobjekty a vlastnosti
links - anchors - images - filters - forms - applets - embeds -plugins - frames - scripts - selection - styleSheets - body - all
• objekt window lze při zápisu vynechat• nejdůležitější je objekt document – obsahuje objekty a vlastnosti vztahující se k aktuálnímu dokumentu• přetrvává problém s kompatibilitou starších prohlížečů
Návrh a tvorba WWW stránek 17/29
Metody a vlastnosti objektu window
• window.alert(); // zobrazení hlášky v okně• window.blur(); // posunutí vybraného okna do pozadí• window.close(); // zavření okna (v FF jen pro window.open())• window.confirm(); // hláška ano-ne (vrací true/false)• window.focus(); // posunutí vybraného okna do popředí• window.open(); // vytvoření nového okna• window.print(); // tisk dokumentu• window.prompt(); // hláška pro zadání údajů• window.resizeBy(); // změna velikosti okna o danou hodnotu• window.resizeTo(); // změna velikosti na danou hodnotu• window.scrollBy(); // scrollování dokumentu
• vlastnost window.status – text ve stavovém řádku
Návrh a tvorba WWW stránek 18/29
Metody objektu location• location.href(URL); // načte URL do dokumentu• location.reload(boolean); // znovunačtení dokumentu• location.replace(); // nahradí dokument jiným
Vlastnosti objektu location• protocol // vrátí protokol (http, file)• pathname // cesta k dané stránce• hostname //jméno hostitelského serveru (IP)
Týká se adresy aktuálního dokumentu
Návrh a tvorba WWW stránek 19/29
Metody objektu history• history.back(); // o krok zpět• history.back(3}; // o 3 kroky zpět• history.forward(2); // vpřed o 2 kroky• history.go(-1); // o krok zpět
Vlastnosti objektu history• length // o kolik kroků se lze vrátit zpět
Týká se historie prohlížených stránek
Návrh a tvorba WWW stránek 20/29
Metody objektu screen• nejsou – nelze ovlivňovat nastavení monitoru
Vlastnosti objektu navigator• appName // název prohlížeče (např. "Netscape")• appVersion // verze prohlížeče (IE vraci "4.0")• onLine // vrací true/false podle stavu připojení• platform // operační systém klienta• appCodeName // kódové jméno prohlížeče, vždy Mozilla• javaEnabled // podpora javy v prohlížeči
Týká se typu a verze prohlížeče
Návrh a tvorba WWW stránek 22/29
Metody objektu event• AltKey // vrací true, pokud byl stisknut [Alt]• CtrlKey // vrací true, pokud bylo stisknuto [Ctrl]• ShiftKey // vrací true, pokud byl stisknut shift• button // vrací číslo stisknutého tlačítka(0 - žádné,
1 - levé, 2 - pravé, 4 - prostřední• clientX // souřadnice x kurzoru v okně prohlížeče• clientY // souřednice y kurzoru v okně prohlížeče• keyCode // vrací ascii kod stisknuté klávesy• ScreenX // souřadnice x kurzoru vzhledem k obrazovce• ScreenY // souřadnice y kurzoru vzhledem k obrazovce
Týká se práce s tlačítky (myš) a klávesami
Návrh a tvorba WWW stránek 23/29
Objekt document• přístup k obrázkům, formulářům, odkazům, barvám atd.• lze nastavovat všechny prvky v dokumentu (záměna obrázků, hodnoty ve formuláři, barvy dokumentu atd.)• podobjekty – images, forms, applets, all, …• metody – write• vlastnosti
Týká se práce s prvky v dokumentu
Návrh a tvorba WWW stránek 24/29
Vlastnosti objektu document• location // aktuální URL• referrer // URL předchozí stránky• alinkColor, vlinkColor, linkColor // aktivní, visited, ostatní• title // titulek stránky• fgColor // implicitní barva textu• bgColor // barva pozadí• lastModified // poslední změna dokumentu• all[cislo] // pole všech objektů v dokumentu• forms[], images[], anchors[], links[], styleSheets[]
Návrh a tvorba WWW stránek 25/29
Použití objektů dokumentu• změna obrázku<img border="0" src="stoude.jpg" name="jmeno" onmouseover="document.images['jmeno'].src='druhy.jpg'" onmouseout="document.images['jmeno'].src='prvni.jpg'" />
• Math – matematické výrazy– http://javascript.webz.cz/javascript-reference-math.php3
• Array – práce s polem– http://javascript.webz.cz/javascript-reference-array.php3
• Date – práce s datem– http://www.jakpsatweb.cz/javascript/objekt-date.html
Návrh a tvorba WWW stránek 27/29
Události javascriptu – události okna a dokumentu• onLoad – při úplném načtení stránky (framu)• onUnload – při opuštění stránky• onResize – při změně velikosti okna• onScroll – při scrollování
Události javascriptu – události myši• onClick, onDblClick, onMouseOver, onMouseOut, onMouseMove, onMouseDown, onMouseUp
Události javascriptu – události klávesnice• onKeyPress – při stisknutí klávesy• onKeyDown• onKeyUp
Události javascriptu – události formuláře• onSubmit, onReset – před odesláním formuláře (po stisku Reset)<form … onreset="confirm('Chcete opravdu vymazat hodnoty
• return false – aby se nová stránka nenačetla do původního okna
Návrh a tvorba WWW stránek 30/29
Bookmarklet• krátký javascript svázaný s odkazem (max ± 2000 znaků)
<a href="javascript:kód skriptu">
Přidání stránky do oblíbených položek<script type="text/javascript">if (parseInt(navigator.appVersion)>3) {document.write (
'<a href="javascript:window.external.AddFavorite'+'(\'http://www.neco.cz/neco/\','+'\'Jak přidat stránku do oblíbených\')">'+'Přidej do oblíbených</a>.')