Jazyk HTML

Download Report

Transcript Jazyk HTML 

Ústav automatizace inženýrských úloh a informatiky
FAST VUT v Brně
0U2 - Základy informatiky a výpočetní techniky 2
Dynamické HTML
JavaScript - 1. část
Objektový model dokumentu
HTML elementy jsou OBJEKTY.
 Každý objekt : má vlastnosti – atributy
může reagovat na události
 Identifikace objektu:
atributy id – jednoznačná identifikace
name – několik objektů může mít stejné name
Hierarchická struktura objektů:
Reprezentuje otevřené okno v prohlížeči
Window
HTML dokument v daném okně
Document
all
Kontejnery objektů
odpovídajících
určitému typu
elementu .
forms
images
a další
Kontejner všech objektů uvnitř
daného dokumentu. Každý
HTML element má zde svůj
objekt.
Objektový model dokumentu
window
location
frames
history
navigator
event
screen
document
all
anchors
body
forms
frames
images
links
scripts
selection
styleSheets
forms[0]
name= "formular1"
method= "post"
...
input
type = "text"
name = "polozka1"
value = "implicitní obsah"
...
Pozn: Kontejnery
Kolekce - s (např.forms)
Příklad: Odkaz na vlastnost value prvku formuláře:
1. document.forms[0].polozka1.value
2. document.all.polozka1.value
3. document.formular1.polozka1.value
Události, na které může objekt reagovat
Události spojené s myší
onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onfocus
onblur
vznik události
při kliknutí myší na daném prvku
při dvojitém kliknutí myší na daném prvku
při stisknutém tlačítku myši na prvku
při uvolnění tlačítka myši na prvku
při ponechání myši nad prvkem
při najetí myši na prvek
při opuštění prvku myší
při ponechání myši nad prvkem (u položek formuláře)
při opuštění prvku myší (u položek formuláře)
Události spojené s klávesnicí
vznik události
onkeypress
při rychlém stisku klávesy na prvku
onkeydown
při stisknuté klávese na prvku
onkeyup
při uvolnění klávesy
Další události a obsluha události
 Události spojené s formulářem vznik události
onsubmit
při odeslání formuláře
onreset
při vymazání formuláře
onselect
při výběru textu v textovém poli
onchange
při změně hodnoty v prvku formuláře
 Další události
vznik události
onload
při dokončení zavedení stránky se všemi jejími elementy
onunload
po odstranění obsahu dokumentu z okna nebo rámcem
Tyto události lze použít jen v prvcích BODY a FRAMESET.
 OBSLUHA UDÁLOSTI
<PRVEK Událost = “skript”>
Př:
<INPUT type=“button” value=“Výpočet” onclick=“Vypoc()”>
Volání funkce, ve které je zapsán program (skript) jenž se má provést.
Příklad - obsluha události
<HTML>
<HEAD><TITLE>Pokusná stránka</TITLE></HEAD>
<BODY onload="alert('Detekována šikmo položená podložka pod
myš!')">
<H1 align="center">Vítejte!</H1>
<HR>
<FORM>
<INPUT type="button" value="Zhasni"
onclick="document.bgColor='black'">
<INPUT type="button" value="Rozsviť"
onclick="document.bgColor='lightyellow'">
</FORM>
<HR>
Pokračování příkladu
<H2 >Vyberte si vlajku!</H2>
<FORM name="vlajky">
<INPUT type="text" name="zeme" size="20">
</FORM>
<IMG src="images/flag_cz.gif" border="1" width="49" height="28"
onmouseover="document.vlajky.zeme.value='Česká republika'"
onmouseout="document.vlajky.zeme.value=''">
<IMG src="images/flag_de.gif" border="1" width="49" height="28"
onmouseover="document.vlajky.zeme.value='Německo'"
onmouseout="document.vlajky.zeme.value=''">
<IMG src="images/flag_gb.gif" border="1" width="49" height="28"
onmouseover="document.vlajky.zeme.value='Velká Británie'"
onmouseout="document.vlajky.zeme.value=''">
<HR>
Pokračování příkladu
<FORM>
<INPUT type="button" value="Česká republika"
onclick="document.all.vlajka.src='images/flag_cz.gif'">
<INPUT type="button" value="Německo"
onclick="document.all.vlajka.src='images/flag_de.gif'">
<INPUT type="button" value="Velká Británie"
onclick="document.all.vlajka.src='images/flag_gb.gif'">
</FORM>
<IMG src="images/flag_cz.gif" id="vlajka" border="1"
width="49" height="28">
<HR>
Pokračování příkladu
<FORM>
<INPUT type="button" value="Zmenšit"
onclick="document.all.pernstejn.width='137';
document.all.pernstejn.height='100'">
<INPUT type="button" value="Původní velikost"
onclick="document.all.pernstejn.width='275';
document.all.pernstejn.height='201'">
<INPUT type="button" value="Zvětšit"
onclick="document.all.pernstejn.width='550';
document.all.pernstejn.height='402'">
</FORM>
<IMG src="images/pernstejn1.jpg" id="pernstejn"
width="275" height="201">
</BODY>
</HTML>
JavaScript
1. část
základní pojmy a principy
Vytvoření programu
ZADÁNÍ
přesně stanovený postup, podle kterého jde vyřešit dané zadání
ALGORITMUS
LADĚNÍ
ZDROJOVÝ TEXT
PROGRAMU
PŘEKLAD /
INTERPRETACE
PROGRAM
Logické
chyby
algoritmus zapsaný v určitém programovacím jazyku
Překlad
:
Vývoj programovacích
jazyků:
Převod
zdrojového
textu
do strojového kódu
Počítač
Člověk
Odhalení
syntaktických chyb
Assembler
Dva tradiční principy:
Fortran
Kompilace: celý zdrojový textAlgol,
programu
nejprve přeloží do
Pascal,seBasic
strojového kódu. Teprve přeložený program lze spustit.
C, C++, Java, Visual Basic
(Pascal, Java)
Vývojová
prostředí
Interpretace:JavaScript,
postupnáVBScript
analýza příkazů
zdrojového
textu
(Delphi, Visual Studio)
programu až při běhu programu (JavaScript)
spustitelný strojový kód, do kterého byl převeden zdrojový text
Syntaktické
chyby
logické chyby – program nepracuje dle
předpokladů
Vývojový diagram – příklad
ANO
Funguje ten krám?
NE
ANO
Nešťourejte se v něm
TECHNOLOGICKÉ SCHÉMA
ŘEŠENÍ PROBLÉMŮ
Šťoural jste
se v něm?
NE
Jste nemehlo
Schytáte to?
NE
Viděl vás někdo?
Ututlejte to
Povedlo se?
ANO
Není co řešit
ANO
ANO
NE
NE
Jste blb
Máte to na
koho svést?
ANO
NE
Nechte to plavat
Programy a skripty – základní pojmy
Program
• Posloupnost příkazů, které mohou být vykonávány počítačem.
• Příkazy jsou prováděny sekvenčně tak, jak jsou umístěné
v těle programu.
• Sekvenčnost může být potlačena použitím speciálních příkazů
(cyklus, větvení).
• Příkazy = instrukce (posloupnosti 1 a 0)
Zdrojový text programu
• Text vytvořený textovým editorem případně vyspělejšími nástroji
(obyčejný textový soubor).
• Je tvořen posloupností příkazů patřících do syntaxe některého
programovacího jazyka.
Skript
• Program, jehož zdrojový text je součástí WWW stránky.
• Skriptovací jazyky: JavaScript, JScript
VBScript (Visual Basic Script)
START
x! = 1  2  …  (x – 1)  x
a=1
5! = 1  2  3  4  5 = 120
f=1
Zdrojový text programu:
a5
ANO
f=f·a
a=a+1
NE
a = 1;
STOP
Program
VÝVOJOVÝ DIAGRAM
Algoritmus, program – faktoriál
f = 1;
while (a <= 5)
{
f = f * a;
a = a + 1;
}
Po vykonání programu, bude proměnná f obsahovat hodnotu 120.
Využití skriptů pro vytvoření dynamické stránky
Dynamická stránka
• aktivně mění svůj obsah v reakci na činnost uživatele
• zpracování
na straně serveru ASP, PHP, CGI
na straně klienta – JavaScript, VBScript
JavaScript
• objektově orientovaný programovací jazyk
• interpretovaný jazyk
Syntaktická geneze JavaScriptu:
C
C++
Java
JavaScript
JavaScript umožňuje:
• obsluhu událostí, provádění výpočtů, vkládání výsledků zpět do dokumentu
JavaScript neumožňuje:
• zápis do souborů a čtení dat ze souborů na straně klienta, nemá příkazy
pro grafiku
Vložení skriptu do HTML dokumentu:
Zdrojový text skriptu je vložen do HTML dokumentu mezi
značky <SCRIPT> a </SCRIPT> v hlavičce nebo těle
dokumentu:
<SCRIPT language="JavaScript">
text skriptu v jazyku JavaScript
</SCRIPT>
Skript lze otevřít z externího souboru:
<SCRIPT language="JavaScript" src="Soubor.js">
</SCRIPT>
Pokud prohlížeč neumí pracovat se skripty, je vhodné uzavřít
kód skriptu do komentářových závorek HTML:
<!-- text skriptu v JavaScriptu… -->
Jazyk JavaScript
Co může obsahovat zdrojový text skriptu:
PROMĚNNÁ
• pojmenovaný úsek paměti, pro uložení hodnoty,
se kterou skript pracuje
• velikost přidělené paměti závisí na typu uložené hodnoty
(určí se při prvním vložení hodnoty do proměnné)
• hodnota proměnné se může během provádění skriptu měnit
• vložení hodnoty do proměnné – přiřazovacím příkazem
• jméno proměnné - tzv. identifikátor
Identifikátor:
• Posloupnost písmen a číslic začínající písmenem
• k pojmenování proměnných, konstant, objektů
a funkcí
• rozlišují se malá a VELKÁ písmena !!
(case –sensitive)
Příklady: max, a1, Souc, souc, SOUC
Deklarace proměnné
• umožňuje nadefinovat používané proměnné
a vložit do nich počáteční hodnoty
• je nepovinná
• zpravidla se uvádí na začátku skriptu
Příklad:
var suma;
var ab1;
totéž lze zapsat zkráceně takto:
var suma, ab1;
• v deklaraci lze proměnné přiřadit hodnotu:
var suma=0, ab1=10;
Co může dále obsahovat text skriptu:
JavaScript je netypový jazyk (na rozdíl od Javy, C, Pascalu,...)
Z toho důvodu lze do stejné proměnné přiřadit číslo a později ve
skriptu třeba text:
var ab1;
ab1 = 10;
…
ab1 = ”ahoj”;
KONSTANTA
• hodnota konstanty se během provádění skriptu nemění
• Tvar konstant:
literál
25 true false
řetězec “ TEXT ”
Co může dále obsahovat text skriptu:
Typy hodnot v JavaScriptu
• číslo - celá a desetinná čísla v desítkové
102
21.51234
5.3e02
nebo šestnáctkové soustavě
• řetězec - znakový řetězec (text)
“Toto je řetězec”
-4.448E-4
0x1FB 0xFF 0x10
‘Toto je také řetězec’
• logické hodnoty
typ boolean (pravda nebo nepravda)
true
false
KOMENTÁŘE
• texty, které prohlížeč ignoruje, programátorovi
slouží jako vysvětlivky
• texty mezi // a koncem řádku nebo text mezi znaky /* … */
Příklad: / / jednořádkový text, který prohlížeč ignoruje
/* víceřádkový vysvětlivkový text, který prohlížeč ignoruje */