Javascript. Javascript - jazyk

Návrh a tvorba WWW stránek

1/30

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 • dnes využíván spíše v technologii AJAX, pomocí které lze měnit obsah stránky bez nutnosti jejího obnovení

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


Co je dobré znát předem • HTML • formuláře v HTML a jejich obsluhu • možnosti prohlížečů a jejich verzí

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

2/30


3/30

Javascript v HTML •

v případě HTML interpretuje prohlížeč značky, v případě javascriptu již vykonává program

•

možnosti, jak vložit javascript do HTML dokumentu: 1. vnitřní deklarace – skript je přímo součástí HTML 2. vnější (externí) deklarace – v samostatném souboru 3. řádková deklarace – na místě atributů ve značkách HTML

•

všechny uvedené způsoby lze libovolně kombinovat


4/30

Vnitřní deklarace javascriptu • mezi značky <script> a • skript je přímo součástí HTML 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ě • nepovinný atribut type="text/javascript" • nepovinné atributy language, src <script type="text/javascript" language="javascript"> function Pozdrav() { alert ('Ahoj');

}

…


5/30

Externí deklarace javascriptu • nejčastější způsob použití • deklarace v externím souboru <script type="text/javascript" src="externi_skript.js">

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

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


6/30

Základní syntaxe javascriptu • oddělování příkazů středníkem – někdy lze vynechat • velikost písmen – case-sensitive – (proměná ≠ Proměnná) • použití apostrofů a uvozovek – mají stejný význam

• escape sekvence – zobrazení speciálních znaků

• komentáře – stejně jako v C (C++), – navíc • logické hodnoty – true, false • objekty a metody – oddělují se tečkou (objekt.podobjekt.vlastnost)


7/30

Proměnné v javascriptu • netypové, nemusí se deklarovat, deklarace uvozena var var x="hodnota";

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

• automatické určení typu proměnné při prvním použití <script type= " text/javascript" > y = 13; y = y * 2 * 7 * 11; text = "Hezké číslo je " + y; document.write(text);

• automatická konverze typu proměnných x = 1+1; x = 1+'1';

// výsledkem je 2 // výsledkem je 11


8/30

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 === identita < <= >= > aritmetické porovnávání && || logické AND (a zároveň), logické OR (nebo) ! logické NOT (negace)


9/30

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;break; case hodnota2 : příkaz2;break; ... default : příkazx; }


10/30

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; }


11/30

Funkce • deklarace funkce – většinou v hlavičce dokumentu function jmenoFunkce([parametry]) { příkazy; [return hodnota]; };

• volání funkce v těle dokumentu jmenoFunkce([hodnota, hodnota]);

• volání funkce na základě události v těle HTML dokumentu

• volání funkce, která vrací hodnotu proměnná = jmenoFunkce([parametry]);

• deklarace lokální proměnné za klíčovým slovem var


12/30

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, strukturované datové typy (objekty, pole) jsou předávány odkazem


13/30

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; // deklarace var Retezec='TEXT'; var Objekt = new Object();Objekt.jazyk='čeština'; Vypis(Cislo,Retezec,Objekt); // kontrolní výpis Nastav(Cislo,Retezec,Objekt); // změna hodnot Vypis(Cislo,Retezec,Objekt); // výpis po změně


14/30

Volání parametrů odkazem a hodnotou (3/3) Výsledek: Číslo:10 Řetězec: TEXT Objekt.jazyk: čeština Číslo: 10 Řetězec: TEXT /*string je rovněž jednoduchý typ*/ Objekt.jazyk: PHP


15/30

Objektový model javascriptu • objektovost javascriptu znamená, že všechny vlastnosti a metody 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";


16/30

Hierarchie objektů window location - frames - history - navigator - event - screen – document - form

links - anchors - images - filters - forms - applets - embeds plugins - frames - scripts - selection - styleSheets - body - all - style • 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 prohlížečů


17/30

Metody a vlastnosti objektu window • window.alert(); • window.blur(); • window.close(); • window.confirm(); • window.focus(); • window.open(); • window.print(); • window.prompt(); • window.resizeBy(); • window.resizeTo(); • window.scrollBy();

// zobrazení hlášky v okně // posunutí vybraného okna do pozadí // zavření okna (v FF pouze pro window.open) // hláška ano-ne (vrací true/false) // posunutí vybraného okna do popředí // vytvoření nového okna // tisk dokumentu // hláška pro zadání údajů // změna velikosti okna o danou hodnotu // změna velikosti na danou hodnotu // scrollování dokumentu


18/30

Metody objektu location • location.href(URL); • location.reload(boolean); • location.replace();

// načte URL do dokumentu // znovunačtení dokumentu // nahradí dokument jiným

Vlastnosti objektu location • protocol • pathname • hostname

// vrátí protokol (http, file) // cesta k dané stránce //jméno hostitelského serveru (IP)

Týká se adresy aktuálního dokumentu


19/30

Metody objektu history • history.back(); • history.back(3}; • history.forward(2); • history.go(-1);

// o krok zpět // o 3 kroky zpět // vpřed o 2 kroky // 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


20/30

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

Vlastnosti objektu screen • height • width • availHeight • availWidth • colorDepth

// výška (rozlišení) // šířka (rozlišení) // dostupná výška okna // dostupná šířka okna // barevná hloubka

Týká se vlastností obrazovky


Vlastnosti objektu navigator • appName • appVersion • onLine • platform • appCodeName • javaEnabled

// název prohlížeče (např. "Netscape") // verze prohlížeče (IE vraci "4.0") // vrací true/false podle stavu připojení // operační systém klienta // kódové jméno prohlížeče, vždy Mozilla // podpora javy v prohlížeči

Týká se typu a verze prohlížeče

21/30


22/30

Metody objektu event • AltKey • CtrlKey • ShiftKey • button • clientX • clientY • keyCode • ScreenX • ScreenY

// vrací true, pokud byl stisknut [Alt] // vrací true, pokud bylo stisknuto [Ctrl] // vrací true, pokud byl stisknut shift // vrací číslo stisknutého tlačítka(0 - žádné, 1 - levé, 2 - pravé, 4 - prostřední // souřadnice x kurzoru v okně prohlížeče // souřednice y kurzoru v okně prohlížeče // vrací ascii kod stisknuté klávesy // souřadnice x kurzoru vzhledem k obrazovce // 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, style, … • metody – write • vlastnosti

Týká se práce s prvky v dokumentu

23/30


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

24/30


25/30

Použití objektů dokumentu • změna obrázku … zkráceně … onmouseover="document.jmeno.src='druhy.jpg'"

• změna hodnoty prvku formuláře

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


Další objekty • String – práce s řetězci – http://www.tvorba-webu.cz/javascript/string.php • Math – matematické výrazy – http://www.tvorba-webu.cz/javascript/math.php • Array – práce s polem – http://www.tvorba-webu.cz/javascript/array.php • Datum a čas – http://www.tvorba-webu.cz/javascript/datum.php

26/30


27/30

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 – názvy nejsou case-sensitive • odchycení stisku tlačítka myši:


28/30

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)
…

• onfocus, onblur – při aktivaci (deaktivaci) políčka

• onchange – při změně hodnoty vstupního pole • onselect – při výběru textu myší (v celém body)


29/30

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

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

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


30/30

Bookmarklet • krátký javascript svázaný s odkazem (max ± 2000 znaků)

Javascript. Javascript - jazyk

Recommend Documents