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

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


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


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


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

<head>

<script type="text/javascript" language="javascript">

function Pozdrav() {

alert ('Ahoj'); }

</script>

</head>

<body onload="Pozdrav()">…</body>


Externí deklarace javascriptu• nejčastější způsob použití• deklarace v externím souboru

<head><script type="text/javascript"src="externi_skript.js"></script>

</head>

• obsah externího souboru se provede jakoby byl uvnitř <script>

Řádková deklarace javascriptu – "in-line"• obsluha událostí – spojení skriptu s obsluhou tlačítka

<form name="formular" method="post" action=""><input type="button" name="tlacitko" value="stiskni"

onclick="alert('Stisknul jsi mě!')" /></form>


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

<img onmouseover="alert('AHOJ')" />

• escape sekvence – zobrazení speciálních znaků<img onmouseover="alert(\"AHOJ\")" />

• komentáře – stejně jako v C (C++),

– navíc <!– řádkový komentář -->• logické hodnoty – true, false• objekty a metody – oddělují se tečkou (objekt.podobjekt.vlastnost)


Proměnné v javascriptu• netypové, nemusí se deklarovat, deklarace uvozena var

var x="obsah";

• vypsání hodnoty proměnnédocument.write(x);

• automatické určení typu proměnné při prvním použití<script type= " text/javascript" >

var y, text;y = 13;y = y * 2 * 7 * 11;text = "Hezké číslo je " + y;document.write(text);

</script>

• automatická konverze typu proměnnýchx=1+1; // vysledkem je 2x=1+'1'; // vysledkem je 11


Operátory v javascriptu• operátory přiřazení

= přiřazení+= přičtení*= , -=, /= přinásobení, odečtení, „oddělení“++ přičtení 1

• početní operátory (+ - * /)• logické operátory

== rovnost (dvě rovnítka)!= nerovnost<,<=,>=,> aritmetické porovnávání&&,|| logické AND (a zároveň), logické OR (nebo)! logické NOT (negace)


Větvení• if-else

if (podmínka) {příkazy prováděné při splnění podmínky;}else {příkazy prováděné při nesplnění podmínky;

}PŘÍPADNĚ

proměnná = podmínka ? hodnota1 : hodnota2;• switch-case

switch (proměnná) {case hodnota1 : příkaz1;case hodnota2 : příkaz2;...default : příkazx; }


Cykly• while – cyklus s podmínkou na začátku

while (podmínka) {sekvence příkazů

}• do-while – cyklus s podmínkou na konci

do{sekvence příkazů}

while (podmínka)• for – cyklus s daným počtem opakování

for (počáteční hodnota; podmínka; navýšení) { příkazy;

}


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


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


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;

document.write(S); }function Nastav(Cislo,Retezec,Objekt) {

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


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


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

Příklad:window.history.back();

window.location.href=http://www.upce.cz;


Hierarchie objektůwindow

location - frames - history - navigator - event - screen - document

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čů


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


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


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


Metody objektu screen• nejsou – nelze ovlivňovat nastavení monitoru

Vlastnosti objektu screen

• height // výška (rozlišení)• width // šířka (rozlišení)• availHeight // dostupná výška okna• availWidth // dostupná šířka okna• colorDepth // barevná hloubka

Týká se vlastností obrazovky


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


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


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


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[]


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'" />

… zkráceně … onmouseover="document.jmeno.src='druhy.jpg'"

• změna hodnoty prvku formuláře<form name="formular"><input type="text" name="policko" size="20" value="" /><input type="button" value="zelena" onclick="document.formular.policko.value='zelena'" /><input type="button" value="cervena" onclick="document.formular.policko.value='cervena'" /></form>

• alternativní styly a přepínání mezi nimi• aktuální velikost okna – skript musí být uvnitř <body>


Další objekty• String – práce s řetězci

– http://javascript.webz.cz/javascript-reference-string.php3

• 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


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

• odchycení stisku tlačítka myši:<img src="" alt="" onmousedown="alert('Neklikej!')" />


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

formuláře?')"> … </form>

• onFocus, onBlur – při aktivaci (deaktivaci) políčka<textarea name="" rows="5" cols="60"

onfocus="this.style.background='blue'"></textarea>

• onChange – při změně hodnoty vstupního pole

• onSelect – při výběru textu myší (v celém body)


Otevření nového oknawindow.open("URL", "volba_ramu", "atribut1,atribut2")

• atributy – toolbar, location, status, menubar, scrollbars, resizeable– width, height, left, top (pixely)– fullscreen (CELÁ OBRAZOVKA)

<a href="" onclick="window.open('index.htm');return false">

• return false – aby se nová stránka nenačetla do původního okna


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>.')

} </script>

Documents

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